@felloinnovations/brand-kit 0.4.0 → 0.5.1

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 (363) hide show
  1. package/AGENTS.md +198 -24
  2. package/CHANGELOG.md +221 -0
  3. package/README.md +38 -9
  4. package/design-system/01-how-claude-decides.md +26 -17
  5. package/design-system/02-principles.md +11 -6
  6. package/design-system/03-colour.md +135 -47
  7. package/design-system/04-type.md +45 -23
  8. package/design-system/05-space-and-layout.md +175 -52
  9. package/design-system/06-sizing-profiles.md +4 -4
  10. package/design-system/07-scrolling.md +66 -20
  11. package/design-system/08-choosing-components.md +50 -22
  12. package/design-system/09-charts.md +71 -28
  13. package/design-system/10-patterns.md +33 -10
  14. package/design-system/11-page-recipes.md +110 -23
  15. package/design-system/12-content.md +2 -1
  16. package/design-system/13-motion.md +330 -47
  17. package/design-system/14-accessibility.md +47 -24
  18. package/design-system/15-ai-experiences.md +11 -6
  19. package/design-system/16-creativity.md +1 -1
  20. package/design-system/17-decisions.md +367 -1
  21. package/design-system/18-checklist.md +79 -16
  22. package/design-system/19-public-pages.md +6 -4
  23. package/design-system/20-palettes.md +275 -0
  24. package/design-system/README.md +30 -17
  25. package/design-system/components/ActionList/README.md +96 -10
  26. package/design-system/components/ActionList/preview.html +52 -7
  27. package/design-system/components/ActionList/style.css +64 -0
  28. package/design-system/components/ActivityGrid/README.md +38 -2
  29. package/design-system/components/ActivityGrid/preview.html +1 -1
  30. package/design-system/components/ActivityGrid/style.css +35 -0
  31. package/design-system/components/AppShell/README.md +205 -75
  32. package/design-system/components/AppShell/preview.html +339 -58
  33. package/design-system/components/AppShell/style.css +154 -0
  34. package/design-system/components/Avatar/README.md +37 -10
  35. package/design-system/components/Avatar/preview.html +13 -4
  36. package/design-system/components/Avatar/style.css +14 -0
  37. package/design-system/components/Badge/README.md +41 -19
  38. package/design-system/components/Badge/preview.html +13 -10
  39. package/design-system/components/Badge/style.css +23 -0
  40. package/design-system/components/Banner/README.md +30 -9
  41. package/design-system/components/Banner/preview.html +1 -1
  42. package/design-system/components/Banner/style.css +19 -0
  43. package/design-system/components/Breadcrumb/README.md +58 -46
  44. package/design-system/components/Breadcrumb/preview.html +16 -16
  45. package/design-system/components/Breadcrumb/style.css +17 -0
  46. package/design-system/components/Button/README.md +113 -55
  47. package/design-system/components/Button/preview.html +98 -25
  48. package/design-system/components/Button/style.css +86 -0
  49. package/design-system/components/Card/README.md +158 -49
  50. package/design-system/components/Card/preview.html +141 -19
  51. package/design-system/components/Card/style.css +115 -0
  52. package/design-system/components/CardBoard/README.md +58 -37
  53. package/design-system/components/CardBoard/preview.html +26 -29
  54. package/design-system/components/ChatCard/README.md +115 -29
  55. package/design-system/components/ChatCard/preview.html +149 -32
  56. package/design-system/components/ChatCard/style.css +49 -0
  57. package/design-system/components/ChatShell/README.md +116 -0
  58. package/design-system/components/ChatShell/preview.html +201 -0
  59. package/design-system/components/ChatShell/style.css +86 -0
  60. package/design-system/components/ChatTurn/README.md +78 -35
  61. package/design-system/components/ChatTurn/preview.html +60 -28
  62. package/design-system/components/ChatTurn/style.css +50 -0
  63. package/design-system/components/CheckRow/README.md +141 -0
  64. package/design-system/components/CheckRow/preview.html +140 -0
  65. package/design-system/components/CheckRow/style.css +88 -0
  66. package/design-system/components/Checkbox/README.md +58 -22
  67. package/design-system/components/Checkbox/preview.html +112 -50
  68. package/design-system/components/Checkbox/style.css +45 -0
  69. package/design-system/components/Chip/README.md +78 -47
  70. package/design-system/components/Chip/preview.html +29 -4
  71. package/design-system/components/Chip/style.css +17 -0
  72. package/design-system/components/Combobox/README.md +44 -11
  73. package/design-system/components/Combobox/preview.html +35 -12
  74. package/design-system/components/Combobox/style.css +54 -0
  75. package/design-system/components/Composer/README.md +137 -35
  76. package/design-system/components/Composer/preview.html +115 -40
  77. package/design-system/components/Composer/style.css +81 -0
  78. package/design-system/components/ConfirmDialog/README.md +73 -52
  79. package/design-system/components/ConfirmDialog/preview.html +70 -26
  80. package/design-system/components/ConfirmDialog/style.css +5 -0
  81. package/design-system/components/Cover/preview.html +3 -3
  82. package/design-system/components/Cover/style.css +19 -0
  83. package/design-system/components/DateInput/README.md +77 -12
  84. package/design-system/components/DateInput/preview.html +27 -12
  85. package/design-system/components/DateInput/style.css +38 -0
  86. package/design-system/components/Dialog/README.md +112 -44
  87. package/design-system/components/Dialog/preview.html +141 -18
  88. package/design-system/components/Dialog/style.css +74 -0
  89. package/design-system/components/EmptyState/README.md +42 -12
  90. package/design-system/components/EmptyState/preview.html +11 -11
  91. package/design-system/components/EmptyState/style.css +9 -0
  92. package/design-system/components/EntryShell/README.md +73 -48
  93. package/design-system/components/EntryShell/preview.html +60 -27
  94. package/design-system/components/EntryShell/style.css +19 -0
  95. package/design-system/components/FeatureGrid/README.md +61 -39
  96. package/design-system/components/FeatureGrid/preview.html +2 -2
  97. package/design-system/components/FeatureGrid/style.css +20 -0
  98. package/design-system/components/FileUpload/README.md +33 -3
  99. package/design-system/components/FileUpload/preview.html +18 -4
  100. package/design-system/components/FileUpload/style.css +23 -0
  101. package/design-system/components/FilterBar/README.md +114 -0
  102. package/design-system/components/FilterBar/preview.html +82 -0
  103. package/design-system/components/FilterBar/style.css +22 -0
  104. package/design-system/components/Fold/README.md +84 -26
  105. package/design-system/components/Fold/preview.html +77 -34
  106. package/design-system/components/Fold/style.css +48 -0
  107. package/design-system/components/Footer/README.md +62 -39
  108. package/design-system/components/Footer/preview.html +5 -5
  109. package/design-system/components/Footer/style.css +30 -0
  110. package/design-system/components/FunnelBars/README.md +24 -3
  111. package/design-system/components/FunnelBars/preview.html +5 -5
  112. package/design-system/components/FunnelBars/style.css +13 -0
  113. package/design-system/components/GoalBars/README.md +54 -10
  114. package/design-system/components/GoalBars/preview.html +69 -28
  115. package/design-system/components/GoalBars/style.css +51 -0
  116. package/design-system/components/GoalTicks/README.md +74 -58
  117. package/design-system/components/GoalTicks/preview.html +41 -118
  118. package/design-system/components/GoalTicks/style.css +37 -0
  119. package/design-system/components/GoalTubes/README.md +29 -3
  120. package/design-system/components/GoalTubes/preview.html +6 -6
  121. package/design-system/components/GoalTubes/style.css +23 -0
  122. package/design-system/components/Heatmap/README.md +133 -0
  123. package/design-system/components/Heatmap/preview.html +168 -0
  124. package/design-system/components/Heatmap/style.css +119 -0
  125. package/design-system/components/Hero/README.md +58 -40
  126. package/design-system/components/Hero/preview.html +1 -1
  127. package/design-system/components/Hero/style.css +19 -0
  128. package/design-system/components/HoverCard/README.md +114 -0
  129. package/design-system/components/HoverCard/preview.html +107 -0
  130. package/design-system/components/HoverCard/style.css +59 -0
  131. package/design-system/components/IconButton/README.md +69 -38
  132. package/design-system/components/IconButton/preview.html +77 -43
  133. package/design-system/components/IconButton/style.css +45 -0
  134. package/design-system/components/Input/README.md +36 -11
  135. package/design-system/components/Input/preview.html +1 -1
  136. package/design-system/components/Input/style.css +23 -0
  137. package/design-system/components/KanbanBoard/README.md +93 -45
  138. package/design-system/components/KanbanBoard/preview.html +159 -43
  139. package/design-system/components/KanbanBoard/style.css +53 -0
  140. package/design-system/components/Kbd/README.md +25 -9
  141. package/design-system/components/Kbd/preview.html +6 -2
  142. package/design-system/components/Kbd/style.css +9 -0
  143. package/design-system/components/KitButton/README.md +81 -47
  144. package/design-system/components/KitButton/preview.html +35 -13
  145. package/design-system/components/KitButton/style.css +46 -0
  146. package/design-system/components/KitCard/README.md +75 -44
  147. package/design-system/components/KitCard/preview.html +18 -10
  148. package/design-system/components/KitCard/style.css +15 -0
  149. package/design-system/components/KitInput/README.md +54 -39
  150. package/design-system/components/KitInput/preview.html +7 -7
  151. package/design-system/components/KitInput/style.css +23 -0
  152. package/design-system/components/Leaderboard/README.md +76 -49
  153. package/design-system/components/Leaderboard/preview.html +61 -26
  154. package/design-system/components/Leaderboard/style.css +44 -0
  155. package/design-system/components/ListDetail/README.md +222 -0
  156. package/design-system/components/ListDetail/preview.html +213 -0
  157. package/design-system/components/ListDetail/style.css +148 -0
  158. package/design-system/components/LoadBar/README.md +79 -0
  159. package/design-system/components/LoadBar/preview.html +40 -0
  160. package/design-system/components/LoadBar/style.css +17 -0
  161. package/design-system/components/MarketingNav/README.md +76 -42
  162. package/design-system/components/MarketingNav/preview.html +37 -8
  163. package/design-system/components/MarketingNav/style.css +45 -0
  164. package/design-system/components/Matrix/README.md +129 -0
  165. package/design-system/components/Matrix/preview.html +99 -0
  166. package/design-system/components/Matrix/style.css +84 -0
  167. package/design-system/components/Menu/README.md +117 -41
  168. package/design-system/components/Menu/preview.html +85 -23
  169. package/design-system/components/Menu/style.css +61 -0
  170. package/design-system/components/Meter/README.md +39 -4
  171. package/design-system/components/Meter/preview.html +18 -1
  172. package/design-system/components/Meter/style.css +23 -0
  173. package/design-system/components/MetricTile/README.md +237 -0
  174. package/design-system/components/MetricTile/preview.html +241 -0
  175. package/design-system/components/MetricTile/style.css +129 -0
  176. package/design-system/components/Morph/README.md +106 -0
  177. package/design-system/components/Morph/preview.html +103 -0
  178. package/design-system/components/Morph/style.css +31 -0
  179. package/design-system/components/Motion/README.md +164 -0
  180. package/design-system/components/Motion/preview.html +2537 -0
  181. package/design-system/components/NumberInput/README.md +27 -8
  182. package/design-system/components/NumberInput/preview.html +21 -5
  183. package/design-system/components/NumberInput/style.css +34 -0
  184. package/design-system/components/PaceBar/README.md +75 -0
  185. package/design-system/components/PaceBar/preview.html +67 -0
  186. package/design-system/components/PaceBar/style.css +25 -0
  187. package/design-system/components/Page/README.md +57 -18
  188. package/design-system/components/Page/preview.html +15 -17
  189. package/design-system/components/Page/style.css +7 -0
  190. package/design-system/components/PageBar/README.md +90 -34
  191. package/design-system/components/PageBar/preview.html +60 -19
  192. package/design-system/components/PageBar/style.css +35 -0
  193. package/design-system/components/PageHero/README.md +87 -51
  194. package/design-system/components/PageHero/preview.html +35 -6
  195. package/design-system/components/PageHero/style.css +31 -0
  196. package/design-system/components/Pagination/README.md +70 -49
  197. package/design-system/components/Pagination/preview.html +24 -15
  198. package/design-system/components/Pagination/style.css +12 -0
  199. package/design-system/components/Panel/README.md +109 -51
  200. package/design-system/components/Panel/preview.html +118 -20
  201. package/design-system/components/Panel/style.css +51 -0
  202. package/design-system/components/PasswordInput/README.md +50 -18
  203. package/design-system/components/PasswordInput/preview.html +71 -21
  204. package/design-system/components/PasswordInput/style.css +31 -0
  205. package/design-system/components/Plate/README.md +75 -17
  206. package/design-system/components/Plate/preview.html +40 -7
  207. package/design-system/components/Plate/style.css +37 -0
  208. package/design-system/components/Popover/README.md +70 -49
  209. package/design-system/components/Popover/preview.html +44 -22
  210. package/design-system/components/Popover/style.css +41 -0
  211. package/design-system/components/PricingTable/README.md +69 -49
  212. package/design-system/components/PricingTable/preview.html +21 -21
  213. package/design-system/components/PricingTable/style.css +21 -0
  214. package/design-system/components/ProgressPetals/README.md +31 -3
  215. package/design-system/components/ProgressPetals/preview.html +14 -15
  216. package/design-system/components/ProgressPetals/style.css +27 -0
  217. package/design-system/components/README.md +151 -0
  218. package/design-system/components/Radio/README.md +40 -17
  219. package/design-system/components/Radio/preview.html +16 -1
  220. package/design-system/components/Radio/style.css +21 -0
  221. package/design-system/components/RankBar/README.md +29 -2
  222. package/design-system/components/RankBar/preview.html +14 -12
  223. package/design-system/components/RankBar/style.css +18 -0
  224. package/design-system/components/Ring/README.md +61 -11
  225. package/design-system/components/Ring/preview.html +55 -10
  226. package/design-system/components/Ring/style.css +49 -0
  227. package/design-system/components/ScoreHero/README.md +91 -0
  228. package/design-system/components/ScoreHero/preview.html +104 -0
  229. package/design-system/components/ScoreHero/style.css +32 -0
  230. package/design-system/components/Section/README.md +72 -33
  231. package/design-system/components/Section/preview.html +46 -16
  232. package/design-system/components/Section/style.css +18 -0
  233. package/design-system/components/Segmented/README.md +100 -55
  234. package/design-system/components/Segmented/preview.html +107 -26
  235. package/design-system/components/Segmented/style.css +94 -0
  236. package/design-system/components/SegmentedProgress/README.md +64 -0
  237. package/design-system/components/SegmentedProgress/preview.html +69 -0
  238. package/design-system/components/SegmentedProgress/style.css +11 -0
  239. package/design-system/components/Select/README.md +47 -12
  240. package/design-system/components/Select/preview.html +28 -2
  241. package/design-system/components/Select/style.css +22 -0
  242. package/design-system/components/ShareBar/README.md +69 -0
  243. package/design-system/components/ShareBar/preview.html +72 -0
  244. package/design-system/components/ShareBar/style.css +25 -0
  245. package/design-system/components/SideList/README.md +147 -0
  246. package/design-system/components/SideList/preview.html +139 -0
  247. package/design-system/components/SideList/style.css +94 -0
  248. package/design-system/components/Skeleton/README.md +53 -16
  249. package/design-system/components/Skeleton/preview.html +35 -23
  250. package/design-system/components/Skeleton/style.css +17 -0
  251. package/design-system/components/Slider/README.md +95 -0
  252. package/design-system/components/Slider/preview.html +49 -0
  253. package/design-system/components/Slider/style.css +13 -0
  254. package/design-system/components/Split/README.md +112 -0
  255. package/design-system/components/Split/preview.html +105 -0
  256. package/design-system/components/Split/style.css +30 -0
  257. package/design-system/components/Starter/README.md +21 -9
  258. package/design-system/components/Starter/preview.html +5 -5
  259. package/design-system/components/Stat/README.md +64 -43
  260. package/design-system/components/Stat/preview.html +3 -3
  261. package/design-system/components/Stat/style.css +15 -0
  262. package/design-system/components/StatTiles/README.md +88 -44
  263. package/design-system/components/StatTiles/preview.html +142 -71
  264. package/design-system/components/StatTiles/style.css +64 -0
  265. package/design-system/components/StatusLine/README.md +85 -0
  266. package/design-system/components/StatusLine/preview.html +49 -0
  267. package/design-system/components/StatusLine/style.css +14 -0
  268. package/design-system/components/StatusScreen/README.md +49 -35
  269. package/design-system/components/StatusScreen/preview.html +20 -5
  270. package/design-system/components/StatusScreen/style.css +9 -0
  271. package/design-system/components/StepLine/README.md +97 -0
  272. package/design-system/components/StepLine/preview.html +108 -0
  273. package/design-system/components/StepLine/style.css +62 -0
  274. package/design-system/components/Stepper/README.md +35 -13
  275. package/design-system/components/Stepper/style.css +13 -0
  276. package/design-system/components/StreakCalendar/README.md +22 -1
  277. package/design-system/components/StreakCalendar/preview.html +10 -10
  278. package/design-system/components/StreakCalendar/style.css +12 -0
  279. package/design-system/components/SuggestionChip/README.md +87 -0
  280. package/design-system/components/SuggestionChip/preview.html +42 -0
  281. package/design-system/components/SuggestionChip/style.css +20 -0
  282. package/design-system/components/Switch/README.md +44 -24
  283. package/design-system/components/Switch/preview.html +23 -8
  284. package/design-system/components/Switch/style.css +31 -0
  285. package/design-system/components/Table/README.md +129 -58
  286. package/design-system/components/Table/preview.html +106 -72
  287. package/design-system/components/Table/style.css +104 -0
  288. package/design-system/components/Tabs/README.md +71 -46
  289. package/design-system/components/Tabs/preview.html +56 -24
  290. package/design-system/components/Tabs/style.css +44 -0
  291. package/design-system/components/Testimonial/README.md +48 -32
  292. package/design-system/components/Testimonial/preview.html +14 -14
  293. package/design-system/components/Testimonial/style.css +12 -0
  294. package/design-system/components/TextArea/README.md +27 -11
  295. package/design-system/components/TextArea/preview.html +8 -2
  296. package/design-system/components/TextArea/style.css +12 -0
  297. package/design-system/components/ThemeSwitch/README.md +116 -0
  298. package/design-system/components/ThemeSwitch/preview.html +57 -0
  299. package/design-system/components/ThemeSwitch/style.css +6 -0
  300. package/design-system/components/TickRow/README.md +52 -36
  301. package/design-system/components/TickRow/preview.html +64 -41
  302. package/design-system/components/TickRow/style.css +23 -0
  303. package/design-system/components/TickStrip/README.md +95 -0
  304. package/design-system/components/TickStrip/preview.html +88 -0
  305. package/design-system/components/TickStrip/style.css +42 -0
  306. package/design-system/components/Tile/README.md +79 -18
  307. package/design-system/components/Tile/preview.html +91 -40
  308. package/design-system/components/Tile/style.css +36 -0
  309. package/design-system/components/Timeline/README.md +68 -48
  310. package/design-system/components/Timeline/preview.html +27 -15
  311. package/design-system/components/Timeline/style.css +25 -0
  312. package/design-system/components/Toast/README.md +70 -38
  313. package/design-system/components/Toast/preview.html +43 -8
  314. package/design-system/components/Toast/style.css +25 -0
  315. package/design-system/components/Tooltip/README.md +93 -35
  316. package/design-system/components/Tooltip/preview.html +69 -15
  317. package/design-system/components/Tooltip/style.css +78 -0
  318. package/design-system/components/TopBar/README.md +67 -53
  319. package/design-system/components/TopBar/preview.html +14 -27
  320. package/design-system/components/TopBar/style.css +35 -0
  321. package/design-system/components/TopicRail/README.md +108 -0
  322. package/design-system/components/TopicRail/preview.html +58 -0
  323. package/design-system/components/TopicRail/style.css +48 -0
  324. package/design-system/components/TrendBars/README.md +52 -14
  325. package/design-system/components/TrendBars/preview.html +65 -32
  326. package/design-system/components/TrendBars/style.css +25 -0
  327. package/design-system/components/TrendLine/README.md +164 -0
  328. package/design-system/components/TrendLine/preview.html +373 -0
  329. package/design-system/components/TrendLine/style.css +155 -0
  330. package/design-system/components/Well/README.md +64 -22
  331. package/design-system/components/Well/preview.html +14 -14
  332. package/design-system/components/Well/style.css +22 -0
  333. package/design-system/components/_house.css +324 -0
  334. package/design-system/components/bundle.css +4086 -744
  335. package/design-system/tokens.json +1310 -124
  336. package/dist/fello-core.css +2 -2
  337. package/dist/fello.css +6 -1369
  338. package/dist/fello.scoped.css +7 -0
  339. package/dist/index.d.ts +109 -10
  340. package/dist/index.js +781 -96
  341. package/dist/palettes.d.ts +464 -0
  342. package/dist/palettes.js +497 -0
  343. package/dist/scoped.d.ts +3 -0
  344. package/dist/scoped.js +16 -0
  345. package/dist/toast.d.ts +14 -0
  346. package/dist/toast.js +33 -29
  347. package/dist/tokens.d.ts +1686 -62
  348. package/dist/tokens.js +1668 -61
  349. package/package.json +20 -4
  350. package/scripts/check-palette.mjs +295 -0
  351. package/scripts/token-model.mjs +552 -0
  352. package/tokens/_dark.css +173 -0
  353. package/tokens/_palettes.css +46 -0
  354. package/tokens/_product.css +266 -53
  355. package/tokens/_source.hubl.css +39 -19
  356. package/tokens/design-tokens.json +319 -0
  357. package/tokens/palettes.ts +504 -0
  358. package/tokens/shadcn-compat.css +19 -19
  359. package/tokens/shadcn-compat.hsl.css +76 -0
  360. package/tokens/tokens.css +1287 -62
  361. package/tokens/tokens.md +587 -61
  362. package/tokens/tokens.root.css +1293 -62
  363. package/tokens/tokens.ts +1677 -64
