@mkbabb/glass-ui 3.8.0 → 3.10.0

package/src/styles/index.css

@@ -60,10 +60,15 @@
  *                              over the glass tiers.
  *   5. paper.css             — paper underpaint + grain overlay utilities.
  *                              Pairs with (4) for paper-on-glass compositions.
- *   6. dock.css              — dock shell / density / grain / layer-crossfade
- *                              contract + the shared cross-control four-state
- *                              comma-groups. Component utility layer; consumes
- *                              (1) + (3).
+ *   6. dock.css              — the dock CORE: the `@property --dock-morph-t`
+ *                              registration, the shared cross-control four-state
+ *                              comma-groups, and the `@import`s of the cohesive
+ *                              `dock/*.css` partials (shell · morph · density ·
+ *                              layers · layer-group · overflow — AX.W06 carved
+ *                              the 1762-line god-module into single-axis partials,
+ *                              each < 500 lines, all in the SAME @layer components
+ *                              so the cascade is isomorphic). Component utility
+ *                              layer; consumes (1) + (3).
  *  6b. dock-controls.css     — the five dock CONTROL families carved out of
  *                              dock.css (AU.W8b.3): .dock-icon-button,
  *                              .dark-mode-toggle-button, .dock-tab-button + tiers,
@@ -99,13 +104,11 @@
  *                              binding + bezel hairlines + sibling divider
  *                              rule). Composes alongside instrument-chassis;
  *                              shares the bezel-line twin-pixel idiom.
- *  14. glyph-face.css        — P-tranche component CSS (cap + backplate).
- *  15. disco-glyph.css       — P-tranche component CSS (layered fills).
- *  16. hover-popover.css     — V.W3 popover-animation grammar.
- *  17. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
+ *  14. hover-popover.css     — V.W3 popover-animation grammar.
+ *  15. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
  *                             sheet surface + peek handle + snap-stop rules).
  *
