@airframeui/tokens 0.0.5 → 0.1.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 (7) hide show
  1. package/README.md +13 -4
  2. package/dist/catalog.json +4516 -0
  3. package/dist/index.d.ts +22 -0
  4. package/dist/tokens.css +509 -282
  5. package/dist/tokens.js +4697 -109
  6. package/dist/tokens.json +4696 -109
  7. package/package.json +5 -4
package/dist/tokens.css CHANGED
@@ -7,16 +7,24 @@
7
7
  @layer af.tokens {
8
8
  :root {
9
9
  /* --- Color primitives --- */
10
- --af-base-primary: var(
11
- --af-base-primary--hc-light,
12
- var(--af-base-primary--dark, #1f3fe0)
13
- );
14
- --af-base-secondary: #dbe1f4;
15
- --af-base-tertiary: #111827;
16
- --af-base-success: #22c55e;
17
- --af-base-warning: #fbbf24;
18
- --af-base-danger: #dc2626;
19
- --af-base-info: #38bdf8;
10
+ /* --light / --dark / --hc-* are stored values. The unsuffixed token is the
11
+ resolved color for the active scheme (light on :root). Dark and high-contrast
12
+ selectors reassign the unsuffixed name; they do not rely on "is the suffix
13
+ defined?" fallbacks, so brands can set every suffix at once on [data-brand]. */
14
+ --af-base-primary--light: #0e80eb;
15
+ --af-base-primary: var(--af-base-primary--light);
16
+ --af-base-secondary--light: #dbe1f4;
17
+ --af-base-secondary: var(--af-base-secondary--light);
18
+ --af-base-tertiary--light: #111827;
19
+ --af-base-tertiary: var(--af-base-tertiary--light);
20
+ --af-base-success--light: #22c55e;
21
+ --af-base-success: var(--af-base-success--light);
22
+ --af-base-warning--light: #fbbf24;
23
+ --af-base-warning: var(--af-base-warning--light);
24
+ --af-base-danger--light: #dc2626;
25
+ --af-base-danger: var(--af-base-danger--light);
26
+ --af-base-info--light: #38bdf8;
27
+ --af-base-info: var(--af-base-info--light);
20
28
 
21
29
  --af-base-white: #ffffff;
22
30
  --af-base-black: #000000;
@@ -101,6 +109,7 @@
101
109
  --af-z-overlay: 1200;
102
110
  --af-z-modal: 1300;
103
111
  --af-z-toast: 1400;
112
+ --af-z-loader: 1500;
104
113
 
105
114
  /* --- Motion --- */
106
115
  --af-duration-fast: 120ms;
@@ -135,6 +144,9 @@
135
144
 
136
145
  /* --- Layout semantics --- */
137
146
  --af-layout-gap: var(--af-space-4);
147
+ --af-sidebar-width: 16rem;
148
+ --af-drawer-width: 20rem;
149
+ --af-divider-spacing: var(--af-space-5);
138
150
  --af-container-padding-x: var(--af-space-4);
139
151
  --af-container-max-w: 90em; /* 1440px */
140
152
  --af-container-max-w-xs: 25rem; /* 400px */
@@ -283,39 +295,25 @@
283
295
  --af-color-warning: var(--af-base-warning);
284
296
  --af-color-info: var(--af-base-info);
285
297
 
286
- /* Default on-intent colors (can be overridden by themes via --dark, --hc-light, --hc-dark suffixes) */
287
- --af-color-on-primary: var(
288
- --af-color-on-primary--hc-light,
289
- var(--af-color-on-primary--dark, var(--af-base-white))
290
- );
291
- --af-color-on-secondary: var(
292
- --af-color-on-secondary--hc-light,
293
- var(--af-color-on-secondary--dark, var(--af-base-neutral-900))
294
- );
295
- --af-color-on-tertiary: var(
296
- --af-color-on-tertiary--hc-light,
297
- var(--af-color-on-tertiary--dark, var(--af-base-white))
298
- );
299
- --af-color-on-danger: var(
300
- --af-color-on-danger--hc-light,
301
- var(--af-color-on-danger--dark, var(--af-base-white))
302
- );
303
- --af-color-on-success: var(
304
- --af-color-on-success--hc-light,
305
- var(--af-color-on-success--dark, var(--af-base-neutral-900))
306
- );
307
- --af-color-on-warning: var(
308
- --af-color-on-warning--hc-light,
309
- var(--af-color-on-warning--dark, var(--af-base-neutral-900))
310
- );
311
- --af-color-on-info: var(
312
- --af-color-on-info--hc-light,
313
- var(--af-color-on-info--dark, var(--af-base-white))
314
- );
315
-
316
- /* --- Action (semantic CTA/brand color; defaults to primary, overridable per theme) --- */
317
- --af-color-action: var(--af-color-primary);
318
- --af-color-on-action: var(--af-color-on-primary);
298
+ /* Default on-intent colors (scheme selectors reassign the unsuffixed token) */
299
+ --af-color-on-primary--light: var(--af-base-white);
300
+ --af-color-on-primary: var(--af-color-on-primary--light);
301
+ --af-color-on-secondary--light: var(--af-base-neutral-900);
302
+ --af-color-on-secondary: var(--af-color-on-secondary--light);
303
+ --af-color-on-tertiary--light: var(--af-base-white);
304
+ --af-color-on-tertiary: var(--af-color-on-tertiary--light);
305
+ --af-color-on-danger--light: var(--af-base-white);
306
+ --af-color-on-danger: var(--af-color-on-danger--light);
307
+ --af-color-on-success--light: var(--af-base-neutral-900);
308
+ --af-color-on-success: var(--af-color-on-success--light);
309
+ --af-color-on-warning--light: var(--af-base-neutral-900);
310
+ --af-color-on-warning: var(--af-color-on-warning--light);
311
+ --af-color-on-info--light: var(--af-base-white);
312
+ --af-color-on-info: var(--af-color-on-info--light);
313
+
314
+ /* --- Action (semantic CTA/brand color; defaults to primary, overridable per scheme) --- */
315
+ --af-color-action: var(--af-color-action--light, var(--af-color-primary));
316
+ --af-color-on-action: var(--af-color-on-action--light, var(--af-color-on-primary));
319
317
 
320
318
  /* --- Derived interaction tokens (via color-mix) --- */
321
319
  /* These automatically use theme-specific --af-color-surface-primary */
@@ -334,7 +332,11 @@
334
332
  var(--af-color-primary),
335
333
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
336
334
  );
337
- --af-color-primary-hard: color-mix(in srgb, var(--af-color-primary), var(--af-hard-toward) var(--af-hard-mix));
335
+ --af-color-primary-hard: color-mix(
336
+ in srgb,
337
+ var(--af-color-primary),
338
+ var(--af-hard-toward) var(--af-hard-mix)
339
+ );
338
340
 
339
341
  --af-color-action-hover: color-mix(in srgb, var(--af-color-action), black var(--af-hover-mix));
340
342
  --af-color-action-active: color-mix(
@@ -347,7 +349,11 @@
347
349
  var(--af-color-action),
348
350
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
349
351
  );
350
- --af-color-action-hard: color-mix(in srgb, var(--af-color-action), var(--af-hard-toward) var(--af-hard-mix));
352
+ --af-color-action-hard: color-mix(
353
+ in srgb,
354
+ var(--af-color-action),
355
+ var(--af-hard-toward) var(--af-hard-mix)
356
+ );
351
357
 
352
358
  --af-color-secondary-hover: color-mix(
353
359
  in srgb,
@@ -406,7 +412,11 @@
406
412
  var(--af-color-success),
407
413
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
408
414
  );
409
- --af-color-success-hard: color-mix(in srgb, var(--af-color-success), var(--af-hard-toward) var(--af-hard-mix));
415
+ --af-color-success-hard: color-mix(
416
+ in srgb,
417
+ var(--af-color-success),
418
+ var(--af-hard-toward) var(--af-hard-mix)
419
+ );
410
420
 
411
421
  --af-color-warning-hover: color-mix(
412
422
  in srgb,
@@ -423,7 +433,11 @@
423
433
  var(--af-color-warning),
424
434
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
425
435
  );
426
- --af-color-warning-hard: color-mix(in srgb, var(--af-color-warning), var(--af-hard-toward) var(--af-hard-mix));
436
+ --af-color-warning-hard: color-mix(
437
+ in srgb,
438
+ var(--af-color-warning),
439
+ var(--af-hard-toward) var(--af-hard-mix)
440
+ );
427
441
 
428
442
  --af-color-danger-hover: color-mix(in srgb, var(--af-color-danger), black var(--af-hover-mix));
429
443
  --af-color-danger-active: color-mix(
@@ -436,7 +450,11 @@
436
450
  var(--af-color-danger),
437
451
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
438
452
  );
439
- --af-color-danger-hard: color-mix(in srgb, var(--af-color-danger), var(--af-hard-toward) var(--af-hard-mix));
453
+ --af-color-danger-hard: color-mix(
454
+ in srgb,
455
+ var(--af-color-danger),
456
+ var(--af-hard-toward) var(--af-hard-mix)
457
+ );
440
458
 
441
459
  --af-color-info-hover: color-mix(in srgb, var(--af-color-info), black var(--af-hover-mix));
442
460
  --af-color-info-active: color-mix(in srgb, var(--af-color-info), black var(--af-active-mix));
@@ -445,7 +463,11 @@
445
463
  var(--af-color-info),
446
464
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
447
465
  );
448
- --af-color-info-hard: color-mix(in srgb, var(--af-color-info), var(--af-hard-toward) var(--af-hard-mix));
466
+ --af-color-info-hard: color-mix(
467
+ in srgb,
468
+ var(--af-color-info),
469
+ var(--af-hard-toward) var(--af-hard-mix)
470
+ );
449
471
  }