package/design-system/components/GoalTicks/preview.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" height=863 -->
1
+ <!-- @dsCard group="Charts" height=1180 -->
2
2
  <!doctype html>
3
3
  <html>
4
4
  <head>
@@ -13,7 +13,7 @@
13
13
  <div class="ws-stack">
14
14
  <span class="ws-muted">Default: the full card, outreach split into cold calls, live transfers and follow-ups</span>
15
15
  <div style="width: var(--ws-chart-card-w); max-width: 100%;">
16
- <section class="ws-card">
16
+ <section class="ws-card ws-card--compound">
17
17
  <header class="ws-head">
18
18
  <div>
19
19
  <h3 class="ws-title">October outreach</h3>
@@ -28,84 +28,21 @@
28
28
  12% since Friday
29
29
  </span>
30
30
  </figure>
31
- <div class="ws-goal-ticks__strip" aria-hidden="true">
32
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:0; animation-delay:calc(var(--ws-sweep) * 0 / 12);"></span>
33
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:1; animation-delay:calc(var(--ws-sweep) * 1 / 12);"></span>
34
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:2; animation-delay:calc(var(--ws-sweep) * 2 / 12);"></span>
35
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:3; animation-delay:calc(var(--ws-sweep) * 3 / 12);"></span>
36
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:4; animation-delay:calc(var(--ws-sweep) * 4 / 12);"></span>
37
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:5; animation-delay:calc(var(--ws-sweep) * 5 / 12);"></span>
38
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:6; animation-delay:calc(var(--ws-sweep) * 6 / 12);"></span>
39
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:7; animation-delay:calc(var(--ws-sweep) * 7 / 12);"></span>
40
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:8; animation-delay:calc(var(--ws-sweep) * 8 / 12);"></span>
41
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:9; animation-delay:calc(var(--ws-sweep) * 9 / 12);"></span>
42
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:10; animation-delay:calc(var(--ws-sweep) * 10 / 12);"></span>
43
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:11; animation-delay:calc(var(--ws-sweep) * 11 / 12);"></span>
44
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:12; animation-delay:calc(var(--ws-sweep) * 12 / 12);"></span>
45
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
46
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
47
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
48
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
49
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
50
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
51
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
52
- </div>
31
+ <div class="ws-goal-ticks__strip" aria-hidden="true"><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 0;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 1;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 2;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 3;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 4;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 5;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 6;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 7;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 8;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 9;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 10;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 11;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 12;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span></div>
53
32
  <ul class="ws-goal-ticks__rows" aria-hidden="true">
