@cdx-ui/styles 0.0.1-beta.9 → 0.0.1-beta.90

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 (71) hide show
  1. package/README.md +116 -20
  2. package/css/theme.css +201 -85
  3. package/css/vanilla.css +124 -54
  4. package/lib/commonjs/applyThemeOverride.js +154 -0
  5. package/lib/commonjs/applyThemeOverride.js.map +1 -0
  6. package/lib/commonjs/index.js +82 -0
  7. package/lib/commonjs/index.js.map +1 -1
  8. package/lib/commonjs/palette.js +262 -0
  9. package/lib/commonjs/palette.js.map +1 -0
  10. package/lib/commonjs/theming.js +255 -0
  11. package/lib/commonjs/theming.js.map +1 -0
  12. package/lib/commonjs/types.js +75 -0
  13. package/lib/commonjs/types.js.map +1 -0
  14. package/lib/commonjs/useCdxFonts.js +4 -231
  15. package/lib/commonjs/useCdxFonts.js.map +1 -1
  16. package/lib/commonjs/useForgeFonts.js +237 -0
  17. package/lib/commonjs/useForgeFonts.js.map +1 -0
  18. package/lib/module/applyThemeOverride.js +149 -0
  19. package/lib/module/applyThemeOverride.js.map +1 -0
  20. package/lib/module/index.js +11 -20
  21. package/lib/module/index.js.map +1 -1
  22. package/lib/module/palette.js +257 -0
  23. package/lib/module/palette.js.map +1 -0
  24. package/lib/module/theming.js +239 -0
  25. package/lib/module/theming.js.map +1 -0
  26. package/lib/module/types.js +71 -0
  27. package/lib/module/types.js.map +1 -0
  28. package/lib/module/useCdxFonts.js +3 -219
  29. package/lib/module/useCdxFonts.js.map +1 -1
  30. package/lib/module/useForgeFonts.js +223 -0
  31. package/lib/module/useForgeFonts.js.map +1 -0
  32. package/lib/runtime/prestige-vs-default.json +1 -0
  33. package/lib/runtime/pulse-vs-default.json +1 -0
  34. package/lib/runtime/token-to-css-var.json +672 -0
  35. package/lib/typescript/applyThemeOverride.d.ts +26 -0
  36. package/lib/typescript/applyThemeOverride.d.ts.map +1 -0
  37. package/lib/typescript/index.d.ts +8 -57
  38. package/lib/typescript/index.d.ts.map +1 -1
  39. package/lib/typescript/palette.d.ts +60 -0
  40. package/lib/typescript/palette.d.ts.map +1 -0
  41. package/lib/typescript/theming.d.ts +40 -0
  42. package/lib/typescript/theming.d.ts.map +1 -0
  43. package/lib/typescript/types.d.ts +90 -0
  44. package/lib/typescript/types.d.ts.map +1 -0
  45. package/lib/typescript/useCdxFonts.d.ts +3 -11
  46. package/lib/typescript/useCdxFonts.d.ts.map +1 -1
  47. package/lib/typescript/useForgeFonts.d.ts +12 -0
  48. package/lib/typescript/useForgeFonts.d.ts.map +1 -0
  49. package/package.json +27 -8
  50. package/runtime/prestige-vs-default.json +1 -0
  51. package/runtime/pulse-vs-default.json +1 -0
  52. package/runtime/token-to-css-var.json +672 -0
  53. package/src/__tests__/applyThemeOverride.test.ts +552 -0
  54. package/src/__tests__/generateColorScale.test.ts +296 -0
  55. package/src/__tests__/presetJson.test.ts +120 -0
  56. package/src/__tests__/sd.config.test.ts +856 -0
  57. package/src/__tests__/theming.test.ts +647 -0
  58. package/src/__tests__/types.test.ts +72 -0
  59. package/src/__tests__/useCdxFonts.test.ts +27 -0
  60. package/src/__tests__/useForgeFonts.test.ts +226 -0
  61. package/src/applyThemeOverride.ts +139 -0
  62. package/src/index.ts +36 -60
  63. package/src/palette.ts +307 -0
  64. package/src/theming.ts +268 -0
  65. package/src/types.ts +112 -0
  66. package/src/useCdxFonts.ts +3 -229
  67. package/src/useForgeFonts.ts +230 -0
  68. package/tokens/presets/.manifest.json +3 -3
  69. package/tokens/presets/poise.json +319 -39
  70. package/tokens/presets/prestige.json +1 -1
  71. package/tokens/presets/pulse.json +1 -1
