mirror of
https://github.com/hanzoai/design.git
synced 2026-10-30 14:58:37 +00:00
zeekayandHanzo Dev
8278d182bb
Controls came off the neutral ladder and stopped shouting. --border-control was --neutral-500: a 1px #737373 box around every field, four times heavier than the hairline beside it, which is what made a form read as a debug overlay rather than a surface. It is now rgb(255 255 255 / .15) — the reference's own --input-border — and --border-focus (.22) and --input follow it onto the alpha ladder, so the whole control surface is one quiet system. --border-selected (.30) names the rung that was missing: the CHOSEN thing. The 3:1 gate that forced the grey is gone from --border-control and kept on --ring, which is the only boundary that earns it. A resting edge is an affordance you can hunt for; a focus ring is a position you navigate by. On the alpha ladder --ring still clears the floor (3.67:1 dark, 3.85:1 light) BECAUSE it composites — on a lifted surface the ring lifts with it, which a fixed grey cannot do. Then the part that was actually missing: light. You cannot cast a shadow onto black, so elevation here is an edge, an inset top HIGHLIGHT and a wide dark drop, composed at the use site. The highlight is the piece that turns a coloured rectangle into a surface. --bloom is where "alive" comes from in a brand with no hue, --sheen-edge dissolves a top hairline before it reaches either corner, and --ease-emphasis lands a panel decided rather than drifting. Surfaces were not surfaces. --surface-card composited to #101010 on a #0a0a0a page — six levels above it — so three cards read as one flat field with rules across it; --surface-overlay was the page at 95% of the page, so nothing floated. Recut from #262626 they land on 14/18/1f, and a panel is a panel. Every state now moves. --secondary-hover resolved to its own resting value, --primary-hover dropped 16% and read as the button going disabled under the cursor, an unfilled button's hover stepped its edge .15 -> .16 and a hovered field did the same — states nobody could see, which is dead code with a stylesheet around it. --destructive was #666666, indistinguishable from a disabled control; it is --state-error now, because "delete everything" and "you cannot click this" must not be the same colour, and the invalid-field state was already spending that token. Verified by looking: the kit rendered in Chromium at 390/768/1280 in both themes, no overflow, tap targets and field sizes hold, and :focus-visible confirmed from a real Tab rather than a programmatic focus(). Co-authored-by: Hanzo Dev <[email protected]>
54 lines
3.0 KiB
React
54 lines
3.0 KiB
React
import React from 'react'
|
|
|
|
/** Hover-and-click dropdown, matching the nav's Log in / Try Hanzo menus. */
|
|
export function DropdownMenu({ align = 'right', hover = false, trigger, style, children }) {
|
|
const [open, setOpen] = React.useState(false)
|
|
const ref = React.useRef(null)
|
|
React.useEffect(() => {
|
|
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
|
|
document.addEventListener('mousedown', onDoc)
|
|
return () => document.removeEventListener('mousedown', onDoc)
|
|
}, [])
|
|
return (
|
|
<span
|
|
ref={ref}
|
|
onMouseEnter={hover ? () => setOpen(true) : undefined}
|
|
onMouseLeave={hover ? () => setOpen(false) : undefined}
|
|
style={{position:'relative',display:'inline-flex',...style}}
|
|
>
|
|
<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: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>
|
|
)}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export function DropdownMenuItem({ desc, style, children, ...rest }) {
|
|
const [hover, setHover] = React.useState(false)
|
|
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-strong)' : 'transparent',cursor:'pointer',textDecoration:'none',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
|
|
{...rest}
|
|
>
|
|
{/* --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-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}} />
|
|
}
|