@hanzo/design 0.4.3 → 0.4.5

package/components/forms/Select.jsx

@@ -3,18 +3,24 @@ import React from 'react'
 /** Native-select build of the @hanzo/ui Select — same chrome, no portal. */
 export function Select({ options = [], value, onChange, placeholder, style, children, ...rest }) {
   const [focus, setFocus] = React.useState(false)
+  const [hover, setHover] = React.useState(false)
   return (
     <span style={{position:'relative',display:'inline-flex',alignItems:'center',width:'100%'}}>
+      {/* Same chrome as Input and Textarea — radius, hover lift, focus halo. */}
       <select
         value={value}
         onChange={(e)=>onChange && onChange(e.target.value)}
         onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)}
+        onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
         style={{
           appearance:'none',width:'100%',height:36,padding:'0 32px 0 12px',
           fontFamily:'var(--font-sans)',fontSize:'var(--text-control)',color:'var(--foreground)',
-          background:'var(--surface-2)',border:'1px solid ' + (focus ? 'var(--border-focus)' : 'var(--border-control)'),
-          borderRadius:'var(--radius-sm)',cursor:'pointer',
-          transition:'border-color var(--duration-fast) var(--ease-out)',
+          background: hover && !focus ? 'var(--surface-3)' : 'var(--surface-2)',
+          border:'1px solid ' + (focus ? 'var(--border-focus)' : 'var(--border-control)'),
+          borderRadius:'var(--radius-md)',cursor:'pointer',
+          outline:'none',
+          boxShadow: focus ? 'var(--ring-focus)' : 'none',
+          transition:'border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out)',
           ...style,
         }}
         {...rest}

package/components/forms/Textarea.jsx

@@ -1,18 +1,27 @@
 import React from 'react'
 
+// Same chrome as Input, to the pixel — radius, hover lift, focus halo. A
+// textarea that rounds one step tighter than the field above it and lights up
+// differently on focus is the kind of drift nobody reports and everybody feels.
 export function Textarea({ rows = 4, style, ...rest }) {
   const [focus, setFocus] = React.useState(false)
+  const [hover, setHover] = React.useState(false)
   return (
     <textarea
       rows={rows}
       onFocus={(e)=>{setFocus(true);rest.onFocus&&rest.onFocus(e)}}
       onBlur={(e)=>{setFocus(false);rest.onBlur&&rest.onBlur(e)}}
+      onMouseEnter={()=>setHover(true)}
+      onMouseLeave={()=>setHover(false)}
       style={{
         width:'100%',padding:'8px 12px',resize:'vertical',
         fontFamily:'var(--font-sans)',fontSize:'var(--text-control)',lineHeight:'var(--leading-relaxed)',color:'var(--foreground)',
-        background:'var(--surface-2)',border:'1px solid ' + (focus ? 'var(--border-focus)' : 'var(--border-control)'),
-        borderRadius:'var(--radius-sm)',
-        transition:'border-color var(--duration-fast) var(--ease-out)',
+        background: hover && !focus ? 'var(--surface-3)' : 'var(--surface-2)',
+        border:'1px solid ' + (focus ? 'var(--border-focus)' : 'var(--border-control)'),
+        borderRadius:'var(--radius-md)',
+        outline:'none',
+        boxShadow: focus ? 'var(--ring-focus)' : 'none',
+        transition:'border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out)',
         ...style,
       }}
       {...rest}

package/docs/integrate.md

@@ -22,7 +22,7 @@ every token below is a live CSS custom property.
 ```css
 .panel{
   background: var(--surface-card);
-  border: 1px solid var(--border-card);
+  border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: var(--space-6);
   color: var(--text-secondary);

package/guidelines/color-borders.card.html

@@ -1,7 +1,7 @@
-<!-- @dsCard group="Colors" viewport="700x150" name="Borders" subtitle="One alpha ladder, graded by duty — only the focus ring owes a ratio" -->
+<!-- @dsCard group="Colors" viewport="820x160" name="Borders" subtitle="One alpha ladder, graded by duty — only the focus ring owes a ratio" -->
 <!doctype html><html class="dark"><head><meta charset="utf-8"><title>Borders</title><link rel="stylesheet" href="../styles.css">
 <style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
-.g{display:flex;gap:10px;flex-wrap:wrap}.sw{flex:1;min-width:64px}.chip{height:56px;border-radius:8px;border:1px solid var(--white-10)}
+.g{display:flex;gap:10px;flex-wrap:wrap}.sw{flex:1;min-width:110px}.chip{height:56px;border-radius:8px;border:1px solid var(--white-10)}
 .n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
 .v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
 .row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "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",
@@ -32,7 +32,7 @@
   },
   "scripts": {
     "gen": "node scripts/gen-tokens.mjs",
-    "test": "node scripts/check-tokens.mjs && node scripts/lint.mjs components guidelines",
+    "test": "node scripts/check-tokens.mjs && node scripts/lint.mjs .",
     "build": "pnpm gen && pnpm test && tsc -p tsconfig.json",
     "prepublishOnly": "pnpm build",
     "lint": "node scripts/lint.mjs"

package/scripts/lint.mjs

@@ -26,7 +26,15 @@ const TOKENS = new Set()
 }
 
 // ── what we read ─────────────────────────────────────────────────────────
-const EXT = new Set(['.css', '.scss', '.jsx', '.tsx', '.js', '.ts', '.vue', '.svelte', '.html'])
+const EXT = new Set(['.css', '.scss', '.jsx', '.tsx', '.js', '.ts', '.vue', '.svelte', '.html', '.md'])
+// Markdown is PROSE, and prose legitimately says `var(--x)` while explaining
+// what a var is. Only its FENCED CSS BLOCKS are code, and only rule 1 runs on
+// them. That is not a technicality — `docs/integrate.md` shipped the
+// copy-paste snippet every new consumer starts from, and its `.panel` rule
+// drew `1px solid var(--border-card)`, a token nothing declares. Anyone who
+// followed the integration guide got a white hairline on black, from the
+// document whose job is to prevent exactly that.
+const FENCED_CSS = /```(?:css|scss)\n([\s\S]*?)```/g
 const SKIP = new Set(['node_modules', '.git', 'dist', 'build', '.next', 'out', 'coverage', 'vendor', '__pycache__'])
 // Third-party marks keep their own hex by design (DESIGN.md §2.4); so do the
 // token files themselves, which are where raw values are SUPPOSED to live, and
@@ -41,7 +49,13 @@ const SKIP = new Set(['node_modules', '.git', 'dist', 'build', '.next', 'out', '
 // An undefined custom property makes the declaration invalid, `border-color`
 // falls back to `currentColor`, and the specimen cards for this system's own
 // border scale had been painting near-white hairlines on black.
-const EXEMPT = /(^|\/)(tokens|assets|logos|providers|ui_kits|guidelines)(\/|$)|\.card\.html$/
+// The three GENERATED artifacts are on the list for the same reason `tokens/`
+// is: each one is that directory, emitted. `src/tokens.gen.ts` carries every
+// authored literal into TypeScript; `styles.css` and `tailwind.css` are the
+// flattened bundles. Flagging any of them for raw colour is flagging them for
+// working. They are still checked by rule 1 and by check-tokens.mjs, which is
+// what actually governs them.
+const EXEMPT = /(^|\/)(tokens|assets|logos|providers|ui_kits|guidelines)(\/|$)|\.card\.html$|(^|\/)(tokens\.gen\.ts|styles\.css|tailwind\.css)$/
 
 const walk = (p, out = []) => {
   const st = statSync(p)
@@ -95,6 +109,15 @@ function lintUnresolved(rel, src) {
 function lintFile(abs, root) {
   const rel = relative(root, abs).split(sep).join('/')
   const raw = readFileSync(abs, 'utf8')
+  if (extname(rel) === '.md') {
+    // Line numbers stay true: replace everything outside a css fence with
+    // blanks rather than extracting the fences, so a reported line is the line.
+    let masked = raw.replace(/[^\n]/g, ' ')
+    for (const m of raw.matchAll(FENCED_CSS))
+      masked = masked.slice(0, m.index) + m[0] + masked.slice(m.index + m[0].length)
+    lintUnresolved(rel, strip(masked))
+    return
+  }
   const src = strip(raw)
   lintUnresolved(rel, src)
   if (EXEMPT.test('/' + rel)) return

package/styles.css

@@ -818,7 +818,9 @@
      UA's border, which puts two typefaces and a foreign blue focus ring inside
      Hanzo cards on every surface that has not styled its own fields yet. The
      rules below are what a control looks like here. --border-control, NOT
-     --border: the boundary IS the affordance, so it is the rung that owes 3:1. */
+     --border: a field's edge is its own duty and its own rung, so a surface can
+     retune fields without touching every divider on the page. It owes no
+     contrast ratio — the whole budget goes to --ring, below. */
   :where(input,select,textarea,button){font:inherit;color:inherit}
   :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
     background:var(--surface-2);
@@ -896,7 +898,7 @@
      every scrolling surface in the product. 6px, no track, thumb on the same
      hairline ladder as everything else. Both syntaxes ship because they are
      disjoint — `scrollbar-*` is Firefox and the `::-webkit-*` pseudos are
-     Chromium/Safari; neither engine reads the other. */
+     Chromium/Safari; neither engine reads the other.
      The thumb is a --white-* rung, so it does not invert; the `.light`
      restatements sit here rather than in colors.css because a scrollbar is an
      element default and this file is where element defaults live. Everything

package/tailwind.css

@@ -841,7 +841,9 @@
      UA's border, which puts two typefaces and a foreign blue focus ring inside
      Hanzo cards on every surface that has not styled its own fields yet. The
      rules below are what a control looks like here. --border-control, NOT
-     --border: the boundary IS the affordance, so it is the rung that owes 3:1. */
+     --border: a field's edge is its own duty and its own rung, so a surface can
+     retune fields without touching every divider on the page. It owes no
+     contrast ratio — the whole budget goes to --ring, below. */
   :where(input,select,textarea,button){font:inherit;color:inherit}
   :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
     background:var(--surface-2);
@@ -919,7 +921,7 @@
      every scrolling surface in the product. 6px, no track, thumb on the same
      hairline ladder as everything else. Both syntaxes ship because they are
      disjoint — `scrollbar-*` is Firefox and the `::-webkit-*` pseudos are
-     Chromium/Safari; neither engine reads the other. */
+     Chromium/Safari; neither engine reads the other.
      The thumb is a --white-* rung, so it does not invert; the `.light`
      restatements sit here rather than in colors.css because a scrollbar is an
      element default and this file is where element defaults live. Everything

package/tokens/base.css

@@ -83,7 +83,9 @@
      UA's border, which puts two typefaces and a foreign blue focus ring inside
      Hanzo cards on every surface that has not styled its own fields yet. The
      rules below are what a control looks like here. --border-control, NOT
-     --border: the boundary IS the affordance, so it is the rung that owes 3:1. */
+     --border: a field's edge is its own duty and its own rung, so a surface can
+     retune fields without touching every divider on the page. It owes no
+     contrast ratio — the whole budget goes to --ring, below. */
   :where(input,select,textarea,button){font:inherit;color:inherit}
   :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
     background:var(--surface-2);
@@ -161,7 +163,7 @@
      every scrolling surface in the product. 6px, no track, thumb on the same
      hairline ladder as everything else. Both syntaxes ship because they are
      disjoint — `scrollbar-*` is Firefox and the `::-webkit-*` pseudos are
-     Chromium/Safari; neither engine reads the other. */
+     Chromium/Safari; neither engine reads the other.
      The thumb is a --white-* rung, so it does not invert; the `.light`
      restatements sit here rather than in colors.css because a scrollbar is an
      element default and this file is where element defaults live. Everything