mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34:26 +00:00
369d1cd8f7
Glaze is glass with a dial: --nv-glass-frost (0 clear .. 1 heavy) moves backdrop blur, tint and saturation together, read where the surface is drawn so any subtree or slider can change it. A masked rim and a specular bloom follow the pointer via niveus.js; without it the light sits at its default and the material still reads. Falls back to the elevated solid under reduced transparency or without backdrop-filter. New components: .nv-slider (binds to a token with data-nv-var), .nv-calendar, .nv-timepicker (24-hour by default, optional 24H / AM/PM switch, value always HH:MM), and .nv-picker with .nv-menu--listbox (search, type-ahead, keys). All render without niveus.js except where noted. GUIDELINES.md is the normative rulebook for people and AI agents. check.py, build.py and build.py --check pass. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
114 lines
6.1 KiB
CSS
114 lines
6.1 KiB
CSS
/* ==========================================================================
|
|
Niveus — Materials
|
|
--------------------------------------------------------------------------
|
|
A material is a surface treatment: what it is made of, not where it sits.
|
|
Elevation answers "how far from the canvas"; material answers "what does
|
|
light do when it hits this".
|
|
|
|
solid opaque, stable. The default. Content lives here.
|
|
elevated solid with depth and a top highlight. Separated from context.
|
|
inset recessed into its parent. Fields, wells, tracks.
|
|
frosted translucent, moderately blurred, bevelled. Chrome that sits
|
|
over content: bars, docks, launchers, notifications, menus.
|
|
glass more translucent, lightly blurred. Contextual layers where the
|
|
content behind should stay legible: overlays, hover cards.
|
|
glaze glass with a dial. How frosted it is belongs to whoever is
|
|
looking at it, so it is one number (--nv-glass-frost) rather
|
|
than a fixed recipe, and it carries a rim that catches the
|
|
light and follows the pointer.
|
|
|
|
Niveus is a solid system with glass used sparingly. Windows, cards, dialogs
|
|
and everything that holds content are solid; translucency is reserved for
|
|
the chrome that floats over them. Translucency has a cost — it tints
|
|
whatever is behind it and forces the GPU to composite — and used everywhere
|
|
it stops meaning "this floats".
|
|
|
|
Sheen is the light falling across a raised face. It is laid over a
|
|
surface's own color as background-image, so a surface keeps its role color
|
|
and gains the gradient; anything that does not draw gradients simply shows
|
|
the role color.
|
|
========================================================================== */
|
|
|
|
:root {
|
|
/* --- Blur ---------------------------------------------------------------- */
|
|
--nv-blur-sm: 12px;
|
|
--nv-blur-md: 24px;
|
|
--nv-blur-lg: 36px;
|
|
--nv-blur-xl: 56px;
|
|
|
|
/* Backdrops lose saturation when blurred; a touch of saturate() puts the
|
|
color back so frosted surfaces do not read as gray films. Moderate on
|
|
purpose: the blur says "this floats", it is not the look itself. */
|
|
--nv-backdrop-saturate: 180%;
|
|
--nv-backdrop-frosted: blur(var(--nv-blur-md)) saturate(var(--nv-backdrop-saturate));
|
|
--nv-backdrop-glass: blur(var(--nv-blur-sm)) saturate(var(--nv-backdrop-saturate));
|
|
|
|
/* --- Frost ------------------------------------------------------------------
|
|
The one input the glaze material derives from: 0 is clear glass, 1 is
|
|
nearly opaque frost. Set it on :root for the whole site, on a subtree to
|
|
change just that region, or bind a slider to it with data-nv-var and let
|
|
the person looking choose. The glaze recipe reads it where it is used,
|
|
so a subtree override always reaches the surfaces inside it. */
|
|
--nv-glass-frost: 0.5;
|
|
--nv-glaze-blur-max: 56px; /* blur at frost 1 */
|
|
--nv-glaze-tint-min: 4%; /* tint opacity at frost 0 */
|
|
--nv-glaze-tint-max: 78%; /* tint opacity at frost 1 */
|
|
--nv-glaze-rim: 1.5px;
|
|
|
|
/* --- Sheen ------------------------------------------------------------------
|
|
raised neutral controls: buttons, the selected tab, a titlebar
|
|
filled saturated fills: primary and danger buttons, checked marks
|
|
surface large surfaces: windows, dialogs, cards. Brightest along the
|
|
top edge, easing through the middle and settling into a faint
|
|
shade at the foot, so a panel reads as a curved, lit body
|
|
rather than as a flat sheet.
|
|
knob a round thumb: lit from above, shaded towards its rim */
|
|
--nv-sheen-raised: linear-gradient(var(--nv-color-sheen-top), var(--nv-color-sheen-bottom));
|
|
--nv-sheen-filled: linear-gradient(var(--nv-color-sheen-strong-top), var(--nv-color-sheen-strong-bottom));
|
|
--nv-sheen-surface: linear-gradient(var(--nv-color-sheen-top), transparent 7rem, transparent 55%, var(--nv-color-sheen-bottom));
|
|
--nv-sheen-knob: radial-gradient(circle at 50% 22%, var(--nv-color-highlight-strong), transparent 45%), radial-gradient(circle at 50% 30%, transparent 40%, var(--nv-color-knob-shade));
|
|
--nv-backdrop-scrim: blur(var(--nv-blur-sm)) saturate(140%);
|
|
|
|
/* --- Material recipes -----------------------------------------------------
|
|
Each recipe is the full set of properties that defines the material.
|
|
Applied by the .nv-material-* classes in components/surface.css. */
|
|
--nv-material-solid-bg: var(--nv-color-surface);
|
|
--nv-material-solid-border: var(--nv-color-border);
|
|
--nv-material-solid-shadow: var(--nv-elevation-0);
|
|
|
|
--nv-material-elevated-bg: var(--nv-color-surface-elevated);
|
|
--nv-material-elevated-border: var(--nv-color-border-subtle);
|
|
--nv-material-elevated-shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-2);
|
|
|
|
--nv-material-inset-bg: var(--nv-color-surface-inset);
|
|
--nv-material-inset-border: var(--nv-color-border-subtle);
|
|
--nv-material-inset-shadow: var(--nv-elevation-inset-md), var(--nv-ledge);
|
|
|
|
--nv-material-frosted-bg: var(--nv-color-material-frosted);
|
|
--nv-material-frosted-border: var(--nv-color-material-border);
|
|
--nv-material-frosted-shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-3);
|
|
|
|
--nv-material-glass-bg: var(--nv-color-material-glass);
|
|
--nv-material-glass-border: var(--nv-color-material-border);
|
|
--nv-material-glass-shadow: var(--nv-highlight-top-strong), var(--nv-outline), var(--nv-elevation-4);
|
|
}
|
|
|
|
/* Where translucency cannot be honoured — reduced transparency, or a browser
|
|
without backdrop-filter — materials fall back to their solid equivalents
|
|
rather than becoming unreadable washes. */
|
|
@media (prefers-reduced-transparency: reduce) {
|
|
:root {
|
|
--nv-material-frosted-bg: var(--nv-color-surface-elevated);
|
|
--nv-material-glass-bg: var(--nv-color-surface-elevated);
|
|
--nv-backdrop-frosted: none;
|
|
--nv-backdrop-glass: none;
|
|
--nv-backdrop-scrim: none;
|
|
}
|
|
}
|
|
|
|
@supports not (backdrop-filter: blur(1px)) {
|
|
:root {
|
|
--nv-material-frosted-bg: var(--nv-color-surface-elevated);
|
|
--nv-material-glass-bg: var(--nv-color-surface-elevated);
|
|
}
|
|
}
|