@felloinnovations/brand-kit 0.5.0 → 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 (124) hide show
  1. package/AGENTS.md +29 -9
  2. package/CHANGELOG.md +110 -0
  3. package/README.md +14 -6
  4. package/design-system/01-how-claude-decides.md +5 -3
  5. package/design-system/03-colour.md +22 -3
  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 +7 -4
  9. package/design-system/10-patterns.md +1 -1
  10. package/design-system/11-page-recipes.md +40 -1
  11. package/design-system/13-motion.md +4 -4
  12. package/design-system/15-ai-experiences.md +11 -0
  13. package/design-system/17-decisions.md +51 -0
  14. package/design-system/components/AppShell/README.md +89 -21
  15. package/design-system/components/AppShell/preview.html +148 -3
  16. package/design-system/components/AppShell/style.css +47 -0
  17. package/design-system/components/Avatar/README.md +6 -3
  18. package/design-system/components/Avatar/preview.html +2 -1
  19. package/design-system/components/Avatar/style.css +3 -0
  20. package/design-system/components/Banner/README.md +9 -5
  21. package/design-system/components/Banner/preview.html +9 -0
  22. package/design-system/components/Banner/style.css +3 -0
  23. package/design-system/components/Button/README.md +29 -2
  24. package/design-system/components/Button/preview.html +33 -1
  25. package/design-system/components/Button/style.css +21 -0
  26. package/design-system/components/Calendar/README.md +148 -0
  27. package/design-system/components/Calendar/preview.html +449 -0
  28. package/design-system/components/Calendar/style.css +61 -0
  29. package/design-system/components/Card/README.md +13 -0
  30. package/design-system/components/Card/preview.html +23 -0
  31. package/design-system/components/Card/style.css +19 -0
  32. package/design-system/components/ChatCard/README.md +74 -3
  33. package/design-system/components/ChatCard/preview.html +126 -25
  34. package/design-system/components/ChatCard/style.css +6 -0
  35. package/design-system/components/CheckRow/README.md +1 -1
  36. package/design-system/components/CheckRow/preview.html +1 -1
  37. package/design-system/components/CheckRow/style.css +1 -1
  38. package/design-system/components/Chip/README.md +16 -7
  39. package/design-system/components/Chip/preview.html +25 -1
  40. package/design-system/components/Chip/style.css +5 -0
  41. package/design-system/components/Combobox/README.md +10 -4
  42. package/design-system/components/Combobox/preview.html +19 -4
  43. package/design-system/components/Combobox/style.css +7 -1
  44. package/design-system/components/CommentThread/README.md +138 -0
  45. package/design-system/components/CommentThread/preview.html +134 -0
  46. package/design-system/components/CommentThread/style.css +41 -0
  47. package/design-system/components/DateInput/README.md +38 -4
  48. package/design-system/components/DateInput/preview.html +50 -2
  49. package/design-system/components/DateInput/style.css +6 -0
  50. package/design-system/components/Dialog/README.md +26 -3
  51. package/design-system/components/Dialog/preview.html +80 -0
  52. package/design-system/components/Dialog/style.css +28 -3
  53. package/design-system/components/EmptyState/README.md +1 -1
  54. package/design-system/components/Fold/README.md +21 -0
  55. package/design-system/components/Fold/preview.html +44 -1
  56. package/design-system/components/Fold/style.css +30 -0
  57. package/design-system/components/InlineEdit/README.md +116 -0
  58. package/design-system/components/InlineEdit/preview.html +135 -0
  59. package/design-system/components/InlineEdit/style.css +34 -0
  60. package/design-system/components/Input/README.md +20 -1
  61. package/design-system/components/Input/preview.html +24 -0
  62. package/design-system/components/Input/style.css +13 -1
  63. package/design-system/components/KanbanBoard/README.md +69 -5
  64. package/design-system/components/KanbanBoard/preview.html +129 -0
  65. package/design-system/components/KanbanBoard/style.css +32 -1
  66. package/design-system/components/ListDetail/preview.html +1 -1
  67. package/design-system/components/Matrix/README.md +1 -1
  68. package/design-system/components/Matrix/preview.html +1 -1
  69. package/design-system/components/Motion/README.md +2 -2
  70. package/design-system/components/Motion/preview.html +8 -8
  71. package/design-system/components/PlanTimeline/README.md +144 -0
  72. package/design-system/components/PlanTimeline/preview.html +109 -0
  73. package/design-system/components/PlanTimeline/style.css +64 -0
  74. package/design-system/components/README.md +12 -7
  75. package/design-system/components/ScoreHero/README.md +2 -2
  76. package/design-system/components/ScoreHero/style.css +1 -1
  77. package/design-system/components/ShareBar/README.md +1 -1
  78. package/design-system/components/ShareBar/style.css +1 -1
  79. package/design-system/components/Skeleton/README.md +82 -17
  80. package/design-system/components/Skeleton/preview.html +84 -2
  81. package/design-system/components/Skeleton/style.css +9 -14
  82. package/design-system/components/Starter/README.md +1 -1
  83. package/design-system/components/Starter/preview.html +1 -1
  84. package/design-system/components/Stepper/README.md +81 -5
  85. package/design-system/components/Stepper/preview.html +64 -1
  86. package/design-system/components/Stepper/style.css +29 -0
  87. package/design-system/components/StreakCalendar/README.md +1 -0
  88. package/design-system/components/Table/README.md +8 -4
  89. package/design-system/components/Table/preview.html +16 -1
  90. package/design-system/components/Table/style.css +3 -1
  91. package/design-system/components/TextDiff/README.md +96 -0
  92. package/design-system/components/TextDiff/preview.html +42 -0
  93. package/design-system/components/TextDiff/style.css +21 -0
  94. package/design-system/components/TickStrip/README.md +1 -1
  95. package/design-system/components/TickStrip/preview.html +1 -1
  96. package/design-system/components/TickStrip/style.css +1 -1
  97. package/design-system/components/Timeline/README.md +4 -2
  98. package/design-system/components/TrendLine/README.md +38 -7
  99. package/design-system/components/TrendLine/preview.html +140 -3
  100. package/design-system/components/TrendLine/style.css +12 -2
  101. package/design-system/components/Well/README.md +1 -1
  102. package/design-system/components/Well/style.css +2 -2
  103. package/design-system/components/_house.css +1 -1
  104. package/design-system/components/bundle.css +501 -30
  105. package/design-system/tokens.json +17 -7
  106. package/dist/fello-core.css +2 -2
  107. package/dist/fello.css +2 -2
  108. package/dist/fello.scoped.css +2 -2
  109. package/dist/index.d.ts +1 -1
  110. package/dist/scoped.js +2 -2
  111. package/dist/tokens.d.ts +16 -8
  112. package/dist/tokens.js +16 -8
  113. package/package.json +7 -2
  114. package/scripts/check-drift.mjs +325 -0
  115. package/scripts/token-model.mjs +2 -1
  116. package/tokens/_dark.css +3 -2
  117. package/tokens/_product.css +13 -11
  118. package/tokens/palettes.ts +1 -1
  119. package/tokens/shadcn-compat.css +1 -1
  120. package/tokens/shadcn-compat.hsl.css +1 -1
  121. package/tokens/tokens.css +23 -15
  122. package/tokens/tokens.md +56 -50
  123. package/tokens/tokens.root.css +23 -15
  124. package/tokens/tokens.ts +17 -9
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: 99 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);
@@ -168,8 +169,8 @@
168
169
  --ws-chart-past-half-tint: #cbbdf3;
