@cdx-ui/styles 0.0.1-beta.11 → 0.0.1-beta.111

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 +219 -88
  3. package/css/vanilla.css +137 -57
  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 +682 -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 +29 -10
  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 +682 -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 +362 -42
  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);
@@ -351,79 +358,116 @@
351
358
  --color-chart-categorical-6: var(--color-neutral-600);
352
359
  --color-chart-simple-primary: var(--color-brand-500);
353
360
  --color-chart-simple-secondary: var(--color-brand-950);
361
+ --color-content-accent: var(--color-accent-700);
362
+ --color-content-accent-on-strong: var(--color-white);
363
+ --color-content-accent-on-subtle: var(--color-accent-900);
354
364
  --color-content-action: var(--color-brand-700);
355
365
  --color-content-action-on-strong: var(--color-white);
356
- --color-content-action-on-subtle: var(--color-brand-950);
366
+ --color-content-action-on-subtle: var(--color-brand-900);
357
367
  --color-content-brand: var(--color-brand-700);
368
+ --color-content-brand-on-strong: var(--color-white);
369
+ --color-content-brand-on-subtle: var(--color-brand-900);
358
370
  --color-content-danger: var(--color-red-700);
359
371
  --color-content-danger-on-strong: var(--color-white);
360
372
  --color-content-danger-on-subtle: var(--color-red-900);
361
- --color-content-info: var(--color-sky-500);
373
+ --color-content-info: var(--color-sky-700);
362
374
  --color-content-info-on-strong: var(--color-white);
363
375
  --color-content-info-on-subtle: var(--color-sky-900);
364
376
  --color-content-link: var(--color-blue-600);
365
377
  --color-content-link-visited: var(--color-purple-800);
378
+ --color-content-neutral-on-strong: var(--color-white);
379
+ --color-content-neutral-on-subtle: var(--color-base-900);
366
380
  --color-content-primary: var(--color-base-950);
367
381
  --color-content-secondary: var(--color-base-800);
368
- --color-content-selected: var(--color-brand-700);
369
- --color-content-success: var(--color-green-600);
382
+ --color-content-selected: var(--color-brand-600);
383
+ --color-content-success: var(--color-green-700);
370
384
  --color-content-success-on-strong: var(--color-white);
371
385
  --color-content-success-on-subtle: var(--color-green-900);
372
386
  --color-content-tertiary: var(--color-base-600);
373
- --color-content-warning: var(--color-amber-600);
387
+ --color-content-warning: var(--color-amber-700);
374
388
  --color-content-warning-on-strong: var(--color-black);
375
389
  --color-content-warning-on-subtle: var(--color-amber-900);
376
390
  --color-stroke-action: var(--color-brand-700);
377
391
  --color-stroke-danger: var(--color-red-700);
378
392
  --color-stroke-focus: var(--color-brand-700);
379
393
  --color-stroke-hover: var(--color-base-950);
380
- --color-stroke-info: var(--color-sky-500);
394
+ --color-stroke-info: var(--color-sky-700);
381
395
  --color-stroke-primary: var(--color-base-500);
382
396
  --color-stroke-ring: var(--color-base-950);
383
397
  --color-stroke-secondary: var(--color-base-100);
384
- --color-stroke-success: var(--color-green-500);
385
- --color-stroke-warning: var(--color-amber-600);
398
+ --color-stroke-success: var(--color-green-700);
399
+ --color-stroke-warning: var(--color-amber-700);
386
400
  --color-surface-accent-core: var(--color-accent-input);
387
401
  --color-surface-accent-strong: var(--color-accent-700);
402
+ --color-surface-accent-subtle: var(--color-accent-200);
403
+ --color-surface-accent-tint: var(--color-accent-100);
388
404
  --color-surface-action-strong: var(--color-brand-700);
389
- --color-surface-action-strong-active: var(--color-brand-800);
405
+ --color-surface-action-strong-active: var(--color-brand-900);
390
406
  --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);
407
+ --color-surface-action-subtle: var(--color-brand-100);
408
+ --color-surface-action-subtle-active: var(--color-brand-300);
409
+ --color-surface-action-subtle-hover: var(--color-brand-200);
410
+ --color-surface-action-tint: var(--color-brand-50);
395
411
  --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);
