@hanzo/ui 8.0.51 → 8.0.53

package/dist/theme.css

@@ -227,7 +227,7 @@
    So EVERY token whose dark value is a --white-* rung must be restated below,
    and check-tokens.mjs fails the build if one is missed — that class of bug is
    silent (the border simply stops existing) and has shipped before. */
-.light, :root.t_light{
+.light, :root.t_light, .t_light{
   color-scheme:light;
   --background:#ffffff;
   --foreground:#0a0a0a;
@@ -606,7 +606,7 @@
    obvious spelling would invalidate the whole declaration and take the drop
    shadow down with it. A zero-size transparent shadow composes to nothing and
    costs nothing. */
-.light, :root.t_light{
+.light, :root.t_light, .t_light{
   --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
   --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
   --edge-highlight:inset 0 0 0 0 transparent;
@@ -893,7 +893,7 @@
      stays INSIDE the layer — an unlayered rule here would outrank an app's own
      utilities, which is the defect check 1c exists to catch. */
   :where(html){scrollbar-color:var(--white-15) transparent;scrollbar-width:thin}
-  .light, :root.t_light{scrollbar-color:rgb(0 0 0 / .18) transparent}
+  .light, :root.t_light, .t_light{scrollbar-color:rgb(0 0 0 / .18) transparent}
   :where(*)::-webkit-scrollbar{width:6px;height:6px}
   :where(*)::-webkit-scrollbar-track{background:transparent}
   :where(*)::-webkit-scrollbar-thumb{background:var(--white-15);border-radius:var(--radius-full)}
@@ -1093,6 +1093,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 ───────────────────────────────────────────────────────────
@@ -1153,11 +1165,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,
@@ -1168,14 +1216,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 ──────────────────────────────────────────────────────────────
@@ -1187,10 +1235,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.51",
+  "version": "8.0.53",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {