-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy paththeme-tokens.css
More file actions
146 lines (125 loc) · 5.79 KB
/
Copy paththeme-tokens.css
File metadata and controls
146 lines (125 loc) · 5.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/* =============================================================================
VALIDATOR BEAT — THEME (edit this file to change colors)
Light surface is a warm, ecosystem-neutral cream paper with muted sage / earth
signal colors (green = good, yellow = partial, red = SPOF). The cream palette
reads as a coalition surface rather than an Obol-branded one, and applies across
the whole stack — landing, assessment, methodology — via the alias layer below
and the obol-ui bridge (styles/obol-bridge.css).
Only change the hex values in the block below. The rest of the app maps
these automatically (CSS variables + pizza SVG colors in lib/theme/tokens.ts).
============================================================================= */
:root {
/* ---- Brand accent (links, primary buttons, wordmark highlight) ----
Muted deep sage-green, readable on the cream paper. */
--theme-brand: #2c7a64; /* deep sage — primary CTA / links */
--theme-brand-hover: #235f4e; /* pressed / hover sage */
--theme-brand-highlight: #2fe4ab; /* mint — decorative tints / confetti */
/* ---- Page surfaces — warm cream ---- */
--theme-surface-page: #f6f4ec; /* paper */
--theme-surface-card: #fffefa; /* raised paper */
--theme-surface-panel: #edf1e7; /* alternating section band */
--theme-surface-hover: #e7e2d3;
--theme-border: #e6e1d1; /* hairline */
--theme-border-strong: #d8d2bf;
/* ---- Text — near-black teal ink ramp ---- */
--theme-text-primary: #0e1b1d;
--theme-text-secondary: #45565a;
--theme-text-muted: #7d8a86;
--theme-text-faint: #aab3ad;
--theme-text-on-brand: #ffffff;
/* ---- Pizza / risk slices (green = good, yellow = partial, red = SPOF) ----
Muted earthy variants tuned to sit calmly on cream. */
--theme-risk-green: #3a9e80;
--theme-risk-yellow: #cf9a3a;
--theme-risk-red: #c46044;
/* ---- Pizza ring tints (center progress ring; darker than fill on cream) ---- */
--theme-risk-green-ring: #1f7a5e;
--theme-risk-yellow-ring: #a8761f;
--theme-risk-red-ring: #a64428;
/* ---- Pizza plate / empty wedge ---- */
--theme-pizza-plate: #fffdf7;
--theme-pizza-empty: #e9e5d8;
--theme-pizza-empty-stroke: #d2cbb8;
--theme-pizza-ink: #0e1b1d;
}
/* =============================================================================
DARK THEME — Obol-branded dark palette, mirrors the standalone prototype.
Activated by data-theme="dark" on <html> (see next-themes ThemeProvider in _app).
Overrides the --theme-* source values; the alias layer below recomputes
automatically. --bg-01..05 are re-pointed past obol-ui's --colors-* tokens.
============================================================================= */
:root[data-theme="dark"] {
/* ---- Brand accent (bright mint reads on dark surfaces) ---- */
--theme-brand: #2fe4ab; /* obolGreen */
--theme-brand-hover: #0f7c76;
--theme-brand-highlight: #b6ea5c; /* lime */
/* ---- Page surfaces ---- */
--theme-surface-page: #091011;
--theme-surface-card: #111f22;
--theme-surface-panel: #182d32;
--theme-surface-hover: #243d42;
--theme-border: #2d4d53;
--theme-border-strong: #3a5f66;
/* ---- Text ---- */
--theme-text-primary: #e1e9eb;
--theme-text-secondary: #97b2b8;
--theme-text-muted: #667a80;
--theme-text-faint: #475e64;
--theme-text-on-brand: #091011;
/* ---- Pizza / risk slices ---- */
--theme-risk-green: #2fe4ab;
--theme-risk-yellow: #e8b339;
--theme-risk-red: #dd603c;
--theme-risk-green-ring: #6ff0c8;
--theme-risk-yellow-ring: #f0c95f;
--theme-risk-red-ring: #e8856a;
/* ---- Pizza plate / empty wedge ---- */
--theme-pizza-plate: #0a1214;
--theme-pizza-empty: #16282d;
--theme-pizza-empty-stroke: #2d4d53;
--theme-pizza-ink: #e1e9eb;
/* Re-point surface aliases past obol-ui's scoped --colors-* tokens. */
--bg-01: var(--theme-surface-page);
--bg-02: var(--theme-surface-card);
--bg-03: var(--theme-surface-panel);
--bg-04: var(--theme-surface-hover);
--bg-05: var(--theme-border);
/* --ice diverges from brand in the dark palette (muted ice-blue). */
--ice: #9cc2c9;
}
/* ---- App aliases (handoff CSS; mirror obol-ui $bg01 / $obolGreen tokens) ---- */
:root {
--bg-01: var(--colors-bg01, var(--theme-surface-page));
--bg-02: var(--colors-bg02, var(--theme-surface-card));
--bg-03: var(--colors-bg03, var(--theme-surface-panel));
--bg-04: var(--colors-bg04, var(--theme-surface-hover));
--bg-05: var(--colors-bg05, var(--theme-border));
--brand: var(--theme-brand);
--obol-green: var(--brand);
--obol-green-deep: var(--theme-brand-hover);
--obol-green-tint: color-mix(in srgb, var(--theme-brand) 8%, transparent);
--obol-green-2x: color-mix(in srgb, var(--theme-brand) 20%, transparent);
--lime: var(--theme-brand-highlight);
--gold: var(--theme-risk-yellow);
--error: var(--theme-risk-red);
--error-bright: #ef5350;
--fg-1: var(--theme-text-primary);
--fg-2: var(--theme-text-secondary);
--fg-3: var(--theme-text-muted);
--fg-4: var(--theme-text-faint);
--ice: var(--theme-brand);
--on-accent: var(--theme-text-on-brand);
--vb-green: var(--theme-risk-green);
--vb-yellow: var(--theme-risk-yellow);
--vb-red: var(--theme-risk-red);
--vb-green-t: color-mix(in srgb, var(--theme-risk-green) 14%, transparent);
--vb-yellow-t: color-mix(in srgb, var(--theme-risk-yellow) 14%, transparent);
--vb-red-t: color-mix(in srgb, var(--theme-risk-red) 14%, transparent);
--vb-green-b: color-mix(in srgb, var(--theme-risk-green) 50%, transparent);
--vb-yellow-b: color-mix(in srgb, var(--theme-risk-yellow) 50%, transparent);
--vb-red-b: color-mix(in srgb, var(--theme-risk-red) 50%, transparent);
--vb-plate: var(--theme-pizza-plate);
--vb-empty: var(--theme-pizza-empty);
--vb-empty-stroke: var(--theme-pizza-empty-stroke);
--vb-ink: var(--theme-pizza-ink);
}