54
33
  <li class="ws-goal-ticks__row">
55
- <span class="ws-goal-ticks__row-label">Cold calls</span>
56
- <span class="ws-tick-row">
57
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 0%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 0 / 9);"></span>
58
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 8%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 1 / 9);"></span>
59
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 15%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 2 / 9);"></span>
60
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 23%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 3 / 9);"></span>
61
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 30%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 4 / 9);"></span>
62
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 38%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 5 / 9);"></span>
63
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 45%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 6 / 9);"></span>
64
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 53%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 7 / 9);"></span>
65
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 60%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 8 / 9);"></span>
66
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 68%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 9 / 9);"></span>
67
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
68
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
69
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
70
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
71
- </span>
34
+ <span class="ws-goal-ticks__row-label" title="Cold calls">Cold calls</span>
35
+ <span class="ws-tick-row"><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 0%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 8%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 15%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 23%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 30%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 38%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 45%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 53%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 60%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 68%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span></span>
72
36
  <span class="ws-goal-ticks__row-value">14</span>
73
37
  </li>
74
38
  <li class="ws-goal-ticks__row">
75
- <span class="ws-goal-ticks__row-label">Live transfers</span>
76
- <span class="ws-tick-row">
77
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 73%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 0 / 5);"></span>
78
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 80%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 1 / 5);"></span>
79
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 87%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 2 / 5);"></span>
80
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-past-half) 93%, var(--ws-chart-under-half)); animation-delay: calc(var(--ws-sweep) * 3 / 5);"></span>
81
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 0%, var(--ws-chart-past-half)); animation-delay: calc(var(--ws-sweep) * 4 / 5);"></span>
82
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 7%, var(--ws-chart-past-half)); animation-delay: calc(var(--ws-sweep) * 5 / 5);"></span>
83
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
84
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
85
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
86
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
87
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
88
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
89
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
90
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
91
- </span>
39
+ <span class="ws-goal-ticks__row-label" title="Live transfers">Live transfers</span>
40
+ <span class="ws-tick-row"><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 72%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 84%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 96%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-finished) 8%, var(--ws-chart-past-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-finished) 20%, var(--ws-chart-past-half));"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span></span>
92
41
  <span class="ws-goal-ticks__row-value">8</span>
