mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34:26 +00:00
Add depth and light: glow, tiles, avatars, stats, steps, decks, skeletons, reveal
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>
This commit is contained in:
parent
8de6e261de
commit
7908c55245
19 changed files with 1619 additions and 14 deletions
|
|
@ -95,4 +95,30 @@
|
|||
--nv-focus-ring:
|
||||
0 0 0 1px var(--nv-color-focus-ring-contrast),
|
||||
0 0 0 calc(1px + var(--nv-focus-ring-width)) var(--nv-color-focus-ring);
|
||||
|
||||
/* --- Glow ------------------------------------------------------------------
|
||||
Light a surface emits rather than the shade it casts. Glow is for things
|
||||
that are *on* — a live status, the selected item in a showcase, a lit key —
|
||||
and it always sits beside an elevation, never instead of one: a glowing
|
||||
surface still rests on something.
|
||||
|
||||
The geometry is a scale like elevation. The color is the component's: a
|
||||
tinted surface glows in its own tint, mixed down to --nv-glow-strength. */
|
||||
--nv-glow-strength: 40%;
|
||||
--nv-glow-blur-sm: 12px;
|
||||
--nv-glow-spread-sm: -2px;
|
||||
--nv-glow-blur-md: 28px;
|
||||
--nv-glow-spread-md: -6px;
|
||||
--nv-glow-blur-lg: 64px;
|
||||
--nv-glow-spread-lg: -12px;
|
||||
}
|
||||
|
||||
/* The accent glows are declared on every branded subtree as well as the root:
|
||||
a var() inside a custom property resolves where the property is declared, so
|
||||
a root-only declaration would glow in the root brand everywhere. */
|
||||
:root,
|
||||
[data-nv-brand] {
|
||||
--nv-glow-sm: 0 0 var(--nv-glow-blur-sm) var(--nv-glow-spread-sm) var(--nv-color-glow);
|
||||
--nv-glow-md: 0 0 var(--nv-glow-blur-md) var(--nv-glow-spread-md) var(--nv-color-glow);
|
||||
--nv-glow-lg: 0 0 var(--nv-glow-blur-lg) var(--nv-glow-spread-lg) var(--nv-color-glow);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue