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
|
|
@ -23,8 +23,13 @@
|
|||
max-block-size: min(42rem, calc(100svh - var(--nv-space-12)));
|
||||
padding: 0;
|
||||
|
||||
background-color: var(--nv-color-surface-elevated);
|
||||
/* The dialog sits over a dimmed, blurred page, so it can afford to let a
|
||||
little of it through: it reads as a pane lifted off the page rather than
|
||||
a card pasted over it. */
|
||||
background-color: color-mix(in oklab, var(--nv-color-surface-elevated) 86%, transparent);
|
||||
background-image: var(--nv-sheen-surface);
|
||||
backdrop-filter: var(--nv-backdrop-frosted);
|
||||
-webkit-backdrop-filter: var(--nv-backdrop-frosted);
|
||||
color: var(--nv-color-text-primary);
|
||||
border: var(--nv-border-width) solid var(--nv-color-border-subtle);
|
||||
border-radius: var(--nv-radius-xl);
|
||||
|
|
|
|||
Loading…
Reference in a new issue