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>
116 lines
4.3 KiB
CSS
116 lines
4.3 KiB
CSS
/* ==========================================================================
|
|
Niveus — Surface
|
|
--------------------------------------------------------------------------
|
|
The material vocabulary, expressed as classes. Every other component is
|
|
built from these; applications use them directly for anything the system
|
|
does not ship as a named component.
|
|
|
|
.nv-surface a container using the solid material
|
|
.nv-material-{type} apply a material to any element
|
|
.nv-elevation-{0..5} apply a depth level to any element
|
|
|
|
A material and an elevation are independent: .nv-material-solid
|
|
.nv-elevation-3 is a legitimate combination. What is not legitimate is a
|
|
raw box-shadow that belongs to neither scale.
|
|
========================================================================== */
|
|
|
|
.nv-surface {
|
|
background-color: var(--nv-color-surface);
|
|
color: var(--nv-color-text-primary);
|
|
border: var(--nv-border-width) solid var(--nv-color-border);
|
|
border-radius: var(--nv-radius-lg);
|
|
transition: var(--nv-transition-surface);
|
|
}
|
|
|
|
/* --- Materials ------------------------------------------------------------- */
|
|
|
|
.nv-material-solid {
|
|
background-color: var(--nv-material-solid-bg);
|
|
border: var(--nv-border-width) solid var(--nv-material-solid-border);
|
|
box-shadow: var(--nv-material-solid-shadow);
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.nv-material-elevated {
|
|
background-color: var(--nv-material-elevated-bg);
|
|
border: var(--nv-border-width) solid var(--nv-material-elevated-border);
|
|
box-shadow: var(--nv-material-elevated-shadow);
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.nv-material-inset {
|
|
background-color: var(--nv-material-inset-bg);
|
|
border: var(--nv-border-width) solid var(--nv-material-inset-border);
|
|
box-shadow: var(--nv-material-inset-shadow);
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.nv-material-frosted {
|
|
background-color: var(--nv-material-frosted-bg);
|
|
border: var(--nv-border-width) solid var(--nv-material-frosted-border);
|
|
box-shadow: var(--nv-material-frosted-shadow);
|
|
backdrop-filter: var(--nv-backdrop-frosted);
|
|
-webkit-backdrop-filter: var(--nv-backdrop-frosted);
|
|
}
|
|
|
|
.nv-material-glass {
|
|
background-color: var(--nv-material-glass-bg);
|
|
border: var(--nv-border-width) solid var(--nv-material-glass-border);
|
|
box-shadow: var(--nv-material-glass-shadow);
|
|
backdrop-filter: var(--nv-backdrop-glass);
|
|
-webkit-backdrop-filter: var(--nv-backdrop-glass);
|
|
}
|
|
|
|
/* --- Elevation -------------------------------------------------------------
|
|
Elevation utilities carry three things at once, because a lifted surface is
|
|
never only a shadow: the shadow itself, the highlight along its top edge,
|
|
and — on a dark canvas, where a shadow has nothing left to darken — a tint
|
|
that lets more light reach the surface the higher it sits. The tint is
|
|
transparent in light appearance, so the two read as one scale. */
|
|
|
|
.nv-elevation-0 { box-shadow: var(--nv-elevation-0); }
|
|
|
|
.nv-elevation-1 {
|
|
box-shadow: var(--nv-highlight-top), var(--nv-elevation-1);
|
|
background-image: linear-gradient(var(--nv-color-elevation-tint-1) 0 0);
|
|
}
|
|
|
|
.nv-elevation-2 {
|
|
box-shadow: var(--nv-highlight-top), var(--nv-elevation-2);
|
|
background-image: linear-gradient(var(--nv-color-elevation-tint-2) 0 0);
|
|
}
|
|
|
|
.nv-elevation-3 {
|
|
box-shadow: var(--nv-highlight-top), var(--nv-elevation-3);
|
|
background-image: linear-gradient(var(--nv-color-elevation-tint-3) 0 0);
|
|
}
|
|
|
|
.nv-elevation-4 {
|
|
box-shadow: var(--nv-highlight-top), var(--nv-elevation-4);
|
|
background-image: linear-gradient(var(--nv-color-elevation-tint-4) 0 0);
|
|
}
|
|
|
|
.nv-elevation-5 {
|
|
box-shadow: var(--nv-highlight-top-strong), var(--nv-elevation-5);
|
|
background-image: linear-gradient(var(--nv-color-elevation-tint-5) 0 0);
|
|
}
|
|
|
|
.nv-elevation-inset-sm { box-shadow: var(--nv-elevation-inset-sm); }
|
|
.nv-elevation-inset-md { box-shadow: var(--nv-elevation-inset-md); }
|
|
.nv-elevation-inset-lg { box-shadow: var(--nv-elevation-inset-lg); }
|
|
|
|
/* --- Divider ---------------------------------------------------------------- */
|
|
|
|
.nv-divider {
|
|
border: 0;
|
|
border-top: var(--nv-border-width) solid var(--nv-color-border-subtle);
|
|
margin-block: var(--nv-space-4);
|
|
}
|
|
|
|
.nv-divider--vertical {
|
|
border-top: 0;
|
|
border-left: var(--nv-border-width) solid var(--nv-color-border-subtle);
|
|
margin-block: 0;
|
|
margin-inline: var(--nv-space-4);
|
|
align-self: stretch;
|
|
}
|