- * Per-package component CSS lives at (12)-(17) (loaded after utilities so
+ * Per-package component CSS lives at (12)-(15) (loaded after utilities so
  * component-local recipes can override). New per-package CSS files append
  * to that tail.
  */
@@ -127,8 +130,6 @@
 @import "./utilities.css";
 @import "./instrument-chassis.css";
 @import "./instrument-rail.css";
-@import "./glyph-face.css";
-@import "./disco-glyph.css";
 @import "./hover-popover.css";
 @import "./drawer.css";
 

package/src/styles/paper.css

@@ -7,8 +7,54 @@
  *
  * Texture: feTurbulence baseFrequency 0.65, 4 octaves, desaturated via
  * feColorMatrix, blended multiply (light) / soft-light (dark). Tiles ~60px.
+ *
+ * ── THE GRAIN RUNGS (D6.c M5 — the printed-paper tooth, FELT not seen) ─────────
+ * The warm-paper grain must be FELT at rest — a premium editorial stock has a
+ * felt depth, and the measured finding (ds2-medium M5 / fd-usf-gallery §F) is
+ * that the shipped `--glass-grain-opacity: 0.025` floor reads as NOTHING. This
+ * file lifts the grain off that floor and mints a SECOND rung for chart plates:
+ *
+ *   --glass-grain-opacity        — the PAGE grain. Lifted here to a perceptible-
+ *                                  but-deft 0.038 default (the local floor below).
+ *                                  Numeric justification: the kitsch line is
+ *                                  ~0.05 (above it the grain reads as screen-noise
+ *                                  / a dirty monitor, ds2-medium M5); 0.025 is
+ *                                  sub-perceptual ("felt as nothing"). 0.038 is
+ *                                  the calibrated MIDPOINT — ~1.5× the dead floor,
+ *                                  ~0.76× the kitsch ceiling — felt at rest, never
+ *                                  seen AS grain. (The canonical token still lives
+ *                                  in tokens.css; this utility reads it with the
+ *                                  lifted fallback so a no-override mount is felt.)
+ *   --glass-grain-opacity-plate  — the PLATE grain (NEW rung). A chart plate is
+ *                                  the FIGURE's "paper", so it wants slightly more
+ *                                  tooth than the page (M5): 0.045 — still below
+ *                                  the 0.05 kitsch ceiling, distinctly felt so the
+ *                                  plate reads as PRINTED on the same stock as the
+ *                                  page, not pasted onto it.
+ *
+ * THE DATA-REGION MASK CONTRACT (M5, non-negotiable). Grain on the FRAME, never
+ * under the FIGURE — a fleck over a choropleth reads as a data artifact; on the
+ * plate margin it reads as paper. `paper-grain-overlay` exposes a custom-property
+ * MASK SLOT (`--paper-grain-mask`) so a consumer can carve the data viewport out
+ * of the grain ::after: set it to a gradient/`url()` that is transparent over the
+ * data region and opaque over the frame, and the grain is masked off the figure.
+ * Default `none` (the whole surface is grained — the page/card case, no data to
+ * fence). The plate rung is opt-in via `[data-grain="plate"]`.
  */
 
+/* The grain rung DEFAULTS — lifted off the tokens.css floor (D6.c M5). These are
+   plain custom-property fallbacks the utilities read; a consumer/tokens.css value
+   still wins (`var(--glass-grain-opacity, <floor>)`), so this only sets the floor
+   a no-override mount inherits. The plate rung is minted here (no canonical
+   tokens.css home is touched in this lane — D6.b owns tokens.css). */
+@layer components {
+    :root {
+        /* The PLATE grain rung — distinct from the page rung; the figure's paper
+           wants more tooth. Minted in this lane; a consumer overrides at :root. */
+        --glass-grain-opacity-plate: 0.045;
+    }
+}
+
 @utility paper-underpaint {
     position: fixed;
     inset: 0;
@@ -17,7 +63,8 @@
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
     background-repeat: repeat;
     background-size: 60px 60px;
-    opacity: var(--glass-grain-opacity);
+    /* Lifted floor — the page grain is FELT at rest (0.038), not the dead 0.025. */
+    opacity: var(--glass-grain-opacity, 0.038);
     mix-blend-mode: multiply;
 }
 
@@ -39,8 +86,27 @@
         background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
         background-repeat: repeat;
         background-size: 60px 60px;
-        opacity: var(--glass-grain-opacity);
+        /* Lifted floor — felt on the frame at rest (0.038). */
+        opacity: var(--glass-grain-opacity, 0.038);
         mix-blend-mode: overlay;
+        /* THE DATA-REGION MASK SLOT (M5). Default `none` = the whole surface is
+           grained (page/card — no data to fence). A consumer that grains a chart
+           plate sets `--paper-grain-mask` to a gradient/url() transparent over the
+           data viewport + opaque over the frame, carving the figure out of the
+           grain so no fleck lands on a tier fill. `mask` is Baseline; a
+           non-supporting engine ignores it and keeps the full-surface grain (the
+           page case is unaffected — the mask only matters when a consumer fences
+           the data region). */
+        mask: var(--paper-grain-mask, none);
+        -webkit-mask: var(--paper-grain-mask, none);
+    }
+
+    /* The PLATE rung — a chart plate opts in via `[data-grain="plate"]` to the
+       higher-tooth `--glass-grain-opacity-plate` (the figure's paper reads as the
+       same stock as the page, with a touch more tooth). Pair with the mask slot to
+       fence the data viewport. */
+    &[data-grain="plate"]::after {
+        opacity: var(--glass-grain-opacity-plate, 0.045);
     }
 }
 

package/src/styles/theme.css

@@ -62,6 +62,50 @@
        The density-scaled --dock-card-radius (dock.css) resolves through this. */
     --radius-dock-card: var(--radius-3xl);
     --radius-tooltip: var(--radius-lg);
