@hanzo/design 0.4.6 → 0.4.8

package/LICENSE

@@ -1,28 +1,14 @@
-BSD 3-Clause License
+Licensed under either of
 
-Copyright (c) 2026 Hanzo AI, Inc.
+  * Apache License, Version 2.0 (LICENSE-APACHE or
+    https://www.apache.org/licenses/LICENSE-2.0)
+  * MIT license (LICENSE-MIT or https://opensource.org/licenses/MIT)
 
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
+at your option.
 
-1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
+Unless you explicitly state otherwise, any contribution intentionally
+submitted for inclusion in the work by you, as defined in the Apache-2.0
+license, shall be dual licensed as above, without any additional terms or
+conditions.
 
-2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+See HIP-0137 (hanzoai/hips) for the standard this follows.

package/README.md

@@ -126,7 +126,7 @@ Tokens track `hanzo.ai` (`app/globals.css`, `tailwind.config.ts`, `DESIGN.md`) a
 
 ## License
 
-BSD-3-Clause. Brand marks (the Hanzo logo, partner and provider logos) are the property of their respective owners and are provided for identification.
+MIT OR Apache-2.0, per [HIP-0137](https://github.com/hanzoai/hips/blob/main/HIPs/hip-0137-one-license.md). Brand marks (the Hanzo logo, partner and provider logos) are the property of their respective owners and are provided for identification.
 
 ## Using it in a Tailwind app
 

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hanzo/design",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "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",
+  "license": "MIT OR Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/hanzoai/design.git"
@@ -70,4 +70,4 @@
   "bin": {
     "hanzo-design-lint": "./scripts/lint.mjs"
   }
-}
+}

package/scripts/check-tokens.mjs

@@ -140,6 +140,32 @@ const pass = (msg) => console.log(`  ok    ${msg}`)
     : fail('base.css is UNLAYERED — its element rules outrank every utility an app writes')
 }
 
