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]>
62 lines
3.2 KiB
React
62 lines
3.2 KiB
React
import React from 'react'
|
|
|
|
const FILL = {
|
|
default:'var(--surface-card)',
|
|
emphasis:'var(--surface-card-emphasis)',
|
|
quiet:'var(--surface-card-quiet)',
|
|
plain:'transparent',
|
|
}
|
|
|
|
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}
|
|
onMouseLeave={interactive ? () => setHover(false) : undefined}
|
|
style={{
|
|
position:'relative',overflow:'hidden',
|
|
borderRadius:'var(--radius-lg)',
|
|
border:'1px solid ' + edge,
|
|
background:FILL[variant] || FILL.default,
|
|
// 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>
|
|
)
|
|
}
|
|
|
|
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 }) {
|
|
// --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-tertiary)',...style}} {...rest}>{children}</p>
|
|
}
|
|
export function CardContent({ style, children, ...rest }) {
|
|
return <div style={{position:'relative',padding:24,...style}} {...rest}>{children}</div>
|
|
}
|
|
export function CardFooter({ style, children, ...rest }) {
|
|
return <div style={{position:'relative',padding:'0 24px 24px',display:'flex',alignItems:'center',gap:12,...style}} {...rest}>{children}</div>
|
|
}
|