@hanzo/design 0.3.5 → 0.4.1

package/README.md

@@ -127,3 +127,28 @@ 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.
+
+## Using it in a Tailwind app
+
+One import, after Tailwind's:
+
+```css
+@import "tailwindcss";
+@import "@hanzo/design/tailwind.css";
+```
+
+That carries the tokens **and** maps them onto Tailwind's namespace, so
+`bg-background`, `text-muted-foreground` and `border-border` resolve to the
+system's values. There is no `@theme` block to hand-write and keep in sync.
+
+Not using Tailwind? `@import "@hanzo/design/styles.css"` is the same tokens
+without the bridge.
+
+### Two rules, and the build enforces both
+
+- **Import it after `tailwindcss`.** `@theme` extends the framework, so it has
+  to follow it.
+- **Don't re-declare tokens in your app.** An app that states its own palette
+  drifts from every other surface, and any token it forgets resolves to nothing
+  — `border-border` becomes `currentColor`, which paints a white hairline on
+  black and reads as a design choice rather than a missing line.

package/components/core/Avatar.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 export function Avatar({ size = 32, style, children, ...rest }) {
   return (
-    <span style={{position:'relative',display:'inline-flex',alignItems:'center',justifyContent:'center',width:size,height:size,flexShrink:0,borderRadius:'var(--radius-full)',overflow:'hidden',border:'1px solid var(--border-hairline)',background:'linear-gradient(to bottom right,var(--neutral-700),var(--neutral-900))',...style}} {...rest}>
+    <span style={{position:'relative',display:'inline-flex',alignItems:'center',justifyContent:'center',width:size,height:size,flexShrink:0,borderRadius:'var(--radius-full)',overflow:'hidden',border:'1px solid var(--border)',background:'linear-gradient(to bottom right,var(--muted-foreground),var(--surface-3))',...style}} {...rest}>
       {children}
     </span>
   )

package/components/core/Badge.jsx

@@ -1,13 +1,16 @@
 import React from 'react'
 
-/** Rank is carried by opacity, never by hue (DESIGN.md §2.3). */
+/** Rank is carried by lift, never by hue (DESIGN.md §2.3).
+    The rungs come off the SURFACE ladder and --glass, not off --white-*: the
+    opacity ladder is white-on-white in the light theme, so a tier2 pill drawn
+    from --white-15 was an invisible chip the moment a surface went light. */
 const V = {
-  default:{background:'var(--white-10)',color:'var(--text-primary)',border:'1px solid var(--border)'},
+  default:{background:'var(--glass-strong)',color:'var(--text-primary)',border:'1px solid var(--border)'},
   secondary:{background:'var(--secondary)',color:'var(--secondary-foreground)',border:'1px solid transparent'},
-  outline:{background:'transparent',color:'var(--text-secondary)',border:'1px solid var(--border-card)'},
-  tier1:{background:'var(--white-05)',color:'var(--text-tertiary)',border:'1px solid var(--border-card)'},
-  tier2:{background:'var(--white-15)',color:'var(--text-secondary)',border:'1px solid var(--border-card)'},
-  tier3:{background:'var(--white-20)',color:'var(--text-primary)',border:'1px solid var(--white-20)'},
+  outline:{background:'transparent',color:'var(--text-secondary)',border:'1px solid var(--border)'},
+  tier1:{background:'var(--glass)',color:'var(--text-tertiary)',border:'1px solid var(--border)'},
+  tier2:{background:'var(--surface-2)',color:'var(--text-secondary)',border:'1px solid var(--border)'},
+  tier3:{background:'var(--surface-3)',color:'var(--text-primary)',border:'1px solid var(--border-strong)'},
   error:{background:'var(--state-error-bg)',color:'var(--state-error-text)',border:'1px solid transparent'},
 }
 
@@ -31,7 +34,7 @@ export function Badge({ variant = 'default', pill = true, style, children, ...re
 /** The eyebrow pill above a hero headline. */
 export function EyebrowBadge({ children, style, ...rest }) {
   return (
-    <span style={{display:'inline-flex',alignItems:'center',gap:8,padding:'8px 16px',borderRadius:'var(--radius-full)',border:'1px solid var(--border-hairline)',background:'var(--white-05)',fontSize:'var(--text-sm)',color:'var(--neutral-200)',...style}} {...rest}>{children}</span>
+    <span style={{display:'inline-flex',alignItems:'center',gap:8,padding:'8px 16px',borderRadius:'var(--radius-full)',border:'1px solid var(--border)',background:'var(--glass)',fontSize:'var(--text-sm)',color:'var(--text-secondary)',...style}} {...rest}>{children}</span>
   )
 }
 

package/components/core/Button.jsx

@@ -14,7 +14,7 @@ const SZ = {
   lg:{height:44,padding:'0 24px',fontSize:'var(--text-sm)'},
   icon:{height:36,width:36,padding:0},
 }
-const HOVER = { primary:'primary', secondary:'secondary', outline:'accent', ghost:'accent', destructive:'destructive', link:'link' }
+const HOVER = { primary:'primary', secondary:'primary', outline:'accent', ghost:'accent', destructive:'destructive', link:'link' }
 
 export function Button({ variant = 'primary', size = 'default', pill = false, disabled, style, children, ...rest }) {
   const [hover, setHover] = React.useState(false)
@@ -23,7 +23,6 @@ export function Button({ variant = 'primary', size = 'default', pill = false, di
   const h = HOVER[variant]
   const hoverStyle = !hover || disabled ? null
     : h === 'primary' || h === 'destructive' ? { opacity: 0.9 }
-    : h === 'secondary' ? { background: 'var(--neutral-800)' }
     : h === 'accent' ? { background: 'var(--accent)', color: 'var(--text-primary)' }
     : { textDecoration: 'underline' }
   return (

package/components/core/Card.jsx

@@ -16,7 +16,7 @@ export function Card({ variant = 'default', sheen = false, interactive = false,
       style={{
         position:'relative',overflow:'hidden',
         borderRadius:'var(--radius-lg)',
-        border:'1px solid ' + (hover ? 'var(--border-strong)' : 'var(--border-hairline)'),
+        border:'1px solid ' + (hover ? 'var(--border-strong)' : 'var(--border)'),
         background:FILL[variant] || FILL.default,
         transition:'border-color var(--duration-fast) var(--ease-out)',
         ...style,

package/components/core/Progress.jsx

@@ -4,7 +4,7 @@ export function Progress({ value = 0, max = 100, height = 6, style, ...rest }) {
   const pct = Math.max(0, Math.min(100, (value / max) * 100))
   return (
     <div role="progressbar" aria-valuenow={value} aria-valuemin={0} aria-valuemax={max}
-      style={{position:'relative',width:'100%',height,borderRadius:'var(--radius-full)',background:'var(--neutral-800)',overflow:'hidden',...style}} {...rest}>
+      style={{position:'relative',width:'100%',height,borderRadius:'var(--radius-full)',background:'var(--glass-strong)',overflow:'hidden',...style}} {...rest}>
       <div style={{height:'100%',width:pct+'%',background:'var(--primary)',borderRadius:'var(--radius-full)',transition:'width var(--duration-base) var(--ease-out)'}} />
     </div>
   )

package/components/core/Table.jsx

@@ -4,7 +4,7 @@ export function Table({ style, children, ...rest }) {
   return <table style={{width:'100%',borderCollapse:'collapse',fontSize:'var(--text-sm)',...style}} {...rest}>{children}</table>
 }
 export function TableHeader({ style, children, ...rest }) {
-  return <thead style={{background:'var(--black)',...style}} {...rest}>{children}</thead>
+  return <thead style={{background:'var(--surface-2)',...style}} {...rest}>{children}</thead>
 }
 export function TableBody({ style, children, ...rest }) {
   return <tbody style={style} {...rest}>{children}</tbody>
@@ -15,7 +15,7 @@ export function TableRow({ interactive = false, style, children, ...rest }) {
     <tr
       onMouseEnter={interactive ? () => setHover(true) : undefined}
       onMouseLeave={interactive ? () => setHover(false) : undefined}
-      style={{borderTop:'1px solid var(--border-hairline)',background: hover ? 'rgb(23 23 23 / .6)' : 'transparent',cursor: interactive ? 'pointer' : 'default',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
+      style={{borderTop:'1px solid var(--border)',background: hover ? 'var(--glass)' : 'transparent',cursor: interactive ? 'pointer' : 'default',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
       {...rest}
     >
       {children}

package/components/forms/Checkbox.jsx

@@ -15,7 +15,7 @@ export function Checkbox({ checked, defaultChecked, onChange, disabled, label, s
       onKeyDown={(e)=>{if(e.key===' '||e.key==='Enter'){e.preventDefault();toggle()}}}
       style={{
         display:'inline-flex',alignItems:'center',justifyContent:'center',width:16,height:16,flexShrink:0,
-        borderRadius:4,border:'1px solid ' + (on ? 'var(--primary)' : 'var(--border-strong)'),
+        borderRadius:4,border:'1px solid ' + (on ? 'var(--primary)' : 'var(--border-control)'),
         background: on ? 'var(--primary)' : 'transparent',
         cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
         transition:'background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out)',

package/components/forms/Input.jsx

@@ -8,10 +8,10 @@ export function Input({ invalid = false, style, ...rest }) {
       onBlur={(e)=>{setFocus(false);rest.onBlur&&rest.onBlur(e)}}
       style={{
         width:'100%',height:36,padding:'0 12px',
-        fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',color:'var(--foreground)',
-        background:'var(--black)',
-        border:'1px solid ' + (invalid ? 'var(--state-error)' : focus ? 'var(--ring)' : 'var(--border)'),
-        borderRadius:'var(--radius-sm)',outline:'none',
+        fontFamily:'var(--font-sans)',fontSize:'var(--text-control)',color:'var(--foreground)',
+        background:'var(--surface-2)',
+        border:'1px solid ' + (invalid ? 'var(--state-error)' : focus ? 'var(--border-focus)' : 'var(--border-control)'),
+        borderRadius:'var(--radius-sm)',
         transition:'border-color var(--duration-fast) var(--ease-out)',
         ...style,
       }}

package/components/forms/Select.jsx

@@ -11,9 +11,9 @@ export function Select({ options = [], value, onChange, placeholder, style, chil
         onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)}
         style={{
           appearance:'none',width:'100%',height:36,padding:'0 32px 0 12px',
-          fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',color:'var(--foreground)',
-          background:'var(--black)',border:'1px solid ' + (focus ? 'var(--ring)' : 'var(--border)'),
-          borderRadius:'var(--radius-sm)',outline:'none',cursor:'pointer',
+          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)',
           ...style,
         }}

package/components/forms/Slider.jsx

@@ -10,7 +10,7 @@ export function Slider({ min = 0, max = 100, step = 1, value, defaultValue = 0,
       onChange={(e) => { const n = Number(e.target.value); if (value === undefined) setInner(n); onChange && onChange(n) }}
       style={{
         appearance:'none',WebkitAppearance:'none',width:'100%',height:16,background:'transparent',cursor:'pointer',
-        backgroundImage:'linear-gradient(var(--primary),var(--primary)),linear-gradient(var(--neutral-800),var(--neutral-800))',
+        backgroundImage:'linear-gradient(var(--primary),var(--primary)),linear-gradient(var(--glass-strong),var(--glass-strong))',
         backgroundSize: pct + '% 4px, 100% 4px',
         backgroundPosition:'left center, left center',
         backgroundRepeat:'no-repeat',

package/components/forms/Textarea.jsx

@@ -9,9 +9,9 @@ export function Textarea({ rows = 4, style, ...rest }) {
       onBlur={(e)=>{setFocus(false);rest.onBlur&&rest.onBlur(e)}}
       style={{
         width:'100%',padding:'8px 12px',resize:'vertical',
-        fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',lineHeight:'var(--leading-relaxed)',color:'var(--foreground)',
-        background:'var(--black)',border:'1px solid ' + (focus ? 'var(--ring)' : 'var(--border)'),
-        borderRadius:'var(--radius-sm)',outline:'none',
+        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)',
         ...style,
       }}

package/components/navigation/Accordion.jsx

@@ -11,7 +11,7 @@ export function Accordion({ type = 'single', defaultValue = null, style, childre
   const isOpen = (v) => (type === 'multiple' ? open.includes(v) : open === v)
   return (
     <Ctx.Provider value={{ isOpen, toggle }}>
-      <div style={{borderTop:'1px solid var(--border-hairline)',...style}} {...rest}>{children}</div>
+      <div style={{borderTop:'1px solid var(--border)',...style}} {...rest}>{children}</div>
     </Ctx.Provider>
   )
 }
@@ -20,7 +20,7 @@ export function AccordionItem({ value, title, style, children, ...rest }) {
   const { isOpen, toggle } = React.useContext(Ctx)
   const on = isOpen(value)
   return (
-    <div style={{borderBottom:'1px solid var(--border-hairline)',...style}} {...rest}>
+    <div style={{borderBottom:'1px solid var(--border)',...style}} {...rest}>
       <button
         onClick={() => toggle(value)} aria-expanded={on}
         style={{display:'flex',width:'100%',alignItems:'center',justifyContent:'space-between',gap:16,padding:'18px 0',background:'transparent',border:'none',cursor:'pointer',textAlign:'left',fontFamily:'var(--font-sans)',fontSize:'var(--text-base)',fontWeight:'var(--weight-medium)',color:'var(--text-primary)'}}

package/components/navigation/navigation.card.html

@@ -5,7 +5,7 @@
 <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;padding:20px;background:#000;font-family:var(--font-sans)}pre{margin:0;padding:16px;background:var(--card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);font-size:12px;line-height:1.7;color:var(--neutral-300);overflow:auto}</style></head>
+<style>body{margin:0;padding:20px;background:#000;font-family:var(--font-sans)}pre{margin:0;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:12px;line-height:1.7;color:var(--neutral-300);overflow:auto}</style></head>
 <body><div id="root"></div>
 <script type="text/babel">
 const { Tabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem } = window.HanzoDesignSystem_0a9445;

package/components/overlays/Dialog.jsx

@@ -22,7 +22,7 @@ export function DialogContent({ width = 480, style, children, ...rest }) {
   return (
     <div
       role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}
-      style={{width:'100%',maxWidth:width,maxHeight:'85vh',overflowY:'auto',padding:24,display:'flex',flexDirection:'column',gap:16,background:'var(--popover)',color:'var(--popover-foreground)',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-xl)',boxShadow:'var(--shadow-floating)',...style}}
+      style={{width:'100%',maxWidth:width,maxHeight:'85vh',overflowY:'auto',padding:24,display:'flex',flexDirection:'column',gap:16,background:'var(--popover)',color:'var(--popover-foreground)',border:'1px solid var(--border)',borderRadius:'var(--radius-xl)',boxShadow:'var(--shadow-floating)',...style}}
       {...rest}
     >{children}</div>
   )

package/components/overlays/DropdownMenu.jsx

@@ -19,7 +19,7 @@ export function DropdownMenu({ align = 'right', hover = false, trigger, style, c
       <span onClick={() => setOpen((v) => !v)} style={{display:'inline-flex'}}>{trigger}</span>
       {open && (
         <div style={{position:'absolute',top:'100%',[align]:0,paddingTop:12,zIndex:'var(--z-dropdown)',minWidth:208}}>
-          <div style={{display:'flex',flexDirection:'column',padding:8,background:'var(--surface-overlay)',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-xl)',boxShadow:'var(--shadow-floating)',backdropFilter:'blur(16px)',animation:'hanzo-fade-down var(--duration-fast) var(--ease-out)'}}>
+          <div style={{display:'flex',flexDirection:'column',padding:8,background:'var(--surface-overlay)',border:'1px solid var(--border)',borderRadius:'var(--radius-xl)',boxShadow:'var(--shadow-floating)',backdropFilter:'blur(16px)',animation:'hanzo-fade-down var(--duration-fast) var(--ease-out)'}}>
             {children}
           </div>
         </div>
@@ -33,7 +33,7 @@ export function DropdownMenuItem({ desc, style, children, ...rest }) {
   return (
     <a
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
-      style={{display:'block',padding: desc ? '10px 12px' : '8px 12px',borderRadius:'var(--radius-sm)',background: hover ? 'var(--neutral-900)' : 'transparent',cursor:'pointer',textDecoration:'none',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
+      style={{display:'block',padding: desc ? '10px 12px' : '8px 12px',borderRadius:'var(--radius-sm)',background: hover ? 'var(--glass)' : 'transparent',cursor:'pointer',textDecoration:'none',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
       {...rest}
     >
       <span style={{display:'block',fontSize:'var(--text-sm)',fontWeight:'var(--weight-medium)',color:'var(--neutral-100)'}}>{children}</span>
@@ -45,5 +45,5 @@ export function DropdownMenuLabel({ style, children, ...rest }) {
   return <span style={{padding:'6px 12px',fontSize:'var(--text-xs)',fontWeight:'var(--weight-medium)',textTransform:'uppercase',letterSpacing:'var(--tracking-wide)',color:'var(--neutral-500)',...style}} {...rest}>{children}</span>
 }
 export function DropdownMenuSeparator({ style }) {
-  return <span style={{height:1,margin:'6px 4px',background:'var(--border-hairline)',...style}} />
+  return <span style={{height:1,margin:'6px 4px',background:'var(--border)',...style}} />
 }

package/components/overlays/Sheet.jsx

@@ -9,8 +9,8 @@ export function Sheet({ open, onOpenChange, side = 'right', width = 380, childre
   }, [open, onOpenChange])
   if (!open) return null
   const pos = side === 'left'
-    ? { left: 0, top: 0, bottom: 0, width, borderRight: '1px solid var(--border-hairline)' }
-    : { right: 0, top: 0, bottom: 0, width, borderLeft: '1px solid var(--border-hairline)' }
+    ? { left: 0, top: 0, bottom: 0, width, borderRight: '1px solid var(--border)' }
+    : { right: 0, top: 0, bottom: 0, width, borderLeft: '1px solid var(--border)' }
   return (
     <div onClick={() => onOpenChange && onOpenChange(false)} style={{position:'fixed',inset:0,zIndex:'var(--z-modal)',background:'var(--surface-scrim)'}}>
       <div
@@ -21,7 +21,7 @@ export function Sheet({ open, onOpenChange, side = 'right', width = 380, childre
   )
 }
 export function SheetHeader({ style, children, ...rest }) {
-  return <div style={{padding:'20px 24px',borderBottom:'1px solid var(--border-hairline)',display:'flex',flexDirection:'column',gap:4,...style}} {...rest}>{children}</div>
+  return <div style={{padding:'20px 24px',borderBottom:'1px solid var(--border)',display:'flex',flexDirection:'column',gap:4,...style}} {...rest}>{children}</div>
 }
 export function SheetTitle({ style, children, ...rest }) {
   return <h2 style={{fontSize:'var(--text-base)',fontWeight:'var(--weight-semibold)',color:'var(--text-primary)',...style}} {...rest}>{children}</h2>

package/components/overlays/Toaster.jsx

@@ -33,7 +33,7 @@ export function Toaster({ duration = 3500, position = 'bottom-right' }) {
       {items.map((i) => (
         <div key={i.id} style={{
           minWidth:260,maxWidth:380,padding:'12px 14px',display:'flex',alignItems:'flex-start',gap:10,
-          background:'var(--surface-overlay)',border:'1px solid ' + (i.tone === 'error' ? 'var(--state-error)' : 'var(--border-hairline)'),
+          background:'var(--surface-overlay)',border:'1px solid ' + (i.tone === 'error' ? 'var(--state-error)' : 'var(--border)'),
           borderRadius:'var(--radius-lg)',boxShadow:'var(--shadow-floating)',backdropFilter:'blur(16px)',
           fontSize:'var(--text-sm)',color:'var(--neutral-100)',animation:'hanzo-slide-up-fade var(--duration-base) var(--ease-out)',
         }}>

package/dist/tokens.gen.d.ts

@@ -16,37 +16,50 @@ export declare const colors: {
     readonly 'hanzo-black': "#0A0A0B";
     readonly 'hanzo-white': "#FFFFFF";
     readonly 'white-05': "rgb(255 255 255 / .05)";
+    readonly 'white-06': "rgb(255 255 255 / .06)";
+    readonly 'white-08': "rgb(255 255 255 / .08)";
     readonly 'white-10': "rgb(255 255 255 / .10)";
     readonly 'white-15': "rgb(255 255 255 / .15)";
+    readonly 'white-16': "rgb(255 255 255 / .16)";
     readonly 'white-20': "rgb(255 255 255 / .20)";
+    readonly 'white-22': "rgb(255 255 255 / .22)";
     readonly 'white-30': "rgb(255 255 255 / .30)";
     readonly 'white-40': "rgb(255 255 255 / .40)";
+    readonly 'white-55': "rgb(255 255 255 / .55)";
     readonly 'white-60': "rgb(255 255 255 / .60)";
+    readonly 'white-78': "rgb(255 255 255 / .78)";
     readonly 'white-80': "rgb(255 255 255 / .80)";
-    readonly background: "#000000";
-    readonly foreground: "#ededed";
-    readonly card: "#0a0a0a";
-    readonly 'card-foreground': "#f5f5f5";
-    readonly popover: "#0a0a0a";
-    readonly 'popover-foreground': "#f5f5f5";
-    readonly primary: "#ffffff";
-    readonly 'primary-foreground': "#000000";
-    readonly secondary: "#1a1a1a";
-    readonly 'secondary-foreground': "#f5f5f5";
-    readonly muted: "#101010";
-    readonly 'muted-foreground': "#888888";
-    readonly accent: "#1a1a1a";
-    readonly 'accent-foreground': "#f5f5f5";
+    readonly background: "#0a0a0a";
+    readonly foreground: "#fafafa";
+    readonly card: "#0f0f0f";
+    readonly 'card-foreground': "#fafafa";
+    readonly popover: "#0f0f0f";
+    readonly 'popover-foreground': "#fafafa";
+    readonly primary: "#fafafa";
+    readonly 'primary-hover': "#d4d4d4";
+    readonly 'primary-foreground': "#0a0a0a";
+    readonly secondary: "#262626";
+    readonly 'secondary-foreground': "#fafafa";
+    readonly muted: "#171717";
+    readonly 'muted-foreground': "#a3a3a3";
+    readonly accent: "#262626";
+    readonly 'accent-foreground': "#fafafa";
     readonly destructive: "#666666";
-    readonly 'destructive-foreground': "#f5f5f5";
-    readonly border: "#1f1f1f";
-    readonly input: "#1f1f1f";
+    readonly 'destructive-foreground': "#fafafa";
+    readonly border: "var(--white-10)";
+    readonly 'border-strong': "var(--white-16)";
+    readonly 'border-control': "var(--neutral-500)";
+    readonly 'border-focus': "var(--neutral-400)";
+    readonly input: "var(--border-control)";
     readonly ring: "var(--neutral-500)";
     readonly brand: "#e4e4e7";
     readonly 'brand-foreground': "#09090b";
     readonly 'brand-muted': "#a3a3a3";
     readonly black: "#000000";
-    readonly white: "#f5f5f5";
+    readonly white: "#fafafa";
+    readonly selection: "var(--white-20)";
+    readonly glass: "var(--white-05)";
+    readonly 'glass-strong': "var(--white-08)";
     readonly 'surface-page': "var(--background)";
     readonly 'surface-card': "rgb(23 23 23 / .5)";
     readonly 'surface-card-emphasis': "rgb(23 23 23 / .8)";
@@ -54,16 +67,13 @@ export declare const colors: {
     readonly 'surface-overlay': "rgb(10 10 10 / .95)";
     readonly 'surface-header': "rgb(0 0 0 / .7)";
     readonly 'surface-scrim': "rgb(0 0 0 / .8)";
-    readonly 'border-hairline': "var(--neutral-800)";
-    readonly 'border-card': "var(--white-10)";
-    readonly 'border-strong': "var(--neutral-500)";
     readonly 'surface-0': "var(--background)";
     readonly 'surface-1': "var(--card)";
     readonly 'surface-2': "var(--muted)";
     readonly 'surface-3': "var(--secondary)";
-    readonly 'text-primary': "var(--pure-white)";
-    readonly 'text-secondary': "var(--white-80)";
-    readonly 'text-tertiary': "var(--white-60)";
+    readonly 'text-primary': "#fafafa";
+    readonly 'text-secondary': "var(--white-78)";
+    readonly 'text-tertiary': "var(--white-55)";
     readonly 'text-helper': "var(--muted-foreground)";
     readonly 'text-disabled': "var(--white-30)";
     readonly 'state-error': "#ef4444";
@@ -116,6 +126,7 @@ export declare const typography: {
     readonly 'font-size-7xl': "var(--text-7xl)";
     readonly 'font-size-8xl': "var(--text-8xl)";
     readonly 'font-size-9xl': "var(--text-9xl)";
+    readonly 'text-control': "var(--text-sm)";
     readonly 'weight-normal': "400";
     readonly 'weight-medium': "500";
     readonly 'weight-semibold': "600";
@@ -169,14 +180,19 @@ export declare const spacing: {
     readonly 'container-max': "80rem";
     readonly 'container-prose': "48rem";
     readonly 'container-wide': "72rem";
-    readonly gutter: "1rem";
+    readonly gutter: "max(1rem,var(--safe-left),var(--safe-right))";
     readonly 'gutter-sm': "1.5rem";
     readonly 'gutter-lg': "2rem";
-    readonly 'section-y': "4rem";
-    readonly 'section-y-lg': "6rem";
-    readonly 'hero-y': "5rem";
-    readonly 'hero-y-lg': "8rem";
-    readonly 'header-height': "4rem";
+    readonly 'section-y': "2.5rem";
+    readonly 'section-y-lg': "3.5rem";
+    readonly 'hero-y': "3rem";
+    readonly 'hero-y-lg': "4.5rem";
+    readonly 'header-height': "3.5rem";
+    readonly 'tap-target': "44px";
+    readonly 'safe-top': "env(safe-area-inset-top,0px)";
+    readonly 'safe-right': "env(safe-area-inset-right,0px)";
+    readonly 'safe-bottom': "env(safe-area-inset-bottom,0px)";
+    readonly 'safe-left': "env(safe-area-inset-left,0px)";
 };
 /** grid tokens (from tokens/grid.css). Values are raw CSS. */
 export declare const grid: {
@@ -277,37 +293,50 @@ export declare const cssVars: {
     readonly '--hanzo-black': "#0A0A0B";
     readonly '--hanzo-white': "#FFFFFF";
     readonly '--white-05': "rgb(255 255 255 / .05)";
+    readonly '--white-06': "rgb(255 255 255 / .06)";
+    readonly '--white-08': "rgb(255 255 255 / .08)";
     readonly '--white-10': "rgb(255 255 255 / .10)";
     readonly '--white-15': "rgb(255 255 255 / .15)";
+    readonly '--white-16': "rgb(255 255 255 / .16)";
     readonly '--white-20': "rgb(255 255 255 / .20)";
+    readonly '--white-22': "rgb(255 255 255 / .22)";
     readonly '--white-30': "rgb(255 255 255 / .30)";
     readonly '--white-40': "rgb(255 255 255 / .40)";
+    readonly '--white-55': "rgb(255 255 255 / .55)";
     readonly '--white-60': "rgb(255 255 255 / .60)";
+    readonly '--white-78': "rgb(255 255 255 / .78)";
     readonly '--white-80': "rgb(255 255 255 / .80)";
-    readonly '--background': "#000000";
-    readonly '--foreground': "#ededed";
-    readonly '--card': "#0a0a0a";
-    readonly '--card-foreground': "#f5f5f5";
-    readonly '--popover': "#0a0a0a";
-    readonly '--popover-foreground': "#f5f5f5";
-    readonly '--primary': "#ffffff";
-    readonly '--primary-foreground': "#000000";
-    readonly '--secondary': "#1a1a1a";
-    readonly '--secondary-foreground': "#f5f5f5";
-    readonly '--muted': "#101010";
-    readonly '--muted-foreground': "#888888";
-    readonly '--accent': "#1a1a1a";
-    readonly '--accent-foreground': "#f5f5f5";
+    readonly '--background': "#0a0a0a";
+    readonly '--foreground': "#fafafa";
+    readonly '--card': "#0f0f0f";
+    readonly '--card-foreground': "#fafafa";
+    readonly '--popover': "#0f0f0f";
+    readonly '--popover-foreground': "#fafafa";
+    readonly '--primary': "#fafafa";
+    readonly '--primary-hover': "#d4d4d4";
+    readonly '--primary-foreground': "#0a0a0a";
+    readonly '--secondary': "#262626";
+    readonly '--secondary-foreground': "#fafafa";
+    readonly '--muted': "#171717";
+    readonly '--muted-foreground': "#a3a3a3";
+    readonly '--accent': "#262626";
+    readonly '--accent-foreground': "#fafafa";
     readonly '--destructive': "#666666";
-    readonly '--destructive-foreground': "#f5f5f5";
-    readonly '--border': "#1f1f1f";
-    readonly '--input': "#1f1f1f";
+    readonly '--destructive-foreground': "#fafafa";
+    readonly '--border': "var(--white-10)";
+    readonly '--border-strong': "var(--white-16)";
+    readonly '--border-control': "var(--neutral-500)";
+    readonly '--border-focus': "var(--neutral-400)";
+    readonly '--input': "var(--border-control)";
     readonly '--ring': "var(--neutral-500)";
     readonly '--brand': "#e4e4e7";
     readonly '--brand-foreground': "#09090b";
     readonly '--brand-muted': "#a3a3a3";
     readonly '--black': "#000000";
-    readonly '--white': "#f5f5f5";
+    readonly '--white': "#fafafa";
+    readonly '--selection': "var(--white-20)";
+    readonly '--glass': "var(--white-05)";
+    readonly '--glass-strong': "var(--white-08)";
     readonly '--surface-page': "var(--background)";
     readonly '--surface-card': "rgb(23 23 23 / .5)";
     readonly '--surface-card-emphasis': "rgb(23 23 23 / .8)";
@@ -315,16 +344,13 @@ export declare const cssVars: {
     readonly '--surface-overlay': "rgb(10 10 10 / .95)";
     readonly '--surface-header': "rgb(0 0 0 / .7)";
     readonly '--surface-scrim': "rgb(0 0 0 / .8)";
-    readonly '--border-hairline': "var(--neutral-800)";
-    readonly '--border-card': "var(--white-10)";
-    readonly '--border-strong': "var(--neutral-500)";
     readonly '--surface-0': "var(--background)";
     readonly '--surface-1': "var(--card)";
     readonly '--surface-2': "var(--muted)";
     readonly '--surface-3': "var(--secondary)";
-    readonly '--text-primary': "var(--pure-white)";
-    readonly '--text-secondary': "var(--white-80)";
-    readonly '--text-tertiary': "var(--white-60)";
+    readonly '--text-primary': "#fafafa";
+    readonly '--text-secondary': "var(--white-78)";
+    readonly '--text-tertiary': "var(--white-55)";
     readonly '--text-helper': "var(--muted-foreground)";
     readonly '--text-disabled': "var(--white-30)";
     readonly '--state-error': "#ef4444";
@@ -374,6 +400,7 @@ export declare const cssVars: {
     readonly '--font-size-7xl': "var(--text-7xl)";
     readonly '--font-size-8xl': "var(--text-8xl)";
     readonly '--font-size-9xl': "var(--text-9xl)";
+    readonly '--text-control': "var(--text-sm)";
     readonly '--weight-normal': "400";
     readonly '--weight-medium': "500";
     readonly '--weight-semibold': "600";
@@ -424,14 +451,19 @@ export declare const cssVars: {
     readonly '--container-max': "80rem";
     readonly '--container-prose': "48rem";
     readonly '--container-wide': "72rem";
-    readonly '--gutter': "1rem";
+    readonly '--gutter': "max(1rem,var(--safe-left),var(--safe-right))";
     readonly '--gutter-sm': "1.5rem";
     readonly '--gutter-lg': "2rem";
-    readonly '--section-y': "4rem";
-    readonly '--section-y-lg': "6rem";
-    readonly '--hero-y': "5rem";
-    readonly '--hero-y-lg': "8rem";
-    readonly '--header-height': "4rem";
+    readonly '--section-y': "2.5rem";
+    readonly '--section-y-lg': "3.5rem";
+    readonly '--hero-y': "3rem";
+    readonly '--hero-y-lg': "4.5rem";
+    readonly '--header-height': "3.5rem";
+    readonly '--tap-target': "44px";
+    readonly '--safe-top': "env(safe-area-inset-top,0px)";
+    readonly '--safe-right': "env(safe-area-inset-right,0px)";
+    readonly '--safe-bottom': "env(safe-area-inset-bottom,0px)";
+    readonly '--safe-left': "env(safe-area-inset-left,0px)";
     readonly '--grid-columns': "12";
     readonly '--grid-gap': "var(--space-6)";
     readonly '--grid-gap-tight': "var(--space-4)";

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,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"}
+{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Db,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CV,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyPV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}