+// ── 1d. a focused element gets exactly ONE indicator ─────────────────────
+// The field rule and the generic ring rule both compute to (0,1,0) — :where()
+// zeroes its contents and each side keeps one pseudo-class — so the cascade
+// falls through to SOURCE ORDER inside @layer base. The generic rule was
+// written later, so it overrode the `outline:none` that the field rule states
+// expressly to prevent it, and every focused input on every consumer drew the
+// 2px ring AND the edge+halo. Both rules read as correct in isolation; only
+// their order was wrong, which is why nobody saw it in either file.
+//
+// Order is not testable as intent, so this tests the property instead: a rule
+// that paints an outline on focus must not be able to land on a field.
+{
+  const base = strip(read(join(tokensDir, 'base.css')))
+  const FIELDS = 'input,select,textarea'
+  // `outline:none` disarms; anything else paints. `outline-offset` is a
+  // different property and never matches — the colon must follow `outline`.
+  const paints = (body) => /(?:^|[;{\s])outline\s*:\s*(?!none\b)[^;}]+/.test(body)
+  const scoped = (sel) => sel.includes(`:where(${FIELDS})`) || sel.includes(`:not(${FIELDS})`)
+  const doubled = [...base.matchAll(/([^{}]+)\{([^{}]*)\}/g)]
+    .map(([, sel, body]) => ({ sel: sel.trim().replace(/\s+/g, ' '), body }))
+    .filter(({ sel, body }) => sel.includes(':focus-visible') && paints(body) && !scoped(sel))
+  doubled.length
+    ? doubled.forEach(({ sel }) => fail(`\`${sel}\` paints an outline on a field that already draws its own edge + halo — two focus indicators`))
+    : pass('one focus indicator per element: fields brighten their edge, everything else rings')
+}
+
 // ── 2. every var() used inside the token layer must resolve ──────────────
 {
   const declared = new Set()

package/skills/design-system/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: design-system
 description: "Use whenever you generate, edit, or review a Hanzo user interface — a page, component, screen, email, or any code change touching colour, type, spacing, elevation, motion, or stacking order. Use it when PLANNING UI work too, so the plan names tokens rather than values. Teaches the Hanzo token layer (@hanzo/design, derived from @hanzo/brand plus @hanzo/logo) and runs the linter that proves generated code actually reaches it. Triggers — build a page, add a component, style, theme, dark mode, colour, hex, palette, font size, spacing, padding, z-index, modal, dropdown, toast, button, card, dialog, icon, make it look Hanzo, brand, design review."
-license: BSD-3-Clause
+license: MIT OR Apache-2.0
 ---
 
 # The Hanzo design system

package/styles.css

@@ -229,23 +229,23 @@
    silent (the border simply stops existing) and has shipped before. */
 .light{
   color-scheme:light;
-  --background:#ffffff;
+  --background:#f7f7f7;
   --foreground:#0a0a0a;
   /* A ladder, not four names for #f5f5f5. Light lifts by the same tiny steps
      dark does — ~2% per rung — so --surface-0..3 mean something in both themes. */
-  --card:#fafafa;
+  --card:#f2f2f2;
   --card-foreground:#0a0a0a;
-  --popover:#ffffff;
+  --popover:#fbfbfb;
   --popover-foreground:#0a0a0a;
   --primary:#0a0a0a;
   --primary-hover:#262626;
   --primary-foreground:#fafafa;
-  --secondary:#ededed;
+  --secondary:#e4e4e4;
   --secondary-hover:#e0e0e0;
   --secondary-foreground:#0a0a0a;
-  --muted:#f5f5f5;
+  --muted:#ededed;
   --muted-foreground:#525252;
-  --accent:#ededed;
+  --accent:#e4e4e4;
   --accent-foreground:#0a0a0a;
   --destructive:var(--state-error);
   --destructive-hover:#dc2626;
@@ -270,9 +270,9 @@
   --selection:rgb(0 0 0 / .16);
   --glass:rgb(0 0 0 / .04);
   --glass-strong:rgb(0 0 0 / .07);
-  --surface-card:#fafafa;
-  --surface-card-emphasis:#ffffff;
-  --surface-card-quiet:#fcfcfc;
+  --surface-card:#f2f2f2;
+  --surface-card-emphasis:#fdfdfd;
+  --surface-card-quiet:#f5f5f5;
   --surface-overlay:rgb(255 255 255 / .95);
   --surface-header:rgb(255 255 255 / .8);
   --surface-scrim:rgb(0 0 0 / .5);
@@ -838,8 +838,9 @@
      Not the generic ring. A field already HAS an edge, so focus brightens that
      edge (.15 -> .22) and adds a soft halo just outside it — which is what the
      reference does (.composer-box:focus-within) and what separates a focused
-     field from a browser default. The generic `outline` is suppressed here
-     precisely because it would draw a second, harder box around this one. */
+     field from a browser default. `outline:none` drops the UA's own focus ring,
+     which would otherwise draw a second, harder box around this one; the
+     generic ring below excludes fields for the same reason. */
   :where(input,select,textarea):focus-visible{
     outline:none;
     border-color:var(--border-focus);
@@ -886,7 +887,17 @@
     }
   }
 
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  /* The generic ring — for everything that is NOT a field. The exclusion is
+     load-bearing, not tidiness. This rule and the control rule above both
+     compute to (0,1,0): :where() zeroes whatever it wraps, leaving one
+     pseudo-class on each side. Equal specificity inside one layer falls through
+     to source order, this rule sits 46 lines LATER, so it overrode the
+     `outline:none` written above to prevent precisely this — and every focused
+     input, select and textarea on every consumer drew BOTH the 2px ring and the
+     edge+halo. Two indicators, from the two rules that each say there is one.
+     Stating the exclusion in the selector fixes it by MEANING rather than by
+     position, so reordering either rule cannot bring it back. */
+  :where(:not(input,select,textarea)):focus-visible{outline:2px solid var(--ring);outline-offset:2px}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tailwind.css

@@ -252,23 +252,23 @@
    silent (the border simply stops existing) and has shipped before. */
 .light{
   color-scheme:light;
-  --background:#ffffff;
+  --background:#f7f7f7;
   --foreground:#0a0a0a;
   /* A ladder, not four names for #f5f5f5. Light lifts by the same tiny steps
      dark does — ~2% per rung — so --surface-0..3 mean something in both themes. */
-  --card:#fafafa;
+  --card:#f2f2f2;
   --card-foreground:#0a0a0a;
-  --popover:#ffffff;
+  --popover:#fbfbfb;
   --popover-foreground:#0a0a0a;
   --primary:#0a0a0a;
   --primary-hover:#262626;
   --primary-foreground:#fafafa;
-  --secondary:#ededed;
+  --secondary:#e4e4e4;
   --secondary-hover:#e0e0e0;
   --secondary-foreground:#0a0a0a;
-  --muted:#f5f5f5;
+  --muted:#ededed;
   --muted-foreground:#525252;
-  --accent:#ededed;
+  --accent:#e4e4e4;
   --accent-foreground:#0a0a0a;
   --destructive:var(--state-error);
   --destructive-hover:#dc2626;
@@ -293,9 +293,9 @@
   --selection:rgb(0 0 0 / .16);
   --glass:rgb(0 0 0 / .04);
   --glass-strong:rgb(0 0 0 / .07);
-  --surface-card:#fafafa;
-  --surface-card-emphasis:#ffffff;
-  --surface-card-quiet:#fcfcfc;
+  --surface-card:#f2f2f2;
+  --surface-card-emphasis:#fdfdfd;
+  --surface-card-quiet:#f5f5f5;
   --surface-overlay:rgb(255 255 255 / .95);
   --surface-header:rgb(255 255 255 / .8);
   --surface-scrim:rgb(0 0 0 / .5);
@@ -861,8 +861,9 @@
      Not the generic ring. A field already HAS an edge, so focus brightens that
      edge (.15 -> .22) and adds a soft halo just outside it — which is what the
      reference does (.composer-box:focus-within) and what separates a focused
-     field from a browser default. The generic `outline` is suppressed here
-     precisely because it would draw a second, harder box around this one. */
+     field from a browser default. `outline:none` drops the UA's own focus ring,
+     which would otherwise draw a second, harder box around this one; the
+     generic ring below excludes fields for the same reason. */
   :where(input,select,textarea):focus-visible{
     outline:none;
     border-color:var(--border-focus);
@@ -909,7 +910,17 @@
     }
   }
 
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  /* The generic ring — for everything that is NOT a field. The exclusion is
+     load-bearing, not tidiness. This rule and the control rule above both
+     compute to (0,1,0): :where() zeroes whatever it wraps, leaving one
+     pseudo-class on each side. Equal specificity inside one layer falls through
+     to source order, this rule sits 46 lines LATER, so it overrode the
+     `outline:none` written above to prevent precisely this — and every focused
+     input, select and textarea on every consumer drew BOTH the 2px ring and the
+     edge+halo. Two indicators, from the two rules that each say there is one.
+     Stating the exclusion in the selector fixes it by MEANING rather than by
+     position, so reordering either rule cannot bring it back. */
+  :where(:not(input,select,textarea)):focus-visible{outline:2px solid var(--ring);outline-offset:2px}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tokens/base.css

@@ -103,8 +103,9 @@
      Not the generic ring. A field already HAS an edge, so focus brightens that
      edge (.15 -> .22) and adds a soft halo just outside it — which is what the
      reference does (.composer-box:focus-within) and what separates a focused
-     field from a browser default. The generic `outline` is suppressed here
-     precisely because it would draw a second, harder box around this one. */
+     field from a browser default. `outline:none` drops the UA's own focus ring,
+     which would otherwise draw a second, harder box around this one; the
+     generic ring below excludes fields for the same reason. */
   :where(input,select,textarea):focus-visible{
     outline:none;
     border-color:var(--border-focus);
@@ -151,7 +152,17 @@
     }
   }
 
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  /* The generic ring — for everything that is NOT a field. The exclusion is
+     load-bearing, not tidiness. This rule and the control rule above both
+     compute to (0,1,0): :where() zeroes whatever it wraps, leaving one
+     pseudo-class on each side. Equal specificity inside one layer falls through
+     to source order, this rule sits 46 lines LATER, so it overrode the
+     `outline:none` written above to prevent precisely this — and every focused
+     input, select and textarea on every consumer drew BOTH the 2px ring and the
+     edge+halo. Two indicators, from the two rules that each say there is one.
+     Stating the exclusion in the selector fixes it by MEANING rather than by
+     position, so reordering either rule cannot bring it back. */
+  :where(:not(input,select,textarea)):focus-visible{outline:2px solid var(--ring);outline-offset:2px}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tokens/colors.css

