@hanzo/design 0.1.0 → 0.3.0

package/tokens/colors.css

@@ -51,7 +51,12 @@
   --destructive-foreground:#f5f5f5;
   --border:#1f1f1f;
   --input:#1f1f1f;
-  --ring:#333333;
+  /* A focus indicator is a NON-TEXT CONTRAST target: WCAG 2.4.11/1.4.11 require
+     3:1 against every surface it can land on. --neutral-500 is the only rung on
+     this ladder that clears 3:1 on all of them — #000000, #0a0a0a, #101010,
+     #1a1a1a, AND the light theme's #ffffff/#f5f5f5 — so one value serves both
+     themes. (Was #333333 = 1.66:1 on --background: not a focus indicator.) */
+  --ring:var(--neutral-500);
   --brand:#e4e4e7;
   --brand-foreground:#09090b;
   --brand-muted:#a3a3a3;
@@ -65,9 +70,24 @@
   --surface-card-quiet:rgb(23 23 23 / .4);   /* bg-neutral-900/40 — story cards */
   --surface-overlay:rgb(10 10 10 / .95);     /* dropdown / popover panels       */
   --surface-header:rgb(0 0 0 / .7);          /* fixed nav, with backdrop blur   */
+  /* Boundaries come in two kinds and they are NOT interchangeable.
+     DECORATIVE (--border, --border-hairline, --border-card): separates content;
+     WCAG imposes no ratio. Keep them quiet.
+     PERCEIVABLE (--border-strong): identifies a CONTROL — an input edge, a
+     switch, a checkbox — and must clear 3:1 (WCAG 1.4.11) on every surface.
+     Reach for --border-strong whenever the boundary IS the affordance. */
   --border-hairline:var(--neutral-800);
   --border-card:var(--white-10);
-  --border-strong:var(--neutral-700);
+  --border-strong:var(--neutral-500);   /* 3.59:1 worst case — see --ring */
+
+  /* ——— the numeric surface ladder ——— */
+  /* Aliases onto the semantic canvases above, so a brand fork that retunes
+     --card/--muted/--secondary retunes the ladder with it and the light theme
+     inverts for free. Ascending lift: 0 is the page, 3 is a hovered control. */
+  --surface-0:var(--background);
+  --surface-1:var(--card);
+  --surface-2:var(--muted);
+  --surface-3:var(--secondary);
 
   /* ——— text ranks ——— */
   --text-primary:var(--pure-white);
@@ -107,7 +127,10 @@
   --destructive-foreground:#ffffff;
   --border:#e5e5e5;
   --input:#e5e5e5;
-  --ring:#d4d4d4;
+  /* Same rung as dark: #d4d4d4 measured 1.48:1 on white and could not carry a
+     focus indicator either. --neutral-500 is 4.74:1 on #ffffff / 4.38:1 on
+     #f5f5f5, so ONE value is conformant in both themes. */
+  --ring:var(--neutral-500);
   --black:#0a0a0a;
   --white:#ffffff;
   --surface-card:#f5f5f5;
@@ -117,7 +140,10 @@
   --surface-header:rgb(255 255 255 / .8);
   --border-hairline:var(--neutral-200);
   --border-card:rgb(0 0 0 / .1);
-  --border-strong:var(--neutral-300);
+  --border-strong:var(--neutral-500);   /* was --neutral-300 = 1.48:1 on white */
+  /* The white-opacity ladder does NOT invert, so --white-40 is white-on-white
+     here (1.00:1). Anything that needs a visible edge in BOTH themes must use
+     --border-strong, never a --white-* rung. */
   --text-primary:var(--neutral-950);
   --text-secondary:rgb(10 10 10 / .8);
   --text-tertiary:rgb(10 10 10 / .6);

package/tokens/elevation.css

@@ -6,6 +6,18 @@
   --shadow-floating:0 25px 50px -12px rgb(0 0 0 / .25);  /* shadow-2xl: composer, dropdowns, mega panel */
   --shadow-inset-hairline:inset 0 0 0 1px var(--white-10);
   --ring-focus:0 0 0 2px var(--ring);
