@hanzo/design 0.5.2 → 0.5.3

package/dist/tokens.gen.d.ts

@@ -242,8 +242,8 @@ export declare const elevation: {
     readonly 'sheet-0': "var(--surface-page)";
     readonly 'sheet-1': "var(--surface-card)";
     readonly 'sheet-2': "var(--surface-card-emphasis)";
-    readonly 'shadow-sheet-1': "var(--edge-highlight),var(--shadow-md)";
-    readonly 'shadow-sheet-2': "var(--edge-highlight),var(--shadow-lg)";
+    readonly 'shadow-sheet-1': "var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)";
+    readonly 'shadow-sheet-2': "var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)";
     readonly fold: "12px";
     readonly 'fold-face': "linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))";
     readonly 'glow-hero': "radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)";
@@ -522,8 +522,8 @@ export declare const cssVars: {
     readonly '--sheet-0': "var(--surface-page)";
     readonly '--sheet-1': "var(--surface-card)";
     readonly '--sheet-2': "var(--surface-card-emphasis)";
-    readonly '--shadow-sheet-1': "var(--edge-highlight),var(--shadow-md)";
-    readonly '--shadow-sheet-2': "var(--edge-highlight),var(--shadow-lg)";
+    readonly '--shadow-sheet-1': "var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)";
+    readonly '--shadow-sheet-2': "var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)";
     readonly '--fold': "12px";
     readonly '--fold-face': "linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))";
     readonly '--glow-hero': "radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)";

package/dist/tokens.gen.js

@@ -245,8 +245,8 @@ export const elevation = {
     'sheet-0': 'var(--surface-page)',
     'sheet-1': 'var(--surface-card)',
     'sheet-2': 'var(--surface-card-emphasis)',
-    'shadow-sheet-1': 'var(--edge-highlight),var(--shadow-md)',
-    'shadow-sheet-2': 'var(--edge-highlight),var(--shadow-lg)',
+    'shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
+    'shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
     'fold': '12px',
     'fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
     'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
@@ -525,8 +525,8 @@ export const cssVars = {
     '--sheet-0': 'var(--surface-page)',
     '--sheet-1': 'var(--surface-card)',
     '--sheet-2': 'var(--surface-card-emphasis)',
-    '--shadow-sheet-1': 'var(--edge-highlight),var(--shadow-md)',
-    '--shadow-sheet-2': 'var(--edge-highlight),var(--shadow-lg)',
+    '--shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
+    '--shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
     '--fold': '12px',
     '--fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
     '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "packageManager": "pnpm@11.17.0",
   "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
   "license": "MIT OR Apache-2.0",

package/src/tokens.gen.ts

@@ -251,8 +251,8 @@ export const elevation = {
   'sheet-0': 'var(--surface-page)',
   'sheet-1': 'var(--surface-card)',
   'sheet-2': 'var(--surface-card-emphasis)',
-  'shadow-sheet-1': 'var(--edge-highlight),var(--shadow-md)',
-  'shadow-sheet-2': 'var(--edge-highlight),var(--shadow-lg)',
+  'shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
+  'shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
   'fold': '12px',
   'fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
   'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
@@ -538,8 +538,8 @@ export const cssVars = {
   '--sheet-0': 'var(--surface-page)',
   '--sheet-1': 'var(--surface-card)',
   '--sheet-2': 'var(--surface-card-emphasis)',
-  '--shadow-sheet-1': 'var(--edge-highlight),var(--shadow-md)',
-  '--shadow-sheet-2': 'var(--edge-highlight),var(--shadow-lg)',
+  '--shadow-sheet-1': 'var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40)',
+  '--shadow-sheet-2': 'var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55)',
   '--fold': '12px',
   '--fold-face': 'linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold))',
   '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',

package/styles.css

@@ -610,8 +610,18 @@
   --sheet-0:var(--surface-page);            /* the workspace ground             */
   --sheet-1:var(--surface-card);            /* an active tool                   */
   --sheet-2:var(--surface-card-emphasis);   /* what opened, or what is inside   */
-  --shadow-sheet-1:var(--edge-highlight),var(--shadow-md);
-  --shadow-sheet-2:var(--edge-highlight),var(--shadow-lg);
+  /* The drops are spelled out rather than read from the t-shirt ramp above, and
+     that is the whole reason this ladder can be shared. `--shadow-sm` is a name
+     this package does not own — @hanzo/brand declares the same names at :root
+     with white-canvas alphas, and load order decides who wins — so a rung built
+     on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
+     alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
+     keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
+     one moves, move both. `--edge-highlight` stays deferred: it is role-named,
+     uncollided, and its `.light` zeroing is what makes one value work on both
+     canvases. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
 
   /* The fold — a corner turned back, and the one mark that means THIS OPENS.
      Ornament nowhere: a sheet that does not expand does not wear one.
@@ -655,6 +665,11 @@
    costs nothing. */
 .light{
   --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
+  /* On white the drop does all of it, so the paper rungs are restated here even
+     though check 4 does not demand it — their white is inside --edge-highlight,
+     which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
   --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
   --edge-highlight:inset 0 0 0 0 transparent;
   --bloom:0 6px 20px -4px rgb(0 0 0 / .18);

package/tailwind.css

@@ -633,8 +633,18 @@
   --sheet-0:var(--surface-page);            /* the workspace ground             */
   --sheet-1:var(--surface-card);            /* an active tool                   */
   --sheet-2:var(--surface-card-emphasis);   /* what opened, or what is inside   */
-  --shadow-sheet-1:var(--edge-highlight),var(--shadow-md);
-  --shadow-sheet-2:var(--edge-highlight),var(--shadow-lg);
+  /* The drops are spelled out rather than read from the t-shirt ramp above, and
+     that is the whole reason this ladder can be shared. `--shadow-sm` is a name
+     this package does not own — @hanzo/brand declares the same names at :root
+     with white-canvas alphas, and load order decides who wins — so a rung built
+     on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
+     alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
+     keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
+     one moves, move both. `--edge-highlight` stays deferred: it is role-named,
+     uncollided, and its `.light` zeroing is what makes one value work on both
+     canvases. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
 
   /* The fold — a corner turned back, and the one mark that means THIS OPENS.
      Ornament nowhere: a sheet that does not expand does not wear one.
@@ -678,6 +688,11 @@
    costs nothing. */
 .light{
   --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
+  /* On white the drop does all of it, so the paper rungs are restated here even
+     though check 4 does not demand it — their white is inside --edge-highlight,
+     which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
   --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
   --edge-highlight:inset 0 0 0 0 transparent;
   --bloom:0 6px 20px -4px rgb(0 0 0 / .18);

package/tokens/elevation.css

@@ -75,8 +75,18 @@
   --sheet-0:var(--surface-page);            /* the workspace ground             */
   --sheet-1:var(--surface-card);            /* an active tool                   */
   --sheet-2:var(--surface-card-emphasis);   /* what opened, or what is inside   */
-  --shadow-sheet-1:var(--edge-highlight),var(--shadow-md);
-  --shadow-sheet-2:var(--edge-highlight),var(--shadow-lg);
+  /* The drops are spelled out rather than read from the t-shirt ramp above, and
+     that is the whole reason this ladder can be shared. `--shadow-sm` is a name
+     this package does not own — @hanzo/brand declares the same names at :root
+     with white-canvas alphas, and load order decides who wins — so a rung built
+     on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
+     alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
+     keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
+     one moves, move both. `--edge-highlight` stays deferred: it is role-named,
+     uncollided, and its `.light` zeroing is what makes one value work on both
+     canvases. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
 
   /* The fold — a corner turned back, and the one mark that means THIS OPENS.
      Ornament nowhere: a sheet that does not expand does not wear one.
@@ -120,6 +130,11 @@
    costs nothing. */
 .light{
   --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
+  /* On white the drop does all of it, so the paper rungs are restated here even
+     though check 4 does not demand it — their white is inside --edge-highlight,
+     which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
   --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
   --edge-highlight:inset 0 0 0 0 transparent;
   --bloom:0 6px 20px -4px rgb(0 0 0 / .18);