@umodeapporg/ui 0.0.0-canary.ca10e69

package/src/assets/styles/theme.css

@@ -0,0 +1,453 @@
+/* =============================================================================
+   uMode design tokens.
+
+   This file is the SINGLE source of truth for every colour in the application.
+   Components never name a palette shade; they name a role (surface, foreground,
+   border, danger) and this file decides what that role looks like in each theme.
+
+   Values are stored as space-separated RGB channels so Tailwind can apply its
+   own opacity modifier: `rgb(var(--color-surface) / <alpha-value>)` makes
+   `bg-surface/60` work exactly like `bg-white/60` used to.
+
+   Every pairing below is verified against WCAG 2.1 AA (and AAA for body text on
+   every surface). Do not hand-edit a value without re-checking the pair it is
+   used in; see .claude/THEMING.md.
+
+   The scheme blocks match the ATTRIBUTE, not only the root: that is what lets a
+   subtree pin itself to a scheme (`<div data-theme="light">`, the print preview)
+   and get the whole token set re-declared, instead of inheriting the app's.
+   ============================================================================= */
+
+:root,
+[data-theme='light'] {
+  color-scheme: light;
+
+  --color-canvas: 246 246 246;
+  --color-canvas-subtle: 240 240 240;
+  --color-surface: 255 255 255;
+  --color-surface-raised: 255 255 255;
+  --color-surface-overlay: 255 255 255;
+  --color-surface-sunken: 241 241 241;
+  --color-surface-inverse: 27 27 27;
+  --color-glass: 255 255 255;
+  --color-ink: 32 32 32;
+  --color-ink-fg: 246 246 246;
+  --color-ink-muted: 163 163 163;
+  /* The night panel, a product's showcase surface. On a light page, near black would read as black. */
+  --color-night: 45 27 105;
+  --color-night-lobe: 67 41 143;
+  --color-night-fg: 255 255 255;
+  --color-night-muted: 217 210 243;
+  --color-night-accent: 199 174 255;
+  --color-muted: 242 242 242;
+  --color-muted-hover: 232 232 232;
+  --color-muted-active: 222 222 222;
+  --color-foreground: 26 26 26;
+  --color-foreground-muted: 69 69 69;
+  --color-foreground-subtle: 98 98 98;
+  --color-foreground-faint: 126 126 126;
+  --color-foreground-inverse: 247 247 247;
+  --color-foreground-on-accent: 255 255 255;
+  --color-border: 228 228 228;
+  --color-border-subtle: 238 238 238;
+  --color-border-emphasis: 212 212 212;
+  --color-border-strong: 142 142 142;
+  --color-border-inverse: 54 54 54;
+  --color-ring: 151 59 235;
+  --color-ring-offset: 255 255 255;
+  --color-selection: 196 168 235;
+  --color-selection-fg: 26 26 26;
+  --color-field: 255 255 255;
+  --color-field-border: 142 142 142;
+  --color-field-disabled: 224 224 224;
+  --color-primary: 151 59 235;
+  --color-primary-hover: 134 41 222;
+  --color-primary-active: 117 33 196;
+  --color-primary-fg: 255 255 255;
+  --color-primary-soft: 241 231 253;
+  --color-primary-soft-hover: 230 215 251;
+  --color-primary-emphasis: 106 36 175;
+  --color-primary-border: 213 184 246;
+  --color-secondary: 14 124 134;
+  --color-secondary-hover: 11 106 115;
+  --color-secondary-fg: 255 255 255;
+  --color-secondary-soft: 214 239 241;
+  --color-secondary-emphasis: 10 90 98;
+  --color-secondary-border: 167 221 225;
+  --color-accent: 195 58 146;
+  --color-accent-hover: 171 48 128;
+  --color-accent-fg: 255 255 255;
+  --color-accent-soft: 252 232 244;
+  --color-accent-emphasis: 163 34 119;
+  --color-accent-border: 243 185 221;
+  --color-success: 15 125 72;
+  --color-success-hover: 12 107 61;
+  --color-success-fg: 255 255 255;
+  --color-success-soft: 223 245 233;
+  --color-success-emphasis: 10 96 56;
+  --color-success-border: 166 224 195;
+  --color-warning: 161 96 0;
+  --color-warning-hover: 138 82 0;
+  --color-warning-fg: 255 255 255;
+  --color-warning-soft: 252 238 213;
+  --color-warning-emphasis: 126 75 0;
+  --color-warning-border: 240 203 138;
+  --color-danger: 210 45 66;
+  --color-danger-hover: 182 36 56;
+  --color-danger-fg: 255 255 255;
+  --color-danger-soft: 252 231 234;
+  --color-danger-emphasis: 156 27 44;
+  --color-danger-border: 245 179 188;
+  --color-info: 26 111 196;
+  --color-info-hover: 21 93 166;
+  --color-info-fg: 255 255 255;
+  --color-info-soft: 227 238 251;
+  --color-info-emphasis: 18 81 143;
+  --color-info-border: 175 205 242;
+  --color-chart-1: 124 58 237;
+  --color-chart-2: 11 127 145;
+  --color-chart-3: 195 79 11;
+  --color-chart-4: 47 99 204;
+  --color-chart-5: 190 24 93;
+  --color-chart-6: 27 122 68;
+  --color-chart-7: 122 82 0;
+  --color-chart-8: 67 56 202;
+  --color-chart-label: 255 255 255;
+  --color-chart-grid: 232 232 232;
+  --color-chart-axis: 126 126 126;
+  --overlay: rgb(10 10 10 / 0.36);
+  --overlay-strong: rgb(10 10 10 / 0.72);
+  /* Elevation. Light mode leans on soft, cool-tinted shadows because every raised
+     surface is the same white as the card below it; the shadow IS the hierarchy. */
+  --shadow-xs: 0 1px 2px 0 rgb(18 18 18 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(18 18 18 / 0.07), 0 1px 2px -1px rgb(18 18 18 / 0.06);
+  --shadow-md: 0 4px 10px -2px rgb(18 18 18 / 0.09), 0 2px 4px -2px rgb(18 18 18 / 0.05);
+  --shadow-lg: 0 12px 24px -6px rgb(18 18 18 / 0.12), 0 4px 8px -4px rgb(18 18 18 / 0.06);
+  --shadow-xl: 0 24px 48px -12px rgb(18 18 18 / 0.18), 0 8px 16px -8px rgb(18 18 18 / 0.08);
+  --shadow-focus: 0 0 0 3px rgb(var(--color-ring) / 0.28);
+  /* --- Glass -------------------------------------------------------------
+     A translucent material for surfaces that FLOAT over content. The alpha is
+     0.92+ because that is the floor at which the whole text hierarchy (down to
+     foreground-faint) still passes AA over ANY backdrop, including a black or a
+     white photo. The frosted character comes from blur and saturation, not from
+     low opacity: dropping the alpha to "look more like glass" is exactly what
+     makes text unreadable over a product image. */
+  --glass-bg: 255 255 255;
+  --glass-alpha-subtle: 0.91;
+  --glass-alpha: 0.91;
+  --glass-alpha-elevated: 0.93;
+  /* Saturation is what sells the material. Opacity has to stay high for contrast, so
+     the colour bleeding through is where the "alive" quality comes from. */
+  --glass-saturate: 170%;
+  --glass-saturate-strong: 200%;
+  /* Faint top-to-bottom sheen. It only ever ADDS opacity, so it can never reduce the
+     validated text contrast. */
+  --glass-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0));
+  /* Hairline that separates the material from what is behind it. In light mode a
+     white edge is invisible, so the edge is a faint dark line. */
+  --glass-edge: 20 20 20;
+  --glass-edge-alpha: 0.1;
+  /* Inner top highlight: the 1px line that reads as light catching the pane. */
+  --glass-highlight: 255 255 255;
+  --glass-highlight-alpha: 0.75;
+}
+
+:root[data-theme='dark'],
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  --color-canvas: 10 10 10;
+  --color-canvas-subtle: 15 15 15;
+  --color-surface: 21 21 21;
+  --color-surface-raised: 26 26 26;
+  --color-surface-overlay: 33 33 33;
+  --color-surface-sunken: 3 3 3;
+  --color-surface-inverse: 245 245 245;
+  --color-glass: 255 255 255;
+  --color-ink: 36 36 36;
+  --color-ink-fg: 237 237 237;
+  --color-ink-muted: 148 148 148;
+  /* The night panel, a product's showcase surface: deeper here, where the page is dark too. */
+  --color-night: 23 15 46;
+  --color-night-lobe: 41 27 82;
+  --color-night-fg: 255 255 255;
+  --color-night-muted: 201 193 228;
+  --color-night-accent: 169 123 255;
+  --color-muted: 28 28 28;
+  --color-muted-hover: 38 38 38;
+  --color-muted-active: 48 48 48;
+  --color-foreground: 237 237 237;
+  --color-foreground-muted: 194 194 194;
+  --color-foreground-subtle: 151 151 151;
+  --color-foreground-faint: 121 121 121;
+  --color-foreground-inverse: 23 23 23;
+  --color-foreground-on-accent: 255 255 255;
+  --color-border: 43 43 43;
+  --color-border-subtle: 31 31 31;
+  --color-border-emphasis: 59 59 59;
+  --color-border-strong: 110 110 110;
+  --color-border-inverse: 225 225 225;
+  --color-ring: 180 124 245;
+  --color-ring-offset: 10 10 10;
+  --color-selection: 102 66 150;
+  --color-selection-fg: 237 237 237;
+  --color-field: 48 48 48;
+  --color-field-border: 64 64 64;
+  --color-field-disabled: 26 26 26;
+  --color-primary: 140 63 214;
+  --color-primary-hover: 154 79 226;
+  --color-primary-active: 168 99 236;
+  --color-primary-fg: 255 255 255;
+  --color-primary-soft: 43 26 70;
+  --color-primary-soft-hover: 55 33 87;
+  --color-primary-emphasis: 199 155 250;
+  --color-primary-border: 74 45 115;
+  --color-secondary: 44 185 198;
+  --color-secondary-hover: 72 198 209;
+  --color-secondary-fg: 4 38 42;
+  --color-secondary-soft: 13 46 50;
+  --color-secondary-emphasis: 109 214 223;
+  --color-secondary-border: 27 76 82;
+  --color-accent: 238 107 184;
+  --color-accent-hover: 242 134 198;
+  --color-accent-fg: 58 5 38;
+  --color-accent-soft: 67 19 52;
+  --color-accent-emphasis: 245 160 210;
+  --color-accent-border: 94 29 69;
+  --color-success: 52 199 126;
+  --color-success-hover: 79 214 146;
+  --color-success-fg: 4 34 15;
+  --color-success-soft: 13 44 28;
+  --color-success-emphasis: 111 223 168;
+  --color-success-border: 27 74 50;
+  --color-warning: 232 163 58;
+  --color-warning-hover: 240 180 87;
+  --color-warning-fg: 42 26 0;
+  --color-warning-soft: 47 34 8;
+  --color-warning-emphasis: 243 196 113;
+  --color-warning-border: 81 58 18;
+  --color-danger: 242 96 116;
+  --color-danger-hover: 245 124 140;
+  --color-danger-fg: 46 7 16;
+  --color-danger-soft: 64 21 32;
+  --color-danger-emphasis: 249 154 167;
+  --color-danger-border: 92 32 41;
+  --color-info: 76 158 239;
+  --color-info-hover: 107 176 243;
+  --color-info-fg: 4 24 46;
+  --color-info-soft: 19 43 68;
+  --color-info-emphasis: 138 195 247;
+  --color-info-border: 30 63 99;
+  --color-chart-1: 180 124 245;
+  --color-chart-2: 34 211 238;
+  --color-chart-3: 251 138 60;
+  --color-chart-4: 59 130 246;
+  --color-chart-5: 244 114 182;
+  --color-chart-6: 74 222 128;
+  --color-chart-7: 199 144 33;
+  --color-chart-8: 131 133 242;
+  --color-chart-label: 10 10 10;
+  --color-chart-grid: 38 38 38;
+  --color-chart-axis: 121 121 121;
+  --overlay: rgb(0 0 0 / 0.52);
+  --overlay-strong: rgb(0 0 0 / 0.82);
+  /* Dark mode gets its hierarchy from the surface ramp, so shadows only deepen the
+     separation; a hairline top highlight sells the elevation the way real light does. */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.5);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.6), 0 1px 2px -1px rgb(0 0 0 / 0.5);
+  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.66), inset 0 1px 0 0 rgb(255 255 255 / 0.04);
+  --shadow-lg: 0 14px 30px -8px rgb(0 0 0 / 0.72), inset 0 1px 0 0 rgb(255 255 255 / 0.05);
+  --shadow-xl: 0 28px 56px -14px rgb(0 0 0 / 0.8), inset 0 1px 0 0 rgb(255 255 255 / 0.06);
+  --shadow-focus: 0 0 0 3px rgb(var(--color-ring) / 0.42);
+  /* Dark glass rides on the raised surface, not on `surface`, so a floating pane
+     still reads as one step above the page. The edge inverts: a light hairline. */
+  --glass-bg: 26 26 26;
+  --glass-alpha-subtle: 0.93;
+  --glass-alpha: 0.93;
+  --glass-alpha-elevated: 0.94;
+  --glass-saturate: 160%;
+  --glass-saturate-strong: 190%;
+  --glass-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0));
+  --glass-edge: 255 255 255;
+  --glass-edge-alpha: 0.1;
+  --glass-highlight: 255 255 255;
+  --glass-highlight-alpha: 0.07;
+}
+
+/* =============================================================================
+   Skins.
+
+   A skin is a seasonal re-colouring of ONE scheme. It lives on a second attribute
+   (`data-theme-skin`), so `data-theme` keeps meaning light or dark for everything
+   that reads it: the `dark:` variant, chart libraries, canvas tools, pinned islands.
+
+   A skin overrides CHROMATIC tokens only. Surfaces, text and borders stay the
+   scheme's own, which is what keeps every audited contrast pair standing and the
+   neutrals neutral. The selector names the scheme on purpose: these values are
+   tuned against the dark surfaces and would fail on the light ones.
+   ============================================================================= */
+
+/* Halloween: pumpkin orange takes the brand role and the brand's violet moves to accent.
+   - `primary` is a BURNT orange, not the bright one, because its ink stays white: plenty of
+     brand buttons carry a white icon, and white only clears 4.5:1 below this luminance.
+     The bright pumpkin orange lives in `ring`, which is never a text background.
+   - `warning` leaves amber for yellow. With an orange brand, an amber warning chip and a
+     brand chip would read as the same thing, and a status must never look like decoration. */
+/* A night panel pins the dark scheme for the controls inside it, which would also pin the dark night.
+   Its colours still follow the page, so a panel on a light page keeps the light page's night. */
+:root:not([data-theme='dark']) [data-theme='dark'] {
+  --color-night: 45 27 105;
+  --color-night-lobe: 67 41 143;
+  --color-night-muted: 217 210 243;
+  --color-night-accent: 199 174 255;
+}
+
+:root[data-theme='dark'][data-theme-skin='halloween'] {
+  --color-ring: 255 138 51;
+  --color-selection: 138 62 12;
+  --color-selection-fg: 237 237 237;
+  --color-primary: 190 74 0;
+  --color-primary-hover: 198 80 4;
+  --color-primary-active: 200 80 0;
+  --color-primary-soft: 58 27 6;
+  --color-primary-soft-hover: 74 34 8;
+  --color-primary-emphasis: 255 170 102;
+  --color-primary-border: 104 49 12;
+  --color-accent: 180 124 245;
+  --color-accent-hover: 196 150 248;
+  --color-accent-fg: 26 10 51;
+  --color-accent-soft: 43 26 70;
+  --color-accent-emphasis: 199 155 250;
+  --color-accent-border: 74 45 115;
+  --color-warning: 245 200 40;
+  --color-warning-hover: 250 214 80;
+  --color-warning-fg: 38 28 0;
+  --color-warning-soft: 46 38 6;
+  --color-warning-emphasis: 250 220 110;
+  --color-warning-border: 84 68 14;
+  --color-chart-1: 251 138 60;
+  --color-chart-3: 180 124 245;
+}
+
+/* Zero-flash safety net. The inline boot script in index.html always resolves the
+   preference to a concrete data-theme before first paint, so this block only
+   matters in the window before that script runs (or if it ever fails to). */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+
+    --color-canvas: 10 10 10;
+    --color-canvas-subtle: 15 15 15;
+    --color-surface: 21 21 21;
+    --color-surface-raised: 26 26 26;
+    --color-surface-overlay: 33 33 33;
+    --color-surface-sunken: 3 3 3;
+    --color-surface-inverse: 245 245 245;
+    --color-glass: 255 255 255;
+    --color-ink: 36 36 36;
+    --color-ink-fg: 237 237 237;
+    --color-ink-muted: 148 148 148;
+    --color-glass: 255 255 255;
+    --color-ink: 36 36 36;
+    --color-ink-fg: 237 237 237;
+    --color-ink-muted: 148 148 148;
+    --color-muted: 28 28 28;
+    --color-muted-hover: 38 38 38;
+    --color-muted-active: 48 48 48;
+    --color-foreground: 237 237 237;
+    --color-foreground-muted: 194 194 194;
+    --color-foreground-subtle: 151 151 151;
+    --color-foreground-faint: 121 121 121;
+    --color-foreground-inverse: 23 23 23;
+    --color-foreground-on-accent: 255 255 255;
+    --color-border: 43 43 43;
+    --color-border-subtle: 31 31 31;
+    --color-border-emphasis: 59 59 59;
+    --color-border-strong: 110 110 110;
+    --color-border-inverse: 225 225 225;
+    --color-ring: 180 124 245;
+    --color-ring-offset: 10 10 10;
+    --color-selection: 102 66 150;
+    --color-selection-fg: 237 237 237;
+    --color-field: 48 48 48;
+    --color-field-border: 64 64 64;
+    --color-field-disabled: 26 26 26;
+    --color-primary: 140 63 214;
+    --color-primary-hover: 154 79 226;
+    --color-primary-active: 168 99 236;
+    --color-primary-fg: 255 255 255;
+    --color-primary-soft: 43 26 70;
+    --color-primary-soft-hover: 55 33 87;
+    --color-primary-emphasis: 199 155 250;
+    --color-primary-border: 74 45 115;
+    --color-secondary: 44 185 198;
+    --color-secondary-hover: 72 198 209;
+    --color-secondary-fg: 4 38 42;
+    --color-secondary-soft: 13 46 50;
+    --color-secondary-emphasis: 109 214 223;
+    --color-secondary-border: 27 76 82;
+    --color-accent: 238 107 184;
+    --color-accent-hover: 242 134 198;
+    --color-accent-fg: 58 5 38;
+    --color-accent-soft: 67 19 52;
+    --color-accent-emphasis: 245 160 210;
+    --color-accent-border: 94 29 69;
+    --color-success: 52 199 126;
+    --color-success-hover: 79 214 146;
+    --color-success-fg: 4 34 15;
+    --color-success-soft: 13 44 28;
+    --color-success-emphasis: 111 223 168;
+    --color-success-border: 27 74 50;
+    --color-warning: 232 163 58;
+    --color-warning-hover: 240 180 87;
+    --color-warning-fg: 42 26 0;
+    --color-warning-soft: 47 34 8;
+    --color-warning-emphasis: 243 196 113;
+    --color-warning-border: 81 58 18;
+    --color-danger: 242 96 116;
+    --color-danger-hover: 245 124 140;
+    --color-danger-fg: 46 7 16;
+    --color-danger-soft: 64 21 32;
+    --color-danger-emphasis: 249 154 167;
+    --color-danger-border: 92 32 41;
+    --color-info: 76 158 239;
+    --color-info-hover: 107 176 243;
+    --color-info-fg: 4 24 46;
+    --color-info-soft: 19 43 68;
+    --color-info-emphasis: 138 195 247;
+    --color-info-border: 30 63 99;
+    --color-chart-1: 180 124 245;
+    --color-chart-2: 34 211 238;
+    --color-chart-3: 251 138 60;
+    --color-chart-4: 59 130 246;
+    --color-chart-5: 244 114 182;
+    --color-chart-6: 74 222 128;
+    --color-chart-7: 199 144 33;
+    --color-chart-8: 131 133 242;
+    --color-chart-label: 10 10 10;
+    --color-chart-grid: 38 38 38;
+    --color-chart-axis: 121 121 121;
+    --overlay: rgb(0 0 0 / 0.52);
+    --overlay-strong: rgb(0 0 0 / 0.82);
+    /* Dark mode gets its hierarchy from the surface ramp, so shadows only deepen the
+       separation; a hairline top highlight sells the elevation the way real light does. */
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.5);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.6), 0 1px 2px -1px rgb(0 0 0 / 0.5);
+    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.66), inset 0 1px 0 0 rgb(255 255 255 / 0.04);
+    --shadow-lg: 0 14px 30px -8px rgb(0 0 0 / 0.72), inset 0 1px 0 0 rgb(255 255 255 / 0.05);
+    --shadow-xl: 0 28px 56px -14px rgb(0 0 0 / 0.8), inset 0 1px 0 0 rgb(255 255 255 / 0.06);
+    --shadow-focus: 0 0 0 3px rgb(var(--color-ring) / 0.42);
+    /* Dark glass rides on the raised surface, not on `surface`, so a floating pane
+       still reads as one step above the page. The edge inverts: a light hairline. */
+    --glass-bg: 26 26 26;
+    --glass-alpha-subtle: 0.92;
+    --glass-alpha: 0.92;
+    --glass-alpha-elevated: 0.93;
+    --glass-saturate: 140%;
+    --glass-saturate-strong: 165%;
+    --glass-edge: 255 255 255;
+    --glass-edge-alpha: 0.1;
+    --glass-highlight: 255 255 255;
+    --glass-highlight-alpha: 0.07;
+  }
+}

