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]>
40 lines
2.6 KiB
CSS
40 lines
2.6 KiB
CSS
/* Motion is restrained: fade + small rise, CSS-only hovers, one breathing glow.
|
|
No springs, no bounce, no parallax, no autoplay carousels. */
|
|
:root{
|
|
--duration-fast:150ms; /* @kind other */ /* dropdown / panel open */
|
|
--duration-base:300ms; /* @kind other */ /* slide-up-fade */
|
|
--duration-slow:400ms; /* @kind other */ /* hero element entry */
|
|
--duration-slower:500ms; /* @kind other */ /* section entry */
|
|
--duration-glow:9s; /* @kind other */ /* ambient radial breathe */
|
|
--duration-press:90ms; /* @kind other */ /* the press-down on :active */
|
|
--ease-out:cubic-bezier(0,0,0.2,1); /* @kind other */
|
|
--ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
|
|
/* The entrance curve. Nearly all of the distance is covered in the first
|
|
third and it settles without overshooting, so a panel arrives DECIDED
|
|
rather than drifting in — the difference between 300ms that feels
|
|
immediate and 300ms that feels slow. Use it for anything that appears
|
|
(menus, dialogs, sheets, toasts); --ease-out stays the curve for a state
|
|
change on something already on screen. It is not a spring: this system has
|
|
no bounce anywhere. */
|
|
--ease-emphasis:cubic-bezier(0.16,1,0.3,1); /* @kind other */
|
|
--stagger:60ms; /* @kind other */ /* per-element delay in a group */
|
|
--entry-rise:16px; /* hero y-offset */
|
|
--entry-rise-lg:24px; /* card y-offset */
|
|
}
|
|
|
|
@keyframes hanzo-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes hanzo-fade-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes hanzo-slide-up-fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
|
/* The entrance for anything that appears OVER the page — dialog, sheet, command
|
|
palette. It arrives from very slightly small and very slightly low, which is
|
|
what reads as "came forward" rather than "was toggled on". 3% and 8px: any
|
|
more and it is an animation you notice, which is the failure mode. Pair it
|
|
with --ease-emphasis. */
|
|
@keyframes hanzo-zoom-in{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
|
|
@keyframes hanzo-glow{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.08);opacity:.65}}
|
|
@keyframes hanzo-pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
|
|
|
|
@media (prefers-reduced-motion:reduce){
|
|
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
|
|
}
|