169
170
  --ws-chart-under-half-tint: #f9dfc6;
170
171
  --ws-chart-cell-edge: var(--ws-edge-slot);
171
- --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
172
- --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
172
+ --ws-shimmer-ground: var(--ws-ghost);
173
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%);
173
174
  --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
174
175
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
175
176
  --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
@@ -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);
@@ -499,8 +502,8 @@
499
502
  --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235));
500
503
  --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5));
501
504
  --ws-chart-cell-edge: var(--ws-edge-slot);
502
- --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
503
- --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
505
+ --ws-shimmer-ground: var(--ws-ghost);
506
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%);
504
507
  --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
505
508
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
506
509
  --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
@@ -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);
@@ -665,12 +670,11 @@
665
670
  --ws-float-rim: 0 0 0 0 transparent;
666
671
  --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
667
672
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
668
- --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
669
673
  --ws-raised-sunk: var(--ws-surface-sunk);
670
674
  --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
671
675
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
672
676
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
673
- --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
677
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%);
674
678
  --ws-inverse: var(--color-text-heading);
675
679
  --ws-on-inverse: var(--ws-on-act);
676
680
  --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
@@ -728,6 +732,7 @@
728
732
  --ws-tint-accent: var(--color-surface);
729
733
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
730
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));
731
736
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
732
737
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
733
738
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -796,7 +801,6 @@
796
801
  --ws-chart-alert: #FF5470;
