mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34:26 +00:00
Depth, light and translucency without changing the API
Niveus read flat: thin sheens, short shadows, opaque grey chrome and a painted canvas. This retunes values and component internals only; every class and token name is unchanged, so existing pages pick it up as is. - Canvas: a faint accent light falls across the page, so translucent layers have something to show through. - Surfaces: the surface sheen runs the full height (lit top, shaded foot); raised and filled sheens, highlights and bevels are stronger; the elevation scale is deeper and softer. - Translucency: cards, dialogs, the sidebar and tab tracks let some of the canvas through, with blur so busy grounds never read as texture; frosted and glass materials are clearer with more blur. - Filled buttons give off a soft glow of their own color. - Light fields are paper instead of grey wells that looked disabled. - Fixes: navigation bars wrap and lists scroll inside them instead of overflowing the page on phones; choice labels sit at control size; disabled ghost buttons no longer grow a filled well; the color-swatch rule is split so neither engine drops it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019iMUTHrD8K9CSuHqsanje9
This commit is contained in:
parent
7988df09f0
commit
a19e0f205f
13 changed files with 281 additions and 139 deletions
|
|
@ -24,6 +24,14 @@ body {
|
|||
margin: 0;
|
||||
min-height: 100svh;
|
||||
background-color: var(--nv-color-background);
|
||||
/* The canvas is lit, not painted: a wash of the accent falls in from the top
|
||||
corner and a fainter one pools at the opposite foot. It is what gives
|
||||
translucent surfaces something to be translucent against, and keeps a
|
||||
page of solid panels from reading as one flat field. */
|
||||
background-image:
|
||||
radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--nv-color-accent) light-dark(10%, 16%), transparent), transparent 60%),
|
||||
radial-gradient(90% 70% at 100% 100%, color-mix(in oklab, var(--nv-color-accent) light-dark(6%, 10%), transparent), transparent 60%);
|
||||
background-attachment: fixed;
|
||||
color: var(--nv-color-text-primary);
|
||||
font: var(--nv-font-body);
|
||||
letter-spacing: var(--nv-letter-spacing-normal);
|
||||
|
|
|
|||
Loading…
Reference in a new issue