@hanzo/design 0.4.5 → 0.4.7

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.5",
+  "version": "0.4.7",
   "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

@@ -59,6 +59,47 @@ const pass = (msg) => console.log(`  ok    ${msg}`)
     : pass(`all ${urls.length} asset url()s resolve from the package root`)
 }
 
+// ── 1a. the bundles must PARSE ───────────────────────────────────────────
+// 0.4.2 and 0.4.3 shipped a stray `*/` in styles.css AND tailwind.css: an
+// edit added prose to the end of a comment that was already closed, so a
+// paragraph of English sat in the stylesheet as raw CSS, terminated by a
+// second `*/`. Browsers recover from that — they skip to the next thing that
+// looks like a rule and carry on — so the whole kit rendered correctly in
+// Chromium at three widths in both themes, and every screenshot looked right.
+// PostCSS does not recover. It throws, which means those two versions could
+// not be built against by any Vite/Next/Tailwind consumer at all.
+//
+// The lesson is specific: RENDERING IS NOT PARSING. A visual check cannot see
+// this class of defect, because the browser's error recovery is what hides it.
+// So it is checked structurally, here, on the artifacts a consumer receives.
+//
+// Done by hand rather than with postcss because the defect is lexical and the
+// scan is fifteen lines — CSS comments do not nest, so one left-to-right pass
+// that skips comment bodies finds every stray terminator and every unclosed
+// opener. A parser dependency would be a heavier answer to a smaller question.
+{
+  for (const f of ['styles.css', 'tailwind.css']) {
+    const s = read(join(root, f))
+    let i = 0, opened = 0, strays = [], unterminated = null
+    while (i < s.length - 1) {
+      if (s[i] === '/' && s[i + 1] === '*') {
+        opened++
+        const j = s.indexOf('*/', i + 2)
+        if (j < 0) { unterminated = s.slice(0, i).split('\n').length; break }
+        i = j + 2
+        continue
+      }
+      if (s[i] === '*' && s[i + 1] === '/') { strays.push(s.slice(0, i).split('\n').length); i += 2; continue }
+      i++
+    }
+    const braces = [...s].reduce((n, c) => n + (c === '{') - (c === '}'), 0)
+    if (unterminated !== null) fail(`${f}: unterminated /* at line ${unterminated}`)
+    else if (strays.length) fail(`${f}: stray */ outside any comment at line ${strays.join(', ')} — a consumer's PostCSS build throws here`)
+    else if (braces !== 0) fail(`${f}: ${Math.abs(braces)} unbalanced ${braces > 0 ? '{' : '}'}`)
+    else pass(`${f} is lexically sound — ${opened} comments closed, braces balanced`)
+  }
+}
+
 // ── 1b. the Tailwind bridge is complete and self-contained ───────────────
 // An app should write ONE import and get working utilities. Each thing checked
 // here failed silently in production before it was checked: a missing slot

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);

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);

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);