mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34:26 +00:00
7908c55245
Tokens - --nv-color-glow role (light and dark) and a glow scale: --nv-glow-sm/md/lg, --nv-glow-blur-*, --nv-glow-spread-*, --nv-glow-strength - --nv-stagger (0ms under reduced motion) and --nv-duration-shimmer Components - Card: --lit (lit top edge in --nv-card-tint), --glow, --spotlight (light follows the pointer); light layers combine with every elevation - Tile: small raised key for a glyph or product mark; --solid, --glow, sizes - Avatar: raised disc with --ring / --glow, sizes, __status, avatar group - Stat: readings set into one recessed well (.nv-stat-group) - Steps: markers set into a rail; done steps light their stretch; vertical - Deck: one surface in front of stacked layers of its kind - Skeleton: recessed placeholder with a slow sweep, still under reduced motion - Text: .nv-text-lit and .nv-text-lit--accent Continuity - .nv-reveal / .nv-reveal-group: content arrives once as it scrolls into view (nv-arrive keyframe); niveus.js marks pending state, so nothing is hidden without the script or under reduced motion - niveus.js tracks the pointer for .nv-card--spotlight README and REFERENCE document every new class, token and attribute; tools/check.py passes and dist/ is rebuilt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
69 lines
3.7 KiB
CSS
69 lines
3.7 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/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/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);
|