@n8mills/design-tokens 1.0.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.
Files changed (10) hide show
  1. package/DESIGN.md +429 -0
  2. package/LICENSE +21 -0
  3. package/README.md +126 -0
  4. package/components.css +943 -0
  5. package/design-system.md +466 -0
  6. package/package.json +58 -0
  7. package/tokens.css +498 -0
  8. package/tokens.d.ts +266 -0
  9. package/tokens.js +265 -0
  10. package/tokens.json +441 -0
package/tokens.css ADDED
@@ -0,0 +1,498 @@
1
+ /* =========================================================================
2
+ portfolio / design tokens (GENERATED from tokens.json via Style Dictionary)
3
+ Do not hand-edit. Edit tokens.json and rebuild.
4
+
5
+ Architecture, three tiers:
6
+ 1. Primitives --neutral-* --green-* (raw ramps, never used in UI)
7
+ 2. Semantics --color-* --text-* (meaning; theming lives here)
8
+ 3. Components --btn-* --card-* --chip-* --badge-* (alias semantics only)
9
+ Brand identity (--brand-*) sits beside the primitives: fixed values (lime,
10
+ ink, gradient) that never theme-flip.
11
+
12
+ Conventions:
13
+ - Naming order: object-property-variant, general to specific; state
14
+ suffix last (-hover); rest state implicit (no -default)
15
+ - One theme-aware interactive role: accent (ink on light, lime on dark).
16
+ Deliberate exception: --color-border-brand stays fixed brand lime
17
+ - Foreground term: "text" at the semantic layer, "fg" at the component
18
+ layer; on-[x] tokens are contrast pairs for content sitting on [x]
19
+ - Prominence: text uses primary/secondary/tertiary; surfaces and borders
20
+ use subtle/strong/sunken
21
+ - Namespaces: ext-brand-* (third-party colours), fx-* (effects),
22
+ static-* (never themes)
23
+ ========================================================================= */
24
+
25
+ :root {
26
+ --neutral-0: #ffffff;
27
+ --neutral-50: #fafafa;
28
+ --neutral-100: #f5f5f5;
29
+ --neutral-150: #f4f4f5;
30
+ --neutral-200: #ececec;
31
+ --neutral-300: #e4e4e7;
32
+ --neutral-400: #d4d4d8;
33
+ --neutral-500: #a1a1aa;
34
+ --neutral-550: #909096;
35
+ --neutral-600: #67676f;
36
+ --neutral-700: #3f3f46;
37
+ --neutral-800: #27272a;
38
+ --neutral-850: #1c1c1f;
39
+ --neutral-900: #141416;
40
+ --neutral-950: #0a0a0b;
41
+ --green-50: #faffeb;
42
+ --green-100: #f5ffd6;
43
+ --green-200: #ecffad;
44
+ --green-300: #e2ff85;
45
+ --green-400: #daff61;
46
+ --green-500: #d2ff37;
47
+ --green-550: #c0fa00;
48
+ --green-600: #b8e030;
49
+ --green-700: #8db800;
50
+ --green-800: #5e7a00;
51
+ --green-900: #2f3d00;
52
+ --green-950: #171f00;
53
+ --brand-lime: var(--green-500);
54
+ --brand-lime-rgb: 210 255 55;
55
+ --brand-lime-dim: var(--green-600);
56
+ --brand-lime-vivid: #eeff00;
57
+ --brand-ink: var(--neutral-850);
58
+ --brand-ink-rgb: 28 28 31;
59
+ --brand-on-lime: var(--neutral-850);
60
+ --brand-on-ink: var(--green-500);
61
+ --brand-gradient: linear-gradient(135deg, var(--brand-lime) 0%, var(--brand-lime-vivid) 100%);
62
+ --ext-brand-anthropic-large: #d97757;
63
+ --ext-brand-anthropic-body: #b85033;
64
+ --ext-brand-linkedin: #0a66c2;
65
+ --ext-brand-bupa-blue: #0079c8;
66
+ --ext-brand-bupa-blue-dark: #00609f;
67
+ --ext-brand-bupa-blue-subtle: #e6f2fa;
68
+ --fx-glitch-magenta: #ff2bd6;
69
+ --fx-glitch-cyan: #00d4ff;
70
+ --color-bg: var(--neutral-100);
71
+ --color-surface: var(--neutral-0);
72
+ --color-surface-sunken: var(--neutral-200);
73
+ --color-surface-inverse: var(--neutral-950);
74
+ --color-surface-inverse-sunken: var(--neutral-900);
75
+ --color-text-primary: var(--neutral-950);
76
+ --color-text-secondary: var(--neutral-700);
77
+ --color-text-tertiary: var(--neutral-600);
78
+ --color-border: var(--neutral-300);
79
+ --color-border-strong: var(--neutral-400);
80
+ --color-border-brand: var(--brand-lime);
81
+ --color-border-hover: var(--brand-ink);
82
+ --color-accent: var(--neutral-850);
83
+ --color-accent-hover: var(--neutral-950);
84
+ --color-accent-subtle: var(--neutral-150);
85
+ --color-on-accent: var(--neutral-0);
86
+ --color-focus-ring: var(--neutral-850);
87
+ --color-link: var(--neutral-850);
88
+ --color-link-hover: var(--neutral-950);
89
+ --color-on-ink-emphasis: var(--neutral-0);
90
+ --color-on-ink-primary: rgba(255, 255, 255, 0.88);
91
+ --color-on-ink-secondary: rgba(255, 255, 255, 0.66);
92
+ --color-on-ink-muted: rgba(255, 255, 255, 0.4);
93
+ --color-on-ink-border: rgba(255, 255, 255, 0.08);
94
+ --color-on-ink-subtle: var(--neutral-50);
95
+ --color-static-white: var(--neutral-0);
96
+ --color-static-white-hover: var(--neutral-200);
97
+ --color-accent-emphasis: var(--neutral-850);
98
+ --color-dot-inactive: var(--neutral-600);
99
+ --color-dot-active: var(--color-accent);
100
+ --color-text-muted-emphasis: rgb(var(--brand-ink-rgb) / 0.55);
101
+ --color-on-ink-hover: rgba(255, 255, 255, 0.18);
102
+ --color-overlay-soft: rgba(0, 0, 0, 0.35);
103
+ --color-overlay-base: rgba(0, 0, 0, 0.62);
104
+ --color-overlay-strong: rgba(0, 0, 0, 0.88);
105
+ --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
106
+ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
107
+ --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
108
+ --font-serif: "PT Serif", Georgia, serif;
109
+ --font-feature-mono: "zero" 1;
110
+ --size-2xs: 11px;
111
+ --size-xs: 12px;
112
+ --size-sm: 14px;
113
+ --size-base: 16px;
114
+ --size-lg: 18px;
115
+ --size-xl: 24px;
116
+ --size-2xl: 32px;
117
+ --size-3xl: 48px;
118
+ --text-h1: clamp(34px, 5.8vw, 72px);
119
+ --text-h2: clamp(22px, 4vw, 32px);
120
+ --text-body: var(--size-base);
121
+ --text-label: var(--size-2xs);
122
+ --text-caption: var(--size-xs);
123
+ --text-meta: 13px;
124
+ --text-nav: var(--size-2xs);
125
+ --display-hero: clamp(40px, 9vw, 118px);
126
+ --display-section: clamp(28px, 5.8vw, 72px);
127
+ --display-card-title: clamp(22px, 4vw, 44px);
128
+ --display-stat-num: clamp(40px, 7vw, 88px);
129
+ --display-intro: clamp(20px, 5vw, 24px);
130
+ --display-tight: -0.04em;
131
+ --display-weight: var(--weight-semibold);
132
+ --display-quote: clamp(96px, 12vw, 140px);
133
+ --measure: 52ch;
134
+ --btn-sm: 32px;
135
+ --btn-md: var(--touch-target-min);
136
+ --btn-lg: 52px;
137
+ --btn-pad-x: 18px;
138
+ --btn-pad-y: 10px;
139
+ --btn-gap: var(--space-2);
140
+ --btn-radius: var(--radius-full);
141
+ --btn-font: var(--font-body);
142
+ --btn-font-size: var(--size-sm);
143
+ --btn-font-weight: var(--weight-semibold);
144
+ --btn-glyph: 16px;
145
+ --btn-glyph-sm: 14px;
146
+ --btn-glyph-lg: 18px;
147
+ --btn-transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
148
+ --btn-focus-ring: var(--color-focus-ring);
149
+ --btn-primary-bg: var(--brand-lime);
150
+ --btn-primary-fg: var(--brand-ink);
151
+ --btn-primary-border: var(--color-border-brand);
152
+ --btn-primary-bg-hover: var(--brand-ink);
153
+ --btn-primary-fg-hover: var(--brand-lime);
154
+ --btn-secondary-fg: var(--color-text-primary);
155
+ --btn-secondary-border: var(--color-text-tertiary);
156
+ --btn-secondary-bg-hover: var(--color-surface-sunken);
157
+ --btn-secondary-border-hover: var(--color-text-primary);
158
+ --btn-icon-border: var(--color-text-tertiary);
159
+ --btn-icon-fg: var(--color-text-secondary);
160
+ --card-radius: var(--radius-lg);
161
+ --card-padding: var(--space-5);
162
+ --card-border: var(--border-hairline);
163
+ --card-bg: var(--color-surface);
164
+ --card-fg: var(--color-text-primary);
165
+ --card-dark-bg: var(--brand-ink);
166
+ --card-dark-fg: var(--color-on-ink-primary);
167
+ --card-dark-border: var(--color-on-ink-border);
168
+ --chip-pad-x: 10px;
169
+ --chip-pad-y: var(--space-1);
170
+ --chip-gap: var(--space-2);
171
+ --chip-icon-size: 14px;
172
+ --chip-radius: var(--radius-full);
173
+ --chip-font: var(--font-mono);
174
+ --chip-font-size: var(--text-label);
175
+ --chip-font-weight: var(--weight-medium);
176
+ --chip-line: 1.4;
177
+ --chip-fg: var(--color-text-primary);
178
+ --chip-bg: var(--color-surface-sunken);
179
+ --chip-border: var(--color-border);
180
+ --chip-border-hover: var(--color-border-strong);
181
+ --badge-pad-x: var(--space-3);
182
+ --badge-pad-y: var(--space-1);
183
+ --badge-gap: var(--space-2);
184
+ --badge-radius: var(--radius-full);
185
+ --badge-font: var(--font-mono);
186
+ --badge-font-size: var(--text-label);
187
+ --badge-font-weight: var(--weight-medium);
188
+ --badge-icon-size: 14px;
189
+ --badge-dot-size: 6px;
190
+ --badge-fg: var(--color-text-secondary);
191
+ --badge-border: var(--color-border);
192
+ --badge-dot: var(--brand-lime);
193
+ --line-display: 1.05;
194
+ --line-heading: 1.15;
195
+ --line-title: 1.25;
196
+ --line-snug: 1.45;
197
+ --line-body: 1.5;
198
+ --weight-regular: 400;
199
+ --weight-medium: 500;
200
+ --weight-semibold: 600;
201
+ --weight-bold: 700;
202
+ --weight-extrabold: 800;
203
+ --tracking-tight: -0.02em;
204
+ --tracking-normal: 0;
205
+ --tracking-wide: 0.02em;
206
+ --tracking-mono: 0.01em;
207
+ --tracking-eyebrow: 0.18em;
208
+ --tracking-label: 0.08em;
209
+ --space-1: 4px;
210
+ --space-2: 8px;
211
+ --space-3: 12px;
212
+ --space-4: 16px;
213
+ --space-5: 24px;
214
+ --space-6: 32px;
215
+ --space-7: 48px;
216
+ --space-8: 64px;
217
+ --space-9: 96px;
218
+ --space-10: 128px;
219
+ --space-11: 192px;
220
+ --space-12: 256px;
221
+ --section-padding: clamp(var(--space-9), 12vw, var(--space-10));
222
+ --card-pad-compact: var(--space-4);
223
+ --card-pad-standard: var(--space-5);
224
+ --card-pad-spacious: var(--space-6);
225
+ --duration-fast: 150ms;
226
+ --duration-base: 220ms;
227
+ --duration-slow: 400ms;
228
+ --duration-expressive: 1300ms;
229
+ --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
230
+ --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
231
+ --ease-exit: cubic-bezier(0.4, 0, 1, 1);
232
+ --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
233
+ --ease-linear: cubic-bezier(0, 0, 1, 1);
234
+ --motion-reveal-rise: 64px;
235
+ --motion-reveal-shift: 48px;
236
+ --motion-reveal-scale: 0.9;
237
+ --motion-reveal-slide: 80px;
238
+ --motion-reveal-stagger: 4%;
239
+ --radius-none: 0;
240
+ --radius-sm: 8px;
241
+ --radius-md: 10px;
242
+ --radius-lg: 14px;
243
+ --radius-xl: 20px;
244
+ --radius-full: 999px;
245
+ --border-hairline: 1px solid var(--color-border);
246
+ --border-strong: 1px solid var(--color-border-strong);
247
+ --border-focus: 2px solid var(--color-focus-ring);
248
+ --focus-ring-offset: 2px;
249
+ --container-base: 960px;
250
+ --container-wide: min(92vw, 1680px);
251
+ --bp-mobile: 375px;
252
+ --bp-tablet: 768px;
253
+ --bp-desktop: 1024px;
254
+ --bp-wide: 1440px;
255
+ --bp-ultrawide: 1600px;
256
+ --touch-target-min: 44px;
257
+ --touch-target-dot: 24px;
258
+ --z-base: 0;
259
+ --z-dropdown: 1000;
260
+ --z-sticky: 1100;
261
+ --z-overlay: 1200;
262
+ --z-modal: 1300;
263
+ --z-tooltip: 1400;
264
+ --z-toast: 1500;
265
+ --z-skip-link: 1600;
266
+ --shadow-none: none;
267
+ --shadow-soft: 0 1px 2px rgb(var(--brand-ink-rgb) / 0.04), 0 1px 3px rgb(var(--brand-ink-rgb) / 0.06);
268
+ --shadow-lift: 0 4px 12px rgb(var(--brand-ink-rgb) / 0.06), 0 2px 4px rgb(var(--brand-ink-rgb) / 0.04);
269
+ --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.18);
270
+ --accent-period-shadow: 0 1px 2px rgba(0,0,0,0.42), 0 0 0 1px rgba(0,0,0,0.18);
271
+ --accent-dot-shadow: 0 1px 3px rgba(0,0,0,0.24);
272
+ --glass-tint: rgb(250 250 252 / 0.4);
273
+ --glass-edge-top: rgb(255 255 255 / 0.9);
274
+ --glass-edge-bottom: rgb(255 255 255 / 0.06);
275
+ --glass-specular: inset 0 1px 0 rgb(255 255 255 / 0.7);
276
+ --glass-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
277
+ --glass-blur: 10px;
278
+ --glass-blur-webkit: 14px;
279
+ --glass-saturate: 170%;
280
+ --glass-dim: 1;
281
+ --glass-dim-scrolled: 1.15;
282
+ }
283
+
284
+ /* Modern colour: the authored OKLCH values override the hex anchors only
285
+ where oklch() is genuinely supported (audit TK-01). */
286
+ @supports (color: oklch(0% 0 0)) {
287
+ :root {
288
+ --neutral-0: oklch(100% 0 0);
289
+ --neutral-50: oklch(98.5% 0 0);
290
+ --neutral-100: oklch(97% 0 0);
291
+ --neutral-150: oklch(96.7% 0.001 286.4);
292
+ --neutral-200: oklch(94.3% 0 0);
293
+ --neutral-300: oklch(92% 0.004 286.3);
294
+ --neutral-400: oklch(87.1% 0.005 286.3);
295
+ --neutral-500: oklch(71.2% 0.013 286.1);
296
+ --neutral-550: oklch(65.5% 0.009 286.2);
297
+ --neutral-600: oklch(51.7% 0.012 286);
298
+ --neutral-700: oklch(37% 0.012 285.8);
299
+ --neutral-800: oklch(27.4% 0.005 286);
300
+ --neutral-850: oklch(22.8% 0.006 285.9);
301
+ --neutral-900: oklch(19.2% 0.004 286);
302
+ --neutral-950: oklch(14.5% 0.002 286.1);
303
+ --green-50: oklch(99.1% 0.027 118.3);
304
+ --green-100: oklch(98.2% 0.054 118.5);
305
+ --green-200: oklch(96.7% 0.106 119);
306
+ --green-300: oklch(95.38% 0.151 120.4);
307
+ --green-400: oklch(94.4% 0.185 121.3);
308
+ --green-500: oklch(93.6% 0.2134 122.24);
309
+ --green-550: oklch(91.2% 0.229 124.9);
310
+ --green-600: oklch(84.9% 0.193 122.3);
311
+ --green-700: oklch(72.47% 0.1815 124.72);
312
+ --green-800: oklch(53.8% 0.134 124.1);
313
+ --green-900: oklch(33.5% 0.082 122.9);
314
+ --green-950: oklch(22.3% 0.054 122.4);
315
+ --brand-lime-vivid: oklch(95.5% 0.216 114.6);
316
+ }
317
+ }
318
+
319
+ [data-theme="light"] {
320
+ --color-bg: var(--neutral-100);
321
+ --color-surface: var(--neutral-0);
322
+ --color-surface-sunken: var(--neutral-200);
323
+ --color-text-primary: var(--neutral-950);
324
+ --color-text-secondary: var(--neutral-700);
325
+ --color-text-tertiary: var(--neutral-600);
326
+ --color-border: var(--neutral-300);
327
+ --color-border-strong: var(--neutral-400);
328
+ --color-border-hover: var(--brand-ink);
329
+ --color-accent: var(--neutral-850);
330
+ --color-accent-hover: var(--neutral-950);
331
+ --color-accent-subtle: var(--neutral-150);
332
+ --color-on-accent: var(--neutral-0);
333
+ --color-focus-ring: var(--neutral-850);
334
+ --color-link: var(--neutral-850);
335
+ --color-link-hover: var(--neutral-950);
336
+ --glass-tint: rgb(250 250 252 / 0.4);
337
+ --glass-edge-top: rgb(255 255 255 / 0.9);
338
+ --glass-edge-bottom: rgb(255 255 255 / 0.06);
339
+ --glass-specular: inset 0 1px 0 rgb(255 255 255 / 0.7);
340
+ --glass-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
341
+ --glass-blur: 10px;
342
+ --glass-blur-webkit: 14px;
343
+ --glass-dim-scrolled: 1.15;
344
+ }
345
+
346
+ [data-theme="dark"] {
347
+ --color-bg: var(--neutral-950);
348
+ --color-surface: var(--neutral-850);
349
+ --color-surface-sunken: var(--neutral-900);
350
+ --color-text-primary: var(--neutral-150);
351
+ --color-text-secondary: var(--neutral-500);
352
+ --color-text-tertiary: var(--neutral-550);
353
+ --color-border: var(--neutral-800);
354
+ --color-border-strong: var(--neutral-700);
355
+ --color-border-hover: var(--brand-lime);
356
+ --color-accent: var(--green-500);
357
+ --color-accent-hover: var(--brand-lime-dim);
358
+ --color-accent-subtle: var(--green-950);
359
+ --color-on-accent: var(--neutral-950);
360
+ --color-focus-ring: var(--green-500);
361
+ --color-link: var(--green-500);
362
+ --color-link-hover: var(--neutral-0);
363
+ --color-accent-emphasis: var(--green-500);
364
+ --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
365
+ --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
366
+ --accent-period-shadow: none;
367
+ --accent-dot-shadow: none;
368
+ --color-text-muted-emphasis: var(--brand-lime);
369
+ --color-dot-inactive: var(--neutral-500);
370
+ --glass-tint: rgb(var(--brand-ink-rgb) / 0.5);
371
+ --glass-edge-top: rgb(255 255 255 / 0.6);
372
+ --glass-edge-bottom: rgb(255 255 255 / 0.05);
373
+ --glass-specular: inset 0 0 0 0 rgb(255 255 255 / 0);
374
+ --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.77), 0 10px 30px rgb(0 0 0 / 0.42);
375
+ --glass-blur: 7px;
376
+ --glass-blur-webkit: 11px;
377
+ --glass-dim-scrolled: 1.05;
378
+ }
379
+
380
+ /* OS dark derives from the SAME darkTheme group as the toggle (TK-02). */
381
+ @media (prefers-color-scheme: dark) {
382
+ :root:not([data-theme="light"]) {
383
+ --color-bg: var(--neutral-950);
384
+ --color-surface: var(--neutral-850);
385
+ --color-surface-sunken: var(--neutral-900);
386
+ --color-text-primary: var(--neutral-150);
387
+ --color-text-secondary: var(--neutral-500);
388
+ --color-text-tertiary: var(--neutral-550);
389
+ --color-border: var(--neutral-800);
390
+ --color-border-strong: var(--neutral-700);
391
+ --color-border-hover: var(--brand-lime);
392
+ --color-accent: var(--green-500);
393
+ --color-accent-hover: var(--brand-lime-dim);
394
+ --color-accent-subtle: var(--green-950);
395
+ --color-on-accent: var(--neutral-950);
396
+ --color-focus-ring: var(--green-500);
397
+ --color-link: var(--green-500);
398
+ --color-link-hover: var(--neutral-0);
399
+ --color-accent-emphasis: var(--green-500);
400
+ --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
401
+ --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
402
+ --accent-period-shadow: none;
403
+ --accent-dot-shadow: none;
404
+ --color-text-muted-emphasis: var(--brand-lime);
405
+ --color-dot-inactive: var(--neutral-500);
406
+ --glass-tint: rgb(var(--brand-ink-rgb) / 0.5);
407
+ --glass-edge-top: rgb(255 255 255 / 0.6);
408
+ --glass-edge-bottom: rgb(255 255 255 / 0.05);
409
+ --glass-specular: inset 0 0 0 0 rgb(255 255 255 / 0);
410
+ --glass-shadow: 0 1px 2px rgb(0 0 0 / 0.77), 0 10px 30px rgb(0 0 0 / 0.42);
411
+ --glass-blur: 7px;
412
+ --glass-blur-webkit: 11px;
413
+ --glass-dim-scrolled: 1.05;
414
+ }
415
+ }
416
+
417
+ @media (prefers-reduced-motion: reduce) {
418
+ :root {
419
+ --duration-fast: 1ms;
420
+ --duration-base: 1ms;
421
+ --duration-slow: 1ms;
422
+ --duration-expressive: 1ms;
423
+ }
424
+ *,
425
+ *::before,
426
+ *::after {
427
+ animation-duration: 1ms !important;
428
+ animation-iteration-count: 1 !important;
429
+ transition-duration: 1ms !important;
430
+ scroll-behavior: auto !important;
431
+ }
432
+ }
433
+
434
+ /* High-contrast preference layer, authored in tokens.json (TK-03). */
435
+ @media (prefers-contrast: more) {
436
+ :root {
437
+ --color-bg: var(--neutral-0);
438
+ --color-surface: var(--neutral-0);
439
+ --color-surface-sunken: var(--neutral-0);
440
+ --color-text-primary: var(--neutral-950);
441
+ --color-text-secondary: var(--neutral-950);
442
+ --color-text-tertiary: var(--neutral-850);
443
+ --color-border: var(--neutral-950);
444
+ --color-border-strong: var(--neutral-950);
445
+ --color-border-hover: var(--neutral-950);
446
+ --color-border-brand: var(--neutral-950);
447
+ --color-focus-ring: var(--neutral-950);
448
+ --color-link: var(--neutral-950);
449
+ --color-link-hover: var(--neutral-950);
450
+ --color-accent: var(--neutral-950);
451
+ --color-accent-hover: var(--neutral-850);
452
+ --color-on-accent: var(--neutral-0);
453
+ --color-accent-subtle: var(--neutral-200);
454
+ --color-accent-emphasis: var(--neutral-950);
455
+ }
456
+ [data-theme="dark"] {
457
+ --color-bg: var(--neutral-950);
458
+ --color-surface: var(--neutral-950);
459
+ --color-surface-sunken: var(--neutral-950);
460
+ --color-text-primary: var(--neutral-0);
461
+ --color-text-secondary: var(--neutral-0);
462
+ --color-text-tertiary: var(--neutral-150);
463
+ --color-border: var(--neutral-0);
464
+ --color-border-strong: var(--neutral-0);
465
+ --color-border-hover: var(--green-500);
466
+ --color-border-brand: var(--green-500);
467
+ --color-focus-ring: var(--green-500);
468
+ --color-link: var(--green-500);
469
+ --color-link-hover: var(--neutral-0);
470
+ --color-accent: var(--green-500);
471
+ --color-accent-hover: var(--brand-lime-dim);
472
+ --color-on-accent: var(--neutral-950);
473
+ --color-accent-subtle: var(--green-950);
474
+ --color-accent-emphasis: var(--neutral-0);
475
+ }
476
+ }
477
+ @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
478
+ :root:not([data-theme="light"]) {
479
+ --color-bg: var(--neutral-950);
480
+ --color-surface: var(--neutral-950);
481
+ --color-surface-sunken: var(--neutral-950);
482
+ --color-text-primary: var(--neutral-0);
483
+ --color-text-secondary: var(--neutral-0);
484
+ --color-text-tertiary: var(--neutral-150);
485
+ --color-border: var(--neutral-0);
486
+ --color-border-strong: var(--neutral-0);
487
+ --color-border-hover: var(--green-500);
488
+ --color-border-brand: var(--green-500);
489
+ --color-focus-ring: var(--green-500);
490
+ --color-link: var(--green-500);
491
+ --color-link-hover: var(--neutral-0);
492
+ --color-accent: var(--green-500);
493
+ --color-accent-hover: var(--brand-lime-dim);
494
+ --color-on-accent: var(--neutral-950);
495
+ --color-accent-subtle: var(--green-950);
496
+ --color-accent-emphasis: var(--neutral-0);
497
+ }
498
+ }