412
+ --color-surface-action-tint-hover: var(--color-brand-100);
413
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
414
+ --color-surface-background: var(--color-base-50);
398
415
  --color-surface-brand-core: var(--color-brand-input);
399
416
  --color-surface-brand-strong: var(--color-brand-700);
417
+ --color-surface-brand-subtle: var(--color-brand-200);
418
+ --color-surface-brand-tint: var(--color-brand-100);
400
419
  --color-surface-danger-strong: var(--color-red-700);
401
- --color-surface-danger-strong-active: var(--color-red-800);
420
+ --color-surface-danger-strong-active: var(--color-red-900);
402
421
  --color-surface-danger-strong-hover: var(--color-red-800);
403
- --color-surface-danger-subtle: var(--color-red-200);
422
+ --color-surface-danger-subtle: var(--color-red-100);
404
423
  --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);
424
+ --color-surface-danger-subtle-hover: var(--color-red-200);
425
+ --color-surface-danger-tint: var(--color-red-50);
407
426
  --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);
427
+ --color-surface-danger-tint-hover: var(--color-red-100);
428
+ --color-surface-info-strong: var(--color-sky-700);
429
+ --color-surface-info-strong-active: var(--color-sky-900);
430
+ --color-surface-info-strong-hover: var(--color-sky-800);
431
+ --color-surface-info-subtle: var(--color-sky-100);
432
+ --color-surface-info-subtle-active: var(--color-sky-300);
433
+ --color-surface-info-subtle-hover: var(--color-sky-200);
434
+ --color-surface-info-tint: var(--color-sky-50);
435
+ --color-surface-info-tint-active: var(--color-sky-200);
436
+ --color-surface-info-tint-hover: var(--color-sky-100);
437
+ --color-surface-neutral-strong: var(--color-base-700);
438
+ --color-surface-neutral-strong-active: var(--color-base-900);
439
+ --color-surface-neutral-strong-hover: var(--color-base-800);
440
+ --color-surface-neutral-subtle: var(--color-base-100);
441
+ --color-surface-neutral-subtle-active: var(--color-base-300);
442
+ --color-surface-neutral-subtle-hover: var(--color-base-200);
443
+ --color-surface-neutral-tint: var(--color-base-50);
444
+ --color-surface-neutral-tint-active: var(--color-base-200);
445
+ --color-surface-neutral-tint-hover: var(--color-base-100);
414
446
  --color-surface-primary: var(--color-white);
415
- --color-surface-primary-active: var(--color-base-100);
447
+ --color-surface-primary-active: var(--color-base-200);
416
448
  --color-surface-primary-hover: var(--color-base-100);
417
449
  --color-surface-secondary: var(--color-base-100);
418
- --color-surface-secondary-active: var(--color-base-200);
450
+ --color-surface-secondary-active: var(--color-base-300);
419
451
  --color-surface-secondary-hover: var(--color-base-200);
420
452
  --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);
453
+ --color-surface-success-strong-active: var(--color-green-800);
454
+ --color-surface-success-strong-hover: var(--color-green-700);
455
+ --color-surface-success-subtle: var(--color-green-100);
456
+ --color-surface-success-subtle-active: var(--color-green-300);
457
+ --color-surface-success-subtle-hover: var(--color-green-200);
458
+ --color-surface-success-tint: var(--color-green-50);
459
+ --color-surface-success-tint-active: var(--color-green-200);
460
+ --color-surface-success-tint-hover: var(--color-green-100);
423
461
  --color-surface-tertiary: var(--color-brand-100);
424
462
  --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);
463
+ --color-surface-warning-strong-active: var(--color-amber-600);
464
+ --color-surface-warning-strong-hover: var(--color-amber-500);
465
+ --color-surface-warning-subtle: var(--color-amber-100);
466
+ --color-surface-warning-subtle-active: var(--color-amber-300);
467
+ --color-surface-warning-subtle-hover: var(--color-amber-200);
468
+ --color-surface-warning-tint: var(--color-amber-50);
469
+ --color-surface-warning-tint-active: var(--color-amber-200);
470
+ --color-surface-warning-tint-hover: var(--color-amber-100);
427
471
  --font-body: var(--font-sans);
428
472
  --font-body-bold: var(--font-sans-bold);
429
473
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -440,6 +484,13 @@
440
484
  --font-display-medium-italic: 'Crimson Pro Medium Italic';
441
485
  --font-display-semibold: 'Crimson Pro SemiBold';
442
486
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
487
+ --opacity-disabled: 0.5;
488
+ --opacity-focus: 0.12;
489
+ --opacity-hover: 0.06;
490
+ --opacity-hover-overlay: 0.2;
491
+ --opacity-selected: 0.08;
492
+ --opacity-selected-focus: 0.2;
493
+ --opacity-selected-hover: 0.14;
443
494
  }
444
495
 
445
496
  @layer theme {
@@ -460,79 +511,116 @@
460
511
  --color-chart-categorical-6: var(--color-neutral-600);
461
512
  --color-chart-simple-primary: var(--color-brand-500);
462
513
  --color-chart-simple-secondary: var(--color-brand-950);
514
+ --color-content-accent: var(--color-accent-700);
515
+ --color-content-accent-on-strong: var(--color-white);
516
+ --color-content-accent-on-subtle: var(--color-accent-900);
463
517
  --color-content-action: var(--color-brand-700);
464
518
  --color-content-action-on-strong: var(--color-white);
465
- --color-content-action-on-subtle: var(--color-brand-950);
519
+ --color-content-action-on-subtle: var(--color-brand-900);
466
520
  --color-content-brand: var(--color-brand-700);
521
+ --color-content-brand-on-strong: var(--color-white);
522
+ --color-content-brand-on-subtle: var(--color-brand-900);
467
523
  --color-content-danger: var(--color-red-700);
468
524
  --color-content-danger-on-strong: var(--color-white);
469
525
  --color-content-danger-on-subtle: var(--color-red-900);
470
- --color-content-info: var(--color-sky-500);
526
+ --color-content-info: var(--color-sky-700);
471
527
  --color-content-info-on-strong: var(--color-white);
472
528
  --color-content-info-on-subtle: var(--color-sky-900);
473
529
  --color-content-link: var(--color-blue-600);
474
530
  --color-content-link-visited: var(--color-purple-800);
531
+ --color-content-neutral-on-strong: var(--color-white);
532
+ --color-content-neutral-on-subtle: var(--color-base-900);
475
533
  --color-content-primary: var(--color-base-950);
476
534
  --color-content-secondary: var(--color-base-800);
477
- --color-content-selected: var(--color-brand-700);
478
- --color-content-success: var(--color-green-600);
535
+ --color-content-selected: var(--color-brand-600);
536
+ --color-content-success: var(--color-green-700);
479
537
  --color-content-success-on-strong: var(--color-white);
480
538
  --color-content-success-on-subtle: var(--color-green-900);
481
539
  --color-content-tertiary: var(--color-base-600);
482
- --color-content-warning: var(--color-amber-600);
540
+ --color-content-warning: var(--color-amber-700);
483
541
  --color-content-warning-on-strong: var(--color-black);
484
542
  --color-content-warning-on-subtle: var(--color-amber-900);
485
543
  --color-stroke-action: var(--color-brand-700);
486
544
  --color-stroke-danger: var(--color-red-700);
487
545
  --color-stroke-focus: var(--color-brand-700);
488
546
  --color-stroke-hover: var(--color-base-950);
489
- --color-stroke-info: var(--color-sky-500);
547
+ --color-stroke-info: var(--color-sky-700);
490
548
  --color-stroke-primary: var(--color-base-500);
491
549
  --color-stroke-ring: var(--color-base-950);
492
550
  --color-stroke-secondary: var(--color-base-100);
493
- --color-stroke-success: var(--color-green-500);
494
- --color-stroke-warning: var(--color-amber-600);
551
+ --color-stroke-success: var(--color-green-700);
552
+ --color-stroke-warning: var(--color-amber-700);
495
553
  --color-surface-accent-core: var(--color-accent-input);
496
554
  --color-surface-accent-strong: var(--color-accent-700);
555
+ --color-surface-accent-subtle: var(--color-accent-200);
556
+ --color-surface-accent-tint: var(--color-accent-100);
497
557
  --color-surface-action-strong: var(--color-brand-700);
498
- --color-surface-action-strong-active: var(--color-brand-800);
558
+ --color-surface-action-strong-active: var(--color-brand-900);
499
559
  --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);
560
+ --color-surface-action-subtle: var(--color-brand-100);
561
+ --color-surface-action-subtle-active: var(--color-brand-300);
562
+ --color-surface-action-subtle-hover: var(--color-brand-200);
563
+ --color-surface-action-tint: var(--color-brand-50);
504
564
  --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);
565
+ --color-surface-action-tint-hover: var(--color-brand-100);
566
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
567
+ --color-surface-background: var(--color-base-50);
507
568
  --color-surface-brand-core: var(--color-brand-input);
508
569
  --color-surface-brand-strong: var(--color-brand-700);
570
+ --color-surface-brand-subtle: var(--color-brand-200);
571
+ --color-surface-brand-tint: var(--color-brand-100);
509
572
  --color-surface-danger-strong: var(--color-red-700);
510
- --color-surface-danger-strong-active: var(--color-red-800);
573
+ --color-surface-danger-strong-active: var(--color-red-900);
511
574
  --color-surface-danger-strong-hover: var(--color-red-800);
512
- --color-surface-danger-subtle: var(--color-red-200);
575
+ --color-surface-danger-subtle: var(--color-red-100);
513
576
  --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);
577
+ --color-surface-danger-subtle-hover: var(--color-red-200);
578
+ --color-surface-danger-tint: var(--color-red-50);
516
579
  --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);
580
+ --color-surface-danger-tint-hover: var(--color-red-100);
581
+ --color-surface-info-strong: var(--color-sky-700);
582
+ --color-surface-info-strong-active: var(--color-sky-900);
583
+ --color-surface-info-strong-hover: var(--color-sky-800);
584
+ --color-surface-info-subtle: var(--color-sky-100);
585
+ --color-surface-info-subtle-active: var(--color-sky-300);
586
+ --color-surface-info-subtle-hover: var(--color-sky-200);
587
+ --color-surface-info-tint: var(--color-sky-50);
588
+ --color-surface-info-tint-active: var(--color-sky-200);
589
+ --color-surface-info-tint-hover: var(--color-sky-100);
590
+ --color-surface-neutral-strong: var(--color-base-700);
591
+ --color-surface-neutral-strong-active: var(--color-base-900);
592
+ --color-surface-neutral-strong-hover: var(--color-base-800);
593
+ --color-surface-neutral-subtle: var(--color-base-100);
594
+ --color-surface-neutral-subtle-active: var(--color-base-300);
595
+ --color-surface-neutral-subtle-hover: var(--color-base-200);
596
+ --color-surface-neutral-tint: var(--color-base-50);
597
+ --color-surface-neutral-tint-active: var(--color-base-200);
598
+ --color-surface-neutral-tint-hover: var(--color-base-100);
523
599
  --color-surface-primary: var(--color-white);
524
- --color-surface-primary-active: var(--color-base-100);
600
+ --color-surface-primary-active: var(--color-base-200);
525
601
  --color-surface-primary-hover: var(--color-base-100);
526
602
  --color-surface-secondary: var(--color-base-100);
527
- --color-surface-secondary-active: var(--color-base-200);
603
+ --color-surface-secondary-active: var(--color-base-300);
528
604
  --color-surface-secondary-hover: var(--color-base-200);
529
605
  --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);
606
+ --color-surface-success-strong-active: var(--color-green-800);
607
+ --color-surface-success-strong-hover: var(--color-green-700);
608
+ --color-surface-success-subtle: var(--color-green-100);
609
+ --color-surface-success-subtle-active: var(--color-green-300);
610
+ --color-surface-success-subtle-hover: var(--color-green-200);
611
+ --color-surface-success-tint: var(--color-green-50);
612
+ --color-surface-success-tint-active: var(--color-green-200);
613
+ --color-surface-success-tint-hover: var(--color-green-100);
532
614
  --color-surface-tertiary: var(--color-brand-100);
533
615
  --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);
616
+ --color-surface-warning-strong-active: var(--color-amber-600);
617
+ --color-surface-warning-strong-hover: var(--color-amber-500);
618
+ --color-surface-warning-subtle: var(--color-amber-100);
619
+ --color-surface-warning-subtle-active: var(--color-amber-300);
620
+ --color-surface-warning-subtle-hover: var(--color-amber-200);
621
+ --color-surface-warning-tint: var(--color-amber-50);
622
+ --color-surface-warning-tint-active: var(--color-amber-200);
623
+ --color-surface-warning-tint-hover: var(--color-amber-100);
536
624
  --font-body: var(--font-sans);
537
625
  --font-body-bold: var(--font-sans-bold);
538
626
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -550,9 +638,12 @@
550
638
  --font-display-semibold: 'Crimson Pro SemiBold';
551
639
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
552
640
  --opacity-disabled: 0.5;
553
- --opacity-hover: 0.08;
641
+ --opacity-focus: 0.12;
642
+ --opacity-hover: 0.06;
554
643
  --opacity-hover-overlay: 0.2;
555
- --opacity-selected: 0.12;
644
+ --opacity-selected: 0.08;
645
+ --opacity-selected-focus: 0.2;
646
+ --opacity-selected-hover: 0.14;
556
647
  }
557
648
  @variant dark {
558
649
  --border-width-default: 0.0625rem;
@@ -570,10 +661,15 @@
570
661
  --color-chart-categorical-6: var(--color-neutral-600);
571
662
  --color-chart-simple-primary: var(--color-brand-500);
572
663
  --color-chart-simple-secondary: var(--color-brand-950);
664
+ --color-content-accent: var(--color-accent-300);
665
+ --color-content-accent-on-strong: var(--color-accent-950);
666
+ --color-content-accent-on-subtle: var(--color-accent-100);
573
667
  --color-content-action: var(--color-brand-100);
574
668
  --color-content-action-on-strong: var(--color-brand-950);
575
669
  --color-content-action-on-subtle: var(--color-brand-100);
576
- --color-content-brand: var(--color-brand-700);
670
+ --color-content-brand: var(--color-brand-300);
671
+ --color-content-brand-on-strong: var(--color-brand-950);
672
+ --color-content-brand-on-subtle: var(--color-brand-100);
577
673
  --color-content-danger: var(--color-red-300);
578
674
  --color-content-danger-on-strong: var(--color-red-900);
579
675
  --color-content-danger-on-subtle: var(--color-red-100);
@@ -582,6 +678,8 @@
582
678
  --color-content-info-on-subtle: var(--color-sky-900);
583
679
  --color-content-link: var(--color-white);
584
680
  --color-content-link-visited: var(--color-purple-200);
681
+ --color-content-neutral-on-strong: var(--color-base-900);
682
+ --color-content-neutral-on-subtle: var(--color-base-100);
585
683
  --color-content-primary: var(--color-white);
586
684
  --color-content-secondary: var(--color-base-100);
587
685
  --color-content-selected: var(--color-brand-100);
@@ -603,46 +701,76 @@
603
701
  --color-stroke-success: var(--color-green-200);
604
702
  --color-stroke-warning: var(--color-amber-300);
605
703
  --color-surface-accent-core: var(--color-accent-input);
606
- --color-surface-accent-strong: var(--color-accent-400);
704
+ --color-surface-accent-strong: var(--color-accent-300);
705
+ --color-surface-accent-subtle: var(--color-accent-900);
706
+ --color-surface-accent-tint: var(--color-accent-950);
607
707
  --color-surface-action-strong: var(--color-brand-300);
608
- --color-surface-action-strong-active: var(--color-brand-200);
708
+ --color-surface-action-strong-active: var(--color-brand-100);
609
709
  --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);
710
+ --color-surface-action-subtle: var(--color-brand-900);
711
+ --color-surface-action-subtle-active: var(--color-brand-700);
612
712
  --color-surface-action-subtle-hover: var(--color-brand-800);
613
- --color-surface-action-tint: var(--color-brand-900);
713
+ --color-surface-action-tint: var(--color-brand-950);
614
714
  --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);
715
+ --color-surface-action-tint-hover: var(--color-brand-900);
716
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
717
+ --color-surface-background: var(--color-base-950);
617
718
  --color-surface-brand-core: var(--color-brand-input);
618
- --color-surface-brand-strong: var(--color-brand-400);
719
+ --color-surface-brand-strong: var(--color-brand-300);
720
+ --color-surface-brand-subtle: var(--color-brand-900);
721
+ --color-surface-brand-tint: var(--color-brand-950);
619
722
  --color-surface-danger-strong: var(--color-red-200);
620
- --color-surface-danger-strong-active: var(--color-red-100);
723
+ --color-surface-danger-strong-active: var(--color-red-50);
621
724
  --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);
725
+ --color-surface-danger-subtle: var(--color-red-900);
726
+ --color-surface-danger-subtle-active: var(--color-red-700);
624
727
  --color-surface-danger-subtle-hover: var(--color-red-800);
625
- --color-surface-danger-tint: var(--color-red-900);
728
+ --color-surface-danger-tint: var(--color-red-950);
626
729
  --color-surface-danger-tint-active: var(--color-red-800);
627
- --color-surface-danger-tint-hover: var(--color-red-800);
730
+ --color-surface-danger-tint-hover: var(--color-red-900);
628
731
  --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);
732
+ --color-surface-info-strong-active: var(--color-sky-100);
733
+ --color-surface-info-strong-hover: var(--color-sky-200);
734
+ --color-surface-info-subtle: var(--color-sky-900);
735
+ --color-surface-info-subtle-active: var(--color-sky-700);
736
+ --color-surface-info-subtle-hover: var(--color-sky-800);
737
+ --color-surface-info-tint: var(--color-sky-950);
738
+ --color-surface-info-tint-active: var(--color-sky-800);
739
+ --color-surface-info-tint-hover: var(--color-sky-900);
740
+ --color-surface-neutral-strong: var(--color-base-300);
741
+ --color-surface-neutral-strong-active: var(--color-base-100);
742
+ --color-surface-neutral-strong-hover: var(--color-base-200);
743
+ --color-surface-neutral-subtle: var(--color-base-900);
744
+ --color-surface-neutral-subtle-active: var(--color-base-700);
745
+ --color-surface-neutral-subtle-hover: var(--color-base-800);
746
+ --color-surface-neutral-tint: var(--color-base-950);
747
+ --color-surface-neutral-tint-active: var(--color-base-800);
748
+ --color-surface-neutral-tint-hover: var(--color-base-900);
633
749
  --color-surface-primary: var(--color-base-950);
634
- --color-surface-primary-active: var(--color-base-900);
750
+ --color-surface-primary-active: var(--color-base-800);
635
751
  --color-surface-primary-hover: var(--color-base-900);
636
752
  --color-surface-secondary: var(--color-base-900);
637
- --color-surface-secondary-active: var(--color-base-800);
753
+ --color-surface-secondary-active: var(--color-base-700);
638
754
  --color-surface-secondary-hover: var(--color-base-800);
639
755
  --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);
756
+ --color-surface-success-strong-active: var(--color-green-100);
757
+ --color-surface-success-strong-hover: var(--color-green-200);
758
+ --color-surface-success-subtle: var(--color-green-900);
759
+ --color-surface-success-subtle-active: var(--color-green-700);
760
+ --color-surface-success-subtle-hover: var(--color-green-800);
761
+ --color-surface-success-tint: var(--color-green-950);
762
+ --color-surface-success-tint-active: var(--color-green-800);
763
+ --color-surface-success-tint-hover: var(--color-green-900);
642
764
  --color-surface-tertiary: var(--color-brand-900);
643
765
  --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);
766
+ --color-surface-warning-strong-active: var(--color-amber-100);
767
+ --color-surface-warning-strong-hover: var(--color-amber-200);
768
+ --color-surface-warning-subtle: var(--color-amber-900);
769
+ --color-surface-warning-subtle-active: var(--color-amber-700);
770
+ --color-surface-warning-subtle-hover: var(--color-amber-800);
771
+ --color-surface-warning-tint: var(--color-amber-950);
772
+ --color-surface-warning-tint-active: var(--color-amber-800);
773
+ --color-surface-warning-tint-hover: var(--color-amber-900);
646
774
  --font-body: var(--font-sans);
647
775
  --font-body-bold: var(--font-sans-bold);
648
776
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -660,9 +788,12 @@
660
788
  --font-display-semibold: 'Crimson Pro SemiBold';
661
789
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
662
790
  --opacity-disabled: 0.5;
791
+ --opacity-focus: 0.12;
663
792
  --opacity-hover: 0.08;
664
793
  --opacity-hover-overlay: 0.2;
665
794
  --opacity-selected: 0.12;
795
+ --opacity-selected-focus: 0.24;
796
+ --opacity-selected-hover: 0.2;
666
797
  }
667
798
  }
668
799
  }