mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 12:44: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
83
niveus/components/tile.css
Normal file
83
niveus/components/tile.css
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
/* ==========================================================================
|
||||
Niveus — Tile
|
||||
--------------------------------------------------------------------------
|
||||
<span class="nv-tile"><svg …></svg></span>
|
||||
|
||||
A tile is a small raised key that holds one glyph: the icon beside a
|
||||
feature, the mark of a product, the symbol on a stat. It is the physical
|
||||
version of an icon — something with an edge you could press — which is why
|
||||
a row of features reads as a set of objects rather than as clip art.
|
||||
|
||||
.nv-tile soft key: tinted face, the glyph in its tint
|
||||
.nv-tile--solid filled key: saturated face, a light glyph
|
||||
.nv-tile--glow the key is lit from inside
|
||||
.nv-tile--sm / --lg / --xl
|
||||
|
||||
Everything derives from --nv-tile-tint, the accent unless set. A tile is
|
||||
not a button: if it does something, it is an .nv-button--icon.
|
||||
========================================================================== */
|
||||
|
||||
.nv-tile {
|
||||
--nv-tile-tint: var(--nv-color-accent);
|
||||
--_size: 2.75rem;
|
||||
--_radius: var(--nv-radius-md);
|
||||
--_bg: color-mix(in oklab, var(--nv-tile-tint) 16%, var(--nv-color-surface-elevated));
|
||||
--_ink: color-mix(in oklab, var(--nv-tile-tint) 70%, var(--nv-color-text-primary));
|
||||
--_sheen: var(--nv-sheen-raised);
|
||||
--_glow: 0 0 transparent;
|
||||
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex: none;
|
||||
inline-size: var(--_size);
|
||||
block-size: var(--_size);
|
||||
|
||||
background-color: var(--_bg);
|
||||
background-image: var(--_sheen);
|
||||
color: var(--_ink);
|
||||
border: var(--nv-border-width) solid color-mix(in oklab, var(--nv-tile-tint) 30%, var(--nv-color-border-subtle));
|
||||
border-radius: var(--_radius);
|
||||
box-shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-1), var(--_glow);
|
||||
transition: var(--nv-transition-surface);
|
||||
}
|
||||
|
||||
/* Glyphs take half the key; a mark that is itself a picture (an image, a
|
||||
logo) fills it, clipped to the key's corners. */
|
||||
.nv-tile > svg {
|
||||
inline-size: 50%;
|
||||
block-size: 50%;
|
||||
}
|
||||
|
||||
.nv-tile > img {
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
border-radius: inherit;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.nv-tile--solid {
|
||||
--_bg: var(--nv-tile-tint);
|
||||
--_ink: var(--nv-color-on-accent);
|
||||
--_sheen: var(--nv-sheen-filled);
|
||||
}
|
||||
|
||||
.nv-tile--glow {
|
||||
--_glow: 0 0 var(--nv-glow-blur-md) var(--nv-glow-spread-sm)
|
||||
color-mix(in oklab, var(--nv-tile-tint) var(--nv-glow-strength), transparent);
|
||||
}
|
||||
|
||||
.nv-tile--sm {
|
||||
--_size: 2rem;
|
||||
--_radius: var(--nv-radius-sm);
|
||||
}
|
||||
|
||||
.nv-tile--lg {
|
||||
--_size: 3.5rem;
|
||||
--_radius: var(--nv-radius-lg);
|
||||
}
|
||||
|
||||
.nv-tile--xl {
|
||||
--_size: 4.5rem;
|
||||
--_radius: var(--nv-radius-xl);
|
||||
}
|
||||
Loading…
Reference in a new issue