@mkbabb/glass-ui 3.7.0 → 3.9.0
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.
- package/README.md +1 -6
- package/dist/CardAction-DuArVky-.js +157 -0
- package/dist/{CommandShortcut-CY0aQTz5.js → CommandShortcut-CefCj5mt.js} +7 -7
- package/dist/{ContextMenuSubContent-BeDz7G6f.js → ContextMenuSubContent-Bhg4f5jX.js} +3 -3
- package/dist/{DataTable-gtPOLZvl.js → DataTable-CUHMukiQ.js} +4 -4
- package/dist/DeckProgress-Dmk4_AKN.js +23 -0
- package/dist/{DialogContent-DG1YMR-P.js → DialogContent-BRkT1cjP.js} +3 -3
- package/dist/{DialogFooter-BCIaDP15.js → DialogFooter-Gprw8H_A.js} +1 -1
- package/dist/{HoverPopover-DXpOEw1P.js → HoverPopover-2LOIW34a.js} +1 -1
- package/dist/{IconTooltip-Cu86JR4e.js → IconTooltip-yefK7cJc.js} +1 -1
- package/dist/{MetricBadge-D-bRaQUD.js → MetricBadge-lTc002u2.js} +1 -1
- package/dist/{Notification-B5WHP3_1.js → Notification-BxK8LZMw.js} +1 -1
- package/dist/{NumberFieldContent-CLNVR1iY.js → NumberFieldContent-BbLOh8RU.js} +2 -2
- package/dist/{PopoverContent-F1bWnYoh.js → PopoverContent-BId6ggf_.js} +1 -1
- package/dist/{Progress-c4vo4ALi.js → Progress-iEuD9pxG.js} +4 -4
- package/dist/{ScrollingText-BEp377U5.js → ScrollingText-BPP84wKo.js} +2 -2
- package/dist/{SelectScrollDownButton-DAo5NmY_.js → SelectScrollDownButton-T32cVFeM.js} +4 -4
- package/dist/{SelectSeparator-COFMJGng.js → SelectSeparator-C4Ql0gzV.js} +1 -1
- package/dist/{TabsList-COqIdW7i.js → TabsList-B8CVOQPC.js} +2 -2
- package/dist/{Toaster-BMaeziJJ.js → Toaster-1rYWrmAm.js} +1 -1
- package/dist/{ToggleGroupItem-C-AIkBUw.js → ToggleGroupItem-Cev4pOVK.js} +5 -5
- package/dist/animated-digit.js +1 -1
- package/dist/api/index.d.ts +5 -3
- package/dist/aurora.js +339 -408
- package/dist/{badge-DHQrc_GQ.js → badge-BvwvT50i.js} +4 -4
- package/dist/badge.js +1 -1
- package/dist/{button-CAywcrhO.js → button-DN39cGqL.js} +13 -12
- package/dist/button.js +1 -1
- package/dist/canvas.d.ts +1 -0
- package/dist/canvas.js +3 -0
- package/dist/card.js +1 -1
- package/dist/carousel.js +106 -105
- package/dist/collapsible.js +1 -1
- package/dist/{color-DjJCAQ6f.js → color-8jBjWiJ6.js} +22 -14
- package/dist/color.js +2 -2
- package/dist/command.js +1 -1
- package/dist/compile-DAjIoEy2.js +158 -0
- package/dist/components/custom/aurora/composables/atoms.d.ts +90 -25
- package/dist/components/custom/aurora/composables/color.d.ts +0 -12
- package/dist/components/custom/aurora/composables/uniformBridge.d.ts +34 -23
- package/dist/components/custom/aurora/constants/presets.d.ts +10 -7
- package/dist/components/custom/aurora/constants/renderMode.d.ts +22 -0
- package/dist/components/custom/aurora/constants/shaders/aurora.wgsl.d.ts +1 -1
- package/dist/components/custom/aurora/constants/shaders/brush.glsl.d.ts +1 -1
- package/dist/components/custom/aurora/constants/shaders/composition.glsl.d.ts +1 -1
- package/dist/components/custom/aurora/constants/shaders/mediums.glsl.d.ts +1 -1
- package/dist/components/custom/aurora/index.d.ts +3 -3
- package/dist/components/custom/configurator/ConfiguratorLayer.vue.d.ts +1 -1
- package/dist/components/custom/constellation/Constellation.vue.d.ts +40 -5
- package/dist/components/custom/constellation/constellationField.d.ts +110 -5
- package/dist/components/custom/constellation/index.d.ts +2 -2
- package/dist/components/custom/dock/DockSeparator.vue.d.ts +3 -0
- package/dist/components/custom/dock/GlassDock.vue.d.ts +57 -67
- package/dist/components/custom/dock/composables/dockContext.d.ts +7 -0
- package/dist/components/custom/dock/composables/dockMorphContext.d.ts +57 -0
- package/dist/components/custom/dock/composables/index.d.ts +3 -0
- package/dist/components/custom/dock/composables/useDockHold.d.ts +61 -0
- package/dist/components/custom/dock/composables/useLayerTransition.d.ts +13 -59
- package/dist/components/custom/dock/index.d.ts +4 -1
- package/dist/components/custom/goo-blob/GooBlob.vue.d.ts +13 -0
- package/dist/components/custom/goo-blob/composables/useBlobMood.d.ts +23 -5
- package/dist/components/custom/goo-blob/composables/useBlobPointer.d.ts +2 -0
- package/dist/components/custom/goo-blob/composables/useBlobSatellites.d.ts +2 -0
- package/dist/components/custom/goo-blob/composables/useMetaballRenderer.d.ts +20 -5
- package/dist/components/custom/goo-blob/index.d.ts +1 -1
- package/dist/components/custom/goo-blob/shaders/sdf-body.glsl.d.ts +1 -1
- package/dist/components/custom/goo-blob/shaders/watercolor-edges.glsl.d.ts +2 -2
- package/dist/components/custom/goo-blob/types.d.ts +8 -0
- package/dist/components/custom/tabs/SegmentedTabs.vue.d.ts +92 -0
- package/dist/components/custom/tabs/composables/useTabIndicator.d.ts +49 -0
- package/dist/components/custom/tabs/index.d.ts +2 -5
- package/dist/components/ui/button/index.d.ts +1 -1
- package/dist/components/ui/card/Card.vue.d.ts +28 -10
- package/dist/components/ui/card/index.d.ts +1 -1
- package/dist/components/ui/carousel/CarouselNext.vue.d.ts +1 -1
- package/dist/components/ui/carousel/CarouselPrevious.vue.d.ts +1 -1
- package/dist/components/ui/carousel/GlassCarouselPager.vue.d.ts +3 -4
- package/dist/components/ui/progress/ProgressDefault.vue.d.ts +14 -4
- package/dist/components/ui/slider/Slider.vue.d.ts +3 -1
- package/dist/components/ui/slider/index.d.ts +14 -7
- package/dist/components/ui/tabs/TabsList.vue.d.ts +1 -1
- package/dist/composables/color/index.d.ts +19 -0
- package/dist/composables/context/createContext.d.ts +1 -1
- package/dist/composables/dom/index.d.ts +1 -1
- package/dist/composables/dom/useResolveTokenColor.d.ts +27 -0
- package/dist/composables/glass/canvas2d/index.d.ts +2 -1
- package/dist/composables/glass/canvas2d/resolveCanvasColor.d.ts +20 -0
- package/dist/composables/glass/canvas2d/useCanvas2D.d.ts +15 -1
- package/dist/composables/glass/index.d.ts +3 -1
- package/dist/composables/glass/useSpecularTracking.d.ts +33 -0
- package/dist/composables/glass/webgl/createCanvasLifecycle.d.ts +1 -1
- package/dist/composables/glass/webgl/shaders/procedural-color.glsl.d.ts +4 -0
- package/dist/composables/glass/webgl/useWebGLCanvas.d.ts +1 -1
- package/dist/composables/motion/core/index.d.ts +1 -0
- package/dist/configurator.js +1 -1
- package/dist/confirm-dialog.js +2 -2
- package/dist/constellation.js +143 -74
- package/dist/context-menu.js +2 -2
- package/dist/controls.js +1 -1
- package/dist/data-table.js +1 -1
- package/dist/deck-progress.d.ts +1 -0
- package/dist/deck-progress.js +2 -0
- package/dist/dialog.js +2 -2
- package/dist/dock.js +468 -354
- package/dist/{dockContext-DLgrVWsU.js → dockContext-BKeIMmNk.js} +1 -1
- package/dist/dom.js +6 -6
- package/dist/{dropdown-menu-BWpwutt0.js → dropdown-menu-D77jX6Df.js} +4 -4
- package/dist/dropdown-menu.js +1 -1
- package/dist/fonts/README.md +26 -18
- package/dist/forms.js +5 -5
- package/dist/fourier-field.js +35 -35
- package/dist/glass-panel.js +7 -7
- package/dist/glass-ui.css +1 -1
- package/dist/glass-ui.js +154 -169
- package/dist/goo-blob.js +361 -274
- package/dist/header-ribbon.js +1 -1
- package/dist/hover-card.js +1 -1
- package/dist/hover-popover.js +1 -1
- package/dist/icon-tooltip.js +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/instrument-chassis.js +1 -1
- package/dist/instrument-rail.js +1 -1
- package/dist/label.js +1 -1
- package/dist/labeled-field.js +5 -5
- package/dist/{menuItemVariants-B4eFR5Ix.js → menuItemVariants-CCoBNkU5.js} +1 -1
- package/dist/metric-badge.js +1 -1
- package/dist/metric-stack.js +1 -1
- package/dist/motion-core.js +65 -65
- package/dist/motion.js +1 -1
- package/dist/notification.js +1 -1
- package/dist/number-field.js +1 -1
- package/dist/paper-backdrop.js +1 -1
- package/dist/popover.js +1 -1
- package/dist/progress.js +1 -1
- package/dist/pulse.js +2 -2
- package/dist/reactive.js +2 -2
- package/dist/resolveCanvasColor-BBiYfp8g.js +11 -0
- package/dist/scrolling-text.js +1 -1
- package/dist/search.js +9 -9
- package/dist/select.js +3 -3
- package/dist/separator.js +1 -1
- package/dist/{sheet-Cv1uO-Gq.js → sheet-VZEtNFvO.js} +2 -2
- package/dist/sheet.js +1 -1
- package/dist/slider-DC2mwuoe.js +142 -0
- package/dist/slider.js +1 -1
- package/dist/sortable-list.js +2 -2
- package/dist/status-dot.js +17 -16
- package/dist/styles/animations.css +6 -2
- package/dist/styles/components.css +1 -1
- package/dist/styles/dock/density.css +230 -0
- package/dist/styles/dock/layer-group.css +263 -0
- package/dist/styles/dock/layers.css +355 -0
- package/dist/styles/dock/morph.css +244 -0
- package/dist/styles/dock/overflow.css +201 -0
- package/dist/styles/dock/shell.css +457 -0
- package/dist/styles/dock-controls.css +187 -50
- package/dist/styles/dock.css +65 -1181
- package/dist/styles/fonts.css +0 -25
- package/dist/styles/glass.css +482 -102
- package/dist/styles/index.css +12 -11
- package/dist/styles/theme.css +60 -2
- package/dist/styles/tokens.css +625 -72
- package/dist/styles/typography.css +52 -69
- package/dist/styles/utilities.css +91 -40
- package/dist/styles/view-transition.css +12 -40
- package/dist/switch.js +1 -1
- package/dist/tabs.js +183 -152
- package/dist/timeline.js +3 -3
- package/dist/toast.js +1 -1
- package/dist/toggle-group.js +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/typewriter.js +1 -1
- package/dist/{useCanvas2D-C31yfUGY.js → useCanvas2D-ClrQuZtp.js} +2 -1
- package/dist/{useConfiguratorState-B24TcgIn.js → useConfiguratorState-DxAqksK6.js} +24 -13
- package/dist/useResolveTokenColor-r9pnNjqK.js +24 -0
- package/dist/useSpecularTracking-BVRZsRHA.js +26 -0
- package/dist/{useTextHighlight-aMPdEpkq.js → useTextHighlight-DON84L8w.js} +1 -1
- package/dist/{useTouchGate-YQRwyUGU.js → useTouchGate-WFyJYsth.js} +1 -1
- package/dist/vReveal-CqaCz_mC.js +44 -0
- package/dist/watercolor-dot.js +1 -1
- package/package.json +67 -36
- package/src/fonts/README.md +26 -18
- package/src/styles/animations.css +6 -2
- package/src/styles/dock/density.css +230 -0
- package/src/styles/dock/layer-group.css +263 -0
- package/src/styles/dock/layers.css +355 -0
- package/src/styles/dock/morph.css +244 -0
- package/src/styles/dock/overflow.css +201 -0
- package/src/styles/dock/shell.css +457 -0
- package/src/styles/dock-controls.css +187 -50
- package/src/styles/dock.css +65 -1181
- package/src/styles/fonts.css +0 -25
- package/src/styles/glass.css +482 -102
- package/src/styles/index.css +12 -11
- package/src/styles/theme.css +60 -2
- package/src/styles/tokens.css +625 -72
- package/src/styles/typography.css +52 -69
- package/src/styles/utilities.css +91 -40
- package/src/styles/view-transition.css +12 -40
- package/dist/CardAction-D8nSE62a.js +0 -163
- package/dist/DiscoGlyph-ZoBYpoxI.js +0 -132
- package/dist/GlyphFace-Ce_oe3tM.js +0 -51
- package/dist/UnderlineTabs-D_c1iYo-.js +0 -39
- package/dist/compile-iM4IUB66.js +0 -158
- package/dist/components/custom/aurora/constants/shaders/painterly.wgsl.d.ts +0 -7
- package/dist/components/custom/aurora/constants/shaders/wake.wgsl.d.ts +0 -4
- package/dist/components/custom/disco-glyph/DiscoGlyph.vue.d.ts +0 -58
- package/dist/components/custom/disco-glyph/index.d.ts +0 -1
- package/dist/components/custom/glass-carousel/GlassCarousel.vue.d.ts +0 -36
- package/dist/components/custom/glass-carousel/GlassCarouselItem.vue.d.ts +0 -28
- package/dist/components/custom/glass-carousel/index.d.ts +0 -4
- package/dist/components/custom/glass-carousel/useGlassCarousel.d.ts +0 -30
- package/dist/components/custom/glyph-face/GlyphFace.vue.d.ts +0 -64
- package/dist/components/custom/glyph-face/index.d.ts +0 -2
- package/dist/components/custom/glyph-face/keys.d.ts +0 -9
- package/dist/components/custom/responsive-tabs/ResponsiveTabs.vue.d.ts +0 -73
- package/dist/components/custom/responsive-tabs/index.d.ts +0 -2
- package/dist/components/custom/tabs/BouncyTabs.vue.d.ts +0 -27
- package/dist/components/custom/tabs/BouncyToggle.vue.d.ts +0 -60
- package/dist/components/custom/tabs/UnderlineTabs.vue.d.ts +0 -20
- package/dist/components/custom/tabs/composables/useBouncySlider.d.ts +0 -39
- package/dist/disco-glyph.d.ts +0 -1
- package/dist/disco-glyph.js +0 -2
- package/dist/fonts/fraunces/fraunces-latin.woff2 +0 -0
- package/dist/glass-carousel.d.ts +0 -1
- package/dist/glass-carousel.js +0 -214
- package/dist/glyph-face.d.ts +0 -1
- package/dist/glyph-face.js +0 -3
- package/dist/keys-Dyf_uTs5.js +0 -9
- package/dist/responsive-tabs.d.ts +0 -1
- package/dist/responsive-tabs.js +0 -95
- package/dist/slider-BA9wIs5e.js +0 -130
- package/dist/styles/disco-glyph.css +0 -26
- package/dist/styles/glyph-face.css +0 -92
- package/dist/useViewTransition-DaN5Zrox.js +0 -21
- package/dist/vReveal-BE2TsPoR.js +0 -24
- package/src/fonts/fraunces/fraunces-latin.woff2 +0 -0
- package/src/styles/disco-glyph.css +0 -26
- package/src/styles/glyph-face.css +0 -92
- /package/dist/{CollapsibleContent-D7UNsXQr.js → CollapsibleContent-CP9qF1v4.js} +0 -0
- /package/dist/{ContextMenuContent-DGKZX1Du.js → ContextMenuContent-DDa0v27s.js} +0 -0
- /package/dist/{HoverCardContent-Bn0UBMY9.js → HoverCardContent-B6CcQ8He.js} +0 -0
- /package/dist/{InstrumentChassis-BLJBl1BW.js → InstrumentChassis-C2f6cBaQ.js} +0 -0
- /package/dist/{InstrumentRail-BElFwKyt.js → InstrumentRail-CUJ05YVG.js} +0 -0
- /package/dist/{Label-DBc7bKzZ.js → Label-zRfbQdCn.js} +0 -0
- /package/dist/{ModalOverlay-D1VrWyoi.js → ModalOverlay-B1GkAjNb.js} +0 -0
- /package/dist/{PaperBackdrop-DCGoGatv.js → PaperBackdrop-CqwjnfLv.js} +0 -0
- /package/dist/{SelectGroup-BcaFjvP4.js → SelectGroup-BFiod7X2.js} +0 -0
- /package/dist/{Separator-DZyqsCum.js → Separator-D7sD7RKj.js} +0 -0
- /package/dist/{Switch-2rsAtDfA.js → Switch-LDKLmmgx.js} +0 -0
- /package/dist/{TooltipProvider-CD2IXfRv.js → TooltipProvider-CmZzCuaG.js} +0 -0
- /package/dist/{_plugin-vue_export-helper-gLzyemvl.js → _plugin-vue_export-helper-ok8pgSl5.js} +0 -0
- /package/dist/composables/{dom → motion}/useTextHighlight.d.ts +0 -0
- /package/dist/{createContext-CvNyBk4o.js → createContext-B44Sah_H.js} +0 -0
- /package/dist/{useGlassRenderer-HebgSEgN.js → useGlassRenderer-5I0YkI4t.js} +0 -0
- /package/dist/{useInterval-D3USn0yc.js → useInterval-Dsmqwi03.js} +0 -0
- /package/dist/{useResizeObserver-CSyxGxIX.js → useResizeObserver-CWCbk5Px.js} +0 -0
- /package/dist/{useSpringMount-LRZqJTaF.js → useSpringMount-BJSHcLl3.js} +0 -0
- /package/dist/{useTimer-DEJonOZa.js → useTimer-3xqf_54b.js} +0 -0
- /package/dist/{useUserInvalidAria-CQKjEfwP.js → useUserInvalidAria-DoJKMZ3s.js} +0 -0
- /package/dist/{useViewportReady-K96m-Mdv.js → useViewportReady-RIr5Wgkh.js} +0 -0
package/src/styles/tokens.css
CHANGED
|
@@ -33,21 +33,24 @@
|
|
|
33
33
|
accent-color: var(--accent-color);
|
|
34
34
|
|
|
35
35
|
/* ═══════════════════════════════════════════════
|
|
36
|
-
§0
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
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);
|
|
51
54
|
--font-stack-mono: "Fira Code", "Fira Code Fallback", "Fira Mono", monospace;
|
|
52
55
|
|
|
53
56
|
--type-leading-micro: 1.2;
|
|
@@ -155,6 +158,35 @@
|
|
|
155
158
|
`smooth` wants a slightly faster visual settle than `gentle`'s
|
|
156
159
|
patient curve. The 0.5% peak does not read as overshoot to the
|
|
157
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`).
|
|
158
190
|
═══════════════════════════════════════════════ */
|
|
159
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);
|
|
160
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);
|
|
@@ -175,10 +207,8 @@
|
|
|
175
207
|
|
|
176
208
|
/* Apple-inspired — micro-interactions, switches, dock hover */
|
|
177
209
|
--motion-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
178
|
-
--motion-ease-apple-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
179
210
|
|
|
180
211
|
--ease-apple: var(--motion-ease-apple);
|
|
181
|
-
--ease-apple-spring: var(--motion-ease-apple-spring);
|
|
182
212
|
--ease-spring: var(--spring-snappy);
|
|
183
213
|
--ease-decelerate: var(--ease-out);
|
|
184
214
|
--ease-accelerate: var(--ease-in);
|
|
@@ -189,17 +219,40 @@
|
|
|
189
219
|
Breathing rhythm for `<Pulse variant="aura">`. The 6s duration is the
|
|
190
220
|
canon ambient-pulse rate; scale 1.0 ↔ 1.15 reads as a quiet halo at
|
|
191
221
|
intensity="normal" (Pulse remaps min/max from its `intensity` prop).
|
|
192
|
-
The aura always keeps a visible halo at the trough (opacity min 0.55).
|
|
193
222
|
Reduced motion: Pulse.vue parks at the min stop, breath cycle disabled.
|
|
194
|
-
|
|
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. */
|
|
195
238
|
--animate-ambient-pulse-duration: 6s;
|
|
196
239
|
--animate-ambient-pulse-scale-min: 1.0;
|
|
197
240
|
--animate-ambient-pulse-scale-max: 1.15;
|
|
198
241
|
--animate-ambient-pulse-easing: var(--ease-apple);
|
|
199
242
|
|
|
200
|
-
/* Aura
|
|
201
|
-
|
|
202
|
-
|
|
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). */
|
|
203
256
|
--pulse-aura-opacity-min: 0.55;
|
|
204
257
|
--pulse-aura-opacity-max: 0.95;
|
|
205
258
|
|
|
@@ -411,13 +464,53 @@
|
|
|
411
464
|
|
|
412
465
|
/* Muted-tinted surface rungs — canonical handles for the 9 raw
|
|
413
466
|
`color-mix(in srgb, var(--muted) N%, transparent)` sites in
|
|
414
|
-
FuzzySearch /
|
|
467
|
+
FuzzySearch / SegmentedTabs / Slider scoped CSS. (AI.W5-δ — the
|
|
415
468
|
ProgressiveSidebar consumer retired at the wave; the canonical token
|
|
416
469
|
rung lives on for the remaining consumers.) Auto-dark via --muted.
|
|
417
470
|
R5 vocab.γ axis-1 row. */
|
|
418
471
|
--muted-soft: color-mix(in srgb, var(--muted) 30%, transparent);
|
|
419
472
|
--muted-medium: color-mix(in srgb, var(--muted) 50%, transparent);
|
|
420
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
|
+
|
|
421
514
|
/* ═══════════════════════════════════════════════
|
|
422
515
|
§6 SECTION PALETTE — 13-stop jewel tones (light)
|
|
423
516
|
═══════════════════════════════════════════════ */
|
|
@@ -535,6 +628,22 @@
|
|
|
535
628
|
--dock-shadow: var(--shadow-dock);
|
|
536
629
|
--dock-shadow-collapsed: var(--shadow-dock-collapsed);
|
|
537
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
|
+
|
|
538
647
|
/* Cartoon shadow color primitives (kept for tiered cartoon utilities) */
|
|
539
648
|
--shadow-cartoon-color: rgb(0 0 0 / 0.12);
|
|
540
649
|
--shadow-cartoon-color-soft: rgb(0 0 0 / 0.06);
|
|
@@ -599,7 +708,12 @@
|
|
|
599
708
|
opacity-only register. */
|
|
600
709
|
--glass-blur-dock-radius: 11px;
|
|
601
710
|
|
|
602
|
-
|
|
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);
|
|
603
717
|
/* AV.W15 M1 — the `quiet` rung gained `saturate(1.05) brightness(1.02)`
|
|
604
718
|
so the lower ladder reads with the same saturation life as `resting`+
|
|
605
719
|
(Apple: Liquid Glass concentrates light, it does not desaturate). The
|
|
@@ -607,12 +721,27 @@
|
|
|
607
721
|
between bare `wash` and `resting` without over-brightening the rung.
|
|
608
722
|
The `prefers-reduced-transparency: reduce` bracket at glass.css maps
|
|
609
723
|
`--glass-blur-quiet: none`, so this whole chain drops with the blur. */
|
|
610
|
-
--glass-blur-quiet: blur(var(--glass-blur-quiet-radius)) saturate(1.05) brightness(1.02);
|
|
611
|
-
--glass-blur-resting: blur(var(--glass-blur-resting-radius)) saturate(1.05);
|
|
612
|
-
|
|
613
|
-
|
|
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);
|
|
614
732
|
/* Dock blur composes blur() only — no saturate. */
|
|
615
|
-
--glass-blur-dock: blur(var(--glass-blur-dock-radius));
|
|
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);
|
|
616
745
|
|
|
617
746
|
/* Dock-specific opacity (0.42) — lighter than `resting` (0.65) so the dock
|
|
618
747
|
reads as a translucent overlay rather than a panel, backdrop bleed
|
|
@@ -629,7 +758,14 @@
|
|
|
629
758
|
muted icon weight the control mixes it down with `--opacity-icon-muted`.
|
|
630
759
|
Defaults to `var(--foreground)` so the dock paints byte-identically to
|
|
631
760
|
today; a consumer overrides it per-backdrop (e.g. a near-white over a
|
|
632
|
-
dark aurora) without touching library source.
|
|
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. */
|
|
633
769
|
--dock-fg-on-aurora: var(--foreground);
|
|
634
770
|
|
|
635
771
|
/* Chassis-specific opacity. Looser than `default` (0.50) so the
|
|
@@ -641,14 +777,24 @@
|
|
|
641
777
|
`glass-bg-medium` (0.65) down to its own 0.32. */
|
|
642
778
|
--glass-opacity-chassis: 0.28;
|
|
643
779
|
|
|
644
|
-
/* Composed backgrounds
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
--glass-bg-
|
|
651
|
-
--glass-bg-
|
|
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);
|
|
652
798
|
|
|
653
799
|
/* Composed borders — foreground-tinted */
|
|
654
800
|
--glass-border-wash: color-mix(in srgb, var(--foreground) 8%, transparent);
|
|
@@ -710,10 +856,58 @@
|
|
|
710
856
|
and `--glass-tint-strength` is 0%, so the rung background mixes 0% toward
|
|
711
857
|
the source = byte-identical to today. A consumer sets `--glass-tint-source`
|
|
712
858
|
to a sampled aurora hue + a strength ≤30% to bias the surface. Alpha-safe:
|
|
713
|
-
the mix is bounded ≤30% and never re-points the card's own alpha.
|
|
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. */
|
|
714
867
|
--glass-tint-source: var(--card);
|
|
715
868
|
--glass-tint-strength: 0%;
|
|
716
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
|
+
|
|
717
911
|
/* AW.W23 — chromatic edge dispersion (the "polished glass" rim fringe Apple
|
|
718
912
|
shows). A warm fringe on one edge + a cool fringe on the other, low-alpha,
|
|
719
913
|
biased warm-cream/NCSU-red (NOT iOS-blue). Composed OVER the W22 uniform
|
|
@@ -726,19 +920,36 @@
|
|
|
726
920
|
inset 0.75px 0 0 0 var(--glass-fringe-warm),
|
|
727
921
|
inset -0.75px 0 0 0 var(--glass-fringe-cool);
|
|
728
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
|
+
|
|
729
931
|
/* Chassis curvature illusion — a subtle radial gradient at the chassis
|
|
730
932
|
top centre that lifts the surface without committing to literal 3D.
|
|
731
|
-
Composed into <InstrumentChassis>'s background stack.
|
|
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;
|
|
732
942
|
--glass-curvature-overlay: radial-gradient(
|
|
733
943
|
ellipse at 50% -20%,
|
|
734
|
-
hsl(
|
|
735
|
-
transparent
|
|
736
|
-
);
|
|
737
|
-
--glass-curvature-overlay-dark: radial-gradient(
|
|
738
|
-
ellipse at 50% -20%,
|
|
739
|
-
hsl(0 0% 100% / 0.06),
|
|
740
|
-
transparent 60%
|
|
944
|
+
hsl(40 30% 96% / var(--glass-curvature-intensity)),
|
|
945
|
+
transparent 38%
|
|
741
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);
|
|
742
953
|
|
|
743
954
|
/* Chart palette aliases — speedtest et al. read these for phase tinting.
|
|
744
955
|
Defaults map to viz-basis hues; consumers can override per app. */
|
|
@@ -866,18 +1077,16 @@
|
|
|
866
1077
|
than cliffs. Defaults clamp to 80vw / 80vh capped at sensible
|
|
867
1078
|
desktop widths; consumers override per-dock by setting either
|
|
868
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. */
|
|
869
1087
|
--dock-max-inline-size: min(80vw, 64rem);
|
|
870
1088
|
--dock-max-block-size: min(80vh, 48rem);
|
|
871
1089
|
|
|
872
|
-
/* AT.W7-dock-a — the `overflow="wrap"` desktop snap-back breakpoint, named
|
|
873
|
-
once. Below this viewport width a wrap-mode dock reads as a multi-row pill
|
|
874
|
-
that narrows to the viewport gutter; at/above it the pill snaps back to a
|
|
875
|
-
single nowrap row. The single source-of-record for the threshold the
|
|
876
|
-
`@media` in dock.css realizes (a `var()` cannot drive a media-query
|
|
877
|
-
feature in Baseline CSS, so the MQ carries the literal value of THIS
|
|
878
|
-
token; consumers reading the breakpoint do so through this name). */
|
|
879
|
-
--dock-overflow-bp: 640px;
|
|
880
|
-
|
|
881
1090
|
/* AB.W1.T1 — chassis max-block-size guardrail.
|
|
882
1091
|
Maximum block size a centred consumer-app card may consume while
|
|
883
1092
|
preserving the inline dock footprint. The recipe subtracts the
|
|
@@ -926,6 +1135,105 @@
|
|
|
926
1135
|
/* ═══════════════════════════════════════════════
|
|
927
1136
|
§10 SIZING
|
|
928
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
|
+
|
|
929
1237
|
--size-icon-btn: 2.5rem;
|
|
930
1238
|
--icon-xs: 0.75rem;
|
|
931
1239
|
--icon-sm: 0.875rem;
|
|
@@ -959,6 +1267,96 @@
|
|
|
959
1267
|
--dock-margin: 0.5rem;
|
|
960
1268
|
--dock-menubar-reserve: 4rem;
|
|
961
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
|
+
|
|
962
1360
|
/* Dock active-state ladder (O.W6 Lane B)
|
|
963
1361
|
Token-overridable active paint for `.dock-icon-button`. Promoted
|
|
964
1362
|
from hardcoded `background: var(--muted); color: var(--foreground)`
|
|
@@ -969,8 +1367,14 @@
|
|
|
969
1367
|
take effect per-instance via `:root` or a parent scope, e.g.
|
|
970
1368
|
`.tools-layer { --dock-active-scale: 1.2; --dock-active-bg: …; }`.
|
|
971
1369
|
≥ 2-consumer coverage: bbnf-buddy ToolsLayer (override consumer) +
|
|
972
|
-
speedtest dock (default consumer).
|
|
973
|
-
|
|
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);
|
|
974
1378
|
--dock-active-color: var(--foreground);
|
|
975
1379
|
--dock-active-scale: 1;
|
|
976
1380
|
--dock-active-border: none;
|
|
@@ -991,7 +1395,7 @@
|
|
|
991
1395
|
|
|
992
1396
|
/* AQ.W3 §7 — canonical WCAG 2.5.5 (44px) touch-target floor for the
|
|
993
1397
|
NON-dock coarse-pointer surfaces (`Button size="icon"`,
|
|
994
|
-
ExpandableContainer triggers,
|
|
1398
|
+
ExpandableContainer triggers, SegmentedTabs responsive mobile trigger). One
|
|
995
1399
|
named rung the `@media (pointer: coarse)` block in utilities.css reads,
|
|
996
1400
|
retiring the per-consumer one-liner `min-h-[44px]` patches. Equals
|
|
997
1401
|
`--dock-touch-target` numerically; kept as a distinct token so the
|
|
@@ -1033,6 +1437,21 @@
|
|
|
1033
1437
|
§11 INTERACTIVE SCALES & FOCUS
|
|
1034
1438
|
═══════════════════════════════════════════════ */
|
|
1035
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;
|
|
1036
1455
|
--scale-hover-dock: 1.1;
|
|
1037
1456
|
--scale-press: 0.96;
|
|
1038
1457
|
|
|
@@ -1050,6 +1469,18 @@
|
|
|
1050
1469
|
--scale-press-dock: var(--scale-press);
|
|
1051
1470
|
--scale-press-sm: 0.97;
|
|
1052
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;
|
|
1053
1484
|
--opacity-disabled: 0.5;
|
|
1054
1485
|
--opacity-icon-muted: 0.8;
|
|
1055
1486
|
|
|
@@ -1300,12 +1731,14 @@
|
|
|
1300
1731
|
--top-layer-backdrop-dim: 0.5;
|
|
1301
1732
|
|
|
1302
1733
|
--vt-duration: var(--duration-normal);
|
|
1303
|
-
/*
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
(
|
|
1308
|
-
|
|
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. */
|
|
1309
1742
|
--vt-ease: var(--spring-bouncy);
|
|
1310
1743
|
--vt-rise: 8px;
|
|
1311
1744
|
|
|
@@ -1338,6 +1771,24 @@
|
|
|
1338
1771
|
--dock-press-spring: var(--duration-fast) var(--spring-bouncy);
|
|
1339
1772
|
}
|
|
1340
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
|
+
|
|
1341
1792
|
/* AV.W7 F2 — high-resolution overlay-blur restore. On a 2dppx+ display the
|
|
1342
1793
|
richer 24px overlay wash is amortised by the extra device pixels (the blur
|
|
1343
1794
|
samples a denser backing store), so the design ceiling is restored where it
|
|
@@ -1400,7 +1851,14 @@
|
|
|
1400
1851
|
|
|
1401
1852
|
--primary: light-dark(hsl(24 10% 10%), hsl(48 10% 90%));
|
|
1402
1853
|
--primary-foreground: light-dark(var(--neutral-0), hsl(24 10% 10%));
|
|
1403
|
-
|
|
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%));
|
|
1404
1862
|
--destructive-foreground: light-dark(var(--neutral-0), hsl(48 10% 90%));
|
|
1405
1863
|
--ring: light-dark(hsl(24 10% 10%), hsl(48 10% 70%));
|
|
1406
1864
|
--shadow: light-dark(hsl(24 10% 10%), hsl(0 0% 5%));
|
|
@@ -1522,7 +1980,11 @@
|
|
|
1522
1980
|
|
|
1523
1981
|
--primary: hsl(48 10% 90%);
|
|
1524
1982
|
--primary-foreground: hsl(24 10% 10%);
|
|
1525
|
-
|
|
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%);
|
|
1526
1988
|
--destructive-foreground: hsl(48 10% 90%);
|
|
1527
1989
|
--ring: hsl(48 10% 70%);
|
|
1528
1990
|
--shadow: hsl(0 0% 5%);
|
|
@@ -1589,6 +2051,25 @@
|
|
|
1589
2051
|
--shadow-cartoon-color: rgb(255 255 255 / 0.07);
|
|
1590
2052
|
--shadow-cartoon-color-soft: rgb(255 255 255 / 0.03);
|
|
1591
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
|
+
|
|
1592
2073
|
/* Glass opacity + grain for dark — five-tier ladder, alpha-monotonic.
|
|
1593
2074
|
Each rung lifts ~0.08 from its light counterpart so the dark surfaces
|
|
1594
2075
|
carry comparable read-weight against the deeper canvas. */
|
|
@@ -1619,11 +2100,13 @@
|
|
|
1619
2100
|
resolves the dark card). */
|
|
1620
2101
|
--glass-fringe-warm: oklch(0.78 0.07 40 / 0.18);
|
|
1621
2102
|
--glass-fringe-cool: oklch(0.74 0.06 230 / 0.14);
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
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;
|
|
1627
2110
|
|
|
1628
2111
|
/* Gold — boosted for dark (oklch; AV.W16 TW2) */
|
|
1629
2112
|
--gold: oklch(0.784 0.143 86.0);
|
|
@@ -1726,3 +2209,73 @@
|
|
|
1726
2209
|
inherits: false;
|
|
1727
2210
|
initial-value: 0;
|
|
1728
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
|
+
}
|