package/tailwind-plugins/glass.js

@@ -0,0 +1,162 @@
+/**
+ * Glass material utilities.
+ *
+ * One class per tier, so a floating surface says `glass-elevated` instead of assembling
+ * six utilities by hand. Assembling it by hand is what produced eight slightly different
+ * "translucent panel" recipes across the app before this existed.
+ *
+ * WHEN TO USE IT
+ * Glass earns its place only when something worth seeing sits BEHIND the surface: a
+ * dialog over the page, a menu over a table, a header over scrolling content. A card in a
+ * grid has a flat canvas behind it, so glass there costs a `backdrop-filter` and returns
+ * mud. See .claude/THEMING.md for the per-component ruling.
+ *
+ * TIERS
+ *   glass-subtle    sticky header, toolbars, tab bars  (least blur, flattest)
+ *   glass           menu, popover, dropdown, toast
+ *   glass-elevated  dialog, drawer, command menu       (most blur, most elevation)
+ *   glass-scrim     the backdrop BEHIND a modal        (no text ever sits on it)
+ *
+ * The alpha is deliberately high (0.92+). That is the floor at which the full text
+ * hierarchy still passes WCAG AA over any backdrop, including a black or white photo.
+ * The frosted look comes from blur + saturation.
+ *
+ * PERFORMANCE
+ * `backdrop-filter` cost scales with painted area and with the number of stacked layers,
+ * so these utilities are for surfaces that exist ONCE at a time. Never put them on a list
+ * item. Below `tablet` the blur radius drops (small screens are the slowest devices and
+ * the effect is barely visible), and where `backdrop-filter` is unsupported every tier
+ * degrades to its opaque token.
+ */
+
+import plugin from 'tailwindcss/plugin';
+
+/**
+ * The prefixed twin goes first. Lightning CSS (the minifier of Next's Turbopack build) drops a
+ * standard declaration followed by its prefixed twin in the same rule, and Chrome ignores the
+ * prefixed one: the surface turns translucent without blur and nothing reports it. In this order
+ * Autoprefixer may also remove the twin, which is right: it does so when the host's browserslist
+ * no longer needs it, and adds it back when it does.
+ */
+const backdrop = (value) => ({ WebkitBackdropFilter: value, backdropFilter: value });
+
+const material = ({ alphaVar, blur, blurSm, saturateVar, shadow, highlightAlpha }) => ({
+  backgroundColor: `rgb(var(--glass-bg) / var(${alphaVar}))`,
+  // The sheen sits ON TOP of the base fill, so it only adds opacity and can never
+  // undercut the validated text contrast.
+  backgroundImage: 'var(--glass-sheen)',
+  ...backdrop(`blur(${blur}) saturate(var(${saturateVar}))`),
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'rgb(var(--glass-edge) / var(--glass-edge-alpha))',
+  boxShadow: `var(${shadow}), inset 0 1px 0 0 rgb(var(--glass-highlight) / ${highlightAlpha})`,
+
+  '@media (max-width: 639px)': {
+    ...backdrop(`blur(${blurSm}) saturate(var(${saturateVar}))`),
+  },
+
+  // No backdrop-filter (older Firefox, some embedded webviews): translucency without blur
+  // would just look washed out, so fall back to the opaque surface token.
+  '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {
+    backgroundColor: 'rgb(var(--color-surface-overlay))',
+    backgroundImage: 'none',
+  },
+
+  // Respects the OS "reduce transparency" accessibility setting.
+  '@media (prefers-reduced-transparency: reduce)': {
+    backgroundColor: 'rgb(var(--color-surface-overlay))',
+    backgroundImage: 'none',
+    ...backdrop('none'),
+  },
+});
+
+export default plugin(({ addUtilities }) => {
+  addUtilities({
+    '.glass-subtle': material({
+      alphaVar: '--glass-alpha-subtle',
+      blur: '12px',
+      blurSm: '8px',
+      saturateVar: '--glass-saturate',
+      shadow: '--shadow-xs',
+      highlightAlpha: 'var(--glass-highlight-alpha)',
+    }),
+
+    '.glass': material({
+      alphaVar: '--glass-alpha',
+      blur: '20px',
+      blurSm: '12px',
+      saturateVar: '--glass-saturate-strong',
+      shadow: '--shadow-lg',
+      highlightAlpha: 'var(--glass-highlight-alpha)',
+    }),
+
+    '.glass-elevated': material({
+      alphaVar: '--glass-alpha-elevated',
+      blur: '32px',
+      blurSm: '16px',
+      saturateVar: '--glass-saturate-strong',
+      shadow: '--shadow-xl',
+      highlightAlpha: 'var(--glass-highlight-alpha)',
+    }),
+
+    // The dimmed layer BEHIND a modal. Low alpha is safe here precisely because no text
+    // ever sits on it; the blur is what separates the dialog from the page underneath.
+    '.glass-scrim': {
+      backgroundColor: 'var(--overlay)',
+      ...backdrop('blur(4px) saturate(105%)'),
+      '@media (max-width: 639px)': {
+        ...backdrop('blur(2px)'),
+      },
+      '@media (prefers-reduced-transparency: reduce)': {
+        backgroundColor: 'var(--overlay-strong)',
+        ...backdrop('none'),
+      },
+    },
+
+    // A small translucent control sitting ON media: an overlay badge, a corner button,
+    // a counter over a photo. No shadow (wrong at this size) and no sheen, just the
+    // material and a hairline, so a 32px pill does not carry a dialog's elevation.
+    '.glass-chip': {
+      backgroundColor: 'rgb(var(--glass-bg) / 0.78)',
+      ...backdrop('blur(10px) saturate(var(--glass-saturate))'),
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'rgb(var(--glass-edge) / var(--glass-edge-alpha))',
+      '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {
+        backgroundColor: 'rgb(var(--color-surface))',
+      },
+      '@media (prefers-reduced-transparency: reduce)': {
+        backgroundColor: 'rgb(var(--color-surface))',
+        ...backdrop('none'),
+      },
+    },
+
+    // Material ONLY: blur, edge behaviour and every fallback, with no background of its
+    // own. Compose it with any tinted token when the surface is not neutral, e.g. a status
+    // badge floating on a product photo: `glass-tint bg-warning-soft/95`.
+    '.glass-tint': {
+      ...backdrop('blur(10px) saturate(var(--glass-saturate))'),
+      '@media (max-width: 639px)': {
+        ...backdrop('blur(6px) saturate(var(--glass-saturate))'),
+      },
+      '@media (prefers-reduced-transparency: reduce)': {
+        ...backdrop('none'),
+      },
+    },
+
+    // A thin veil that dims content underneath while something loads. Barely any blur on
+    // purpose: it must read as "busy", not as a floating panel.
+    '.glass-veil': {
+      ...backdrop('blur(2px) saturate(100%)'),
+      '@media (prefers-reduced-transparency: reduce)': {
+        ...backdrop('none'),
+      },
+    },
+
+    // Opt out on a surface that inherited glass from a shared component.
+    '.glass-none': {
+      backgroundColor: 'rgb(var(--color-surface))',
+      ...backdrop('none'),
+    },
+  });
+});