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