@hanzo/ui 8.0.51 → 8.0.53

package/dist/glass.css

@@ -17,6 +17,18 @@
  * declaration (an undefined var() invalidates the whole property). They are a
  * mirror, not a second opinion — glass.test.ts reads @hanzo/design/styles.css
  * and fails if any of them stops matching, so the copy cannot drift.
+ *
+ * Reached BY ROLE, never by size. A role name (--edge-highlight,
+ * --surface-scrim) is coined for one job and only design declares it. The
+ * t-shirt ramp — --shadow-sm/md/lg/xl — is the opposite: a generic scale that
+ * every token package ships, and @hanzo/brand ships one too, at :root, tuned
+ * for a WHITE canvas (.05/.1 against design's .40/.55). Same names, same
+ * specificity, so the winner is whichever sheet the bundler ordered last, and
+ * it was brand. A declared variable also beats a var() fallback outright — so
+ * the mirror above could not save the rungs that read a ramp name, and on
+ * #080808 their drops resolved to a shadow you cannot see. The lit edge kept
+ * the ladder from vanishing, which is why it read as flat rather than as
+ * broken. The ladder therefore declares its own drops below; see there.
  */
 
 /* ── The material ───────────────────────────────────────────────────────────
@@ -77,11 +89,47 @@
 
    Glass over glass (a select opened inside a dialog) is deliberately left to
    stack: two 72% grounds land near 92%, so the nested surface reads as MORE
-   solid than its parent, which is the right answer and the one macOS gives. */
+   solid than its parent, which is the right answer and the one macOS gives.
+
+   ── The rungs' drops are this package's own, and that is the fix ────────────
+   A rung used to read the ramp by size — var(--shadow-sm | --shadow-lg) — and
+   a name you do not own is a value somebody else gets to set. @hanzo/brand
+   sets exactly those, at :root, for a white canvas, and won on load order.
+   Three values are three names, so they are declared here: nothing else ships
+   a --glass-shadow-*, so no sheet can outrank them and no load order can
+   change the answer. A theme that wants a different ladder declares these
+   three and gets one; that is a hook, where reading the ramp was an accident.
+
+   Only the DROP is owned. --edge-highlight stays design's, because it is
+   role-named, uncollided, and design's `.light` zeroing of it is the half of
+   the composition that makes one rule work on both canvases.
+
+   Both themes are stated for the same reason design states them: on white the
+   drop does all the work and must be light enough not to smudge, on near-black
+   it must be heavy enough to exist at all. The values are design's own, and
+   glass.test.ts fails if either column stops matching what design publishes.
+   `:root.t_light` and `.t_light` alongside `.light` are gui's spelling of the
+   same idea — compose-theme teaches design's sheet those aliases, and this
+   file, which also ships on its own, says them outright. The bare class is for
+   a NESTED light scope: gui puts `t_light` on a span for `<Theme name="light">`
+   inside a dark app, which `:root.t_light` cannot match, so without it a light
+   island stood on the dark ladder. */
+:root {
+  --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .40);
+  --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
+  --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .75);
+}
+
+.light, :root.t_light, .t_light {
+  --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .06);
+  --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .09), 0 4px 6px -4px rgb(0 0 0 / .07);
+  --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .18);
+}
+
 .elevation-1 {
   box-shadow:
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
-    var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .40)) !important;
+    var(--glass-shadow-1) !important;
 }
 
 .elevation-2,