450
472
 
451
473
  /* Reduced motion support - override timing variables */
@@ -468,61 +490,40 @@
468
490
 
469
491
  @layer af.tokens {
470
492
  :root {
471
- /* --- Base surfaces --- */
472
- --af-color-background: var(
473
- --af-color-background--hc-light,
474
- var(--af-color-background--dark, var(--af-base-white))
475
- );
476
- --af-color-surface-primary: var(
477
- --af-color-surface-primary--hc-light,
478
- var(--af-color-surface-primary--dark, var(--af-base-white))
479
- );
480
- --af-color-surface-secondary: var(
481
- --af-color-surface-secondary--hc-light,
482
- var(--af-color-surface-secondary--dark, var(--af-base-neutral-50))
483
- );
484
- --af-color-surface-tertiary: var(
485
- --af-color-surface-tertiary--hc-light,
486
- var(--af-color-surface-tertiary--dark, var(--af-base-neutral-100))
487
- );
488
-
489
- /* --- Inverse surfaces (dark in light mode) --- */
490
- --af-color-surface-inverse-primary: var(
491
- --af-color-surface-inverse-primary--hc-light,
492
- var(--af-color-surface-inverse-primary--dark, var(--af-base-neutral-900))
493
- );
494
- --af-color-surface-inverse-secondary: var(
495
- --af-color-surface-inverse-secondary--hc-light,
496
- var(--af-color-surface-inverse-secondary--dark, var(--af-base-neutral-800))
497
- );
498
- --af-color-surface-inverse-tertiary: var(
499
- --af-color-surface-inverse-tertiary--hc-light,
500
- var(--af-color-surface-inverse-tertiary--dark, var(--af-base-neutral-700))
501
- );
502
-
503
- /* --- Text --- */
504
- --af-color-text: var(
505
- --af-color-text--hc-light,
506
- var(--af-color-text--dark, var(--af-base-neutral-900))
507
- );
508
- --af-color-text-muted: var(
509
- --af-color-text-muted--hc-light,
510
- var(--af-color-text-muted--dark, var(--af-base-neutral-700))
511
- );
512
- --af-color-text-inverse: var(
513
- --af-color-text-inverse--hc-light,
514
- var(--af-color-text-inverse--dark, var(--af-base-white))
515
- );
516
-
517
- /* --- Borders --- */
518
- --af-color-border: var(
519
- --af-color-border--hc-light,
520
- var(--af-color-border--dark, var(--af-base-neutral-300))
521
- );
522
- --af-color-border-strong: var(
523
- --af-color-border-strong--hc-light,
524
- var(--af-color-border-strong--dark, var(--af-base-neutral-400))
525
- );
493
+ /* Stored light values. Brands override these (and --dark / --hc-*) on [data-brand].
494
+ The unsuffixed token is the resolved color for the active scheme. */
495
+ --af-color-background--light: var(--af-base-white);
496
+ --af-color-surface-primary--light: var(--af-base-white);
497
+ --af-color-surface-secondary--light: var(--af-base-neutral-50);
498
+ --af-color-surface-tertiary--light: var(--af-base-neutral-100);
499
+
500
+ --af-color-surface-inverse-primary--light: var(--af-base-neutral-900);
501
+ --af-color-surface-inverse-secondary--light: var(--af-base-neutral-800);
502
+ --af-color-surface-inverse-tertiary--light: var(--af-base-neutral-700);
503
+
504
+ --af-color-text--light: var(--af-base-neutral-900);
505
+ --af-color-text-muted--light: var(--af-base-neutral-700);
506
+ --af-color-text-inverse--light: var(--af-base-white);
507
+
508
+ --af-color-border--light: var(--af-base-neutral-300);
509
+ --af-color-border-strong--light: var(--af-base-neutral-400);
510
+
511
+ /* Resolved (light is the default scheme) */
512
+ --af-color-background: var(--af-color-background--light);
513
+ --af-color-surface-primary: var(--af-color-surface-primary--light);
514
+ --af-color-surface-secondary: var(--af-color-surface-secondary--light);
515
+ --af-color-surface-tertiary: var(--af-color-surface-tertiary--light);
516
+
517
+ --af-color-surface-inverse-primary: var(--af-color-surface-inverse-primary--light);
518
+ --af-color-surface-inverse-secondary: var(--af-color-surface-inverse-secondary--light);
519
+ --af-color-surface-inverse-tertiary: var(--af-color-surface-inverse-tertiary--light);
520
+
521
+ --af-color-text: var(--af-color-text--light);
522
+ --af-color-text-muted: var(--af-color-text-muted--light);
523
+ --af-color-text-inverse: var(--af-color-text-inverse--light);
524
+
525
+ --af-color-border: var(--af-color-border--light);
526
+ --af-color-border-strong: var(--af-color-border-strong--light);
526
527
  }
527
528
  }