797
802
  --ws-word-needs-work: var(--ws-chart-needs-work);
798
803
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
799
- --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
800
804
  --ws-rating-middle: var(--color-text-interactive);
801
805
  --ws-raised-sunk: var(--ws-surface-press);
802
806
  --ws-edge-hover: var(--color-text-muted);
@@ -805,7 +809,7 @@
805
809
  --ws-agent-tally: var(--color-text-heading);
806
810
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
807
811
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
808
- --ws-shimmer-ground: var(--ws-track);
812
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
809
813
  --ws-inverse: var(--color-bg-dark);
810
814
  --ws-on-inverse: var(--color-white);
811
815
  --ws-chart-rest: var(--ws-edge-card);
@@ -835,6 +839,7 @@
835
839
  --ws-tint-accent: var(--color-surface);
836
840
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
837
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));
838
843
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
839
844
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
840
845
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -883,12 +888,11 @@
883
888
  --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
884
889
  --ws-word-needs-work: var(--ws-chart-needs-work);
885
890
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
886
- --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
887
891
  --ws-raised-sunk: var(--ws-surface-press);
888
892
  --ws-act-light: transparent;
889
893
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
890
894
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
891
- --ws-shimmer-ground: var(--ws-track);
895
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
892
896
  --ws-inverse: var(--color-bg-dark);
893
897
  --ws-on-inverse: var(--color-white);
894
898
  --ws-chart-rest: var(--ws-edge-card);
@@ -943,6 +947,7 @@
943
947
  --ws-tint-accent: var(--color-surface);
944
948
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
945
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));
946
951
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
947
952
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
948
953
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -1011,7 +1016,6 @@
1011
1016
  --ws-chart-alert: #FF5470;
1012
1017
  --ws-word-needs-work: var(--ws-chart-needs-work);
1013
1018
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
1014
- --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
1015
1019
  --ws-rating-middle: var(--color-text-interactive);
1016
1020
  --ws-raised-sunk: var(--ws-surface-press);
1017
1021
  --ws-edge-hover: var(--color-text-muted);
@@ -1020,7 +1024,7 @@
1020
1024
  --ws-agent-tally: var(--color-text-heading);
1021
1025
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
1022
1026
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
1023
- --ws-shimmer-ground: var(--ws-track);
1027
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
1024
1028
  --ws-inverse: var(--color-bg-dark);
1025
1029
  --ws-on-inverse: var(--color-white);
1026
1030
  --ws-chart-rest: var(--ws-edge-card);
@@ -1050,6 +1054,7 @@
1050
1054
  --ws-tint-accent: var(--color-surface);
1051
1055
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
1052
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));
1053
1058
  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
1054
1059
  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
1055
1060
  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
@@ -1098,12 +1103,11 @@
1098
1103
  --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
1099
1104
  --ws-word-needs-work: var(--ws-chart-needs-work);
1100
1105
  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
1101
- --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
1102
1106
  --ws-raised-sunk: var(--ws-surface-press);
1103
1107
  --ws-act-light: transparent;
1104
1108
  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
1105
1109
  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
1106
- --ws-shimmer-ground: var(--ws-track);
1110
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
1107
1111
  --ws-inverse: var(--color-bg-dark);
1108
1112
  --ws-on-inverse: var(--color-white);
1109
1113
  --ws-chart-rest: var(--ws-edge-card);
@@ -1269,6 +1273,7 @@
1269
1273
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1270
1274
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1271
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));
1272
1277
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1273
1278
  --ws-card-tint-done: var(--ws-tint-live);
1274
1279
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1311,6 +1316,7 @@
1311
1316
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1312
1317
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1313
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));
1314
1320
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1315
1321
  --ws-card-tint-done: var(--ws-tint-live);
