@mkbabb/glass-ui 3.10.0 → 3.10.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 (269) hide show
  1. package/dist/{CardAction-DuArVky-.js → CardAction-DrAcAV4d.js} +2 -2
  2. package/dist/{CommandShortcut-CefCj5mt.js → CommandShortcut-mV2e1aG6.js} +2 -2
  3. package/dist/{DataTable-CUHMukiQ.js → DataTable-C3E6jZ5B.js} +2 -2
  4. package/dist/{DialogContent-BRkT1cjP.js → DialogContent-BxaaafFi.js} +1 -1
  5. package/dist/{HoverPopover-2LOIW34a.js → HoverPopover-CDA_SaCe.js} +1 -1
  6. package/dist/{MetricBadge-BZVWIxNy.js → MetricBadge-idgrkqoP.js} +5 -7
  7. package/dist/{Notification-DLMhblXR.js → Notification-Cu0nN17_.js} +1 -1
  8. package/dist/{NumberFieldContent-BbLOh8RU.js → NumberFieldContent-CHEWghnY.js} +2 -2
  9. package/dist/{PopoverContent-BId6ggf_.js → PopoverContent-DpUvdYY-.js} +1 -1
  10. package/dist/{Progress-iEuD9pxG.js → Progress-BW-StFw2.js} +1 -1
  11. package/dist/{ScrollingText-BPP84wKo.js → ScrollingText-DruYCni_.js} +1 -1
  12. package/dist/{SelectScrollDownButton-T32cVFeM.js → SelectScrollDownButton-pirzjm--.js} +3 -3
  13. package/dist/{Switch-Ch-k3Rv-.js → Switch-DeAqg6pi.js} +1 -1
  14. package/dist/{TabsList-B8CVOQPC.js → TabsList-BAVzOZpg.js} +2 -2
  15. package/dist/{Toaster-1rYWrmAm.js → Toaster-CvuuW_y9.js} +49 -46
  16. package/dist/{ToggleGroupItem-Cev4pOVK.js → ToggleGroupItem-DtD37b4G.js} +4 -4
  17. package/dist/animated-digit.js +2 -2
  18. package/dist/api/index.d.ts +3 -4
  19. package/dist/api.js +1 -1
  20. package/dist/aurora.js +66 -66
  21. package/dist/{badge-CaoFJzRb.js → badge-NdCQMvvB.js} +1 -1
  22. package/dist/badge.js +1 -1
  23. package/dist/{button-DN39cGqL.js → button-DyiWFAOE.js} +12 -12
  24. package/dist/button.js +1 -1
  25. package/dist/canvas.js +2 -2
  26. package/dist/card.js +1 -1
  27. package/dist/carousel.js +5 -5
  28. package/dist/collapsible.js +1 -1
  29. package/dist/{color-C5ls_QF7.js → color-B65wWyQz.js} +9 -7
  30. package/dist/color.js +1 -1
  31. package/dist/command.js +1 -1
  32. package/dist/components/custom/aurora/constants/shaders/mediums.glsl.d.ts +1 -1
  33. package/dist/components/custom/aurora/constants/shaders/vangogh-medium.glsl.d.ts +1 -0
  34. package/dist/components/custom/constellation/Constellation.vue.d.ts +12 -0
  35. package/dist/components/custom/constellation/composables/createConstellationField.d.ts +35 -0
  36. package/dist/components/custom/constellation/composables/useConstellationPointer.d.ts +35 -0
  37. package/dist/components/custom/constellation/constants.d.ts +36 -0
  38. package/dist/components/custom/constellation/constellationDraw.d.ts +18 -0
  39. package/dist/components/custom/constellation/constellationField.d.ts +10 -151
  40. package/dist/components/custom/constellation/constellationInteraction.d.ts +102 -0
  41. package/dist/components/custom/constellation/index.d.ts +3 -1
  42. package/dist/components/custom/controls/DarkModeToggle.vue.d.ts +11 -0
  43. package/dist/components/custom/dock/DockTabButton.vue.d.ts +3 -4
  44. package/dist/components/custom/dock/GlassDock.vue.d.ts +2 -110
  45. package/dist/components/custom/dock/composables/dockMorphContext.d.ts +36 -0
  46. package/dist/components/custom/dock/composables/useDockMorphWindow.d.ts +15 -0
  47. package/dist/components/custom/dock/composables/useDockShellProps.d.ts +131 -0
  48. package/dist/components/custom/dock/composables/useLayerTransition.d.ts +44 -0
  49. package/dist/components/custom/dock/constants.d.ts +23 -0
  50. package/dist/components/custom/expandable-container/ExpandableContainer.vue.d.ts +0 -29
  51. package/dist/components/custom/fourier-field/index.d.ts +1 -1
  52. package/dist/components/custom/fourier-field/math.d.ts +17 -0
  53. package/dist/components/custom/fourier-field/presets.d.ts +54 -0
  54. package/dist/components/custom/goo-blob/composables/buildMetaballProgram.d.ts +18 -0
  55. package/dist/components/custom/goo-blob/composables/uploadBlobUniforms.d.ts +41 -0
  56. package/dist/components/custom/goo-blob/composables/useBlobPointer.d.ts +4 -3
  57. package/dist/components/custom/goo-blob/composables/useMetaballRenderer.d.ts +11 -8
  58. package/dist/components/custom/goo-blob/constants.d.ts +52 -0
  59. package/dist/components/custom/goo-blob/shaders/metaball-uniforms.glsl.d.ts +1 -0
  60. package/dist/components/custom/instrument-chassis/InstrumentChassis.vue.d.ts +2 -2
  61. package/dist/components/custom/metric-badge/MetricBadge.vue.d.ts +0 -8
  62. package/dist/components/custom/tabs/constants.d.ts +12 -0
  63. package/dist/components/custom/underline/GlassUnderline.vue.d.ts +84 -0
  64. package/dist/components/custom/underline/index.d.ts +2 -0
  65. package/dist/components/custom/underline/types.d.ts +56 -0
  66. package/dist/components/ui/drawer/Drawer.vue.d.ts +1 -0
  67. package/dist/components/ui/dropdown-menu/DropdownMenuSubContent.vue.d.ts +2 -2
  68. package/dist/components/ui/slider/index.d.ts +22 -19
  69. package/dist/components/ui/toast/use-toast.d.ts +2 -2
  70. package/dist/composables/color/index.d.ts +12 -0
  71. package/dist/composables/glass/useSpecularTracking.d.ts +12 -3
  72. package/dist/composables/motion/core/index.d.ts +0 -1
  73. package/dist/composables/motion/curves.d.ts +48 -0
  74. package/dist/composables/motion/index.d.ts +2 -0
  75. package/dist/composables/motion/springPresets.d.ts +33 -0
  76. package/dist/composables/motion/suite.d.ts +2 -0
  77. package/dist/composables/motion/useSpringMount.d.ts +1 -1
  78. package/dist/configurator.js +1 -1
  79. package/dist/confirm-dialog.js +2 -2
  80. package/dist/constellation.js +260 -225
  81. package/dist/controls.js +48 -14
  82. package/dist/dark.js +1 -1
  83. package/dist/data-table.js +1 -1
  84. package/dist/dialog.js +2 -2
  85. package/dist/dock.js +339 -327
  86. package/dist/dockContext-bho8B1A4.js +17 -0
  87. package/dist/{dropdown-menu-D77jX6Df.js → dropdown-menu-DVnQcA0E.js} +7 -4
  88. package/dist/dropdown-menu.js +1 -1
  89. package/dist/expandable-container.js +38 -61
  90. package/dist/forms.js +2 -2
  91. package/dist/fourier-field.js +137 -102
  92. package/dist/fourier-math.js +2 -2
  93. package/dist/glass-ui.css +1 -1
  94. package/dist/glass-ui.js +287 -209
  95. package/dist/goo-blob.js +243 -212
  96. package/dist/hover-popover.js +1 -1
  97. package/dist/icon-tooltip.js +1 -1
  98. package/dist/index.d.ts +0 -3
  99. package/dist/keyboard.js +1 -1
  100. package/dist/labeled-field.js +5 -5
  101. package/dist/{math-DTpRVC0e.js → math-BUU9hHID.js} +18 -2
  102. package/dist/metric-badge.js +1 -1
  103. package/dist/metric-stack.js +1 -1
  104. package/dist/motion-core.js +69 -70
  105. package/dist/motion-curves.d.ts +1 -0
  106. package/dist/motion-curves.js +130 -0
  107. package/dist/motion.js +38 -37
  108. package/dist/notification.js +1 -1
  109. package/dist/number-field.js +1 -1
  110. package/dist/popover.js +1 -1
  111. package/dist/progress.js +1 -1
  112. package/dist/pulse.js +1 -1
  113. package/dist/reactive.js +1 -1
  114. package/dist/scrolling-text.js +1 -1
  115. package/dist/search.js +6 -6
  116. package/dist/select.js +1 -1
  117. package/dist/{sheet-VZEtNFvO.js → sheet-ChSXcJpU.js} +1 -1
  118. package/dist/sheet.js +1 -1
  119. package/dist/{slider-CyzcxBoh.js → slider-sfl8gFDD.js} +4 -4
  120. package/dist/slider.js +1 -1
  121. package/dist/sortable-list.js +2 -2
  122. package/dist/springPresets-aRSm-4_k.js +40 -0
  123. package/dist/stacked-icons.js +6 -6
  124. package/dist/styles/animations.css +18 -74
  125. package/dist/styles/components.css +1 -1
  126. package/dist/styles/dock/layer-group.css +22 -0
  127. package/dist/styles/dock/layers.css +11 -1
  128. package/dist/styles/dock/morph.css +95 -19
  129. package/dist/styles/dock/shell.css +12 -0
  130. package/dist/styles/dock-controls.css +28 -31
  131. package/dist/styles/drawer.css +2 -0
  132. package/dist/styles/floating-panel.css +2 -0
  133. package/dist/styles/glass/a11y-fallback.css +245 -0
  134. package/dist/styles/glass/ladder.css +304 -0
  135. package/dist/styles/glass/material.css +238 -0
  136. package/dist/styles/glass/progress-rail.css +78 -0
  137. package/dist/styles/glass/squircle.css +66 -0
  138. package/dist/styles/glass/surfaces.css +306 -0
  139. package/dist/styles/glass-refract.css +2 -0
  140. package/dist/styles/glass.css +31 -1188
  141. package/dist/styles/hover-popover.css +2 -0
  142. package/dist/styles/index.css +24 -6
  143. package/dist/styles/instrument-chassis.css +4 -0
  144. package/dist/styles/paper.css +2 -68
  145. package/dist/styles/theme.css +13 -20
  146. package/dist/styles/tokens/color-radius.css +250 -0
  147. package/dist/styles/tokens/dark-arm.css +194 -0
  148. package/dist/styles/tokens/glass.css +413 -0
  149. package/dist/styles/tokens/light-dark.css +158 -0
  150. package/dist/styles/tokens/offsets-sizing.css +406 -0
  151. package/dist/styles/tokens/property-regs.css +169 -0
  152. package/dist/styles/tokens/scale-paper.css +361 -0
  153. package/dist/styles/tokens/scheme-motion.css +334 -0
  154. package/dist/styles/tokens/shadow.css +132 -0
  155. package/dist/styles/tokens.css +22 -2355
  156. package/dist/styles/typography.css +18 -6
  157. package/dist/styles/utilities/a11y-overrides.css +140 -0
  158. package/dist/styles/utilities/animate.css +26 -0
  159. package/dist/styles/utilities/base.css +365 -0
  160. package/dist/styles/utilities/btn.css +399 -0
  161. package/dist/styles/utilities/components.css +317 -0
  162. package/dist/styles/utilities.css +19 -1260
  163. package/dist/styles/view-transition.css +0 -51
  164. package/dist/switch.js +1 -1
  165. package/dist/tabs.js +98 -98
  166. package/dist/timeline.js +2 -2
  167. package/dist/toast.js +1 -1
  168. package/dist/toggle-group.js +1 -1
  169. package/dist/typewriter.js +1 -1
  170. package/dist/underline.d.ts +1 -0
  171. package/dist/underline.js +85 -0
  172. package/dist/{useAnimatedNumber-Bcpy5Etf.js → useAnimatedNumber-DfVgP4te.js} +1 -1
  173. package/dist/{useConfiguratorState-DxAqksK6.js → useConfiguratorState-BdQXh9ie.js} +1 -1
  174. package/dist/useSpecularTracking-DFK_fhpG.js +32 -0
  175. package/dist/useSpringMount-DXUzxBjV.js +108 -0
  176. package/dist/vReveal-CqaCz_mC.js +44 -0
  177. package/dist/watercolor-dot.js +2 -2
  178. package/package.json +34 -52
  179. package/src/styles/animations.css +18 -74
  180. package/src/styles/dock/layer-group.css +22 -0
  181. package/src/styles/dock/layers.css +11 -1
  182. package/src/styles/dock/morph.css +95 -19
  183. package/src/styles/dock/shell.css +12 -0
  184. package/src/styles/dock-controls.css +28 -31
  185. package/src/styles/glass/a11y-fallback.css +245 -0
  186. package/src/styles/glass/ladder.css +304 -0
  187. package/src/styles/glass/material.css +238 -0
  188. package/src/styles/glass/progress-rail.css +78 -0
  189. package/src/styles/glass/squircle.css +66 -0
  190. package/src/styles/glass/surfaces.css +306 -0
  191. package/src/styles/glass.css +31 -1188
  192. package/src/styles/index.css +24 -6
  193. package/src/styles/paper.css +2 -68
  194. package/src/styles/theme.css +13 -20
  195. package/src/styles/tokens/color-radius.css +250 -0
  196. package/src/styles/tokens/dark-arm.css +194 -0
  197. package/src/styles/tokens/glass.css +413 -0
  198. package/src/styles/tokens/light-dark.css +158 -0
  199. package/src/styles/tokens/offsets-sizing.css +406 -0
  200. package/src/styles/tokens/property-regs.css +169 -0
  201. package/src/styles/tokens/scale-paper.css +361 -0
  202. package/src/styles/tokens/scheme-motion.css +334 -0
  203. package/src/styles/tokens/shadow.css +132 -0
  204. package/src/styles/tokens.css +22 -2355
  205. package/src/styles/typography.css +18 -6
  206. package/src/styles/utilities/a11y-overrides.css +140 -0
  207. package/src/styles/utilities/animate.css +26 -0
  208. package/src/styles/utilities/base.css +365 -0
  209. package/src/styles/utilities/btn.css +399 -0
  210. package/src/styles/utilities/components.css +317 -0
  211. package/src/styles/utilities.css +19 -1260
  212. package/src/styles/view-transition.css +0 -51
  213. package/dist/DeckProgress-Dmk4_AKN.js +0 -23
  214. package/dist/InstrumentRail-CUJ05YVG.js +0 -44
  215. package/dist/components/custom/deck-progress/DeckProgress.vue.d.ts +0 -27
  216. package/dist/components/custom/deck-progress/index.d.ts +0 -2
  217. package/dist/components/custom/dialog-native/GlassDialogNative.vue.d.ts +0 -57
  218. package/dist/components/custom/dialog-native/index.d.ts +0 -1
  219. package/dist/components/custom/glass-panel/GlassPanel.vue.d.ts +0 -41
  220. package/dist/components/custom/glass-panel/index.d.ts +0 -2
  221. package/dist/components/custom/handmark/HandMark.vue.d.ts +0 -29
  222. package/dist/components/custom/handmark/brush.d.ts +0 -219
  223. package/dist/components/custom/handmark/freehand.d.ts +0 -69
  224. package/dist/components/custom/handmark/geometry.d.ts +0 -32
  225. package/dist/components/custom/handmark/index.d.ts +0 -21
  226. package/dist/components/custom/handmark/ink.d.ts +0 -11
  227. package/dist/components/custom/handmark/texture.d.ts +0 -39
  228. package/dist/components/custom/handmark/types.d.ts +0 -53
  229. package/dist/components/custom/handmark/useHandMark.d.ts +0 -66
  230. package/dist/components/custom/header-ribbon/HeaderRibbon.vue.d.ts +0 -31
  231. package/dist/components/custom/header-ribbon/index.d.ts +0 -2
  232. package/dist/components/custom/header-ribbon/types.d.ts +0 -7
  233. package/dist/components/custom/instrument-rail/InstrumentRail.vue.d.ts +0 -91
  234. package/dist/components/custom/instrument-rail/index.d.ts +0 -2
  235. package/dist/composables/motion/useRouteTransition.d.ts +0 -42
  236. package/dist/deck-progress.d.ts +0 -1
  237. package/dist/deck-progress.js +0 -2
  238. package/dist/dockContext-BKeIMmNk.js +0 -9
  239. package/dist/glass-panel.d.ts +0 -1
  240. package/dist/glass-panel.js +0 -44
  241. package/dist/handmark.d.ts +0 -1
  242. package/dist/handmark.js +0 -609
  243. package/dist/header-ribbon.d.ts +0 -1
  244. package/dist/header-ribbon.js +0 -63
  245. package/dist/instrument-rail.d.ts +0 -1
  246. package/dist/instrument-rail.js +0 -2
  247. package/dist/useGlassRenderer-D7YGOYiM.js +0 -69
  248. package/dist/useSpecularTracking-BVRZsRHA.js +0 -26
  249. package/dist/useSpringMount-BJSHcLl3.js +0 -113
  250. package/dist/useViewTransition-DaN5Zrox.js +0 -21
  251. package/dist/vReveal-zUIQk-rJ.js +0 -53
  252. /package/dist/{CollapsibleContent-CP9qF1v4.js → CollapsibleContent-Drow5WkV.js} +0 -0
  253. /package/dist/{DialogFooter-Gprw8H_A.js → DialogFooter-DufLHi0y.js} +0 -0
  254. /package/dist/{IconTooltip-Cus0fvK0.js → IconTooltip-BrQ5p181.js} +0 -0
  255. /package/dist/{Input-xuDwALQR.js → Input-B-F818RU.js} +0 -0
  256. /package/dist/{_plugin-vue_export-helper-ok8pgSl5.js → _plugin-vue_export-helper-DWghtRt7.js} +0 -0
  257. /package/dist/{compile-BOXjLUxu.js → compile-Ce_V55zi.js} +0 -0
  258. /package/dist/{constants-yKeKnE84.js → constants-C8NMonuo.js} +0 -0
  259. /package/dist/{presets-Dkdv55Gt.js → presets-1OhFpaIC.js} +0 -0
  260. /package/dist/{prng-D27-B3tK.js → prng-CjVgzjQT.js} +0 -0
  261. /package/dist/{resolveCanvasColor-BBiYfp8g.js → resolveCanvasColor-CRvVzOvP.js} +0 -0
  262. /package/dist/{useCanvas2D-ClrQuZtp.js → useCanvas2D-CSeH8h16.js} +0 -0
  263. /package/dist/{useGlobalDark-d6waty-X.js → useGlobalDark-D7R9OypB.js} +0 -0
  264. /package/dist/{useIntersectionPause-Cck5Uxk8.js → useIntersectionPause-DAdVPVp4.js} +0 -0
  265. /package/dist/{useInterval-Dsmqwi03.js → useInterval-D3USn0yc.js} +0 -0
  266. /package/dist/{useKeyboardShortcuts-CyIYrndH.js → useKeyboardShortcuts-i8tHd5WO.js} +0 -0
  267. /package/dist/{useScrollProgress-CffFGLa5.js → useScrollProgress-CcgmgMQt.js} +0 -0
  268. /package/dist/{useSortable-C8ReQ50P.js → useSortable-DnyGXKKY.js} +0 -0
  269. /package/dist/{useTextHighlight-CWEi25hf.js → useTextHighlight-B3b10W6r.js} +0 -0
@@ -8,2360 +8,27 @@
8
8
  * Structural tokens (durations, easings, springs, z-index, focus ring,
9
9
  * interactive scales) are stable across consumers. Visual tokens (colors,
10
10
  * shadows, radii, grain opacities) are consumer-overridable.
11
+ *
12
+ * This file is the thin @import ROOT of the token cascade. The token body is
13
+ * carved into cohesive `tokens/*.css` partials (each under the no-god-module
14
+ * 500-line bound), @import-ed below in CASCADE ORDER. The cascade is isomorphic:
15
+ * the master :root sub-ranges each carry their own :root{} (adjacent
16
+ * same-selector blocks resolve identically), and the post-root overrides
17
+ * (light-dark, the .dark arm, the @property registrations) keep their source
18
+ * order. See docs/precepts/design-idioms.md §cohesion-aware partials. The
19
+ * partial cascade order is BINDING — light-dark after the master partials
20
+ * (overrides them), dark-arm after light-dark, property-regs last
21
+ * (registrations + the specular magnitude cohort that reads them).
11
22
  */
12
23
 
