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]>
74 lines
4.3 KiB
React
74 lines
4.3 KiB
React
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'},
|
|
// --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'},
|
|
}
|
|
const SZ = {
|
|
sm:{height:32,padding:'0 12px',fontSize:'var(--text-xs)'},
|
|
default:{height:36,padding:'0 16px',fontSize:'var(--text-sm)'},
|
|
lg:{height:44,padding:'0 24px',fontSize:'var(--text-sm)'},
|
|
icon:{height:36,width:36,padding:0},
|
|
}
|
|
// 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 hoverStyle = !hover || disabled ? null : HOVER[variant]
|
|
return (
|
|
<button
|
|
disabled={disabled}
|
|
onMouseEnter={() => setHover(true)}
|
|
onMouseLeave={() => setHover(false)}
|
|
style={{
|
|
display:'inline-flex',alignItems:'center',justifyContent:'center',gap:8,whiteSpace:'nowrap',
|
|
fontFamily:'var(--font-sans)',fontWeight:'var(--weight-medium)',lineHeight:1,
|
|
// --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,
|
|
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}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|