fold-ng 0.0.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +69 -0
- package/README.md +361 -4
- package/fesm2022/fold-ng.mjs +5820 -0
- package/fesm2022/fold-ng.mjs.map +1 -0
- package/llms.txt +45 -0
- package/package.json +60 -10
- package/tokens/index.css +14 -0
- package/tokens/primitives.css +113 -0
- package/tokens/scales.css +106 -0
- package/tokens/semantic.css +704 -0
- package/tsconfig.lib.tsbuildinfo +1 -0
- package/types/fold-ng.d.ts +3840 -0
- package/types/fold-ng.d.ts.map +1 -0
|
@@ -0,0 +1,704 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
SH3PHERD · Design tokens — TIER 2: SEMANTIC
|
|
3
|
+
------------------------------------------------------------
|
|
4
|
+
Role-based tokens. This is the surface components consume.
|
|
5
|
+
Each token names a ROLE (page background, header, warning…)
|
|
6
|
+
and points at a TIER-1 primitive. Re-theming = re-pointing
|
|
7
|
+
here, never editing a hex.
|
|
8
|
+
|
|
9
|
+
UMBRA (the dark theme) is the base: it lives on :root, so an
|
|
10
|
+
app with no theme attribute renders umbra. Every other theme is
|
|
11
|
+
an explicit override applied by setting `data-theme="<name>"`
|
|
12
|
+
on <html> (or any ancestor — a subtree themes independently).
|
|
13
|
+
|
|
14
|
+
The status families (primary/info/warning/alert) each expose a
|
|
15
|
+
tinted-chip triad on top of the solid base:
|
|
16
|
+
<role> solid fill
|
|
17
|
+
<role>-text the readable tint for text/icon on the surface
|
|
18
|
+
<role>-surface the faint tinted background
|
|
19
|
+
<role>-border the surface's border
|
|
20
|
+
Surface/border are derived with color-mix on a primitive so the
|
|
21
|
+
palette stays pure solids — no rgba primitives.
|
|
22
|
+
|
|
23
|
+
Keep this list in lock-step with tokens.catalog.ts — the
|
|
24
|
+
contract test fails if they drift.
|
|
25
|
+
============================================================ */
|
|
26
|
+
|
|
27
|
+
/* ── Base theme: UMBRA (dark) ─────────────────────────────── */
|
|
28
|
+
:root {
|
|
29
|
+
/* Surfaces (bg- = a fill role, darkest chrome → lightest page) */
|
|
30
|
+
--fold-color-bg-page: var(--fold-ref-ink-850); /* page background */
|
|
31
|
+
--fold-color-bg-header: var(--fold-ref-ink-950); /* top header bar */
|
|
32
|
+
--fold-color-bg-rail-primary: var(
|
|
33
|
+
--fold-ref-ink-925
|
|
34
|
+
); /* rail 1 — app menu */
|
|
35
|
+
--fold-color-bg-rail-secondary: var(
|
|
36
|
+
--fold-ref-ink-900
|
|
37
|
+
); /* rail 2 — workspace menu */
|
|
38
|
+
--fold-color-bg-rail-tertiary: color-mix(
|
|
39
|
+
in srgb,
|
|
40
|
+
var(--fold-ref-white) 3%,
|
|
41
|
+
transparent
|
|
42
|
+
); /* rail 3 — faint overlay */
|
|
43
|
+
|
|
44
|
+
/* Primary / accent */
|
|
45
|
+
--fold-color-primary: var(--fold-ref-teal-500);
|
|
46
|
+
--fold-color-primary-strong: var(--fold-ref-teal-400); /* hover/active */
|
|
47
|
+
--fold-color-on-primary: var(
|
|
48
|
+
--fold-ref-white
|
|
49
|
+
); /* text/icon on a solid primary fill */
|
|
50
|
+
--fold-color-primary-text: var(--fold-ref-teal-400);
|
|
51
|
+
--fold-color-primary-surface: color-mix(
|
|
52
|
+
in srgb,
|
|
53
|
+
var(--fold-ref-teal-500) 14%,
|
|
54
|
+
transparent
|
|
55
|
+
);
|
|
56
|
+
--fold-color-primary-border: color-mix(
|
|
57
|
+
in srgb,
|
|
58
|
+
var(--fold-ref-teal-500) 35%,
|
|
59
|
+
transparent
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
/* Info (purple) */
|
|
63
|
+
--fold-color-info: var(--fold-ref-purple-500);
|
|
64
|
+
--fold-color-info-text: var(--fold-ref-purple-300);
|
|
65
|
+
--fold-color-info-surface: color-mix(
|
|
66
|
+
in srgb,
|
|
67
|
+
var(--fold-ref-purple-400) 12%,
|
|
68
|
+
transparent
|
|
69
|
+
);
|
|
70
|
+
--fold-color-info-border: color-mix(
|
|
71
|
+
in srgb,
|
|
72
|
+
var(--fold-ref-purple-400) 30%,
|
|
73
|
+
transparent
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
/* Warning (amber) */
|
|
77
|
+
--fold-color-warning: var(--fold-ref-amber-500);
|
|
78
|
+
--fold-color-warning-text: var(--fold-ref-amber-300);
|
|
79
|
+
--fold-color-warning-surface: color-mix(
|
|
80
|
+
in srgb,
|
|
81
|
+
var(--fold-ref-amber-500) 14%,
|
|
82
|
+
transparent
|
|
83
|
+
);
|
|
84
|
+
--fold-color-warning-border: color-mix(
|
|
85
|
+
in srgb,
|
|
86
|
+
var(--fold-ref-amber-300) 30%,
|
|
87
|
+
transparent
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
/* Alert (red) */
|
|
91
|
+
--fold-color-alert: var(--fold-ref-red-500);
|
|
92
|
+
--fold-color-alert-text: var(--fold-ref-red-400);
|
|
93
|
+
--fold-color-alert-surface: color-mix(
|
|
94
|
+
in srgb,
|
|
95
|
+
var(--fold-ref-red-500) 12%,
|
|
96
|
+
transparent
|
|
97
|
+
);
|
|
98
|
+
--fold-color-alert-border: color-mix(
|
|
99
|
+
in srgb,
|
|
100
|
+
var(--fold-ref-red-400) 35%,
|
|
101
|
+
transparent
|
|
102
|
+
);
|
|
103
|
+
|
|
104
|
+
/* Success (green) */
|
|
105
|
+
--fold-color-success: var(--fold-ref-green-500);
|
|
106
|
+
--fold-color-success-text: var(--fold-ref-green-300);
|
|
107
|
+
--fold-color-success-surface: color-mix(
|
|
108
|
+
in srgb,
|
|
109
|
+
var(--fold-ref-green-500) 14%,
|
|
110
|
+
transparent
|
|
111
|
+
);
|
|
112
|
+
--fold-color-success-border: color-mix(
|
|
113
|
+
in srgb,
|
|
114
|
+
var(--fold-ref-green-300) 30%,
|
|
115
|
+
transparent
|
|
116
|
+
);
|
|
117
|
+
|
|
118
|
+
/* Text */
|
|
119
|
+
--fold-color-text: var(--fold-ref-slate-50);
|
|
120
|
+
--fold-color-text-secondary: var(--fold-ref-slate-400);
|
|
121
|
+
--fold-color-text-muted: var(--fold-ref-slate-500);
|
|
122
|
+
--fold-color-text-faded: var(--fold-ref-slate-700);
|
|
123
|
+
|
|
124
|
+
/* Card — a solid raised content surface (opaque, unlike the alpha overlays) */
|
|
125
|
+
--fold-color-surface-card: var(--fold-ref-ink-800);
|
|
126
|
+
/* Sunken — a deeper solid surface for large content containers (data tables,
|
|
127
|
+
page-level cards). Sits below `surface-card`: darker than the card, lighter
|
|
128
|
+
than the page. */
|
|
129
|
+
--fold-color-surface-sunken: color-mix(
|
|
130
|
+
in srgb,
|
|
131
|
+
var(--fold-ref-ink-800) 35%,
|
|
132
|
+
var(--fold-ref-ink-850)
|
|
133
|
+
);
|
|
134
|
+
|
|
135
|
+
/* Neutral surfaces + border — alpha overlays (white on dark) */
|
|
136
|
+
--fold-color-surface-subtle: color-mix(
|
|
137
|
+
in srgb,
|
|
138
|
+
var(--fold-ref-white) 3%,
|
|
139
|
+
transparent
|
|
140
|
+
);
|
|
141
|
+
--fold-color-surface-raised: color-mix(
|
|
142
|
+
in srgb,
|
|
143
|
+
var(--fold-ref-white) 5%,
|
|
144
|
+
transparent
|
|
145
|
+
);
|
|
146
|
+
--fold-color-surface-hover: var(--fold-ref-ink-700); /* solid raised hover */
|
|
147
|
+
--fold-color-border: color-mix(
|
|
148
|
+
in srgb,
|
|
149
|
+
var(--fold-ref-white) 8%,
|
|
150
|
+
transparent
|
|
151
|
+
);
|
|
152
|
+
/* Fainter hairline — row dividers, subtle panel edges (below `border`). */
|
|
153
|
+
--fold-color-border-subtle: color-mix(
|
|
154
|
+
in srgb,
|
|
155
|
+
var(--fold-ref-white) 4%,
|
|
156
|
+
transparent
|
|
157
|
+
);
|
|
158
|
+
|
|
159
|
+
/* Glass — translucent frosted overlay (panels, floating menus) */
|
|
160
|
+
--fold-color-glass: color-mix(
|
|
161
|
+
in srgb,
|
|
162
|
+
var(--fold-ref-ink-950) 55%,
|
|
163
|
+
transparent
|
|
164
|
+
);
|
|
165
|
+
--fold-color-glass-border: color-mix(
|
|
166
|
+
in srgb,
|
|
167
|
+
var(--fold-ref-white) 13%,
|
|
168
|
+
transparent
|
|
169
|
+
);
|
|
170
|
+
|
|
171
|
+
/* Scrim — a darkening veil behind the mobile nav drawer. */
|
|
172
|
+
--fold-color-scrim: color-mix(
|
|
173
|
+
in srgb,
|
|
174
|
+
var(--fold-ref-black) 55%,
|
|
175
|
+
transparent
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* ── Named surfaces ───────────────────────────────────────────
|
|
180
|
+
A `[data-surface]` (stamped by the `[foldSurface]` directive) resolves its own
|
|
181
|
+
text, so a theme that re-declares `--fold-color-text` for one surface actually
|
|
182
|
+
lands there — a custom-property override reaches only what is resolved inside
|
|
183
|
+
the subtree, never a colour already inherited from an ancestor. Inert under a
|
|
184
|
+
uniform theme; the seam a mixed theme (navi) overrides across. */
|
|
185
|
+
[data-surface] {
|
|
186
|
+
color: var(--fold-color-text);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* ── Elevated surfaces ────────────────────────────────────────
|
|
190
|
+
A `[data-elevated]` (stamped by the `[foldElevated]` directive) is a raised
|
|
191
|
+
card: radius + shadow, riding on the element's own background so its colour
|
|
192
|
+
stays its own. It does NOT inset itself — elevation ≠ inset. The gutter around
|
|
193
|
+
a floating region is the *container's* job (padding on the slot), never a
|
|
194
|
+
child margin, so a `height: 100%` region fits with no overflow. Radius/shadow
|
|
195
|
+
are tokenised, so a scope can dial the elevation without a prop. */
|
|
196
|
+
[data-elevated] {
|
|
197
|
+
border-radius: var(--fold-surface-radius, var(--fold-radius-lg));
|
|
198
|
+
box-shadow: var(--fold-surface-shadow, var(--fold-shadow-md));
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/* ── Override theme: LUMEN (light) ────────────────────────── */
|
|
202
|
+
[data-theme="lumen"] {
|
|
203
|
+
/* Surfaces */
|
|
204
|
+
--fold-color-bg-page: var(--fold-ref-cloud-100);
|
|
205
|
+
--fold-color-bg-header: var(--fold-ref-white);
|
|
206
|
+
--fold-color-bg-rail-primary: var(--fold-ref-cloud-150);
|
|
207
|
+
--fold-color-bg-rail-secondary: var(--fold-ref-cloud-50);
|
|
208
|
+
--fold-color-bg-rail-tertiary: color-mix(
|
|
209
|
+
in srgb,
|
|
210
|
+
var(--fold-ref-black) 2%,
|
|
211
|
+
transparent
|
|
212
|
+
);
|
|
213
|
+
|
|
214
|
+
/* Primary / accent — brand mutes on light, hover darkens further */
|
|
215
|
+
--fold-color-primary: var(--fold-ref-teal-550);
|
|
216
|
+
--fold-color-primary-strong: var(--fold-ref-teal-600);
|
|
217
|
+
--fold-color-on-primary: var(--fold-ref-white);
|
|
218
|
+
--fold-color-primary-text: var(--fold-ref-teal-500);
|
|
219
|
+
--fold-color-primary-surface: color-mix(
|
|
220
|
+
in srgb,
|
|
221
|
+
var(--fold-ref-teal-500) 8%,
|
|
222
|
+
transparent
|
|
223
|
+
);
|
|
224
|
+
--fold-color-primary-border: color-mix(
|
|
225
|
+
in srgb,
|
|
226
|
+
var(--fold-ref-teal-500) 25%,
|
|
227
|
+
transparent
|
|
228
|
+
);
|
|
229
|
+
|
|
230
|
+
/* Info (purple) */
|
|
231
|
+
--fold-color-info: var(--fold-ref-purple-600);
|
|
232
|
+
--fold-color-info-text: var(--fold-ref-purple-500);
|
|
233
|
+
--fold-color-info-surface: color-mix(
|
|
234
|
+
in srgb,
|
|
235
|
+
var(--fold-ref-purple-600) 8%,
|
|
236
|
+
transparent
|
|
237
|
+
);
|
|
238
|
+
--fold-color-info-border: color-mix(
|
|
239
|
+
in srgb,
|
|
240
|
+
var(--fold-ref-purple-600) 22%,
|
|
241
|
+
transparent
|
|
242
|
+
);
|
|
243
|
+
|
|
244
|
+
/* Warning (amber) */
|
|
245
|
+
--fold-color-warning: var(--fold-ref-amber-600);
|
|
246
|
+
--fold-color-warning-text: var(--fold-ref-amber-550);
|
|
247
|
+
--fold-color-warning-surface: color-mix(
|
|
248
|
+
in srgb,
|
|
249
|
+
var(--fold-ref-amber-600) 8%,
|
|
250
|
+
transparent
|
|
251
|
+
);
|
|
252
|
+
--fold-color-warning-border: color-mix(
|
|
253
|
+
in srgb,
|
|
254
|
+
var(--fold-ref-amber-600) 22%,
|
|
255
|
+
transparent
|
|
256
|
+
);
|
|
257
|
+
|
|
258
|
+
/* Alert (red) */
|
|
259
|
+
--fold-color-alert: var(--fold-ref-red-600);
|
|
260
|
+
--fold-color-alert-text: var(--fold-ref-red-450);
|
|
261
|
+
--fold-color-alert-surface: color-mix(
|
|
262
|
+
in srgb,
|
|
263
|
+
var(--fold-ref-red-600) 8%,
|
|
264
|
+
transparent
|
|
265
|
+
);
|
|
266
|
+
--fold-color-alert-border: color-mix(
|
|
267
|
+
in srgb,
|
|
268
|
+
var(--fold-ref-red-600) 22%,
|
|
269
|
+
transparent
|
|
270
|
+
);
|
|
271
|
+
|
|
272
|
+
/* Success (green) — base holds across themes; tint + surfaces soften on light */
|
|
273
|
+
--fold-color-success: var(--fold-ref-green-500);
|
|
274
|
+
--fold-color-success-text: var(--fold-ref-green-550);
|
|
275
|
+
--fold-color-success-surface: color-mix(
|
|
276
|
+
in srgb,
|
|
277
|
+
var(--fold-ref-green-500) 10%,
|
|
278
|
+
transparent
|
|
279
|
+
);
|
|
280
|
+
--fold-color-success-border: color-mix(
|
|
281
|
+
in srgb,
|
|
282
|
+
var(--fold-ref-green-500) 25%,
|
|
283
|
+
transparent
|
|
284
|
+
);
|
|
285
|
+
|
|
286
|
+
/* Text */
|
|
287
|
+
--fold-color-text: var(--fold-ref-slate-900);
|
|
288
|
+
--fold-color-text-secondary: var(--fold-ref-slate-600);
|
|
289
|
+
--fold-color-text-muted: var(--fold-ref-slate-550);
|
|
290
|
+
--fold-color-text-faded: var(--fold-ref-slate-350);
|
|
291
|
+
|
|
292
|
+
/* Card — a solid raised content surface (white on light) */
|
|
293
|
+
--fold-color-surface-card: var(--fold-ref-white);
|
|
294
|
+
/* Sunken — light theme flattens the depth cue to white, matching the ref. */
|
|
295
|
+
--fold-color-surface-sunken: var(--fold-ref-white);
|
|
296
|
+
|
|
297
|
+
/* Neutral surfaces + border — alpha overlays (black on light) */
|
|
298
|
+
--fold-color-surface-subtle: color-mix(
|
|
299
|
+
in srgb,
|
|
300
|
+
var(--fold-ref-black) 2%,
|
|
301
|
+
transparent
|
|
302
|
+
);
|
|
303
|
+
--fold-color-surface-raised: color-mix(
|
|
304
|
+
in srgb,
|
|
305
|
+
var(--fold-ref-black) 4%,
|
|
306
|
+
transparent
|
|
307
|
+
);
|
|
308
|
+
--fold-color-surface-hover: var(
|
|
309
|
+
--fold-ref-cloud-150
|
|
310
|
+
); /* solid raised hover */
|
|
311
|
+
--fold-color-border: color-mix(
|
|
312
|
+
in srgb,
|
|
313
|
+
var(--fold-ref-black) 8%,
|
|
314
|
+
transparent
|
|
315
|
+
);
|
|
316
|
+
/* Fainter hairline — row dividers, subtle panel edges (below `border`). */
|
|
317
|
+
--fold-color-border-subtle: color-mix(
|
|
318
|
+
in srgb,
|
|
319
|
+
var(--fold-ref-black) 4%,
|
|
320
|
+
transparent
|
|
321
|
+
);
|
|
322
|
+
|
|
323
|
+
/* Glass — translucent frosted overlay (panels, floating menus) */
|
|
324
|
+
--fold-color-glass: color-mix(
|
|
325
|
+
in srgb,
|
|
326
|
+
var(--fold-ref-white) 65%,
|
|
327
|
+
transparent
|
|
328
|
+
);
|
|
329
|
+
--fold-color-glass-border: color-mix(
|
|
330
|
+
in srgb,
|
|
331
|
+
var(--fold-ref-black) 12%,
|
|
332
|
+
transparent
|
|
333
|
+
);
|
|
334
|
+
|
|
335
|
+
/* Scrim — a darkening veil behind the mobile nav drawer. */
|
|
336
|
+
--fold-color-scrim: color-mix(
|
|
337
|
+
in srgb,
|
|
338
|
+
var(--fold-ref-black) 45%,
|
|
339
|
+
transparent
|
|
340
|
+
);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/* ── Extra theme: BUBBLY ───────────────────────────────────────
|
|
344
|
+
Festive light: the LUMEN block re-pointed onto soft lavender chrome
|
|
345
|
+
(bubble) with a joyful violet brand (grape), rounded off in
|
|
346
|
+
scales.css. White cards float on the lavender page — the theme's
|
|
347
|
+
name is the look. Info moves to azure (cyan) so it never blurs into
|
|
348
|
+
the violet brand; the other status families stay put. */
|
|
349
|
+
[data-theme="bubbly"] {
|
|
350
|
+
/* Surfaces */
|
|
351
|
+
--fold-color-bg-page: var(--fold-ref-bubble-100);
|
|
352
|
+
--fold-color-bg-header: var(--fold-ref-bubble-0);
|
|
353
|
+
--fold-color-bg-rail-primary: var(--fold-ref-bubble-150);
|
|
354
|
+
--fold-color-bg-rail-secondary: var(--fold-ref-bubble-50);
|
|
355
|
+
--fold-color-bg-rail-tertiary: color-mix(
|
|
356
|
+
in srgb,
|
|
357
|
+
var(--fold-ref-grape-500) 5%,
|
|
358
|
+
transparent
|
|
359
|
+
);
|
|
360
|
+
|
|
361
|
+
/* Primary / accent — the violet brand, festive and saturated */
|
|
362
|
+
--fold-color-primary: var(--fold-ref-grape-500);
|
|
363
|
+
--fold-color-primary-strong: var(--fold-ref-grape-600);
|
|
364
|
+
--fold-color-on-primary: var(--fold-ref-bubble-0);
|
|
365
|
+
--fold-color-primary-text: var(--fold-ref-grape-700);
|
|
366
|
+
--fold-color-primary-surface: color-mix(
|
|
367
|
+
in srgb,
|
|
368
|
+
var(--fold-ref-grape-500) 12%,
|
|
369
|
+
transparent
|
|
370
|
+
);
|
|
371
|
+
--fold-color-primary-border: color-mix(
|
|
372
|
+
in srgb,
|
|
373
|
+
var(--fold-ref-grape-500) 30%,
|
|
374
|
+
transparent
|
|
375
|
+
);
|
|
376
|
+
|
|
377
|
+
/* Info — moved to azure (cyan), away from the violet brand */
|
|
378
|
+
--fold-color-info: var(--fold-ref-azure-500);
|
|
379
|
+
--fold-color-info-text: var(--fold-ref-azure-500);
|
|
380
|
+
--fold-color-info-surface: color-mix(
|
|
381
|
+
in srgb,
|
|
382
|
+
var(--fold-ref-azure-500) 12%,
|
|
383
|
+
transparent
|
|
384
|
+
);
|
|
385
|
+
--fold-color-info-border: color-mix(
|
|
386
|
+
in srgb,
|
|
387
|
+
var(--fold-ref-azure-500) 30%,
|
|
388
|
+
transparent
|
|
389
|
+
);
|
|
390
|
+
|
|
391
|
+
/* Warning (amber) */
|
|
392
|
+
--fold-color-warning: var(--fold-ref-amber-600);
|
|
393
|
+
--fold-color-warning-text: var(--fold-ref-amber-550);
|
|
394
|
+
--fold-color-warning-surface: color-mix(
|
|
395
|
+
in srgb,
|
|
396
|
+
var(--fold-ref-amber-600) 10%,
|
|
397
|
+
transparent
|
|
398
|
+
);
|
|
399
|
+
--fold-color-warning-border: color-mix(
|
|
400
|
+
in srgb,
|
|
401
|
+
var(--fold-ref-amber-600) 24%,
|
|
402
|
+
transparent
|
|
403
|
+
);
|
|
404
|
+
|
|
405
|
+
/* Alert (red) */
|
|
406
|
+
--fold-color-alert: var(--fold-ref-red-600);
|
|
407
|
+
--fold-color-alert-text: var(--fold-ref-red-450);
|
|
408
|
+
--fold-color-alert-surface: color-mix(
|
|
409
|
+
in srgb,
|
|
410
|
+
var(--fold-ref-red-600) 10%,
|
|
411
|
+
transparent
|
|
412
|
+
);
|
|
413
|
+
--fold-color-alert-border: color-mix(
|
|
414
|
+
in srgb,
|
|
415
|
+
var(--fold-ref-red-600) 24%,
|
|
416
|
+
transparent
|
|
417
|
+
);
|
|
418
|
+
|
|
419
|
+
/* Success (green) */
|
|
420
|
+
--fold-color-success: var(--fold-ref-green-500);
|
|
421
|
+
--fold-color-success-text: var(--fold-ref-green-550);
|
|
422
|
+
--fold-color-success-surface: color-mix(
|
|
423
|
+
in srgb,
|
|
424
|
+
var(--fold-ref-green-500) 12%,
|
|
425
|
+
transparent
|
|
426
|
+
);
|
|
427
|
+
--fold-color-success-border: color-mix(
|
|
428
|
+
in srgb,
|
|
429
|
+
var(--fold-ref-green-500) 28%,
|
|
430
|
+
transparent
|
|
431
|
+
);
|
|
432
|
+
|
|
433
|
+
/* Text — reuses slate, like light */
|
|
434
|
+
--fold-color-text: var(--fold-ref-slate-900);
|
|
435
|
+
--fold-color-text-secondary: var(--fold-ref-slate-600);
|
|
436
|
+
--fold-color-text-muted: var(--fold-ref-slate-550);
|
|
437
|
+
--fold-color-text-faded: var(--fold-ref-slate-350);
|
|
438
|
+
|
|
439
|
+
/* Card — white, so it floats above the lavender page */
|
|
440
|
+
--fold-color-surface-card: var(--fold-ref-bubble-0);
|
|
441
|
+
--fold-color-surface-sunken: var(--fold-ref-bubble-50);
|
|
442
|
+
|
|
443
|
+
/* Neutral surfaces + border — the brand tints the overlays a hair */
|
|
444
|
+
--fold-color-surface-subtle: color-mix(
|
|
445
|
+
in srgb,
|
|
446
|
+
var(--fold-ref-grape-500) 3%,
|
|
447
|
+
transparent
|
|
448
|
+
);
|
|
449
|
+
--fold-color-surface-raised: color-mix(
|
|
450
|
+
in srgb,
|
|
451
|
+
var(--fold-ref-grape-500) 6%,
|
|
452
|
+
transparent
|
|
453
|
+
);
|
|
454
|
+
--fold-color-surface-hover: var(
|
|
455
|
+
--fold-ref-bubble-150
|
|
456
|
+
); /* solid raised hover */
|
|
457
|
+
--fold-color-border: color-mix(
|
|
458
|
+
in srgb,
|
|
459
|
+
var(--fold-ref-grape-500) 14%,
|
|
460
|
+
transparent
|
|
461
|
+
);
|
|
462
|
+
/* Fainter hairline — row dividers, subtle panel edges (below `border`). */
|
|
463
|
+
--fold-color-border-subtle: color-mix(
|
|
464
|
+
in srgb,
|
|
465
|
+
var(--fold-ref-grape-500) 8%,
|
|
466
|
+
transparent
|
|
467
|
+
);
|
|
468
|
+
|
|
469
|
+
/* Glass — translucent frosted overlay (panels, floating menus) */
|
|
470
|
+
--fold-color-glass: color-mix(
|
|
471
|
+
in srgb,
|
|
472
|
+
var(--fold-ref-bubble-0) 68%,
|
|
473
|
+
transparent
|
|
474
|
+
);
|
|
475
|
+
--fold-color-glass-border: color-mix(
|
|
476
|
+
in srgb,
|
|
477
|
+
var(--fold-ref-grape-500) 16%,
|
|
478
|
+
transparent
|
|
479
|
+
);
|
|
480
|
+
|
|
481
|
+
/* Scrim — a darkening veil behind the mobile nav drawer. */
|
|
482
|
+
--fold-color-scrim: color-mix(
|
|
483
|
+
in srgb,
|
|
484
|
+
var(--fold-ref-black) 50%,
|
|
485
|
+
transparent
|
|
486
|
+
);
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
/* ── Extra theme: NAVI ────────────────────────────────────────
|
|
490
|
+
Dark chrome, light content — the classic "app rail beside a
|
|
491
|
+
white page". It is the LUMEN block with three surfaces moved to
|
|
492
|
+
ink, plus one scoped override: the shell's chrome regions take
|
|
493
|
+
the UMBRA text/border/surface roles back, because a dark rail
|
|
494
|
+
needs light text on it.
|
|
495
|
+
|
|
496
|
+
That second block is the honest part. The palette has no
|
|
497
|
+
"on-chrome" text role — text/border/surface are single roles
|
|
498
|
+
shared by page and chrome — so a mixed theme cannot be
|
|
499
|
+
expressed by re-pointing alone. It re-declares those roles on
|
|
500
|
+
the `[data-surface="chrome"]` regions instead: variables only,
|
|
501
|
+
no component change, and addressed by a contract the shell opts
|
|
502
|
+
into rather than by its class names. Give the catalogue real
|
|
503
|
+
`*-on-chrome` roles the day mixed chrome stops being a demo. */
|
|
504
|
+
[data-theme="navi"] {
|
|
505
|
+
/* Surfaces */
|
|
506
|
+
--fold-color-bg-page: var(--fold-ref-ivory-50);
|
|
507
|
+
--fold-color-bg-header: var(--fold-ref-navy-750);
|
|
508
|
+
--fold-color-bg-rail-primary: var(--fold-ref-navy-900);
|
|
509
|
+
--fold-color-bg-rail-secondary: var(--fold-ref-navy-850);
|
|
510
|
+
--fold-color-bg-rail-tertiary: color-mix(
|
|
511
|
+
in srgb,
|
|
512
|
+
var(--fold-ref-black) 2%,
|
|
513
|
+
transparent
|
|
514
|
+
);
|
|
515
|
+
|
|
516
|
+
/* Primary / accent — brand mutes on light, hover darkens further */
|
|
517
|
+
--fold-color-primary: var(--fold-ref-navy-500);
|
|
518
|
+
--fold-color-primary-strong: var(--fold-ref-navy-600);
|
|
519
|
+
--fold-color-on-primary: var(--fold-ref-white);
|
|
520
|
+
--fold-color-primary-text: var(--fold-ref-navy-600);
|
|
521
|
+
--fold-color-primary-surface: color-mix(
|
|
522
|
+
in srgb,
|
|
523
|
+
var(--fold-ref-navy-500) 8%,
|
|
524
|
+
transparent
|
|
525
|
+
);
|
|
526
|
+
--fold-color-primary-border: color-mix(
|
|
527
|
+
in srgb,
|
|
528
|
+
var(--fold-ref-navy-500) 24%,
|
|
529
|
+
transparent
|
|
530
|
+
);
|
|
531
|
+
|
|
532
|
+
/* Info (purple) */
|
|
533
|
+
--fold-color-info: var(--fold-ref-purple-600);
|
|
534
|
+
--fold-color-info-text: var(--fold-ref-purple-500);
|
|
535
|
+
--fold-color-info-surface: color-mix(
|
|
536
|
+
in srgb,
|
|
537
|
+
var(--fold-ref-purple-600) 8%,
|
|
538
|
+
transparent
|
|
539
|
+
);
|
|
540
|
+
--fold-color-info-border: color-mix(
|
|
541
|
+
in srgb,
|
|
542
|
+
var(--fold-ref-purple-600) 22%,
|
|
543
|
+
transparent
|
|
544
|
+
);
|
|
545
|
+
|
|
546
|
+
/* Warning (amber) */
|
|
547
|
+
--fold-color-warning: var(--fold-ref-amber-600);
|
|
548
|
+
--fold-color-warning-text: var(--fold-ref-amber-550);
|
|
549
|
+
--fold-color-warning-surface: color-mix(
|
|
550
|
+
in srgb,
|
|
551
|
+
var(--fold-ref-amber-600) 8%,
|
|
552
|
+
transparent
|
|
553
|
+
);
|
|
554
|
+
--fold-color-warning-border: color-mix(
|
|
555
|
+
in srgb,
|
|
556
|
+
var(--fold-ref-amber-600) 22%,
|
|
557
|
+
transparent
|
|
558
|
+
);
|
|
559
|
+
|
|
560
|
+
/* Alert (red) */
|
|
561
|
+
--fold-color-alert: var(--fold-ref-red-600);
|
|
562
|
+
--fold-color-alert-text: var(--fold-ref-red-450);
|
|
563
|
+
--fold-color-alert-surface: color-mix(
|
|
564
|
+
in srgb,
|
|
565
|
+
var(--fold-ref-red-600) 8%,
|
|
566
|
+
transparent
|
|
567
|
+
);
|
|
568
|
+
--fold-color-alert-border: color-mix(
|
|
569
|
+
in srgb,
|
|
570
|
+
var(--fold-ref-red-600) 22%,
|
|
571
|
+
transparent
|
|
572
|
+
);
|
|
573
|
+
|
|
574
|
+
/* Success (green) — base holds across themes; tint + surfaces soften on light */
|
|
575
|
+
--fold-color-success: var(--fold-ref-green-500);
|
|
576
|
+
--fold-color-success-text: var(--fold-ref-green-550);
|
|
577
|
+
--fold-color-success-surface: color-mix(
|
|
578
|
+
in srgb,
|
|
579
|
+
var(--fold-ref-green-500) 10%,
|
|
580
|
+
transparent
|
|
581
|
+
);
|
|
582
|
+
--fold-color-success-border: color-mix(
|
|
583
|
+
in srgb,
|
|
584
|
+
var(--fold-ref-green-500) 25%,
|
|
585
|
+
transparent
|
|
586
|
+
);
|
|
587
|
+
|
|
588
|
+
/* Text */
|
|
589
|
+
--fold-color-text: var(--fold-ref-slate-900);
|
|
590
|
+
--fold-color-text-secondary: var(--fold-ref-slate-600);
|
|
591
|
+
--fold-color-text-muted: var(--fold-ref-slate-550);
|
|
592
|
+
--fold-color-text-faded: var(--fold-ref-slate-350);
|
|
593
|
+
|
|
594
|
+
/* Card — a solid raised content surface (white on light) */
|
|
595
|
+
--fold-color-surface-card: var(--fold-ref-white);
|
|
596
|
+
/* Sunken — light theme flattens the depth cue to white, matching the ref. */
|
|
597
|
+
--fold-color-surface-sunken: var(--fold-ref-white);
|
|
598
|
+
|
|
599
|
+
/* Neutral surfaces + border — alpha overlays (black on light) */
|
|
600
|
+
--fold-color-surface-subtle: color-mix(
|
|
601
|
+
in srgb,
|
|
602
|
+
var(--fold-ref-black) 2%,
|
|
603
|
+
transparent
|
|
604
|
+
);
|
|
605
|
+
--fold-color-surface-raised: color-mix(
|
|
606
|
+
in srgb,
|
|
607
|
+
var(--fold-ref-black) 4%,
|
|
608
|
+
transparent
|
|
609
|
+
);
|
|
610
|
+
--fold-color-surface-hover: var(
|
|
611
|
+
--fold-ref-cloud-150
|
|
612
|
+
); /* solid raised hover */
|
|
613
|
+
--fold-color-border: color-mix(
|
|
614
|
+
in srgb,
|
|
615
|
+
var(--fold-ref-black) 8%,
|
|
616
|
+
transparent
|
|
617
|
+
);
|
|
618
|
+
/* Fainter hairline — row dividers, subtle panel edges (below `border`). */
|
|
619
|
+
--fold-color-border-subtle: color-mix(
|
|
620
|
+
in srgb,
|
|
621
|
+
var(--fold-ref-black) 4%,
|
|
622
|
+
transparent
|
|
623
|
+
);
|
|
624
|
+
|
|
625
|
+
/* Glass — translucent frosted overlay (panels, floating menus) */
|
|
626
|
+
--fold-color-glass: color-mix(
|
|
627
|
+
in srgb,
|
|
628
|
+
var(--fold-ref-white) 65%,
|
|
629
|
+
transparent
|
|
630
|
+
);
|
|
631
|
+
--fold-color-glass-border: color-mix(
|
|
632
|
+
in srgb,
|
|
633
|
+
var(--fold-ref-black) 12%,
|
|
634
|
+
transparent
|
|
635
|
+
);
|
|
636
|
+
|
|
637
|
+
/* Scrim — a darkening veil behind the mobile nav drawer. */
|
|
638
|
+
--fold-color-scrim: color-mix(
|
|
639
|
+
in srgb,
|
|
640
|
+
var(--fold-ref-black) 45%,
|
|
641
|
+
transparent
|
|
642
|
+
);
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
/* navi is mixed — light page, dark chrome — so the chrome surfaces need their
|
|
646
|
+
own text, surfaces and brand. Addressed by contract (`[data-surface="chrome"]`,
|
|
647
|
+
which the shell stamps on its rails + header), never by the shell's class
|
|
648
|
+
names: a renamed rail must not be able to break a theme. */
|
|
649
|
+
[data-theme="navi"] [data-surface="chrome"] {
|
|
650
|
+
/* Light text on the dark chrome. The whole ramp sits one step above umbra's:
|
|
651
|
+
navy is a lighter, bluer ground than ink, so the borrowed values landed
|
|
652
|
+
dim — `faded` on the expanded rail was barely legible. Four distinct
|
|
653
|
+
steps, no new primitive. */
|
|
654
|
+
--fold-color-text: var(--fold-ref-slate-50);
|
|
655
|
+
--fold-color-text-secondary: var(--fold-ref-slate-350);
|
|
656
|
+
--fold-color-text-muted: var(--fold-ref-slate-400);
|
|
657
|
+
--fold-color-text-faded: var(--fold-ref-slate-500);
|
|
658
|
+
--fold-color-border: color-mix(
|
|
659
|
+
in srgb,
|
|
660
|
+
var(--fold-ref-white) 8%,
|
|
661
|
+
transparent
|
|
662
|
+
);
|
|
663
|
+
--fold-color-border-subtle: color-mix(
|
|
664
|
+
in srgb,
|
|
665
|
+
var(--fold-ref-white) 4%,
|
|
666
|
+
transparent
|
|
667
|
+
);
|
|
668
|
+
/* … and navy surfaces, so a hovered or raised row belongs to the rail
|
|
669
|
+
instead of looking like a grey patch pasted onto it. */
|
|
670
|
+
--fold-color-surface-card: var(--fold-ref-navy-800);
|
|
671
|
+
--fold-color-surface-sunken: var(--fold-ref-navy-950);
|
|
672
|
+
--fold-color-surface-hover: var(--fold-ref-navy-800);
|
|
673
|
+
--fold-color-surface-subtle: color-mix(
|
|
674
|
+
in srgb,
|
|
675
|
+
var(--fold-ref-white) 3%,
|
|
676
|
+
transparent
|
|
677
|
+
);
|
|
678
|
+
--fold-color-surface-raised: color-mix(
|
|
679
|
+
in srgb,
|
|
680
|
+
var(--fold-ref-white) 5%,
|
|
681
|
+
transparent
|
|
682
|
+
);
|
|
683
|
+
--fold-color-bg-rail-tertiary: color-mix(
|
|
684
|
+
in srgb,
|
|
685
|
+
var(--fold-ref-white) 3%,
|
|
686
|
+
transparent
|
|
687
|
+
);
|
|
688
|
+
/* The whole brand flips, solid included: a menu item tints its active icon
|
|
689
|
+
with `primary` itself, and the page's navy-on-white lands dark-on-dark
|
|
690
|
+
against a navy rail. On the chrome the brand lives in its light tints. */
|
|
691
|
+
--fold-color-primary: var(--fold-ref-navy-400);
|
|
692
|
+
--fold-color-primary-strong: var(--fold-ref-navy-300);
|
|
693
|
+
--fold-color-primary-text: var(--fold-ref-navy-300);
|
|
694
|
+
--fold-color-primary-surface: color-mix(
|
|
695
|
+
in srgb,
|
|
696
|
+
var(--fold-ref-navy-400) 22%,
|
|
697
|
+
transparent
|
|
698
|
+
);
|
|
699
|
+
--fold-color-primary-border: color-mix(
|
|
700
|
+
in srgb,
|
|
701
|
+
var(--fold-ref-navy-400) 40%,
|
|
702
|
+
transparent
|
|
703
|
+
);
|
|
704
|
+
}
|