+
+    /* ── AX.W56 — the corner-SHAPE axis (parallel to the corner-RADIUS ladder above).
+       `corner-shape` only changes the CURVE within the `border-radius` box; the
+       region is still the `--radius-*` token. These are plain @theme (the radius
+       siblings' rationale applies — each alias is its own override point, and the
+       semantic shapes are value-identical keywords that must not collapse under
+       inline). Chrome 139+ only (~65% global May 2026); the un-gated `border-radius`
+       round stays the cross-engine CONTRACT and the `@supports (corner-shape:
+       superellipse(2))` gate (glass.css/dock.css) is the PE tier. NEVER make
+       corner-shape the contract — Safari/Firefox have no positive signal through 2026.
+
+       Superellipse exponent (MDN authoritative): `superellipse(K)` paints
+       |x|^(2K) + |y|^(2K) = 1, so the curve exponent n = 2K. The CSS `squircle`
+       keyword == `superellipse(2)` == n=4 — the iOS-idiomatic web squircle. The
+       k-PRIMITIVE band (a consumer dials 1.7–2.4 to taste; W42's dock-morph calc()s
+       its animated k against this ONE vocabulary — do not re-define a second k). */
+    --corner-k-squircle: 2;   /* the squircle — superellipse(2), n=4               */
+    --corner-k-soft:     1.7; /* gentler, between round and squircle — n≈3.4       */
+    --corner-k-sharp:    2.4; /* crisper square-bias for large surfaces — n≈4.8    */
+
+    /* Semantic per-surface SHAPE aliases — the rounded-vs-squircle POLICY.
+       Cards, pills/buttons, small docks, and panels stay ROUND (the superellipse is
+       imperceptible at a 16px card radius or a stadium pill — dropping it there is
+       visually free). The big-dock card shell (the large --radius-dock-card / 24px
+       surface) is the one site where the squircle READS — the iOS-26 idiom the dock
+       wants. A consumer opts an additional large-radius surface in by re-pointing its
+       `--corner-shape-<surface>` at `superellipse(var(--corner-k-squircle))`. */
+    --corner-shape-card:    round;
+    --corner-shape-pill:    round;
+    --corner-shape-panel:   round;
+    --corner-shape-bigdock: superellipse(var(--corner-k-squircle));
+    /* AX.W56(R1) — the overlay-band glass surfaces W54 makes glass-default
+       (Dialog + Sheet content) ride the squircle alongside the big-dock. They
+       sit at the large `--radius-dialog` (16px) modal radius where the
+       superellipse READS — the same iOS-26 idiom. @supports-gated in glass.css
+       over the `border-radius` round CONTRACT; a consumer dials either back to
+       round by re-pointing the alias. */
+    --corner-shape-dialog:  superellipse(var(--corner-k-squircle));
+    --corner-shape-sheet:   superellipse(var(--corner-k-squircle));
+    /* AX.W59 — the spectrum slider's track-height thumb reads as a SQUIRCLE
+       (the iOS color-picker idiom). It rides the same --corner-k-squircle
+       vocabulary; @supports-gated in Slider.vue over a --radius-* round
+       fallback. A consumer dials it to round (a circular knob) or to soft. */
+    --corner-shape-thumb:   superellipse(var(--corner-k-squircle));
 }
 
 @theme inline {
@@ -77,6 +121,13 @@
     --text-subheading:  var(--type-subheading);
     --text-heading:     var(--type-heading);
     --text-title:       var(--type-title);
+    /* AX.W50 D17 — the picker-family type-scale → `text-dropdown` /
+       `text-dropdown-secondary` utilities, bridging the `--dropdown-text` token pair
+       (tokens.css §10, a specialization of W51's `--control-text` comfort register)
+       so a Tailwind `text-dropdown` utility resolves the family scale. Mirrors the
+       `--text-small: var(--type-small)` ladder-bridge idiom above. */
+    --text-dropdown:           var(--dropdown-text);
+    --text-dropdown-secondary: var(--dropdown-text-secondary);
     --text-display:     var(--type-display-1);
     --text-display-1:   var(--type-display-1);
     --text-display-2:   var(--type-display-2);
@@ -257,6 +308,13 @@
     --color-gold: var(--gold);
     --color-gold-light: var(--gold-light);
     --color-gold-dark: var(--gold-dark);
+    --color-gold-deep: var(--gold-deep);
+    /* D6.b — the gilt family: the rim (gilt edge) + the legible gold ink. The
+       `@theme` bridge surfaces `text-gold-ink` / `border-gold-rim` utilities
+       beside the existing gold quad. `--gold-ink` clears cream-law ② on `--card`
+       in both arms (proof:gold-ink-contrast). */
+    --color-gold-rim: var(--gold-rim);
+    --color-gold-ink: var(--gold-ink);
 
     --color-rainbow-red:    var(--rainbow-red);
     --color-rainbow-orange: var(--rainbow-orange);