mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34:26 +00:00
23b8dd376d
Bevelled controls with light falling across them, fields as wells, solid windows, and glass kept for the chrome that floats over everything else. Warm graphite in dark, soft paper in light, one brand color driving both. Ships its own fonts (Instrument Sans, JetBrains Mono; OFL). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
97 lines
4.5 KiB
CSS
97 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 1px 3px -1px var(--nv-color-shadow-penumbra);
|
|
|
|
--nv-elevation-2:
|
|
0 1px 1px var(--nv-color-shadow-ambient),
|
|
0 2px 4px -1px var(--nv-color-shadow-penumbra),
|
|
0 4px 8px -4px var(--nv-color-shadow-umbra);
|
|
|
|
--nv-elevation-3:
|
|
0 1px 1px var(--nv-color-shadow-ambient),
|
|
0 4px 8px -2px var(--nv-color-shadow-penumbra),
|
|
0 10px 20px -6px var(--nv-color-shadow-umbra);
|
|
|
|
--nv-elevation-4:
|
|
0 1px 2px var(--nv-color-shadow-ambient),
|
|
0 8px 16px -4px var(--nv-color-shadow-penumbra),
|
|
0 20px 40px -10px var(--nv-color-shadow-umbra);
|
|
|
|
--nv-elevation-5:
|
|
0 1px 2px var(--nv-color-shadow-ambient),
|
|
0 14px 28px -6px var(--nv-color-shadow-penumbra),
|
|
0 32px 64px -14px 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 2px 5px -1px 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);
|
|
}
|