package/css/theme.css CHANGED
@@ -343,6 +343,13 @@
343
343
  --container-sm: 24rem;
344
344
  --container-xl: 36rem;
345
345
  --container-xs: 20rem;
346
+ --border-width-default: 0.0625rem;
347
+ --border-width-focused: 0.125rem;
348
+ --border-width-selected: 0.125rem;
349
+ --border-radius-button: var(--radius-lg);
350
+ --border-radius-default: var(--radius-lg);
351
+ --border-radius-none: var(--radius-none);
352
+ --border-radius-round: var(--radius-full);
346
353
  --color-chart-categorical-1: var(--color-blue-600);
347
354
  --color-chart-categorical-2: var(--color-orange-600);
348
355
  --color-chart-categorical-3: var(--color-teal-600);
@@ -353,77 +360,109 @@
353
360
  --color-chart-simple-secondary: var(--color-brand-950);
354
361
  --color-content-action: var(--color-brand-700);
355
362
  --color-content-action-on-strong: var(--color-white);
356
- --color-content-action-on-subtle: var(--color-brand-950);
363
+ --color-content-action-on-subtle: var(--color-brand-900);
357
364
  --color-content-brand: var(--color-brand-700);
358
365
  --color-content-danger: var(--color-red-700);
359
366
  --color-content-danger-on-strong: var(--color-white);
360
367
  --color-content-danger-on-subtle: var(--color-red-900);
361
- --color-content-info: var(--color-sky-500);
368
+ --color-content-info: var(--color-sky-700);
362
369
  --color-content-info-on-strong: var(--color-white);
363
370
  --color-content-info-on-subtle: var(--color-sky-900);
364
371
  --color-content-link: var(--color-blue-600);
365
372
  --color-content-link-visited: var(--color-purple-800);
373
+ --color-content-neutral-on-strong: var(--color-white);
374
+ --color-content-neutral-on-subtle: var(--color-base-900);
366
375
  --color-content-primary: var(--color-base-950);
367
376
  --color-content-secondary: var(--color-base-800);
368
- --color-content-selected: var(--color-brand-700);
369
- --color-content-success: var(--color-green-600);
377
+ --color-content-selected: var(--color-brand-600);
378
+ --color-content-success: var(--color-green-700);
370
379
  --color-content-success-on-strong: var(--color-white);
371
380
  --color-content-success-on-subtle: var(--color-green-900);
372
381
  --color-content-tertiary: var(--color-base-600);
373
- --color-content-warning: var(--color-amber-600);
382
+ --color-content-warning: var(--color-amber-700);
374
383
  --color-content-warning-on-strong: var(--color-black);
375
384
  --color-content-warning-on-subtle: var(--color-amber-900);
376
385
  --color-stroke-action: var(--color-brand-700);
377
386
  --color-stroke-danger: var(--color-red-700);
378
387
  --color-stroke-focus: var(--color-brand-700);
379
388
  --color-stroke-hover: var(--color-base-950);
380
- --color-stroke-info: var(--color-sky-500);
389
+ --color-stroke-info: var(--color-sky-700);
381
390
  --color-stroke-primary: var(--color-base-500);
382
391
  --color-stroke-ring: var(--color-base-950);
383
392
  --color-stroke-secondary: var(--color-base-100);
384
- --color-stroke-success: var(--color-green-500);
385
- --color-stroke-warning: var(--color-amber-600);
393
+ --color-stroke-success: var(--color-green-700);
394
+ --color-stroke-warning: var(--color-amber-700);
386
395
  --color-surface-accent-core: var(--color-accent-input);
387
396
  --color-surface-accent-strong: var(--color-accent-700);
