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:
Nexoniarz 2026-10-18 22:59:25 +02:00
commit 7908c55245
19 changed files with 1619 additions and 14 deletions

View file

@ -200,6 +200,33 @@
view-transition-class: nv-content;
}
/* --- Reveal ------------------------------------------------------------------------
Content arriving as it scrolls into view: it rises a short way and fades in,
once, so a long page is read in the order it was written instead of all at
once. .nv-reveal-group does the same for its children one after another,
--nv-stagger apart.
niveus.js marks what is waiting. Without the script, and under reduced
motion, nothing is ever marked — so nothing is ever hidden. */
.nv-reveal[data-nv-reveal="pending"],
.nv-reveal-group > [data-nv-reveal="pending"] {
opacity: 0;
}
.nv-reveal[data-nv-reveal="shown"],
.nv-reveal-group > [data-nv-reveal="shown"] {
animation: nv-arrive var(--nv-duration-slower) var(--nv-ease-entrance)
calc(var(--nv-reveal-index, 0) * var(--nv-stagger)) both;
}
@keyframes nv-arrive {
from {
opacity: 0;
translate: 0 var(--nv-travel-lg);
}
}
/* Collapsible region for markup that is not a <details>. The 0fr -> 1fr grid
row is the one technique that animates to an unknown content height in every
browser, with no measurement and no script. */