1316
1322
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1349,6 +1355,7 @@
1349
1355
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1350
1356
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1351
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));
1352
1359
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1353
1360
  --ws-card-tint-done: var(--ws-tint-live);
1354
1361
  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
@@ -1391,6 +1398,7 @@
1391
1398
  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1392
1399
  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1393
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));
1394
1402
  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1395
1403
  --ws-card-tint-done: var(--ws-tint-live);
1396
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: 99 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)",
@@ -200,8 +201,8 @@ export const tokens = {
200
201
  "--ws-rating-strong": "var(--color-stat-positive)",
201
202
  "--ws-rating-middle": "var(--color-brand-mid-blue)",
202
203
  "--ws-rating-needs-work": "var(--ws-chart-needs-work)",
203
- "--ws-shimmer-ground": "color-mix(in srgb, var(--ws-tray) 96%, #d4700c)",
204
- "--ws-shimmer": "linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%)",
204
+ "--ws-shimmer-ground": "var(--ws-ghost)",
205
+ "--ws-shimmer": "linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%)",
205
206
  "--ws-card-tint-blue": "color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface))",
206
207
  "--ws-card-tint-done": "color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface))",
207
208
  "--ws-scrim": "color-mix(in srgb, var(--color-text-heading) 35%, 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)",
@@ -632,8 +635,8 @@ export const themes = {
632
635
  "--ws-rating-strong": "#098486",
633
636
  "--ws-rating-middle": "#495883",
634
637
  "--ws-rating-needs-work": "#f370a4",
635
- "--ws-shimmer-ground": "#ece8e4",
636
- "--ws-shimmer": "linear-gradient(100deg in srgb, #ece8e4 0 34%, #f6ddd8 44%, #e4dcf3 50%, #d6eaea 56%, #ece8e4 66% 100%)",
638
+ "--ws-shimmer-ground": "#e3dfdb",
639
+ "--ws-shimmer": "linear-gradient(100deg in srgb, #e3dfdb 0 34%, #f6f3f0 50%, #e3dfdb 66% 100%)",
637
640
  "--ws-card-tint-blue": "#edeef3",
638
641
  "--ws-card-tint-done": "#e6f3f3",
639
642
  "--ws-scrim": "rgba(9, 53, 85, 0.35)",
@@ -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",
@@ -1056,8 +1061,8 @@ export const themes = {
1056
1061
  "--ws-rating-strong": "#3bb8b2",
1057
1062
  "--ws-rating-middle": "#93a6dc",
1058
1063
  "--ws-rating-needs-work": "#f370a4",
1059
- "--ws-shimmer-ground": "#1a2631",
1060
- "--ws-shimmer": "linear-gradient(100deg, #1a2631 0 34%, #3a3137 44%, #2c334b 50%, #1f3a43 56%, #1a2631 66% 100%)",
1064
+ "--ws-shimmer-ground": "#273544",
1065
+ "--ws-shimmer": "linear-gradient(100deg in srgb, #273544 0 34%, #354250 50%, #273544 66% 100%)",
1061
1066
  "--ws-card-tint-blue": "#1b2637",
1062
1067
  "--ws-card-tint-done": "rgba(17, 40, 47, 1)",
1063
1068
  "--ws-scrim": "rgba(2, 6, 10, 0.62)",
@@ -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)",
@@ -1480,8 +1487,8 @@ export const themes = {
1480
1487
  "--ws-rating-strong": "#3bb8b2",
1481
1488
  "--ws-rating-middle": "#93a6dc",
1482
1489
  "--ws-rating-needs-work": "#f370a4",
1483
- "--ws-shimmer-ground": "#20354b",
1484
- "--ws-shimmer": "linear-gradient(100deg, #20354b 0 34%, #3f3e4d 44%, #314062 50%, #244759 56%, #20354b 66% 100%)",
1490
+ "--ws-shimmer-ground": "#273544",
1491
+ "--ws-shimmer": "linear-gradient(100deg in srgb, #273544 0 34%, #364351 50%, #273544 66% 100%)",
1485
1492
  "--ws-card-tint-blue": "#142a46",
1486
1493
  "--ws-card-tint-done": "#062d41",
1487
1494
  "--ws-scrim": "rgba(0, 8, 15, 0.62)",
@@ -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)",