397
+ --color-surface-accent-subtle: var(--color-accent-200);
398
+ --color-surface-accent-tint: var(--color-accent-100);
388
399
  --color-surface-action-strong: var(--color-brand-700);
389
- --color-surface-action-strong-active: var(--color-brand-800);
400
+ --color-surface-action-strong-active: var(--color-brand-900);
390
401
  --color-surface-action-strong-hover: var(--color-brand-800);
391
- --color-surface-action-subtle: var(--color-brand-300);
392
- --color-surface-action-subtle-active: var(--color-brand-400);
393
- --color-surface-action-subtle-hover: var(--color-brand-400);
394
- --color-surface-action-tint: var(--color-brand-100);
402
+ --color-surface-action-subtle: var(--color-brand-100);
403
+ --color-surface-action-subtle-active: var(--color-brand-300);
404
+ --color-surface-action-subtle-hover: var(--color-brand-200);
405
+ --color-surface-action-tint: var(--color-brand-50);
395
406
  --color-surface-action-tint-active: var(--color-brand-200);
396
- --color-surface-action-tint-hover: var(--color-brand-200);
397
- --color-surface-background: var(--color-base-100);
407
+ --color-surface-action-tint-hover: var(--color-brand-100);
408
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
409
+ --color-surface-background: var(--color-base-50);
398
410
  --color-surface-brand-core: var(--color-brand-input);
399
411
  --color-surface-brand-strong: var(--color-brand-700);
412
+ --color-surface-brand-subtle: var(--color-brand-200);
413
+ --color-surface-brand-tint: var(--color-brand-100);
400
414
  --color-surface-danger-strong: var(--color-red-700);
401
- --color-surface-danger-strong-active: var(--color-red-800);
415
+ --color-surface-danger-strong-active: var(--color-red-900);
402
416
  --color-surface-danger-strong-hover: var(--color-red-800);
403
- --color-surface-danger-subtle: var(--color-red-200);
417
+ --color-surface-danger-subtle: var(--color-red-100);
404
418
  --color-surface-danger-subtle-active: var(--color-red-300);
405
- --color-surface-danger-subtle-hover: var(--color-red-300);
406
- --color-surface-danger-tint: var(--color-red-100);
419
+ --color-surface-danger-subtle-hover: var(--color-red-200);
420
+ --color-surface-danger-tint: var(--color-red-50);
407
421
  --color-surface-danger-tint-active: var(--color-red-200);
408
- --color-surface-danger-tint-hover: var(--color-red-200);
409
- --color-surface-info-strong: var(--color-sky-500);
410
- --color-surface-info-subtle: var(--color-sky-200);
411
- --color-surface-info-tint: var(--color-sky-100);
412
- --color-surface-neutral-subtle: var(--color-base-200);
413
- --color-surface-neutral-tint: var(--color-base-100);
422
+ --color-surface-danger-tint-hover: var(--color-red-100);
423
+ --color-surface-info-strong: var(--color-sky-700);
424
+ --color-surface-info-strong-active: var(--color-sky-900);
425
+ --color-surface-info-strong-hover: var(--color-sky-800);
426
+ --color-surface-info-subtle: var(--color-sky-100);
427
+ --color-surface-info-subtle-active: var(--color-sky-300);
428
+ --color-surface-info-subtle-hover: var(--color-sky-200);
429
+ --color-surface-info-tint: var(--color-sky-50);
430
+ --color-surface-info-tint-active: var(--color-sky-200);
431
+ --color-surface-info-tint-hover: var(--color-sky-100);
432
+ --color-surface-neutral-strong: var(--color-base-700);
433
+ --color-surface-neutral-strong-active: var(--color-base-900);
434
+ --color-surface-neutral-strong-hover: var(--color-base-800);
435
+ --color-surface-neutral-subtle: var(--color-base-100);
436
+ --color-surface-neutral-subtle-active: var(--color-base-300);
437
+ --color-surface-neutral-subtle-hover: var(--color-base-200);
438
+ --color-surface-neutral-tint: var(--color-base-50);
439
+ --color-surface-neutral-tint-active: var(--color-base-200);
440
+ --color-surface-neutral-tint-hover: var(--color-base-100);
414
441
  --color-surface-primary: var(--color-white);
