@felloinnovations/brand-kit 0.5.1 → 0.5.3

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 (104) hide show
  1. package/AGENTS.md +29 -9
  2. package/CHANGELOG.md +86 -0
  3. package/README.md +10 -4
  4. package/design-system/01-how-claude-decides.md +5 -3
  5. package/design-system/03-colour.md +19 -1
  6. package/design-system/05-space-and-layout.md +2 -1
  7. package/design-system/08-choosing-components.md +20 -4
  8. package/design-system/09-charts.md +6 -3
  9. package/design-system/11-page-recipes.md +40 -1
  10. package/design-system/13-motion.md +1 -1
  11. package/design-system/15-ai-experiences.md +11 -0
  12. package/design-system/17-decisions.md +41 -0
  13. package/design-system/components/AppShell/README.md +89 -21
  14. package/design-system/components/AppShell/preview.html +148 -3
  15. package/design-system/components/AppShell/style.css +47 -0
  16. package/design-system/components/Avatar/README.md +6 -3
  17. package/design-system/components/Avatar/preview.html +2 -1
  18. package/design-system/components/Avatar/style.css +3 -0
  19. package/design-system/components/Banner/README.md +9 -5
  20. package/design-system/components/Banner/preview.html +9 -0
  21. package/design-system/components/Banner/style.css +3 -0
  22. package/design-system/components/Button/README.md +29 -2
  23. package/design-system/components/Button/preview.html +33 -1
  24. package/design-system/components/Button/style.css +21 -0
  25. package/design-system/components/Calendar/README.md +148 -0
  26. package/design-system/components/Calendar/preview.html +449 -0
  27. package/design-system/components/Calendar/style.css +61 -0
  28. package/design-system/components/Card/README.md +13 -0
  29. package/design-system/components/Card/preview.html +23 -0
  30. package/design-system/components/Card/style.css +19 -0
  31. package/design-system/components/ChatCard/README.md +74 -3
  32. package/design-system/components/ChatCard/preview.html +126 -25
  33. package/design-system/components/ChatCard/style.css +6 -0
  34. package/design-system/components/Chip/README.md +16 -7
  35. package/design-system/components/Chip/preview.html +25 -1
  36. package/design-system/components/Chip/style.css +5 -0
  37. package/design-system/components/Combobox/README.md +10 -4
  38. package/design-system/components/Combobox/preview.html +19 -4
  39. package/design-system/components/Combobox/style.css +7 -1
  40. package/design-system/components/CommentThread/README.md +138 -0
  41. package/design-system/components/CommentThread/preview.html +134 -0
  42. package/design-system/components/CommentThread/style.css +41 -0
  43. package/design-system/components/DateInput/README.md +38 -4
  44. package/design-system/components/DateInput/preview.html +50 -2
  45. package/design-system/components/DateInput/style.css +6 -0
  46. package/design-system/components/Dialog/README.md +26 -3
  47. package/design-system/components/Dialog/preview.html +80 -0
  48. package/design-system/components/Dialog/style.css +28 -3
  49. package/design-system/components/EmptyState/README.md +1 -1
  50. package/design-system/components/Fold/README.md +21 -0
  51. package/design-system/components/Fold/preview.html +44 -1
  52. package/design-system/components/Fold/style.css +30 -0
  53. package/design-system/components/InlineEdit/README.md +116 -0
  54. package/design-system/components/InlineEdit/preview.html +135 -0
  55. package/design-system/components/InlineEdit/style.css +34 -0
  56. package/design-system/components/Input/README.md +20 -1
  57. package/design-system/components/Input/preview.html +24 -0
  58. package/design-system/components/Input/style.css +13 -1
  59. package/design-system/components/KanbanBoard/README.md +68 -4
  60. package/design-system/components/KanbanBoard/preview.html +129 -0
  61. package/design-system/components/KanbanBoard/style.css +31 -0
  62. package/design-system/components/PlanTimeline/README.md +144 -0
  63. package/design-system/components/PlanTimeline/preview.html +109 -0
  64. package/design-system/components/PlanTimeline/style.css +64 -0
  65. package/design-system/components/README.md +11 -6
  66. package/design-system/components/Skeleton/README.md +66 -2
  67. package/design-system/components/Skeleton/preview.html +83 -1
  68. package/design-system/components/Starter/README.md +1 -1
  69. package/design-system/components/Starter/preview.html +1 -1
  70. package/design-system/components/Stepper/README.md +81 -5
  71. package/design-system/components/Stepper/preview.html +64 -1
  72. package/design-system/components/Stepper/style.css +29 -0
  73. package/design-system/components/StreakCalendar/README.md +1 -0
  74. package/design-system/components/Table/README.md +7 -3
  75. package/design-system/components/Table/preview.html +15 -0
  76. package/design-system/components/Table/style.css +2 -0
  77. package/design-system/components/TextDiff/README.md +96 -0
  78. package/design-system/components/TextDiff/preview.html +42 -0
  79. package/design-system/components/TextDiff/style.css +21 -0
  80. package/design-system/components/Timeline/README.md +3 -1
  81. package/design-system/components/TrendLine/README.md +38 -7
  82. package/design-system/components/TrendLine/preview.html +140 -3
  83. package/design-system/components/TrendLine/style.css +12 -2
  84. package/design-system/components/bundle.css +483 -7
  85. package/design-system/tokens.json +15 -1
  86. package/dist/fello-core.css +2 -2
  87. package/dist/fello.css +2 -2
  88. package/dist/fello.scoped.css +2 -2
  89. package/dist/index.d.ts +1 -1
  90. package/dist/scoped.js +2 -2
  91. package/dist/tokens.d.ts +8 -0
  92. package/dist/tokens.js +8 -0
  93. package/package.json +7 -2
  94. package/scripts/check-drift.mjs +325 -0
  95. package/scripts/token-model.mjs +2 -1
  96. package/tokens/_dark.css +2 -0
  97. package/tokens/_product.css +2 -0
  98. package/tokens/palettes.ts +1 -1
  99. package/tokens/shadcn-compat.css +1 -1
  100. package/tokens/shadcn-compat.hsl.css +1 -1
  101. package/tokens/tokens.css +14 -1
  102. package/tokens/tokens.md +53 -46
  103. package/tokens/tokens.root.css +14 -1
  104. package/tokens/tokens.ts +9 -1
package/tokens/tokens.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Generated by scripts/generate-tokens.mjs. Do not edit.
2
2
  Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
3
3
  tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
4
- 422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
4
+ 424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
5
5
 
6
6
  /* "static" so every token is emitted as a custom property even when no
7
7
  utility references it. Without it Tailwind prunes the unused ones and a
@@ -126,6 +126,7 @@
126
126
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
127
127
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
128
128
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
129
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface));
129
130
  --ws-edge: var(--color-gray-stroke);
130
131
  --ws-edge-card: var(--color-gray-3);
131
132
  --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
@@ -273,6 +274,7 @@
273
274
  --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
274
275
  --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
275
276
  --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
277
+ --ws-shadow-rise: var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
276
278
  --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent);
277
279
  --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
278
280
  --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
@@ -457,6 +459,7 @@
457
459
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
458
460
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
459
461
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
462
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface));
460
463
  --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
461
464
  --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
462
465
  --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
@@ -518,6 +521,7 @@
518
521
  --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
519
522
  --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
520
523
  --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
524
+ --ws-shadow-rise: var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
521
525
  --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent);
522
526
  --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
523
527
  --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
@@ -614,6 +618,7 @@
614
618
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
615
619
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
616
620
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
621
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface));
617
622
  --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
618
623
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
619
624
  --ws-track: var(--ws-tray);
@@ -724,6 +729,7 @@
724
729
  --ws-tint-accent: var(--color-surface);
725
730
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
726
731
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
732
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
727
733
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
728
734
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
729
735
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -830,6 +836,7 @@
830
836
  --ws-tint-accent: var(--color-surface);
831
837
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
832
838
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
839
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
833
840
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
834
841
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
835
842
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -937,6 +944,7 @@
937
944
  --ws-tint-accent: var(--color-surface);
938
945
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
939
946
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
947
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
940
948
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
941
949
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
942
950
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -1043,6 +1051,7 @@
1043
1051
  --ws-tint-accent: var(--color-surface);
1044
1052
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
1045
1053
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
1054
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
1046
1055
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
1047
1056
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
1048
1057
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -1261,6 +1270,7 @@
1261
1270
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1262
1271
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1263
1272
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1273
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1264
1274
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1265
1275
  --ws-card-tint-done: var(--ws-tint-live);
1266
1276
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1303,6 +1313,7 @@
1303
1313
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1304
1314
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1305
1315
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1316
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1306
1317
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1307
1318
  --ws-card-tint-done: var(--ws-tint-live);
1308
1319
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1341,6 +1352,7 @@
1341
1352
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1342
1353
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1343
1354
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1355
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1344
1356
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1345
1357
  --ws-card-tint-done: var(--ws-tint-live);
1346
1358
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1383,6 +1395,7 @@
1383
1395
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1384
1396
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1385
1397
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1398
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1386
1399
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1387
1400
  --ws-card-tint-done: var(--ws-tint-live);
1388
1401
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
package/tokens/tokens.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Fello brand tokens
2
2
 
3
- Generated from Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11, tokens/_product.css and tokens/_dark.css. 422 tokens: 111 kit, 311 product layer (`--ws-*`); the dark theme re-points 98 (night) and 42 more on the navy ground.
3
+ Generated from Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11, tokens/_product.css and tokens/_dark.css. 424 tokens: 111 kit, 313 product layer (`--ws-*`); the dark theme re-points 99 (night) and 43 more on the navy ground.
4
4
 
5
5
  Use these through `var(--token)` or the Tailwind utility of the same name.
6
6
  Never write a raw hex, px font-size, or one-off shadow in a Fello project.
@@ -200,6 +200,7 @@ The names every product screen is built from (design-system/ says when to use ea
200
200
  | `--ws-tint-accent` | `color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c)` |
201
201
  | `--ws-tint-needs` | `color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface))` |
202
202
  | `--ws-tint-live` | `color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface))` |
203
+ | `--ws-tint-alert` | `color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface))` |
203
204
  | `--ws-edge` | `var(--color-gray-stroke)` |
204
205
  | `--ws-edge-card` | `var(--color-gray-3)` |
205
206
  | `--ws-edge-card-1x` | `color-mix(in srgb, var(--ws-edge-card) 50%, transparent)` |
@@ -347,6 +348,7 @@ The names every product screen is built from (design-system/ says when to use ea
347
348
  | `--ws-shadow-menu` | `var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)` |
348
349
  | `--ws-shadow-tip` | `var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent)` |
349
350
  | `--ws-shadow-float` | `var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent)` |
351
+ | `--ws-shadow-rise` | `var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)` |
350
352
  | `--ws-shadow-bar` | `var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent)` |
351
353
  | `--ws-hover-faint` | `color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent)` |
352
354
  | `--ws-hover` | `color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent)` |
@@ -558,6 +560,7 @@ light. Brand colours stay literal; these semantic names carry the swap. `tokens.
558
560
  | `--ws-tint-accent` | `var(--color-surface)` |
559
561
  | `--ws-tint-needs` | `color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page))` |
560
562
  | `--ws-tint-live` | `color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page))` |
563
+ | `--ws-tint-alert` | `color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page))` |
561
564
  | `--ws-card-tint-blue` | `color-mix(in srgb, var(--color-bg-page) 90%, #879bf4)` |
562
565
  | `--ws-card-tint-done` | `color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page))` |
563
566
  | `--ws-track` | `color-mix(in srgb, var(--ws-tray) 80%, #0a1215)` |
@@ -661,6 +664,7 @@ light. Brand colours stay literal; these semantic names carry the swap. `tokens.
661
664
  | `--ws-tint-accent` | `color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white))` |
662
665
  | `--ws-tint-needs` | `color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page))` |
663
666
  | `--ws-tint-live` | `color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page))` |
667
+ | `--ws-tint-alert` | `color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page))` |
664
668
  | `--ws-card-tint-blue` | `color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page))` |
665
669
  | `--ws-card-tint-done` | `var(--ws-tint-live)` |
666
670
  | `--ws-track` | `color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white))` |
@@ -702,21 +706,21 @@ tone uses the word token here (D2).
702
706
 
703
707
  ### Light
704
708
 
705
- | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | success | well hover |
706
- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
707
- | `--color-text-heading` | `#093555` | 12.34 | 12.71 | 11.28 | 10.86 | 12.34 | 10.37 | 10.23 | 10.86 | 11.28 | 11.62 | 11.55 | 10.85 | 10.97 | 11.19 | 11.28 | 11.15 | 11.48 | 11.62 | 10.21 | 9.36 | 9.83 |
708
- | `--color-text-body` | `#545454` | 7.35 | 7.57 | 6.72 | 6.47 | 7.35 | 6.18 | 6.10 | 6.47 | 6.72 | 6.92 | 6.88 | 6.46 | 6.54 | 6.66 | 6.72 | 6.65 | 6.84 | 6.92 | 6.08 | 5.57 | 5.86 |
709
- | `--color-text-muted` | `#666666` | 5.57 | 5.74 | 5.10 | 4.90 | 5.57 | 4.69 | 4.62 | 4.90 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.05 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.23 (fails) | 4.44 (fails) |
710
- | `--color-text-interactive` | `#495883` | 6.78 | 6.98 | 6.20 | 5.97 | 6.78 | 5.70 | 5.62 | 5.97 | 6.20 | 6.39 | 6.35 | 5.96 | 6.03 | 6.15 | 6.20 | 6.13 | 6.31 | 6.39 | 5.61 | 5.14 | 5.40 |
711
- | `--color-text-brand-strong` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.14 (fails) | 4.35 (fails) |
712
- | `--color-text-error-strong` | `#a74b39` | 5.50 | 5.66 | 5.03 | 4.84 | 5.50 | 4.62 | 4.56 | 4.84 | 5.03 | 5.18 | 5.14 | 4.83 | 4.89 | 4.98 | 5.03 | 4.97 | 5.12 | 5.18 | 4.55 | 4.17 (fails) | 4.38 (fails) |
713
- | `--color-text-success-strong` | `#3c601b` | 7.07 | 7.29 | 6.47 | 6.23 | 7.07 | 5.95 | 5.87 | 6.23 | 6.47 | 6.66 | 6.62 | 6.22 | 6.29 | 6.41 | 6.47 | 6.40 | 6.59 | 6.66 | 5.85 | 5.36 | 5.64 |
714
- | `--ws-word-needs` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.14 (fails) | 4.35 (fails) |
715
- | `--ws-word-positive` | `#09717a` | 5.58 | 5.75 | 5.10 | 4.91 | 5.58 | 4.69 | 4.63 | 4.91 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.06 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.23 (fails) | 4.44 (fails) |
716
- | `--ws-word-needs-work` | `#b42d68` | 5.80 | 5.97 | 5.30 | 5.10 | 5.80 | 4.87 | 4.81 | 5.10 | 5.30 | 5.46 | 5.43 | 5.10 | 5.16 | 5.26 | 5.30 | 5.24 | 5.40 | 5.46 | 4.80 | 4.40 (fails) | 4.62 |
717
- | `--ws-word-alert` | `#b1042f` | 6.96 | 7.17 | 6.37 | 6.13 | 6.96 | 5.85 | 5.77 | 6.13 | 6.37 | 6.56 | 6.52 | 6.12 | 6.19 | 6.31 | 6.37 | 6.29 | 6.48 | 6.56 | 5.76 | 5.28 | 5.55 |
718
- | `--ws-word-past-half` | `#6d4fc2` | 5.74 | 5.92 | 5.25 | 5.06 | 5.74 | 4.83 | 4.76 | 5.06 | 5.25 | 5.41 | 5.38 | 5.05 | 5.11 | 5.21 | 5.25 | 5.19 | 5.35 | 5.41 | 4.75 | 4.36 (fails) | 4.58 |
719
- | `--ws-word-answer` | `#3d3d3d` | 10.54 | 10.86 | 9.64 | 9.28 | 10.54 | 8.87 | 8.74 | 9.28 | 9.64 | 9.93 | 9.87 | 9.27 | 9.38 | 9.56 | 9.64 | 9.53 | 9.81 | 9.93 | 8.72 | 7.99 | 8.40 |
709
+ | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | alert tint | success | well hover |
710
+ | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
711
+ | `--color-text-heading` | `#093555` | 12.34 | 12.71 | 11.28 | 10.86 | 12.34 | 10.37 | 10.23 | 10.86 | 11.28 | 11.62 | 11.55 | 10.85 | 10.97 | 11.19 | 11.28 | 11.15 | 11.48 | 11.62 | 10.21 | 10.98 | 9.36 | 9.83 |
712
+ | `--color-text-body` | `#545454` | 7.35 | 7.57 | 6.72 | 6.47 | 7.35 | 6.18 | 6.10 | 6.47 | 6.72 | 6.92 | 6.88 | 6.46 | 6.54 | 6.66 | 6.72 | 6.65 | 6.84 | 6.92 | 6.08 | 6.54 | 5.57 | 5.86 |
713
+ | `--color-text-muted` | `#666666` | 5.57 | 5.74 | 5.10 | 4.90 | 5.57 | 4.69 | 4.62 | 4.90 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.05 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.96 | 4.23 (fails) | 4.44 (fails) |
714
+ | `--color-text-interactive` | `#495883` | 6.78 | 6.98 | 6.20 | 5.97 | 6.78 | 5.70 | 5.62 | 5.97 | 6.20 | 6.39 | 6.35 | 5.96 | 6.03 | 6.15 | 6.20 | 6.13 | 6.31 | 6.39 | 5.61 | 6.03 | 5.14 | 5.40 |
715
+ | `--color-text-brand-strong` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.86 | 4.14 (fails) | 4.35 (fails) |
716
+ | `--color-text-error-strong` | `#a74b39` | 5.50 | 5.66 | 5.03 | 4.84 | 5.50 | 4.62 | 4.56 | 4.84 | 5.03 | 5.18 | 5.14 | 4.83 | 4.89 | 4.98 | 5.03 | 4.97 | 5.12 | 5.18 | 4.55 | 4.89 | 4.17 (fails) | 4.38 (fails) |
717
+ | `--color-text-success-strong` | `#3c601b` | 7.07 | 7.29 | 6.47 | 6.23 | 7.07 | 5.95 | 5.87 | 6.23 | 6.47 | 6.66 | 6.62 | 6.22 | 6.29 | 6.41 | 6.47 | 6.40 | 6.59 | 6.66 | 5.85 | 6.30 | 5.36 | 5.64 |
718
+ | `--ws-word-needs` | `#a84b3c` | 5.45 | 5.62 | 4.99 | 4.80 | 5.45 | 4.59 | 4.52 | 4.80 | 4.99 | 5.14 | 5.11 | 4.80 | 4.85 | 4.95 | 4.99 | 4.93 | 5.08 | 5.14 | 4.51 | 4.86 | 4.14 (fails) | 4.35 (fails) |
719
+ | `--ws-word-positive` | `#09717a` | 5.58 | 5.75 | 5.10 | 4.91 | 5.58 | 4.69 | 4.63 | 4.91 | 5.10 | 5.25 | 5.22 | 4.90 | 4.96 | 5.06 | 5.10 | 5.04 | 5.19 | 5.25 | 4.61 | 4.97 | 4.23 (fails) | 4.44 (fails) |
720
+ | `--ws-word-needs-work` | `#b42d68` | 5.80 | 5.97 | 5.30 | 5.10 | 5.80 | 4.87 | 4.81 | 5.10 | 5.30 | 5.46 | 5.43 | 5.10 | 5.16 | 5.26 | 5.30 | 5.24 | 5.40 | 5.46 | 4.80 | 5.16 | 4.40 (fails) | 4.62 |
721
+ | `--ws-word-alert` | `#b1042f` | 6.96 | 7.17 | 6.37 | 6.13 | 6.96 | 5.85 | 5.77 | 6.13 | 6.37 | 6.56 | 6.52 | 6.12 | 6.19 | 6.31 | 6.37 | 6.29 | 6.48 | 6.56 | 5.76 | 6.20 | 5.28 | 5.55 |
722
+ | `--ws-word-past-half` | `#6d4fc2` | 5.74 | 5.92 | 5.25 | 5.06 | 5.74 | 4.83 | 4.76 | 5.06 | 5.25 | 5.41 | 5.38 | 5.05 | 5.11 | 5.21 | 5.25 | 5.19 | 5.35 | 5.41 | 4.75 | 5.11 | 4.36 (fails) | 4.58 |
723
+ | `--ws-word-answer` | `#3d3d3d` | 10.54 | 10.86 | 9.64 | 9.28 | 10.54 | 8.87 | 8.74 | 9.28 | 9.64 | 9.93 | 9.87 | 9.27 | 9.38 | 9.56 | 9.64 | 9.53 | 9.81 | 9.93 | 8.72 | 9.39 | 7.99 | 8.40 |
720
724
 
721
725
  - `--color-text-placeholder` on `--ws-field`: 5.10:1
722
726
  - `--ws-field-ink` on `--ws-field`: 14.55:1
@@ -724,27 +728,28 @@ tone uses the word token here (D2).
724
728
  - `--ws-word-needs` on `--ws-tint-needs`: 5.11:1
725
729
  - `--ws-word-positive` on `--ws-tint-live`: 4.90:1
726
730
  - `--ws-word-needs-work` on `--ws-tint-needs-work`: 4.80:1
731
+ - `--ws-word-alert` on `--ws-tint-alert`: 6.20:1
727
732
  - `--color-text-success-strong` on `--color-feedback-success-bg`: 5.36:1
728
733
  - `--ws-on-act` on `--ws-agent-tally`: 9.26:1
729
734
 
730
735
 
731
736
  ### Night
732
737
 
733
- | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | success | well hover |
734
- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
735
- | `--color-text-heading` | `#e8edf3` | 15.09 | 14.34 | 13.55 | 12.24 | 13.71 | 16.13 | 12.24 | 15.77 | 12.24 | 14.34 | 12.61 | 12.73 | 12.94 | 13.04 | 15.64 | 14.64 | 12.24 | 14.34 | 11.55 | 12.08 | 10.62 |
736
- | `--color-text-body` | `#b0bbc7` | 9.12 | 8.66 | 8.19 | 7.39 | 8.29 | 9.74 | 7.39 | 9.53 | 7.39 | 8.66 | 7.62 | 7.69 | 7.82 | 7.88 | 9.45 | 8.85 | 7.39 | 8.66 | 6.98 | 7.30 | 6.42 |
737
- | `--color-text-muted` | `#8494a5` | 5.72 | 5.43 | 5.14 | 4.64 | 5.20 | 6.11 | 4.64 | 5.98 | 4.64 | 5.43 | 4.78 | 4.83 | 4.90 | 4.94 | 5.93 | 5.55 | 4.64 | 5.43 | 4.38 (fails) | 4.58 | 4.03 (fails) |
738
- | `--color-text-interactive` | `#93a6dc` | 7.38 | 7.02 | 6.63 | 5.99 | 6.71 | 7.89 | 5.99 | 7.72 | 5.99 | 7.02 | 6.17 | 6.23 | 6.33 | 6.38 | 7.65 | 7.16 | 5.99 | 7.02 | 5.65 | 5.91 | 5.20 |
739
- | `--color-text-brand-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.24 | 5.49 |
740
- | `--color-text-error-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.24 | 5.49 |
741
- | `--color-text-success-strong` | `#9bcf72` | 9.78 | 9.29 | 8.78 | 7.93 | 8.89 | 10.45 | 7.93 | 10.22 | 7.93 | 9.29 | 8.18 | 8.25 | 8.38 | 8.45 | 10.14 | 9.49 | 7.93 | 9.29 | 7.49 | 7.83 | 6.89 |
742
- | `--ws-word-needs` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.24 | 5.49 |
743
- | `--ws-word-positive` | `#4fc7be` | 8.66 | 8.24 | 7.78 | 7.03 | 7.88 | 9.26 | 7.03 | 9.06 | 7.03 | 8.24 | 7.24 | 7.31 | 7.43 | 7.49 | 8.98 | 8.41 | 7.03 | 8.24 | 6.63 | 6.94 | 6.10 |
744
- | `--ws-word-needs-work` | `#f370a4` | 6.48 | 6.16 | 5.82 | 5.26 | 5.89 | 6.93 | 5.26 | 6.78 | 5.26 | 6.16 | 5.42 | 5.47 | 5.56 | 5.60 | 6.72 | 6.29 | 5.26 | 6.16 | 4.96 | 5.19 | 4.57 |
745
- | `--ws-word-alert` | `#ff5470` | 5.71 | 5.43 | 5.13 | 4.63 | 5.19 | 6.11 | 4.63 | 5.97 | 4.63 | 5.43 | 4.78 | 4.82 | 4.90 | 4.94 | 5.92 | 5.54 | 4.63 | 5.43 | 4.37 (fails) | 4.57 | 4.02 (fails) |
746
- | `--ws-word-past-half` | `#9a84ee` | 5.84 | 5.55 | 5.25 | 4.74 | 5.31 | 6.25 | 4.74 | 6.11 | 4.74 | 5.55 | 4.89 | 4.93 | 5.01 | 5.05 | 6.06 | 5.67 | 4.74 | 5.55 | 4.47 (fails) | 4.68 | 4.12 (fails) |
747
- | `--ws-word-answer` | `#c9d1db` | 11.52 | 10.95 | 10.35 | 9.35 | 10.48 | 12.32 | 9.35 | 12.05 | 9.35 | 10.95 | 9.64 | 9.73 | 9.88 | 9.96 | 11.95 | 11.18 | 9.35 | 10.95 | 8.82 | 9.23 | 8.12 |
738
+ | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | alert tint | success | well hover |
739
+ | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
740
+ | `--color-text-heading` | `#e8edf3` | 15.09 | 14.34 | 13.55 | 12.24 | 13.71 | 16.13 | 12.24 | 15.77 | 12.24 | 14.34 | 12.61 | 12.73 | 12.94 | 13.04 | 15.64 | 14.64 | 12.24 | 14.34 | 11.55 | 13.02 | 12.08 | 10.62 |
741
+ | `--color-text-body` | `#b0bbc7` | 9.12 | 8.66 | 8.19 | 7.39 | 8.29 | 9.74 | 7.39 | 9.53 | 7.39 | 8.66 | 7.62 | 7.69 | 7.82 | 7.88 | 9.45 | 8.85 | 7.39 | 8.66 | 6.98 | 7.87 | 7.30 | 6.42 |
742
+ | `--color-text-muted` | `#8494a5` | 5.72 | 5.43 | 5.14 | 4.64 | 5.20 | 6.11 | 4.64 | 5.98 | 4.64 | 5.43 | 4.78 | 4.83 | 4.90 | 4.94 | 5.93 | 5.55 | 4.64 | 5.43 | 4.38 (fails) | 4.93 | 4.58 | 4.03 (fails) |
743
+ | `--color-text-interactive` | `#93a6dc` | 7.38 | 7.02 | 6.63 | 5.99 | 6.71 | 7.89 | 5.99 | 7.72 | 5.99 | 7.02 | 6.17 | 6.23 | 6.33 | 6.38 | 7.65 | 7.16 | 5.99 | 7.02 | 5.65 | 6.37 | 5.91 | 5.20 |
744
+ | `--color-text-brand-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.73 | 6.24 | 5.49 |
745
+ | `--color-text-error-strong` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.73 | 6.24 | 5.49 |
746
+ | `--color-text-success-strong` | `#9bcf72` | 9.78 | 9.29 | 8.78 | 7.93 | 8.89 | 10.45 | 7.93 | 10.22 | 7.93 | 9.29 | 8.18 | 8.25 | 8.38 | 8.45 | 10.14 | 9.49 | 7.93 | 9.29 | 7.49 | 8.44 | 7.83 | 6.89 |
747
+ | `--ws-word-needs` | `#ff8b78` | 7.79 | 7.41 | 7.00 | 6.32 | 7.08 | 8.33 | 6.32 | 8.15 | 6.32 | 7.41 | 6.52 | 6.58 | 6.68 | 6.74 | 8.08 | 7.56 | 6.32 | 7.41 | 5.97 | 6.73 | 6.24 | 5.49 |
748
+ | `--ws-word-positive` | `#4fc7be` | 8.66 | 8.24 | 7.78 | 7.03 | 7.88 | 9.26 | 7.03 | 9.06 | 7.03 | 8.24 | 7.24 | 7.31 | 7.43 | 7.49 | 8.98 | 8.41 | 7.03 | 8.24 | 6.63 | 7.48 | 6.94 | 6.10 |
749
+ | `--ws-word-needs-work` | `#f370a4` | 6.48 | 6.16 | 5.82 | 5.26 | 5.89 | 6.93 | 5.26 | 6.78 | 5.26 | 6.16 | 5.42 | 5.47 | 5.56 | 5.60 | 6.72 | 6.29 | 5.26 | 6.16 | 4.96 | 5.59 | 5.19 | 4.57 |
750
+ | `--ws-word-alert` | `#ff5470` | 5.71 | 5.43 | 5.13 | 4.63 | 5.19 | 6.11 | 4.63 | 5.97 | 4.63 | 5.43 | 4.78 | 4.82 | 4.90 | 4.94 | 5.92 | 5.54 | 4.63 | 5.43 | 4.37 (fails) | 4.93 | 4.57 | 4.02 (fails) |
751
+ | `--ws-word-past-half` | `#9a84ee` | 5.84 | 5.55 | 5.25 | 4.74 | 5.31 | 6.25 | 4.74 | 6.11 | 4.74 | 5.55 | 4.89 | 4.93 | 5.01 | 5.05 | 6.06 | 5.67 | 4.74 | 5.55 | 4.47 (fails) | 5.04 | 4.68 | 4.12 (fails) |
752
+ | `--ws-word-answer` | `#c9d1db` | 11.52 | 10.95 | 10.35 | 9.35 | 10.48 | 12.32 | 9.35 | 12.05 | 9.35 | 10.95 | 9.64 | 9.73 | 9.88 | 9.96 | 11.95 | 11.18 | 9.35 | 10.95 | 8.82 | 9.95 | 9.23 | 8.12 |
748
753
 
749
754
  - `--color-text-placeholder` on `--ws-field`: 5.98:1
750
755
  - `--ws-field-ink` on `--ws-field`: 14.91:1
@@ -752,27 +757,28 @@ tone uses the word token here (D2).
752
757
  - `--ws-word-needs` on `--ws-tint-needs`: 6.52:1
753
758
  - `--ws-word-positive` on `--ws-tint-live`: 7.31:1
754
759
  - `--ws-word-needs-work` on `--ws-tint-needs-work`: 4.96:1
760
+ - `--ws-word-alert` on `--ws-tint-alert`: 4.93:1
755
761
  - `--color-text-success-strong` on `--color-feedback-success-bg`: 7.83:1
756
762
  - `--ws-on-act` on `--ws-agent-tally`: 15.09:1
757
763
 
758
764
 
759
765
  ### Navy ground
760
766
 
761
- | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | success | well hover |
762
- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
763
- | `--color-text-heading` | `#ffffff` | 17.55 | 15.55 | 13.32 | 10.86 | 14.26 | 17.55 | 10.86 | 15.03 | 10.86 | 15.03 | 13.83 | 14.39 | 14.49 | 14.39 | 15.55 | 15.03 | 12.56 | 15.03 | 13.82 | 14.22 | 12.51 |
764
- | `--color-text-body` | `#d3d3d3` | 11.73 | 10.39 | 8.90 | 7.25 | 9.52 | 11.73 | 7.25 | 10.04 | 7.25 | 10.04 | 9.24 | 9.61 | 9.68 | 9.61 | 10.39 | 10.04 | 8.39 | 10.04 | 9.23 | 9.50 | 8.36 |
765
- | `--color-text-muted` | `#a9a9a9` | 7.47 | 6.62 | 5.67 | 4.62 | 6.07 | 7.47 | 4.62 | 6.40 | 4.62 | 6.40 | 5.89 | 6.12 | 6.16 | 6.12 | 6.62 | 6.40 | 5.34 | 6.40 | 5.88 | 6.05 | 5.32 |
766
- | `--color-text-interactive` | `#93a6dc` | 7.30 | 6.46 | 5.54 | 4.51 | 5.93 | 7.30 | 4.51 | 6.25 | 4.51 | 6.25 | 5.75 | 5.98 | 6.02 | 5.98 | 6.46 | 6.25 | 5.22 | 6.25 | 5.74 | 5.91 | 5.20 |
767
- | `--color-text-brand-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.24 | 5.49 |
768
- | `--color-text-error-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.24 | 5.49 |
769
- | `--color-text-success-strong` | `#9bcf72` | 9.66 | 8.56 | 7.33 | 5.98 | 7.85 | 9.66 | 5.98 | 8.28 | 5.98 | 8.28 | 7.62 | 7.92 | 7.98 | 7.92 | 8.56 | 8.28 | 6.91 | 8.28 | 7.61 | 7.83 | 6.89 |
770
- | `--ws-word-needs` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.24 | 5.49 |
771
- | `--ws-word-positive` | `#4fc7be` | 8.56 | 7.59 | 6.50 | 5.30 | 6.96 | 8.56 | 5.30 | 7.33 | 5.30 | 7.33 | 6.75 | 7.02 | 7.07 | 7.02 | 7.59 | 7.33 | 6.13 | 7.33 | 6.74 | 6.94 | 6.10 |
772
- | `--ws-word-needs-work` | `#f583b0` | 7.32 | 6.48 | 5.55 | 4.53 | 5.94 | 7.32 | 4.53 | 6.27 | 4.53 | 6.27 | 5.77 | 6.00 | 6.04 | 6.00 | 6.48 | 6.27 | 5.24 | 6.27 | 5.76 | 5.93 | 5.22 |
773
- | `--ws-word-alert` | `#ff8282` | 7.33 | 6.49 | 5.56 | 4.53 | 5.95 | 7.33 | 4.53 | 6.28 | 4.53 | 6.28 | 5.78 | 6.01 | 6.05 | 6.01 | 6.49 | 6.28 | 5.24 | 6.28 | 5.77 | 5.94 | 5.22 |
774
- | `--ws-word-past-half` | `#ad9bf1` | 7.30 | 6.47 | 5.54 | 4.52 | 5.93 | 7.30 | 4.52 | 6.25 | 4.52 | 6.25 | 5.75 | 5.99 | 6.03 | 5.99 | 6.47 | 6.25 | 5.22 | 6.25 | 5.75 | 5.92 | 5.20 |
775
- | `--ws-word-answer` | `#e9e9e9` | 14.46 | 12.81 | 10.97 | 8.94 | 11.74 | 14.46 | 8.94 | 12.38 | 8.94 | 12.38 | 11.39 | 11.85 | 11.93 | 11.85 | 12.81 | 12.38 | 10.34 | 12.38 | 11.38 | 11.72 | 10.30 |
767
+ | Word | Value | cream | white | plate | tray | raised | shell | press | well | raised sunk | accent tint | needs tint | live tint | blue card | done card | chart foot | sidebar hover | menu hover | stripe | needs-work tint | alert tint | success | well hover |
768
+ | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
769
+ | `--color-text-heading` | `#ffffff` | 17.55 | 15.55 | 13.32 | 10.86 | 14.26 | 17.55 | 10.86 | 15.03 | 10.86 | 15.03 | 13.83 | 14.39 | 14.49 | 14.39 | 15.55 | 15.03 | 12.56 | 15.03 | 13.82 | 14.53 | 14.22 | 12.51 |
770
+ | `--color-text-body` | `#d3d3d3` | 11.73 | 10.39 | 8.90 | 7.25 | 9.52 | 11.73 | 7.25 | 10.04 | 7.25 | 10.04 | 9.24 | 9.61 | 9.68 | 9.61 | 10.39 | 10.04 | 8.39 | 10.04 | 9.23 | 9.71 | 9.50 | 8.36 |
771
+ | `--color-text-muted` | `#a9a9a9` | 7.47 | 6.62 | 5.67 | 4.62 | 6.07 | 7.47 | 4.62 | 6.40 | 4.62 | 6.40 | 5.89 | 6.12 | 6.16 | 6.12 | 6.62 | 6.40 | 5.34 | 6.40 | 5.88 | 6.18 | 6.05 | 5.32 |
772
+ | `--color-text-interactive` | `#93a6dc` | 7.30 | 6.46 | 5.54 | 4.51 | 5.93 | 7.30 | 4.51 | 6.25 | 4.51 | 6.25 | 5.75 | 5.98 | 6.02 | 5.98 | 6.46 | 6.25 | 5.22 | 6.25 | 5.74 | 6.04 | 5.91 | 5.20 |
773
+ | `--color-text-brand-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.38 | 6.24 | 5.49 |
774
+ | `--color-text-error-strong` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.38 | 6.24 | 5.49 |
775
+ | `--color-text-success-strong` | `#9bcf72` | 9.66 | 8.56 | 7.33 | 5.98 | 7.85 | 9.66 | 5.98 | 8.28 | 5.98 | 8.28 | 7.62 | 7.92 | 7.98 | 7.92 | 8.56 | 8.28 | 6.91 | 8.28 | 7.61 | 8.00 | 7.83 | 6.89 |
776
+ | `--ws-word-needs` | `#ff8b78` | 7.70 | 6.83 | 5.84 | 4.76 | 6.26 | 7.70 | 4.76 | 6.60 | 4.76 | 6.60 | 6.07 | 6.31 | 6.36 | 6.31 | 6.83 | 6.60 | 5.51 | 6.60 | 6.06 | 6.38 | 6.24 | 5.49 |
777
+ | `--ws-word-positive` | `#4fc7be` | 8.56 | 7.59 | 6.50 | 5.30 | 6.96 | 8.56 | 5.30 | 7.33 | 5.30 | 7.33 | 6.75 | 7.02 | 7.07 | 7.02 | 7.59 | 7.33 | 6.13 | 7.33 | 6.74 | 7.09 | 6.94 | 6.10 |
778
+ | `--ws-word-needs-work` | `#f583b0` | 7.32 | 6.48 | 5.55 | 4.53 | 5.94 | 7.32 | 4.53 | 6.27 | 4.53 | 6.27 | 5.77 | 6.00 | 6.04 | 6.00 | 6.48 | 6.27 | 5.24 | 6.27 | 5.76 | 6.06 | 5.93 | 5.22 |
779
+ | `--ws-word-alert` | `#ff8282` | 7.33 | 6.49 | 5.56 | 4.53 | 5.95 | 7.33 | 4.53 | 6.28 | 4.53 | 6.28 | 5.78 | 6.01 | 6.05 | 6.01 | 6.49 | 6.28 | 5.24 | 6.28 | 5.77 | 6.07 | 5.94 | 5.22 |
780
+ | `--ws-word-past-half` | `#ad9bf1` | 7.30 | 6.47 | 5.54 | 4.52 | 5.93 | 7.30 | 4.52 | 6.25 | 4.52 | 6.25 | 5.75 | 5.99 | 6.03 | 5.99 | 6.47 | 6.25 | 5.22 | 6.25 | 5.75 | 6.04 | 5.92 | 5.20 |
781
+ | `--ws-word-answer` | `#e9e9e9` | 14.46 | 12.81 | 10.97 | 8.94 | 11.74 | 14.46 | 8.94 | 12.38 | 8.94 | 12.38 | 11.39 | 11.85 | 11.93 | 11.85 | 12.81 | 12.38 | 10.34 | 12.38 | 11.38 | 11.97 | 11.72 | 10.30 |
776
782
 
777
783
  - `--color-text-placeholder` on `--ws-field`: 5.10:1
778
784
  - `--ws-field-ink` on `--ws-field`: 12.71:1
@@ -780,6 +786,7 @@ tone uses the word token here (D2).
780
786
  - `--ws-word-needs` on `--ws-tint-needs`: 6.07:1
781
787
  - `--ws-word-positive` on `--ws-tint-live`: 7.02:1
782
788
  - `--ws-word-needs-work` on `--ws-tint-needs-work`: 5.76:1
789
+ - `--ws-word-alert` on `--ws-tint-alert`: 6.07:1
783
790
  - `--color-text-success-strong` on `--color-feedback-success-bg`: 7.83:1
784
791
  - `--ws-on-act` on `--ws-agent-tally`: 17.55:1
785
792
 
package/tokens/tokens.root.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Generated by scripts/generate-tokens.mjs. Do not edit.
2
2
  Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
3
3
  tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
4
- 422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
4
+ 424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
5
5
 
6
6
  :root {
7
7
  --color-brand-salmon: #FF725C;
@@ -121,6 +121,7 @@
121
121
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
122
122
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
123
123
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
124
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface));
124
125
  --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
125
126
  --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
126
127
  --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
@@ -242,6 +243,7 @@
242
243
  --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
243
244
  --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
244
245
  --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
246
+ --ws-shadow-rise: var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
245
247
  --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent);
246
248
  --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
247
249
  --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
@@ -460,6 +462,7 @@
460
462
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
461
463
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
462
464
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
465
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface));
463
466
  --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
464
467
  --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
465
468
  --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
@@ -521,6 +524,7 @@
521
524
  --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
522
525
  --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
523
526
  --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
527
+ --ws-shadow-rise: var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
524
528
  --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent);
525
529
  --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
526
530
  --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
@@ -617,6 +621,7 @@
617
621
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
618
622
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
619
623
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
624
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface));
620
625
  --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
621
626
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
622
627
  --ws-track: var(--ws-tray);
@@ -727,6 +732,7 @@
727
732
  --ws-tint-accent: var(--color-surface);
728
733
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
729
734
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
735
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
730
736
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
731
737
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
732
738
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -833,6 +839,7 @@
833
839
  --ws-tint-accent: var(--color-surface);
834
840
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
835
841
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
842
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
836
843
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
837
844
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
838
845
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -940,6 +947,7 @@
940
947
  --ws-tint-accent: var(--color-surface);
941
948
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
942
949
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
950
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
943
951
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
944
952
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
945
953
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -1046,6 +1054,7 @@
1046
1054
  --ws-tint-accent: var(--color-surface);
1047
1055
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
1048
1056
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
1057
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page));
1049
1058
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
1050
1059
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
1051
1060
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -1264,6 +1273,7 @@
1264
1273
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1265
1274
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1266
1275
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1276
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1267
1277
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1268
1278
  --ws-card-tint-done: var(--ws-tint-live);
1269
1279
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1306,6 +1316,7 @@
1306
1316
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1307
1317
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1308
1318
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1319
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1309
1320
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1310
1321
  --ws-card-tint-done: var(--ws-tint-live);
1311
1322
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1344,6 +1355,7 @@
1344
1355
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1345
1356
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1346
1357
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1358
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1347
1359
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1348
1360
  --ws-card-tint-done: var(--ws-tint-live);
1349
1361
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1386,6 +1398,7 @@
1386
1398
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1387
1399
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1388
1400
  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1401
+ --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page));
1389
1402
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1390
1403
  --ws-card-tint-done: var(--ws-tint-live);
1391
1404
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
package/tokens/tokens.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Generated by scripts/generate-tokens.mjs. Do not edit.
2
2
  Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
3
3
  tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
4
- 422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
4
+ 424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
5
5
 
6
6
  export const tokens = {
7
7
  "--color-brand-salmon": "#FF725C",
@@ -127,6 +127,7 @@ export const tokens = {
127
127
  "--ws-tint-accent": "color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c)",
128
128
  "--ws-tint-needs": "color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface))",
129
129
  "--ws-tint-live": "color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface))",
130
+ "--ws-tint-alert": "color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface))",
130
131
  "--ws-edge": "var(--color-gray-stroke)",
131
132
  "--ws-edge-card": "var(--color-gray-3)",
132
133
  "--ws-edge-card-1x": "color-mix(in srgb, var(--ws-edge-card) 50%, transparent)",
@@ -274,6 +275,7 @@ export const tokens = {
274
275
  "--ws-shadow-menu": "var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)",
275
276
  "--ws-shadow-tip": "var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent)",
276
277
  "--ws-shadow-float": "var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent)",
278
+ "--ws-shadow-rise": "var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)",
277
279
  "--ws-shadow-bar": "var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent)",
278
280
  "--ws-hover-faint": "color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent)",
279
281
  "--ws-hover": "color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent)",
@@ -559,6 +561,7 @@ export const themes = {
559
561
  "--ws-tint-accent": "#f7f4f4",
560
562
  "--ws-tint-needs": "#fff1ef",
561
563
  "--ws-tint-live": "#e1f0f0",
564
+ "--ws-tint-alert": "#f9ebee",
562
565
  "--ws-edge": "#e8e8e8",
563
566
  "--ws-edge-card": "#d3d3d3",
564
567
  "--ws-edge-card-1x": "rgba(211, 211, 211, 0.5)",
@@ -706,6 +709,7 @@ export const themes = {
706
709
  "--ws-shadow-menu": "0 0 0 0 transparent, 0 16px 32px -16px rgba(9, 53, 85, 0.35)",
707
710
  "--ws-shadow-tip": "0 0 0 0 transparent, 0 16px 32px -20px rgba(9, 53, 85, 0.45)",
708
711
  "--ws-shadow-float": "0 0 0 0 transparent, 0 40px 80px -30px rgba(9, 53, 85, 0.3), 0 10px 24px -12px rgba(9, 53, 85, 0.14)",
712
+ "--ws-shadow-rise": "0 0 0 0 transparent, 0 -16px 32px -16px rgba(9, 53, 85, 0.35)",
709
713
  "--ws-shadow-bar": "0 0 0 0 transparent, 0 24px 60px -24px rgba(9, 53, 85, 0.32), 0 2px 10px rgba(9, 53, 85, 0.06)",
710
714
  "--ws-hover-faint": "rgba(9, 53, 85, 0.031)",
711
715
  "--ws-hover": "rgba(9, 53, 85, 0.051)",
@@ -983,6 +987,7 @@ export const themes = {
983
987
  "--ws-tint-accent": "#131e28",
984
988
  "--ws-tint-needs": "#2e252a",
985
989
  "--ws-tint-live": "#112a32",
990
+ "--ws-tint-alert": "#2e212c",
986
991
  "--ws-edge": "#1e2a36",
987
992
  "--ws-edge-card": "#273544",
988
993
  "--ws-edge-card-1x": "#273544",
@@ -1130,6 +1135,7 @@ export const themes = {
1130
1135
  "--ws-shadow-menu": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 16px 32px -16px rgba(0, 0, 0, 0.35)",
1131
1136
  "--ws-shadow-tip": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 16px 32px -20px rgba(0, 0, 0, 0.45)",
1132
1137
  "--ws-shadow-float": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(0, 0, 0, 0.14)",
1138
+ "--ws-shadow-rise": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 -16px 32px -16px rgba(0, 0, 0, 0.35)",
1133
1139
  "--ws-shadow-bar": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 24px 60px -24px rgba(0, 0, 0, 0.32), 0 2px 10px rgba(0, 0, 0, 0.06)",
1134
1140
  "--ws-hover-faint": "rgba(232, 237, 243, 0.031)",
1135
1141
  "--ws-hover": "rgba(232, 237, 243, 0.051)",
@@ -1407,6 +1413,7 @@ export const themes = {
1407
1413
  "--ws-tint-accent": "#11283e",
1408
1414
  "--ws-tint-needs": "#302a3a",
1409
1415
  "--ws-tint-live": "#062d41",
1416
+ "--ws-tint-alert": "#30243d",
1410
1417
  "--ws-edge": "rgba(255, 255, 255, 0.1)",
1411
1418
  "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
1412
1419
  "--ws-edge-card-1x": "rgba(255, 255, 255, 0.18)",
@@ -1554,6 +1561,7 @@ export const themes = {
1554
1561
  "--ws-shadow-menu": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 16px 32px -16px rgba(0, 0, 0, 0.35)",
1555
1562
  "--ws-shadow-tip": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 16px 32px -20px rgba(0, 0, 0, 0.45)",
1556
1563
  "--ws-shadow-float": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(0, 0, 0, 0.14)",
1564
+ "--ws-shadow-rise": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 -16px 32px -16px rgba(0, 0, 0, 0.35)",
1557
1565
  "--ws-shadow-bar": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 24px 60px -24px rgba(0, 0, 0, 0.32), 0 2px 10px rgba(0, 0, 0, 0.06)",
1558
1566
  "--ws-hover-faint": "rgba(255, 255, 255, 0.031)",
1559
1567
  "--ws-hover": "rgba(255, 255, 255, 0.051)",