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>
101 lines
3.2 KiB
CSS
101 lines
3.2 KiB
CSS
/* ==========================================================================
|
|
Niveus — Bed
|
|
--------------------------------------------------------------------------
|
|
<div class="nv-bed"> … </div>
|
|
|
|
A bed is ground that is visibly *not* ordinary background. Where a card says
|
|
"this content belongs together", a bed says "what sits here is different in
|
|
kind" — a feature being shown off, a preview, a sandbox, an empty state, a
|
|
region under explanation.
|
|
|
|
It reads that way because of what it does to the materials on top of it: the
|
|
hatch and the soft color blooms give translucent surfaces something to be
|
|
translucent *against*, and give shadows something to fall on. A frosted panel
|
|
over a flat grey proves nothing; over a bed it is obvious.
|
|
|
|
That is also the rule for using one. A bed is for regions the user should
|
|
look *at*. Put content they need to work *through* on a plain surface —
|
|
patterning behind a form or a table is noise, and the calm is the point.
|
|
|
|
Everything it is made of derives from the accent, so it follows the brand.
|
|
Set --nv-bed-tint to lead with a different color.
|
|
========================================================================== */
|
|
|
|
.nv-bed {
|
|
--nv-bed-tint: var(--nv-color-accent);
|
|
--_bloom: 16%;
|
|
--_hatch: var(--nv-color-border-subtle);
|
|
|
|
position: relative;
|
|
padding: var(--nv-space-6);
|
|
|
|
background-color: var(--nv-color-background-subtle);
|
|
border: var(--nv-border-width) solid var(--nv-color-border-subtle);
|
|
border-radius: var(--nv-radius-xl);
|
|
|
|
/* The hatch sits over the blooms, and both sit under the content: three
|
|
background layers rather than a pseudo-element, so nothing has to be
|
|
lifted out of the way. */
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
var(--_hatch) 0 2px,
|
|
transparent 2px 14px
|
|
),
|
|
radial-gradient(
|
|
60% 80% at 15% 20%,
|
|
color-mix(in oklab, var(--nv-bed-tint) var(--_bloom), transparent),
|
|
transparent 70%
|
|
),
|
|
radial-gradient(
|
|
50% 70% at 85% 25%,
|
|
color-mix(in oklab, var(--nv-color-danger) calc(var(--_bloom) * 0.7), transparent),
|
|
transparent 70%
|
|
),
|
|
radial-gradient(
|
|
70% 90% at 50% 100%,
|
|
color-mix(in oklab, var(--nv-color-success) calc(var(--_bloom) * 0.7), transparent),
|
|
transparent 70%
|
|
);
|
|
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
transition: var(--nv-transition-surface);
|
|
}
|
|
|
|
/* Just the ground, no weather: for grouping a region without drawing the eye
|
|
to it. */
|
|
.nv-bed--quiet {
|
|
--_bloom: 8%;
|
|
--_hatch: transparent;
|
|
}
|
|
|
|
.nv-bed--vivid {
|
|
--_bloom: 26%;
|
|
}
|
|
|
|
/* One color instead of three — a bed that belongs to a single state. */
|
|
.nv-bed--single {
|
|
background-image:
|
|
repeating-linear-gradient(45deg, var(--_hatch) 0 2px, transparent 2px 14px),
|
|
radial-gradient(
|
|
80% 100% at 30% 0%,
|
|
color-mix(in oklab, var(--nv-bed-tint) var(--_bloom), transparent),
|
|
transparent 75%
|
|
);
|
|
}
|
|
|
|
.nv-bed--flush {
|
|
border-radius: 0;
|
|
border-inline: 0;
|
|
}
|
|
|
|
.nv-bed__label {
|
|
display: block;
|
|
margin-block-end: var(--nv-space-4);
|
|
font: var(--nv-font-caption);
|
|
font-weight: var(--nv-font-weight-semibold);
|
|
letter-spacing: var(--nv-letter-spacing-wider);
|
|
text-transform: uppercase;
|
|
color: var(--nv-color-text-tertiary);
|
|
}
|