415
- --color-surface-primary-active: var(--color-base-100);
442
+ --color-surface-primary-active: var(--color-base-200);
416
443
  --color-surface-primary-hover: var(--color-base-100);
417
444
  --color-surface-secondary: var(--color-base-100);
418
- --color-surface-secondary-active: var(--color-base-200);
445
+ --color-surface-secondary-active: var(--color-base-300);
419
446
  --color-surface-secondary-hover: var(--color-base-200);
420
447
  --color-surface-success-strong: var(--color-green-600);
421
- --color-surface-success-subtle: var(--color-green-200);
422
- --color-surface-success-tint: var(--color-green-100);
448
+ --color-surface-success-strong-active: var(--color-green-800);
449
+ --color-surface-success-strong-hover: var(--color-green-700);
450
+ --color-surface-success-subtle: var(--color-green-100);
451
+ --color-surface-success-subtle-active: var(--color-green-300);
452
+ --color-surface-success-subtle-hover: var(--color-green-200);
453
+ --color-surface-success-tint: var(--color-green-50);
454
+ --color-surface-success-tint-active: var(--color-green-200);
455
+ --color-surface-success-tint-hover: var(--color-green-100);
423
456
  --color-surface-tertiary: var(--color-brand-100);
424
457
  --color-surface-warning-strong: var(--color-amber-400);
425
- --color-surface-warning-subtle: var(--color-amber-200);
426
- --color-surface-warning-tint: var(--color-amber-100);
458
+ --color-surface-warning-strong-active: var(--color-amber-600);
459
+ --color-surface-warning-strong-hover: var(--color-amber-500);
460
+ --color-surface-warning-subtle: var(--color-amber-100);
461
+ --color-surface-warning-subtle-active: var(--color-amber-300);
462
+ --color-surface-warning-subtle-hover: var(--color-amber-200);
463
+ --color-surface-warning-tint: var(--color-amber-50);
464
+ --color-surface-warning-tint-active: var(--color-amber-200);
465
+ --color-surface-warning-tint-hover: var(--color-amber-100);
427
466
  --font-body: var(--font-sans);
428
467
  --font-body-bold: var(--font-sans-bold);
429
468
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -440,6 +479,13 @@
440
479
  --font-display-medium-italic: 'Crimson Pro Medium Italic';
441
480
  --font-display-semibold: 'Crimson Pro SemiBold';
442
481
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
482
+ --opacity-disabled: 0.5;
483
+ --opacity-focus: 0.12;
484
+ --opacity-hover: 0.08;
485
+ --opacity-hover-overlay: 0.2;
486
+ --opacity-selected: 0.12;
487
+ --opacity-selected-focus: 0.24;
488
+ --opacity-selected-hover: 0.2;
443
489
  }
444
490
 
