@hanzo/design 0.3.2 → 0.3.3

package/dist/tokens.gen.d.ts

@@ -178,6 +178,20 @@ export declare const spacing: {
     readonly 'hero-y-lg': "8rem";
     readonly 'header-height': "4rem";
 };
+/** grid tokens (from tokens/grid.css). Values are raw CSS. */
+export declare const grid: {
+    readonly 'grid-columns': "12";
+    readonly 'grid-gap': "var(--space-6)";
+    readonly 'grid-gap-tight': "var(--space-4)";
+    readonly 'grid-gap-loose': "var(--space-8)";
+    readonly 'breakpoint-sm': "40rem";
+    readonly 'breakpoint-md': "48rem";
+    readonly 'breakpoint-lg': "64rem";
+    readonly 'breakpoint-xl': "80rem";
+    readonly 'breakpoint-2xl': "96rem";
+    readonly 'grid-card-min': "18rem";
+    readonly 'grid-card-min-wide': "24rem";
+};
 /** radius tokens (from tokens/radius.css). Values are raw CSS. */
 export declare const radius: {
     readonly radius: "0.5rem";
@@ -418,6 +432,17 @@ export declare const cssVars: {
     readonly '--hero-y': "5rem";
     readonly '--hero-y-lg': "8rem";
     readonly '--header-height': "4rem";
+    readonly '--grid-columns': "12";
+    readonly '--grid-gap': "var(--space-6)";
+    readonly '--grid-gap-tight': "var(--space-4)";
+    readonly '--grid-gap-loose': "var(--space-8)";
+    readonly '--breakpoint-sm': "40rem";
+    readonly '--breakpoint-md': "48rem";
+    readonly '--breakpoint-lg': "64rem";
+    readonly '--breakpoint-xl': "80rem";
+    readonly '--breakpoint-2xl': "96rem";
+    readonly '--grid-card-min': "18rem";
+    readonly '--grid-card-min-wide': "24rem";
     readonly '--radius': "0.5rem";
     readonly '--radius-sm': "0.375rem";
     readonly '--radius-md': "0.5rem";

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ET,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Db,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCV,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAiBZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NV,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ET,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Db,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAiBZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyOV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}

package/dist/tokens.gen.js

@@ -181,6 +181,20 @@ export const spacing = {
     'hero-y-lg': '8rem',
     'header-height': '4rem',
 };
+/** grid tokens (from tokens/grid.css). Values are raw CSS. */
+export const grid = {
+    'grid-columns': '12',
+    'grid-gap': 'var(--space-6)',
+    'grid-gap-tight': 'var(--space-4)',
+    'grid-gap-loose': 'var(--space-8)',
+    'breakpoint-sm': '40rem',
+    'breakpoint-md': '48rem',
+    'breakpoint-lg': '64rem',
+    'breakpoint-xl': '80rem',
+    'breakpoint-2xl': '96rem',
+    'grid-card-min': '18rem',
+    'grid-card-min-wide': '24rem',
+};
 /** radius tokens (from tokens/radius.css). Values are raw CSS. */
 export const radius = {
     'radius': '0.5rem',
@@ -421,6 +435,17 @@ export const cssVars = {
     '--hero-y': '5rem',
     '--hero-y-lg': '8rem',
     '--header-height': '4rem',
+    '--grid-columns': '12',
+    '--grid-gap': 'var(--space-6)',
+    '--grid-gap-tight': 'var(--space-4)',
+    '--grid-gap-loose': 'var(--space-8)',
+    '--breakpoint-sm': '40rem',
+    '--breakpoint-md': '48rem',
+    '--breakpoint-lg': '64rem',
+    '--breakpoint-xl': '80rem',
+    '--breakpoint-2xl': '96rem',
+    '--grid-card-min': '18rem',
+    '--grid-card-min-wide': '24rem',
     '--radius': '0.5rem',
     '--radius-sm': '0.375rem',
     '--radius-md': '0.5rem',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.3.2",
+  "version": "0.3.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": "BSD-3-Clause",

package/scripts/gen-tokens.mjs

@@ -14,7 +14,7 @@ const tokensDir = join(root, 'tokens')
 // The token files, in the same order styles.css imports them. base.css is the
 // semantic-alias layer (references other vars) — parsed too, so `--background`
 // etc. are available programmatically.
-const FILES = ['colors', 'typography', 'spacing', 'radius', 'elevation', 'motion', 'z', 'fonts', 'base']
+const FILES = ['colors', 'typography', 'spacing', 'grid', 'radius', 'elevation', 'motion', 'z', 'fonts', 'base']
 
 // group name for each file (the export const); a couple read better renamed.
 const GROUP = { z: 'zIndex' }

package/src/tokens.gen.ts

@@ -185,6 +185,21 @@ export const spacing = {
   'header-height': '4rem',
 } as const
 
+/** grid tokens (from tokens/grid.css). Values are raw CSS. */
+export const grid = {
+  'grid-columns': '12',
+  'grid-gap': 'var(--space-6)',
+  'grid-gap-tight': 'var(--space-4)',
+  'grid-gap-loose': 'var(--space-8)',
+  'breakpoint-sm': '40rem',
+  'breakpoint-md': '48rem',
+  'breakpoint-lg': '64rem',
+  'breakpoint-xl': '80rem',
+  'breakpoint-2xl': '96rem',
+  'grid-card-min': '18rem',
+  'grid-card-min-wide': '24rem',
+} as const
+
 /** radius tokens (from tokens/radius.css). Values are raw CSS. */
 export const radius = {
   'radius': '0.5rem',
@@ -433,6 +448,17 @@ export const cssVars = {
   '--hero-y': '5rem',
   '--hero-y-lg': '8rem',
   '--header-height': '4rem',
+  '--grid-columns': '12',
+  '--grid-gap': 'var(--space-6)',
+  '--grid-gap-tight': 'var(--space-4)',
+  '--grid-gap-loose': 'var(--space-8)',
+  '--breakpoint-sm': '40rem',
+  '--breakpoint-md': '48rem',
+  '--breakpoint-lg': '64rem',
+  '--breakpoint-xl': '80rem',
+  '--breakpoint-2xl': '96rem',
+  '--grid-card-min': '18rem',
+  '--grid-card-min-wide': '24rem',
   '--radius': '0.5rem',
   '--radius-sm': '0.375rem',
   '--radius-md': '0.5rem',

package/styles.css

@@ -7,6 +7,7 @@
 @import url("tokens/colors.css");
 @import url("tokens/typography.css");
 @import url("tokens/spacing.css");
+@import url("tokens/grid.css");
 @import url("tokens/radius.css");
 @import url("tokens/elevation.css");
 @import url("tokens/motion.css");

package/tokens/grid.css

@@ -0,0 +1,50 @@
+/* Grid — one definition of the field every Hanzo surface lays out on.
+
+   Derived, not invented. Across hanzo.ai and hanzo.app the grid written by hand
+   is overwhelmingly ONE grid: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3` with a
+   1.5rem gutter (240 / 197 / 127 / 185 occurrences on hanzo.ai alone, and the
+   same shape leads on app). 1, 2, 3 and 4 columns account for 97% of every
+   grid-cols- in both repos, and all four divide 12 cleanly — so 12 is the base
+   the spans are cut from, and the long tail (5, 6, 7, 8, 12) still lands on it.
+
+   Containers, gutters and section rhythm are NOT restated here: spacing.css
+   already owns --container-max / --container-prose / --container-wide /
+   --gutter* / --section-y*, and a grid that redeclared them would be a second
+   answer to a settled question. This file adds only what a grid knows that
+   spacing does not — how many columns, how far apart, and where it reflows. */
+:root{
+  /* The base. Spans are cut from twelve because 1/2/3/4/6 all divide it. */
+  --grid-columns:12;
+
+  /* Gutter. --grid-gap is the measured card-grid default (gap-6 leads hanzo.ai
+     at 185 uses); tight and loose are the neighbouring steps that cover app's
+     gap-4 (45) and the wide editorial grids (gap-8, 75). All three reference the
+     space ramp — the grid does not get its own private set of distances. */
+  --grid-gap:var(--space-6);
+  --grid-gap-tight:var(--space-4);
+  --grid-gap-loose:var(--space-8);
+
+  /* Reflow points, byte-identical to the Tailwind v4 defaults these surfaces
+     already compile against. Same NAMES and same VALUES on purpose: the utility
+     layer and anything reading tokens then resolve one value, not two that agree
+     by luck. md and lg carry ~85% of every breakpoint prefix in use; xl is 44
+     occurrences across both repos and 2xl is 1. */
+  --breakpoint-sm:40rem;
+  --breakpoint-md:48rem;
+  --breakpoint-lg:64rem;
+  --breakpoint-xl:80rem;
+  --breakpoint-2xl:96rem;
+
+  /* Intrinsic card grids: state ONE track minimum instead of three column counts
+     at three breakpoints. `repeat(auto-fit, minmax(var(--grid-card-min), 1fr))`
+     reflows 1 -> 2 -> 3 at the same widths the explicit recipe does, and it does
+     it from the space available rather than from the viewport — so a card grid
+     inside a sidebar behaves correctly, which the breakpoint version cannot.
+
+     18rem is chosen, not rounded to: inside --container-max less --gutter-lg on
+     both sides, lg (64rem) leaves ~60rem, where 3 tracks need 3x18 + 2x1.5 =
+     57rem and 4 would need 76.5rem; md (48rem) leaves ~44rem, where 2 tracks
+     need 37.5rem and 3 would need 57rem. The measured 1/2/3 ladder falls out. */
+  --grid-card-min:18rem;
+  --grid-card-min-wide:24rem;
+}