93
42
  </li>
94
43
  <li class="ws-goal-ticks__row">
95
- <span class="ws-goal-ticks__row-label">Follow-ups</span>
96
- <span class="ws-tick-row">
97
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 13%, var(--ws-chart-past-half)); animation-delay: calc(var(--ws-sweep) * 0 / 2);"></span>
98
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 20%, var(--ws-chart-past-half)); animation-delay: calc(var(--ws-sweep) * 1 / 2);"></span>
99
- <span class="ws-tick-row__tick ws-grow-up" style="background-color: color-mix(in srgb, var(--ws-chart-finished) 27%, var(--ws-chart-past-half)); animation-delay: calc(var(--ws-sweep) * 2 / 2);"></span>
100
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
101
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
102
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
103
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
104
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
105
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
106
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
107
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
108
- </span>
44
+ <span class="ws-goal-ticks__row-label" title="Follow-ups">Follow-ups</span>
45
+ <span class="ws-tick-row"><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-finished) 32%, var(--ws-chart-past-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-finished) 46%, var(--ws-chart-past-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-finished) 60%, var(--ws-chart-past-half));"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span></span>
109
46
  <span class="ws-goal-ticks__row-value">4</span>
110
47
  </li>
111
48
  </ul>
@@ -121,25 +58,38 @@
121
58
  </div>
122
59
  </div>
123
60
 
61
+ <div class="ws-stack">
62
+ <span class="ws-muted">Forty ticks against a 40-call goal, with the key under the strip</span>
63
+ <div style="width: 440px; max-width: 100%;">
64
+ <div class="ws-card ws-card--inset ws-goal-ticks">
65
+ <figure class="ws-goal-ticks__figure ws-goal-ticks__figure--small" aria-label="27 of 40 calls, on pace for 40 by Oct 22">
66
+ <span class="ws-goal-ticks__number" aria-hidden="true">27</span>
67
+ <span class="ws-goal-ticks__caption" aria-hidden="true">of 40 calls</span>
68
+ </figure>
69
+ <div class="ws-goal-ticks__strip" style="--n: 40;" aria-hidden="true"><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 0;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 1;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 2;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 3;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 4;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 5;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 6;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 7;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 8;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 9;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 10;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 11;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 12;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 13;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 14;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 15;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 16;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 17;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 18;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 19;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 20;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 21;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 22;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 23;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 24;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 25;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 26;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span></div>
70
+ <div class="ws-goal-ticks__key" aria-hidden="true">
71
+ <span class="ws-goal-ticks__key-item">A call made</span>
72
+ <span class="ws-goal-ticks__key-item ws-goal-ticks__key-item--empty">Still to make</span>
73
+ <span class="ws-goal-ticks__key-note">On pace for Oct 22</span>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
124
79
  <div class="ws-stack">
125
80
  <span class="ws-muted">Empty: before the first call, nothing logged yet</span>
126
81
  <div style="width: 300px; max-width: 100%;">
127
82
  <div class="ws-card ws-card--inset ws-goal-ticks">
128
- <figure class="ws-goal-ticks__figure ws-goal-ticks__figure--small" aria-label="0 percent, 0 of 100, Cold calls 0 of 20, Live transfers 0 of 20, Follow-ups 0 of 20">
83
+ <figure class="ws-goal-ticks__figure ws-goal-ticks__figure--small" aria-label="0 percent, 0 of 100">
129
84
  <span class="ws-goal-ticks__number" aria-hidden="true">0%</span>
130
85
  </figure>
131
- <div class="ws-goal-ticks__strip" aria-hidden="true">
132
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
133
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
134
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
135
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
136
- </div>
86
+ <div class="ws-goal-ticks__strip" aria-hidden="true"><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span></div>
137
87
  </div>
138
88
  </div>
139
89
  </div>
140
90
 
141
91
  <div class="ws-stack">
142
- <span class="ws-muted">A plain count: `figure` given, no strip (a streak's weeks, not a percent)</span>
92
+ <span class="ws-muted">A plain count: no strip, its caption on the number's baseline</span>
143
93
  <div style="width: 220px; max-width: 100%;">
144
94
  <div class="ws-card ws-card--inset ws-goal-ticks">
145
95
  <figure class="ws-goal-ticks__figure ws-goal-ticks__figure--small" aria-label="3, week streak">
@@ -161,54 +111,27 @@
161
111
  Same as last week
162
112
  </span>
163
113
  </figure>
164
- <div class="ws-goal-ticks__strip" aria-hidden="true">
165
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:0; animation-delay:calc(var(--ws-sweep) * 0 / 9);"></span>
166
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:1; animation-delay:calc(var(--ws-sweep) * 1 / 9);"></span>
167
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:2; animation-delay:calc(var(--ws-sweep) * 2 / 9);"></span>
168
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:3; animation-delay:calc(var(--ws-sweep) * 3 / 9);"></span>
169
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:4; animation-delay:calc(var(--ws-sweep) * 4 / 9);"></span>
170
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:5; animation-delay:calc(var(--ws-sweep) * 5 / 9);"></span>
171
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:6; animation-delay:calc(var(--ws-sweep) * 6 / 9);"></span>
172
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:7; animation-delay:calc(var(--ws-sweep) * 7 / 9);"></span>
173
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:8; animation-delay:calc(var(--ws-sweep) * 8 / 9);"></span>
174
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:9; animation-delay:calc(var(--ws-sweep) * 9 / 9);"></span>
175
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
176
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
177
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
178
- </div>
114
+ <div class="ws-goal-ticks__strip" aria-hidden="true"><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 0;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 1;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 2;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 3;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 4;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 5;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 6;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 7;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 8;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 9;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span></div>
179
115
  </div>
180
116
  </div>
181
117
  </div>
182
118
 
183
119
  <div class="ws-stack">
184
- <span class="ws-muted">At 320 px: the strip still fits, and a long row label truncates</span>
185
- <div style="width: 320px; max-width: 100%;">
120
+ <span class="ws-muted">A 320 phone's card (288 px): the chip wraps under the number, a long row label truncates with its title</span>
121
+ <div style="width: 288px; max-width: 100%;">
186
122
  <div class="ws-card ws-card--inset ws-goal-ticks">
187
- <figure class="ws-goal-ticks__figure ws-goal-ticks__figure--small" aria-label="65 percent, 65 of 100, Seller follow-up calls 6 of 20">
123
+ <figure class="ws-goal-ticks__figure ws-goal-ticks__figure--small" aria-label="65 percent, up 12% since Friday, Seller follow-up calls 6 of 20">
188
124
  <span class="ws-goal-ticks__number" aria-hidden="true">65%</span>
125
+ <span class="ws-change ws-change--up ws-goal-ticks__change" aria-hidden="true">
126
+ <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true"><path d="M5 11L11 5M11 5H6M11 5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
127
+ 12% since Friday
128
+ </span>
189
129
  </figure>
190
- <div class="ws-goal-ticks__strip" aria-hidden="true">
191
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:0;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:1;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:2;"></span>
192
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:3;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:4;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:5;"></span>
193
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:6;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:7;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:8;"></span>
194
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:9;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:10;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:11;"></span>
195
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit ws-grow-up" style="--i:12;"></span>
196
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
197
- <span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span>
198
- </div>
130
+ <div class="ws-goal-ticks__strip" aria-hidden="true"><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 0;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 1;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 2;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 3;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 4;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 5;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 6;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 7;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 8;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 9;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 10;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 11;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--lit" style="--i: 12;"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span><span class="ws-goal-ticks__tick ws-goal-ticks__tick--empty"></span></div>
199
131
  <ul class="ws-goal-ticks__rows" aria-hidden="true">
200
132
  <li class="ws-goal-ticks__row">
201
- <span class="ws-goal-ticks__row-label">Seller follow-up calls</span>
202
- <span class="ws-tick-row">
203
- <span class="ws-tick-row__tick" style="background-color: var(--ws-chart-under-half);"></span>
204
- <span class="ws-tick-row__tick" style="background-color: var(--ws-chart-under-half);"></span>
205
- <span class="ws-tick-row__tick" style="background-color: var(--ws-chart-past-half);"></span>
206
- <span class="ws-tick-row__tick" style="background-color: var(--ws-chart-past-half);"></span>
207
- <span class="ws-tick-row__tick" style="background-color: var(--ws-chart-finished);"></span>
208
- <span class="ws-tick-row__tick" style="background-color: var(--ws-chart-finished);"></span>
209
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
210
- <span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span>
211
- </span>
133
+ <span class="ws-goal-ticks__row-label" title="Seller follow-up calls">Seller follow-up calls</span>
134
+ <span class="ws-tick-row"><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 0%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 16%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 32%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 48%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 64%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick" style="background: color-mix(in srgb, var(--ws-chart-past-half) 80%, var(--ws-chart-under-half));"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span><span class="ws-tick-row__tick ws-tick-row__tick--empty"></span></span>
212
135
  <span class="ws-goal-ticks__row-value">6</span>
213
136
  </li>
214
137
  </ul>
package/design-system/components/GoalTicks/style.css ADDED
@@ -0,0 +1,37 @@
1
+ /* ---- GoalTicks: one big share, its strip of ticks and up to three breakdown rows ---- */
2
+ .ws-goal-ticks--in-card { padding: 0 var(--ws-card-inset) var(--space-sm); }
3
+ /* The number, its chip or caption: they wrap in a narrow card; a caption shares the number's baseline. The number
4
+ stands alone, so its numerals are proportional and its box sits on the content edge with no pull (Seth draws his
5
+ figures flush; tabular numerals would carry a wide side bearing at 80 px). */
6
+ .ws-goal-ticks__figure { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-xxs) var(--space-xs); }
7
+ .ws-goal-ticks__number { font-size: calc(var(--ws-text-display) + var(--space-xs)); line-height: calc(var(--ws-text-display) + var(--space-xs)); font-weight: 400; letter-spacing: var(--ws-tracking-display); color: var(--color-text-heading); font-variant-numeric: proportional-nums; }
8
+ .ws-goal-ticks__figure--small .ws-goal-ticks__number { font-size: var(--ws-text-display); line-height: var(--ws-text-display); }
9
+ .ws-goal-ticks__change { margin-bottom: var(--space-xs-plus); }
10
+ .ws-goal-ticks__number:has(~ .ws-goal-ticks__caption), .ws-goal-ticks__caption { align-self: baseline; }
11
+ .ws-goal-ticks__caption { font-size: var(--ws-text-body); font-weight: 500; line-height: var(--ws-leading-row); color: var(--color-text-muted); }
12
+ /* The strip measures itself so each lit tick shows its own stretch of the one gradient. Set --n (the target in ticks,
13
+ 20 by default, at most 60) on the strip and --i (0, 1, 2 ...) on each lit tick. */
14
+ .ws-goal-ticks__strip { --n: 20; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-xxs); margin-top: calc(var(--space-md) + var(--space-xxs)); container-type: inline-size; }
15
+ .ws-goal-ticks__tick { height: var(--space-4xl); border-radius: var(--ws-radius-bar); transform-origin: bottom; }
16
+ .ws-goal-ticks__tick--empty { background: var(--ws-track); }
17
+ .ws-goal-ticks__tick--lit { background-image: linear-gradient(90deg, var(--ws-chart-under-half), var(--ws-chart-past-half) 50%, var(--ws-chart-finished)); background-size: 100cqw 100%; background-position: calc(var(--i) * -1 * ((100cqw - (var(--n) - 1) * var(--space-xxs)) / var(--n) + var(--space-xxs))) 0; }
18
+ @media (prefers-reduced-motion: no-preference) {
19
+ /* The draw (North): tick i starts at its share of 55% of the 900 ms draw and rises on the settle curve. */
20
+ .ws-goal-ticks__tick--lit { animation: ws-grow-up calc(var(--ws-duration-draw) * 0.45) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-draw) * 0.55 * var(--i, 0) / max(var(--n) - 1, 1)); }
21
+ }
22
+ /* The key under the strip: a filled swatch and an empty one, each named, and a short note at the right. */
23
+ .ws-goal-ticks__key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs) var(--space-sm); margin-top: var(--space-sm); font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
24
+ .ws-goal-ticks__key-item { display: inline-flex; align-items: center; gap: var(--space-xxs-plus); }
25
+ .ws-goal-ticks__key-item::before { content: ""; width: var(--space-xs-plus); height: var(--space-xs-plus); border-radius: var(--ws-radius-bar); background: linear-gradient(90deg, var(--ws-chart-under-half), var(--ws-chart-past-half) 50%, var(--ws-chart-finished)); }
26
+ .ws-goal-ticks__key-item--empty::before { background: var(--ws-track); }
27
+ .ws-goal-ticks__key-note { margin-left: auto; }
28
+ /* The breakdown: a label, a TickRow (.ws-tick-row), the count. Every row sits on one grid (subgrid), so the tick rows
29
+ start and end on one line down the card and the counts share one column. The label column is as wide as the widest
30
+ label, at most half the row (then an ellipsis and its title); the tick column gives way; the count column is as wide
31
+ as the widest count, at least 26. */
32
+ .ws-goal-ticks__rows { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr) minmax(calc(var(--space-lg) + var(--space-xxs) / 2), auto); margin: calc(var(--space-md) + var(--space-xxs)) 0 calc(var(--space-xxs) * -1); }
33
+ .ws-goal-ticks__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: var(--space-sm) 0; border-top: var(--ws-divider); }
34
+ .ws-goal-ticks__row:first-child { border-top: 0; }
35
+ .ws-goal-ticks__row-label { min-width: 0; padding-right: var(--space-md); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-message); line-height: var(--ws-leading-row); color: var(--color-text-heading); }
36
+ .ws-goal-ticks__row .ws-tick-row { justify-content: flex-end; }
37
+ .ws-goal-ticks__row-value { text-align: right; font-size: var(--ws-text-value); font-weight: 600; line-height: var(--ws-leading-row); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
package/design-system/components/GoalTubes/README.md CHANGED
@@ -13,11 +13,14 @@ Counts as upright tubes: a rounded outline, a fill rising from the foot, a leade
13
13
 
14
14
  **Anatomy**
15
15
 
16
- - Tube: `--space-6xl` (96 px) wide at most, `calc(--space-9xl + --space-md)` tall (216 px), `--radius-lg` (8 px) corners, a 1 px outline at half the tone's strength.
17
- - Fill: rises from the foot, `--radius-md` (6 px) corners at its top only, `linear-gradient(to bottom, tone-solid, tone-fade)`.
16
+ - Columns: one a tube, all the same width however long their labels, 4 apart, so the tubes sit evenly.
17
+ - Tube: `--space-6xl` (96 px) wide at most, `calc(--space-9xl + --space-md)` tall (216 px), `--ws-radius-card` (8 px) corners, a 1 px outline at half the tone's strength.
18
+ - Fill: rises from the foot, 3 inside the outline, `--ws-radius-control` (4 px) corners all round (concentric with
19
+ the tube's 8 less its 1 px outline and the 3 inset, at the foot as at the top), `linear-gradient(to bottom,
20
+ tone-solid, tone-fade)`.
18
21
  - "Not yet": two columns of fine dots in the tone at 55%, from just inside the tube's top down to just above the fill.
19
22
  - Leader and dot: a 1 px line from the fill's top rising past the tube's top edge up to a small dot, so the count above always sits at the same height however tall the fill; the dot is the tone's solid colour.
20
- - Count: 16 px semibold (`--ws-text-value`) above the dot.
23
+ - Count: 16 px semibold (`--ws-text-value`) above the dot, 6 over it; the dot is 7 across, 12 over the tube's top.
21
24
  - Baseline: a 1 px line across every tube's foot, a shade darker than the cream, so the tubes read as one set standing on one floor.
22
25
  - Label: under each tube, `--space-sm` (12 px) below the baseline; the first tube's label is 14 px medium (the whole, "Total calls") when `lead` is true, the rest `ws-body`.
23
26
 
@@ -28,6 +31,11 @@ Counts as upright tubes: a rounded outline, a fill rising from the foot, a leade
28
31
  | `short` | 120 px tubes below the wide area, the designer's 216 above it: a phone keeps what sits under the chart in reach |
29
32
  | `lead` | The first tube is the whole, its label in heading weight; `false` when every tube is alike (a pipeline's stages) |
30
33
 
34
+ **Parts and modifiers**
35
+
36
+ - `.ws-goal-tubes__body--short`: a 120 px tall plot instead of the default.
37
+ - `.ws-goal-tubes__label--lead`: the lead tube's label, 14 px medium navy.
38
+
31
39
  **States**
32
40
 
33
41
  - Default: each fill rises from the foot on `ws-grow-up`, the tubes staggered one after another.
@@ -66,3 +74,21 @@ Counts as upright tubes: a rounded outline, a fill rising from the foot, a leade
66
74
  **Source**
67
75
 
68
76
  - **Derived from**: the system's chart and motion rules (tone colours, `ws-grow-up`, the no-axis rule). **Precedent**: the first product built on the system.
77
+
78
+ **Markup**
79
+
80
+ ```html
81
+ <div class="ws-dots ws-goal-tubes ws-goal-tubes--in-card" role="img" aria-label="Cold calls 14 of 40">
82
+ <div class="ws-goal-tubes__tube" style="--i: 0; --tone: var(--ws-chart-under-half); --tone-fade: var(--ws-chart-salmon-fade); --pct: 35%;" aria-hidden="true">
83
+ <span class="ws-goal-tubes__value">14</span>
84
+ <span class="ws-goal-tubes__dot"></span>
85
+ <span class="ws-goal-tubes__wrap"><span class="ws-goal-tubes__body">
86
+ <span class="ws-goal-tubes__inner"><span class="ws-goal-tubes__not-yet"><span></span><span></span></span><span class="ws-goal-tubes__leader"></span><span class="ws-goal-tubes__fill ws-grow-up"></span></span>
87
+ <span class="ws-goal-tubes__baseline"></span>
88
+ </span></span>
89
+ <span class="ws-goal-tubes__label">Cold calls</span>
90
+ </div>
91
+ </div>
92
+ ```
93
+
94
+ **Styles**: `GoalTubes/style.css`, in `bundle.css` and `fello.css` as `.ws-goal-tubes`. Every value is a token.
package/design-system/components/GoalTubes/preview.html CHANGED
@@ -21,7 +21,7 @@
21
21
  </div>
22
22
  </header>
23
23
  <div class="ws-dots ws-goal-tubes ws-goal-tubes--in-card" role="img" aria-label="Total calls 26, Cold calls 14, Live transfers 8, Follow-ups 4, out of 40">
24
- <div class="ws-goal-tubes__tube" style="--tone: var(--color-brand-navy); --tone-fade: var(--ws-chart-navy-fade); --pct: 65%;" aria-hidden="true">
24
+ <div class="ws-goal-tubes__tube" style="--tone: var(--color-text-heading); --tone-fade: var(--ws-chart-navy-fade); --pct: 65%;" aria-hidden="true">
25
25
  <span class="ws-goal-tubes__value">26</span>
26
26
  <span class="ws-goal-tubes__dot"></span>
27
27
  <span class="ws-goal-tubes__wrap">
@@ -44,7 +44,7 @@
44
44
  <span class="ws-goal-tubes__inner">
45
45
  <span class="ws-goal-tubes__not-yet"><span></span><span></span></span>
46
46
  <span class="ws-goal-tubes__leader"></span>
47
- <span class="ws-goal-tubes__fill ws-grow-up" style="animation-delay: 40ms;"></span>
47
+ <span class="ws-goal-tubes__fill ws-grow-up" style="--i: 1;"></span>
48
48
  </span>
49
49
  <span class="ws-goal-tubes__baseline"></span>
50
50
  </span>
@@ -59,7 +59,7 @@
59
59
  <span class="ws-goal-tubes__inner">
60
60
  <span class="ws-goal-tubes__not-yet"><span></span><span></span></span>
61
61
  <span class="ws-goal-tubes__leader"></span>
62
- <span class="ws-goal-tubes__fill ws-grow-up" style="animation-delay: 80ms;"></span>
62
+ <span class="ws-goal-tubes__fill ws-grow-up" style="--i: 2;"></span>
63
63
  </span>
64
64
  <span class="ws-goal-tubes__baseline"></span>
65
65
  </span>
@@ -74,7 +74,7 @@
74
74
  <span class="ws-goal-tubes__inner">
75
75
  <span class="ws-goal-tubes__not-yet"><span></span><span></span></span>
76
76
  <span class="ws-goal-tubes__leader"></span>
77
- <span class="ws-goal-tubes__fill ws-grow-up" style="animation-delay: 120ms;"></span>
77
+ <span class="ws-goal-tubes__fill ws-grow-up" style="--i: 3;"></span>
78
78
  </span>
79
79
  <span class="ws-goal-tubes__baseline"></span>
80
80
  </span>
@@ -120,7 +120,7 @@
120
120
  <span class="ws-goal-tubes__inner">
121
121
  <span class="ws-goal-tubes__not-yet"><span></span><span></span></span>
122
122
  <span class="ws-goal-tubes__leader"></span>
123
- <span class="ws-goal-tubes__fill ws-grow-up" style="animation-delay: 40ms;"></span>
123
+ <span class="ws-goal-tubes__fill ws-grow-up" style="--i: 1;"></span>
124
124
  </span>
125
125
  <span class="ws-goal-tubes__baseline"></span>
126
126
  </span>
@@ -135,7 +135,7 @@
135
135
  <span class="ws-muted">Empty: not started yet</span>
136
136
  <div style="width: 140px; max-width: 100%;">
137
137
  <div class="ws-card ws-card--inset ws-goal-tubes">
138
- <div class="ws-goal-tubes__tube" style="--tone: var(--color-gray-5); --tone-fade: var(--color-gray-2); --pct: 0%;" aria-hidden="true">
138
+ <div class="ws-goal-tubes__tube" style="--tone: var(--ws-edge-card); --tone-fade: var(--ws-track); --pct: 0%;" aria-hidden="true">
139
139
  <span class="ws-goal-tubes__value">0</span>
140
140
  <span class="ws-goal-tubes__dot"></span>
141
141
  <span class="ws-goal-tubes__wrap">
package/design-system/components/GoalTubes/style.css ADDED
@@ -0,0 +1,23 @@
1
+ /* ---- GoalTubes: upright tubes against one goal, each filled to its share ---- */
2
+ /* Each tube carries its tone and share as data: style="--tone: ...; --tone-fade: ...; --pct: 65%". */
3
+ .ws-goal-tubes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-xxs); }
4
+ .ws-goal-tubes--in-card { padding: var(--space-xl) var(--ws-card-inset) var(--ws-card-inset); }
5
+ .ws-goal-tubes__tube { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 0 var(--space-xxs); }
6
+ .ws-goal-tubes__value { font-size: var(--ws-text-value); font-weight: 600; line-height: calc(var(--space-md) + var(--space-xxs) / 2); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
7
+ .ws-goal-tubes__dot { width: calc(var(--space-xxs) * 1.75); height: calc(var(--space-xxs) * 1.75); margin: var(--space-xxs-plus) 0 var(--space-sm); border-radius: var(--radius-full); background: var(--tone); }
8
+ .ws-goal-tubes__wrap { position: relative; display: flex; width: 100%; justify-content: center; }
9
+ .ws-goal-tubes__body { position: relative; width: 100%; max-width: var(--space-6xl); height: calc(var(--space-9xl) + var(--space-md)); border: var(--ws-line) solid color-mix(in srgb, var(--tone) 50%, transparent); border-radius: var(--ws-radius-card); }
10
+ .ws-goal-tubes__body--short { height: var(--space-7xl); }
11
+ .ws-goal-tubes__inner { position: absolute; inset: calc(var(--space-xxs) - var(--ws-line)); }
12
+ .ws-goal-tubes__not-yet { position: absolute; left: calc(var(--space-xxs) * 0.375); right: calc(var(--space-xxs) * 0.375); top: calc(var(--space-xxs) * 1.375); bottom: calc(var(--pct) + var(--space-xxs) * 1.125); display: flex; gap: var(--space-xs); }
13
+ .ws-goal-tubes__not-yet > span { flex: 1; min-width: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--tone) 55%, transparent) calc(var(--ws-hairline) * 1.1), transparent calc(var(--ws-hairline) * 1.7)); background-size: calc(var(--space-xs) * 0.425) calc(var(--space-xs) * 0.425); }
14
+ .ws-goal-tubes__leader { position: absolute; left: 50%; top: calc((var(--space-md) + var(--space-xxs)) * -1); bottom: var(--pct); width: var(--ws-line); transform: translateX(-50%); background: color-mix(in srgb, var(--tone) 50%, transparent); }
15
+ /* "in srgb": a palette's stops are derived (color-mix), and a gradient blends those in Oklab unless told; sRGB is how the kit's own stops have always blended (D15). */
16
+ .ws-goal-tubes__fill { position: absolute; inset-inline: 0; bottom: 0; height: var(--pct); transform-origin: bottom; border-radius: var(--ws-radius-control); background: linear-gradient(to bottom in srgb, var(--tone), var(--tone-fade)); }
17
+ .ws-goal-tubes__baseline { position: absolute; bottom: 0; left: calc(var(--space-xxs) * -1); right: calc(var(--space-xxs) * -1); height: var(--ws-line); background: var(--ws-edge); }
18
+ .ws-goal-tubes__label { margin-top: var(--space-sm); text-align: center; line-height: calc(var(--space-md) + var(--space-xxs) / 4); }
19
+ .ws-goal-tubes__label--lead { font-size: var(--ws-text-body); font-weight: 500; color: var(--color-text-heading); }
20
+ /* The fill (North): 700 ms on the settle curve, the tubes 45 ms apart (style="--i: n" on each tube). */
21
+ @media (prefers-reduced-motion: no-preference) {
22
+ .ws-goal-tubes__fill.ws-grow-up { animation-duration: var(--ws-duration-fill); animation-timing-function: var(--ws-ease-settle); animation-delay: calc(var(--ws-build-at, 0s) + var(--i, 0) * var(--ws-stagger-row)); }
23
+ }
package/design-system/components/Heatmap/README.md ADDED
@@ -0,0 +1,133 @@
1
+ North's company health: lanes by their metrics as touching squares, each coloured by how it tracks its pace.
2
+
3
+ **Use it when**
4
+
5
+ - A page answers "where are we behind?" across many teams and metrics at once (departments by their five key numbers).
6
+ - Each square has a value and a share of its pace, and the reader scans for the misses before reading any number.
7
+
8
+ **Not for**
9
+
10
+ - One metric over time: use `TrendBars` or `StepLine`.
11
+ - A handful of key numbers: use `MetricTile` or `StatTiles`.
12
+ - A yes / no answer per cell (named you or not): use `Matrix`.
13
+
14
+ **Anatomy**
15
+
16
+ - Container: 1 px `--ws-edge-slot`, 12 corners (`--ws-radius-bubble`), 0 20 20 inside. Head: the title (`ws-section`)
17
+ and the key, 14 above and 12 below, over a full-width 1 px rule; 4 to the grid.
18
+ - Key: 50 x 8 swatches with 2 px corners, 2 apart, each band's words 3 under it (11/13 `--color-text-body`); "No
19
+ target" an outlined swatch 10 after. In a narrow head it wraps, and the swatches give way rather than run past the card.
20
+ - Grid, lanes as rows (the default): each row 88 tall; first the lane (a 36 px `Ring` arc with its score, 10, the name
21
+ 16/20 semibold navy and "78% of pace" 12/16 `--color-text-body`), then one square a metric (`style="--cols: 6"` on
22
+ the grid counts the lane too).
23
+ - Grid, lanes across the top (`__grid--lanes`, `style="--lanes: 7; --rows: 5"`): a 58 tall head per lane (a button:
24
+ its name 13/18 medium, a 12 px arrow, and its share of pace on a 5 px `PaceBar --thin` with the figure 14/20 semibold
25
+ beside it), then its squares down the column.
26
+ - Square (a button): 12 / 14 inside; the label 13/16 medium (two lines at most), at the foot the value 24/28 medium
27
+ -3% and the share of pace 12/16 semibold at the right. A 1 px ring in the page's colour inside each square
28
+ separates them, so the field reads as one block.
29
+ - Below the min width (160 a column for rows, 960 for six; 144 a lane for the transposed form, 1008 for seven) the
30
+ grid scrolls sideways inside its container, so a lane's name keeps whole words and a square's value and share fit side
31
+ by side. Set `--cols` on the grid so its min width follows the count. A share that still has no room drops under its
32
+ value, at the right.
33
+
34
+ **Heat (North's "focus" palette, on kit tokens)**
35
+
36
+ | Class | Share of pace | Ground | Words |
37
+ | --- | --- | --- | --- |
38
+ | `--h5` | 120% and up | teal 38% into the page | navy |
39
+ | `--h4` | 100 to 119 | teal 24% | navy, label body grey |
40
+ | `--h3` | 85 to 99 | teal 12% | navy, label body grey |
41
+ | `--h2` | 70 to 84 | `--ws-word-past-half` (purple) | `--ws-on-act` |
42
+ | `--h1` | under 70 | `--ws-word-needs-work` (plum pink) | `--ws-on-act` |
43
+ | `--none` | no target | none | muted |
44
+
45
+ Misses are full colour and on-pace squares are tinted, so the eye lands on what is behind. Every pair is AA in light
46
+ and dark: the full grounds are word tokens and their words the act ink, which flips with the theme.
47
+
48
+ - `--accent` (North's "paper tiles"): cream squares, a 3 px status bar on the left edge 14 in from top and foot (2 px
49
+ corners on its right), the share of pace in the status's AA word.
50
+
51
+ **Parts and modifiers**
52
+
53
+ - `.ws-heatmap__key-arm`: the five heat swatches, 2 apart.
54
+ - `.ws-heatmap__swatch`: a key swatch: a 50 x 8 bar in `--heat` with its band's words 3 under it; `--none` is the outlined "No target", its word on the swatch's edge.
55
+ - `.ws-ring__arc`: a lane's 36 px `Ring` arc beside its name (Ring's own markup).
56
+ - `.ws-heatmap__lane-head`: the transposed form's lane head, a button: its title over its thin PaceBar.
57
+ - `.ws-heatmap__lane-title`: the lane's name (13/18 medium, one line) and its arrow.
58
+ - `.ws-heatmap__go`: the 12 px arrow that slides in on hover and focus.
59
+ - `.ws-heatmap__open`: a square's open tile (a span inside the square, after its foot, `aria-hidden="true"`): what the
60
+ square shows when it grows to two cells. Its parts, in order: `.ws-heatmap__share` (the share of pace in words, 13/18
61
+ semibold), a `PaceBar` (in the square's ink, on a track of it) and `.ws-heatmap__door` (the 32 tall band at its foot,
62
+ "Open" and a 16 px chevron, a shade of the ink). A square without one never grows.
63
+ - `.ws-heatmap__lane-bar`: the lane's `PaceBar --thin` and its figure (14/20 semibold) beside it.
64
+
65
+ **States**
66
+
67
+ - Square: rest; hover washes it in the 5% ink tint (`--ws-hover`, 200 ms) over its heat, inside the paper ring; focus
68
+ draws a 2 px navy ring inside the square's 1 px gap. A click is the app's (the square grows into a `MetricTile`'s
69
+ open form).
70
+ - Square opening (North "Tile grows open / closes", the tile spring: visualDuration .26 s, bounce .06): a square with an
71
+ `__open` grows from one cell to two over the square below, on hover after the 40 ms intent (`--ws-hover-intent`), on
72
+ keyboard focus, or while the app sets `aria-expanded="true"` (a tap). Its height rides `--ws-spring-tile` over
73
+ `--ws-spring-tile-duration` (450 ms to settle, a hair of overshoot), lifted on `--ws-shadow-pop`. The last square of a
74
+ column grows upward instead and its label and value ride up a cell on the same spring, so the tile never runs past the
75
+ grid. 40 ms after it starts its details settle in, 35 ms apart (`--ws-stagger-square`), each 320 ms soft from 6 px
76
+ down: the share, the pace bar (its fill 700 ms on `--ws-ease-settle`, its dot popping on `--ws-spring-mark` .25 s
77
+ later) and the door. It closes 60 ms after the pointer leaves (`--ws-hover-leave`), back on the same spring, fading
78
+ over 120 ms (`--ws-duration-exit`). Focused, the open tile carries the square's navy ring. Only the tile's own height,
79
+ `translate`, opacity and the dot's `scale` move; the grid never reflows. Try it in the preview's last heatmap.
80
+ - Lane head: hover and focus slide its arrow in (opacity over 200 ms, 4 px over 320 ms soft).
81
+ - Linking (`--linking` on the heatmap, `__cell--lit` on the squares a hovered list row is about): the rest dim. Their
82
+ heat fades to 30% over the page (an accent square's status bar to 30%) and their words step to muted grey, which
83
+ stays AA on the faded ground; the words never fade with the fill (D2).
84
+ - Build (`--build`): squares fade in from the middle out over 900 ms, near linear so the wave reads; set `--i` on each
85
+ square, its distance from the middle.
86
+ - Reduced motion: everything in place, no fade; a square opens and closes at once.
87
+
88
+ **Behaviour**
89
+
90
+ - Each square is a `<button>` whose `aria-label` reads lane, metric, value and share ("Sales: Revenue, $412K, 94% of
91
+ pace"). The key carries `aria-label="Colour shows the share of pace"`.
92
+ - The sideways scroll is inside the container (`overscroll-behavior-x: contain`), never the page.
93
+
94
+ **Rules**
95
+
96
+ - One measure for the colour (share of pace) on the whole map, said in the key.
97
+ - A square with no target says so ("No target") and takes no colour.
98
+ - Labels say the metric in two lines at most; the value never wraps.
99
+
100
+ **Source**
101
+
102
+ **North**: Company health (Figma 721:1043; `style1.css` 830 to 895, 436 to 438): the lanes and squares, the transposed
103
+ form, the hover arrow, the inset paper ring, the accent palette, the build-in and the linking dim. North's own heat
104
+ colours (#257985, #6aacb3, #c6e2e4 for on pace, #744ccb, #9b1b5a for misses) are built here from the kit's teal and
105
+ the AA word tokens, so they follow dark mode. Overturns 07-scrolling's "charts never scroll" for this one chart.
106
+
107
+ **Markup**
108
+
109
+ ```html
110
+ <section class="ws-heatmap" aria-labelledby="hm">
111
+ <header class="ws-heatmap__head"><h3 class="ws-section" id="hm">Company health</h3><div class="ws-heatmap__key">...</div></header>
112
+ <div class="ws-heatmap__scroll">
113
+ <div class="ws-heatmap__grid" style="--cols: 6;">
114
+ <div class="ws-heatmap__row">
115
+ <div class="ws-heatmap__lane"><span class="ws-heatmap__lane-name"><b>Sales</b><small>78% of pace</small></span></div>
116
+ <button type="button" class="ws-heatmap__cell ws-heatmap__cell--h2" aria-label="Sales: Calls, 312, 78% of pace">
117
+ <span class="ws-heatmap__label">Calls</span>
118
+ <span class="ws-heatmap__foot"><span class="ws-heatmap__value">312</span><span class="ws-heatmap__flag">78%</span></span>
119
+ <!-- optional: the open tile; the square grows to two cells to show it -->
120
+ <span class="ws-heatmap__open" aria-hidden="true">
121
+ <span class="ws-heatmap__share">78% of pace</span>
122
+ <span class="ws-pace-bar" style="--value: 52%; --pace: 66%;"><span class="ws-pace-bar__fill"></span><span class="ws-pace-bar__gap"></span><span class="ws-pace-bar__dot"></span></span>
123
+ <span class="ws-heatmap__door"><span>Open</span><svg viewBox="0 0 16 16" aria-hidden="true">...</svg></span>
124
+ </span>
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </section>
130
+ ```
131
+
132
+ **Styles**: `Heatmap/style.css` (with `PaceBar` and `Ring`), in `bundle.css` and `fello.css` as `.ws-heatmap`. Every
133
+ value is a token.