445
491
  @layer theme {
@@ -462,77 +508,109 @@
462
508
  --color-chart-simple-secondary: var(--color-brand-950);
463
509
  --color-content-action: var(--color-brand-700);
464
510
  --color-content-action-on-strong: var(--color-white);
465
- --color-content-action-on-subtle: var(--color-brand-950);
511
+ --color-content-action-on-subtle: var(--color-brand-900);
466
512
  --color-content-brand: var(--color-brand-700);
467
513
  --color-content-danger: var(--color-red-700);
468
514
  --color-content-danger-on-strong: var(--color-white);
469
515
  --color-content-danger-on-subtle: var(--color-red-900);
470
- --color-content-info: var(--color-sky-500);
516
+ --color-content-info: var(--color-sky-700);
471
517
  --color-content-info-on-strong: var(--color-white);
472
518
  --color-content-info-on-subtle: var(--color-sky-900);
473
519
  --color-content-link: var(--color-blue-600);
474
520
  --color-content-link-visited: var(--color-purple-800);
521
+ --color-content-neutral-on-strong: var(--color-white);
522
+ --color-content-neutral-on-subtle: var(--color-base-900);
475
523
  --color-content-primary: var(--color-base-950);
476
524
  --color-content-secondary: var(--color-base-800);
477
- --color-content-selected: var(--color-brand-700);
478
- --color-content-success: var(--color-green-600);
525
+ --color-content-selected: var(--color-brand-600);
526
+ --color-content-success: var(--color-green-700);
479
527
  --color-content-success-on-strong: var(--color-white);
480
528
  --color-content-success-on-subtle: var(--color-green-900);
481
529
  --color-content-tertiary: var(--color-base-600);
482
- --color-content-warning: var(--color-amber-600);
530
+ --color-content-warning: var(--color-amber-700);
483
531
  --color-content-warning-on-strong: var(--color-black);
484
532
  --color-content-warning-on-subtle: var(--color-amber-900);
485
533
  --color-stroke-action: var(--color-brand-700);
486
534
  --color-stroke-danger: var(--color-red-700);
487
535
  --color-stroke-focus: var(--color-brand-700);
488
536
  --color-stroke-hover: var(--color-base-950);
489
- --color-stroke-info: var(--color-sky-500);
537
+ --color-stroke-info: var(--color-sky-700);
490
538
  --color-stroke-primary: var(--color-base-500);
491
539
  --color-stroke-ring: var(--color-base-950);
492
540
  --color-stroke-secondary: var(--color-base-100);
493
- --color-stroke-success: var(--color-green-500);
494
- --color-stroke-warning: var(--color-amber-600);
541
+ --color-stroke-success: var(--color-green-700);
542
+ --color-stroke-warning: var(--color-amber-700);
495
543
  --color-surface-accent-core: var(--color-accent-input);
496
544
  --color-surface-accent-strong: var(--color-accent-700);
545
+ --color-surface-accent-subtle: var(--color-accent-200);
546
+ --color-surface-accent-tint: var(--color-accent-100);
497
547
  --color-surface-action-strong: var(--color-brand-700);
498
- --color-surface-action-strong-active: var(--color-brand-800);
548
+ --color-surface-action-strong-active: var(--color-brand-900);
499
549
  --color-surface-action-strong-hover: var(--color-brand-800);
500
- --color-surface-action-subtle: var(--color-brand-300);
501
- --color-surface-action-subtle-active: var(--color-brand-400);
502
- --color-surface-action-subtle-hover: var(--color-brand-400);
503
- --color-surface-action-tint: var(--color-brand-100);
550
+ --color-surface-action-subtle: var(--color-brand-100);
551
+ --color-surface-action-subtle-active: var(--color-brand-300);
552
+ --color-surface-action-subtle-hover: var(--color-brand-200);
553
+ --color-surface-action-tint: var(--color-brand-50);
504
554
  --color-surface-action-tint-active: var(--color-brand-200);
505
- --color-surface-action-tint-hover: var(--color-brand-200);
506
- --color-surface-background: var(--color-base-100);
555
+ --color-surface-action-tint-hover: var(--color-brand-100);
556
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
557
+ --color-surface-background: var(--color-base-50);
507
558
  --color-surface-brand-core: var(--color-brand-input);
508
559
  --color-surface-brand-strong: var(--color-brand-700);
560
+ --color-surface-brand-subtle: var(--color-brand-200);
561
+ --color-surface-brand-tint: var(--color-brand-100);
509
562
  --color-surface-danger-strong: var(--color-red-700);
510
- --color-surface-danger-strong-active: var(--color-red-800);
563
+ --color-surface-danger-strong-active: var(--color-red-900);
511
564
  --color-surface-danger-strong-hover: var(--color-red-800);
512
- --color-surface-danger-subtle: var(--color-red-200);
565
+ --color-surface-danger-subtle: var(--color-red-100);
513
566
  --color-surface-danger-subtle-active: var(--color-red-300);
514
- --color-surface-danger-subtle-hover: var(--color-red-300);
515
- --color-surface-danger-tint: var(--color-red-100);
567
+ --color-surface-danger-subtle-hover: var(--color-red-200);
568
+ --color-surface-danger-tint: var(--color-red-50);
516
569
  --color-surface-danger-tint-active: var(--color-red-200);
517
- --color-surface-danger-tint-hover: var(--color-red-200);
518
- --color-surface-info-strong: var(--color-sky-500);
519
- --color-surface-info-subtle: var(--color-sky-200);
520
- --color-surface-info-tint: var(--color-sky-100);
521
- --color-surface-neutral-subtle: var(--color-base-200);
522
- --color-surface-neutral-tint: var(--color-base-100);
570
+ --color-surface-danger-tint-hover: var(--color-red-100);
571
+ --color-surface-info-strong: var(--color-sky-700);
572
+ --color-surface-info-strong-active: var(--color-sky-900);
573
+ --color-surface-info-strong-hover: var(--color-sky-800);
574
+ --color-surface-info-subtle: var(--color-sky-100);
575
+ --color-surface-info-subtle-active: var(--color-sky-300);
576
+ --color-surface-info-subtle-hover: var(--color-sky-200);
577
+ --color-surface-info-tint: var(--color-sky-50);
578
+ --color-surface-info-tint-active: var(--color-sky-200);
579
+ --color-surface-info-tint-hover: var(--color-sky-100);
580
+ --color-surface-neutral-strong: var(--color-base-700);
581
+ --color-surface-neutral-strong-active: var(--color-base-900);
582
+ --color-surface-neutral-strong-hover: var(--color-base-800);
583
+ --color-surface-neutral-subtle: var(--color-base-100);
584
+ --color-surface-neutral-subtle-active: var(--color-base-300);
585
+ --color-surface-neutral-subtle-hover: var(--color-base-200);
586
+ --color-surface-neutral-tint: var(--color-base-50);
587
+ --color-surface-neutral-tint-active: var(--color-base-200);
588
+ --color-surface-neutral-tint-hover: var(--color-base-100);
523
589
  --color-surface-primary: var(--color-white);
524
- --color-surface-primary-active: var(--color-base-100);
590
+ --color-surface-primary-active: var(--color-base-200);
525
591
  --color-surface-primary-hover: var(--color-base-100);
526
592
  --color-surface-secondary: var(--color-base-100);
527
- --color-surface-secondary-active: var(--color-base-200);
593
+ --color-surface-secondary-active: var(--color-base-300);
528
594
  --color-surface-secondary-hover: var(--color-base-200);
529
595
  --color-surface-success-strong: var(--color-green-600);
530
- --color-surface-success-subtle: var(--color-green-200);
531
- --color-surface-success-tint: var(--color-green-100);
596
+ --color-surface-success-strong-active: var(--color-green-800);
597
+ --color-surface-success-strong-hover: var(--color-green-700);
598
+ --color-surface-success-subtle: var(--color-green-100);
599
+ --color-surface-success-subtle-active: var(--color-green-300);
600
+ --color-surface-success-subtle-hover: var(--color-green-200);
601
+ --color-surface-success-tint: var(--color-green-50);
602
+ --color-surface-success-tint-active: var(--color-green-200);
603
+ --color-surface-success-tint-hover: var(--color-green-100);
532
604
  --color-surface-tertiary: var(--color-brand-100);
533
605
  --color-surface-warning-strong: var(--color-amber-400);
534
- --color-surface-warning-subtle: var(--color-amber-200);
535
- --color-surface-warning-tint: var(--color-amber-100);
606
+ --color-surface-warning-strong-active: var(--color-amber-600);
607
+ --color-surface-warning-strong-hover: var(--color-amber-500);
608
+ --color-surface-warning-subtle: var(--color-amber-100);
609
+ --color-surface-warning-subtle-active: var(--color-amber-300);
610
+ --color-surface-warning-subtle-hover: var(--color-amber-200);
611
+ --color-surface-warning-tint: var(--color-amber-50);
612
+ --color-surface-warning-tint-active: var(--color-amber-200);
613
+ --color-surface-warning-tint-hover: var(--color-amber-100);
536
614
  --font-body: var(--font-sans);
537
615
  --font-body-bold: var(--font-sans-bold);
538
616
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -550,9 +628,12 @@
550
628
  --font-display-semibold: 'Crimson Pro SemiBold';
551
629
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
552
630
  --opacity-disabled: 0.5;
631
+ --opacity-focus: 0.12;
553
632
  --opacity-hover: 0.08;
554
633
  --opacity-hover-overlay: 0.2;
555
634
  --opacity-selected: 0.12;
635
+ --opacity-selected-focus: 0.24;
636
+ --opacity-selected-hover: 0.2;
556
637
  }
557
638
  @variant dark {
558
639
  --border-width-default: 0.0625rem;
@@ -582,6 +663,8 @@
582
663
  --color-content-info-on-subtle: var(--color-sky-900);
583
664
  --color-content-link: var(--color-white);
584
665
  --color-content-link-visited: var(--color-purple-200);
666
+ --color-content-neutral-on-strong: var(--color-base-900);
667
+ --color-content-neutral-on-subtle: var(--color-base-100);
585
668
  --color-content-primary: var(--color-white);
586
669
  --color-content-secondary: var(--color-base-100);
587
670
  --color-content-selected: var(--color-brand-100);
@@ -603,46 +686,76 @@
603
686
  --color-stroke-success: var(--color-green-200);
604
687
  --color-stroke-warning: var(--color-amber-300);
605
688
  --color-surface-accent-core: var(--color-accent-input);
606
- --color-surface-accent-strong: var(--color-accent-400);
689
+ --color-surface-accent-strong: var(--color-accent-300);
690
+ --color-surface-accent-subtle: var(--color-accent-900);
691
+ --color-surface-accent-tint: var(--color-accent-950);
607
692
  --color-surface-action-strong: var(--color-brand-300);
608
- --color-surface-action-strong-active: var(--color-brand-200);
693
+ --color-surface-action-strong-active: var(--color-brand-100);
609
694
  --color-surface-action-strong-hover: var(--color-brand-200);
610
- --color-surface-action-subtle: var(--color-brand-700);
611
- --color-surface-action-subtle-active: var(--color-brand-800);
695
+ --color-surface-action-subtle: var(--color-brand-900);
696
+ --color-surface-action-subtle-active: var(--color-brand-700);
612
697
  --color-surface-action-subtle-hover: var(--color-brand-800);
613
- --color-surface-action-tint: var(--color-brand-900);
698
+ --color-surface-action-tint: var(--color-brand-950);
614
699
  --color-surface-action-tint-active: var(--color-brand-800);
615
- --color-surface-action-tint-hover: var(--color-brand-800);
616
- --color-surface-background: var(--color-base-900);
700
+ --color-surface-action-tint-hover: var(--color-brand-900);
701
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
702
+ --color-surface-background: var(--color-base-950);
617
703
  --color-surface-brand-core: var(--color-brand-input);
618
- --color-surface-brand-strong: var(--color-brand-400);
704
+ --color-surface-brand-strong: var(--color-brand-300);
705
+ --color-surface-brand-subtle: var(--color-brand-900);
706
+ --color-surface-brand-tint: var(--color-brand-950);
619
707
  --color-surface-danger-strong: var(--color-red-200);
620
- --color-surface-danger-strong-active: var(--color-red-100);
708
+ --color-surface-danger-strong-active: var(--color-red-50);
621
709
  --color-surface-danger-strong-hover: var(--color-red-100);
622
- --color-surface-danger-subtle: var(--color-red-700);
623
- --color-surface-danger-subtle-active: var(--color-red-800);
710
+ --color-surface-danger-subtle: var(--color-red-900);
711
+ --color-surface-danger-subtle-active: var(--color-red-700);
624
712
  --color-surface-danger-subtle-hover: var(--color-red-800);
625
- --color-surface-danger-tint: var(--color-red-900);
713
+ --color-surface-danger-tint: var(--color-red-950);
626
714
  --color-surface-danger-tint-active: var(--color-red-800);
627
- --color-surface-danger-tint-hover: var(--color-red-800);
715
+ --color-surface-danger-tint-hover: var(--color-red-900);
628
716
  --color-surface-info-strong: var(--color-sky-300);
629
- --color-surface-info-subtle: var(--color-sky-700);
630
- --color-surface-info-tint: var(--color-sky-900);
631
- --color-surface-neutral-subtle: var(--color-base-800);
632
- --color-surface-neutral-tint: var(--color-base-900);
717
+ --color-surface-info-strong-active: var(--color-sky-100);
718
+ --color-surface-info-strong-hover: var(--color-sky-200);
719
+ --color-surface-info-subtle: var(--color-sky-900);
720
+ --color-surface-info-subtle-active: var(--color-sky-700);
721
+ --color-surface-info-subtle-hover: var(--color-sky-800);
722
+ --color-surface-info-tint: var(--color-sky-950);
723
+ --color-surface-info-tint-active: var(--color-sky-800);
724
+ --color-surface-info-tint-hover: var(--color-sky-900);
725
+ --color-surface-neutral-strong: var(--color-base-300);
726
+ --color-surface-neutral-strong-active: var(--color-base-100);
727
+ --color-surface-neutral-strong-hover: var(--color-base-200);
728
+ --color-surface-neutral-subtle: var(--color-base-900);
729
+ --color-surface-neutral-subtle-active: var(--color-base-700);
730
+ --color-surface-neutral-subtle-hover: var(--color-base-800);
731
+ --color-surface-neutral-tint: var(--color-base-950);
732
+ --color-surface-neutral-tint-active: var(--color-base-800);
733
+ --color-surface-neutral-tint-hover: var(--color-base-900);
633
734
  --color-surface-primary: var(--color-base-950);
634
- --color-surface-primary-active: var(--color-base-900);
735
+ --color-surface-primary-active: var(--color-base-800);
635
736
  --color-surface-primary-hover: var(--color-base-900);
636
737
  --color-surface-secondary: var(--color-base-900);
637
- --color-surface-secondary-active: var(--color-base-800);
738
+ --color-surface-secondary-active: var(--color-base-700);
638
739
  --color-surface-secondary-hover: var(--color-base-800);
639
740
  --color-surface-success-strong: var(--color-green-300);
640
- --color-surface-success-subtle: var(--color-green-700);
641
- --color-surface-success-tint: var(--color-green-900);
741
+ --color-surface-success-strong-active: var(--color-green-100);
742
+ --color-surface-success-strong-hover: var(--color-green-200);
743
+ --color-surface-success-subtle: var(--color-green-900);
744
+ --color-surface-success-subtle-active: var(--color-green-700);
745
+ --color-surface-success-subtle-hover: var(--color-green-800);
746
+ --color-surface-success-tint: var(--color-green-950);
747
+ --color-surface-success-tint-active: var(--color-green-800);
748
+ --color-surface-success-tint-hover: var(--color-green-900);
642
749
  --color-surface-tertiary: var(--color-brand-900);
643
750
  --color-surface-warning-strong: var(--color-amber-300);
644
- --color-surface-warning-subtle: var(--color-amber-700);
645
- --color-surface-warning-tint: var(--color-amber-900);
751
+ --color-surface-warning-strong-active: var(--color-amber-100);
752
+ --color-surface-warning-strong-hover: var(--color-amber-200);
753
+ --color-surface-warning-subtle: var(--color-amber-900);
754
+ --color-surface-warning-subtle-active: var(--color-amber-700);
755
+ --color-surface-warning-subtle-hover: var(--color-amber-800);
756
+ --color-surface-warning-tint: var(--color-amber-950);
757
+ --color-surface-warning-tint-active: var(--color-amber-800);
758
+ --color-surface-warning-tint-hover: var(--color-amber-900);
646
759
  --font-body: var(--font-sans);
647
760
  --font-body-bold: var(--font-sans-bold);
648
761
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -660,9 +773,12 @@
660
773
  --font-display-semibold: 'Crimson Pro SemiBold';
661
774
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
662
775
  --opacity-disabled: 0.5;
776
+ --opacity-focus: 0.12;
663
777
  --opacity-hover: 0.08;
664
778
  --opacity-hover-overlay: 0.2;
665
779
  --opacity-selected: 0.12;
780
+ --opacity-selected-focus: 0.24;
781
+ --opacity-selected-hover: 0.2;
666
782
  }
667
783
  }
668
784
  }