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>
73 lines
3.9 KiB
CSS
73 lines
3.9 KiB
CSS
/* ==========================================================================
|
|
Niveus — a tactile, adaptive interface language.
|
|
Made by Nexoniarz.
|
|
--------------------------------------------------------------------------
|
|
The single entry point. An application links this file and nothing else:
|
|
|
|
<link rel="stylesheet" href="niveus/niveus.css">
|
|
<script src="niveus/niveus.js"></script> — optional, see below
|
|
<html data-theme="dark"> — or omit data-theme to follow the system
|
|
|
|
niveus.js is not required for anything to render. It exists only so state
|
|
changes can be *continuous*: it wraps an update in a view transition so the
|
|
browser can animate between the two states. Without it, every component
|
|
still works — changes simply arrive rather than travel.
|
|
|
|
Everything ships inside the `niveus` cascade layer, so unlayered application
|
|
styles always win without needing !important or selector escalation. The
|
|
sub-layers are ordered below; that statement is what fixes their precedence,
|
|
independently of the order the files happen to load in.
|
|
========================================================================== */
|
|
|
|
@layer niveus.tokens, niveus.theme, niveus.base, niveus.continuity,
|
|
niveus.components, niveus.utilities;
|
|
|
|
/* --- Fonts: the faces Niveus ships, so it reads the same everywhere ---------- */
|
|
@import url("fonts.css");
|
|
|
|
/* --- Tokens: the values, appearance-agnostic ------------------------------- */
|
|
@import url("tokens/color.css") layer(niveus.tokens);
|
|
@import url("tokens/typography.css") layer(niveus.tokens);
|
|
@import url("tokens/spacing.css") layer(niveus.tokens);
|
|
@import url("tokens/radius.css") layer(niveus.tokens);
|
|
@import url("tokens/elevation.css") layer(niveus.tokens);
|
|
@import url("tokens/motion.css") layer(niveus.tokens);
|
|
@import url("tokens/materials.css") layer(niveus.tokens);
|
|
|
|
/* --- Themes: what those values become in each appearance -------------------- */
|
|
@import url("themes/light.css") layer(niveus.theme);
|
|
@import url("themes/dark.css") layer(niveus.theme);
|
|
|
|
/* --- Base: elements, before any component ----------------------------------- */
|
|
@import url("base.css") layer(niveus.base);
|
|
|
|
/* --- Continuity: how one state becomes the next ----------------------------- */
|
|
@import url("continuity.css") layer(niveus.continuity);
|
|
|
|
/* --- Components -------------------------------------------------------------- */
|
|
@import url("components/surface.css") layer(niveus.components);
|
|
@import url("components/button.css") layer(niveus.components);
|
|
@import url("components/input.css") layer(niveus.components);
|
|
@import url("components/slider.css") layer(niveus.components);
|
|
@import url("components/card.css") layer(niveus.components);
|
|
@import url("components/dialog.css") layer(niveus.components);
|
|
@import url("components/navigation.css") layer(niveus.components);
|
|
@import url("components/menu.css") layer(niveus.components);
|
|
@import url("components/picker.css") layer(niveus.components);
|
|
@import url("components/calendar.css") layer(niveus.components);
|
|
@import url("components/timepicker.css") layer(niveus.components);
|
|
@import url("components/disclosure.css") layer(niveus.components);
|
|
@import url("components/scroller.css") layer(niveus.components);
|
|
@import url("components/bed.css") layer(niveus.components);
|
|
@import url("components/badge.css") layer(niveus.components);
|
|
@import url("components/table.css") layer(niveus.components);
|
|
@import url("components/window.css") layer(niveus.components);
|
|
@import url("components/tile.css") layer(niveus.components);
|
|
@import url("components/avatar.css") layer(niveus.components);
|
|
@import url("components/stat.css") layer(niveus.components);
|
|
@import url("components/steps.css") layer(niveus.components);
|
|
@import url("components/deck.css") layer(niveus.components);
|
|
@import url("components/skeleton.css") layer(niveus.components);
|
|
|
|
/* --- Utilities ----------------------------------------------------------------- */
|
|
@import url("utilities.css") layer(niveus.utilities);
|