@hanzo/design 0.4.1 → 0.4.3

package/components/core/Button.jsx

@@ -3,7 +3,8 @@ import React from 'react'
 const V = {
   primary:{background:'var(--primary)',color:'var(--primary-foreground)',border:'1px solid transparent'},
   secondary:{background:'var(--secondary)',color:'var(--secondary-foreground)',border:'1px solid transparent'},
-  outline:{background:'transparent',color:'var(--text-primary)',border:'1px solid var(--border)'},
+  // --border-control, not --border: an outline button's edge IS the button.
+  outline:{background:'transparent',color:'var(--text-primary)',border:'1px solid var(--border-control)'},
   ghost:{background:'transparent',color:'var(--text-secondary)',border:'1px solid transparent'},
   link:{background:'transparent',color:'var(--text-primary)',border:'1px solid transparent',textDecoration:'underline',textUnderlineOffset:4,padding:0,height:'auto'},
   destructive:{background:'var(--destructive)',color:'var(--destructive-foreground)',border:'1px solid transparent'},
@@ -14,17 +15,34 @@ const SZ = {
   lg:{height:44,padding:'0 24px',fontSize:'var(--text-sm)'},
   icon:{height:36,width:36,padding:0},
 }
-const HOVER = { primary:'primary', secondary:'primary', outline:'accent', ghost:'accent', destructive:'destructive', link:'link' }
+// Hover, per variant. A FILLED button does not brighten on hover — its fill is
+// already the top of the ink ramp — so it steps DOWN that ramp and
+// gains a bloom instead, which is the reference's own move
+// (.primary-btn:hover → --accent-hover + a white glow). This used to be
+// `opacity: 0.9`, which faded the button toward the page: the one thing a
+// hovered control must never do is look more disabled than it did at rest.
+// An UNFILLED button has room to gain, so it takes a surface and an edge.
+const HOVER = {
+  primary:    { background:'var(--primary-hover)', boxShadow:'var(--bloom)' },
+  secondary:  { background:'var(--secondary-hover)', boxShadow:'var(--edge-highlight)' },
+  // An unfilled button's hover is the SURFACE arriving, not the edge moving:
+  // --border-control (.15) to --border-strong (.16) is a one-percent step and
+  // reads as nothing, so the fill has to carry it. --glass-strong, not --glass;
+  // at .05 the fill was invisible too and the variant had no hover at all.
+  outline:    { background:'var(--glass-strong)', borderColor:'var(--border-strong)', color:'var(--text-primary)' },
+  ghost:      { background:'var(--glass-strong)', color:'var(--text-primary)' },
+  destructive:{ background:'var(--destructive-hover)', boxShadow:'var(--bloom)' },
+  link:       { textDecoration:'underline' },
+}
+// The filled variants catch the light along their top edge, the same way every
+// raised surface in this system does.
+const LIT = new Set(['primary', 'destructive'])
 
 export function Button({ variant = 'primary', size = 'default', pill = false, disabled, style, children, ...rest }) {
   const [hover, setHover] = React.useState(false)
   const v = V[variant] || V.primary
   const s = SZ[size] || SZ.default
-  const h = HOVER[variant]
-  const hoverStyle = !hover || disabled ? null
-    : h === 'primary' || h === 'destructive' ? { opacity: 0.9 }
-    : h === 'accent' ? { background: 'var(--accent)', color: 'var(--text-primary)' }
-    : { textDecoration: 'underline' }
+  const hoverStyle = !hover || disabled ? null : HOVER[variant]
   return (
     <button
       disabled={disabled}
@@ -33,10 +51,18 @@ export function Button({ variant = 'primary', size = 'default', pill = false, di
       style={{
         display:'inline-flex',alignItems:'center',justifyContent:'center',gap:8,whiteSpace:'nowrap',
         fontFamily:'var(--font-sans)',fontWeight:'var(--weight-medium)',lineHeight:1,
-        borderRadius: pill ? 'var(--radius-full)' : 'var(--radius-sm)',
+        // --radius-md (8px), not --radius-sm (6px): on a 36px control that one
+        // step is the difference between boxy and considered. --radius-sm keeps
+        // its job on genuinely small parts (badges, chips, menu rows).
+        borderRadius: pill ? 'var(--radius-full)' : 'var(--radius-md)',
+        letterSpacing:'var(--tracking-tight)',
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.5 : 1,
-        transition:'background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out)',
+        boxShadow: LIT.has(variant) ? 'var(--edge-highlight)' : 'none',
+        // `transform` is in the list because tokens/base.css scales this button
+        // to .98 while it is held down, and a transform with no transition
+        // snaps rather than presses.
+        transition:'background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out)',
         ...v, ...s, ...hoverStyle, ...style,
       }}
       {...rest}

package/components/core/Card.jsx

@@ -7,8 +7,9 @@ const FILL = {
   plain:'transparent',
 }
 
-export function Card({ variant = 'default', sheen = false, interactive = false, style, children, ...rest }) {
+export function Card({ variant = 'default', sheen = false, interactive = false, selected = false, style, children, ...rest }) {
   const [hover, setHover] = React.useState(false)
+  const edge = selected ? 'var(--border-selected)' : hover ? 'var(--border-strong)' : 'var(--border)'
   return (
     <div
       onMouseEnter={interactive ? () => setHover(true) : undefined}
@@ -16,13 +17,24 @@ 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)'),
+        border:'1px solid ' + edge,
         background:FILL[variant] || FILL.default,
-        transition:'border-color var(--duration-fast) var(--ease-out)',
+        // The card catches the light along its top edge at rest, and picks up a
+        // real drop only when it lifts. A shadow on a resting card is noise; a
+        // card with NO inset highlight is a coloured rectangle rather than a
+        // surface, which is why the highlight is unconditional and the drop is
+        // not. See tokens/elevation.css for why this is the part that matters
+        // on a near-black ground.
+        boxShadow: hover ? 'var(--edge-highlight), var(--shadow-lg)' : 'var(--edge-highlight)',
+        transform: hover ? 'translateY(-1px)' : 'none',
+        transition:'border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out)',
         ...style,
       }}
       {...rest}
     >
+      {/* The top hairline: brightest at the centre, dissolved before either
+          corner, so the edge never terminates in a hard stop. */}
+      <div aria-hidden style={{position:'absolute',top:0,left:0,right:0,height:1,pointerEvents:'none',background:'var(--sheen-edge)'}} />
       {sheen && <div aria-hidden style={{position:'absolute',inset:0,pointerEvents:'none',background:'var(--sheen-card)',opacity:0.7}} />}
       {children}
     </div>
@@ -33,10 +45,13 @@ export function CardHeader({ style, children, ...rest }) {
   return <div style={{position:'relative',padding:'24px 24px 0',display:'flex',flexDirection:'column',gap:6,...style}} {...rest}>{children}</div>
 }
 export function CardTitle({ style, children, ...rest }) {
-  return <h3 style={{fontSize:'var(--text-base)',fontWeight:'var(--weight-semibold)',color:'var(--text-primary)',...style}} {...rest}>{children}</h3>
+  // --text-lg over --text-base: at 14px a title sat one point above its own
+  // 13px description, which is not a hierarchy, it is a rounding error. The
+  // step up plus the tighter tracking is what makes a card scannable.
+  return <h3 style={{fontSize:'var(--text-lg)',fontWeight:'var(--weight-semibold)',letterSpacing:'var(--tracking-tight)',color:'var(--text-primary)',...style}} {...rest}>{children}</h3>
 }
 export function CardDescription({ style, children, ...rest }) {
-  return <p style={{fontSize:'var(--text-sm)',lineHeight:'var(--leading-relaxed)',color:'var(--text-helper)',...style}} {...rest}>{children}</p>
+  return <p style={{fontSize:'var(--text-sm)',lineHeight:'var(--leading-relaxed)',color:'var(--text-tertiary)',...style}} {...rest}>{children}</p>
 }
 export function CardContent({ style, children, ...rest }) {
   return <div style={{position:'relative',padding:24,...style}} {...rest}>{children}</div>

package/components/forms/Input.jsx

@@ -2,17 +2,27 @@ import React from 'react'
 
 export function Input({ invalid = false, style, ...rest }) {
   const [focus, setFocus] = React.useState(false)
+  const [hover, setHover] = React.useState(false)
   return (
     <input
       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%',height:36,padding:'0 12px',
         fontFamily:'var(--font-sans)',fontSize:'var(--text-control)',color:'var(--foreground)',
-        background:'var(--surface-2)',
+        // A hovered field lifts its SURFACE. Moving its edge from .15 to .16
+        // is a state you cannot see, and a state you cannot see is dead code.
+        background: hover && !focus ? 'var(--surface-3)' : '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)',
+        borderRadius:'var(--radius-md)',
+        outline:'none',
+        // Focus is the edge brightening plus a soft halo just outside it — the
+        // reference's .composer-box:focus-within, and the same recipe
+        // tokens/base.css gives a bare <input>. Not a second hard ring.
+        boxShadow: focus ? 'var(--ring-focus)' : 'none',
+        transition:'border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out)',
         ...style,
       }}
       {...rest}

package/components/navigation/Tabs.jsx

@@ -15,24 +15,35 @@ export function Tabs({ defaultValue, value, onValueChange, style, children, ...r
 
 export function TabsList({ style, children, ...rest }) {
   return (
-    <div role="tablist" style={{display:'inline-flex',alignItems:'center',gap:4,padding:4,borderRadius:'var(--radius-sm)',background:'var(--muted)',border:'1px solid var(--border)',...style}} {...rest}>{children}</div>
+    // alignSelf: a segmented control is as wide as its segments. Without it the
+    // list is a flex ITEM of the Tabs column and stretches to the full row,
+    // which turns a compact control into a full-width bar.
+    <div role="tablist" style={{display:'inline-flex',alignSelf:'flex-start',maxWidth:'100%',overflowX:'auto',alignItems:'center',gap:2,padding:3,borderRadius:'var(--radius-lg)',background:'var(--surface-2)',border:'1px solid var(--border)',...style}} {...rest}>{children}</div>
   )
 }
 
 export function TabsTrigger({ value, style, children, ...rest }) {
   const { value: active, setValue } = React.useContext(Ctx)
+  const [hover, setHover] = React.useState(false)
   const on = active === value
   return (
     <button
       role="tab" aria-selected={on} onClick={() => setValue(value)}
+      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{
-        display:'inline-flex',alignItems:'center',gap:8,height:30,padding:'0 12px',
+        display:'inline-flex',alignItems:'center',gap:8,height:30,padding:'0 14px',
         fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',fontWeight:'var(--weight-medium)',
-        color: on ? 'var(--text-primary)' : 'var(--text-helper)',
-        background: on ? 'var(--secondary)' : 'transparent',
-        border:'1px solid ' + (on ? 'var(--border)' : 'transparent'),
-        borderRadius:'calc(var(--radius-sm) - 2px)',cursor:'pointer',whiteSpace:'nowrap',
-        transition:'color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out)',
+        letterSpacing:'var(--tracking-tight)',
+        color: on ? 'var(--text-primary)' : hover ? 'var(--text-secondary)' : 'var(--text-helper)',
+        // The selected tab is a surface that has RISEN out of the track: it
+        // lifts a rung, catches the light on its top edge and casts a small
+        // drop. A selected tab that only changes colour reads as a link that
+        // happens to be a different grey.
+        background: on ? 'var(--surface-3)' : 'transparent',
+        border:'1px solid ' + (on ? 'var(--border-strong)' : 'transparent'),
+        boxShadow: on ? 'var(--edge-highlight), var(--shadow-sm)' : 'none',
+        borderRadius:'calc(var(--radius-lg) - 3px)',cursor:'pointer',whiteSpace:'nowrap',
+        transition:'color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out)',
         ...style,
       }}
       {...rest}

package/components/overlays/Dialog.jsx

@@ -11,7 +11,7 @@ export function Dialog({ open, onOpenChange, children }) {
   return (
     <div
       onClick={() => onOpenChange && onOpenChange(false)}
-      style={{position:'fixed',inset:0,zIndex:'var(--z-modal)',display:'flex',alignItems:'center',justifyContent:'center',padding:24,background:'var(--surface-scrim)',backdropFilter:'blur(4px)',animation:'hanzo-fade-up var(--duration-fast) var(--ease-out)'}}
+      style={{position:'fixed',inset:0,zIndex:'var(--z-modal)',display:'flex',alignItems:'center',justifyContent:'center',padding:24,background:'var(--surface-scrim)',backdropFilter:'blur(8px) saturate(140%)',animation:'hanzo-fade-up var(--duration-fast) var(--ease-out)'}}
     >
       {children}
     </div>
@@ -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)',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-strong)',borderRadius:'var(--radius-xl)',boxShadow:'var(--edge-highlight), var(--shadow-floating)',animation:'hanzo-zoom-in var(--duration-base) var(--ease-emphasis)',...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)',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:6,background:'var(--surface-overlay)',border:'1px solid var(--border-strong)',borderRadius:'var(--radius-lg)',boxShadow:'var(--edge-highlight), var(--shadow-floating)',backdropFilter:'blur(20px) saturate(180%)',animation:'hanzo-zoom-in var(--duration-fast) var(--ease-emphasis)'}}>
             {children}
           </div>
         </div>
@@ -33,16 +33,20 @@ 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(--glass)' : '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-strong)' : '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>
-      {desc && <span style={{display:'block',marginTop:2,fontSize:'var(--text-xs)',color:'var(--neutral-500)'}}>{desc}</span>}
+      {/* --text-primary / --text-tertiary, not --neutral-100 / --neutral-500.
+          The neutral ladder is a PALETTE: it does not invert, so a menu item
+          painted from it rendered #f5f5f5 text on the light theme's #ffffff
+          popover — the item did not change colour, it stopped being legible. */}
+      <span style={{display:'block',fontSize:'var(--text-sm)',fontWeight:'var(--weight-medium)',color:'var(--text-primary)'}}>{children}</span>
+      {desc && <span style={{display:'block',marginTop:2,fontSize:'var(--text-xs)',lineHeight:'var(--leading-normal)',color:'var(--text-tertiary)'}}>{desc}</span>}
     </a>
   )
 }
 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>
+  return <span style={{padding:'6px 12px',fontSize:'var(--text-xs)',fontWeight:'var(--weight-semibold)',textTransform:'uppercase',letterSpacing:'var(--tracking-widest)',color:'var(--text-tertiary)',...style}} {...rest}>{children}</span>
 }
 export function DropdownMenuSeparator({ style }) {
   return <span style={{height:1,margin:'6px 4px',background:'var(--border)',...style}} />

package/dist/tokens.gen.d.ts

@@ -36,22 +36,26 @@ export declare const colors: {
     readonly popover: "#0f0f0f";
     readonly 'popover-foreground': "#fafafa";
     readonly primary: "#fafafa";
-    readonly 'primary-hover': "#d4d4d4";
+    readonly 'primary-hover': "#e5e5e5";
     readonly 'primary-foreground': "#0a0a0a";
     readonly secondary: "#262626";
+    readonly 'secondary-hover': "#333333";
     readonly 'secondary-foreground': "#fafafa";
     readonly muted: "#171717";
     readonly 'muted-foreground': "#a3a3a3";
     readonly accent: "#262626";
     readonly 'accent-foreground': "#fafafa";
-    readonly destructive: "#666666";
+    readonly destructive: "var(--state-error)";
+    readonly 'destructive-hover': "#dc2626";
     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 'border-control': "var(--white-15)";
+    readonly 'border-focus': "var(--white-22)";
+    readonly 'border-selected': "var(--white-30)";
     readonly input: "var(--border-control)";
-    readonly ring: "var(--neutral-500)";
+    readonly ring: "var(--white-40)";
+    readonly 'ring-halo': "var(--white-10)";
     readonly brand: "#e4e4e7";
     readonly 'brand-foreground': "#09090b";
     readonly 'brand-muted': "#a3a3a3";
@@ -61,10 +65,10 @@ export declare const colors: {
     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)";
-    readonly 'surface-card-quiet': "rgb(23 23 23 / .4)";
-    readonly 'surface-overlay': "rgb(10 10 10 / .95)";
+    readonly 'surface-card': "rgb(38 38 38 / .5)";
+    readonly 'surface-card-emphasis': "rgb(38 38 38 / .75)";
+    readonly 'surface-card-quiet': "rgb(38 38 38 / .35)";
+    readonly 'surface-overlay': "rgb(23 23 23 / .92)";
     readonly 'surface-header': "rgb(0 0 0 / .7)";
     readonly 'surface-scrim': "rgb(0 0 0 / .8)";
     readonly 'surface-0': "var(--background)";
@@ -222,9 +226,11 @@ export declare const radius: {
 /** elevation tokens (from tokens/elevation.css). Values are raw CSS. */
 export declare const elevation: {
     readonly 'shadow-none': "none";
-    readonly 'shadow-floating': "0 25px 50px -12px rgb(0 0 0 / .25)";
+    readonly 'shadow-floating': "0 24px 60px -16px rgb(0 0 0 / .75)";
     readonly 'shadow-inset-hairline': "inset 0 0 0 1px var(--white-10)";
-    readonly 'ring-focus': "0 0 0 2px var(--ring)";
+    readonly 'edge-highlight': "inset 0 1px 0 0 rgb(255 255 255 / .10)";
+    readonly bloom: "0 0 24px -2px rgb(255 255 255 / .28)";
+    readonly 'ring-focus': "0 0 0 3px var(--ring-halo)";
     readonly 'shadow-sm': "0 1px 2px 0 rgb(0 0 0 / .40)";
     readonly shadow: "0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)";
     readonly 'shadow-md': "0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)";
@@ -234,6 +240,7 @@ export declare const elevation: {
     readonly 'glow-hero': "radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)";
     readonly 'glow-hero-blur': "120px";
     readonly 'sheen-card': "radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)";
+    readonly 'sheen-edge': "linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)";
     readonly 'gradient-chrome': "linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))";
     readonly 'gradient-chrome-2': "linear-gradient(to right,#ffffff,var(--neutral-500))";
     readonly 'gradient-protect': "linear-gradient(to bottom,var(--white-10),transparent)";
@@ -245,8 +252,10 @@ export declare const motion: {
     readonly 'duration-slow': "400ms";
     readonly 'duration-slower': "500ms";
     readonly 'duration-glow': "9s";
+    readonly 'duration-press': "90ms";
     readonly 'ease-out': "cubic-bezier(0,0,0.2,1)";
     readonly 'ease-in-out': "cubic-bezier(0.4,0,0.2,1)";
+    readonly 'ease-emphasis': "cubic-bezier(0.16,1,0.3,1)";
     readonly stagger: "60ms";
     readonly 'entry-rise': "16px";
     readonly 'entry-rise-lg': "24px";
@@ -313,22 +322,26 @@ export declare const cssVars: {
     readonly '--popover': "#0f0f0f";
     readonly '--popover-foreground': "#fafafa";
     readonly '--primary': "#fafafa";
-    readonly '--primary-hover': "#d4d4d4";
+    readonly '--primary-hover': "#e5e5e5";
     readonly '--primary-foreground': "#0a0a0a";
     readonly '--secondary': "#262626";
+    readonly '--secondary-hover': "#333333";
     readonly '--secondary-foreground': "#fafafa";
     readonly '--muted': "#171717";
     readonly '--muted-foreground': "#a3a3a3";
     readonly '--accent': "#262626";
     readonly '--accent-foreground': "#fafafa";
-    readonly '--destructive': "#666666";
+    readonly '--destructive': "var(--state-error)";
+    readonly '--destructive-hover': "#dc2626";
     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 '--border-control': "var(--white-15)";
+    readonly '--border-focus': "var(--white-22)";
+    readonly '--border-selected': "var(--white-30)";
     readonly '--input': "var(--border-control)";
-    readonly '--ring': "var(--neutral-500)";
+    readonly '--ring': "var(--white-40)";
+    readonly '--ring-halo': "var(--white-10)";
     readonly '--brand': "#e4e4e7";
     readonly '--brand-foreground': "#09090b";
     readonly '--brand-muted': "#a3a3a3";
@@ -338,10 +351,10 @@ export declare const cssVars: {
     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)";
-    readonly '--surface-card-quiet': "rgb(23 23 23 / .4)";
-    readonly '--surface-overlay': "rgb(10 10 10 / .95)";
+    readonly '--surface-card': "rgb(38 38 38 / .5)";
+    readonly '--surface-card-emphasis': "rgb(38 38 38 / .75)";
+    readonly '--surface-card-quiet': "rgb(38 38 38 / .35)";
+    readonly '--surface-overlay': "rgb(23 23 23 / .92)";
     readonly '--surface-header': "rgb(0 0 0 / .7)";
     readonly '--surface-scrim': "rgb(0 0 0 / .8)";
     readonly '--surface-0': "var(--background)";
@@ -484,9 +497,11 @@ export declare const cssVars: {
     readonly '--radius-composer': "28px";
     readonly '--radius-full': "9999px";
     readonly '--shadow-none': "none";
-    readonly '--shadow-floating': "0 25px 50px -12px rgb(0 0 0 / .25)";
+    readonly '--shadow-floating': "0 24px 60px -16px rgb(0 0 0 / .75)";
     readonly '--shadow-inset-hairline': "inset 0 0 0 1px var(--white-10)";
-    readonly '--ring-focus': "0 0 0 2px var(--ring)";
+    readonly '--edge-highlight': "inset 0 1px 0 0 rgb(255 255 255 / .10)";
+    readonly '--bloom': "0 0 24px -2px rgb(255 255 255 / .28)";
+    readonly '--ring-focus': "0 0 0 3px var(--ring-halo)";
     readonly '--shadow-sm': "0 1px 2px 0 rgb(0 0 0 / .40)";
     readonly '--shadow': "0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)";
     readonly '--shadow-md': "0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)";
@@ -496,6 +511,7 @@ export declare const cssVars: {
     readonly '--glow-hero': "radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)";
     readonly '--glow-hero-blur': "120px";
     readonly '--sheen-card': "radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)";
+    readonly '--sheen-edge': "linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)";
     readonly '--gradient-chrome': "linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))";
     readonly '--gradient-chrome-2': "linear-gradient(to right,#ffffff,var(--neutral-500))";
     readonly '--gradient-protect': "linear-gradient(to bottom,var(--white-10),transparent)";
@@ -504,8 +520,10 @@ export declare const cssVars: {
     readonly '--duration-slow': "400ms";
     readonly '--duration-slower': "500ms";
     readonly '--duration-glow': "9s";
+    readonly '--duration-press': "90ms";
     readonly '--ease-out': "cubic-bezier(0,0,0.2,1)";
     readonly '--ease-in-out': "cubic-bezier(0.4,0,0.2,1)";
+    readonly '--ease-emphasis': "cubic-bezier(0.16,1,0.3,1)";
     readonly '--stagger': "60ms";
     readonly '--entry-rise': "16px";
     readonly '--entry-rise-lg': "24px";

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFT,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;;;;;;;;;;;;;;;;;;;;CAoBZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkQV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}

package/dist/tokens.gen.js

@@ -39,22 +39,26 @@ export const colors = {
     'popover': '#0f0f0f',
     'popover-foreground': '#fafafa',
     'primary': '#fafafa',
-    'primary-hover': '#d4d4d4',
+    'primary-hover': '#e5e5e5',
     'primary-foreground': '#0a0a0a',
     'secondary': '#262626',
+    'secondary-hover': '#333333',
     'secondary-foreground': '#fafafa',
     'muted': '#171717',
     'muted-foreground': '#a3a3a3',
     'accent': '#262626',
     'accent-foreground': '#fafafa',
-    'destructive': '#666666',
+    'destructive': 'var(--state-error)',
+    'destructive-hover': '#dc2626',
     'destructive-foreground': '#fafafa',
     'border': 'var(--white-10)',
     'border-strong': 'var(--white-16)',
-    'border-control': 'var(--neutral-500)',
-    'border-focus': 'var(--neutral-400)',
+    'border-control': 'var(--white-15)',
+    'border-focus': 'var(--white-22)',
+    'border-selected': 'var(--white-30)',
     'input': 'var(--border-control)',
-    'ring': 'var(--neutral-500)',
+    'ring': 'var(--white-40)',
+    'ring-halo': 'var(--white-10)',
     'brand': '#e4e4e7',
     'brand-foreground': '#09090b',
     'brand-muted': '#a3a3a3',
@@ -64,10 +68,10 @@ export const colors = {
     'glass': 'var(--white-05)',
     'glass-strong': 'var(--white-08)',
     'surface-page': 'var(--background)',
-    'surface-card': 'rgb(23 23 23 / .5)',
-    'surface-card-emphasis': 'rgb(23 23 23 / .8)',
-    'surface-card-quiet': 'rgb(23 23 23 / .4)',
-    'surface-overlay': 'rgb(10 10 10 / .95)',
+    'surface-card': 'rgb(38 38 38 / .5)',
+    'surface-card-emphasis': 'rgb(38 38 38 / .75)',
+    'surface-card-quiet': 'rgb(38 38 38 / .35)',
+    'surface-overlay': 'rgb(23 23 23 / .92)',
     'surface-header': 'rgb(0 0 0 / .7)',
     'surface-scrim': 'rgb(0 0 0 / .8)',
     'surface-0': 'var(--background)',
@@ -225,9 +229,11 @@ export const radius = {
 /** elevation tokens (from tokens/elevation.css). Values are raw CSS. */
 export const elevation = {
     'shadow-none': 'none',
-    'shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
+    'shadow-floating': '0 24px 60px -16px rgb(0 0 0 / .75)',
     'shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
-    'ring-focus': '0 0 0 2px var(--ring)',
+    'edge-highlight': 'inset 0 1px 0 0 rgb(255 255 255 / .10)',
+    'bloom': '0 0 24px -2px rgb(255 255 255 / .28)',
+    'ring-focus': '0 0 0 3px var(--ring-halo)',
     '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)',
@@ -237,6 +243,7 @@ export const elevation = {
     'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
     'glow-hero-blur': '120px',
     'sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+    'sheen-edge': 'linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)',
     'gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
     'gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
     'gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
@@ -248,8 +255,10 @@ export const motion = {
     'duration-slow': '400ms',
     'duration-slower': '500ms',
     'duration-glow': '9s',
+    'duration-press': '90ms',
     'ease-out': 'cubic-bezier(0,0,0.2,1)',
     'ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+    'ease-emphasis': 'cubic-bezier(0.16,1,0.3,1)',
     'stagger': '60ms',
     'entry-rise': '16px',
     'entry-rise-lg': '24px',
@@ -316,22 +325,26 @@ export const cssVars = {
     '--popover': '#0f0f0f',
     '--popover-foreground': '#fafafa',
     '--primary': '#fafafa',
-    '--primary-hover': '#d4d4d4',
+    '--primary-hover': '#e5e5e5',
     '--primary-foreground': '#0a0a0a',
     '--secondary': '#262626',
+    '--secondary-hover': '#333333',
     '--secondary-foreground': '#fafafa',
     '--muted': '#171717',
     '--muted-foreground': '#a3a3a3',
     '--accent': '#262626',
     '--accent-foreground': '#fafafa',
-    '--destructive': '#666666',
+    '--destructive': 'var(--state-error)',
+    '--destructive-hover': '#dc2626',
     '--destructive-foreground': '#fafafa',
     '--border': 'var(--white-10)',
     '--border-strong': 'var(--white-16)',
-    '--border-control': 'var(--neutral-500)',
-    '--border-focus': 'var(--neutral-400)',
+    '--border-control': 'var(--white-15)',
+    '--border-focus': 'var(--white-22)',
+    '--border-selected': 'var(--white-30)',
     '--input': 'var(--border-control)',
-    '--ring': 'var(--neutral-500)',
+    '--ring': 'var(--white-40)',
+    '--ring-halo': 'var(--white-10)',
     '--brand': '#e4e4e7',
     '--brand-foreground': '#09090b',
     '--brand-muted': '#a3a3a3',
@@ -341,10 +354,10 @@ export const cssVars = {
     '--glass': 'var(--white-05)',
     '--glass-strong': 'var(--white-08)',
     '--surface-page': 'var(--background)',
-    '--surface-card': 'rgb(23 23 23 / .5)',
-    '--surface-card-emphasis': 'rgb(23 23 23 / .8)',
-    '--surface-card-quiet': 'rgb(23 23 23 / .4)',
-    '--surface-overlay': 'rgb(10 10 10 / .95)',
+    '--surface-card': 'rgb(38 38 38 / .5)',
+    '--surface-card-emphasis': 'rgb(38 38 38 / .75)',
+    '--surface-card-quiet': 'rgb(38 38 38 / .35)',
+    '--surface-overlay': 'rgb(23 23 23 / .92)',
     '--surface-header': 'rgb(0 0 0 / .7)',
     '--surface-scrim': 'rgb(0 0 0 / .8)',
     '--surface-0': 'var(--background)',
@@ -487,9 +500,11 @@ export const cssVars = {
     '--radius-composer': '28px',
     '--radius-full': '9999px',
     '--shadow-none': 'none',
-    '--shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
+    '--shadow-floating': '0 24px 60px -16px rgb(0 0 0 / .75)',
     '--shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
-    '--ring-focus': '0 0 0 2px var(--ring)',
+    '--edge-highlight': 'inset 0 1px 0 0 rgb(255 255 255 / .10)',
+    '--bloom': '0 0 24px -2px rgb(255 255 255 / .28)',
+    '--ring-focus': '0 0 0 3px var(--ring-halo)',
     '--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)',
@@ -499,6 +514,7 @@ export const cssVars = {
     '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
     '--glow-hero-blur': '120px',
     '--sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+    '--sheen-edge': 'linear-gradient(90deg,transparent,rgb(255 255 255 / .14) 50%,transparent)',
     '--gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
     '--gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
     '--gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
@@ -507,8 +523,10 @@ export const cssVars = {
     '--duration-slow': '400ms',
     '--duration-slower': '500ms',
     '--duration-glow': '9s',
+    '--duration-press': '90ms',
     '--ease-out': 'cubic-bezier(0,0,0.2,1)',
     '--ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+    '--ease-emphasis': 'cubic-bezier(0.16,1,0.3,1)',
     '--stagger': '60ms',
     '--entry-rise': '16px',
     '--entry-rise-lg': '24px',

package/guidelines/brand-elevation.card.html

@@ -8,7 +8,7 @@
 .meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
 </style></head><body>
 <div style="display:flex;gap:16px;align-items:stretch">
-  <div style="flex:1;padding:14px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);font-size:12px;color:var(--neutral-400)">flat — hairline only<div class="n" style="margin-top:8px">--shadow-none</div></div>
-  <div style="flex:1;padding:14px;background:var(--surface-overlay);border:1px solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);font-size:12px;color:var(--neutral-400)">floating — menu, dialog, composer<div class="n" style="margin-top:8px">--shadow-floating</div></div>
-  <div style="flex:1;position:relative;overflow:hidden;background:#000;border:1px solid var(--border-hairline);border-radius:var(--radius-lg)"><div style="position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);background:var(--glow-hero);filter:blur(60px)"></div><div style="position:relative;padding:14px;font-size:12px;color:var(--neutral-300)">ambient glow<div class="n" style="margin-top:8px">--glow-hero</div></div></div>
+  <div style="flex:1;padding:14px;background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:12px;color:var(--neutral-400)">flat — hairline only<div class="n" style="margin-top:8px">--shadow-none</div></div>
+  <div style="flex:1;padding:14px;background:var(--surface-overlay);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);font-size:12px;color:var(--neutral-400)">floating — menu, dialog, composer<div class="n" style="margin-top:8px">--shadow-floating</div></div>
+  <div style="flex:1;position:relative;overflow:hidden;background:#000;border:1px solid var(--border);border-radius:var(--radius-lg)"><div style="position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);background:var(--glow-hero);filter:blur(60px)"></div><div style="position:relative;padding:14px;font-size:12px;color:var(--neutral-300)">ambient glow<div class="n" style="margin-top:8px">--glow-hero</div></div></div>
 </div></body></html>