528
529
 
@@ -531,144 +532,170 @@
531
532
  /* @airframeui dark theme tokens - Semantic Tokens */
532
533
 
533
534
  @layer af.tokens {
534
- /* Automatic dark mode - respects system preference */
535
+ /* Stored dark values — always defined so [data-brand] can override them without
536
+ wrapping in a media query. Light resolved tokens do not read these. */
537
+ :root {
538
+ --af-color-background--dark: var(--af-base-neutral-900);
539
+ --af-color-surface-primary--dark: var(--af-base-neutral-800);
540
+ --af-color-surface-secondary--dark: var(--af-base-neutral-700);
541
+ --af-color-surface-tertiary--dark: var(--af-base-neutral-600);
542
+
543
+ --af-color-surface-inverse-primary--dark: var(--af-base-white);
544
+ --af-color-surface-inverse-secondary--dark: var(--af-base-neutral-50);
545
+ --af-color-surface-inverse-tertiary--dark: var(--af-base-neutral-100);
546
+
547
+ --af-color-text--dark: var(--af-base-neutral-50);
548
+ --af-color-text-muted--dark: var(--af-base-neutral-300);
549
+ --af-color-text-inverse--dark: var(--af-base-neutral-900);
550
+
551
+ --af-color-border--dark: var(--af-base-neutral-600);
552
+ --af-color-border-strong--dark: var(--af-base-neutral-500);
553
+
554
+ --af-color-on-success--dark: var(--af-base-white);
555
+ --af-base-primary--dark: #2463eb;
556
+ }
557
+
558
+ /* Automatic dark mode — system preference, unless light is forced */
535
559
  @media (prefers-color-scheme: dark) {
536
- :root {
537
- /* --- Base surfaces --- */
538
- --af-color-background--dark: var(--af-color-background--hc-dark, var(--af-base-neutral-900));
539
- --af-color-surface-primary--dark: var(
540
- --af-color-surface-primary--hc-dark,
541
- var(--af-base-neutral-800)
542
- );
543
- --af-color-surface-secondary--dark: var(
544
- --af-color-surface-secondary--hc-dark,
545
- var(--af-base-neutral-700)
546
- );
547
- --af-color-surface-tertiary--dark: var(
548
- --af-color-surface-tertiary--hc-dark,
549
- var(--af-base-neutral-600)
560
+ :root:not([data-theme='light']) {
561
+ color-scheme: dark;
562
+
563
+ --af-base-primary: var(--af-base-primary--dark, var(--af-base-primary--light));
564
+ --af-base-secondary: var(--af-base-secondary--dark, var(--af-base-secondary--light));
565
+ --af-base-tertiary: var(--af-base-tertiary--dark, var(--af-base-tertiary--light));
566
+ --af-base-success: var(--af-base-success--dark, var(--af-base-success--light));
567
+ --af-base-warning: var(--af-base-warning--dark, var(--af-base-warning--light));
568
+ --af-base-danger: var(--af-base-danger--dark, var(--af-base-danger--light));
569
+ --af-base-info: var(--af-base-info--dark, var(--af-base-info--light));
570
+
571
+ --af-color-on-primary: var(--af-color-on-primary--dark, var(--af-color-on-primary--light));
572
+ --af-color-on-secondary: var(
573
+ --af-color-on-secondary--dark,
574
+ var(--af-color-on-secondary--light)
550
575
  );
576
+ --af-color-on-tertiary: var(--af-color-on-tertiary--dark, var(--af-color-on-tertiary--light));
577
+ --af-color-on-danger: var(--af-color-on-danger--dark, var(--af-color-on-danger--light));
578
+ --af-color-on-success: var(--af-color-on-success--dark, var(--af-color-on-success--light));
579
+ --af-color-on-warning: var(--af-color-on-warning--dark, var(--af-color-on-warning--light));
580
+ --af-color-on-info: var(--af-color-on-info--dark, var(--af-color-on-info--light));
551
581
 
552
- /* --- Inverse surfaces (light in dark mode) --- */
553
- --af-color-surface-inverse-primary--dark: var(
554
- --af-color-surface-inverse-primary--hc-dark,
555
- var(--af-base-white)
556
- );
557
- --af-color-surface-inverse-secondary--dark: var(
558
- --af-color-surface-inverse-secondary--hc-dark,
559
- var(--af-base-neutral-50)
560
- );
561
- --af-color-surface-inverse-tertiary--dark: var(
562
- --af-color-surface-inverse-tertiary--hc-dark,
563
- var(--af-base-neutral-100)
564
- );
582
+ --af-color-action: var(--af-color-action--dark, var(--af-color-primary));
583
+ --af-color-on-action: var(--af-color-on-action--dark, var(--af-color-on-primary));
565
584
 
566
- /* --- Text --- */
567
- --af-color-text--dark: var(--af-color-text--hc-dark, var(--af-base-neutral-50));
568
- --af-color-text-muted--dark: var(--af-color-text-muted--hc-dark, var(--af-base-neutral-300));
569
- --af-color-text-inverse--dark: var(
570
- --af-color-text-inverse--hc-dark,
571
- var(--af-base-neutral-900)
572
- );
585
+ --af-color-background: var(--af-color-background--dark);
586
+ --af-color-surface-primary: var(--af-color-surface-primary--dark);
587
+ --af-color-surface-secondary: var(--af-color-surface-secondary--dark);
588
+ --af-color-surface-tertiary: var(--af-color-surface-tertiary--dark);
573
589
 
574
- /* --- Borders --- */
575
- --af-color-border--dark: var(--af-color-border--hc-dark, var(--af-base-neutral-600));
576
- --af-color-border-strong--dark: var(
577
- --af-color-border-strong--hc-dark,
578
- var(--af-base-neutral-500)
579
- );
590
+ --af-color-surface-inverse-primary: var(--af-color-surface-inverse-primary--dark);
591
+ --af-color-surface-inverse-secondary: var(--af-color-surface-inverse-secondary--dark);
592
+ --af-color-surface-inverse-tertiary: var(--af-color-surface-inverse-tertiary--dark);
580
593
 
581
- /* --- Intents (override on-success for dark mode) --- */
582
- --af-color-on-success--dark: var(--af-color-on-success--hc-dark, var(--af-base-white));
594
+ --af-color-text: var(--af-color-text--dark);
595
+ --af-color-text-muted: var(--af-color-text-muted--dark);
596
+ --af-color-text-inverse: var(--af-color-text-inverse--dark);
583
597
 
584
- /* Primary: lighter blue for contrast on dark surfaces */
585
- --af-base-primary--dark: var(--af-base-primary--hc-dark, #2463eb);
598
+ --af-color-border: var(--af-color-border--dark);
599
+ --af-color-border-strong: var(--af-color-border-strong--dark);
586
600
 
587
- /* Hard emphasis lightens on dark surfaces (chips, badges, inline code) */
588
601
  --af-hard-toward: white;
589
-
590
- /* Button hover lightens on dark surfaces */
591
602
  --af-btn-hover-brightness: 1.12;
592
603
  --af-btn-active-brightness: 1.2;
593
604
  }
594
605
  }
595
606
 
596
- /* Manual dark mode override (works even when system preference is light) */
597
- /* Note: This block duplicates the @media block above for explicitness.
598
- * Both blocks need the same values because:
599
- * - @media (prefers-color-scheme: dark) only applies when system preference is dark
600
- * - [data-theme="dark"] and .dark allow manual override regardless of system preference
601
- * Keeping both explicit (rather than generating via build) aligns with Airframe's
602
- * principle: "organizes complexity, doesn't hide it" */
607
+ /* Manual dark override (works even when system preference is light).
608
+ * Duplicates the @media block because:
609
+ * - @media (prefers-color-scheme: dark) only applies when the OS is dark
610
+ * - [data-theme="dark"] and .dark allow a manual override regardless
611
+ * Keeping both explicit aligns with Airframe's principle: organize complexity, don't hide it. */
603
612
  [data-theme='dark'],
604
613
  .dark {
605
614
  color-scheme: dark;
606
615
 
607
- /* --- Base surfaces --- */
608
- --af-color-background--dark: var(--af-color-background--hc-dark, var(--af-base-neutral-900));
609
- --af-color-surface-primary--dark: var(
610
- --af-color-surface-primary--hc-dark,
611
- var(--af-base-neutral-800)
612
- );
613
- --af-color-surface-secondary--dark: var(
614
- --af-color-surface-secondary--hc-dark,
615
- var(--af-base-neutral-700)
616
- );
617
- --af-color-surface-tertiary--dark: var(
618
- --af-color-surface-tertiary--hc-dark,
619
- var(--af-base-neutral-600)
620
- );
616
+ --af-base-primary: var(--af-base-primary--dark, var(--af-base-primary--light));
617
+ --af-base-secondary: var(--af-base-secondary--dark, var(--af-base-secondary--light));
618
+ --af-base-tertiary: var(--af-base-tertiary--dark, var(--af-base-tertiary--light));
619
+ --af-base-success: var(--af-base-success--dark, var(--af-base-success--light));
620
+ --af-base-warning: var(--af-base-warning--dark, var(--af-base-warning--light));
621
+ --af-base-danger: var(--af-base-danger--dark, var(--af-base-danger--light));
622
+ --af-base-info: var(--af-base-info--dark, var(--af-base-info--light));
621
623
 
622
- /* --- Inverse surfaces (light in dark mode) --- */
623
- --af-color-surface-inverse-primary--dark: var(
624
- --af-color-surface-inverse-primary--hc-dark,
625
- var(--af-base-white)
626
- );
627
- --af-color-surface-inverse-secondary--dark: var(
628
- --af-color-surface-inverse-secondary--hc-dark,
629
- var(--af-base-neutral-50)
630
- );
631
- --af-color-surface-inverse-tertiary--dark: var(
632
- --af-color-surface-inverse-tertiary--hc-dark,
633
- var(--af-base-neutral-100)
624
+ --af-color-on-primary: var(--af-color-on-primary--dark, var(--af-color-on-primary--light));
625
+ --af-color-on-secondary: var(
626
+ --af-color-on-secondary--dark,
627
+ var(--af-color-on-secondary--light)
634
628
  );
629
+ --af-color-on-tertiary: var(--af-color-on-tertiary--dark, var(--af-color-on-tertiary--light));
630
+ --af-color-on-danger: var(--af-color-on-danger--dark, var(--af-color-on-danger--light));
631
+ --af-color-on-success: var(--af-color-on-success--dark, var(--af-color-on-success--light));
632
+ --af-color-on-warning: var(--af-color-on-warning--dark, var(--af-color-on-warning--light));
633
+ --af-color-on-info: var(--af-color-on-info--dark, var(--af-color-on-info--light));
635
634
 
636
- /* --- Text --- */
637
- --af-color-text--dark: var(--af-color-text--hc-dark, var(--af-base-neutral-50));
638
- --af-color-text-muted--dark: var(--af-color-text-muted--hc-dark, var(--af-base-neutral-300));
639
- --af-color-text-inverse--dark: var(
640
- --af-color-text-inverse--hc-dark,
641
- var(--af-base-neutral-900)
642
- );
635
+ --af-color-action: var(--af-color-action--dark, var(--af-color-primary));
636
+ --af-color-on-action: var(--af-color-on-action--dark, var(--af-color-on-primary));
643
637
 
644
- /* --- Borders --- */
645
- --af-color-border--dark: var(--af-color-border--hc-dark, var(--af-base-neutral-600));
646
- --af-color-border-strong--dark: var(
647
- --af-color-border-strong--hc-dark,
648
- var(--af-base-neutral-500)
649
- );
638
+ --af-color-background: var(--af-color-background--dark);
639
+ --af-color-surface-primary: var(--af-color-surface-primary--dark);
640
+ --af-color-surface-secondary: var(--af-color-surface-secondary--dark);
641
+ --af-color-surface-tertiary: var(--af-color-surface-tertiary--dark);
650
642
 
651
- /* --- Intents (override on-success for dark mode) --- */
652
- --af-color-on-success--dark: var(--af-color-on-success--hc-dark, var(--af-base-white));
643
+ --af-color-surface-inverse-primary: var(--af-color-surface-inverse-primary--dark);
644
+ --af-color-surface-inverse-secondary: var(--af-color-surface-inverse-secondary--dark);
645
+ --af-color-surface-inverse-tertiary: var(--af-color-surface-inverse-tertiary--dark);
653
646
 
654
- /* --- Action (optional: override CTA/brand color in dark mode; primary follows) --- */
655
- /* --af-color-action--dark: #yourcolor; --af-color-on-action--dark: #fff; */
647
+ --af-color-text: var(--af-color-text--dark);
648
+ --af-color-text-muted: var(--af-color-text-muted--dark);
649
+ --af-color-text-inverse: var(--af-color-text-inverse--dark);
656
650
 
657
- /* Primary: lighter blue for contrast on dark surfaces */
658
- --af-base-primary--dark: var(--af-base-primary--hc-dark, #2463eb);
651
+ --af-color-border: var(--af-color-border--dark);
652
+ --af-color-border-strong: var(--af-color-border-strong--dark);
659
653
 
660
- /* Hard emphasis lightens on dark surfaces (chips, badges, inline code) */
661
654
  --af-hard-toward: white;
662
-
663
- /* Button hover lightens on dark surfaces */
664
655
  --af-btn-hover-brightness: 1.12;
665
656
  --af-btn-active-brightness: 1.2;
666
-
667
- /* Derived interaction tokens (hover, active, soft, hard) are defined in base.css */
668
657
  }
669
658
 
670
- /* Forced light theme: darken on hover even if OS prefers dark */
659
+ /* Forced light: keep light resolved tokens even if OS prefers dark or .dark is present.
660
+ Must follow [data-theme=dark] / .dark so it wins when both are set. */
671
661
  [data-theme='light'] {
662
+ color-scheme: light;
663
+
664
+ --af-base-primary: var(--af-base-primary--light);
665
+ --af-base-secondary: var(--af-base-secondary--light);
666
+ --af-base-tertiary: var(--af-base-tertiary--light);
667
+ --af-base-success: var(--af-base-success--light);
668
+ --af-base-warning: var(--af-base-warning--light);
669
+ --af-base-danger: var(--af-base-danger--light);
670
+ --af-base-info: var(--af-base-info--light);
671
+
672
+ --af-color-on-primary: var(--af-color-on-primary--light);
673
+ --af-color-on-secondary: var(--af-color-on-secondary--light);
674
+ --af-color-on-tertiary: var(--af-color-on-tertiary--light);
675
+ --af-color-on-danger: var(--af-color-on-danger--light);
676
+ --af-color-on-success: var(--af-color-on-success--light);
677
+ --af-color-on-warning: var(--af-color-on-warning--light);
678
+ --af-color-on-info: var(--af-color-on-info--light);
679
+
680
+ --af-color-action: var(--af-color-action--light, var(--af-color-primary));
681
+ --af-color-on-action: var(--af-color-on-action--light, var(--af-color-on-primary));
682
+
683
+ --af-color-background: var(--af-color-background--light);
684
+ --af-color-surface-primary: var(--af-color-surface-primary--light);
685
+ --af-color-surface-secondary: var(--af-color-surface-secondary--light);
686
+ --af-color-surface-tertiary: var(--af-color-surface-tertiary--light);
687
+
688
+ --af-color-surface-inverse-primary: var(--af-color-surface-inverse-primary--light);
689
+ --af-color-surface-inverse-secondary: var(--af-color-surface-inverse-secondary--light);
690
+ --af-color-surface-inverse-tertiary: var(--af-color-surface-inverse-tertiary--light);
691
+
692
+ --af-color-text: var(--af-color-text--light);
693
+ --af-color-text-muted: var(--af-color-text-muted--light);
694
+ --af-color-text-inverse: var(--af-color-text-inverse--light);
695
+
696
+ --af-color-border: var(--af-color-border--light);
697
+ --af-color-border-strong: var(--af-color-border-strong--light);
698
+
672
699
  --af-hard-toward: black;
673
700
  --af-btn-hover-brightness: 0.9;
674
701
  --af-btn-active-brightness: 0.82;
@@ -680,84 +707,284 @@
680
707
  /* @airframeui high-contrast theme tokens - Semantic Tokens */
681
708
 
682
709
  @layer af.tokens {
683
- /* Automatic high contrast - respects system preference */
710
+ /* Stored HC values — always defined so brands can override them in :root / [data-brand]
711
+ without a media query. Applied only when prefers-contrast is active. */
712
+ :root {
713
+ --af-color-background--hc-light: var(--af-base-white);
714
+ --af-color-surface-primary--hc-light: var(--af-base-white);
715
+ --af-color-surface-secondary--hc-light: #f5f5f5;
716
+ --af-color-surface-tertiary--hc-light: #e6e6e6;
717
+
718
+ --af-color-surface-inverse-primary--hc-light: var(--af-base-black);
719
+ --af-color-surface-inverse-secondary--hc-light: #1a1a1a;
720
+ --af-color-surface-inverse-tertiary--hc-light: #333333;
721
+
722
+ --af-color-text--hc-light: var(--af-base-black);
723
+ --af-color-text-muted--hc-light: #333333;
724
+ --af-color-text-inverse--hc-light: var(--af-base-white);
725
+
726
+ --af-color-border--hc-light: var(--af-base-black);
727
+ --af-color-border-strong--hc-light: var(--af-base-black);
728
+
729
+ --af-color-on-secondary--hc-light: var(--af-base-black);
730
+ --af-color-on-warning--hc-light: var(--af-base-black);
731
+
732
+ --af-color-background--hc-dark: var(--af-base-black);
733
+ --af-color-surface-primary--hc-dark: #1a1a1a;
734
+ --af-color-surface-secondary--hc-dark: #2a2a2a;
735
+ --af-color-surface-tertiary--hc-dark: #333333;
736
+
737
+ --af-color-surface-inverse-primary--hc-dark: var(--af-base-white);
738
+ --af-color-surface-inverse-secondary--hc-dark: #f5f5f5;
739
+ --af-color-surface-inverse-tertiary--hc-dark: #e6e6e6;
740
+
741
+ --af-color-text--hc-dark: var(--af-base-white);
742
+ --af-color-text-muted--hc-dark: #cccccc;
743
+ --af-color-text-inverse--hc-dark: var(--af-base-black);
744
+
745
+ --af-color-border--hc-dark: var(--af-base-white);
746
+ --af-color-border-strong--hc-dark: var(--af-base-white);
747
+
748
+ --af-color-on-primary--hc-dark: var(--af-base-black);
749
+ --af-color-on-secondary--hc-dark: var(--af-base-black);
750
+ --af-color-on-danger--hc-dark: var(--af-base-black);
751
+ --af-color-on-success--hc-dark: var(--af-base-black);
752
+ --af-color-on-warning--hc-dark: var(--af-base-black);
753
+ --af-color-on-info--hc-dark: var(--af-base-black);
754
+ }
755
+
756
+ /* Automatic high contrast — light scheme (or forced light) */
684
757
  @media (prefers-contrast: more), (prefers-contrast: high) {
685
- :root {
686
- /* --- Primitives (optional override for HC mode) --- */
687
- /* Override these to use different base colors in high-contrast; semantic tokens (--af-color-primary, etc.) will pick them up. Defaults match base. */
688
- --af-base-primary: var(--af-base-primary--hc-light, var(--af-base-primary));
689
- --af-base-secondary: var(--af-base-secondary--hc-light, var(--af-base-secondary));
690
- --af-base-tertiary: var(--af-base-tertiary--hc-light, var(--af-base-tertiary));
691
- --af-base-success: var(--af-base-success--hc-light, var(--af-base-success));
692
- --af-base-warning: var(--af-base-warning--hc-light, var(--af-base-warning));
693
- --af-base-danger: var(--af-base-danger--hc-light, var(--af-base-danger));
694
- --af-base-info: var(--af-base-info--hc-light, var(--af-base-info));
695
-
696
- /* --- Base surfaces --- */
697
- --af-color-background--hc-light: var(--af-base-white);
698
- --af-color-surface-primary--hc-light: var(--af-base-white);
699
- --af-color-surface-secondary--hc-light: #f5f5f5;
700
- --af-color-surface-tertiary--hc-light: #e6e6e6;
701
-
702
- /* --- Inverse surfaces (dark in light mode) --- */
703
- --af-color-surface-inverse-primary--hc-light: var(--af-base-black);
704
- --af-color-surface-inverse-secondary--hc-light: #1a1a1a;
705
- --af-color-surface-inverse-tertiary--hc-light: #333333;
706
-
707
- /* --- Text --- */
708
- --af-color-text--hc-light: var(--af-base-black);
709
- --af-color-text-muted--hc-light: #333333;
710
- --af-color-text-inverse--hc-light: var(--af-base-white);
711
-
712
- /* --- Borders --- */
713
- --af-color-border--hc-light: var(--af-base-black);
714
- --af-color-border-strong--hc-light: var(--af-base-black);
715
-
716
- /* --- Intents (override on-intent colors for high contrast light mode) --- */
717
- --af-color-on-secondary--hc-light: var(--af-base-black);
718
- --af-color-on-warning--hc-light: var(--af-base-black);
758
+ :root:not([data-theme='dark']):not(.dark) {
759
+ --af-base-primary: var(--af-base-primary--hc-light, var(--af-base-primary--light));
760
+ --af-base-secondary: var(--af-base-secondary--hc-light, var(--af-base-secondary--light));
761
+ --af-base-tertiary: var(--af-base-tertiary--hc-light, var(--af-base-tertiary--light));
762
+ --af-base-success: var(--af-base-success--hc-light, var(--af-base-success--light));
763
+ --af-base-warning: var(--af-base-warning--hc-light, var(--af-base-warning--light));
764
+ --af-base-danger: var(--af-base-danger--hc-light, var(--af-base-danger--light));
765
+ --af-base-info: var(--af-base-info--hc-light, var(--af-base-info--light));
766
+
767
+ --af-color-on-primary: var(
768
+ --af-color-on-primary--hc-light,
769
+ var(--af-color-on-primary--light)
770
+ );
771
+ --af-color-on-secondary: var(
772
+ --af-color-on-secondary--hc-light,
773
+ var(--af-color-on-secondary--light)
774
+ );
775
+ --af-color-on-tertiary: var(
776
+ --af-color-on-tertiary--hc-light,
777
+ var(--af-color-on-tertiary--light)
778
+ );
779
+ --af-color-on-danger: var(--af-color-on-danger--hc-light, var(--af-color-on-danger--light));
780
+ --af-color-on-success: var(
781
+ --af-color-on-success--hc-light,
782
+ var(--af-color-on-success--light)
783
+ );
784
+ --af-color-on-warning: var(
785
+ --af-color-on-warning--hc-light,
786
+ var(--af-color-on-warning--light)
787
+ );
788
+ --af-color-on-info: var(--af-color-on-info--hc-light, var(--af-color-on-info--light));
789
+
790
+ --af-color-action: var(
791
+ --af-color-action--hc-light,
792
+ var(--af-color-action--light, var(--af-color-primary))
793
+ );
794
+ --af-color-on-action: var(
795
+ --af-color-on-action--hc-light,
796
+ var(--af-color-on-action--light, var(--af-color-on-primary))
797
+ );
798
+
799
+ --af-color-background: var(--af-color-background--hc-light);
800
+ --af-color-surface-primary: var(--af-color-surface-primary--hc-light);
801
+ --af-color-surface-secondary: var(--af-color-surface-secondary--hc-light);
802
+ --af-color-surface-tertiary: var(--af-color-surface-tertiary--hc-light);
803
+
804
+ --af-color-surface-inverse-primary: var(--af-color-surface-inverse-primary--hc-light);
805
+ --af-color-surface-inverse-secondary: var(--af-color-surface-inverse-secondary--hc-light);
806
+ --af-color-surface-inverse-tertiary: var(--af-color-surface-inverse-tertiary--hc-light);
807
+
808
+ --af-color-text: var(--af-color-text--hc-light);
809
+ --af-color-text-muted: var(--af-color-text-muted--hc-light);
810
+ --af-color-text-inverse: var(--af-color-text-inverse--hc-light);
811
+
812
+ --af-color-border: var(--af-color-border--hc-light);
813
+ --af-color-border-strong: var(--af-color-border-strong--hc-light);
814
+ }
815
+
816
+ [data-theme='dark'],
817
+ .dark {
818
+ --af-base-primary: var(
819
+ --af-base-primary--hc-dark,
820
+ var(--af-base-primary--dark, var(--af-base-primary--light))
821
+ );
822
+ --af-base-secondary: var(
823
+ --af-base-secondary--hc-dark,
824
+ var(--af-base-secondary--dark, var(--af-base-secondary--light))
825
+ );
826
+ --af-base-tertiary: var(
827
+ --af-base-tertiary--hc-dark,
828
+ var(--af-base-tertiary--dark, var(--af-base-tertiary--light))
829
+ );
830
+ --af-base-success: var(
831
+ --af-base-success--hc-dark,
832
+ var(--af-base-success--dark, var(--af-base-success--light))
833
+ );
834
+ --af-base-warning: var(
835
+ --af-base-warning--hc-dark,
836
+ var(--af-base-warning--dark, var(--af-base-warning--light))
837
+ );
838
+ --af-base-danger: var(
839
+ --af-base-danger--hc-dark,
840
+ var(--af-base-danger--dark, var(--af-base-danger--light))
841
+ );
842
+ --af-base-info: var(
843
+ --af-base-info--hc-dark,
844
+ var(--af-base-info--dark, var(--af-base-info--light))
845
+ );
846
+
847
+ --af-color-on-primary: var(
848
+ --af-color-on-primary--hc-dark,
849
+ var(--af-color-on-primary--dark, var(--af-color-on-primary--light))
850
+ );
851
+ --af-color-on-secondary: var(
852
+ --af-color-on-secondary--hc-dark,
853
+ var(--af-color-on-secondary--dark, var(--af-color-on-secondary--light))
854
+ );
855
+ --af-color-on-tertiary: var(
856
+ --af-color-on-tertiary--hc-dark,
857
+ var(--af-color-on-tertiary--dark, var(--af-color-on-tertiary--light))
858
+ );
859
+ --af-color-on-danger: var(
860
+ --af-color-on-danger--hc-dark,
861
+ var(--af-color-on-danger--dark, var(--af-color-on-danger--light))
862
+ );
863
+ --af-color-on-success: var(
864
+ --af-color-on-success--hc-dark,
865
+ var(--af-color-on-success--dark, var(--af-color-on-success--light))
866
+ );
867
+ --af-color-on-warning: var(
868
+ --af-color-on-warning--hc-dark,
869
+ var(--af-color-on-warning--dark, var(--af-color-on-warning--light))
870
+ );
871
+ --af-color-on-info: var(
872
+ --af-color-on-info--hc-dark,
873
+ var(--af-color-on-info--dark, var(--af-color-on-info--light))
874
+ );
875
+
876
+ --af-color-action: var(
877
+ --af-color-action--hc-dark,
878
+ var(--af-color-action--dark, var(--af-color-primary))
879
+ );
880
+ --af-color-on-action: var(
881
+ --af-color-on-action--hc-dark,
882
+ var(--af-color-on-action--dark, var(--af-color-on-primary))
883
+ );
884
+
885
+ --af-color-background: var(--af-color-background--hc-dark);
886
+ --af-color-surface-primary: var(--af-color-surface-primary--hc-dark);
887
+ --af-color-surface-secondary: var(--af-color-surface-secondary--hc-dark);
888
+ --af-color-surface-tertiary: var(--af-color-surface-tertiary--hc-dark);
889
+
890
+ --af-color-surface-inverse-primary: var(--af-color-surface-inverse-primary--hc-dark);
891
+ --af-color-surface-inverse-secondary: var(--af-color-surface-inverse-secondary--hc-dark);
892
+ --af-color-surface-inverse-tertiary: var(--af-color-surface-inverse-tertiary--hc-dark);
893
+
894
+ --af-color-text: var(--af-color-text--hc-dark);
895
+ --af-color-text-muted: var(--af-color-text-muted--hc-dark);
896
+ --af-color-text-inverse: var(--af-color-text-inverse--hc-dark);
897
+
898
+ --af-color-border: var(--af-color-border--hc-dark);
899
+ --af-color-border-strong: var(--af-color-border-strong--hc-dark);
719
900
  }
720
901
  }
721
902
 
722
903
  @media (prefers-contrast: more) and (prefers-color-scheme: dark),
723
904
  (prefers-contrast: high) and (prefers-color-scheme: dark) {
724
- :root {
725
- /* --- Primitives (optional override for HC dark mode) --- */
726
- --af-base-primary: var(--af-base-primary--hc-dark, var(--af-base-primary));
727
- --af-base-secondary: var(--af-base-secondary--hc-dark, var(--af-base-secondary));
728
- --af-base-tertiary: var(--af-base-tertiary--hc-dark, var(--af-base-tertiary));
729
- --af-base-success: var(--af-base-success--hc-dark, var(--af-base-success));
730
- --af-base-warning: var(--af-base-warning--hc-dark, var(--af-base-warning));
731
- --af-base-danger: var(--af-base-danger--hc-dark, var(--af-base-danger));
732
- --af-base-info: var(--af-base-info--hc-dark, var(--af-base-info));
733
-
734
- /* --- Base surfaces --- */
735
- --af-color-background--hc-dark: var(--af-base-black);
736
- --af-color-surface-primary--hc-dark: #1a1a1a;
737
- --af-color-surface-secondary--hc-dark: #2a2a2a;
738
- --af-color-surface-tertiary--hc-dark: #333333;
739
-
740
- /* --- Inverse surfaces (light in dark mode) --- */
741
- --af-color-surface-inverse-primary--hc-dark: var(--af-base-white);
742
- --af-color-surface-inverse-secondary--hc-dark: #f5f5f5;
743
- --af-color-surface-inverse-tertiary--hc-dark: #e6e6e6;
744
-
745
- /* --- Text --- */
746
- --af-color-text--hc-dark: var(--af-base-white);
747
- --af-color-text-muted--hc-dark: #cccccc;
748
- --af-color-text-inverse--hc-dark: var(--af-base-black);
749
-
750
- /* --- Borders --- */
751
- --af-color-border--hc-dark: var(--af-base-white);
752
- --af-color-border-strong--hc-dark: var(--af-base-white);
753
-
754
- /* --- Intents (override on-intent colors for high contrast dark mode) --- */
755
- --af-color-on-primary--hc-dark: var(--af-base-black);
756
- --af-color-on-secondary--hc-dark: var(--af-base-black);
757
- --af-color-on-danger--hc-dark: var(--af-base-black);
758
- --af-color-on-success--hc-dark: var(--af-base-black);
759
- --af-color-on-warning--hc-dark: var(--af-base-black);
760
- --af-color-on-info--hc-dark: var(--af-base-black);
905
+ :root:not([data-theme='light']) {
906
+ --af-base-primary: var(
907
+ --af-base-primary--hc-dark,
908
+ var(--af-base-primary--dark, var(--af-base-primary--light))
909
+ );
910
+ --af-base-secondary: var(
911
+ --af-base-secondary--hc-dark,
912
+ var(--af-base-secondary--dark, var(--af-base-secondary--light))
913
+ );
914
+ --af-base-tertiary: var(
915
+ --af-base-tertiary--hc-dark,
916
+ var(--af-base-tertiary--dark, var(--af-base-tertiary--light))
917
+ );
918
+ --af-base-success: var(
919
+ --af-base-success--hc-dark,
920
+ var(--af-base-success--dark, var(--af-base-success--light))
921
+ );
922
+ --af-base-warning: var(
923
+ --af-base-warning--hc-dark,
924
+ var(--af-base-warning--dark, var(--af-base-warning--light))
925
+ );
926
+ --af-base-danger: var(
927
+ --af-base-danger--hc-dark,
928
+ var(--af-base-danger--dark, var(--af-base-danger--light))
929
+ );
930
+ --af-base-info: var(
931
+ --af-base-info--hc-dark,
932
+ var(--af-base-info--dark, var(--af-base-info--light))
933
+ );
934
+
935
+ --af-color-on-primary: var(
936
+ --af-color-on-primary--hc-dark,
937
+ var(--af-color-on-primary--dark, var(--af-color-on-primary--light))
938
+ );
939
+ --af-color-on-secondary: var(
940
+ --af-color-on-secondary--hc-dark,
941
+ var(--af-color-on-secondary--dark, var(--af-color-on-secondary--light))
942
+ );
943
+ --af-color-on-tertiary: var(
944
+ --af-color-on-tertiary--hc-dark,
945
+ var(--af-color-on-tertiary--dark, var(--af-color-on-tertiary--light))
946
+ );
947
+ --af-color-on-danger: var(
948
+ --af-color-on-danger--hc-dark,
949
+ var(--af-color-on-danger--dark, var(--af-color-on-danger--light))
950
+ );
951
+ --af-color-on-success: var(
952
+ --af-color-on-success--hc-dark,
953
+ var(--af-color-on-success--dark, var(--af-color-on-success--light))
954
+ );
955
+ --af-color-on-warning: var(
956
+ --af-color-on-warning--hc-dark,
957
+ var(--af-color-on-warning--dark, var(--af-color-on-warning--light))
958
+ );
959
+ --af-color-on-info: var(
960
+ --af-color-on-info--hc-dark,
961
+ var(--af-color-on-info--dark, var(--af-color-on-info--light))
962
+ );
963
+
964
+ --af-color-action: var(
965
+ --af-color-action--hc-dark,
966
+ var(--af-color-action--dark, var(--af-color-primary))
967
+ );
968
+ --af-color-on-action: var(
969
+ --af-color-on-action--hc-dark,
970
+ var(--af-color-on-action--dark, var(--af-color-on-primary))
971
+ );
972
+
973
+ --af-color-background: var(--af-color-background--hc-dark);
974
+ --af-color-surface-primary: var(--af-color-surface-primary--hc-dark);
975
+ --af-color-surface-secondary: var(--af-color-surface-secondary--hc-dark);
976
+ --af-color-surface-tertiary: var(--af-color-surface-tertiary--hc-dark);
977
+
978
+ --af-color-surface-inverse-primary: var(--af-color-surface-inverse-primary--hc-dark);
979
+ --af-color-surface-inverse-secondary: var(--af-color-surface-inverse-secondary--hc-dark);
980
+ --af-color-surface-inverse-tertiary: var(--af-color-surface-inverse-tertiary--hc-dark);
981
+
982
+ --af-color-text: var(--af-color-text--hc-dark);
983
+ --af-color-text-muted: var(--af-color-text-muted--hc-dark);
984
+ --af-color-text-inverse: var(--af-color-text-inverse--hc-dark);
985
+
986
+ --af-color-border: var(--af-color-border--hc-dark);
987
+ --af-color-border-strong: var(--af-color-border-strong--hc-dark);
761
988
  }
762
989
  }
763
990
  }