+
+  /* The t-shirt ramp. Named by size rather than by role, because that is how
+     every component library already asks for a shadow (and how @hanzo/brand
+     spells it). Alphas are heavier than Tailwind's defaults: on a near-black
+     ground a 10% black drop is invisible, so each rung is tuned to read on
+     --background. --shadow-2xl and --shadow-floating are the same rung. */
+  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .40);
+  --shadow:0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45);
+  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50);
+  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
+  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60);
+  --shadow-2xl:var(--shadow-floating);
   /* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
   --glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
   --glow-hero-blur:120px;

package/tokens/fonts.css

@@ -1,7 +1,34 @@
 /* Geist Sans + Geist Mono — the only two faces on Hanzo surfaces.
-   hanzo.ai loads them via next/font/google (Geist, Geist_Mono); here they come
-   from the same Google Fonts source, so the rendered face is identical. */
-@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");
+   SELF-HOSTED. The faces ship inside this package (assets/fonts/*.woff2, two
+   variable files, 141 KB total, SIL OFL-1.1 — see assets/fonts/LICENSE-Geist.txt).
+
+   Why self-hosted rather than @import from fonts.googleapis.com:
+   - A sign-in page must not make a third-party request. hanzoai/id refused to
+     import this file for exactly that reason, which split the token layer: id
+     took the colours and not the typeface. Self-hosting removes the reason, so
+     every surface can import styles.css unchanged.
+   - The @import was a render-blocking request to a host we do not control, on
+     the critical path of every surface, and it broke offline/air-gapped dev.
+   - One variable file per family replaces nine static weights, and it is fewer
+     bytes than the CSS-then-woff2 round trip Google served.
+
+   The url()s are relative to THIS file, so they resolve wherever the package is
+   mounted — node_modules, a CDN, a copied dist — with no configuration. */
+
+@font-face{
+  font-family:"Geist";
+  src:url("../assets/fonts/Geist-Variable.woff2") format("woff2");
+  font-weight:100 900;
+  font-style:normal;
+  font-display:swap;
+}
+@font-face{
+  font-family:"Geist Mono";
+  src:url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");
+  font-weight:100 900;
+  font-style:normal;
+  font-display:swap;
+}
 
 :root{
   --font-sans:"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif;

package/tokens/typography.css

@@ -16,6 +16,25 @@
   --text-5xl:2.5rem;    --leading-5xl:1.05;     /* 40px */
   --text-6xl:3.25rem;   --leading-6xl:1;        /* 52px */
   --text-7xl:4rem;      --leading-7xl:1;        /* 64px */
+  --text-8xl:5.25rem;   --leading-8xl:1;        /* 84px */
+  --text-9xl:7rem;      --leading-9xl:1;        /* 112px */
+
+  /* The SAME scale under @hanzo/brand's spelling. @hanzo/gui's shell theme and
+     Hanzo Studio address the ramp as --font-size-*; both names are one value, so
+     a component written against either resolves here. --text-* is canonical. */
+  --font-size-xs:var(--text-xs);
+  --font-size-sm:var(--text-sm);
+  --font-size-base:var(--text-base);
+  --font-size-lg:var(--text-lg);
+  --font-size-xl:var(--text-xl);
+  --font-size-2xl:var(--text-2xl);
+  --font-size-3xl:var(--text-3xl);
+  --font-size-4xl:var(--text-4xl);
+  --font-size-5xl:var(--text-5xl);
+  --font-size-6xl:var(--text-6xl);
+  --font-size-7xl:var(--text-7xl);
+  --font-size-8xl:var(--text-8xl);
+  --font-size-9xl:var(--text-9xl);
 
   --weight-normal:400;
   --weight-medium:500;

package/tokens/z.css

@@ -1,14 +1,23 @@
 /* Stacking order — the one z-index ladder. Layers are named by role, never by a
    magic number, so a dropdown opened from the fixed header always sits above it
-   and nothing ever reaches for 9999. Below --z-raised is ordinary document flow. */
+   and nothing ever reaches for 9999. Below --z-raised is ordinary document flow.
+
+   Rungs are 100 apart so a surface can slot a one-off BETWEEN two roles
+   (calc(var(--z-modal) + 1)) without inventing a new decade. */
 :root{
   --z-base:0;
-  --z-raised:10;     /* hover-lifted cards, sticky table headers        */
-  --z-sticky:200;    /* pinned section rails                             */
-  --z-header:300;    /* the fixed site header                           */
-  --z-dropdown:400;  /* menus, selects, comboboxes                      */
-  --z-overlay:500;   /* dialog / sheet scrim                            */
-  --z-modal:600;     /* dialogs, sheets, command palette                */
-  --z-popover:700;   /* popovers, tooltips (also when anchored in modals)*/
-  --z-toast:800;     /* toasts / notifications — always on top          */
+  --z-raised:10;       /* hover-lifted cards, sticky table headers          */
+  --z-sticky:200;      /* pinned section rails                              */
+  --z-header:300;      /* the fixed site header                             */
+  --z-dropdown:400;    /* menus, selects, comboboxes                        */
+  --z-overlay:500;     /* dialog / sheet scrim                              */
+  --z-modal:600;       /* dialogs, sheets, command palette                  */
+  --z-popover:700;     /* popovers, tooltips (also when anchored in modals) */
+  --z-toast:800;       /* toasts / notifications — always on top            */
+
+  /* @hanzo/brand spells the top two rungs --z-tooltip and --z-notification.
+     Same rungs, so a component written against either vocabulary stacks
+     identically. --z-popover / --z-toast are canonical. */
+  --z-tooltip:var(--z-popover);
+  --z-notification:var(--z-toast);
 }