@airframeui/tokens 0.0.1

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 (8) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +49 -0
  3. package/dist/index.d.ts +13 -0
  4. package/dist/index.js +1 -0
  5. package/dist/tokens.css +721 -0
  6. package/dist/tokens.js +357 -0
  7. package/dist/tokens.json +357 -0
  8. package/package.json +37 -0
package/dist/tokens.css ADDED
@@ -0,0 +1,721 @@
1
+ /* @airframeui tokens.css (generated from CSS source files) */
2
+ @layer af.tokens {
3
+
4
+ /* Base tokens - shared across all themes */
5
+ /* @airframe base tokens - Foundation Primitives */
6
+
7
+ @layer af.tokens {
8
+ :root {
9
+ /* --- Color primitives --- */
10
+ --af-base-primary: #1f3fe0;
11
+ --af-base-secondary: #dbe1f4;
12
+ --af-base-tertiary: #111827;
13
+ --af-base-success: #22c55e;
14
+ --af-base-warning: #fbbf24;
15
+ --af-base-danger: #dc2626;
16
+ --af-base-info: #38bdf8;
17
+
18
+ --af-base-white: #ffffff;
19
+ --af-base-black: #000000;
20
+ --af-base-neutral-50: #f8fafc;
21
+ --af-base-neutral-100: #f1f5f9;
22
+ --af-base-neutral-200: #e2e8f0;
23
+ --af-base-neutral-300: #cbd5e1;
24
+ --af-base-neutral-400: #94a3b8;
25
+ --af-base-neutral-500: #64748b;
26
+ --af-base-neutral-600: #475569;
27
+ --af-base-neutral-700: #334155;
28
+ --af-base-neutral-800: #1f2937;
29
+ --af-base-neutral-900: #111827;
30
+
31
+ /* --- Breakpoints --- */
32
+ --af-bp-xs: 360px;
33
+ --af-bp-sm: 640px;
34
+ --af-bp-md: 768px;
35
+ --af-bp-lg: 1024px;
36
+ --af-bp-xl: 1280px;
37
+ --af-bp-2xl: 1536px;
38
+
39
+ /* --- Space scale (used by af-gap-*, af-p-*, etc.) --- */
40
+ --af-space-0: 0px;
41
+ --af-space-1: 4px;
42
+ --af-space-2: 8px;
43
+ --af-space-3: 12px;
44
+ --af-space-4: 16px;
45
+ --af-space-5: 24px;
46
+ --af-space-6: 32px;
47
+ --af-space-7: 40px;
48
+ --af-space-8: 48px;
49
+
50
+ /* --- Radii --- */
51
+ --af-radius-0: 0px;
52
+ --af-radius-sm: 6px;
53
+ --af-radius-md: 10px;
54
+ --af-radius-lg: 16px;
55
+ --af-radius-xl: 24px;
56
+ --af-radius-full: 9999px;
57
+
58
+ /* --- Typography primitives --- */
59
+ --af-base-font-sans:
60
+ ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
61
+ 'Apple Color Emoji', 'Segoe UI Emoji';
62
+ --af-base-font-mono:
63
+ ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
64
+ monospace;
65
+ --af-font-primary: var(--af-base-font-sans);
66
+ --af-font-mono: var(--af-base-font-mono);
67
+
68
+ /* Type scale — modular SaaS ramp (12 → 72) */
69
+ --af-text-xs: 0.75rem; /* 12 — badges, meta */
70
+ --af-text-sm: 0.875rem; /* 14 — labels, captions */
71
+ --af-text-md: 1rem; /* 16 — body */
72
+ --af-text-lg: 1.1875rem; /* 19 — emphasized body */
73
+ --af-text-xl: 1.5rem; /* 24 — section titles */
74
+ --af-text-2xl: 2rem; /* 32 — page titles */
75
+ --af-text-3xl: 2.5rem; /* 40 — h1 */
76
+ --af-text-4xl: 3.5rem; /* 56 — display */
77
+ --af-text-5xl: 4.5rem; /* 72 — hero */
78
+
79
+ --af-leading-tight: 1.15;
80
+ --af-leading-normal: 1.55;
81
+ --af-leading-loose: 1.75;
82
+
83
+ --af-weight-regular: 400;
84
+ --af-weight-medium: 500;
85
+ --af-weight-semibold: 600;
86
+ --af-weight-bold: 700;
87
+ --af-weight-extrabold: 800;
88
+
89
+ /* --- Shadows (keep simple, override-friendly) --- */
90
+ --af-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
91
+ --af-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.1);
92
+ --af-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);
93
+
94
+ /* --- Z-index scale --- */
95
+ --af-z-base: 0;
96
+ --af-z-dropdown: 1000;
97
+ --af-z-sticky: 1100;
98
+ --af-z-overlay: 1200;
99
+ --af-z-modal: 1300;
100
+ --af-z-toast: 1400;
101
+
102
+ /* --- Motion --- */
103
+ --af-duration-fast: 120ms;
104
+ --af-duration-md: 200ms;
105
+ --af-duration-slow: 320ms;
106
+
107
+ /* Animation durations (for keyframe animations) */
108
+ --af-animation-duration-fast: 200ms;
109
+ --af-animation-duration-md: 400ms;
110
+ --af-animation-duration-slow: 600ms;
111
+ --af-animation-duration-slower: 1500ms;
112
+
113
+ --af-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
114
+ --af-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
115
+ --af-ease-in: cubic-bezier(0.4, 0, 1, 1);
116
+ --af-ease-out: cubic-bezier(0, 0, 0.2, 1);
117
+ --af-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
118
+ --af-ease-linear: linear;
119
+
120
+ /* --- Borders --- */
121
+ --af-border-width: 2px;
122
+ --af-hit-size: 2.75rem;
123
+
124
+ /* --- Global knobs (for color-mix derivations) --- */
125
+ --af-hover-mix: 12%;
126
+ --af-active-mix: 18%;
127
+ --af-soft-mix: 12%;
128
+ /* Dark enough that success/warning/info hard text clears WCAG AA on soft tints */
129
+ --af-hard-mix: 45%;
130
+ --af-border-mix: 22%;
131
+
132
+ /* --- Layout semantics --- */
133
+ --af-layout-gap: var(--af-space-4);
134
+ --af-container-padding-x: var(--af-space-4);
135
+ --af-container-max-w: 90em; /* 1440px */
136
+ --af-container-max-w-xs: 25rem; /* 400px */
137
+ --af-container-max-w-sm: 40rem; /* 640px */
138
+ --af-container-max-w-md: 48rem; /* 768px */
139
+ --af-container-max-w-lg: 64rem; /* 1024px */
140
+ --af-container-max-w-xl: 80rem; /* 1280px */
141
+ --af-container-max-w-2xl: 96rem; /* 1536px */
142
+
143
+ /* --- Typography semantics (roles) --- */
144
+ --af-font-body: var(--af-base-font-sans);
145
+ --af-font-heading: var(--af-font-primary);
146
+ --af-font-code: var(--af-base-font-mono);
147
+
148
+ --af-text-body-size: var(--af-text-md);
149
+ --af-text-body-leading: var(--af-leading-normal);
150
+ --af-text-heading-leading: var(--af-leading-tight);
151
+ --af-text-heading-weight: var(--af-weight-semibold);
152
+
153
+ --af-type-display-size: var(--af-text-5xl);
154
+ --af-type-display-weight: var(--af-weight-bold);
155
+ --af-type-display-leading: var(--af-leading-tight);
156
+
157
+ --af-type-h1-size: var(--af-text-3xl);
158
+ --af-type-h2-size: var(--af-text-2xl);
159
+ --af-type-h3-size: var(--af-text-xl);
160
+ --af-type-h4-size: var(--af-text-lg);
161
+ --af-type-h5-size: var(--af-text-md);
162
+ --af-type-h6-size: var(--af-text-sm);
163
+ --af-type-body-size: var(--af-text-md);
164
+ --af-type-caption-size: var(--af-text-sm);
165
+
166
+ --af-type-h1-weight: var(--af-weight-semibold);
167
+ --af-type-h2-weight: var(--af-weight-semibold);
168
+ --af-type-h3-weight: var(--af-weight-semibold);
169
+ --af-type-h4-weight: var(--af-weight-semibold);
170
+ --af-type-h5-weight: var(--af-weight-semibold);
171
+ --af-type-h6-weight: var(--af-weight-semibold);
172
+ --af-type-body-weight: var(--af-weight-regular);
173
+ --af-type-caption-weight: var(--af-weight-regular);
174
+
175
+ --af-type-h1-leading: var(--af-leading-tight);
176
+ --af-type-h2-leading: var(--af-leading-tight);
177
+ --af-type-h3-leading: var(--af-leading-tight);
178
+ --af-type-h4-leading: var(--af-leading-normal);
179
+ --af-type-h5-leading: var(--af-leading-normal);
180
+ --af-type-h6-leading: var(--af-leading-normal);
181
+ --af-type-body-leading: var(--af-leading-normal);
182
+ --af-type-caption-leading: var(--af-leading-normal);
183
+
184
+ --af-type-h1-tracking: -0.02em;
185
+ --af-type-h2-tracking: -0.01em;
186
+ --af-type-h3-tracking: 0em;
187
+ --af-type-h4-tracking: 0em;
188
+ --af-type-h5-tracking: 0em;
189
+ --af-type-h6-tracking: 0em;
190
+
191
+ /* --- Component tokens (thin layer for common customizations) --- */
192
+
193
+ /* Shared control tokens (for inputs, selects, etc.) */
194
+ --af-control-min-height: auto;
195
+ --af-control-radius: var(--af-radius-xl);
196
+ --af-control-padding-y: var(--af-space-2);
197
+ --af-control-padding-x: var(--af-space-3);
198
+ --af-control-border: var(--af-color-border);
199
+
200
+ /* Choice controls (checkbox, radio, switch track) */
201
+ --af-choice-size: 1.5rem;
202
+ --af-switch-height: var(--af-choice-size);
203
+ --af-switch-width-ratio: 0.8;
204
+
205
+ /* Link */
206
+ --af-link-primary: var(--af-color-primary);
207
+ --af-link-hover-primary: var(--af-color-primary-hover);
208
+
209
+ /* Button */
210
+ --af-btn-min-height: var(--af-control-min-height);
211
+ --af-btn-radius: var(--af-radius-full);
212
+ --af-btn-padding-y: var(--af-control-padding-y);
213
+ --af-btn-padding-x: var(--af-space-4);
214
+ --af-btn-gap: var(--af-space-2);
215
+ --af-btn-icon-size: 1.25em;
216
+ --af-btn-font-weight: var(--af-weight-medium);
217
+ --af-btn-border-width: var(--af-border-width);
218
+
219
+ --af-btn-default-bg: var(--af-color-primary);
220
+ --af-btn-default-color: var(--af-color-on-primary);
221
+ --af-btn-default-hover: var(--af-color-primary-hover);
222
+ --af-btn-default-active: var(--af-color-primary-active);
223
+
224
+ --af-btn-secondary-bg: var(--af-color-secondary);
225
+ --af-btn-secondary-color: var(--af-color-on-secondary);
226
+ --af-btn-secondary-hover: color-mix(in srgb, var(--af-btn-secondary-bg), black 4%);
227
+ --af-btn-secondary-active: color-mix(in srgb, var(--af-btn-secondary-bg), black 8%);
228
+
229
+ --af-btn-outline-color: var(--af-color-primary);
230
+ --af-btn-outline-border: var(--af-color-primary);
231
+ --af-btn-outline-hover: var(--af-btn-outline-border);
232
+ --af-btn-outline-active: color-mix(
233
+ in srgb,
234
+ var(--af-color-primary),
235
+ var(--af-color-surface-primary) 84%
236
+ );
237
+
238
+ /* Input */
239
+ --af-input-min-height: var(--af-control-min-height);
240
+ --af-input-radius: var(--af-control-radius);
241
+ --af-input-padding-y: var(--af-control-padding-y);
242
+ --af-input-padding-x: var(--af-control-padding-x);
243
+ --af-input-font-size: var(--af-text-md);
244
+ --af-input-leading: var(--af-leading-normal);
245
+ --af-input-placeholder-color: var(--af-color-text-muted);
246
+
247
+ /* Card */
248
+ --af-card-radius: var(--af-radius-lg);
249
+ --af-card-padding: var(--af-space-4);
250
+ --af-card-shadow: var(--af-shadow-sm);
251
+ --af-card-shadow-hover: var(--af-shadow-md);
252
+
253
+ /* Focus ring */
254
+ --af-color-focus: var(--af-color-primary);
255
+ --af-focus-ring-color: var(--af-color-focus);
256
+ --af-focus-ring-width: 2px;
257
+ --af-focus-ring-offset: 2px;
258
+
259
+ /* --- Intents (shared across all themes) --- */
260
+ --af-color-primary: var(--af-base-primary);
261
+ --af-color-secondary: var(--af-base-secondary);
262
+ --af-color-tertiary: var(--af-base-tertiary);
263
+ --af-color-danger: var(--af-base-danger);
264
+ --af-color-success: var(--af-base-success);
265
+ --af-color-warning: var(--af-base-warning);
266
+ --af-color-info: var(--af-base-info);
267
+
268
+ /* Default on-intent colors (can be overridden by themes via --dark, --hc-light, --hc-dark suffixes) */
269
+ --af-color-on-primary: var(
270
+ --af-color-on-primary--hc-light,
271
+ var(--af-color-on-primary--dark, var(--af-base-white))
272
+ );
273
+ --af-color-on-secondary: var(
274
+ --af-color-on-secondary--hc-light,
275
+ var(--af-color-on-secondary--dark, var(--af-base-neutral-900))
276
+ );
277
+ --af-color-on-tertiary: var(
278
+ --af-color-on-tertiary--hc-light,
279
+ var(--af-color-on-tertiary--dark, var(--af-base-white))
280
+ );
281
+ --af-color-on-danger: var(
282
+ --af-color-on-danger--hc-light,
283
+ var(--af-color-on-danger--dark, var(--af-base-white))
284
+ );
285
+ --af-color-on-success: var(
286
+ --af-color-on-success--hc-light,
287
+ var(--af-color-on-success--dark, var(--af-base-neutral-900))
288
+ );
289
+ --af-color-on-warning: var(
290
+ --af-color-on-warning--hc-light,
291
+ var(--af-color-on-warning--dark, var(--af-base-neutral-900))
292
+ );
293
+ --af-color-on-info: var(
294
+ --af-color-on-info--hc-light,
295
+ var(--af-color-on-info--dark, var(--af-base-white))
296
+ );
297
+
298
+ /* --- Action (semantic CTA/brand color; defaults to primary, overridable per theme) --- */
299
+ --af-color-action: var(--af-color-primary);
300
+ --af-color-on-action: var(--af-color-on-primary);
301
+
302
+ /* --- Derived interaction tokens (via color-mix) --- */
303
+ /* These automatically use theme-specific --af-color-surface-primary */
304
+ --af-color-primary-hover: color-mix(
305
+ in srgb,
306
+ var(--af-color-primary),
307
+ black var(--af-hover-mix)
308
+ );
309
+ --af-color-primary-active: color-mix(
310
+ in srgb,
311
+ var(--af-color-primary),
312
+ black var(--af-active-mix)
313
+ );
314
+ --af-color-primary-soft: color-mix(
315
+ in srgb,
316
+ var(--af-color-primary),
317
+ var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
318
+ );
319
+ --af-color-primary-hard: color-mix(in srgb, var(--af-color-primary), black var(--af-hard-mix));
320
+
321
+ --af-color-action-hover: color-mix(in srgb, var(--af-color-action), black var(--af-hover-mix));
322
+ --af-color-action-active: color-mix(
323
+ in srgb,
324
+ var(--af-color-action),
325
+ black var(--af-active-mix)
326
+ );
327
+ --af-color-action-soft: color-mix(
328
+ in srgb,
329
+ var(--af-color-action),
330
+ var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
331
+ );
332
+ --af-color-action-hard: color-mix(in srgb, var(--af-color-action), black var(--af-hard-mix));
333
+
334
+ --af-color-secondary-hover: color-mix(
335
+ in srgb,
336
+ var(--af-color-secondary),
337
+ black var(--af-hover-mix)
338
+ );
339
+ --af-color-secondary-active: color-mix(
340
+ in srgb,
341
+ var(--af-color-secondary),
342
+ black var(--af-active-mix)
343
+ );
344
+ --af-color-secondary-soft: color-mix(
345
+ in srgb,
346
+ var(--af-color-secondary),
347
+ var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
348
+ );
349
+ --af-color-secondary-hard: color-mix(
350
+ in srgb,
351
+ var(--af-color-secondary),
352
+ black var(--af-hard-mix)
353
+ );
354
+
355
+ --af-color-tertiary-hover: color-mix(
356
+ in srgb,
357
+ var(--af-color-tertiary),
358
+ black var(--af-hover-mix)
359
+ );
360
+ --af-color-tertiary-active: color-mix(
361
+ in srgb,
362
+ var(--af-color-tertiary),
363
+ black var(--af-active-mix)
364
+ );
365
+ --af-color-tertiary-soft: color-mix(
366
+ in srgb,
367
+ var(--af-color-tertiary),
368
+ var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
369
+ );
370
+ --af-color-tertiary-hard: color-mix(
371
+ in srgb,
372
+ var(--af-color-tertiary),
373
+ black var(--af-hard-mix)
374
+ );
375
+
376
+ --af-color-success-hover: color-mix(
377
+ in srgb,
378
+ var(--af-color-success),
379
+ black var(--af-hover-mix)
380
+ );
381
+ --af-color-success-active: color-mix(
382
+ in srgb,
383
+ var(--af-color-success),
384
+ black var(--af-active-mix)
385
+ );
386
+ --af-color-success-soft: color-mix(
387
+ in srgb,
388
+ var(--af-color-success),
389
+ var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
390
+ );
391
+ --af-color-success-hard: color-mix(in srgb, var(--af-color-success), black var(--af-hard-mix));
392
+
393
+ --af-color-warning-hover: color-mix(
394
+ in srgb,
395
+ var(--af-color-warning),
396
+ black var(--af-hover-mix)
397
+ );
398
+ --af-color-warning-active: color-mix(
399
+ in srgb,
400
+ var(--af-color-warning),
401
+ black var(--af-active-mix)
402
+ );
403
+ --af-color-warning-soft: color-mix(
404
+ in srgb,
405
+ var(--af-color-warning),
406
+ var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
407
+ );
408
+ --af-color-warning-hard: color-mix(in srgb, var(--af-color-warning), black var(--af-hard-mix));
409
+
410
+ --af-color-danger-hover: color-mix(in srgb, var(--af-color-danger), black var(--af-hover-mix));
411
+ --af-color-danger-active: color-mix(
412
+ in srgb,
413
+ var(--af-color-danger),
414
+ black var(--af-active-mix)
415
+ );
416
+ --af-color-danger-soft: color-mix(
417
+ in srgb,
418
+ var(--af-color-danger),
419
+ var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
420
+ );
421
+ --af-color-danger-hard: color-mix(in srgb, var(--af-color-danger), black var(--af-hard-mix));
422
+
423
+ --af-color-info-hover: color-mix(in srgb, var(--af-color-info), black var(--af-hover-mix));
424
+ --af-color-info-active: color-mix(in srgb, var(--af-color-info), black var(--af-active-mix));
425
+ --af-color-info-soft: color-mix(
426
+ in srgb,
427
+ var(--af-color-info),
428
+ var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
429
+ );
430
+ --af-color-info-hard: color-mix(in srgb, var(--af-color-info), black var(--af-hard-mix));
431
+ }
432
+
433
+ /* Reduced motion support - override timing variables */
434
+ @media (prefers-reduced-motion: reduce) {
435
+ :root {
436
+ --af-duration-fast: 0.01ms;
437
+ --af-duration-md: 0.01ms;
438
+ --af-duration-slow: 0.01ms;
439
+ --af-animation-duration-fast: 0.01ms;
440
+ --af-animation-duration-md: 0.01ms;
441
+ --af-animation-duration-slow: 0.01ms;
442
+ --af-animation-duration-slower: 0.01ms;
443
+ }
444
+ }
445
+ }
446
+
447
+
448
+ /* Light theme (default) */
449
+ /* @airframeui light theme tokens - Semantic Tokens */
450
+
451
+ @layer af.tokens {
452
+ :root {
453
+ /* --- Base surfaces --- */
454
+ --af-color-background: var(
455
+ --af-color-background--hc-light,
456
+ var(--af-color-background--dark, var(--af-base-white))
457
+ );
458
+ --af-color-surface-primary: var(
459
+ --af-color-surface-primary--hc-light,
460
+ var(--af-color-surface-primary--dark, var(--af-base-white))
461
+ );
462
+ --af-color-surface-secondary: var(
463
+ --af-color-surface-secondary--hc-light,
464
+ var(--af-color-surface-secondary--dark, var(--af-base-neutral-50))
465
+ );
466
+ --af-color-surface-tertiary: var(
467
+ --af-color-surface-tertiary--hc-light,
468
+ var(--af-color-surface-tertiary--dark, var(--af-base-neutral-100))
469
+ );
470
+
471
+ /* --- Inverse surfaces (dark in light mode) --- */
472
+ --af-color-surface-inverse-primary: var(
473
+ --af-color-surface-inverse-primary--hc-light,
474
+ var(--af-color-surface-inverse-primary--dark, var(--af-base-neutral-900))
475
+ );
476
+ --af-color-surface-inverse-secondary: var(
477
+ --af-color-surface-inverse-secondary--hc-light,
478
+ var(--af-color-surface-inverse-secondary--dark, var(--af-base-neutral-800))
479
+ );
480
+ --af-color-surface-inverse-tertiary: var(
481
+ --af-color-surface-inverse-tertiary--hc-light,
482
+ var(--af-color-surface-inverse-tertiary--dark, var(--af-base-neutral-700))
483
+ );
484
+
485
+ /* --- Text --- */
486
+ --af-color-text: var(
487
+ --af-color-text--hc-light,
488
+ var(--af-color-text--dark, var(--af-base-neutral-900))
489
+ );
490
+ --af-color-text-muted: var(
491
+ --af-color-text-muted--hc-light,
492
+ var(--af-color-text-muted--dark, var(--af-base-neutral-700))
493
+ );
494
+ --af-color-text-inverse: var(
495
+ --af-color-text-inverse--hc-light,
496
+ var(--af-color-text-inverse--dark, var(--af-base-white))
497
+ );
498
+
499
+ /* --- Borders --- */
500
+ --af-color-border: var(
501
+ --af-color-border--hc-light,
502
+ var(--af-color-border--dark, var(--af-base-neutral-200))
503
+ );
504
+ --af-color-border-strong: var(
505
+ --af-color-border-strong--hc-light,
506
+ var(--af-color-border-strong--dark, var(--af-base-neutral-300))
507
+ );
508
+ }
509
+ }
510
+
511
+
512
+ /* Dark theme - automatic and manual */
513
+ /* @airframeui dark theme tokens - Semantic Tokens */
514
+
515
+ @layer af.tokens {
516
+ /* Automatic dark mode - respects system preference */
517
+ @media (prefers-color-scheme: dark) {
518
+ :root {
519
+ /* --- Base surfaces --- */
520
+ --af-color-background--dark: var(--af-color-background--hc-dark, var(--af-base-neutral-900));
521
+ --af-color-surface-primary--dark: var(
522
+ --af-color-surface-primary--hc-dark,
523
+ var(--af-base-neutral-800)
524
+ );
525
+ --af-color-surface-secondary--dark: var(
526
+ --af-color-surface-secondary--hc-dark,
527
+ var(--af-base-neutral-700)
528
+ );
529
+ --af-color-surface-tertiary--dark: var(
530
+ --af-color-surface-tertiary--hc-dark,
531
+ var(--af-base-neutral-600)
532
+ );
533
+
534
+ /* --- Inverse surfaces (light in dark mode) --- */
535
+ --af-color-surface-inverse-primary--dark: var(
536
+ --af-color-surface-inverse-primary--hc-dark,
537
+ var(--af-base-white)
538
+ );
539
+ --af-color-surface-inverse-secondary--dark: var(
540
+ --af-color-surface-inverse-secondary--hc-dark,
541
+ var(--af-base-neutral-50)
542
+ );
543
+ --af-color-surface-inverse-tertiary--dark: var(
544
+ --af-color-surface-inverse-tertiary--hc-dark,
545
+ var(--af-base-neutral-100)
546
+ );
547
+
548
+ /* --- Text --- */
549
+ --af-color-text--dark: var(--af-color-text--hc-dark, var(--af-base-neutral-50));
550
+ --af-color-text-muted--dark: var(--af-color-text-muted--hc-dark, var(--af-base-neutral-300));
551
+ --af-color-text-inverse--dark: var(
552
+ --af-color-text-inverse--hc-dark,
553
+ var(--af-base-neutral-900)
554
+ );
555
+
556
+ /* --- Borders --- */
557
+ --af-color-border--dark: var(--af-color-border--hc-dark, var(--af-base-neutral-600));
558
+ --af-color-border-strong--dark: var(
559
+ --af-color-border-strong--hc-dark,
560
+ var(--af-base-neutral-500)
561
+ );
562
+
563
+ /* --- Intents (override on-success for dark mode) --- */
564
+ --af-color-on-success--dark: var(--af-color-on-success--hc-dark, var(--af-base-white));
565
+ }
566
+ }
567
+
568
+ /* Manual dark mode override (works even when system preference is light) */
569
+ /* Note: This block duplicates the @media block above for explicitness.
570
+ * Both blocks need the same values because:
571
+ * - @media (prefers-color-scheme: dark) only applies when system preference is dark
572
+ * - [data-theme="dark"] and .dark allow manual override regardless of system preference
573
+ * Keeping both explicit (rather than generating via build) aligns with Airframe's
574
+ * principle: "organizes complexity, doesn't hide it" */
575
+ [data-theme='dark'],
576
+ .dark {
577
+ color-scheme: dark;
578
+
579
+ /* --- Base surfaces --- */
580
+ --af-color-background--dark: var(--af-color-background--hc-dark, var(--af-base-neutral-900));
581
+ --af-color-surface-primary--dark: var(
582
+ --af-color-surface-primary--hc-dark,
583
+ var(--af-base-neutral-800)
584
+ );
585
+ --af-color-surface-secondary--dark: var(
586
+ --af-color-surface-secondary--hc-dark,
587
+ var(--af-base-neutral-700)
588
+ );
589
+ --af-color-surface-tertiary--dark: var(
590
+ --af-color-surface-tertiary--hc-dark,
591
+ var(--af-base-neutral-600)
592
+ );
593
+
594
+ /* --- Inverse surfaces (light in dark mode) --- */
595
+ --af-color-surface-inverse-primary--dark: var(
596
+ --af-color-surface-inverse-primary--hc-dark,
597
+ var(--af-base-white)
598
+ );
599
+ --af-color-surface-inverse-secondary--dark: var(
600
+ --af-color-surface-inverse-secondary--hc-dark,
601
+ var(--af-base-neutral-50)
602
+ );
603
+ --af-color-surface-inverse-tertiary--dark: var(
604
+ --af-color-surface-inverse-tertiary--hc-dark,
605
+ var(--af-base-neutral-100)
606
+ );
607
+
608
+ /* --- Text --- */
609
+ --af-color-text--dark: var(--af-color-text--hc-dark, var(--af-base-neutral-50));
610
+ --af-color-text-muted--dark: var(--af-color-text-muted--hc-dark, var(--af-base-neutral-300));
611
+ --af-color-text-inverse--dark: var(
612
+ --af-color-text-inverse--hc-dark,
613
+ var(--af-base-neutral-900)
614
+ );
615
+
616
+ /* --- Borders --- */
617
+ --af-color-border--dark: var(--af-color-border--hc-dark, var(--af-base-neutral-600));
618
+ --af-color-border-strong--dark: var(
619
+ --af-color-border-strong--hc-dark,
620
+ var(--af-base-neutral-500)
621
+ );
622
+
623
+ /* --- Intents (override on-success for dark mode) --- */
624
+ --af-color-on-success--dark: var(--af-color-on-success--hc-dark, var(--af-base-white));
625
+
626
+ /* --- Action (optional: override CTA/brand color in dark mode; primary follows) --- */
627
+ /* --af-color-action--dark: #yourcolor; --af-color-on-action--dark: #fff; */
628
+
629
+ /* Derived interaction tokens (hover, active, soft, hard) are defined in base.css */
630
+ }
631
+ }
632
+
633
+
634
+ /* High-contrast themes - automatic and manual */
635
+ /* @airframeui high-contrast theme tokens - Semantic Tokens */
636
+
637
+ @layer af.tokens {
638
+ /* Automatic high contrast - respects system preference */
639
+ @media (prefers-contrast: more), (prefers-contrast: high) {
640
+ :root {
641
+ /* --- Primitives (optional override for HC mode) --- */
642
+ /* Override these to use different base colors in high-contrast; semantic tokens (--af-color-primary, etc.) will pick them up. Defaults match base. */
643
+ --af-base-primary: var(--af-base-primary--hc-light, var(--af-base-primary));
644
+ --af-base-secondary: var(--af-base-secondary--hc-light, var(--af-base-secondary));
645
+ --af-base-tertiary: var(--af-base-tertiary--hc-light, var(--af-base-tertiary));
646
+ --af-base-success: var(--af-base-success--hc-light, var(--af-base-success));
647
+ --af-base-warning: var(--af-base-warning--hc-light, var(--af-base-warning));
648
+ --af-base-danger: var(--af-base-danger--hc-light, var(--af-base-danger));
649
+ --af-base-info: var(--af-base-info--hc-light, var(--af-base-info));
650
+
651
+ /* --- Base surfaces --- */
652
+ --af-color-background--hc-light: var(--af-base-white);
653
+ --af-color-surface-primary--hc-light: var(--af-base-white);
654
+ --af-color-surface-secondary--hc-light: #f5f5f5;
655
+ --af-color-surface-tertiary--hc-light: #e6e6e6;
656
+
657
+ /* --- Inverse surfaces (dark in light mode) --- */
658
+ --af-color-surface-inverse-primary--hc-light: var(--af-base-black);
659
+ --af-color-surface-inverse-secondary--hc-light: #1a1a1a;
660
+ --af-color-surface-inverse-tertiary--hc-light: #333333;
661
+
662
+ /* --- Text --- */
663
+ --af-color-text--hc-light: var(--af-base-black);
664
+ --af-color-text-muted--hc-light: #333333;
665
+ --af-color-text-inverse--hc-light: var(--af-base-white);
666
+
667
+ /* --- Borders --- */
668
+ --af-color-border--hc-light: var(--af-base-black);
669
+ --af-color-border-strong--hc-light: var(--af-base-black);
670
+
671
+ /* --- Intents (override on-intent colors for high contrast light mode) --- */
672
+ --af-color-on-secondary--hc-light: var(--af-base-black);
673
+ --af-color-on-warning--hc-light: var(--af-base-black);
674
+ }
675
+ }
676
+
677
+ @media (prefers-contrast: more) and (prefers-color-scheme: dark),
678
+ (prefers-contrast: high) and (prefers-color-scheme: dark) {
679
+ :root {
680
+ /* --- Primitives (optional override for HC dark mode) --- */
681
+ --af-base-primary: var(--af-base-primary--hc-dark, var(--af-base-primary));
682
+ --af-base-secondary: var(--af-base-secondary--hc-dark, var(--af-base-secondary));
683
+ --af-base-tertiary: var(--af-base-tertiary--hc-dark, var(--af-base-tertiary));
684
+ --af-base-success: var(--af-base-success--hc-dark, var(--af-base-success));
685
+ --af-base-warning: var(--af-base-warning--hc-dark, var(--af-base-warning));
686
+ --af-base-danger: var(--af-base-danger--hc-dark, var(--af-base-danger));
687
+ --af-base-info: var(--af-base-info--hc-dark, var(--af-base-info));
688
+
689
+ /* --- Base surfaces --- */
690
+ --af-color-background--hc-dark: var(--af-base-black);
691
+ --af-color-surface-primary--hc-dark: #1a1a1a;
692
+ --af-color-surface-secondary--hc-dark: #2a2a2a;
693
+ --af-color-surface-tertiary--hc-dark: #333333;
694
+
695
+ /* --- Inverse surfaces (light in dark mode) --- */
696
+ --af-color-surface-inverse-primary--hc-dark: var(--af-base-white);
697
+ --af-color-surface-inverse-secondary--hc-dark: #f5f5f5;
698
+ --af-color-surface-inverse-tertiary--hc-dark: #e6e6e6;
699
+
700
+ /* --- Text --- */
701
+ --af-color-text--hc-dark: var(--af-base-white);
702
+ --af-color-text-muted--hc-dark: #cccccc;
703
+ --af-color-text-inverse--hc-dark: var(--af-base-black);
704
+
705
+ /* --- Borders --- */
706
+ --af-color-border--hc-dark: var(--af-base-white);
707
+ --af-color-border-strong--hc-dark: var(--af-base-white);
708
+
709
+ /* --- Intents (override on-intent colors for high contrast dark mode) --- */
710
+ --af-color-on-primary--hc-dark: var(--af-base-black);
711
+ --af-color-on-secondary--hc-dark: var(--af-base-black);
712
+ --af-color-on-danger--hc-dark: var(--af-base-black);
713
+ --af-color-on-success--hc-dark: var(--af-base-black);
714
+ --af-color-on-warning--hc-dark: var(--af-base-black);
715
+ --af-color-on-info--hc-dark: var(--af-base-black);
716
+ }
717
+ }
718
+ }
719
+
720
+
721
+ }