@@ -214,23 +214,23 @@
    silent (the border simply stops existing) and has shipped before. */
 .light{
   color-scheme:light;
-  --background:#ffffff;
+  --background:#f7f7f7;
   --foreground:#0a0a0a;
   /* A ladder, not four names for #f5f5f5. Light lifts by the same tiny steps
      dark does — ~2% per rung — so --surface-0..3 mean something in both themes. */
-  --card:#fafafa;
+  --card:#f2f2f2;
   --card-foreground:#0a0a0a;
-  --popover:#ffffff;
+  --popover:#fbfbfb;
   --popover-foreground:#0a0a0a;
   --primary:#0a0a0a;
   --primary-hover:#262626;
   --primary-foreground:#fafafa;
-  --secondary:#ededed;
+  --secondary:#e4e4e4;
   --secondary-hover:#e0e0e0;
   --secondary-foreground:#0a0a0a;
-  --muted:#f5f5f5;
+  --muted:#ededed;
   --muted-foreground:#525252;
-  --accent:#ededed;
+  --accent:#e4e4e4;
   --accent-foreground:#0a0a0a;
   --destructive:var(--state-error);
   --destructive-hover:#dc2626;
@@ -255,9 +255,9 @@
   --selection:rgb(0 0 0 / .16);
   --glass:rgb(0 0 0 / .04);
   --glass-strong:rgb(0 0 0 / .07);
-  --surface-card:#fafafa;
-  --surface-card-emphasis:#ffffff;
-  --surface-card-quiet:#fcfcfc;
+  --surface-card:#f2f2f2;
+  --surface-card-emphasis:#fdfdfd;
+  --surface-card-quiet:#f5f5f5;
   --surface-overlay:rgb(255 255 255 / .95);
   --surface-header:rgb(255 255 255 / .8);
   --surface-scrim:rgb(0 0 0 / .5);