@@ -92,14 +140,14 @@
 [data-slot="tooltip-content"] {
   box-shadow:
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
-    var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)) !important;
+    var(--glass-shadow-2) !important;
 }
 
 .elevation-3,
 [data-slot="dialog-content"] {
   box-shadow:
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
-    var(--shadow-floating, 0 24px 60px -16px rgb(0 0 0 / .75)) !important;
+    var(--glass-shadow-3) !important;
 }
 
 /* ── The scrim ──────────────────────────────────────────────────────────────
@@ -111,10 +159,19 @@
 
    One value, in one place: the recipes module reads the same token, so the dim
    behind a component dialog and the dim behind a hand-rolled one are the same
-   dim by construction rather than by two people remembering a number. */
+   dim by construction rather than by two people remembering a number.
+
+   !important for the same reason the material above carries it, and it was
+   missing here: gui compiles `opacity` and `background-color` into atomic
+   classes (`_o-0--5`, `_bg-rgba0000--538295333`) that land in an inline <style>
+   a bundler orders AFTER this sheet, so at equal specificity they won and the
+   rule read as if it had never been written. Measured on hanzo.app's ⌘K
+   palette: `rgba(0,0,0,.5)` under `opacity: .5` — a quarter black, exactly the
+   double dim these two lines exist to end. A rule written to beat a compiled
+   class has to be written with the weight to beat one. */
 [data-slot="dialog-overlay"] {
-  opacity: 1;
-  background-color: var(--surface-scrim, rgb(0 0 0 / .8));
+  opacity: 1 !important;
+  background-color: var(--surface-scrim, rgb(0 0 0 / .8)) !important;
 }
 
 /* ── Grouped rows ───────────────────────────────────────────────────────────

package/dist/gui-config.cjs

@@ -141,8 +141,55 @@ for (const [k, v] of Object.entries(STEP)) {
 }
 space.$true = STEP['4'];
 space['-true'] = -STEP['4'];
+/**
+ * TWO RUNGS OF THE NUMBERED RAMP UNDID A TOKEN DECISION, so they are re-based.
+ *
+ * `$color1..$color12` is a generic monotonic ramp inherited from upstream
+ * `@hanzogui/themes` — a scale, not this system's token layer. Most of it is
+ * harmless: a ramp of greys is a ramp of greys. Two rungs are not, because
+ * every component in this package reads them by name and @hanzo/design had
+ * already decided each one the other way, in writing:
+ *
+ *   `$borderColor` (= `$color4`) shipped `hsla(0, 0%, 14%, 1)` — a SOLID edge.
+ *   design's `colors.css` spends a paragraph on why its borders are alpha: a
+ *   solid hex hairline vanishes the moment it lands on a lifted surface,
+ *   because it stops being a lighter line and becomes an unrelated grey. Nearly
+ *   every component here (Button, Input, Card, Select, Dialog, Popover,
+ *   Tooltip, Switch, Checkbox, DropdownMenu) draws its edge with it.
+ *
+ *   `$color12` shipped `hsla(0, 0%, 100%, 1)` — PURE WHITE, and it is the label
+ *   colour for Button's default/primary, for every Badge, and for the `accent`
+ *   recipe, the one loud control a page is allowed. design sets `--foreground`
+ *   to `#fafafa` on purpose: pure white halates on near-black.
+ *
+ * So the two rungs read the token instead of shadowing it. `var()` first, so a
+ * host that mounts design's sheet (this package's own theme.css does) follows
+ * the live cascade and inverts with it; design's published literal behind it,
+ * so a host that mounts neither still gets the right value rather than a
+ * dropped declaration.
+ *
+ * The literals are stated per theme rather than left to the cascade, and that
+ * is load-bearing: a NESTED `<Theme name="light">` (PrimaryButton's white pill
+ * inside a dark app) emits `.t_light` on a span, not on `:root`, so the light
+ * column has to be able to answer on its own. gui-config.test.ts reads
+ * @hanzo/design's stylesheet and fails if either column stops matching what
+ * design publishes, so the copy cannot drift.
+ */
+const EDGE = { dark: 'rgb(255 255 255 / .10)', light: 'rgb(0 0 0 / .10)' };
+const LABEL = { dark: '#fafafa', light: '#0a0a0a' };
+const rebased = (theme) => ({
+    ...v5_1.defaultConfig.themes[theme],
+    color4: `var(--border, ${EDGE[theme]})`,
+    borderColor: `var(--border, ${EDGE[theme]})`,
+    color12: `var(--foreground, ${LABEL[theme]})`,
+});
 exports.config = (0, gui_1.createGui)({
     ...v5_1.defaultConfig,
+    themes: {
+        ...v5_1.defaultConfig.themes,
+        dark: rebased('dark'),
+        light: rebased('light'),
+    },
     tokens: {
         ...v5_1.defaultConfig.tokens,
         radius: RADIUS,