mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 12:44:26 +00:00
a19e0f205fNiveus 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
98 lines
4.5 KiB
CSS
98 lines
4.5 KiB
CSS
/* ==========================================================================
|
|
Niveus — Elevation
|
|
--------------------------------------------------------------------------
|
|
Depth is a scale, not a free choice. Each level describes one relationship
|
|
between a surface and what sits behind it:
|
|
|
|
0 flush painted on the canvas, no separation
|
|
1 resting cards, list rows, static panels
|
|
2 raised buttons, controls, anything that reacts to a pointer
|
|
3 floating popovers, menus, dropdowns, tooltips
|
|
4 lifted dialogs, sheets, detached panels
|
|
5 overlay the topmost layer, used sparingly
|
|
|
|
Every level is built from the same three shadow colors so depth stays
|
|
consistent between appearances: an ambient contact shadow that keeps the
|
|
edge crisp, a soft penumbra for the spread, and an umbra that only appears
|
|
once a surface is genuinely far from the canvas.
|
|
========================================================================== */
|
|
|
|
:root {
|
|
--nv-elevation-0: none;
|
|
|
|
--nv-elevation-1:
|
|
0 1px 1px var(--nv-color-shadow-ambient),
|
|
0 2px 4px -1px var(--nv-color-shadow-penumbra),
|
|
0 6px 14px -8px var(--nv-color-shadow-umbra);
|
|
|
|
--nv-elevation-2:
|
|
0 1px 1px var(--nv-color-shadow-ambient),
|
|
0 3px 6px -2px var(--nv-color-shadow-penumbra),
|
|
0 10px 20px -10px var(--nv-color-shadow-umbra);
|
|
|
|
--nv-elevation-3:
|
|
0 1px 2px var(--nv-color-shadow-ambient),
|
|
0 6px 12px -4px var(--nv-color-shadow-penumbra),
|
|
0 18px 36px -12px var(--nv-color-shadow-umbra);
|
|
|
|
--nv-elevation-4:
|
|
0 1px 2px var(--nv-color-shadow-ambient),
|
|
0 10px 20px -6px var(--nv-color-shadow-penumbra),
|
|
0 30px 60px -16px var(--nv-color-shadow-umbra);
|
|
|
|
--nv-elevation-5:
|
|
0 2px 3px var(--nv-color-shadow-ambient),
|
|
0 16px 32px -8px var(--nv-color-shadow-penumbra),
|
|
0 44px 88px -20px var(--nv-color-shadow-umbra);
|
|
|
|
/* --- Inset ---------------------------------------------------------------
|
|
Recessed surfaces: fields, wells, tracks, pressed controls. */
|
|
--nv-elevation-inset-sm: inset 0 1px 2px var(--nv-color-shadow-inset);
|
|
--nv-elevation-inset-md:
|
|
inset 0 1px 1px var(--nv-color-shadow-inset),
|
|
inset 0 3px 6px -2px var(--nv-color-shadow-inset);
|
|
--nv-elevation-inset-lg:
|
|
inset 0 2px 3px var(--nv-color-shadow-inset),
|
|
inset 0 6px 12px -3px var(--nv-color-shadow-inset);
|
|
|
|
/* --- Highlight -----------------------------------------------------------
|
|
The thin catch of light along the top edge of a raised surface. This is
|
|
what makes Niveus read as material rather than as a rectangle with a
|
|
shadow. Always paired with an elevation, never used alone. */
|
|
--nv-highlight-top: inset 0 1px 0 var(--nv-color-highlight);
|
|
--nv-highlight-top-strong: inset 0 1px 0 var(--nv-color-highlight-strong);
|
|
--nv-highlight-edge:
|
|
inset 0 1px 0 var(--nv-color-highlight),
|
|
inset 0 0 0 1px var(--nv-color-border-subtle);
|
|
|
|
/* --- Bevel -----------------------------------------------------------------
|
|
The highlight's other half. A raised face is lit along its top edge and
|
|
shaded along its bottom one; together they are the bevel, and the bevel is
|
|
what makes a Niveus control look like something a finger could press.
|
|
Raised controls and surfaces take the full bevel; the highlight alone is
|
|
for things that sit flush. */
|
|
--nv-lowlight-bottom: inset 0 -1px 0 var(--nv-color-lowlight);
|
|
--nv-bevel:
|
|
inset 0 1px 0 var(--nv-color-highlight),
|
|
inset 0 -1px 0 var(--nv-color-lowlight);
|
|
|
|
/* --- Outline ---------------------------------------------------------------
|
|
The contact line: a hairline just outside a raised surface, where it meets
|
|
whatever it rests on. In dark it is near-black and does most of the
|
|
separating; in light it only softens the border beside it. */
|
|
--nv-outline: 0 0 0 1px var(--nv-color-outline);
|
|
|
|
/* --- Ledge -----------------------------------------------------------------
|
|
A recess catches light on its *lower* lip, the edge facing the viewer.
|
|
Paired with an inset shadow, it turns a field from a dark rectangle into
|
|
a well cut into the surface. */
|
|
--nv-ledge: 0 1px 0 var(--nv-color-highlight);
|
|
|
|
/* --- Focus ---------------------------------------------------------------
|
|
A contrast ring sits under the accent ring so focus stays visible on both
|
|
light and dark surfaces, and on accent-filled controls. */
|
|
--nv-focus-ring-width: 3px;
|
|
--nv-focus-ring:
|
|
0 0 0 1px var(--nv-color-focus-ring-contrast),
|
|
0 0 0 calc(1px + var(--nv-focus-ring-width)) var(--nv-color-focus-ring);
|
|
}
|