mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34:26 +00:00
Niveus: a tactile, adaptive interface language
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>
This commit is contained in:
Nexoniarz
commit
23b8dd376d
51 changed files with 15664 additions and 0 deletions
158
niveus/themes/dark.css
Normal file
158
niveus/themes/dark.css
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
/* ==========================================================================
|
||||
Niveus — Dark appearance
|
||||
--------------------------------------------------------------------------
|
||||
Values for the dark side of every semantic role, resolved through
|
||||
light-dark() in tokens/color.css. Like the light appearance, almost nothing
|
||||
here is a literal color — every role is derived from --nv-brand.
|
||||
|
||||
Dark Niveus is warm graphite, not the light theme inverted. Surfaces get
|
||||
*lighter* as they rise and each step is large enough to see; shadows are
|
||||
deep and every raised thing carries a near-black contact line, because on a
|
||||
dark canvas a shadow alone has nothing left to darken. The bevel is what
|
||||
carries depth here — a lit top edge, a shaded bottom one — and filled color
|
||||
stays saturated: a vivid accent with a light label reads as a lit key, not
|
||||
as a hole.
|
||||
========================================================================== */
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root,
|
||||
[data-nv-brand] {
|
||||
/* --- Canvas and surfaces ----------------------------------------------- */
|
||||
--nv-dark-background: color-mix(in oklab, #121214, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-dark-background-subtle: color-mix(in oklab, #18181b, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-dark-surface: color-mix(in oklab, #1f1f22, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-dark-surface-elevated: color-mix(in oklab, #2a2a2e, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-dark-surface-inset: color-mix(in oklab, #111113, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-dark-surface-hover: color-mix(in oklab, #313136, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-dark-surface-active: color-mix(in oklab, #39393f, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-dark-scrim: rgb(6 6 8 / 0.62);
|
||||
|
||||
/* --- Text --------------------------------------------------------------- */
|
||||
--nv-dark-text-primary: #ecebe8;
|
||||
--nv-dark-text-secondary: color-mix(in oklab, #a9a8a3, var(--nv-brand) 8%);
|
||||
--nv-dark-text-tertiary: color-mix(in oklab, #7d7c77, var(--nv-brand) 8%);
|
||||
--nv-dark-text-disabled: #58585c;
|
||||
--nv-dark-text-inverted: var(--nv-palette-neutral-975);
|
||||
|
||||
/* --- Borders ------------------------------------------------------------ */
|
||||
--nv-dark-border-subtle: rgb(255 255 255 / 0.06);
|
||||
--nv-dark-border: rgb(255 255 255 / 0.1);
|
||||
--nv-dark-border-strong: rgb(255 255 255 / 0.2);
|
||||
|
||||
/* --- Accent -------------------------------------------------------------
|
||||
The same derivation as light: a fill is pushed out of the mid-tones until
|
||||
its label clears 4.5:1, so the brand keeps its full saturation and a light
|
||||
label. Earlier Niveus lifted the dark accent into pastel to avoid neon;
|
||||
with bevel and sheen doing the shaping, a saturated fill reads as a lit
|
||||
key instead, and the pastel was what made the whole system feel washed
|
||||
out. Only the accent *text* (links, subtle labels) moves up the ramp,
|
||||
because text on a dark canvas needs the lightness that a fill does not. */
|
||||
--nv-dark-accent: oklch(from var(--nv-brand) calc(
|
||||
clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1) * min(l, var(--nv-contrast-dark)) +
|
||||
(1 - clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1)) * max(l, var(--nv-contrast-light))
|
||||
) clamp(0.02, c, 0.25) h);
|
||||
--nv-dark-accent-hover: oklch(from var(--nv-dark-accent) calc(l + 0.05) c h);
|
||||
--nv-dark-accent-active: oklch(from var(--nv-dark-accent) calc(l + 0.09) c h);
|
||||
--nv-dark-accent-subtle: oklch(from var(--nv-dark-accent) l c h / 0.2);
|
||||
--nv-dark-accent-subtle-hover: oklch(from var(--nv-dark-accent) l c h / 0.28);
|
||||
--nv-dark-accent-border: oklch(from var(--nv-dark-accent) l c h / 0.5);
|
||||
--nv-dark-accent-text: oklch(from var(--nv-dark-accent) clamp(0.74, calc(l + 0.2), 0.9) calc(c * 0.9) h);
|
||||
--nv-dark-on-accent: oklch(from var(--nv-dark-accent)
|
||||
calc(0.14 + clamp(0, (0.68 - l) * 100, 1) * 0.84)
|
||||
calc(c * 0.2) h);
|
||||
|
||||
/* --- Success ------------------------------------------------------------ */
|
||||
--nv-dark-success: oklch(from
|
||||
color-mix(in oklab, var(--nv-palette-success-500), var(--nv-brand) var(--nv-brand-harmony))
|
||||
calc(
|
||||
clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1) * min(l, var(--nv-contrast-dark)) +
|
||||
(1 - clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1)) * max(l, var(--nv-contrast-light))
|
||||
) clamp(0.02, c, 0.25) h);
|
||||
--nv-dark-success-hover: oklch(from var(--nv-dark-success) calc(l + 0.05) c h);
|
||||
--nv-dark-success-subtle: oklch(from var(--nv-dark-success) l c h / 0.2);
|
||||
--nv-dark-success-border: oklch(from var(--nv-dark-success) l c h / 0.35);
|
||||
--nv-dark-success-text: oklch(from var(--nv-dark-success) clamp(0.76, calc(l + 0.2), 0.9) calc(c * 0.9) h);
|
||||
--nv-dark-on-success: oklch(from var(--nv-dark-success)
|
||||
calc(0.14 + clamp(0, (0.68 - l) * 100, 1) * 0.84)
|
||||
calc(c * 0.2) h);
|
||||
|
||||
/* --- Warning ------------------------------------------------------------ */
|
||||
--nv-dark-warning: oklch(from
|
||||
color-mix(in oklab, var(--nv-palette-warning-400), var(--nv-brand) var(--nv-brand-harmony))
|
||||
calc(
|
||||
clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1) * min(l, var(--nv-contrast-dark)) +
|
||||
(1 - clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1)) * max(l, var(--nv-contrast-light))
|
||||
) clamp(0.02, c, 0.25) h);
|
||||
--nv-dark-warning-hover: oklch(from var(--nv-dark-warning) calc(l + 0.05) c h);
|
||||
--nv-dark-warning-subtle: oklch(from var(--nv-dark-warning) l c h / 0.2);
|
||||
--nv-dark-warning-border: oklch(from var(--nv-dark-warning) l c h / 0.35);
|
||||
--nv-dark-warning-text: oklch(from var(--nv-dark-warning) clamp(0.76, calc(l + 0.2), 0.9) calc(c * 0.9) h);
|
||||
--nv-dark-on-warning: oklch(from var(--nv-dark-warning)
|
||||
calc(0.14 + clamp(0, (0.68 - l) * 100, 1) * 0.84)
|
||||
calc(c * 0.2) h);
|
||||
|
||||
/* --- Danger ------------------------------------------------------------- */
|
||||
--nv-dark-danger: oklch(from
|
||||
color-mix(in oklab, var(--nv-palette-danger-500), var(--nv-brand) var(--nv-brand-harmony))
|
||||
calc(
|
||||
clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1) * min(l, var(--nv-contrast-dark)) +
|
||||
(1 - clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1)) * max(l, var(--nv-contrast-light))
|
||||
) clamp(0.02, c, 0.25) h);
|
||||
--nv-dark-danger-hover: oklch(from var(--nv-dark-danger) calc(l + 0.05) c h);
|
||||
--nv-dark-danger-active: oklch(from var(--nv-dark-danger) calc(l + 0.09) c h);
|
||||
--nv-dark-danger-subtle: oklch(from var(--nv-dark-danger) l c h / 0.2);
|
||||
--nv-dark-danger-border: oklch(from var(--nv-dark-danger) l c h / 0.35);
|
||||
--nv-dark-danger-text: oklch(from var(--nv-dark-danger) clamp(0.76, calc(l + 0.2), 0.9) calc(c * 0.9) h);
|
||||
--nv-dark-on-danger: oklch(from var(--nv-dark-danger)
|
||||
calc(0.14 + clamp(0, (0.68 - l) * 100, 1) * 0.84)
|
||||
calc(c * 0.2) h);
|
||||
|
||||
/* --- Depth and material -------------------------------------------------- */
|
||||
--nv-dark-shadow-ambient: rgb(0 0 0 / 0.5);
|
||||
--nv-dark-shadow-penumbra: rgb(0 0 0 / 0.5);
|
||||
--nv-dark-shadow-umbra: rgb(0 0 0 / 0.55);
|
||||
--nv-dark-shadow-inset: rgb(0 0 0 / 0.65);
|
||||
--nv-dark-highlight: rgb(255 255 255 / 0.11);
|
||||
--nv-dark-highlight-strong: rgb(255 255 255 / 0.17);
|
||||
|
||||
/* The contact line is what separates graphite from graphite: a raised
|
||||
surface over a dark canvas has no shadow to show, but it always has an
|
||||
edge. */
|
||||
--nv-dark-lowlight: rgb(0 0 0 / 0.42);
|
||||
--nv-dark-outline: rgb(0 0 0 / 0.72);
|
||||
|
||||
--nv-dark-sheen-top: rgb(255 255 255 / 0.06);
|
||||
--nv-dark-sheen-bottom: rgb(0 0 0 / 0.09);
|
||||
--nv-dark-sheen-strong-top: rgb(255 255 255 / 0.2);
|
||||
--nv-dark-sheen-strong-bottom: rgb(0 0 0 / 0.12);
|
||||
|
||||
--nv-dark-knob: #f4f3ef;
|
||||
--nv-dark-knob-shade: rgb(40 32 20 / 0.24);
|
||||
|
||||
/* The higher a surface sits, the more light reaches it. */
|
||||
--nv-dark-elevation-tint-1: rgb(255 255 255 / 0.025);
|
||||
--nv-dark-elevation-tint-2: rgb(255 255 255 / 0.042);
|
||||
--nv-dark-elevation-tint-3: rgb(255 255 255 / 0.06);
|
||||
--nv-dark-elevation-tint-4: rgb(255 255 255 / 0.078);
|
||||
--nv-dark-elevation-tint-5: rgb(255 255 255 / 0.095);
|
||||
|
||||
--nv-dark-material-frosted: color-mix(in oklab, rgb(36 36 40 / 0.62), var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-dark-material-glass: color-mix(in oklab, rgb(44 44 48 / 0.5), var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-dark-material-border: rgb(255 255 255 / 0.1);
|
||||
|
||||
/* --- Window controls --------------------------------------------------------- */
|
||||
--nv-dark-window-close: var(--nv-palette-window-close);
|
||||
--nv-dark-window-minimize: var(--nv-palette-window-minimize);
|
||||
--nv-dark-window-zoom: var(--nv-palette-window-zoom);
|
||||
--nv-dark-window-inactive: var(--nv-palette-neutral-700);
|
||||
--nv-dark-window-control-ring: rgb(0 0 0 / 0.35);
|
||||
--nv-dark-window-glyph: rgb(0 0 0 / 0.6);
|
||||
|
||||
/* --- Interaction ---------------------------------------------------------- */
|
||||
--nv-dark-focus-ring: oklch(from var(--nv-dark-accent-text) l c h / 0.55);
|
||||
--nv-dark-focus-ring-contrast: rgb(8 8 10 / 0.9);
|
||||
--nv-dark-selection: oklch(from var(--nv-dark-accent) l c h / 0.4);
|
||||
}
|
||||
182
niveus/themes/light.css
Normal file
182
niveus/themes/light.css
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
/* ==========================================================================
|
||||
Niveus — Light appearance
|
||||
--------------------------------------------------------------------------
|
||||
Values for the light side of every semantic role. Nothing here is consumed
|
||||
by components directly; tokens/color.css resolves these through light-dark().
|
||||
|
||||
Almost nothing below is a literal color. Each role is *derived* from
|
||||
--nv-brand, so setting one value re-colours the entire system: the accent
|
||||
and its states, what text goes on top of it, how the status colors lean, and
|
||||
how much of the brand bleeds into the greys. See tokens/color.css for the
|
||||
inputs.
|
||||
|
||||
Light Niveus reads as soft paper and enamel on a warm grey desk: surfaces
|
||||
that hold content stay near-white, so documents never look yellowed; the
|
||||
canvas around them is a few steps warmer and darker, so a window sits *on*
|
||||
something. Raised controls are bevelled — a bright top edge, a soft shade
|
||||
along the bottom, light falling across the face — and shadows are warm,
|
||||
the color of shade on paper rather than of a grey filter.
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* Follow the environment unless the application states an appearance. */
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
/* [data-nv-brand] re-derives the whole set for a subtree, so one region can
|
||||
carry a different brand without a second theme. */
|
||||
:root,
|
||||
[data-nv-brand] {
|
||||
/* --- Canvas and surfaces -----------------------------------------------
|
||||
Paper stays paper: the two surfaces that hold content are left untinted so
|
||||
text keeps its contrast. Everything the surfaces sit *in* picks up a trace
|
||||
of the brand, which is what stops an accent from looking stuck on. */
|
||||
--nv-light-background: color-mix(in oklab, #e8e5de, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-light-background-subtle: color-mix(in oklab, #eeece6, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-light-surface: #fbfbfa;
|
||||
--nv-light-surface-elevated: #f8f8f6;
|
||||
--nv-light-surface-inset: color-mix(in oklab, #e3e2dd, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-light-surface-hover: color-mix(in oklab, #f1f0ec, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-light-surface-active: color-mix(in oklab, #e8e5de, var(--nv-brand) var(--nv-brand-tint));
|
||||
--nv-light-scrim: rgb(28 24 18 / 0.34);
|
||||
|
||||
/* --- Text ---------------------------------------------------------------
|
||||
Primary text stays neutral — it carries the reading contrast. The quieter
|
||||
two lean towards the brand, where a tint reads as warmth rather than as a
|
||||
loss of legibility. */
|
||||
--nv-light-text-primary: var(--nv-palette-neutral-900);
|
||||
--nv-light-text-secondary: color-mix(in oklab, var(--nv-palette-neutral-600), var(--nv-brand) 8%);
|
||||
--nv-light-text-tertiary: color-mix(in oklab, var(--nv-palette-neutral-500), var(--nv-brand) 8%);
|
||||
--nv-light-text-disabled: var(--nv-palette-neutral-400);
|
||||
--nv-light-text-inverted: var(--nv-palette-neutral-0);
|
||||
|
||||
/* --- Borders ------------------------------------------------------------ */
|
||||
--nv-light-border-subtle: rgb(28 24 18 / 0.07);
|
||||
--nv-light-border: rgb(28 24 18 / 0.13);
|
||||
--nv-light-border-strong: rgb(28 24 18 / 0.22);
|
||||
|
||||
/* --- Accent --------------------------------------------------------------
|
||||
Every filled color is pushed away from the middle of the lightness range
|
||||
before it is used. A mid-tone is the one place where neither white nor
|
||||
black text reaches 4.5:1, so a brand that lands there is darkened until
|
||||
white works — or, if it is already light, lightened until black does. The
|
||||
brand's hue and chroma are untouched; only its lightness moves, and only
|
||||
as far as it has to. */
|
||||
--nv-light-accent: oklch(from var(--nv-brand) calc(
|
||||
clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1) * min(l, var(--nv-contrast-dark)) +
|
||||
(1 - clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1)) * max(l, var(--nv-contrast-light))
|
||||
) clamp(0.02, c, 0.25) h);
|
||||
--nv-light-accent-hover: oklch(from var(--nv-light-accent) calc(l - 0.045) c h);
|
||||
--nv-light-accent-active: oklch(from var(--nv-light-accent) calc(l - 0.09) c h);
|
||||
--nv-light-accent-subtle: oklch(from var(--nv-light-accent) 0.965 calc(c * 0.16) h);
|
||||
--nv-light-accent-subtle-hover: oklch(from var(--nv-light-accent) 0.93 calc(c * 0.22) h);
|
||||
--nv-light-accent-border: oklch(from var(--nv-light-accent) l c h / 0.32);
|
||||
--nv-light-accent-text: oklch(from var(--nv-light-accent) clamp(0.3, calc(l - 0.12), 0.5) c h);
|
||||
/* Text that lands on the color itself. The clamp is a step function: below
|
||||
the lightness threshold it resolves to 1 and the text goes near-white,
|
||||
above it to 0 and the text goes near-black — so a yellow brand gets dark
|
||||
labels and a navy one gets light labels, with no second token to set. */
|
||||
--nv-light-on-accent: oklch(from var(--nv-light-accent)
|
||||
calc(0.14 + clamp(0, (0.68 - l) * 100, 1) * 0.84)
|
||||
calc(c * 0.2) h);
|
||||
|
||||
/* --- Success ------------------------------------------------------------- */
|
||||
--nv-light-success: oklch(from
|
||||
color-mix(in oklab, var(--nv-palette-success-500), var(--nv-brand) var(--nv-brand-harmony))
|
||||
calc(
|
||||
clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1) * min(l, var(--nv-contrast-dark)) +
|
||||
(1 - clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1)) * max(l, var(--nv-contrast-light))
|
||||
) clamp(0.02, c, 0.25) h);
|
||||
--nv-light-success-hover: oklch(from var(--nv-light-success) calc(l - 0.05) c h);
|
||||
--nv-light-success-subtle: oklch(from var(--nv-light-success) 0.965 calc(c * 0.16) h);
|
||||
--nv-light-success-border: oklch(from var(--nv-light-success) l c h / 0.3);
|
||||
--nv-light-success-text: oklch(from var(--nv-light-success) clamp(0.3, calc(l - 0.1), 0.48) c h);
|
||||
--nv-light-on-success: oklch(from var(--nv-light-success)
|
||||
calc(0.14 + clamp(0, (0.68 - l) * 100, 1) * 0.84)
|
||||
calc(c * 0.2) h);
|
||||
|
||||
/* --- Warning -------------------------------------------------------------- */
|
||||
/* Amber starts above the pivot on purpose. Pushed the other way it lands as
|
||||
brown, which reads as neither a warning nor a color anyone chose. */
|
||||
--nv-light-warning: oklch(from
|
||||
color-mix(in oklab, var(--nv-palette-warning-400), var(--nv-brand) var(--nv-brand-harmony))
|
||||
calc(
|
||||
clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1) * min(l, var(--nv-contrast-dark)) +
|
||||
(1 - clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1)) * max(l, var(--nv-contrast-light))
|
||||
) clamp(0.02, c, 0.25) h);
|
||||
--nv-light-warning-hover: oklch(from var(--nv-light-warning) calc(l - 0.05) c h);
|
||||
--nv-light-warning-subtle: oklch(from var(--nv-light-warning) 0.965 calc(c * 0.16) h);
|
||||
--nv-light-warning-border: oklch(from var(--nv-light-warning) l c h / 0.32);
|
||||
--nv-light-warning-text: oklch(from var(--nv-light-warning) clamp(0.3, calc(l - 0.1), 0.48) c h);
|
||||
--nv-light-on-warning: oklch(from var(--nv-light-warning)
|
||||
calc(0.14 + clamp(0, (0.68 - l) * 100, 1) * 0.84)
|
||||
calc(c * 0.2) h);
|
||||
|
||||
/* --- Danger ---------------------------------------------------------------- */
|
||||
--nv-light-danger: oklch(from
|
||||
color-mix(in oklab, var(--nv-palette-danger-500), var(--nv-brand) var(--nv-brand-harmony))
|
||||
calc(
|
||||
clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1) * min(l, var(--nv-contrast-dark)) +
|
||||
(1 - clamp(0, (var(--nv-contrast-pivot) - l) * 100, 1)) * max(l, var(--nv-contrast-light))
|
||||
) clamp(0.02, c, 0.25) h);
|
||||
--nv-light-danger-hover: oklch(from var(--nv-light-danger) calc(l - 0.05) c h);
|
||||
--nv-light-danger-active: oklch(from var(--nv-light-danger) calc(l - 0.1) c h);
|
||||
--nv-light-danger-subtle: oklch(from var(--nv-light-danger) 0.965 calc(c * 0.16) h);
|
||||
--nv-light-danger-border: oklch(from var(--nv-light-danger) l c h / 0.3);
|
||||
--nv-light-danger-text: oklch(from var(--nv-light-danger) clamp(0.3, calc(l - 0.1), 0.48) c h);
|
||||
--nv-light-on-danger: oklch(from var(--nv-light-danger)
|
||||
calc(0.14 + clamp(0, (0.68 - l) * 100, 1) * 0.84)
|
||||
calc(c * 0.2) h);
|
||||
|
||||
/* --- Depth and material -------------------------------------------------
|
||||
Three shadow colors build every elevation level: an ambient contact
|
||||
shadow, a soft penumbra, and a deeper umbra for high elevations. */
|
||||
--nv-light-shadow-ambient: rgb(40 32 20 / 0.09);
|
||||
--nv-light-shadow-penumbra: rgb(40 32 20 / 0.12);
|
||||
--nv-light-shadow-umbra: rgb(40 32 20 / 0.11);
|
||||
--nv-light-shadow-inset: rgb(40 32 20 / 0.17);
|
||||
--nv-light-highlight: rgb(255 255 255 / 0.9);
|
||||
--nv-light-highlight-strong: rgb(255 255 255 / 1);
|
||||
|
||||
/* Paper already has a border doing the contact work, so the outline only
|
||||
softens it; the bottom shade is faint for the same reason. */
|
||||
--nv-light-lowlight: rgb(40 32 20 / 0.07);
|
||||
--nv-light-outline: rgb(40 32 20 / 0.05);
|
||||
|
||||
--nv-light-sheen-top: rgb(255 255 255 / 0.75);
|
||||
--nv-light-sheen-bottom: rgb(40 32 20 / 0.04);
|
||||
--nv-light-sheen-strong-top: rgb(255 255 255 / 0.24);
|
||||
--nv-light-sheen-strong-bottom: rgb(20 16 10 / 0.1);
|
||||
|
||||
--nv-light-knob: var(--nv-palette-neutral-0);
|
||||
--nv-light-knob-shade: rgb(40 32 20 / 0.13);
|
||||
|
||||
/* Light surfaces are already lighter than their canvas; the shadow alone
|
||||
carries elevation, so there is nothing to add. */
|
||||
--nv-light-elevation-tint-1: transparent;
|
||||
--nv-light-elevation-tint-2: transparent;
|
||||
--nv-light-elevation-tint-3: transparent;
|
||||
--nv-light-elevation-tint-4: transparent;
|
||||
--nv-light-elevation-tint-5: transparent;
|
||||
|
||||
--nv-light-material-frosted: rgb(251 251 249 / 0.66);
|
||||
--nv-light-material-glass: rgb(251 251 249 / 0.5);
|
||||
--nv-light-material-border: rgb(255 255 255 / 0.6);
|
||||
|
||||
/* --- Window controls --------------------------------------------------------- */
|
||||
--nv-light-window-close: var(--nv-palette-window-close);
|
||||
--nv-light-window-minimize: var(--nv-palette-window-minimize);
|
||||
--nv-light-window-zoom: var(--nv-palette-window-zoom);
|
||||
--nv-light-window-inactive: var(--nv-palette-neutral-300);
|
||||
--nv-light-window-control-ring: rgb(0 0 0 / 0.16);
|
||||
--nv-light-window-glyph: rgb(0 0 0 / 0.55);
|
||||
|
||||
/* --- Interaction ----------------------------------------------------------- */
|
||||
--nv-light-focus-ring: oklch(from var(--nv-light-accent) l c h / 0.4);
|
||||
--nv-light-focus-ring-contrast: rgb(255 255 255 / 0.9);
|
||||
--nv-light-selection: oklch(from var(--nv-light-accent) l c h / 0.2);
|
||||
}
|
||||
Loading…
Reference in a new issue