13
- :root {
14
- /* ═══════════════════════════════════════════════
15
- §-1 COLOR-SCHEME (AQ.W2 §1)
16
-
17
- Lets native UI (scrollbars, spinbuttons, form-control chrome, the
18
- default focus ring) honor the OS preference when the consumer has
19
- NOT pinned a `.dark` class. glass-ui's dark mode is class-driven
20
- (`.dark`, theme.css `@variant dark`), so `.dark` overrides to a hard
21
- `dark` regardless of OS — but absent the class, native chrome should
22
- still track `prefers-color-scheme`. `light dark` (not `only light`)
23
- on `:root` delivers that; `.dark` hard-pins `dark`.
24
-
25
- Baseline Widely Available → adopt natively, no `@supports` guard
26
- (older engines ignore the property and keep default-light chrome).
27
- `accent-color` (AQ.W2 §4) is the companion native-control brand;
28
- both are inherited built-in <color>/keyword properties re-specified
29
- inside `.dark`. The `--accent-color` token is defined in the §5
30
- color block below (custom properties resolve order-independently).
31
- ═══════════════════════════════════════════════ */
32
- color-scheme: light dark;
33
- accent-color: var(--accent-color);
34
-
35
- /* ═══════════════════════════════════════════════
36
- §0 FONT TOKEN SOURCE-OF-TRUTH
37
-
38
- The single authoritative declaration of the library's font register.
39
- theme.css bridges each --font-stack-* to its Tailwind --font-* namespace
40
- var; typography.css consumes the bridged --font-* names. The public
41
- runtime knobs remain --font-*, --leading-*, --tracking-*.
42
-
43
- ONE brand register: Plus Jakarta Sans (text + display) + Fira Code (mono).
44
- --font-stack-text drives the body/heading/prose/display register — the
45
- library DEFAULT is the register every live surface paints (the demo +
46
- speedtest render Plus Jakarta everywhere). The calibrated "Plus Jakarta
47
- Sans Fallback" / "Fira Code Fallback" faces (declared in typography.css)
48
- wrap the system stacks with Capsize metric overrides so the swap window
49
- is geometry-neutral (zero CLS). --font-stack-display aliases the text
50
- register: there is no separate display-serif voice. */
51
- --font-stack-text: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif;
52
- --font-stack-display: var(--font-stack-text);
53
- --font-stack-sans: var(--font-stack-text);
54
- --font-stack-mono: "Fira Code", "Fira Code Fallback", "Fira Mono", monospace;
55
-
56
- --type-leading-micro: 1.2;
57
- --type-leading-caption: 1.3;
58
- --type-leading-small: 1.4;
59
- --type-leading-body: 1.5;
60
- --type-leading-prose: 1.618;
61
- --type-leading-heading: 1.2;
62
- --type-leading-display: 1.1;
63
-
64
- --type-tracking-tight: -0.025em;
65
- --type-tracking-snug: -0.01em;
66
- --type-tracking-normal: 0;
67
- --type-tracking-wide: 0.025em;
68
- --type-tracking-wider: 0.05em;
69
- --type-tracking-caps: 0.1em;
70
-
71
- /* ═══════════════════════════════════════════════
72
- §1 DURATION
73
- ═══════════════════════════════════════════════ */
74
- --duration-instant: 0.1s;
75
- --duration-fast: 0.2s;
76
- --duration-normal: 0.3s;
77
- --duration-slow: 0.45s;
78
- --duration-panel: 0.55s;
79
- --duration-xl: 1s;
80
- --duration-xxl: 1.5s;
81
- --duration-shimmer-fast: 3s;
82
- --duration-shimmer: 5s;
83
- /* Sparkle micro-event — primary-CTA disco-grain sparkle sweep.
84
- @deprecated 3.10 — the disco-star is EXCISED (D6.b); the `sparkle-sweep`
85
- keyframe is tombstoned (animations.css) and no live recipe consumes this
86
- duration. Retained one minor so an out-of-tree consumer resolves a value
87
- rather than `unset`; full delete (this token + the theme bridge + the
88
- keyframe) lands in 3.11. */
89
- --duration-sparkle: 600ms;
90
-
91
- /* AH.W5-e (FA-8 §4d) — motion-duration + staged-reveal canon.
92
-
93
- Six duration tokens + three delay tokens promoted from raw literals
94
- at speedtest's celebratory-reveal SFCs (SpeedtestResults, ThankYou,
95
- ResultStack, CompleteBadge). Unified under the `--motion-*`
96
- namespace (parallel to `--motion-ease-*`) so all motion tokens
97
- cluster at one canon — duration + easing arm together. */
98
-
99
- /* Staged-entrance pairing — opacity + transform Vue <Transition> arms
100
- in the celebratory headline + result-row reveals. Partners with
101
- `--motion-ease-staged-entrance` / `--motion-ease-overshoot`. */
102
- --motion-duration-staged: 320ms;
103
-
104
- /* One-shot celebratory shimmer — gold-headline shimmer animation
105
- duration + staging delay. Shared canon so the speedtest results
106
- headline and the thank-you headline stay in lockstep. */
107
- --motion-duration-complete-shimmer: 2.4s;
108
- --motion-delay-complete-shimmer: 220ms;
109
- /* The gold-headline shimmer reads these two tokens under a one-shot
110
- animation: at 2.4s + 220ms delay the bright band traverses the headline
111
- glyphs cleanly. Load-bearing — zeroing either collapses the shimmer to
112
- an imperceptible blow-through. */
113
-
114
- /* CompleteBadge staged-reveal cluster — the disc / ring / check curve
115
- fires at three asymmetric durations + delays per the A4-AF staged-
116
- variety design intent. Promoting the magic numbers makes the
117
- staged-variety visible at the canon. */
118
- --motion-duration-badge-disc: 420ms;
119
- --motion-duration-badge-ring: 560ms;
120
- --motion-duration-badge-check: 380ms;
121
- --motion-delay-badge-disc: 80ms;
122
- --motion-delay-badge-ring: 220ms;
123
- --motion-delay-badge-check: 460ms;
124
-
125
- /* Staggered-reveal increment canon — three perceptually-distinct tiers for
126
- per-row/per-cell/per-bar cascades:
127
- • tight (40ms) — dense row cascades, sub-perceptual gap
128
- • default (80ms) — the canonical row-stagger rhythm (matches
129
- `useStagger`'s built-in fallback)
130
- • relaxed (120ms) — wider cascades where each reveal carries its own
131
- attention budget
132
- Adjacent tiers keep cross-beats quiet (80 is the LCM of 40 and 2/3 of
133
- 120). Consumers read these via inline-style calc() or `getComputedStyle`
134
- at runtime. */
135
- --motion-stagger-tight: 40ms;
136
- --motion-stagger-default: 80ms;
137
- --motion-stagger-relaxed: 120ms;
138
-
139
- /* ═══════════════════════════════════════════════
140
- §2 EASING — Spring curves via linear()
141
-
142
- Generated from `scripts/regen-spring-tokens.mjs` — DO NOT hand-edit.
143
- To tune a spring: edit the PRESETS table in the script and re-run
144
- `node scripts/regen-spring-tokens.mjs`. The script invokes
145
- `springLinearStops()` from `@mkbabb/keyframes.js` which solves the
146
- analytic second-order damped harmonic oscillator and emits CSS
147
- `linear()` stops; this is the single source of truth tying each
148
- (response, ζ) pair to its serialized curve.
149
-
150
- iOS-canonical (response, dampingFraction) per AL-X4 §3:
151
- smooth: (0.50s, ζ=0.86) — gentle settle, sub-perceptual overshoot ~0.5%
152
- snappy: (0.35s, ζ=0.65) — quick crisp, overshoot ~+6.8%
153
- bouncy: (0.50s, ζ=0.45) — emphatic overshoot ~+20.5%
154
- gentle: (0.70s, ζ=1.00) — patient critically-damped
155
- dock: (0.32s, ζ=0.70) — dock expand/collapse morph, overshoot ~+4.6%
156
-
157
- Note on `smooth`: at ζ=0.86 the analytic solver produces a peak
158
- of 1.00498 (+0.5%) at the 24% slot — mathematically present but
159
- sub-perceptual. I keep ζ=0.86 rather than promoting to ζ=1.0
160
- because true critical damping is `gentle`'s register, and
161
- `smooth` wants a slightly faster visual settle than `gentle`'s
162
- patient curve. The 0.5% peak does not read as overshoot to the
163
- eye but does narrowly distinguish `smooth` from `gentle`.
164
-
165
- ── EASING DOCTRINE (AX.W52 §6 — which easing fits which job) ──
166
- ONE recorded rule so the animation easing stops forking live. This
167
- FORMALIZES the already-correct `transitions.css` idiom (enter=spring,
168
- exit=bezier) as the house rule every recipe reaches for:
169
-
170
- | Transition kind | Easing |
171
- |--------------------------------------------------|-------------------------------------|
172
- | Surface props (bg, border, color, box-shadow, | `--ease-standard` (bezier — a |
173
- | opacity) | colour cross-fade reads as a |
174
- | | wobble on a spring) |
175
- | Transform — hover/press/active (scale, translate,| `--spring-smooth` (the ONE button/ |
176
- | rotate) | interactive scale register) or |
177
- | | `--spring-snappy` (crisp press) |
178
- | Enter (mount, popover open, dialog in) | `--spring-bouncy` / `--spring-snappy`|
179
- | Exit (unmount, close) | `--ease-out` / `--ease-standard` |
180
- | | (bezier, NO overshoot — an exit |
181
- | | must never overshoot past gone) |
182
- | Position-tracked (specular pointer follow) | `--ease-standard` |
183
-
184
- The BUTTON family (`.btn-pill` / `.tap-squish` / `.glass-btn` /
185
- `btn-interactive`) UNIFIES its `scale` transform leg onto ONE register —
186
- `--spring-smooth` — so hover + press read as one motion language (the
187
- hover lift is the restrained `--scale-hover-btn` = 1.05, not the 1.08
188
- `--scale-hover`). Springs read alive on TRANSFORM and ENTER (overshoot =
189
- physicality); a spring on a COLOR or an EXIT reads as a wobble/hesitation.
190
- `--ease-apple` is the ambient-only register (consumed solely by the Pulse
191
- aura `--animate-ambient-pulse-easing` — NOT a second smooth-ease authority
192
- for interactive transforms; those use `--spring-smooth`).
193
- ═══════════════════════════════════════════════ */
194
- --spring-smooth: linear(0, 0.09804 2.041%, 0.29288 4.082%, 0.49447 6.122%, 0.66436 8.163%, 0.79208 10.204%, 0.88050 12.245%, 0.93754 14.286%, 0.97182 16.327%, 0.99083 18.367%, 1.00027 20.408%, 1.00413 22.449%, 1.00502 24.490%, 1.00453 26.531%, 1.00355 28.571%, 1.00254 30.612%, 1.00169 32.653%, 1.00105 34.694%, 1.00060 36.735%, 1.00031 38.776%, 1.00014 40.816%, 1.00005 42.857%, 1.00000 44.898%, 1.00000 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
195
- --spring-snappy: linear(0, 0.10438 2.041%, 0.32622 4.082%, 0.56668 6.122%, 0.77153 8.163%, 0.91961 10.204%, 1.01073 12.245%, 1.05549 14.286%, 1.06804 16.327%, 1.06171 18.367%, 1.04686 20.408%, 1.03044 22.449%, 1.01629 24.490%, 1.00596 26.531%, 0.99954 28.571%, 0.99633 30.612%, 0.99537 32.653%, 0.99575 34.694%, 0.99674 36.735%, 0.99786 38.776%, 0.99884 40.816%, 0.99956 42.857%, 1.00001 44.898%, 1.00024 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
196
- --spring-bouncy: linear(0, 0.11105 2.041%, 0.36430 4.082%, 0.65496 6.122%, 0.90929 8.163%, 1.08828 10.204%, 1.18289 12.245%, 1.20482 14.286%, 1.17641 16.327%, 1.12214 18.367%, 1.06276 20.408%, 1.01239 22.449%, 0.97809 24.490%, 0.96099 26.531%, 0.95826 28.571%, 0.96514 30.612%, 0.97666 32.653%, 0.98873 34.694%, 0.99867 36.735%, 1.00520 38.776%, 1.00825 40.816%, 1.00847 42.857%, 1.00686 44.898%, 1.00443 46.939%, 1.00199 48.980%, 1.00004 51.020%, 0.99880 53.061%, 0.99827 55.102%, 0.99829 57.143%, 0.99866 59.184%, 0.99916 61.224%, 0.99966 63.265%, 1.00004 65.306%, 1.00027 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
197
- --spring-gentle: linear(0, 0.09415 2.041%, 0.27374 4.082%, 0.45506 6.122%, 0.60779 8.163%, 0.72570 10.204%, 0.81213 12.245%, 0.87336 14.286%, 0.91570 16.327%, 0.94445 18.367%, 0.96371 20.408%, 0.97645 22.449%, 0.98481 24.490%, 0.99025 26.531%, 0.99377 28.571%, 0.99604 30.612%, 0.99749 32.653%, 0.99841 34.694%, 0.99900 36.735%, 0.99937 38.776%, 0.99961 40.816%, 0.99975 42.857%, 0.99985 44.898%, 1.00000 46.939%, 1.00000 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
198
- --spring-dock: linear(0, 0.10282 2.041%, 0.31773 4.082%, 0.54783 6.122%, 0.74309 8.163%, 0.88550 10.204%, 0.97598 12.245%, 1.02452 14.286%, 1.04368 16.327%, 1.04501 18.367%, 1.03739 20.408%, 1.02681 22.449%, 1.01672 24.490%, 1.00873 26.531%, 1.00323 28.571%, 0.99996 30.612%, 0.99837 32.653%, 0.99789 34.694%, 0.99805 36.735%, 0.99848 38.776%, 0.99897 40.816%, 0.99940 42.857%, 0.99972 44.898%, 0.99993 46.939%, 1.00004 48.980%, 1.00000 51.020%, 1.00000 53.061%, 1.00000 55.102%, 1.00000 57.143%, 1.00000 59.184%, 1.00000 61.224%, 1.00000 63.265%, 1.00000 65.306%, 1.00000 67.347%, 1.00000 69.388%, 1.00000 71.429%, 1.00000 73.469%, 1.00000 75.510%, 1.00000 77.551%, 1.00000 79.592%, 1.00000 81.633%, 1.00000 83.673%, 1.00000 85.714%, 1.00000 87.755%, 1.00000 89.796%, 1.00000 91.837%, 1.00000 93.878%, 1.00000 95.918%, 1.00000 97.959%, 1);
199
-
200
- /* Core cubic-bezier (exits, fallbacks, non-spring uses) */
201
- --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
202
- --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
203
- --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
204
- --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
205
-
206
- --ease-standard: var(--motion-ease-standard);
207
- --ease-out: var(--motion-ease-out);
208
- --ease-in: var(--motion-ease-in);
209
- --ease-out-expo: var(--motion-ease-out-expo);
210
-
211
- /* Apple-inspired — micro-interactions, switches, dock hover */
212
- --motion-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
213
-
214
- --ease-apple: var(--motion-ease-apple);
215
- --ease-spring: var(--spring-snappy);
216
- --ease-decelerate: var(--ease-out);
217
- --ease-accelerate: var(--ease-in);
218
-
219
- /* ═══════════════════════════════════════════════
220
- §2.A AMBIENT MOTION — Pulse aura tokens
221
-
222
- Breathing rhythm for `<Pulse variant="aura">`. The 6s duration is the
223
- canon ambient-pulse rate; scale 1.0 ↔ 1.15 reads as a quiet halo at
224
- intensity="normal" (Pulse remaps min/max from its `intensity` prop).
225
- Reduced motion: Pulse.vue parks at the min stop, breath cycle disabled.
226
-
227
- AX.W57 (P6) — the aura re-baselined from a glowing DISC to an AMBIENT
228
- halo. The egregiousness was doubly-stacked: a 0.55-density currentColor
229
- radial multiplied by an element opacity the `ambient-pulse` keyframe
230
- drove up to 0.95 mid-breath (so a saturated viz hue read as a near-
231
- opaque throbbing blob). The fix is two decoupled, single-source knobs:
232
- · `--pulse-aura-strength` (0..1) — the ONE gradient-density scalar
233
- both color-mix stops derive via calc() (replaces the
234
- `--pulse-aura-opacity-pct` / `-pct-num` twin desync trap — the
235
- percent and the raw number had to be hand-kept in sync).
236
- · `--pulse-aura-breath-{min,max}` — the aura's OWN element-opacity
237
- range, decoupled from the shared `--pulse-aura-opacity-*` shimmer
238
- tokens (those stay 0.55/0.95 for the neutral skeleton-breath, where
239
- a grey shimmer at that range is the correct soft swell).
240
- The loud old read is the explicit `intensity="vivid"` opt-in. */
241
- --animate-ambient-pulse-duration: 6s;
242
- --animate-ambient-pulse-scale-min: 1.0;
243
- --animate-ambient-pulse-scale-max: 1.15;
244
- --animate-ambient-pulse-easing: var(--ease-apple);
245
-
246
- /* Aura gradient density — ONE scalar (0..1). The center stop paints at
247
- `strength`, the mid stop at `strength * 0.35` (both via calc() in
248
- Pulse.vue). 0.22 reads as an ambient wash, not a glowing disc. */
249
- --pulse-aura-strength: 0.22;
250
-
251
- /* Aura element-opacity breath range (the `ambient-pulse` keyframe stops).
252
- Quiet: the halo stays a wash at every phase of the 6s cycle. */
253
- --pulse-aura-breath-min: 0.28;
254
- --pulse-aura-breath-max: 0.42;
255
-
256
- /* Skeleton-breath shimmer range — the SHARED neutral-shimmer stops
257
- (`.skeleton-breath` reads these; a grey shimmer at 0.55↔0.95 is the
258
- correct soft swell, distinct from the aura's calmer breath above). */
259
- --pulse-aura-opacity-min: 0.55;
260
- --pulse-aura-opacity-max: 0.95;
261
-
262
- /* ═══════════════════════════════════════════════
263
- §2.B SECTIONED PROGRESS — phase-bus rail (AB.W3.T2)
264
-
265
- The sectioned `<Progress variant="sectioned">` exposes one
266
- height knob + one track tint knob. Defaults size the rail at
267
- 0.875rem (14px) — the W3 spec minimum (≥ 14px mobile, ≥ 18px
268
- desktop). Consumers override the height per breakpoint via the
269
- same token name on the consumer-side surface.
270
-
271
- The bar reads as a recessed glass channel: inner top
272
- catch-light + lower inner shadow + small outer drop. The
273
- depth lives entirely in the Progress.vue scoped block; this
274
- token only parameterises the rail BACKGROUND and HEIGHT —
275
- depth shadows compose from the existing --shadow-color rung.
276
- ═══════════════════════════════════════════════ */
277
- --progress-sectioned-height: 0.875rem;
278
- --progress-sectioned-track: var(--secondary);
279
-
280
- /* ═══════════════════════════════════════════════
281
- §2.C ANIMATION EXPRESSIVENESS
282
-
283
- Three idiom families:
284
- • Progress lifecycle — the progress bar rides an intake pulse on
285
- rising-edge, a crescendo brightening at ≥85%, and a one-shot discharge
286
- flash at 100% (the crescendo is the typed `@property --progress-crescendo`).
287
- • Chassis phase-tint companion — `@property --phase-tint-amount` so the
288
- chassis backdrop warms toward the active phase, interpolating with
289
- `--phase-color` across the consumer's phase-handoff window (600ms default).
290
- • Audacious button press-ripple — `btn-audacious` gains a typed
291
- `@property --ripple-radius` ramping 0 → max over the ripple duration.
292
- ═══════════════════════════════════════════════ */
293
-
294
- /* Progress lifecycle — typed crescendo + segment-local durations */
295
- --motion-duration-progress-intake: 220ms; /* rising-edge pulse */
296
- --motion-duration-progress-crescendo: 240ms; /* leading-edge brighten */
297
- --motion-duration-progress-indeterminate: 4s; /* indeterminate sweep period */
298
-
299
- /* Chassis depth-of-tint peak — the amount `--phase-tint-amount`
300
- interpolates toward when a phase is active. Subtle by intent;
301
- a 6% color-mix reads as "warmth toward the phase" without
302
- overwhelming the chassis chrome's resting register. */
303
- --phase-tint-peak: 6%;
304
-
305
- /* Audacious button press-ripple — geometry + duration. The ripple
306
- radius caps at 12rem so an oversized button doesn't paint a
307
- transparent halo beyond its bounds (the parent's `overflow:
308
- hidden` clips the visible region; the cap keeps the gradient
309
- falloff well-defined). */
310
- --ripple-radius-max: 12rem;
311
- --motion-duration-ripple: 340ms;
312
-
313
- /* Skeleton breath variant — the M.3 "known-imminent" loading
314
- register. 6s cycle (the canon ambient rate) so a known-imminent
315
- skeleton breathes in lockstep with the dial and the Pulse aura.
316
- Coexists with the 1.5s shimmer (sliding gradient) and the
317
- Tailwind animate-pulse (2s, short-wait) variants — distinct
318
- temporal registers per use-case. */
319
- --skeleton-breath-duration: 6s;
320
-
321
- /* ═══════════════════════════════════════════════
322
- §3 Z-INDEX SCALE
323
- ═══════════════════════════════════════════════ */
324
- /* V.W2 T12 — Aurora background tier (sits behind --z-background).
325
- Consumed by `<Aurora>` in speedtest's App.vue (`-z-10` literal today). */
326
- --z-behind: -10;
327
- --z-background: 0;
328
- --z-content: 10;
329
- --z-controls: 20;
330
- --z-bar: 30;
331
- --z-header: 35;
332
- --z-dock: 40;
333
- --z-panel: 45;
334
- --z-overlay: 50;
335
- --z-hovercard: 120;
336
- --z-tooltip: 120;
337
- --z-popover: 130;
338
- --z-modal: 140;
339
- --z-fullscreen: 150;
340
- --z-toast: 160;
341
- --z-toggle: 999;
342
- --z-max: 9999;
343
- --z-debug: 99999;
344
-
345
- /* §4 BORDER RADIUS — authored ONCE in theme.css's leading plain @theme
346
- block (AV.W16 TW1). A plain @theme mints each `--radius-*` as a global
347
- :root var, so the `var(--radius-card)` recipe reads across this file
348
- resolve from that source. The prior §4 twin here doubled the override
349
- surface (the anti-pattern the @theme-inline migration kills) — excised;
350
- retune the scale at theme.css. */
351
-
352
- /* ═══════════════════════════════════════════════
353
- §5 COLOR PALETTE — Warm cream / muted black
354
-
355
- Neutral scale: perceptually-uniform L* steps at hue 48 (warm paper).
356
- Each pair visibly distinct at 20px viewing distance.
357
- 0 → 1 : 3 L (page → soft field)
358
- 1 → 2 : 5 L (soft field → chip / tab-inactive)
359
- 2 → 3 : 8 L (chip → hover / highlight)
360
- 3 → 4 : 12 L (highlight → subtle border)
361
- 4 → 5 : 25 L (border → muted text, contrast jump)
362
- 5 → 6 : 10 L (muted text → strong-muted text, secondary register)
363
-
364
- Semantic aliases re-point into the scale — no back-compat shims.
365
- ═══════════════════════════════════════════════ */
366
- --neutral-0: hsl(48 12% 98%); /* L 98 — page surface */
367
- --neutral-1: hsl(48 10% 95%); /* L 95 — soft field bg */
368
- --neutral-2: hsl(48 9% 90%); /* L 90 — chip / tab-inactive bg */
369
- --neutral-3: hsl(48 8% 82%); /* L 82 — hover / highlight bg */
370
- --neutral-4: hsl(48 7% 70%); /* L 70 — subtle border */
371
- --neutral-5: hsl(48 6% 40%); /* L 40 — muted text (WCAG AA: 5.23:1 vs L98 page / 4.91:1 vs L95 muted) */
372
- /* W7-α' (AK-FD1) — strong-muted text rung. One principled ladder step
373
- (10 L darker, the 5→6 cadence above) past muted text toward
374
- --foreground (L10). Sits at the 1/3 point of the L40→L10 muted→primary
375
- gap: legible secondary text that reads less-faint than muted but not as
376
- assertive as primary. By-COLOUR per the canon (a neutral step, not an
377
- alpha mute); hue held at 48, sat nudged 6→7 toward --foreground's 10.
378
- WCAG AA: 7.79:1 vs L98 page / 7.31:1 vs L95 muted (cf. neutral-5's
379
- 5.23:1) — comfortably above the 4.5:1 body floor. */
380
- --neutral-6: hsl(48 7% 30%); /* L 30 — strong-muted text (secondary register) */
381
-
382
- --background: var(--neutral-0);
383
- --foreground: hsl(24 10% 10%);
384
- --card: var(--neutral-0);
385
- --card-foreground: var(--foreground);
386
- --popover: var(--neutral-0);
387
- --popover-foreground: var(--foreground);
388
-
389
- /* R0G-5 (AO.W4) — warm-neutral public-data panel surface. One warmth step
390
- off --card (hue 44 vs 48, +4 sat, −2 L) so a consumer's aurora-OFF
391
- /dashboard/* surfaces read with the admin canon's warm-neutral chrome
392
- instead of the colder bare card. Opaque surface (the --card family), not
393
- a --surface-tint-* overlay. Consumer applies on /dashboard/* only. */
394
- --surface-public-data-panel: hsl(44 16% 96%);
395
-
396
- --muted: var(--neutral-1);
397
- --muted-foreground: var(--neutral-5);
398
- /* W7-α' (AK-FD1) — one rung less-faint than --muted-foreground for
399
- secondary text that reads too-faint at the muted rung over resting
400
- glass (CardDescription). By-colour neutral step, not alpha. */
401
- --muted-foreground-strong: var(--neutral-6);
402
- --secondary: var(--neutral-2);
403
- --secondary-foreground: var(--foreground);
404
- --accent: var(--neutral-3);
405
- --accent-foreground: var(--foreground);
406
-
407
- --border: var(--neutral-4);
408
- --input: var(--neutral-4);
409
-
410
- --primary: hsl(24 10% 10%);
411
- --primary-foreground: var(--neutral-0);
412
- --destructive: hsl(0 72% 50%);
413
- --destructive-foreground: var(--neutral-0);
414
- --ring: hsl(24 10% 10%);
415
- --shadow: hsl(24 10% 10%);
416
- --shadow-color: var(--foreground);
417
-
418
- /* AQ.W2 §4 — native-control accent. `accent-color` is an inherited
419
- built-in <color>, so per the §2b resolve-late discipline it reads a
420
- dedicated UNREGISTERED token set per-mode (NOT light-dark()) and is
421
- re-specified inside `.dark` — otherwise the accent freezes to the
422
- light shade at the cascade root. Light: muted-black checkmarks /
423
- sliders on warm cream. Dark arm (`.dark`) reads `--ring` (mid-tone),
424
- not the near-white dark `--primary`, so a checkbox's white checkmark
425
- keeps contrast headroom (accent-color.md §5). */
426
- --accent-color: var(--primary);
427
-
428
- /* Border hairline at whisper alpha — the canonical rung for
429
- section-spine / panel-edge hairlines a consumer wants to read as an
430
- iOS-26 whisper rather than a hard rule. Consumers compose this named
431
- rung instead of hand-mixing `color-mix(... var(--border) ...)`
432
- per-site (token-first). 45% is the canonical whisper. Auto-dark via
433
- `--border` (which is `var(--neutral-4)`, light-dark()-resolved). */
434
- --border-soft: color-mix(in srgb, var(--border) 45%, transparent);
435
-
436
- /* AQ.W3 §W3.4 — tokenized scrollbar thumb + track. Minted in the color
437
- block so the `scrollbar-color` / `::-webkit-scrollbar-thumb` rungs read a
438
- single source. Auto-dark via `--muted-foreground` (light-dark()-resolved,
439
- AQ.W2) — the OS scrollbar chrome also honors `color-scheme: dark`, so the
440
- custom thumb tracks the dark surface without an explicit dark mirror. The
441
- thumb α (25%) matches the prior inline `.scrollbar-thin` value byte-for-
442
- byte; `transparent` track keeps the scroll-pane glass reading through. */
443
- --scrollbar-thumb: color-mix(in srgb, var(--muted-foreground) 25%, transparent);
444
- --scrollbar-track: transparent;
445
-
446
- /* Foreground-tint rungs — canonical handles for the 36+ raw
447
- `color-mix(in srgb, var(--foreground) N%, transparent)` sites surveyed
448
- in R5 axis-1. Each rung's α is named in its key (4 → 4%, 22 → 22%).
449
- Auto-dark via --foreground; no explicit dark mirrors needed. R5
450
- vocab.γ gap row 1. Consumers land in W2.B + W3.C. */
451
- --surface-tint-4: color-mix(in srgb, var(--foreground) 4%, transparent);
452
- --surface-tint-6: color-mix(in srgb, var(--foreground) 6%, transparent);
453
- --surface-tint-8: color-mix(in srgb, var(--foreground) 8%, transparent);
454
- --surface-tint-10: color-mix(in srgb, var(--foreground) 10%, transparent);
455
- --surface-tint-12: color-mix(in srgb, var(--foreground) 12%, transparent);
456
- --surface-tint-15: color-mix(in srgb, var(--foreground) 15%, transparent);
457
- --surface-tint-18: color-mix(in srgb, var(--foreground) 18%, transparent);
458
- --surface-tint-22: color-mix(in srgb, var(--foreground) 22%, transparent);
459
- --surface-tint-25: color-mix(in srgb, var(--foreground) 25%, transparent);
460
- /* Higher-α rungs added at L.W5 (absorbs K R4 — 4 P1 sites whose
461
- literal `color-mix(in srgb, var(--foreground) {35,40,70}%, transparent)`
462
- expressions bypassed the canonical token family). See `docs/tranches/L/
463
- audit/W5-A-doc-cohort-proof.md`. */
464
- --surface-tint-35: color-mix(in srgb, var(--foreground) 35%, transparent);
465
- --surface-tint-40: color-mix(in srgb, var(--foreground) 40%, transparent);
466
- --surface-tint-70: color-mix(in srgb, var(--foreground) 70%, transparent);
467
-
468
- /* Muted-tinted surface rungs — canonical handles for the 9 raw
469
- `color-mix(in srgb, var(--muted) N%, transparent)` sites in
470
- FuzzySearch / SegmentedTabs / Slider scoped CSS. (AI.W5-δ — the
471
- ProgressiveSidebar consumer retired at the wave; the canonical token
472
- rung lives on for the remaining consumers.) Auto-dark via --muted.
473
- R5 vocab.γ axis-1 row. */
474
- --muted-soft: color-mix(in srgb, var(--muted) 30%, transparent);
475
- --muted-medium: color-mix(in srgb, var(--muted) 50%, transparent);
476
-
477
- /* ═══════════════════════════════════════════════
478
- §5c CONSTELLATION — Canvas2D proximity-graph lattice (AX.W17)
479
-
480
- The H.W4 legibility intelligence promoted from the slides deck to
481
- LIBRARY identity: the node tones, the edge hairline color, the per-mode
482
- edge-alpha multipliers, and the field-yields-to-type translucency knob.
483
- Only `--constellation-accent` (the anomaly tint) stays a CONSUMER preset
484
- (slides aliases it to `--ncsu-red`); the library ships a neutral default.
485
-
486
- PLAIN-hsl LITERALS, per arm — NEVER `light-dark()` and NEVER a
487
- `var(--neutral-*)`/`var(--foreground)`/`var(--border)`/`var(--card)`
488
- alias. Canvas2D silently REJECTS a `light-dark()` value into
489
- `strokeStyle`/`fillStyle` (the W30 86.3%-red-splatter cardinal defect),
490
- and the rejection is identical whether the value is a literal
491
- `light-dark(…)` OR a `var()` that RESOLVES to one — so the constellation
492
- tokens are plain-hsl LEAVES, the `:root` vs `.dark` cascade carrying two
493
- literals. `proof:constellation-tokens` clause (c) machine-locks this
494
- (the no-`light-dark(`-substring NOR transitive-`var()` static assertion).
495
- ═══════════════════════════════════════════════ */
496
- /* Node tones — readable on the warm-cream ground. The two-tone split (the
497
- `dim` half rides `-node-dim`). Warm-grey ink, NOT a neutral-ladder alias. */
498
- --constellation-node: hsl(36 8% 46%);
499
- --constellation-node-dim: hsl(36 8% 60%);
500
- /* Edge hairline stroke — warm near-black on cream (the plain-hsl complement
501
- the slides deck reads to fix the `--foreground` light-dark() leak). */
502
- --constellation-line: hsl(24 14% 14%);
503
- /* Anomaly tint — NEUTRAL library default (a desaturated warm accent). The
504
- consumer overrides this (slides → `--ncsu-red`); the library does NOT
505
- bake a brand hue. This is the single consumer-preset boundary. */
506
- --constellation-accent: hsl(18 58% 46%);
507
- /* Edge-alpha multipliers — replace the magic `0.17` hairline / pointer-web
508
- literals. The cream ground lifts the node tones, so the field can recede;
509
- the focus-proximity edge reads a touch stronger. */
510
- --constellation-edge-alpha: 0.22;
511
- --constellation-edge-focus-alpha: 0.34;
512
- /* §7 field-yields-to-type translucency knob — the legible-but-RECESSIVE
513
- MIDPOINT, NOT max-legibility. On cream the node tones already read, so the
514
- field recedes further: BELOW the slides 0.92 max-legibility reference. */
515
- --constellation-alpha: 0.80;
516
-
517
- /* §interaction — the warp spring + the gravity-well tunings (NUMERIC, NOT
518
- colors — read ONCE on mount via parseFloat, never reach a Canvas2D
519
- fillStyle, so immune to the W30 light-dark()/Canvas2D leak; AY.W-CON2).
520
- Mode-INVARIANT, declared ONCE in :root (the .dark arm needs no numeric
521
- re-declare — a per-mode value SPLIT is what proof:constellation-tokens
522
- clause (c) flags, and these tunings are identical in both modes).
523
- `--constellation-warp-response` is the keyframes.js ANGULAR PERIOD (the
524
- SwiftUI .spring(response:) axis), NOT a settle-duration — at ζ=1 the 2%
525
- settle lands at t₂ ≈ 5.83/ω₀ ≈ 0.93·response (the engine keeps the
526
- keyframes.js ω₀ = 2π/response convention, mints no second ω). */
527
- --constellation-warp-response: 0.55; /* s — keyframes.js angular period (NOT a settle) */
528
- --constellation-warp-zeta: 1.0; /* critically damped — a focal mark must NOT ring */
529
- --constellation-well-gain: 14000; /* inverse-square force scale (the held-pull gain) */
530
- --constellation-well-reach: 340; /* base-width px — the well's reach (k-scaled at step) */
531
- --constellation-well-ramp: 4.0; /* 1/s — the ARM rate (≈0.25s bloom; release is the fixed brisk WELL_RELEASE_RAMP — the field-cools invariant, not consumer-tunable) */
532
- --constellation-well-max-speed: 4.0; /* base-width px/frame cap — the no-slingshot clamp */
533
- --constellation-well-hold-ms: 140; /* ms hold before the well arms */
534
- --constellation-wander-idle: 8000; /* ms — min idle between auto re-targets (the W-CON1 drift cadence) */
535
- --constellation-wander-jitter: 8000; /* ms — random extra idle per cadence (so the rhythm is not metronomic) */
536
-
537
- /* ═══════════════════════════════════════════════
538
- §6 SECTION PALETTE — 13-stop jewel tones (light)
539
- ═══════════════════════════════════════════════ */
540
- /* AV.W16 TW2 — oklch ramp (perceptually-even L; hue preserved from the
541
- prior hsl() cadence). Categorical jewel tones — distinct hues, not a
542
- monotone scale. Authored as oklch pairs with the .dark mirror. */
543
- --section-color-0: oklch(0.552 0.192 359.8); /* rose */
544
- --section-color-1: oklch(0.502 0.165 305.9); /* purple */
545
- --section-color-2: oklch(0.484 0.163 265.5); /* indigo */
546
- --section-color-3: oklch(0.542 0.089 222.8); /* teal-cyan */
547
- --section-color-4: oklch(0.551 0.088 171.1); /* forest */
548
- --section-color-5: oklch(0.623 0.124 69.6); /* amber */
549
- --section-color-6: oklch(0.579 0.201 30.4); /* tomato-red */
550
- --section-color-7: oklch(0.532 0.180 317.5); /* violet */
551
- --section-color-8: oklch(0.520 0.176 8.4); /* ruby */
552
- --section-color-9: oklch(0.492 0.038 239.6); /* slate-blue */
553
- --section-color-10: oklch(0.556 0.103 128.8); /* olive */
554
- --section-color-11: oklch(0.601 0.092 208.0); /* ocean */
555
- --section-color-12: oklch(0.513 0.163 291.9); /* periwinkle */
556
-
557
- /* Accent colors */
558
- --accent-pink: oklch(0.613 0.197 353.8);
559
- --section-heading: oklch(0.545 0.189 352.8);
560
- --accent-red: oklch(0.574 0.216 27.5);
561
-
562
- /* ═══════════════════════════════════════════════
563
- §6b VIZ BASIS — core brand hues
564
- ═══════════════════════════════════════════════ */
565
- --viz-fourier: oklch(0.579 0.201 30.4);
566
- --viz-chebyshev: oklch(0.484 0.163 265.5);
567
- --viz-legendre: oklch(0.532 0.180 317.5);
568
- --viz-amber: var(--section-color-5);
569
- --viz-green: var(--section-color-4);
570
-
571
- /* Semantic UI accents */
572
- --tier-featured: oklch(0.841 0.173 84.2);
573
- --tier-saved: oklch(0.676 0.176 252.3);
574
- --like: oklch(0.633 0.200 24.9);
575
- --success: oklch(0.720 0.192 149.5);
576
- --warning: oklch(0.770 0.165 70.6);
577
- --info: oklch(0.626 0.186 259.6);
578
- --delete: oklch(0.597 0.198 25.5);
579
-
580
- /* Semantic foregrounds — text/glyph atop --success/--warning/--info plates.
581
- Notification.vue currently hardcodes `text-white`/`text-foreground`
582
- inline; W2 migrates consumers to read these tokens. Warning carries a
583
- dark glyph because the amber plate is too luminous for white. R5
584
- vocab.γ gap row 4. */
585
- --success-foreground: var(--neutral-0);
586
- --warning-foreground: hsl(24 10% 10%);
587
- --info-foreground: var(--neutral-0);
588
-
589
- /* ═══════════════════════════════════════════════
590
- §7 SHADOWS — cartoon offset is the signature
591
- ═══════════════════════════════════════════════ */
592
- --shadow-cartoon: 3px 3px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent);
593
- --shadow-cartoon-hover: 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 10%, transparent);
594
- --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1);
595
- --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
596
- --shadow-modal:
597
- 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent),
598
- 0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent);
599
-
600
- --cartoon-shadow: var(--shadow-cartoon);
601
- --cartoon-shadow-hover: var(--shadow-cartoon-hover);
602
- --soft-shadow: var(--shadow-soft);
603
- --elevated-shadow: var(--shadow-elevated);
604
- --modal-shadow: var(--shadow-modal);
605
-
606
- /* Elevation scale */
607
- --shadow-xs: 0 1px 3px color-mix(in srgb, var(--shadow-color) 4%, transparent),
608
- 0 1px 2px color-mix(in srgb, var(--shadow-color) 6%, transparent);
609
- --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent);
610
- --shadow-md: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent);
611
- --shadow-lg: 0 4px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent);
612
- --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent);
613
- --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent);
614
-
615
- /* Z.W2.T3a — uniform-cast shadow rung. Offset 0 / 0, no directional
616
- Y bias. Use case: dock-hosted icons (e.g. the speedtest settings
617
- gear) where the surrounding dock shadow's downward cast reads as
618
- a per-icon right-edge halo on the rightmost child (A2 §B7). The
619
- uniform variant carries the same color-mix recipe family as the
620
- sized rungs (`--shadow-md`, `--shadow-lg`) so the perceived
621
- elevation is a peer, not a sibling. Consumers compose via
622
- `--shadow-dock-override: var(--shadow-uniform)` per-instance, or
623
- attach to per-icon-button stacks where directional cast is wrong-
624
- shape. Documented in DESIGN.md token table. */
625
- --shadow-uniform: 0 0 12px color-mix(in srgb, var(--shadow-color) 8%, transparent);
626
-
627
- /* Card = soft drop plate by default. The cartoon offset is a brand-flavoured
628
- decoration (a sticker look), not the canonical card shape. Consumers
629
- wanting the cartoon look pass <Card surface="cartoon">, which composes the
630
- `.cartoon-surface` utility (it reads --shadow-cartoon directly). R3-spec
631
- §F.1, S.W4; Q.W3 Lane H. */
632
- --shadow-card: var(--shadow-md);
633
- --card-shadow: var(--shadow-card);
634
-
635
- /* AI.W1-α — sticky CardHeader background. Parameterises the
636
- `bg-card/60` literal value.js's PaneHeader.vue carried so the
637
- glass-ui canon owns the recipe. The scroll-driven `<CardHeader
638
- shrink>` choreography reads this token for its sticky-header
639
- backdrop tint; consumers retune per-app by overriding the
640
- variable at any ancestor. Auto-dark via `--card`. */
641
- --card-header-bg: color-mix(in srgb, var(--card) 60%, transparent);
642
-
643
- /* Dock shadows — a single omnidirectional glow in the
644
- `--shadow-md`/`--shadow-lg` family (a directional drop concentrated on
645
- the pill's rounded right cap as a right-edge halo; the dock's own
646
- border already defines the silhouette). Per-instance directional drop
647
- reinstates via `--shadow-dock-override` (consumed by every `.glass-dock`
648
- state selector — see dock.css). */
649
- --shadow-dock: 0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent);
650
- --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent);
651
- --dock-shadow: var(--shadow-dock);
652
- --dock-shadow-collapsed: var(--shadow-dock-collapsed);
653
-
654
- /* AX.W04 F1 — the wrap/card-tier dock shadow. A wrapped multi-row dock (and
655
- any finite-radius card silhouette) is a THICKER material than a flat thin
656
- pill — WWDC25 §219 "material thickens as glass flexes larger". So when the
657
- wrap dock expands it lifts its elevation onto the FLOATING-tier shadow
658
- stack (the `--glass-shadow-floating` family — `--shadow-xl` + the
659
- `--glass-material-rim` hairline + the `--glass-under-shadow-vivid` under-cast)
660
- rather than carrying the flat `--shadow-dock` glow of a 40px pill. Composed
661
- on `:root` as ONE consumer-overridable token (per the cartoon-shadow
662
- override contract — override on the cascade, never a dead local). The dock
663
- reads it via `calc()`-on-`--dock-expand-t` so the lift glides in lockstep
664
- with the pill→card radius morph (ONE clock, ONE register). */
665
- --glass-material-rim: 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent);
666
- --shadow-dock-wrap: var(--shadow-xl),
667
- var(--glass-material-rim),
668
- var(--glass-under-shadow-vivid);
669
-
670
- /* Cartoon shadow color primitives (kept for tiered cartoon utilities) */
671
- --shadow-cartoon-color: rgb(0 0 0 / 0.12);
672
- --shadow-cartoon-color-soft: rgb(0 0 0 / 0.06);
673
-
674
- /* Tiered cartoon shadows */
675
- --shadow-cartoon-sm: -3px 2px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
676
- 0 3px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
677
- -3px 3px 1px color-mix(in srgb, var(--shadow-color) 6%, transparent);
678
- --shadow-cartoon-md: -4px 3px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
679
- 0 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
680
- -4px 4px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
681
- --shadow-cartoon-lg: -6px 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
682
- 0 6px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
683
- -6px 6px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
684
- --cartoon-shadow-sm: var(--shadow-cartoon-sm);
685
- --cartoon-shadow-md: var(--shadow-cartoon-md);
686
- --cartoon-shadow-lg: var(--shadow-cartoon-lg);
687
-
688
- /* ═══════════════════════════════════════════════
689
- §8 GLASSMORPHISM — Five-tier surface ladder (v0.8.0)
690
-
691
- Tier semantics, alpha-monotonic:
692
- wash ~0.30α + light blur (was `subtle`)
693
- quiet ~0.50α + medium blur (the formerly missing rung)
694
- resting ~0.65α + canonical blur (was `default`; the speedtest plate)
695
- floating ~0.80α + heavier blur (was `elevated`)
696
- overlay ~0.95α + heaviest blur (NEW; modal-over-modal)
697
-
698
- v0.8.0 retires the four-tier `subtle | default | medium | elevated`
699
- ladder outright. No legacy aliases. Consumers migrate at the same
700
- breaking change. R3-spec §A.
701
- ═══════════════════════════════════════════════ */
702
-
703
- /* Opacity primitives */
704
- --glass-opacity-wash: 0.30;
705
- --glass-opacity-quiet: 0.50;
706
- --glass-opacity-resting: 0.65;
707
- --glass-opacity-floating: 0.80;
708
- --glass-opacity-overlay: 0.95;
709
-
710
- /* Blur primitives. The radii here feather the dock + meter card to a
711
- barely-perceptible diffusion that lets the substrate behind it bleed
712
- through cleanly while keeping hero typography crisp at meter scale.
713
- The resting blur sits at 12px so a glass plate reads as a diffusion
714
- without consumer-side override. */
715
- --glass-blur-wash-radius: 1px;
716
- --glass-blur-quiet-radius: 10px;
717
- --glass-blur-resting-radius: 12px;
718
- --glass-blur-floating-radius: 16px;
719
- /* AV.W7 F2 — clamped from 24px into the 8–15px budget band. A blur radius
720
- past ~20px is exponentially costlier (`backdrop-filter` is glass-ui's most
721
- expensive idiom — the radius is the dominant cost). 15px is the band
722
- ceiling; the lower rungs (wash/quiet/resting 1/10/12) sit in-band and the
723
- floating 16px is the design ceiling at the band edge (left as-is). A
724
- high-resolution display restores the richer 24px wash via the @media arm
725
- below — the cost is amortised by the extra device pixels. */
726
- --glass-blur-overlay-radius: 15px;
727
- /* Dock blur radius — 11px, paired with the 0.42 opacity below: a crisp
728
- glass pill (the iOS Control Center register), not a feathered wash.
729
- The dock composes `blur()` only (no saturate); the
730
- `prefers-reduced-transparency` bracket at glass.css maps it to the
731
- opacity-only register. */
732
- --glass-blur-dock-radius: 11px;
733
-
734
- /* AX.W54 — each blur radius is scaled by the ONE `--glass-level` scalar (in
735
- lockstep with the opacity seam above): level=1 byte-identical; level=0 →
736
- blur(0) (the clean solid floor with the opacity); level>1 → more diffusion.
737
- The per-rung `saturate()`/`brightness()` companions are UNTOUCHED (the level
738
- scales the RADIUS, not the saturation — W52's calm light-concentration). */
739
- --glass-blur-wash: blur(calc(var(--glass-blur-wash-radius) * var(--glass-level))) saturate(1.05);
740
- /* AV.W15 M1 — the `quiet` rung gained `saturate(1.05) brightness(1.02)`
741
- so the lower ladder reads with the same saturation life as `resting`+
742
- (Apple: Liquid Glass concentrates light, it does not desaturate). The
743
- `brightness(1.02)` is the small lift the spec names — it lands `quiet`
744
- between bare `wash` and `resting` without over-brightening the rung.
745
- The `prefers-reduced-transparency: reduce` bracket at glass.css maps
746
- `--glass-blur-quiet: none`, so this whole chain drops with the blur. */
747
- --glass-blur-quiet: blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(1.05) brightness(1.02);
748
- --glass-blur-resting: blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(1.05);
749
- /* AX.W52 D19 — the floating/overlay backdrop saturate tamed from 1.4/1.5 to a
750
- gentle ~1.18/1.2 (real liquid glass concentrates light ~1.1–1.2×; the prior
751
- 1.4–1.5× over-juiced the bleed-through into a garish smear over a colored
752
- substrate). wash/quiet/resting already sit at 1.05 — untouched. */
753
- --glass-blur-floating: blur(calc(var(--glass-blur-floating-radius) * var(--glass-level))) saturate(1.18);
754
- --glass-blur-overlay: blur(calc(var(--glass-blur-overlay-radius) * var(--glass-level))) saturate(1.2);
755
- /* Dock blur composes blur() only — no saturate. */
756
- --glass-blur-dock: blur(calc(var(--glass-blur-dock-radius) * var(--glass-level)));
757
-
758
- /* AX.W52 — the GLASS BUTTON blur. The `glass`/`glass-wash` button variants
759
- compose the `.glass-wash` tier (`--glass-blur-wash` = blur(1px)) — a
760
- sub-perceptual diffusion authored for a small detail TILE, not a button
761
- the user reads as "glass." A button is a hero control: it wants a real
762
- glass blur. `--glass-blur-btn` lifts the variant onto the `quiet`-tier
763
- radius (10px — a genuine liquid-glass diffusion) with the same gentle
764
- `saturate(1.05) brightness(1.02)` light-concentration the quiet rung
765
- carries (NOT a colour-juice). The wash TILE tier (MetricCell et al.) keeps
766
- its 1px — only the glass BUTTON variants reach for this. */
767
- --glass-blur-btn: blur(calc(var(--glass-blur-quiet-radius) * var(--glass-level))) saturate(1.05) brightness(1.02);
768
-
769
- /* Dock-specific opacity (0.42) — lighter than `resting` (0.65) so the dock
770
- reads as a translucent overlay rather than a panel, backdrop bleed
771
- visible through it. Consumed by `.glass-dock` via `--glass-bg-dock`. The
772
- value holds the surface register against the tightened 11px blur so the
773
- dock reads as painted chrome, not a frosted ghost. */
774
- --glass-opacity-dock: 0.42;
775
-
776
- /* Dock foreground over an animated backdrop. A dock floating over an
777
- aurora/animated surface (`value.js` dock-over-aurora, a slides routed
778
- control, bbnf) sits on a mid-luminance, shifting field where the muted
779
- default fg can drop below contrast. This token is the dock control's
780
- foreground base — a complete `hsl()` color consumed via `var()`; for the
781
- muted icon weight the control mixes it down with `--opacity-icon-muted`.
782
- Defaults to `var(--foreground)` so the dock paints byte-identically to
783
- today; a consumer overrides it per-backdrop (e.g. a near-white over a
784
- dark aurora) without touching library source.
785
-
786
- AX.W55 — this is the FOREGROUND half of the adaptive story, now reconciled
787
- INTO the `--glass-backdrop` probe (not a third fork): under the bright bucket
788
- (`@container style(--glass-backdrop: light)` in dock.css) it re-points toward
789
- the contrast-clearing ink, and an `@supports (color: contrast-color(…))`
790
- block flips it natively on supporting engines. The `var(--foreground)`
791
- default keeps the zero-delta rest state. */
792
- --dock-fg-on-aurora: var(--foreground);
793
-
794
- /* Chassis-specific opacity. Looser than `default` (0.50) so the
795
- <InstrumentChassis> surface reads as glass-over-aurora at its
796
- 64rem-wide footprint; the default tier stays calibrated for cards.
797
- Mirrors the dock-tier pattern (own opacity primitive + composed bg).
798
- Light 0.28 sits in the gap between dock (0.32) and a hypothetical
799
- wash tier; dark 0.36 mirrors the +0.08 step the dock takes from
800
- `glass-bg-medium` (0.65) down to its own 0.32. */
801
- --glass-opacity-chassis: 0.28;
802
-
803
- /* Composed backgrounds — AX.W54: the opacity is threaded through the ONE
804
- `--glass-level` clarity scalar. Each rung's effective alpha is
805
- `1 - (1 - <rung-opacity>) * --glass-level`: at level=1 it collapses to the
806
- hand-tuned `<rung-opacity>` (byte-identical); at level=0 it resolves `1`
807
- (solid `--card` — the opaque escape); at level>1 it goes clearer. ONE
808
- expression, the same seven rungs. */
809
- --glass-bg-wash: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-wash)) * var(--glass-level)) * 100%), transparent);
810
- --glass-bg-quiet: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-quiet)) * var(--glass-level)) * 100%), transparent);
811
- --glass-bg-resting: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-resting)) * var(--glass-level)) * 100%), transparent);
812
- --glass-bg-floating: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-floating)) * var(--glass-level)) * 100%), transparent);
813
- --glass-bg-overlay: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-overlay)) * var(--glass-level)) * 100%), transparent);
814
- /* The dock bg ALSO rides the oklab tint seam (AX.W54 amendment): the same
815
- `color-mix(in oklab, …, --glass-tint-source --glass-tint-strength)` wrapper
816
- the rungs reach for, ZERO-delta at `--glass-tint-strength: 0%` — so W55's
817
- adaptive darken can reach the dock (the G2 over-light surface) without a
818
- second hand-rolled recipe. */
819
- --glass-bg-dock: color-mix(in oklab, color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-dock)) * var(--glass-level)) * 100%), transparent), var(--glass-tint-source) var(--glass-tint-strength));
820
- --glass-bg-chassis: color-mix(in srgb, var(--card) calc((1 - (1 - var(--glass-opacity-chassis)) * var(--glass-level)) * 100%), transparent);
821
-
822
- /* Composed borders — foreground-tinted */
823
- --glass-border-wash: color-mix(in srgb, var(--foreground) 8%, transparent);
824
- --glass-border-quiet: color-mix(in srgb, var(--foreground) 10%, transparent);
825
- --glass-border-resting: color-mix(in srgb, var(--foreground) 12%, transparent);
826
- --glass-border-floating: color-mix(in srgb, var(--foreground) 15%, transparent);
827
- --glass-border-overlay: color-mix(in srgb, var(--foreground) 18%, transparent);
828
- --glass-border-dock: color-mix(in srgb, var(--foreground) 11%, transparent);
829
- --glass-border: var(--glass-border-quiet);
830
- --glass-border-strong: var(--glass-border-floating);
831
-
832
- /* Shared decorative. Light grain dropped 0.035 → 0.025 in P.W1.B —
833
- at the chassis scale the original alpha read as crawl over the new
834
- lower-alpha chassis bg; the grain's role is texture, not reading,
835
- so it sits at the perceptual floor. Dark companion drops 0.06 →
836
- 0.045 below to keep the soft-light blend alive without stippling. */
837
- --glass-grain-opacity: 0.025;
838
- --glass-grain-opacity-disco: 0.08;
839
- --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.25);
840
-
841
- /* Hairline-accent — 0.5px catch-light + under-shadow pair.
842
- Single token composes the canonical 2-stop hairline used by dock,
843
- instrument-chassis. The `.hairline-accent` utility
844
- (utilities.css §hairline) adopts these via `box-shadow:`. */
845
- --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.06);
846
- --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.04);
847
- --border-hairline: var(--hairline-catch-light), var(--hairline-under-shadow);
848
-
849
- /* Specular catch-light — 1.5px-tall top-edge highlight that swaps in for
850
- --glass-highlight on interactive moments (e.g. primary-action hover).
851
- Reads as a real catch-light on a curved surface. The `-dark` companion
852
- is overridden inside `.dark`; the named token here is the explicit
853
- handle consumers can reference to compose dark-aware layers. */
854
- --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.45);
855
- --glass-specular-dark: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30);
856
-
857
- /* AV.W15 M3 — Full-perimeter rim light (the "rim that defines the
858
- silhouette", WWDC25 sess. 219). Distinct from the top-only
859
- `--glass-highlight` (a 0.5px top-edge catch-light): this is a 0.75px
860
- inset ring around the WHOLE silhouette, four edges, reading as the
861
- catch-light that wraps the glass plate the way iOS-26 Liquid Glass
862
- carries a rim, not just a top highlight. Composed as a SECOND inset
863
- box-shadow layer alongside `--glass-highlight` on the floating/dock
864
- tiers (glass.css wires it). The alpha is deliberately low (0.18 light
865
- / 0.10 dark) — the rim is decoration and must not eat AA legibility
866
- over a busy backdrop; it sits below the perceptual reading threshold
867
- on text. The `-dark` companion is overridden inside `.dark` mirroring
868
- the `--glass-specular-dark` precedent. */
869
- --glass-edge-light: inset 0 0 0 0.75px hsl(0 0% 100% / 0.18);
870
- --glass-edge-light-dark: inset 0 0 0 0.75px hsl(0 0% 100% / 0.10);
871
-
872
- /* AW.W23 — content-aware adaptive tint (the Baseline-2025 "tint informed by
873
- surrounding content" axis, WWDC25 sess. 219). A surface can tint toward a
874
- consumer-provided dominant backdrop color via a `color-mix(in oklab, …)`
875
- recipe (oklab is the mwg-preferred space for tint generation; NEVER a
876
- lightness-shift in `oklch(from …)` — browsers don't gamut-map yet).
877
-
878
- DEFAULT is zero delta: `--glass-tint-source` is the warm-white card itself
879
- and `--glass-tint-strength` is 0%, so the rung background mixes 0% toward
880
- the source = byte-identical to today. A consumer sets `--glass-tint-source`
881
- to a sampled aurora hue + a strength ≤30% to bias the surface. Alpha-safe:
882
- the mix is bounded ≤30% and never re-points the card's own alpha.
883
-
884
- AX.W55 — the DEFAULTS stay `var(--card)`/`0%` (the zero-delta rest state).
885
- The backdrop-luminance probe (`--glass-backdrop`, below) is what OVERRIDES
886
- them under a bright backdrop; the `:root` defaults are NEVER touched — the
887
- bucket blocks (glass.css / dock.css `@container style(--glass-backdrop:
888
- light)`) do the lift, so a surface over today's rich/dark background reads
889
- byte-identical. */
890
- --glass-tint-source: var(--card);
891
- --glass-tint-strength: 0%;
892
-
893
- /* AX.W55 — adaptive glass legibility (the iOS-26/27 "locally darken the glass
894
- over light content" move; G2). There is NO web API that reads the pixels
895
- painted BEHIND a `backdrop-filter` element, so the backdrop-luminance signal
896
- is a DECLARATIVE BUCKET a consumer sets where it KNOWS the backdrop is bright
897
- (a near-white card surface, a pale aurora bleed, a bright data grid). It is
898
- read by the `@container style(--glass-backdrop: light)` blocks on every glass
899
- family (the shipped density-cascade mechanism — utilities.css §density) which
900
- lift `--glass-tint-strength` toward the AA floor + re-point `--glass-tint-
901
- source` to the warm-ink below, mixing the rung TOWARD ink via the EXISTING
902
- `color-mix(in oklab)` seam — ZERO new compositing seam.
903
-
904
- --glass-backdrop: the bucket. `dark` (or unset) = today's zero-delta;
905
- `light` engages the bright-bucket darken. An
906
- INHERITING ident set on any ancestor reaches every
907
- descendant glass surface (the @container read).
908
- --glass-backdrop-luma: the numeric escape hatch — a sampled backdrop
909
- relative-luminance (0..1) a heavier JS observer sets
910
- when the declarative bucket is too coarse. The TOKEN
911
- is minted (the cascade reads it if set); the OBSERVER
912
- that sets it stays demo-private until a 2nd consumer
913
- arrives (the no-overfitting bar — the DEFAULT path is
914
- the declarative bucket, not a speculative sampler).
915
- --glass-tint-ink: the LOW-LUMINANCE warm-ink the bright bucket re-points
916
- `--glass-tint-source` to — the warm dark `--foreground`
917
- family (NOT white; a lightener over light content is
918
- exactly the W52-fixed wrong direction). It auto-flips
919
- with `--foreground` (dark-mode it resolves the light
920
- warm ink — but the bright-backdrop case is a light-mode
921
- concern). Overridable like every magnitude here.
922
-
923
- The bright-bucket `--glass-tint-strength` is clamped to a BOUNDED AA-clearing
924
- floor — `--glass-tint-strength-aa` (≤24%, the iOS clamp; the lowest value that
925
- clears 4.5:1 over synthetic white, capped LOW so the surface STAYS translucent,
926
- "let as much content through as possible"). Recorded here as the ceiling the
927
- bucket blocks drive to; the live 4.5:1 readback (proof:adaptive-glass π arm)
928
- ratifies the exact value. */
929
- --glass-backdrop: dark;
930
- --glass-backdrop-luma: ;
931
- --glass-tint-ink: var(--foreground);
932
- --glass-tint-strength-aa: 18%;
933
-
934
- /* AW.W23 — chromatic edge dispersion (the "polished glass" rim fringe Apple
935
- shows). A warm fringe on one edge + a cool fringe on the other, low-alpha,
936
- biased warm-cream/NCSU-red (NOT iOS-blue). Composed OVER the W22 uniform
937
- rim under `prefers-reduced-transparency: no-preference`; dropped under
938
- `reduce` (it is a transparency garnish). The two directional inset rings
939
- read as light refracting through the glass edge. */
940
- --glass-fringe-warm: oklch(0.92 0.06 40 / 0.22);
941
- --glass-fringe-cool: oklch(0.90 0.05 230 / 0.16);
942
- --glass-edge-dispersion:
943
- inset 0.75px 0 0 0 var(--glass-fringe-warm),
944
- inset -0.75px 0 0 0 var(--glass-fringe-cool);
945
-
946
- /* AX.W52 D19 — the moving-specular gleam radius (glass.css `.glass-material::
947
- before`). The ONE knob that BOUNDS the gleam geometry as a percentage of the
948
- plate so it can NEVER again become a whole-surface disc (the prior implicit
949
- `circle at …` ran its stops to 55–75% of the half-diagonal — a wash on a
950
- small tile). 36% reads as a tracked edge glint. Override on `:root` to retune
951
- library-wide; a per-surface override clips the gleam tighter/wider. */
952
- --glass-specular-size: 36%;
953
-
954
- /* Chassis curvature illusion — a subtle radial gradient at the chassis
955
- top centre that lifts the surface without committing to literal 3D.
956
- Composed into <InstrumentChassis>'s background stack. AX.W52 D19 — the
957
- prior pure-white `hsl(0 0% 100% / 0.06)` reaching `transparent 60%` was a
958
- broad top-centre WASH (the #1 fixed-anchor rest-bloom culprit). Re-derived
959
- onto the warm-cream house identity (`hsl(40 30% 96%)`, L < 100% so the warm
960
- hue survives — mirroring the moving gleam), the alpha routed through the
961
- SINGLE overridable `--glass-curvature-intensity` knob (0.02 default, a third
962
- of the old 0.06), and the ellipse tightened to `transparent 38%` so it reads
963
- as a thin top-edge sheen, not a central wash. */
964
- --glass-curvature-intensity: 0.02;
965
- --glass-curvature-overlay: radial-gradient(
966
- ellipse at 50% -20%,
967
- hsl(40 30% 96% / var(--glass-curvature-intensity)),
968
- transparent 38%
969
- );
970
- /* The light-arm dark alias kept on the same warm-cream + token recipe so a
971
- non-`.dark` consumer reading `…-overlay-dark` still resolves a softened
972
- sheen; the `.dark` block below lowers `--glass-curvature-intensity` so the
973
- deep-canvas arm is genuinely softer (the prior byte-identical dark arm read
974
- HARDER over the dark canvas). */
975
- --glass-curvature-overlay-dark: var(--glass-curvature-overlay);
976
-
977
- /* Chart palette aliases — speedtest et al. read these for phase tinting.
978
- Defaults map to viz-basis hues; consumers can override per app. */
979
- --chart-ping: var(--viz-chebyshev);
980
- --chart-download: var(--viz-fourier);
981
- --chart-upload: var(--viz-amber);
982
- --chart-jitter: var(--viz-legendre);
983
-
984
- /* O.W6 Lane D — WCAG companion `--chart-{phase}-label` tokens
985
- (speedtest AC.W6c.T2 — F1.V-04 closure).
986
-
987
- The canvas-side hues above preserve their saturated brand register
988
- (correct against the meter dial); the COMPANION tokens darken to
989
- L≈0.40 so phase-label text on `--background` clears the WCAG 2.1
990
- AA-body 4.5:1 contrast floor. Mirrors the two-token discipline
991
- already established by `--meter-{background-color,track-stroke}`:
992
- one token feeds the canvas/visual, the second feeds the label
993
- text.
994
-
995
- Light-mode L≈0.40 in OKLCH preserves the hue rotation while
996
- dropping luminance enough for body contrast; dark-mode flips to
997
- L≈0.85 against the dark canvas. Consumers reach these via
998
- `color: var(--chart-ping-label)` (etc.) on label elements ONLY —
999
- chart strokes/fills continue to read `--chart-ping`. */
1000
- --chart-ping-label: oklch(0.40 0.18 230);
1001
- --chart-download-label: oklch(0.40 0.20 22);
1002
- --chart-upload-label: oklch(0.40 0.16 55);
1003
- --chart-jitter-label: oklch(0.40 0.20 305);
1004
-
1005
- /* O.W6 Lane D — Meter track stroke (speedtest AC.W6c.T3 — F1.V-02
1006
- closure). Promoted from speedtest's consumer-side declaration so
1007
- glass-ui owns the canonical light + dark values. The light-mode
1008
- value reads opaque foreground (composes through canvas
1009
- `globalAlpha` in consumer renderers; e.g., speedtest's `rings.ts`
1010
- `globalAlpha = 0.22` lands the phantom-track at the perceptual
1011
- sweet-spot). The dark-mode companion lives under `.dark` below
1012
- and ALSO reads `var(--foreground)` — the prior speedtest value
1013
- `var(--background)` rendered bg-on-bg invisible at dark mode. */
1014
- --meter-track-stroke: var(--foreground);
1015
-
1016
- /* Shadow per tier — complete box-shadow lists for glass surface classes */
1017
- --glass-shadow-wash: var(--shadow-sm), var(--glass-highlight);
1018
- --glass-shadow-quiet: var(--shadow-md), var(--glass-highlight);
1019
- --glass-shadow-resting: var(--shadow-lg), var(--glass-highlight);
1020
- --glass-shadow-floating: var(--shadow-xl),
1021
- 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent),
1022
- var(--glass-highlight);
1023
- --glass-shadow-overlay: var(--shadow-2xl),
1024
- 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 8%, transparent),
1025
- var(--glass-highlight);
1026
- --glass-shadow: var(--glass-shadow-quiet);
1027
- --glass-shadow-lg: var(--glass-shadow-floating);
1028
-
1029
- /* ─────────────────────────────────────────────────────────────
1030
- AL-W1-α augmented — SPINE 8th tier (HOUSING register)
1031
-
1032
- Closes the AK W2 chassis-spine architectural underclaim per
1033
- AL-X5 §4.1. The spine register is a polished SLEEVE, not glass:
1034
- NO backdrop-filter, NO plate opacity, hairline outer stroke,
1035
- interior radial vignette that subtly carries the phase-color
1036
- cascade. Consumed exclusively by `<InstrumentChassis variant="spine">`
1037
- at App-level mount paths (quiet-content routes).
1038
-
1039
- The 4 tokens here cover the minimum viable substrate the SLIM
1040
- Y4/Y6/Y7 retention set ratified. The 35 rejected axes (saturate
1041
- band, edge-light per tier, depth-shadow per tier, tier-up macro)
1042
- stay rejected per the conservative-creation mandate.
1043
- ───────────────────────────────────────────────────────────── */
1044
- --glass-spine-opacity: 0;
1045
- --glass-spine-blur: 0px;
1046
- --glass-spine-border: var(--surface-tint-8);
1047
- --glass-spine-vignette: radial-gradient(
1048
- ellipse at 50% 0%,
1049
- color-mix(in oklab, var(--phase-color, var(--surface-tint-8)) 8%, transparent),
1050
- transparent 60%
1051
- );
1052
-
1053
- /* ─────────────────────────────────────────────────────────────
1054
- AL-W10 SLIM — UNDER-SHADOW recipe rungs
1055
-
1056
- Per AL-X5 §4 + Y7 §3. iOS Liquid Glass surfaces carry a 0.5px
1057
- dark hairline along the bottom edge (reads as under-shadow /
1058
- glass thickness). The substrate `--hairline-under-shadow`
1059
- already publishes one quiet rung; the four-rung ladder here
1060
- names the SLIM retention set (Y4 §3.2 / Y6 §4.3) — `quiet`,
1061
- `default`, `vivid`, `spine` cover the consumer landings without
1062
- multiplying tokens per tier. The 3 hand-rolled literals at
1063
- `instrument-chassis.css:52`, `dock.css:279`, `dock.css:952`
1064
- retire to these.
1065
-
1066
- Composes as a NON-INSET box-shadow layer alongside the existing
1067
- `--glass-shadow-*` recipe (the inset under-shadow stays at the
1068
- hand-rolled literal where it's load-bearing on chassis-internal
1069
- surfaces).
1070
- ───────────────────────────────────────────────────────────── */
1071
- --glass-under-shadow-quiet: 0 2px 8px -1px oklch(0 0 0 / 0.04);
1072
- --glass-under-shadow-default: 0 4px 16px -2px oklch(0 0 0 / 0.08);
1073
- --glass-under-shadow-vivid: 0 8px 32px -4px oklch(0 0 0 / 0.12);
1074
- --glass-under-shadow-spine: 0 1px 0 0 oklch(0 0 0 / 0.06);
1075
-
1076
- /* Overlay scrim rungs — substrate-aware modal/dialog backdrop tints.
1077
- Three weights cover the deployed range: dialog-scroll (subtle),
1078
- canonical modal (default), drawer/full-cover (strong).
1079
-
1080
- AY.W-PRIM-POLISH D3 — the scrim is its OWN identity token, NOT derived
1081
- from `--shadow-color`. A scrim's role is to RECEDE: it must pin to INK in
1082
- BOTH modes. The cartoon-shadow family rides `--shadow-color: var(--foreground)`
1083
- (correct — a shadow re-tints under `.dark` by construction), but a scrim
1084
- that does the same FLOODS the dark room with a cream fog (the old dark
1085
- overlay painted `srgb(0.91… / 0.5)`, a near-white wash that BRIGHTENED the
1086
- page at the modal moment). `--overlay-scrim-ink` is a fixed warm near-black
1087
- (the light-mode `--foreground` value), re-resolved verbatim in `.dark` so
1088
- the scrim recedes in both modes. Clean break, no alias (no-backwards-compat).
1089
- The `--shadow-color` / `--shadow-cartoon-*` family is UNTOUCHED. */
1090
- --overlay-scrim-ink: hsl(24 10% 10%);
1091
- --overlay-scrim: color-mix(in srgb, var(--overlay-scrim-ink) 50%, transparent);
1092
- --overlay-scrim-strong: color-mix(in srgb, var(--overlay-scrim-ink) 80%, transparent);
1093
- --overlay-scrim-subtle: color-mix(in srgb, var(--overlay-scrim-ink) 40%, transparent);
1094
-
1095
- /* ═══════════════════════════════════════════════
1096
- §9 ANIMATION OFFSETS
1097
- ═══════════════════════════════════════════════ */
1098
- /* Hover lift offsets */
1099
- --lift-sm: -1px;
1100
- --lift-md: -2px;
1101
- --lift-lg: -4px;
1102
-
1103
- /* Layout tokens */
1104
- --mask-fade-width: 1rem;
1105
- /* J.W3.C — dock content overflow caps. When dock content exceeds
1106
- these dimensions, the inner `.dock-layers` (horizontal) /
1107
- `.glass-dock.vertical` (rail) container scrolls with a
1108
- `.scroll-fade-{x,y}` mask-fade so the boundary feathers rather
1109
- than cliffs. Defaults clamp to 80vw / 80vh capped at sensible
1110
- desktop widths; consumers override per-dock by setting either
1111
- token directly on a `.glass-dock` instance. User findings 1 + 5a. */
1112
- /* AX.W04 — `--dock-max-inline-size` is the canonical inline cap EVERY overflow
1113
- strategy reads: `overflow="scroll"` scrolls past it, and `overflow="wrap"`
1114
- wraps to N rows on the over-cap crossing (the dock shrink-wraps to content,
1115
- `max-inline-size` caps that intrinsic width at this token). The prior
1116
- `--dock-overflow-bp: 640px` viewport-breakpoint token (the magic-640
1117
- snap-back) is DELETED — the wrap is content-driven, not viewport-coupled, so
1118
- there is no breakpoint threshold to name. */
1119
- --dock-max-inline-size: min(80vw, 64rem);
1120
- --dock-max-block-size: min(80vh, 48rem);
1121
-
1122
- /* AB.W1.T1 — chassis max-block-size guardrail.
1123
- Maximum block size a centred consumer-app card may consume while
1124
- preserving the inline dock footprint. The recipe subtracts the
1125
- consumer-owned `--dock-footer-space` (dock height + dock inset +
1126
- card-edge inset) and `--page-padding-top` from the dynamic viewport,
1127
- then takes one further rem of breathing room so the card never
1128
- butts the dock — the user mandate is `≥ 1rem visible gap above
1129
- dock`. Both consumer tokens carry safe fallbacks for callers that
1130
- have not declared them.
1131
-
1132
- Consumers should shrink internal regions (meter, readout, timeline)
1133
- before falling back to scroll. This token is a guardrail against
1134
- chassis overflow, NOT a license to make the card scroll as the
1135
- default solution; clamp-first / no-scroll-first is the canon.
1136
- See DESIGN.md `## Chassis sizing — dock-adjusted viewport`. */
1137
- --chassis-max-block-size: calc(
1138
- 100dvh
1139
- - var(--dock-footer-space, 5.75rem)
1140
- - var(--page-padding-top, 0rem)
1141
- - 1rem
1142
- );
1143
- /* R0G-2 (AO.W3/W4) — chassis mobile dial-reserve canon. instrument-
1144
- chassis.css's mobile breakpoint reserves the dial's final box from
1145
- frame 0 via these vars (with the same values as inline fallbacks, the
1146
- safety net). Token-first home so the vars resolve canonically. */
1147
- --instrument-dial-min-height-mobile: 24rem;
1148
- --instrument-dial-meter-reserve-mobile: minmax(0, 1fr);
1149
-
1150
- --max-width-input: 24rem;
1151
- --input-min-width-sm: 5rem;
1152
- --min-width-input-sm: var(--input-min-width-sm);
1153
- /* AU.W8b.4 — canonical popover width (Combobox list + anchor). Lifts the
1154
- `w-[200px]` arbitrary-value wrap to the `w-popover` @theme utility. */
1155
- --popover-width: 200px;
1156
- --chart-height-compact: 15rem;
1157
- --chart-height-default: 22.5rem;
1158
- --chart-height-large: 25rem;
1159
- --chart-margin: 1.25rem;
1160
- --paper-texture-size: 200px 200px;
1161
-
1162
- /* Border opacity scale */
1163
- --border-opacity-light: 0.15;
1164
- --border-opacity-medium: 0.25;
1165
- --border-opacity-strong: 0.6;
1166
-
1167
- /* ═══════════════════════════════════════════════
1168
- §10 SIZING
1169
- ═══════════════════════════════════════════════ */
1170
- /* ── The ONE comfortable-sizing scale doctrine (AX.W51 D18) ──────────────
1171
- `--ui-scale` is the MASTER comfortable-sizing scalar — ONE unitless knob
1172
- (registered @property <number>, inherits:true, default the identity 1)
1173
- every interactive-control magnitude derives through `calc(<base> *
1174
- var(--ui-scale))`, so a single override grows control HEIGHT + PADDING +
1175
- GAP + FONT-SIZE + GLYPH in LOCKSTEP, proportion preserved, no per-component
1176
- hack. The cohorts below (`--control-h-*` heights, `--control-text*` control
1177
- fonts, `--ui-glyph*` glyphs) are its reading surfaces; the CVA bases + the
1178
- `.btn-pill`/`.input-pill` pills consume them.
1179
-
1180
- ONE scale system, not three. The dock (`--dock-scale`) and the dropdown
1181
- family (`--dropdown-text`, W50) are SPECIALIZATIONS that read this axis:
1182
- `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1))` — the
1183
- dock multiplies ON TOP of the global comfort axis (its existing geometry
1184
- `calc` cascade inherits the global axis for free, zero edit). A consumer
1185
- re-tints the whole library's comfort from ONE `:root { --ui-scale: … }`
1186
- override (or a scoped region — a dense data-table sets it lower) — the
1187
- token-first axis.
1188
-
1189
- EXCLUDED — the φ-DISPLAY ladder (`--type-display-*` / `--type-title` /
1190
- `--type-heading` / `--type-subheading`): a hero/title is a TYPOGRAPHIC
1191
- identity, NOT a touch target, so it does NOT grow on the comfort/coarse
1192
- axis. Only interactive-CONTROL text rides `--ui-scale`. Containers (card /
1193
- panel radii + paddings) are separate `--radius-*` / `--space-*` axes.
1194
-
1195
- The desktop default is the IDENTITY (1) — byte-exact preservation, no
1196
- reflow of shipped consumers. The comfort GROWTH lives at the coarse-pointer
1197
- default (`--ui-coarse-scale`, §below) + the consumer override. The
1198
- WCAG-2.5.5 44px touch floor survives as a `max(…, --control-floor)` clamp
1199
- inside the scaled control-size (the coarse block lifts `--control-floor` to
1200
- `--touch-target`, so a sub-1 scale cannot drop a control under the target).
1201
- Coordinates with W54's `--glass-level` + W55's `--glass-tint-*` — SEPARATE
1202
- axes (size vs material vs legibility); a control is comfortably-sized AND
1203
- glass AND legible, three orthogonal knobs. */
1204
- --ui-scale: 1;
1205
- /* The global coarse-pointer comfort default — the WHOLE library grows ~1.5×
1206
- on touch from ONE place (the @media (pointer: coarse) block at §below lifts
1207
- :root --ui-scale to this). The dock's prior parallel 1.5× becomes the global
1208
- default it now shares. Public library-default identity — a consumer sets
1209
- 1.3 / 1.75 on :root or a scope. */
1210
- --ui-coarse-scale: 1.5;
1211
- /* The control-height cohort — the h-7/h-9/h-10/h-11 register (28/36/40/44px)
1212
- the CVA size rungs encode, each scaled by the master axis. The CVA rungs
1213
- read these via `h-[var(--control-h-*)]` instead of the raw `h-N` literal.
1214
- `--control-floor` is the WCAG-2.5.5 clamp seam (0 at desktop, lifted to
1215
- --touch-target under coarse-pointer); each height is `max(scaled, floor)`. */
1216
- --control-floor: 0px;
1217
- --control-h-xs: max(calc(1.75rem * var(--ui-scale)), var(--control-floor));
1218
- --control-h-sm: max(calc(2.25rem * var(--ui-scale)), var(--control-floor));
1219
- --control-h-md: max(calc(2.5rem * var(--ui-scale)), var(--control-floor));
1220
- --control-h-lg: max(calc(2.75rem * var(--ui-scale)), var(--control-floor));
1221
- /* The control-FONT register (RED 3 — the user's "font too small"). A comfort
1222
- multiplier BETWEEN the static φ-ladder rung and the painted control font,
1223
- so interactive-control text grows on the comfort axis while the φ-DISPLAY
1224
- ladder stays a pure typographic scale (display headings do NOT grow on
1225
- touch). `--control-text` is the workhorse (the `text-sm` register the
1226
- buttons/inputs/triggers carried); `--control-text-sm` is the quieter rung
1227
- (the `text-xs` badge/caption register). W50's `--dropdown-text` IS the
1228
- picker-family specialization of this register. */
1229
- --control-text: calc(var(--type-small) * var(--ui-scale));
1230
- --control-text-sm: calc(var(--type-caption) * var(--ui-scale));
1231
- /* The control-GLYPH cohort (RED 4 — the glyph grows WITH the box). The
1232
- 1rem/0.875rem control-glyph register the `size-4`/`size-3.5` literals
1233
- encode; the un-sized-<svg> CVA rule reads these via
1234
- `size-[var(--ui-glyph)]`, KEEPING the `:not([class*=size-])` host-sized-icon
1235
- escape intact (an explicit `size-9` still wins). */
1236
- --ui-glyph: calc(1rem * var(--ui-scale));
1237
- --ui-glyph-sm: calc(0.875rem * var(--ui-scale));
1238
-
1239
- /* ── The picker-family type-scale (AX.W50 D17) ───────────────────────────
1240
- ONE governed two-rung scale the WHOLE shadcn picker family (Select /
1241
- DropdownMenu / Combobox / ContextMenu / Command / MultiSelect) reads, so the
1242
- family paints at ONE uniform scale instead of the scattered raw
1243
- `text-sm`/`text-xs` Tailwind-literal lottery (item rows at `text-sm`,
1244
- headings/shortcuts at `text-xs`, the two filter inputs at mismatched heights).
1245
- A consumer re-tints the whole family from ONE override.
1246
-
1247
- It is a SPECIALIZATION of W51's control-font register (one scale system, not
1248
- three): `--dropdown-text` reads `--control-text` (the comfort-scaled `text-sm`)
1249
- and `--dropdown-text-secondary` reads `--control-text-sm` (the comfort-scaled
1250
- `text-xs`), so the picker family rides the SAME `--ui-scale` comfort axis as
1251
- every other control — a `--ui-scale` bump grows the dropdowns too. A consumer
1252
- wanting the family LARGER than the rest overrides `--dropdown-text` directly
1253
- (e.g. `var(--type-body)`); the override re-resolves every family surface.
1254
-
1255
- Scale-contract (which surface reads which rung):
1256
- • PRIMARY (`--dropdown-text`) → item rows, triggers, filter inputs, empties.
1257
- • SECONDARY (`--dropdown-text-secondary`) → section labels, group-headings,
1258
- keyboard shortcuts (the quieter-than-item caption register; resolves the
1259
- witness-2 contradiction — the Select/DropdownMenu/ContextMenu labels
1260
- collapse DOWN to the secondary rung to match the Combobox/Command headings,
1261
- ONE rung for the section-label role family-wide).
1262
- `--dropdown-input-height` unifies the two filter-input heights (Combobox was
1263
- h-10, Command was h-11) onto ONE register — a specialization of W51's
1264
- `--control-h-md` so the picker input scales on the comfort axis with the font. */
1265
- --dropdown-text: var(--control-text);
1266
- --dropdown-text-secondary: var(--control-text-sm);
1267
- --dropdown-input-height: var(--control-h-md);
1268
-
1269
- --size-icon-btn: 2.5rem;
1270
- --icon-xs: 0.75rem;
1271
- --icon-sm: 0.875rem;
1272
- --icon-md: 1rem;
1273
- --icon-lg: 1.25rem;
1274
- --icon-xl: 1.5rem;
1275
- /* V.W2 T9 — 32px rung; spinner glyphs (Loader2) + dense table-row buttons.
1276
- Naming follows the radius ladder + Tailwind convention (2xl > xl > xxl) —
1277
- see B6 §2.4 for the naming rationale. */
1278
- --icon-2xl: 2rem;
1279
- /* V.W2 T10 — 40px rung; empty-state hero glyph (DashboardMap MapIcon).
1280
- AI.W5-ζ — rebound from `2.5rem` literal to `var(--size-icon-btn)` so
1281
- the alignment is contractual single-source-of-truth rather than the
1282
- coincidental numerical match noted prior. */
1283
- --icon-3xl: var(--size-icon-btn);
1284
- /* V.W2 T11 — 56px rung; FlowSelector school/home survey-flow picker.
1285
- Largest rung in the icon ladder; reserved for hero-class glyphs. */
1286
- --icon-hero: 3.5rem;
1287
-
1288
- /* Golden-ratio spacing rungs — φ² and φ³. Preemptive substrate; W4 hero
1289
- chassis + W5 StoryChassis migration land the consumers. R3 §A row 1.
1290
- The 0..4 rungs are not currently named (consumers reach via
1291
- Tailwind's spacing scale); 5/6 land here because their values fall
1292
- outside the default ladder and the audacious chassis pattern wants
1293
- a named handle. */
1294
- --space-phi-5: 2.618rem; /* φ² */
1295
- --space-phi-6: 4.236rem; /* φ³ */
1296
-
1297
- /* Dock geometry — consumers may override locally */
1298
- --dock-h: calc(var(--size-icon-btn) + 0.75rem + 3px);
1299
- --dock-margin: 0.5rem;
1300
- --dock-menubar-reserve: 4rem;
1301
-
1302
- /* AX.W45 — the dock geometry multiplier. `--dock-scale` threads the WHOLE
1303
- `.glass-dock[data-density]` geometry cascade (box, padding, gap, tab,
1304
- tile-min, glyph) via `calc(<base> * --dock-scale)`, so a single knob grows
1305
- every dock axis in lockstep. The WCAG 2.5.5 44px floor survives as a `max(…,
1306
- 44px)` clamp INSIDE the scaled control-size.
1307
-
1308
- AX.W51 RECONCILE (D18) — `--dock-scale` is RE-HOMED as a SPECIALIZATION of
1309
- the global `--ui-scale` comfort axis: `calc(var(--ui-scale) *
1310
- var(--dock-local-scale, 1))`. The dock now MULTIPLIES on top of the global
1311
- comfort scalar — its whole existing geometry `calc` chain inherits the global
1312
- axis for FREE (zero edit to the density cascade; the reconcile is at this ONE
1313
- definition line). At the desktop identity (`--ui-scale: 1`,
1314
- `--dock-local-scale: 1`) the dock is byte-identical to HEAD. On coarse-pointer
1315
- the GLOBAL `:root { --ui-scale: var(--ui-coarse-scale, 1.5) }` block grows the
1316
- dock WITH the rest of the library — ONE consistent touch scale, not a parallel
1317
- dock-only 1.5×. `--dock-local-scale` is the dock-local EXTRA multiplier
1318
- (default 1): a consumer who wants the dock LARGER than the global comfort sets
1319
- it, and the coarse block lifts it to `--dock-mobile-scale` (default 1, the
1320
- stack-extra) so the dock can grow an extra notch ON TOP of the global coarse
1321
- default. `--dock-mobile-scale` is the public library-default identity
1322
- (presets-in-consumers: a consumer sets 1.3/1.75 on `:root` or a dock scope). */
1323
- --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1));
1324
- --dock-local-scale: 1;
1325
- --dock-mobile-scale: 1;
1326
- /* Library glyph ownership — `.dock-icon-button > svg` reads this so the dock
1327
- icon glyph scales WITH the box (mirroring `.dark-mode-toggle-button > svg`).
1328
- A consumer-passed explicit lucide size class still WINS (utility layer >
1329
- component layer); this is a DEFAULT, not a ceiling. */
1330
- --dock-icon-glyph: calc(1.25rem * var(--dock-scale));
1331
-
1332
- /* AX.W45-TUNE Q1 — the COLLAPSED-pill floor tokens. The collapsed summary
1333
- used to fall to `--dock-layer-height` (the FULL control height, ~2.5rem) for
1334
- its `min-width` with NO block floor, so the shrunken pill read as an
1335
- un-collapsed control row, not a tight proportioned squircle. These two floor
1336
- tokens (referenced by dock.css's `.collapsed .dock-layer--summary` min-size +
1337
- the `--dock-pad-collapsed` morph floor) mint a TIGHT proportioned pill: the
1338
- summary min-size is ≈70% of the full control height (a proportioned dot, not a
1339
- full-row stub — the ratified default), and the collapsed padding is a step
1340
- BELOW the expanded `--dock-padding-block` so the collapsed chrome hugs the
1341
- glyph. The summary carries a SYMMETRIC `min-block-size` (dock.css) keyed to the
1342
- same token so the pill floors on BOTH axes — a squircle, not a stub. Consumers
1343
- retune the pill geometry per-instance via these two handles. */
1344
- --dock-collapsed-summary-min-size: calc(var(--dock-layer-height, 2.5rem) * 0.7);
1345
- /* AX.W61 — the collapsed padding now threads the ONE `--dock-scale` coarse-pointer
1346
- multiplier DIRECTLY (at HEAD it was a flat 0.25rem off the scale, so the
1347
- collapsed pad alone stayed desktop-sized at the 1.5x mobile scale while the
1348
- box/glyph/min-size grew — a desync the morph then interpolated FROM). The
1349
- summary min-size already threads `--dock-scale` transitively through
1350
- `--dock-layer-height` (itself `calc(* --dock-scale)` at every density rung); this
1351
- lands the collapsed pad on the same thread so the whole collapsed pill scales
1352
- coherently on touch. The 0.25rem base stays the ratified tight floor. */
1353
- --dock-collapsed-padding: calc(0.25rem * var(--dock-scale));
1354
-
1355
- /* AX.W45-TUNE Q3/C3 + C5 — the dock-control family reads a real GLASS register
1356
- on hover/active, NOT a same-hue `--card` mix at an alpha adjacent to the dock's
1357
- own `--glass-bg-dock` substrate (a sub-1%-ΔL no-op — the loud Q3 tell: "nothing
1358
- on hover, something on click"). Both legs now point at NAMED glass tiers a
1359
- measurable step ABOVE the dock's 42%-opacity substrate:
1360
- • hover → `--glass-bg-resting` (the 65% glass plate) — the control surface
1361
- WAKES as a brighter glass tier on hover, reading the blurred dock
1362
- substrate through it. The +ΔL above `--glass-bg-dock` is perceptible
1363
- BEFORE click; the specular gleam + scale ride alongside (one register).
1364
- • active → `--glass-bg-floating` (the 80% glass plate) — a tier ABOVE hover,
1365
- the keyframes-dock "selected element reads as glass" model the user
1366
- named (`pass-3:13`): the selected tile is a glass tier that shows the
1367
- substrate through it, NOT the flat `--surface-tint-12` ink wash. The
1368
- active ≠ hover register is the glass-tier step, not an alpha nudge.
1369
- This is a REGISTER change (substrate→glass-tier), not a magnitude knob. The
1370
- per-control `--dock-icon-hover-bg` override still wins if a consumer set it. */
1371
- --dock-control-hover-bg: var(--glass-bg-resting);
1372
- --dock-control-active-bg: var(--glass-bg-floating);
1373
-
1374
- /* AX.W45-TUNE C4/C5 — the small-tile specular override. The 40px dock-control
1375
- tile is a fraction of a card's plate, so the global `--glass-specular-size`
1376
- (36% of the plate) blooms a disproportionate disc on a hover/active dock tile
1377
- (the I.W6 finding). The dock controls scope a TIGHTER radius (22%) so the gleam
1378
- wakes as a restrained EDGE-catch on the small tile, not a tile-filling bloom —
1379
- the right resolution of I.W6 (sized-down on the small surface), not turning the
1380
- specular off everywhere. Read by the dock-control `::before` recipe (glass.css)
1381
- via the family-scoped override below; the global card/panel size is untouched. */
1382
- --dock-control-specular-size: 22%;
1383
-
1384
- /* AX.W45 DK8 — the layer-switcher rail surface ladder. The rail
1385
- (`.dock-layer-rail` inside a `<DockLayerGroup>`) gets its own quiet plate +
1386
- a tunable hover/active affordance, replacing the raw `--primary 15%` /
1387
- `--accent 40%` mixes the indicator/tab used against an absent plate. */
1388
- --dock-layer-rail-bg: var(--surface-tint-8);
1389
- --dock-layer-rail-hover: color-mix(in srgb, var(--accent) 40%, transparent);
1390
- --dock-layer-rail-active: color-mix(in srgb, var(--primary) 15%, transparent);
1391
-
1392
- /* Dock active-state ladder (O.W6 Lane B)
1393
- Token-overridable active paint for `.dock-icon-button`. Promoted
1394
- from hardcoded `background: var(--muted); color: var(--foreground)`
1395
- per bbnf-buddy O11/c R1: 7 `:deep()` escapes at `ToolsLayer.vue`
1396
- redefine bg/color/scale/border/shadow on the active variant; the
1397
- ladder absorbs ~3 of 7 at a stroke. Defaults preserve the prior
1398
- visual contract (no transform, no border, no shadow) — overrides
1399
- take effect per-instance via `:root` or a parent scope, e.g.
1400
- `.tools-layer { --dock-active-scale: 1.2; --dock-active-bg: …; }`.
1401
- ≥ 2-consumer coverage: bbnf-buddy ToolsLayer (override consumer) +
1402
- speedtest dock (default consumer).
1403
-
1404
- AX.W45 DK2 — re-pointed off the opaque `--muted` plate onto the glass-
1405
- correct `--dock-control-active-bg` (a translucent tint a ladder step above
1406
- hover), so the icon-button active no longer stamps a solid cream rectangle
1407
- over the dock glass. The O.W6 active-ladder override consumers still retint
1408
- per-instance; only the DEFAULT moved to glass-correct. */
1409
- --dock-active-bg: var(--dock-control-active-bg);
1410
- --dock-active-color: var(--foreground);
1411
- --dock-active-scale: 1;
1412
- --dock-active-border: none;
1413
- --dock-active-shadow: none;
1414
-
1415
- /* Q.W3 Lane G (Q-cos-13) — the O.W6 Lane D `--icon-tooltip-hit-area`
1416
- token retired here. IconTooltip no longer owns a wrap-span; the
1417
- slotted child carries its own WCAG 2.5.5 hit-area (interactive
1418
- children via their four-state contract, bare glyphs via a
1419
- `min-h-11 min-w-11` host). No orphaned token left behind. */
1420
-
1421
- /* O.W6 Lane D — Dock touch-target floor. Mirrors the IconTooltip
1422
- hit-area but for the dock-control surface. The base value tracks
1423
- the desktop default (`--size-icon-btn`); the
1424
- `@media (pointer: coarse)` block at `dock.css` lifts it to the
1425
- WCAG 2.5.5 floor on touch devices. */
1426
- --dock-touch-target: 2.75rem; /* 44px */
1427
-
1428
- /* AQ.W3 §7 — canonical WCAG 2.5.5 (44px) touch-target floor for the
1429
- NON-dock coarse-pointer surfaces (`Button size="icon"`,
1430
- ExpandableContainer triggers, SegmentedTabs responsive mobile trigger). One
1431
- named rung the `@media (pointer: coarse)` block in utilities.css reads,
1432
- retiring the per-consumer one-liner `min-h-[44px]` patches. Equals
1433
- `--dock-touch-target` numerically; kept as a distinct token so the
1434
- dock floor and the general floor can be retuned independently. */
1435
- --touch-target: 2.75rem; /* 44px */
1436
-
1437
- /* MetricBadge — stacked variant geometry. The 2-row stacked layout
1438
- (label / value+unit) wants a taller floor than the inline pill so the
1439
- label has breathing room above the baseline pair. T.W2.T2 +
1440
- audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
1441
- min-height with 6px (0.375rem) block padding. The inline ladder
1442
- keeps its tight defaults via `--metric-badge-min-height` /
1443
- `--metric-badge-padding-block` (declared inline at the
1444
- `.metric-badge` selector). */
1445
- --metric-badge-min-height-stacked: 2.625rem;
1446
- --metric-badge-padding-block-stacked: 0.375rem;
1447
-
1448
- /* Configurator — N.W2 Lane A density axis (4 rungs).
1449
- The `comfortable` rung restates the pre-N.W2 baked recipe exactly
1450
- (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
1451
- see no visual change. `mobile` halves the vertical breathing room
1452
- for narrow-viewport studios; `spacious` doubles it for settings-
1453
- page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
1454
- selector binding. */
1455
- --configurator-row-gap-mobile: 0.25rem; /* 4px — tight */
1456
- --configurator-row-gap-compact: 0.3125rem; /* 5px — slightly tighter */
1457
- --configurator-row-gap-comfortable: 0.375rem; /* 6px — pre-N.W2 default */
1458
- --configurator-row-gap-spacious: 0.75rem; /* 12px — generous */
1459
-
1460
- --configurator-row-py-mobile: 0.25rem; /* 4px — tight */
1461
- --configurator-row-py-compact: 0.375rem; /* 6px — slightly tighter */
1462
- --configurator-row-py-comfortable: 0.5rem; /* 8px — pre-N.W2 default */
1463
- --configurator-row-py-spacious: 0.875rem; /* 14px — generous */
1464
-
1465
- /* Component font override (consumers override locally) */
1466
- --select-font: inherit;
1467
-
1468
- /* ═══════════════════════════════════════════════
1469
- §11 INTERACTIVE SCALES & FOCUS
1470
- ═══════════════════════════════════════════════ */
1471
- --scale-hover: 1.08;
1472
- /* AX.W52 — the restrained BUTTON hover lift. `--scale-hover` (1.08) is an
1473
- 8% jump — emphatic for a marquee CTA, jarring as the general hover. The
1474
- button family (the audacious CTAs + `btn-interactive`) lifts on the
1475
- smaller `--scale-hover-btn` routed through `--spring-smooth` (the
1476
- sub-perceptual settle, not the snappy bounce), so the hover reads as ONE
1477
- coherent glide with the surface-leg cross-fade rather than a mechanical
1478
- pop. The dock keeps its proportionally-larger `--scale-hover-dock` (small
1479
- icon, bigger lift reads smaller).
1480
- AX.W54 Q3 — lifted 1.035 → 1.05: the 1.035 overshot DOWN (W52 tamed the
1481
- 1.08 snap so hard the lift read as nothing), so the glass hover now reads
1482
- as THREE legs together on hover — the specular gleam waking, a perceptible
1483
- scale, and the bg/border cross-fade — distinguishable from rest BEFORE the
1484
- click. Still sub-perceptual-bounce on `--spring-smooth`; the magnitude
1485
- moved, the easing register did not. */
1486
- --scale-hover-btn: 1.05;
1487
- --scale-hover-dock: 1.1;
1488
- --scale-press: 0.96;
1489
-
1490
- /* Press-scale rungs. `--scale-press` (0.96) is the canonical iOS Liquid
1491
- Glass press value every primitive reaches for unless it has a documented
1492
- reason (DESIGN.md §L3); `--scale-press-btn` aliases the slightly-softer
1493
- `--scale-press-sm` (0.97) the button + slider recipes consume.
1494
-
1495
- AT.W7-dock-b — press canon. `--scale-press-dock` previously hard-coded a
1496
- deeper 0.92 (a second magic press value with no documented rationale),
1497
- so a dock control pressed visibly harder than every other primitive. It
1498
- now references the canonical `--scale-press` (0.96) — ONE source for the
1499
- press scale across the system. A consumer wanting the dock's old deeper
1500
- press overrides `--scale-press-dock` on the dock instance. */
1501
- --scale-press-dock: var(--scale-press);
1502
- --scale-press-sm: 0.97;
1503
- --scale-press-btn: var(--scale-press-sm);
1504
-
1505
- /* AX.W53 — the SegmentedTabs travel-squish cap. The active indicator
1506
- (segmented/pill slider OR the underline rule) STRETCHES along its travel
1507
- axis as it glides between tabs, then settles to fit — the Material 3
1508
- ELASTIC / Apple Liquid-Glass "controls insist on animating themselves"
1509
- register, kept RESTRAINED. The deform is volume-preserving (stretch X,
1510
- compress Y in lockstep: `scale: var(--stretch) calc(1 / var(--stretch))`)
1511
- so it reads as an elastic warp, never a size pump. The cap holds the peak
1512
- LOW (1.08 ≈ +8%) — iOS 26.2 dialed motion DOWN; a high-frequency control
1513
- wants a whisper of squish, not a bounce. A consumer dials the elasticity
1514
- (or to 1 for none) without touching source. */
1515
- --tab-indicator-max-stretch: 1.08;
1516
- --opacity-disabled: 0.5;
1517
- --opacity-icon-muted: 0.8;
1518
-
1519
- --focus-ring-width: 2px;
1520
- /* D6.b — the focus-ring color routes through a `--focus-ring-color`
1521
- indirection (default `--ring`, so the resolved shadow is byte-identical to
1522
- the prior hard `--ring` recipe). An opt-in channel (the `focus-ring-gold`
1523
- utility, utilities.css) overrides ONLY this color to mint a gilded
1524
- "you are here / this is live" ring — gold is the transient STATE voice;
1525
- the resting active mark stays its structural color (the four-voice law). */
1526
- --focus-ring-color: var(--ring);
1527
- --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 30%, transparent),
1528
- 0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent);
1529
- --focus-ring: var(--focus-ring-shadow);
1530
-
1531
- /* ═══════════════════════════════════════════════
1532
- §12 PAPER TEXTURES
1533
- ═══════════════════════════════════════════════ */
1534
- /* Canonical subtle paper-texture opacity — restored from fourier-original
1535
- (`4df1a06:web/src/style.css:53-54`) after A.W3.5.ab confirmed the
1536
- heretofore `opacity='1'` URI rendered as an overt grain field in every
1537
- downstream consumer of `.paper-texture`. The SVG `opacity` attribute is
1538
- baked at parse-time and cannot read a CSS var, so the subtle value must
1539
- be inlined; if a consumer needs a heavier overlay, they should layer
1540
- a wrapper element with its own `opacity:`/`mix-blend-mode:` atop. */
1541
- --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
1542
- --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
1543
-
1544
- /* ═══════════════════════════════════════════════
1545
- §13 GOLD (accent family kept for consumers using it)
1546
- ═══════════════════════════════════════════════ */
1547
- --gold: oklch(0.751 0.147 84.2);
1548
- --gold-light: oklch(0.890 0.183 96.1);
1549
- --gold-dark: oklch(0.599 0.132 64.2);
1550
- /* AY.W-PRIM-POLISH D1 — the saturated CTA plate the AW.W13 gold-CTA contract
1551
- names. A FIXED deep gold (mode-INVARIANT — the gold-CTA hover backplate must
1552
- be dark in BOTH modes so the white label clears ≥4.5:1; deepening toward the
1553
- mode-flipping `--foreground` brightened the dark plate to a cream-gold and
1554
- broke dark). ~`--gold-dark` deepened toward warm-ink → ~rgb(120,87,45),
1555
- 6.5:1 white in light / 5.5:1 in dark. The opaque base of `btn-audacious-gold`
1556
- :hover. */
1557
- --gold-deep: oklch(0.487 0.103 63.0);
1558
-
1559
- /* D6.b — the chrome-gold additions (the rim + the legible ink), completing
1560
- the gold quad into the gilt FAMILY. Gold is a metal, not a hue — it must
1561
- read as reflectance, so it lives at the EDGE and the HIGHLIGHT, rarely as
1562
- an area.
1563
-
1564
- --gold-rim — the gilt EDGE catch: `--gold` at 40% over the surface, the
1565
- 1px tooled bevel light the `.glass-gilt` modifier + the gilt dock button
1566
- paint. Non-text → no contrast floor.
1567
-
1568
- --gold-ink — legible gold-toned TEXT. Derived (NOT guessed) to clear the
1569
- cream-law ② floor (APCA |Lc| ≥ 45) against `--card` in BOTH arms; the raw
1570
- `--gold-dark` does not (it was minted as a plate hue). LIGHT arm:
1571
- oklch(0.560 0.118 70) → |Lc| 69.9 on the cream `--card` (hsl 48 12% 98%).
1572
- The dark-arm pair lifts L (the warm-dark stock) in the `.dark` block,
1573
- reaching |Lc| 77.1 on the dark `--card`. Both verified by
1574
- `proof:gold-ink-contrast`. */
1575
- --gold-rim: color-mix(in oklab, var(--gold) 40%, transparent);
1576
- --gold-ink: oklch(0.560 0.118 70);
1577
-
1578
- --color-gold: var(--gold);
1579
- --color-gold-light: var(--gold-light);
1580
- --color-gold-dark: var(--gold-dark);
1581
- --color-gold-deep: var(--gold-deep);
1582
- --color-gold-rim: var(--gold-rim);
1583
- --color-gold-ink: var(--gold-ink);
1584
-
1585
- /* ═══════════════════════════════════════════════
1586
- §14 RAINBOW PALETTE — oklch (AV.W16 TW2; mode-independent, no .dark
1587
- mirror; hue preserved from the prior hsl() cadence)
1588
- ═══════════════════════════════════════════════ */
1589
- --rainbow-red: oklch(0.636 0.210 25.5);
1590
- --rainbow-orange: oklch(0.737 0.163 58.9);
1591
- --rainbow-yellow: oklch(0.900 0.183 103.7);
1592
- --rainbow-green: oklch(0.772 0.233 144.8);
1593
- --rainbow-blue: oklch(0.633 0.162 252.1);
1594
- --rainbow-indigo: oklch(0.566 0.206 294.1);
1595
- --rainbow-violet: oklch(0.684 0.250 327.9);
1596
-
1597
- --rainbow-pastel-red: oklch(0.793 0.066 18.7);
1598
- --rainbow-pastel-orange: oklch(0.823 0.059 57.3);
1599
- --rainbow-pastel-yellow: oklch(0.889 0.068 98.1);
1600
- --rainbow-pastel-green: oklch(0.826 0.072 149.5);
1601
- --rainbow-pastel-blue: oklch(0.783 0.056 264.2);
1602
- --rainbow-pastel-indigo: oklch(0.772 0.062 300.2);
1603
- --rainbow-pastel-violet: oklch(0.799 0.070 314.4);
1604
-
1605
- /* ═══════════════════════════════════════════════
1606
- §16 TIMELINE
1607
- Timeline primitive tokens. All three variants (scrubber +
1608
- segmented + continuous) compose these. Both segmented + continuous
1609
- arrays carry the same `TimelineSegment[]` data shape; only the
1610
- rendering geometry differs. See DESIGN.md `## Timeline Primitive`.
1611
- ═══════════════════════════════════════════════ */
1612
-
1613
- /* Heights — per-variant rail thickness */
1614
- --timeline-scrubber-height: 0.5rem; /* 8px — single-track scrubber */
1615
- --timeline-segmented-height: 0.625rem; /* 10px — N adjacent bands */
1616
- --timeline-continuous-height: 0.75rem; /* 12px — ONE pill, N regions */
1617
-
1618
- /* Geometry — shared across all variants */
1619
- --timeline-dot-size: 0.875rem; /* 14px — boundary dot diameter (pointer: fine) */
1620
- --timeline-dot-size-touch: 1.25rem; /* 20px — boundary dot diameter (pointer: coarse) */
1621
- --timeline-touch-target: 44px; /* AC.W6d F2.I-04 — WCAG 2.5.5 target-size floor.
1622
- The `::before` halo around each dot extends to
1623
- this dimension so finger-precision users meet
1624
- the (target-size: 44×44 minimum) clause without
1625
- the visible dot growing to that footprint at
1626
- pointer: fine. */
1627
- --timeline-segment-flex: 1 1 0; /* per-cell flex distribution (segmented) */
1628
-
1629
- /* Boundary-dot glass knobs (Q.W4 Lane B — promoted from
1630
- ContinuousTimeline.vue SFC fallbacks; `3cb70db` minted these as a
1631
- private dialect). The continuous-variant dot is a GLASS primitive:
1632
- a translucent tinted fill over a backdrop blur with a hairline
1633
- ring. These knobs let consumers retune the resting glass + the
1634
- per-state tints without a `:deep()` reach.
1635
- fill — resting translucent fill
1636
- blur — backdrop blur tier behind the dot
1637
- ring — hairline glass ring (border-color)
1638
- tint-current — wash colour for the active-phase dot
1639
- tint-completed — wash colour for the completed-phase dot
1640
- check-color — completion-tick stroke (defaults to the
1641
- completed tint) */
1642
- --timeline-dot-fill: var(--surface-tint-12);
1643
- --timeline-dot-blur: var(--glass-blur-quiet);
1644
- --timeline-dot-ring: var(--glass-border-floating);
1645
- --timeline-dot-tint-current: var(--accent, var(--foreground));
1646
- --timeline-dot-tint-completed: var(--success, var(--foreground));
1647
- --timeline-dot-check-color: var(--timeline-dot-tint-completed);
1648
-
1649
- /* Continuous-variant specific — seam dividers between regions.
1650
- Set `--timeline-continuous-seam-opacity: 0` to suppress the
1651
- inter-region 1px dividers entirely. Default `0.25` reads as a
1652
- subtle hairline; the `--timeline-continuous-seam-color` knob lets
1653
- consumers override the seam tint independently of opacity. */
1654
- --timeline-continuous-seam-opacity: 0.25;
1655
- --timeline-continuous-seam-color: color-mix(
1656
- in srgb,
1657
- var(--foreground) calc(var(--timeline-continuous-seam-opacity) * 100%),
1658
- transparent
1659
- );
1660
-
1661
- /* Per-segment default gradient fallback — applied when a segment
1662
- omits its `gradient` field. Consumers can override per-phase via
1663
- the `--timeline-segment-gradient-{key}` knobs below. */
1664
- --timeline-segment-default-gradient: linear-gradient(
1665
- 90deg,
1666
- var(--surface-tint-15),
1667
- var(--surface-tint-25)
1668
- );
1669
-
1670
- /* Per-phase gradient defaults — paint the canonical chart palette
1671
- at the gradient leading edge, fading to a 60%-opacity tail. The
1672
- speedtest consumer wires these via `gradient: "var(--timeline-segment-gradient-ping)"`
1673
- per segment; the same names work for any consumer who follows the
1674
- ping/download/upload/jitter taxonomy. */
1675
- --timeline-segment-gradient-ping: linear-gradient(
1676
- 90deg,
1677
- var(--chart-ping),
1678
- color-mix(in srgb, var(--chart-ping) 60%, transparent)
1679
- );
1680
- --timeline-segment-gradient-download: linear-gradient(
1681
- 90deg,
1682
- var(--chart-download),
1683
- color-mix(in srgb, var(--chart-download) 60%, transparent)
1684
- );
1685
- --timeline-segment-gradient-upload: linear-gradient(
1686
- 90deg,
1687
- var(--chart-upload),
1688
- color-mix(in srgb, var(--chart-upload) 60%, transparent)
1689
- );
1690
- --timeline-segment-gradient-jitter: linear-gradient(
1691
- 90deg,
1692
- var(--chart-jitter),
1693
- color-mix(in srgb, var(--chart-jitter) 60%, transparent)
1694
- );
1695
-
1696
- /* ═══════════════════════════════════════════════
1697
- §17 METRIC
1698
-
1699
- MetricRow / MetricStack value-clamp dialect. The declared values are the
1700
- `audacious` poster register — the hero-scale clamp for a single giant
1701
- number; MetricStack's `[data-register="result"]` selector overrides it
1702
- locally for the compact multi-row ledger. Three clamp arms each: `min`
1703
- (floor), `cqi` (the binding container-query middle term), `max`
1704
- (ceiling); unit carries min/max only (its cqi is a fixed 6cqi).
1705
- ═══════════════════════════════════════════════ */
1706
-
1707
- /* Value register — audacious-poster hero clamp */
1708
- --metric-row-value-clamp-min: 4.5rem;
1709
- --metric-row-value-clamp-cqi: 34cqi;
1710
- --metric-row-value-clamp-max: var(--type-display-hero);
1711
-
1712
- /* Unit register — one tier below the value it qualifies */
1713
- --metric-row-unit-clamp-min: 1.5rem;
1714
- --metric-row-unit-clamp-max: 3.25rem;
1715
-
1716
- /* Label register — uppercase, the binding row-height term in the
1717
- compact `result` register */
1718
- --metric-row-label-clamp-min: 1.125rem;
1719
- --metric-row-label-clamp-cqi: 5cqi;
1720
- --metric-row-label-clamp-max: 2.75rem;
1721
-
1722
- /* ═══════════════════════════════════════════════
1723
- §2.D INSTRUMENT-CLUSTER COMPOSITION RHYTHM
1724
-
1725
- The instrument-chassis family owns the under-meter / progress-cluster
1726
- grammar.
1727
-
1728
- • `--meter-progress-inset` — the negative-margin inset that pulls the
1729
- under-meter bar INTO the unpainted ring lane around the dial canvas
1730
- (~4% of meter-size). Consumed at `.phase-progress` via
1731
- `margin-block-start: calc(-1 * var(--meter-progress-inset))`. The
1732
- `--meter-size` reference resolves against the consumer's own
1733
- declaration; the 200px fallback keeps the calc well-defined.
1734
- • `--progress-stack-gap` — vertical rhythm between any two stacked
1735
- progress rails inside one cluster.
1736
- ═══════════════════════════════════════════════ */
1737
- --meter-progress-inset: calc(var(--meter-size, 200px) * 0.04);
1738
- --progress-stack-gap: clamp(0.1875rem, 0.4cqi, 0.375rem);
1739
-
1740
- /* ═══════════════════════════════════════════════
1741
- §2.E CELEBRATION-TIER REGISTER
1742
-
1743
- Shared peak for any "completion" / "thank-you" surface.
1744
-
1745
- • `--celebration-row-rhythm` — gap between the cluster's rows (cqi-axis).
1746
- • `--text-celebration-headline-size` — the single designed peak both
1747
- celebration surfaces clamp toward (cqi-axis).
1748
- • `--complete-headline-size` — the per-consumer font-size hook a consumer
1749
- assigns the canon clamp to so its headline pegs at the shared peak;
1750
- the default falls back to a smaller hero-rung clamp.
1751
- ═══════════════════════════════════════════════ */
1752
- --celebration-row-rhythm: clamp(0.5rem, 1.6cqi, 1rem);
1753
- --text-celebration-headline-size: clamp(2.5rem, 12cqi, 9rem);
1754
- --complete-headline-size: clamp(2.25rem, 11cqi, 4rem);
1755
-
1756
- /* ═══════════════════════════════════════════════
1757
- §19 TABLE DENSITY
1758
-
1759
- A single unitless knob `--table-density` scales the cell padding +
1760
- header row height of the Table / DataTable primitive. Default `1`
1761
- resolves to 1rem cell padding + 3rem header height; 0.75 is a compact
1762
- admin table, 1.25 is comfortable/touch-friendly. The derived tokens are
1763
- read by the `table-cell` / `table-head` utilities; changing the knob
1764
- cascades instantly via CSS inheritance — no JS prop needed.
1765
- ═══════════════════════════════════════════════ */
1766
- --table-density: 1;
1767
- --table-cell-px: calc(1rem * var(--table-density));
1768
- --table-cell-py: calc(1rem * var(--table-density));
1769
- --table-head-h: calc(3rem * var(--table-density));
1770
- --table-head-px: calc(1rem * var(--table-density));
1771
-
1772
- /* ═══════════════════════════════════════════════
1773
- §20 PLATFORM MOTION (AQ.W5)
1774
-
1775
- The native-platform motion substrate axes. Three families, each read
1776
- by a `@supports`-gated CSS recipe in `scroll-driven.css`,
1777
- `animations.css` (§TOP-LAYER), and `view-transition.css` — every visual
1778
- knob a token so a consumer retunes without editing library source.
1779
-
1780
- SCROLL-DRIVEN (scroll-driven.css). Values mirror the JS-fallback
1781
- composable defaults (`useScrollProgress` / `useStaggerReveal`) so the
1782
- native CSS path and the fallback path read identically — no visual seam
1783
- at the `@supports` boundary.
1784
-
1785
- TOP-LAYER (animations.css §TOP-LAYER). The `@starting-style` entry/exit
1786
- grammar for native `<dialog>` / `[popover]` glass surfaces. Backdrop dim
1787
- uses the `hsl(var(--background) / α)` channel form — the legitimate
1788
- single-token alpha case (AQ.W2's color-mix migration is orthogonal).
1789
-
1790
- VIEW-TRANSITION (view-transition.css). The shared `.gl-list-item` group
1791
- recipe + the `--vt-*` axes the `useViewTransition` substrate consumers
1792
- (dock layer swap, muster J's verdict re-rank) tune their swap against.
1793
- ═══════════════════════════════════════════════ */
1794
- --scroll-progress-scroller: root;
1795
- --scroll-reveal-rise: 6px;
1796
- --scroll-reveal-range-end: 60%;
1797
-
1798
- --top-layer-enter-scale: 0.96;
1799
- --top-layer-backdrop-blur: 8px;
1800
- --top-layer-backdrop-dim: 0.5;
1801
-
1802
- --vt-duration: var(--duration-normal);
1803
- /* AX.W05 — ONE iOS-spring vocabulary: every spring-flavored transition reads
1804
- a governed `--spring-*` register. The legacy apple-spring cubic-bezier
1805
- (+27.5% overshoot) was a SECOND authority beside the regen `--spring-*`
1806
- cohort; it is EXCISED. Its emphatic-overshoot register maps to the playful
1807
- `--spring-bouncy` (the closest `linear()` overshoot stop-set), so the VT
1808
- default + the cards/top-layer transitions share one spring primitive
1809
- (CPU + GPU sample the same curve). No cubic-bezier fallback seed survives —
1810
- the `linear()` spring degrades to `ease` where `linear()` is unsupported. */
1811
- --vt-ease: var(--spring-bouncy);
1812
- --vt-rise: 8px;
1813
-
1814
- /* AT.W6-dock-c / AU.W8 — the dock layer-swap morph timing, minted ONCE so
1815
- both engine paths are timing-IDENTICAL: the FLIP fallback (via
1816
- `--dock-motion-resize`), the native View-Transition group (its
1817
- `animation-timing-function`), AND the runtime SpringProgress driver
1818
- (AU.W8.3) consume this same `(0.32, 0.7)` source curve. Retires the AQ.W6
1819
- fork where the VT path ran `--vt-ease` (apple-spring, +27.5% overshoot)
1820
- while the FLIP ran the snappy spring. `--vt-ease` still defaults the
1821
- other VT recipes (`.gl-list-item`).
1822
-
1823
- AU.W8 — RETARGET snappy → dock. `--spring-snappy` (ζ=0.65, +6.8%) read as
1824
- mechanical: a stiff plateau at ~48% with too little overshoot to feel
1825
- alive ("not iOS-smooth"). AW.W2 then retuned the dock spring to the
1826
- iOS-control register: `--spring-dock` ((0.32, 0.7), ~+4.6%) settles snappy
1827
- with a restrained overshoot — the felt iOS dock morph, off the prior
1828
- playful +18.5% register. The runtime driver's DOCK_SPRING const MIRRORS the
1829
- (0.32, 0.7) PRESETS row, so the CSS token and the JS-driven morph are
1830
- bit-identical. */
1831
- --dock-resize-spring: var(--spring-dock);
1832
-
1833
- /* AT.W7-dock-b — dock-control press micro-feedback spring. A TRANSFORM-ONLY
1834
- spring (`scale`/`rotate`) the dock controls apply to their hover/press
1835
- activation so the squish reads with a touch of spring-back rather than a
1836
- flat ease. STRICTLY transform-scoped: it must never touch the surface-tier
1837
- `[data-held]` fades (background/border/box-shadow), which stay on
1838
- `--duration-fast var(--ease-standard)`. The duration pairs with
1839
- `--duration-fast`; consumers retune the whole feel via this one token.
1840
-
1841
- AY.W-DOCK2 (D6) — the register is `--spring-smooth`, the §6 easing-doctrine
1842
- transform-press register (tokens.css §2: transform hover/press/active →
1843
- `--spring-smooth`/`--spring-snappy`, NEVER `--spring-bouncy`; a press must
1844
- settle, never overshoot into a visible bounce). The prior `--spring-bouncy`
1845
- ROOT default was off-doctrine, shadowed for the four named controls by a
1846
- per-surface re-point in dock-controls.css — the exact per-surface fork the
1847
- doctrine kills. The re-point is now a DEAD byte-identical redeclaration and is
1848
- DELETED; the ROOT token IS the doctrine register, so any other consumer of
1849
- `--dock-press-spring` inherits the correct smooth register. */
1850
- --dock-press-spring: var(--duration-fast) var(--spring-smooth);
1851
- }
1852
-
1853
- /* AX.W51 D18 — the GLOBAL coarse-pointer comfort amplification. The WHOLE library
1854
- — buttons, inputs, badges, toggles, the dock (a specialization that reads
1855
- `--ui-scale`) — grows ~1.5× on touch from this ONE place, the W45 dock-only 1.5×
1856
- lifted to the master scalar so the touch scale is CONSISTENT across the library
1857
- (at HEAD the dock grew but the buttons did not — the three-scale split). The
1858
- WCAG-2.5.5 44px touch floor is enforced HERE too: `--control-floor` lifts to
1859
- `--touch-target`, so every scaled control-height `max(scaled, floor)` clamps at
1860
- ≥ 44px regardless of the scalar (a consumer dialing `--ui-scale` below 1 still
1861
- cannot drop a control under the target). Fine-pointer is byte-identical
1862
- (`--ui-scale` stays 1). `--ui-coarse-scale` is the public default a consumer
1863
- retunes. */
1864
- @media (pointer: coarse) {
1865
- :root {
1866
- --ui-scale: var(--ui-coarse-scale, 1.5);
1867
- --control-floor: var(--touch-target, 2.75rem);
1868
- }
1869
- }
1870
-
1871
- /* AV.W7 F2 — high-resolution overlay-blur restore. On a 2dppx+ display the
1872
- richer 24px overlay wash is amortised by the extra device pixels (the blur
1873
- samples a denser backing store), so the design ceiling is restored where it
1874
- is affordable. Standard-density displays keep the 15px budget radius set in
1875
- §-1a `:root`. Token-only override — every overlay surface that reads
1876
- `--glass-blur-overlay-radius` inherits the restored value automatically. */
1877
- @media (min-resolution: 2dppx) {
1878
- :root {
1879
- --glass-blur-overlay-radius: 24px;
1880
- }
1881
- }
1882
-
1883
- /* ═══════════════════════════════════════════════
1884
- §-1b LIGHT-DARK() COLOR ARCHITECTURE (AQ.W2 §2)
1885
-
1886
- Every PAIRED color token (a token whose `:root` and `.dark` values are
1887
- BOTH a <color> and differ) folds onto one `light-dark(light, dark)`
1888
- declaration, keyed off the element's `color-scheme` (§-1). This is the
1889
- single-source-of-truth collapse of the `.dark` mirror AND the dynamism
1890
- win: an unregistered custom property holding a `light-dark()` expression
1891
- re-resolves under a descendant `color-scheme` override (a `.dark`
1892
- code-block embedded in a light page, or vice-versa).
1893
-
1894
- DISCIPLINE (§2b — BINDING): these tokens MUST stay UNREGISTERED (no
1895
- `@property … syntax:"<color>"`). A registered <color> would resolve ONCE
1896
- at the declaring element and inherit the RESOLVED color, freezing the
1897
- descendant re-resolution. glass-ui's only `@property` registrations (§18)
1898
- are non-color (percentage/length), so the discipline holds — W2 adds NO
1899
- color `@property`.
1900
-
1901
- The semantic `var()`-aliases (`--background`, `--muted`, `--border`,
1902
- `--secondary`, `--accent`, `--card-foreground`, …) do NOT appear here:
1903
- they point at the SAME source name in both modes and auto-track once the
1904
- `--neutral-*` ladder + `--foreground` resolve via `light-dark()`. Their
1905
- redundant `.dark` re-declarations DELETE below.
1906
-
1907
- FALLBACK (§2c): this whole block is `@supports`-gated, so an engine
1908
- WITHOUT `light-dark()` skips it and the retained `.dark` class block (the
1909
- SOLE fallback floor) drives dark exactly as at HEAD. `light-dark()` is the
1910
- enhancement OVER the class — not a parallel alias. Baseline Newly
1911
- Available; the fallback floor is the pre-existing class block (net-zero
1912
- new fallback LOC).
1913
- ═══════════════════════════════════════════════ */
1914
- @supports (color: light-dark(white, black)) {
1915
- :root {
1916
- /* Neutral ladder — the source the var()-aliases track */
1917
- --neutral-0: light-dark(hsl(48 12% 98%), hsl(24 8% 6%));
1918
- --neutral-1: light-dark(hsl(48 10% 95%), hsl(24 6% 11%));
1919
- --neutral-2: light-dark(hsl(48 9% 90%), hsl(24 5% 16%));
1920
- --neutral-3: light-dark(hsl(48 8% 82%), hsl(24 5% 22%));
1921
- --neutral-4: light-dark(hsl(48 7% 70%), hsl(24 5% 34%));
1922
- --neutral-5: light-dark(hsl(48 6% 40%), hsl(48 5% 62%));
1923
- --neutral-6: light-dark(hsl(48 7% 30%), hsl(48 6% 72%));
1924
-
1925
- /* Core surfaces + ink */
1926
- --foreground: light-dark(hsl(24 10% 10%), hsl(48 10% 90%));
1927
- --card: light-dark(var(--neutral-0), hsl(24 8% 10%));
1928
- --popover: light-dark(var(--neutral-0), hsl(24 8% 10%));
1929
- --surface-public-data-panel: light-dark(hsl(44 16% 96%), hsl(36 9% 12%));
1930
-
1931
- --primary: light-dark(hsl(24 10% 10%), hsl(48 10% 90%));
1932
- --primary-foreground: light-dark(var(--neutral-0), hsl(24 10% 10%));
1933
- /* AX.W44 — dark-arm lift. The stock shadcn dark `hsl(0 62.8% 30.6%)`
1934
- (L≈30.6) was a saturated-PLATE value used AS INK over `--card` by the
1935
- Alert destructive variant — 1.75:1 over card (illegible) / 1.91:1 vs the
1936
- page. Lifted to `hsl(0 80% 60%)`: 4.60:1 as text over `--card` (clears the
1937
- 4.5 body floor) AND 5.03:1 as a plate vs the dark page (clears the 3.0
1938
- graphic floor). The light arm is UNCHANGED (already 4.70:1). Lockstep with
1939
- the `.dark` fallback floor below (§2c). */
1940
- --destructive: light-dark(hsl(0 72% 50%), hsl(0 80% 60%));
1941
- --destructive-foreground: light-dark(var(--neutral-0), hsl(48 10% 90%));
1942
- --ring: light-dark(hsl(24 10% 10%), hsl(48 10% 70%));
1943
- --shadow: light-dark(hsl(24 10% 10%), hsl(0 0% 5%));
1944
-
1945
- /* §4 native-control accent — the per-mode arms (dark reads the
1946
- mid-tone ring for checkmark-glyph contrast headroom, NOT the
1947
- near-white dark primary). Joins the light-dark() collapse; still
1948
- re-specified as `accent-color` inside `.dark` per §2b. */
1949
- --accent-color: light-dark(var(--primary), var(--ring));
1950
-
1951
- /* Section palette — jewel tones brightened L for dark (oklch pairs;
1952
- AV.W16 TW2 — hue preserved, L evened) */
1953
- --section-color-0: light-dark(oklch(0.552 0.192 359.8), oklch(0.721 0.145 354.0));
1954
- --section-color-1: light-dark(oklch(0.502 0.165 305.9), oklch(0.733 0.113 308.2));
1955
- --section-color-2: light-dark(oklch(0.484 0.163 265.5), oklch(0.718 0.107 268.4));
1956
- --section-color-3: light-dark(oklch(0.542 0.089 222.8), oklch(0.767 0.091 219.9));
1957
- --section-color-4: light-dark(oklch(0.551 0.088 171.1), oklch(0.776 0.105 172.6));
1958
- --section-color-5: light-dark(oklch(0.623 0.124 69.6), oklch(0.813 0.109 78.2));
1959
- --section-color-6: light-dark(oklch(0.579 0.201 30.4), oklch(0.693 0.151 28.1));
1960
- --section-color-7: light-dark(oklch(0.532 0.180 317.5), oklch(0.739 0.134 318.1));
1961
- --section-color-8: light-dark(oklch(0.520 0.176 8.4), oklch(0.709 0.142 2.3));
1962
- --section-color-9: light-dark(oklch(0.492 0.038 239.6), oklch(0.763 0.032 239.0));
1963
- --section-color-10: light-dark(oklch(0.556 0.103 128.8), oklch(0.794 0.116 127.9));
1964
- --section-color-11: light-dark(oklch(0.601 0.092 208.0), oklch(0.805 0.095 206.7));
1965
- --section-color-12: light-dark(oklch(0.513 0.163 291.9), oklch(0.719 0.115 295.6));
1966
-
1967
- --accent-pink: light-dark(oklch(0.613 0.197 353.8), oklch(0.683 0.131 354.7));
1968
- --section-heading: light-dark(oklch(0.545 0.189 352.8), oklch(0.711 0.123 349.3));
1969
- --accent-red: light-dark(oklch(0.574 0.216 27.5), oklch(0.644 0.165 22.9));
1970
-
1971
- /* Viz basis (amber/green stay var()-aliases → auto-track) */
1972
- --viz-fourier: light-dark(oklch(0.579 0.201 30.4), oklch(0.693 0.151 28.1));
1973
- --viz-chebyshev: light-dark(oklch(0.484 0.163 265.5), oklch(0.718 0.107 268.4));
1974
- --viz-legendre: light-dark(oklch(0.532 0.180 317.5), oklch(0.739 0.134 318.1));
1975
-
1976
- /* WCAG companion chart labels */
1977
- --chart-ping-label: light-dark(oklch(0.40 0.18 230), oklch(0.85 0.12 230));
1978
- --chart-download-label: light-dark(oklch(0.40 0.20 22), oklch(0.85 0.14 22));
1979
- --chart-upload-label: light-dark(oklch(0.40 0.16 55), oklch(0.85 0.12 55));
1980
- --chart-jitter-label: light-dark(oklch(0.40 0.20 305), oklch(0.85 0.14 305));
1981
-
1982
- /* Semantic UI accents */
1983
- --tier-featured: light-dark(oklch(0.841 0.173 84.2), oklch(0.867 0.165 88.7));
1984
- --tier-saved: light-dark(oklch(0.676 0.176 252.3), oklch(0.748 0.135 250.1));
1985
- --like: light-dark(oklch(0.633 0.200 24.9), oklch(0.690 0.162 22.2));
1986
- --success: light-dark(oklch(0.720 0.192 149.5), oklch(0.805 0.186 151.6));
1987
- --warning: light-dark(oklch(0.770 0.165 70.6), oklch(0.809 0.150 76.6));
1988
- --info: light-dark(oklch(0.626 0.186 259.6), oklch(0.713 0.138 259.5));
1989
- --delete: light-dark(oklch(0.597 0.198 25.5), oklch(0.644 0.170 23.1));
1990
-
1991
- /* Semantic foregrounds (warning-foreground is identical both modes
1992
- → stays a single light-mode declaration, no light-dark() needed) */
1993
- --success-foreground: light-dark(var(--neutral-0), hsl(48 10% 96%));
1994
- --info-foreground: light-dark(var(--neutral-0), hsl(48 10% 96%));
1995
-
1996
- /* Cartoon-shadow color primitives (§2d — plain colors, convert) */
1997
- --shadow-cartoon-color: light-dark(rgb(0 0 0 / 0.12), rgb(255 255 255 / 0.07));
1998
- --shadow-cartoon-color-soft: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.03));
1999
-
2000
- /* Gold family */
2001
- --gold: light-dark(oklch(0.751 0.147 84.2), oklch(0.784 0.143 86.0));
2002
- --gold-light: light-dark(oklch(0.890 0.183 96.1), oklch(0.898 0.182 97.4));
2003
- --gold-dark: light-dark(oklch(0.599 0.132 64.2), oklch(0.678 0.150 63.8));
2004
- }
2005
- }
2006
-
2007
- /* ═══════════════════════════════════════════════
2008
- DARK MODE — warm dark, section palette brightened ~20% L
2009
-
2010
- FALLBACK FLOOR (AQ.W2 §2c): this class block is the SOLE non-light-dark()
2011
- dark path. On a `light-dark()`-supporting engine with `.dark` present,
2012
- `.dark { color-scheme: dark }` (§1) makes every §-1b token resolve to its
2013
- dark arm and these explicit dark values agree with it (kept as the floor
2014
- for non-supporting engines). The pure `var()`-alias re-declarations
2015
- (`--muted`/`--secondary`/`--accent`/`--border`/`--input`/… and the
2016
- `--background`/`*-foreground` aliases) are DELETED — they auto-track the
2017
- `--neutral-*` ladder + `--foreground` resolved above; only EXPLICIT-color
2018
- dark values (and the non-color overrides §2d) stay.
2019
- ═══════════════════════════════════════════════ */
2020
- .dark {
2021
- /* §1 — hard-pin native chrome to dark regardless of OS preference. §4 —
2022
- re-specify the inherited `accent-color` so it re-resolves to the dark
2023
- arm (§2b: an inherited built-in <color> set at `:root` would freeze to
2024
- the light shade without this re-specification). */
2025
- color-scheme: dark;
2026
- accent-color: var(--accent-color);
2027
-
2028
- /* Neutral scale mirrors light-mode pattern: step UP from the background's
2029
- low L toward foreground. Same perceptual deltas as light. FALLBACK
2030
- FLOOR — kept verbatim for non-light-dark() engines (§2c); on a
2031
- supporting engine `color-scheme: dark` (above) drives the §-1b
2032
- light-dark() arms and these agree. */
2033
- --neutral-0: hsl(24 8% 6%); /* L 6 — page surface (dark) */
2034
- --neutral-1: hsl(24 6% 11%); /* L 11 — soft field */
2035
- --neutral-2: hsl(24 5% 16%); /* L 16 — chip / tab-inactive */
2036
- --neutral-3: hsl(24 5% 22%); /* L 22 — hover / highlight */
2037
- --neutral-4: hsl(24 5% 34%); /* L 34 — subtle border */
2038
- --neutral-5: hsl(48 5% 62%); /* L 62 — muted text (WCAG AA: 7.39:1 vs L6 page / 6.58:1 vs L11 muted) */
2039
- /* W7-α' (AK-FD1) — strong-muted text. Same principled ladder step as
2040
- light, mirrored: 10 L LIGHTER than muted (62→72) toward --foreground
2041
- (L90), the 1/3 point of the L62→L90 muted→primary gap. By-colour; hue
2042
- 48, sat nudged 5→6. WCAG AA: 9.86:1 vs L6 page / 8.78:1 vs L11 muted
2043
- (cf. neutral-5's 7.39:1). */
2044
- --neutral-6: hsl(48 6% 72%); /* L 72 — strong-muted text (secondary register) */
2045
-
2046
- /* --background / --card-foreground / --popover-foreground / --muted /
2047
- --muted-foreground{,-strong} / --secondary{,-foreground} /
2048
- --accent{,-foreground} / --border / --input are pure var()-aliases —
2049
- DELETED here (AQ.W2 §2a): they auto-track the --neutral-* ladder +
2050
- --foreground above. Re-declaring them would be redundant. */
2051
- --foreground: hsl(48 10% 90%);
2052
- --card: hsl(24 8% 10%);
2053
- --popover: hsl(24 8% 10%);
2054
-
2055
- /* R0G-5 (AO.W4) — dark mirror of the warm-neutral public-data panel.
2056
- --card's dark hsl(24 8% 10%) nudged one warmth step toward amber
2057
- (24→36) + +1 sat + +2 L so the dark dashboard panel lifts off the page. */
2058
- --surface-public-data-panel: hsl(36 9% 12%);
2059
-
2060
- --primary: hsl(48 10% 90%);
2061
- --primary-foreground: hsl(24 10% 10%);
2062
- /* AX.W44 — the `.dark` class fallback floor, in LOCKSTEP with the light-dark()
2063
- enhancement arm above (§2c). Same lifted `hsl(0 80% 60%)` so a
2064
- @supports-split engine and a class-toggle engine paint the SAME dark red
2065
- (4.60:1 as ink over --card / 5.03:1 as a plate vs page). */
2066
- --destructive: hsl(0 80% 60%);
2067
- --destructive-foreground: hsl(48 10% 90%);
2068
- --ring: hsl(48 10% 70%);
2069
- --shadow: hsl(0 0% 5%);
2070
-
2071
- /* Section palette — brightened for dark backgrounds (oklch; AV.W16 TW2 —
2072
- mirrors the light-dark() dark halves above; hue preserved) */
2073
- --section-color-0: oklch(0.721 0.145 354.0);
2074
- --section-color-1: oklch(0.733 0.113 308.2);
2075
- --section-color-2: oklch(0.718 0.107 268.4);
2076
- --section-color-3: oklch(0.767 0.091 219.9);
2077
- --section-color-4: oklch(0.776 0.105 172.6);
2078
- --section-color-5: oklch(0.813 0.109 78.2);
2079
- --section-color-6: oklch(0.693 0.151 28.1);
2080
- --section-color-7: oklch(0.739 0.134 318.1);
2081
- --section-color-8: oklch(0.709 0.142 2.3);
2082
- --section-color-9: oklch(0.763 0.032 239.0);
2083
- --section-color-10: oklch(0.794 0.116 127.9);
2084
- --section-color-11: oklch(0.805 0.095 206.7);
2085
- --section-color-12: oklch(0.719 0.115 295.6);
2086
-
2087
- --accent-pink: oklch(0.683 0.131 354.7);
2088
- --section-heading: oklch(0.711 0.123 349.3);
2089
- --accent-red: oklch(0.644 0.165 22.9);
2090
-
2091
- --viz-fourier: oklch(0.693 0.151 28.1);
2092
- --viz-chebyshev: oklch(0.718 0.107 268.4);
2093
- --viz-legendre: oklch(0.739 0.134 318.1);
2094
- /* --viz-amber / --viz-green / --meter-track-stroke are pure var()-aliases
2095
- (→ --section-color-5/-4 / --foreground) — DELETED (§2a); they auto-track
2096
- their sources, which convert via §-1b. */
2097
-
2098
- /* O.W6 Lane D — WCAG companion labels lift to L≈0.85 against the
2099
- deep dark canvas; same two-token discipline as light mode (canvas
2100
- hue preserved at `--chart-*`; only the label register shifts). */
2101
- --chart-ping-label: oklch(0.85 0.12 230);
2102
- --chart-download-label: oklch(0.85 0.14 22);
2103
- --chart-upload-label: oklch(0.85 0.12 55);
2104
- --chart-jitter-label: oklch(0.85 0.14 305);
2105
-
2106
- --tier-featured: oklch(0.867 0.165 88.7);
2107
- --tier-saved: oklch(0.748 0.135 250.1);
2108
- --like: oklch(0.690 0.162 22.2);
2109
- --success: oklch(0.805 0.186 151.6);
2110
- --warning: oklch(0.809 0.150 76.6);
2111
- --info: oklch(0.713 0.138 259.5);
2112
- --delete: oklch(0.644 0.170 23.1);
2113
-
2114
- /* Semantic foregrounds — off-white over dark plates. Mirrors the
2115
- `--destructive-foreground` dark pattern (hsl 48 10% 90%). The warning
2116
- glyph stays dark-on-amber; the dark amber rung is luminous enough that
2117
- a darker glyph still reads (matches light-mode behaviour). */
2118
- --success-foreground: hsl(48 10% 96%);
2119
- --warning-foreground: hsl(24 10% 10%);
2120
- --info-foreground: hsl(48 10% 96%);
2121
-
2122
- --shadow-cartoon: 3px 3px 0px 0px color-mix(in srgb, var(--foreground) 6%, transparent);
2123
- --shadow-cartoon-hover: 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 8%, transparent);
2124
- --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
2125
- --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);
2126
- --shadow-modal:
2127
- 4px 4px 0px 0px color-mix(in srgb, var(--foreground) 6%, transparent),
2128
- 0 24px 64px color-mix(in srgb, var(--foreground) 18%, transparent);
2129
-
2130
- --shadow-cartoon-color: rgb(255 255 255 / 0.07);
2131
- --shadow-cartoon-color-soft: rgb(255 255 255 / 0.03);
2132
-
2133
- /* §5c CONSTELLATION — dark arm (AX.W17). The H.W4 dark-mode lift: the node
2134
- tones step UP off the ink ground (the light arm's mid-grey would vanish on
2135
- L6 black), the hairline goes warm off-white, the field carries a touch more
2136
- presence to read at all. PLAIN-hsl literals, NEVER light-dark()/var(). */
2137
- --constellation-node: hsl(42 9% 72%);
2138
- --constellation-node-dim: hsl(42 8% 56%);
2139
- --constellation-line: hsl(45 12% 86%);
2140
- /* Anomaly — brightened for the deep canvas (same neutral-default register;
2141
- the consumer still overrides to its brand). */
2142
- --constellation-accent: hsl(20 70% 60%);
2143
- /* The dark hairlines lift harder over the ink ground, so the edge multipliers
2144
- run a touch lower than light to keep the field recessive. */
2145
- --constellation-edge-alpha: 0.20;
2146
- --constellation-edge-focus-alpha: 0.32;
2147
- /* §7 — the ink ground needs MORE field presence than cream to read at all, so
2148
- the dark alpha is modestly HIGHER than the light arm — but still BELOW the
2149
- slides 1.0 max-legibility reference (the recessive midpoint, not 1.0). */
2150
- --constellation-alpha: 0.88;
2151
-
2152
- /* Glass opacity + grain for dark — five-tier ladder, alpha-monotonic.
2153
- Each rung lifts ~0.08 from its light counterpart so the dark surfaces
2154
- carry comparable read-weight against the deeper canvas. */
2155
- --glass-opacity-wash: 0.38;
2156
- --glass-opacity-quiet: 0.58;
2157
- --glass-opacity-resting: 0.72;
2158
- --glass-opacity-floating: 0.88;
2159
- --glass-opacity-overlay: 0.96;
2160
- --glass-opacity-chassis: 0.36;
2161
- --glass-grain-opacity: 0.045;
2162
- --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.08);
2163
-
2164
- /* Hairline-accent dark mirror — see light counterpart at line ~404. */
2165
- --hairline-catch-light: inset 0 0.5px 0 0 rgb(255 255 255 / 0.05);
2166
- --hairline-under-shadow: 0 0.5px 0 0 rgb(0 0 0 / 0.06);
2167
-
2168
- /* Specular + curvature — softened for dark backdrops. Disco-grain stays
2169
- at the same opacity ceiling; the dark grain blend already lifts it. */
2170
- --glass-specular: inset 0 1.5px 0 0 hsl(0 0% 100% / 0.30);
2171
- /* AV.W15 M3 — the full-perimeter rim remaps to its dark weight inside
2172
- `.dark` (mirroring the `--glass-specular` remap above). The lit token
2173
- resolves to the `-dark` alpha on the deeper canvas. */
2174
- --glass-edge-light: var(--glass-edge-light-dark);
2175
-
2176
- /* AW.W23 — the chromatic-fringe + adaptive-tint dark arm. The fringe drops
2177
- to a lower-luminance warm/cool pair on the deep canvas; `--glass-tint-
2178
- source` auto-flips with `--card` (no override needed — the default already
2179
- resolves the dark card). */
2180
- --glass-fringe-warm: oklch(0.78 0.07 40 / 0.18);
2181
- --glass-fringe-cool: oklch(0.74 0.06 230 / 0.14);
2182
- /* AX.W52 D19 — the curvature sheen is genuinely SOFTER on the deep canvas (the
2183
- prior dark arm re-declared the overlay BYTE-IDENTICAL to light, so it read
2184
- HARDER over the dark substrate — an unsoftened-dark defect). The `:root`
2185
- `--glass-curvature-overlay` already reads `var(--glass-curvature-intensity)`,
2186
- so lowering just the intensity here re-resolves the SAME warm-cream recipe at
2187
- a softer alpha — no byte-identical re-declaration. */
2188
- --glass-curvature-intensity: 0.012;
2189
-
2190
- /* Gold — boosted for dark (oklch; AV.W16 TW2) */
2191
- --gold: oklch(0.784 0.143 86.0);
2192
- --gold-light: oklch(0.898 0.182 97.4);
2193
- --gold-dark: oklch(0.678 0.150 63.8);
2194
- /* D6.b — the dark-arm gilt ink. `--gold-rim` auto-re-resolves (its color-mix
2195
- reads the dark `--gold` above — no override). `--gold-ink` MUST lift L for
2196
- the dark `--card` (hsl 24 8% 10%): a deep gold-dark ink would vanish into
2197
- the near-black plate, so the dark ink is a BRIGHT gold —
2198
- oklch(0.860 0.158 90) → |Lc| 77.1 on the dark `--card` (cream-law ②;
2199
- verified by proof:gold-ink-contrast). */
2200
- --gold-ink: oklch(0.860 0.158 90);
2201
- }
2202
-
2203
- /* ═══════════════════════════════════════════════
2204
- §18 TYPED CSS PROPERTIES — Houdini @property registrations
2205
- (AI.W4 grammar — adjacent to §2.C tokens above)
2206
-
2207
- Three typed custom properties register with the CSS Houdini @property
2208
- API so transitions interpolate VALUES (percentage / length) rather
2209
- than the textual representation. Unregistered fallback is safe — the
2210
- `initial-value` provides a sensible default for any consumer that
2211
- imports this stylesheet on a browser that doesn't yet support the
2212
- typed @property registration (the cross-fade collapses to the
2213
- initial value, then re-paints at the new state).
2214
-
2215
- Browser support: Chromium 85+, Safari 16.4+, Firefox 128+. The
2216
- speedtest deployment target sits well within the floor.
2217
-
2218
- • --progress-crescendo (percentage) — the leading-edge brightness
2219
- ramp on `<Progress variant="gradient">` past 85% modelValue.
2220
- `inherits: false` because the value is consumed at one
2221
- declaration only (the gradient stop calculation); inheriting
2222
- would let an unrelated ancestor accidentally drive a sibling
2223
- progress bar.
2224
-
2225
- • --phase-tint-amount (percentage) — the chassis depth-of-tint
2226
- companion to `--phase-color`. `inherits: true` because the
2227
- value cascades from the chassis root through every region
2228
- wrapper that reads it for a sympathetic tint (matches the
2229
- `--phase-color` inheritance pattern).
2230
-
2231
- • --ripple-radius (length) — the `btn-audacious` press ripple
2232
- radial. `inherits: false` because each button owns its own
2233
- ripple state (a hovered parent must not push a ripple-radius
2234
- onto a non-pressed child).
2235
- ═══════════════════════════════════════════════ */
2236
-
2237
- @property --progress-crescendo {
2238
- syntax: "<percentage>";
2239
- inherits: false;
2240
- initial-value: 0%;
2241
- }
2242
-
2243
- @property --phase-tint-amount {
2244
- syntax: "<percentage>";
2245
- inherits: true;
2246
- initial-value: 0%;
2247
- }
2248
-
2249
- @property --ripple-radius {
2250
- syntax: "<length>";
2251
- inherits: false;
2252
- initial-value: 0px;
2253
- }
2254
-
2255
- /* ═══════════════════════════════════════════════
2256
- §11b POINTER-ANCHORED MOVING SPECULAR (AV.W15)
2257
-
2258
- The iOS-26 Liquid Glass "light travels around the material /
2259
- illuminate under your fingertip" behaviour. A masked radial-gradient
2260
- catch-light rides the surface at (--specular-x, --specular-y), driven
2261
- by the consumer's pointer-tracked --mouse-x/--mouse-y write. Registered
2262
- as typed custom properties so the position INTERPOLATES smoothly between
2263
- pointer samples (a bare unregistered var() snaps; the @property reg lets
2264
- the engine animate the percentage stop).
2265
-
2266
- • --specular-x / --specular-y (percentage) — the catch-light centre.
2267
- `inherits: false` because each glass surface owns its own pointer
2268
- position (a hovered parent must not push its specular onto a child —
2269
- the no-glass-on-glass discipline made mechanical).
2270
-
2271
- • --specular-intensity (number) — the catch-light alpha multiplier.
2272
- `inherits: false` for the same per-surface-ownership reason; rises on
2273
- hover/active, settles to its rest floor on leave.
2274
-
2275
- @property crosses Baseline 2024-07-09. The consumption (the masked
2276
- radial + the reduced-motion static bracket + the var() fallback) lives
2277
- in glass-specular-track.css; the registrations live here alongside the
2278
- other three regs so the typed-property tier has one home.
2279
- ═══════════════════════════════════════════════ */
2280
-
2281
- @property --specular-x {
2282
- syntax: "<percentage>";
2283
- inherits: false;
2284
- initial-value: 50%;
2285
- }
2286
-
2287
- @property --specular-y {
2288
- syntax: "<percentage>";
2289
- inherits: false;
2290
- initial-value: 50%;
2291
- }
2292
-
2293
- @property --specular-intensity {
2294
- syntax: "<number>";
2295
- inherits: false;
2296
- initial-value: 0;
2297
- }
2298
-
2299
- /* AX.W54 — the GLASS-FIRST single knob. `--glass-level` is the ONE clarity
2300
- scalar threaded through BOTH glass ladders at their single sites (the
2301
- `--glass-bg-*` opacity recipe + the `--glass-blur-*` radii). It is a typed,
2302
- INHERITING <number> so a host setting it on any ancestor retunes every
2303
- descendant glass surface (the @container-free cascade path) — and so it
2304
- animates smoothly rather than snapping. The level acts as a clarity multiplier
2305
- that PRESERVES level=1 (byte-identical to the hand-tuned ladder):
2306
- • level 1 — the calibrated glass (today's surfaces, unchanged).
2307
- • level 0 — the OPAQUE escape: solid `--card` + `blur(0)` through the SAME
2308
- machinery (the `.glass-opaque` rung + the a11y brackets ride it).
2309
- • level >1 — clearer (more transparent + more diffuse) in lockstep.
2310
- Glass is the DEFAULT surface register for EVERY band (USER-DECIDED MAXIMAL);
2311
- the opaque level-0 rung is the explicit opt-out. W55 carries the over-light
2312
- legibility on the SEPARATE `--glass-tint-*` axis (the `--glass-backdrop` probe
2313
- lifts the tint toward ink — level = opacity+blur, tint = darken-over-light, the
2314
- two axes coordinate but never collapse: the a11y Clear↔Tinted escape rides
2315
- level-up here AND tint-toward-ink under `prefers-contrast: more`). */
2316
- @property --glass-level {
2317
- syntax: "<number>";
2318
- inherits: true;
2319
- initial-value: 1;
2320
- }
2321
-
2322
- /* AX.W51 D18 — the master comfortable-sizing scalar registered typed. The
2323
- `<number>` syntax guarantees `calc(<base> * var(--ui-scale))` is always valid (a
2324
- malformed override CLAMPS to the initial value 1, not an invalidated calc — the
2325
- fail-safe); `inherits: true` (unlike the per-element specular @property cohort)
2326
- so a SCOPED override (a dense data-table region) cascades to every descendant
2327
- control without a per-element set; the type makes it animatable (a density
2328
- toggle COULD spring it). Mirrors the `--glass-level` registration above (the
2329
- cascading-scalar idiom), distinct from the per-element specular @property cohort
2330
- (those are `inherits: false`). */
2331
- @property --ui-scale {
2332
- syntax: "<number>";
2333
- inherits: true;
2334
- initial-value: 1;
2335
- }
2336
-
2337
- /* ── The specular-intensity magnitude cohort (AX.W09) ──────────────────────
2338
- The catch-light alpha multiplier at each interaction state, as a SINGLE
2339
- overridable token cohort (was three buried literals across glass.css —
2340
- `0.35` rest floor / `0.6` hover / `0.85` active — and the `.dark` arm's
2341
- `0.22`). `glass.css`'s `.glass-material::before` rest/hover/active rules READ
2342
- these, so the subtle-vs-extreme magnitude is a knob a consumer (or the dark
2343
- arm) retunes ON THE CASCADE — never a re-buried literal. Override on `:root`
2344
- to retune library-wide; the cartoon-shadow override contract is the precedent.
2345
-
2346
- Re-baselined AGAIN at AX.W52 D19 — with the central screen-disc replaced by a
2347
- BOUNDED plus-lighter edge gleam (glass.css), the gleam is a whisper at every
2348
- rung, so the cohort drops further (the W09 0.22/0.32 ceiling still lifted the
2349
- whole-tile disc on hover):
2350
- • rest 0 — static, unwired surfaces are CLEAN; the gleam wakes only on
2351
- hover/active or on a pointer-wired surface. Aligns the painted
2352
- rest with the @property `--specular-intensity { initial-value:
2353
- 0 }` dormancy.
2354
- • hover 0.10 — a whisper edge gleam, not a bloom.
2355
- • active 0.16 — the press whisper. */
2356
- :root {
2357
- --glass-specular-intensity-rest: 0;
2358
- --glass-specular-intensity-hover: 0.1;
2359
- --glass-specular-intensity-active: 0.16;
2360
- }
2361
-
2362
- /* Over the deep canvas `plus-lighter` still lifts, so the dark arm runs a touch
2363
- softer on the interaction rungs (rest already 0). */
2364
- .dark {
2365
- --glass-specular-intensity-hover: 0.08;
2366
- --glass-specular-intensity-active: 0.12;
2367
- }
24
+ /* CSS @import rules must precede every other rule. The nine partials @import in
25
+ cascade order: */
26
+ @import "./tokens/scheme-motion.css";
27
+ @import "./tokens/color-radius.css";
28
+ @import "./tokens/shadow.css";
29
+ @import "./tokens/glass.css";
30
+ @import "./tokens/offsets-sizing.css";
31
+ @import "./tokens/scale-paper.css";
32
+ @import "./tokens/light-dark.css";
33
+ @import "./tokens/dark-arm.css";
34
+ @import "./tokens/property-regs.css";