mirror of
https://github.com/hanzoai/design.git
synced 2026-10-30 14:58:37 +00:00
zeekayandHanzo Dev
f5531da6e4
The dark theme drew every emphasised edge at --neutral-500 (#737373) — a 4.43:1 mid-grey. One of those around a card on near-black is a wireframe, and that is what "garish white on dark for outlines" was: hanzoai/id put it on .hanzo-id-input, base/ui-react put it on .input, .btn--outline, a dashed .btn--add and an iframe frame. They were following the file's own instruction to reach for --border-strong whenever an edge had to be visible, because the only alternative was --border at #1f1f1f — 1.27:1, invisible the moment it lands on anything lifted. Two rungs, an octave apart, and nothing in between. So there is a middle now, and the tiers split by DUTY rather than by degree. --border (.10) and --border-strong (.16) are DECORATIVE: alpha, so they composite correctly on the page, on a card and inside a popover, and they owe no ratio. --border-control (--neutral-500) is PERCEIVABLE: it is the edge that IS the affordance, it owes 3:1, and it is named for the duty so it cannot be spent on a card by someone who just wanted "stronger". The gate follows the duty — it pins --border-control and --ring, and lets the hairlines be as quiet as they look. --input, which every shadcn `border-input` resolves through, was #1f1f1f at 1.27:1 and is now the control rung: that was a live WCAG 1.4.11 failure on every field in the fleet, and nothing measured it because the gate watched a token the inputs were not using. The rest is the reference surface (hanzoai/extension sidebar.css) carried over: #0a0a0a rather than #000000, a 0a/0f/17/26 lift ladder that actually steps, #fafafa ink instead of #ffffff (21:1 on pure black is the maximum-contrast pair that exists, and it halates), a graded text ramp at .78/.55/#a3a3a3, and --glass/--glass-strong so a surface can rise by 5% of white instead of a block fill. --border-hairline and --border-card were two more names for the one hairline and are gone; the 46 components that used them now say --border. MOBILE-FIRST, and free. Spacing is authored at phone values and scales up at md. --gutter is max(1rem, safe-area-inset), so a notch is cleared with no per-app rule. Under pointer:coarse every control clears a 44px --tap-target, checkbox and radio hit areas expand to 44px via a pseudo-element while the 16px box is left alone (WCAG 2.5.8 puts the floor at 24px; every one of them shipped at 16), and fields render at --text-control = 16px so iOS stops zooming the viewport on focus. --text-control has to be a token rather than a media query because every component sets its size inline and an inline style outranks any stylesheet. Light was quietly broken and is not a theme you can leave for later: --card, --muted, --secondary and --accent were four names for #f5f5f5, so the surface ladder was flat; ::selection had no light value; and the components painted from the --white-* ladder, which does not invert — a tier2 badge was white-on-white and the table header was a black bar with grey text on it. Components now paint from --glass/--surface-*, and check 4 fails the build if any semantic token built from a white rung has no .light counterpart. Verified in Chromium at 390 / 768 / 1280 on the real components, reading computed styles: no horizontal overflow at any width, fields 13px -> 16px on touch, targets under 44px 16/19 -> 1/19 (the last is the 16px checkbox box, whose hit area measures 44x44 and takes a tap 18px off-centre), --ring and --border-control at 3.19:1 dark / 4.05:1 light worst case. Co-authored-by: Hanzo Dev <[email protected]>
12 lines
617 B
React
12 lines
617 B
React
import React from 'react'
|
|
|
|
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(--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>
|
|
)
|
|
}
|