@hanzo/design 0.5.13 → 0.5.15

package/dist/tokens.gen.d.ts

@@ -35,11 +35,11 @@ export declare const colors: {
     readonly 'white-80': "rgb(255 255 255 / .80)";
     readonly 'white-92': "rgb(255 255 255 / .92)";
     readonly background: "#0a0a0a";
-    readonly foreground: "#fafafa";
+    readonly foreground: "#e5e5e5";
     readonly card: "#0f0f0f";
-    readonly 'card-foreground': "#fafafa";
+    readonly 'card-foreground': "#e5e5e5";
     readonly popover: "#0f0f0f";
-    readonly 'popover-foreground': "#fafafa";
+    readonly 'popover-foreground': "#e5e5e5";
     readonly primary: "#fafafa";
     readonly 'primary-hover': "#e5e5e5";
     readonly 'primary-foreground': "#0a0a0a";
@@ -203,6 +203,10 @@ export declare const spacing: {
     readonly 'hero-y-lg': "4.5rem";
     readonly 'header-height': "3.5rem";
     readonly 'tap-target': "44px";
+    readonly 'control-height-sm': "32px";
+    readonly 'control-height': "36px";
+    readonly 'control-height-lg': "40px";
+    readonly 'control-height-xl': "52px";
     readonly 'safe-top': "env(safe-area-inset-top,0px)";
     readonly 'safe-right': "env(safe-area-inset-right,0px)";
     readonly 'safe-bottom': "env(safe-area-inset-bottom,0px)";
@@ -338,11 +342,11 @@ export declare const cssVars: {
     readonly '--white-80': "rgb(255 255 255 / .80)";
     readonly '--white-92': "rgb(255 255 255 / .92)";
     readonly '--background': "#0a0a0a";
-    readonly '--foreground': "#fafafa";
+    readonly '--foreground': "#e5e5e5";
     readonly '--card': "#0f0f0f";
-    readonly '--card-foreground': "#fafafa";
+    readonly '--card-foreground': "#e5e5e5";
     readonly '--popover': "#0f0f0f";
-    readonly '--popover-foreground': "#fafafa";
+    readonly '--popover-foreground': "#e5e5e5";
     readonly '--primary': "#fafafa";
     readonly '--primary-hover': "#e5e5e5";
     readonly '--primary-foreground': "#0a0a0a";
@@ -500,6 +504,10 @@ export declare const cssVars: {
     readonly '--hero-y-lg': "4.5rem";
     readonly '--header-height': "3.5rem";
     readonly '--tap-target': "44px";
+    readonly '--control-height-sm': "32px";
+    readonly '--control-height': "36px";
+    readonly '--control-height-lg': "40px";
+    readonly '--control-height-xl': "52px";
     readonly '--safe-top': "env(safe-area-inset-top,0px)";
     readonly '--safe-right': "env(safe-area-inset-right,0px)";
     readonly '--safe-bottom': "env(safe-area-inset-bottom,0px)";

package/dist/tokens.gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}
+{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}

package/dist/tokens.gen.js

@@ -38,11 +38,11 @@ export const colors = {
     'white-80': 'rgb(255 255 255 / .80)',
     'white-92': 'rgb(255 255 255 / .92)',
     'background': '#0a0a0a',
-    'foreground': '#fafafa',
+    'foreground': '#e5e5e5',
     'card': '#0f0f0f',
-    'card-foreground': '#fafafa',
+    'card-foreground': '#e5e5e5',
     'popover': '#0f0f0f',
-    'popover-foreground': '#fafafa',
+    'popover-foreground': '#e5e5e5',
     'primary': '#fafafa',
     'primary-hover': '#e5e5e5',
     'primary-foreground': '#0a0a0a',
@@ -206,6 +206,10 @@ export const spacing = {
     'hero-y-lg': '4.5rem',
     'header-height': '3.5rem',
     'tap-target': '44px',
+    'control-height-sm': '32px',
+    'control-height': '36px',
+    'control-height-lg': '40px',
+    'control-height-xl': '52px',
     'safe-top': 'env(safe-area-inset-top,0px)',
     'safe-right': 'env(safe-area-inset-right,0px)',
     'safe-bottom': 'env(safe-area-inset-bottom,0px)',
@@ -341,11 +345,11 @@ export const cssVars = {
     '--white-80': 'rgb(255 255 255 / .80)',
     '--white-92': 'rgb(255 255 255 / .92)',
     '--background': '#0a0a0a',
-    '--foreground': '#fafafa',
+    '--foreground': '#e5e5e5',
     '--card': '#0f0f0f',
-    '--card-foreground': '#fafafa',
+    '--card-foreground': '#e5e5e5',
     '--popover': '#0f0f0f',
-    '--popover-foreground': '#fafafa',
+    '--popover-foreground': '#e5e5e5',
     '--primary': '#fafafa',
     '--primary-hover': '#e5e5e5',
     '--primary-foreground': '#0a0a0a',
@@ -503,6 +507,10 @@ export const cssVars = {
     '--hero-y-lg': '4.5rem',
     '--header-height': '3.5rem',
     '--tap-target': '44px',
+    '--control-height-sm': '32px',
+    '--control-height': '36px',
+    '--control-height-lg': '40px',
+    '--control-height-xl': '52px',
     '--safe-top': 'env(safe-area-inset-top,0px)',
     '--safe-right': 'env(safe-area-inset-right,0px)',
     '--safe-bottom': 'env(safe-area-inset-bottom,0px)',

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@hanzo/design",
-  "version": "0.5.13",
-  "description": "Hanzo Design System — monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
+  "version": "0.5.15",
+  "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",
   "repository": {
     "type": "git",
@@ -31,6 +32,13 @@
     "./skills/*": "./skills/*",
     "./tailwind.css": "./tailwind.css"
   },
+  "scripts": {
+    "gen": "node scripts/gen-tokens.mjs",
+    "test": "node scripts/check-tokens.mjs && node scripts/check-preference.mjs && node scripts/lint.mjs .",
+    "build": "pnpm gen && pnpm test && tsc -p tsconfig.json && node scripts/check-dist.mjs",
+    "prepublishOnly": "pnpm build",
+    "lint": "node scripts/lint.mjs"
+  },
   "devDependencies": {
     "typescript": "^5.9.3"
   },
@@ -63,11 +71,5 @@
   },
   "bin": {
     "hanzo-design-lint": "./scripts/lint.mjs"
-  },
-  "scripts": {
-    "gen": "node scripts/gen-tokens.mjs",
-    "test": "node scripts/check-tokens.mjs && node scripts/check-preference.mjs && node scripts/lint.mjs .",
-    "build": "pnpm gen && pnpm test && tsc -p tsconfig.json && node scripts/check-dist.mjs",
-    "lint": "node scripts/lint.mjs"
   }
-}
+}

package/src/tokens.gen.ts

@@ -39,11 +39,11 @@ export const colors = {
   'white-80': 'rgb(255 255 255 / .80)',
   'white-92': 'rgb(255 255 255 / .92)',
   'background': '#0a0a0a',
-  'foreground': '#fafafa',
+  'foreground': '#e5e5e5',
   'card': '#0f0f0f',
-  'card-foreground': '#fafafa',
+  'card-foreground': '#e5e5e5',
   'popover': '#0f0f0f',
-  'popover-foreground': '#fafafa',
+  'popover-foreground': '#e5e5e5',
   'primary': '#fafafa',
   'primary-hover': '#e5e5e5',
   'primary-foreground': '#0a0a0a',
@@ -209,6 +209,10 @@ export const spacing = {
   'hero-y-lg': '4.5rem',
   'header-height': '3.5rem',
   'tap-target': '44px',
+  'control-height-sm': '32px',
+  'control-height': '36px',
+  'control-height-lg': '40px',
+  'control-height-xl': '52px',
   'safe-top': 'env(safe-area-inset-top,0px)',
   'safe-right': 'env(safe-area-inset-right,0px)',
   'safe-bottom': 'env(safe-area-inset-bottom,0px)',
@@ -354,11 +358,11 @@ export const cssVars = {
   '--white-80': 'rgb(255 255 255 / .80)',
   '--white-92': 'rgb(255 255 255 / .92)',
   '--background': '#0a0a0a',
-  '--foreground': '#fafafa',
+  '--foreground': '#e5e5e5',
   '--card': '#0f0f0f',
-  '--card-foreground': '#fafafa',
+  '--card-foreground': '#e5e5e5',
   '--popover': '#0f0f0f',
-  '--popover-foreground': '#fafafa',
+  '--popover-foreground': '#e5e5e5',
   '--primary': '#fafafa',
   '--primary-hover': '#e5e5e5',
   '--primary-foreground': '#0a0a0a',
@@ -516,6 +520,10 @@ export const cssVars = {
   '--hero-y-lg': '4.5rem',
   '--header-height': '3.5rem',
   '--tap-target': '44px',
+  '--control-height-sm': '32px',
+  '--control-height': '36px',
+  '--control-height-lg': '40px',
+  '--control-height-xl': '52px',
   '--safe-top': 'env(safe-area-inset-top,0px)',
   '--safe-right': 'env(safe-area-inset-right,0px)',
   '--safe-bottom': 'env(safe-area-inset-bottom,0px)',

package/styles.css

@@ -92,11 +92,20 @@
 
   /* ——— semantic aliases (dark, the default) ——— */
   --background:#0a0a0a;
-  --foreground:#fafafa;
+  /* READING ink, one rung below the top of the ramp. The note at the head of this
+     file already made this argument once — #ffffff on #000000 halates, so #fafafa
+     — and the argument does not stop being true at 19.0:1. Every heading and
+     paragraph on every surface was set in the brightest ink the system has, while
+     the CHROME beside them draws body text at --white-92; a page read as glare
+     against its own header. #e5e5e5 is the neutral-200 rung this file already
+     spends on --primary-hover, so the ramp gains no new value: 15.7:1 on the page,
+     15.2:1 on a card, both more than twice the 7:1 AAA asks of body text.
+     Something that genuinely needs the brightest ink names --primary. */
+  --foreground:#e5e5e5;
   --card:#0f0f0f;
-  --card-foreground:#fafafa;
+  --card-foreground:#e5e5e5;
   --popover:#0f0f0f;
-  --popover-foreground:#fafafa;
+  --popover-foreground:#e5e5e5;
   --primary:#fafafa;
   /* A 5% step, not the 16% this used to be. A filled button's fill is already
      the top of the ink ramp, so the only directions available on hover are
@@ -503,6 +512,26 @@
      hanzoai/id's stylesheet — one app knowing something the system did not. */
   --tap-target:44px;
 
+  /* ——— controls ——— */
+  /* A control's OWN height, which the floor above does not answer: 44px is the
+     smallest a finger may aim at, not the size a thing should be. Nothing named
+     the second question, so each surface answered it privately and they drifted
+     — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
+     `--control-h` over that same 36px library, and hanzoai/id spelled
+     `min-height:52px` into three separate rules.
+     The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
+     down to the layer that holds values so a host can answer it once instead of
+     each library carrying a private copy. They sit under the tap floor on
+     purpose: base.css lifts whichever one is spent to 44px under
+     `pointer:coarse`, so one declaration serves a compact pointer control and a
+     hittable touch one. -xl is what a surface earns when the control IS the
+     content — one field, one button, nothing competing — where the default
+     reads as one of a stack rather than as the thing the screen is for. */
+  --control-height-sm:32px;
+  --control-height:36px;
+  --control-height-lg:40px;
+  --control-height-xl:52px;
+
   /* ——— safe areas ——— */
   /* The notch/home-indicator insets, named once. Anything pinned to a viewport
      edge — a fixed header, a bottom bar, a sheet — adds the matching one. */

package/tailwind.css

@@ -115,11 +115,20 @@
 
   /* ——— semantic aliases (dark, the default) ——— */
   --background:#0a0a0a;
-  --foreground:#fafafa;
+  /* READING ink, one rung below the top of the ramp. The note at the head of this
+     file already made this argument once — #ffffff on #000000 halates, so #fafafa
+     — and the argument does not stop being true at 19.0:1. Every heading and
+     paragraph on every surface was set in the brightest ink the system has, while
+     the CHROME beside them draws body text at --white-92; a page read as glare
+     against its own header. #e5e5e5 is the neutral-200 rung this file already
+     spends on --primary-hover, so the ramp gains no new value: 15.7:1 on the page,
+     15.2:1 on a card, both more than twice the 7:1 AAA asks of body text.
+     Something that genuinely needs the brightest ink names --primary. */
+  --foreground:#e5e5e5;
   --card:#0f0f0f;
-  --card-foreground:#fafafa;
+  --card-foreground:#e5e5e5;
   --popover:#0f0f0f;
-  --popover-foreground:#fafafa;
+  --popover-foreground:#e5e5e5;
   --primary:#fafafa;
   /* A 5% step, not the 16% this used to be. A filled button's fill is already
      the top of the ink ramp, so the only directions available on hover are
@@ -526,6 +535,26 @@
      hanzoai/id's stylesheet — one app knowing something the system did not. */
   --tap-target:44px;
 
+  /* ——— controls ——— */
+  /* A control's OWN height, which the floor above does not answer: 44px is the
+     smallest a finger may aim at, not the size a thing should be. Nothing named
+     the second question, so each surface answered it privately and they drifted
+     — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
+     `--control-h` over that same 36px library, and hanzoai/id spelled
+     `min-height:52px` into three separate rules.
+     The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
+     down to the layer that holds values so a host can answer it once instead of
+     each library carrying a private copy. They sit under the tap floor on
+     purpose: base.css lifts whichever one is spent to 44px under
+     `pointer:coarse`, so one declaration serves a compact pointer control and a
+     hittable touch one. -xl is what a surface earns when the control IS the
+     content — one field, one button, nothing competing — where the default
+     reads as one of a stack rather than as the thing the screen is for. */
+  --control-height-sm:32px;
+  --control-height:36px;
+  --control-height-lg:40px;
+  --control-height-xl:52px;
+
   /* ——— safe areas ——— */
   /* The notch/home-indicator insets, named once. Anything pinned to a viewport
      edge — a fixed header, a bottom bar, a sheet — adds the matching one. */

package/tokens/colors.css

@@ -77,11 +77,20 @@
 
   /* ——— semantic aliases (dark, the default) ——— */
   --background:#0a0a0a;
-  --foreground:#fafafa;
+  /* READING ink, one rung below the top of the ramp. The note at the head of this
+     file already made this argument once — #ffffff on #000000 halates, so #fafafa
+     — and the argument does not stop being true at 19.0:1. Every heading and
+     paragraph on every surface was set in the brightest ink the system has, while
+     the CHROME beside them draws body text at --white-92; a page read as glare
+     against its own header. #e5e5e5 is the neutral-200 rung this file already
+     spends on --primary-hover, so the ramp gains no new value: 15.7:1 on the page,
+     15.2:1 on a card, both more than twice the 7:1 AAA asks of body text.
+     Something that genuinely needs the brightest ink names --primary. */
+  --foreground:#e5e5e5;
   --card:#0f0f0f;
-  --card-foreground:#fafafa;
+  --card-foreground:#e5e5e5;
   --popover:#0f0f0f;
-  --popover-foreground:#fafafa;
+  --popover-foreground:#e5e5e5;
   --primary:#fafafa;
   /* A 5% step, not the 16% this used to be. A filled button's fill is already
      the top of the ink ramp, so the only directions available on hover are

package/tokens/spacing.css

@@ -68,6 +68,26 @@
      hanzoai/id's stylesheet — one app knowing something the system did not. */
   --tap-target:44px;
 
+  /* ——— controls ——— */
+  /* A control's OWN height, which the floor above does not answer: 44px is the
+     smallest a finger may aim at, not the size a thing should be. Nothing named
+     the second question, so each surface answered it privately and they drifted
+     — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
+     `--control-h` over that same 36px library, and hanzoai/id spelled
+     `min-height:52px` into three separate rules.
+     The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
+     down to the layer that holds values so a host can answer it once instead of
+     each library carrying a private copy. They sit under the tap floor on
+     purpose: base.css lifts whichever one is spent to 44px under
+     `pointer:coarse`, so one declaration serves a compact pointer control and a
+     hittable touch one. -xl is what a surface earns when the control IS the
+     content — one field, one button, nothing competing — where the default
+     reads as one of a stack rather than as the thing the screen is for. */
+  --control-height-sm:32px;
+  --control-height:36px;
+  --control-height-lg:40px;
+  --control-height-xl:52px;
+
   /* ——— safe areas ——— */
   /* The notch/home-indicator insets, named once. Anything pinned to a viewport
      edge — a fixed header, a bottom bar, a sheet — adds the matching one. */