docs/Website: Niveus at upstream f340d56; fonts are binary
The vendored copy of Niveus, the site's design system, brought up to the current upstream (github.com/Nexoniarz/Niveus, 2026-10-18). The tree under docs/Website/niveus is upstream's byte for byte. .gitattributes says `* text eol=lf` and listed the binary types it knew, and woff2 was not one of them: Niveus's InstrumentSans-Italic had a CR LF pair in its compressed data, and committing it turned that into LF and the font into garbage. woff, woff2, otf, ico, gif, webp, pdf and wasm are binary now. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01S1giNvrHTrPMPw7V6x1kQ4
This commit is contained in:
Nexoniarz
parent
a1c965da1e
commit
a8215149a3
56 changed files with 8139 additions and 279 deletions
|
|
@ -17,7 +17,7 @@ Everything ships inside the `niveus` cascade layer, so unlayered application
|
|||
styles win without `!important`.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="dist/niveus.css">
|
||||
<link rel="stylesheet" href="dist/niveus.css"> <!-- keep fonts/ beside dist/ -->
|
||||
<script src="niveus/niveus.js" defer></script> <!-- optional -->
|
||||
<html data-theme="dark"> <!-- omit to follow the OS -->
|
||||
<style>:root { --nv-brand: #d92e3f; }</style> <!-- the whole identity -->
|
||||
|
|
@ -76,6 +76,9 @@ States come from the element: `disabled`, `aria-disabled`, `aria-busy="true"`
|
|||
| `.nv-card--frosted` | glass card | Translucent, for use over imagery or a bed. |
|
||||
| `.nv-card--interactive` | clickable card | Lifts on hover, sinks on press. |
|
||||
| `.nv-card--flush` | edge-to-edge card | Removes part padding, for media or tables. |
|
||||
| `.nv-card--lit` | accent-edge card, colored top border | A strip of light along the top edge in the card's tint, spilling a little down the face. For a card that belongs to something with a color. |
|
||||
| `.nv-card--glow` | glowing card, highlighted card | Gives off its tint. For the one card that is *on* — the current plan, the live item. |
|
||||
| `.nv-card--spotlight` | spotlight card, cursor glow | A soft light follows the pointer across the face (needs `niveus.js`). Showcases only. |
|
||||
| `.nv-card__header` | card header | |
|
||||
| `.nv-card__title` | card title | |
|
||||
| `.nv-card__subtitle` | card subtitle, supporting text | |
|
||||
|
|
@ -86,6 +89,19 @@ States come from the element: `disabled`, `aria-disabled`, `aria-busy="true"`
|
|||
| `.nv-card__link` | stretched link | Expands one link's hit area over the whole card. |
|
||||
| `.nv-card-grid` | responsive card grid | Auto-fitting, equal-height columns. |
|
||||
|
||||
`--lit`, `--glow` and `--spotlight` combine with every elevation and with each
|
||||
other. They take `--nv-card-tint` (the accent unless set on the card).
|
||||
|
||||
## Deck
|
||||
|
||||
| Class | Known as | Does |
|
||||
| --- | --- | --- |
|
||||
| `.nv-deck` | card stack, stacked cards | One surface in front of others of its kind. Every child shares one grid cell. |
|
||||
| `.nv-deck__layer` | stack layer | A decorative card behind the front one, stepping back and dimming with depth. Up to two; mark them `aria-hidden="true"`. |
|
||||
|
||||
Hidden `.nv-tab-panel`s can live in a deck together: the front surface is
|
||||
whichever one is showing.
|
||||
|
||||
## Dialog
|
||||
|
||||
Built on native `<dialog>`; open with `showModal()` or `nv.openDialog()`.
|
||||
|
|
@ -136,7 +152,7 @@ the same anchor through `--nv-anchor`.
|
|||
| `.nv-nav__badge` | count badge, notification badge | |
|
||||
| `.nv-nav__spacer` | flexible spacer | Pushes what follows to the end. |
|
||||
| `.nv-nav-tabs` | tab list, segmented tabs | Inset track; the selected tab lifts out of it. |
|
||||
| `.nv-tab-panel` | tab panel | Carries the shared content name so panels cross-fade. |
|
||||
| `.nv-tab-panel` | tab panel | Hands over to the next panel inside the same box when `nv.selectTab` switches tabs. |
|
||||
| `.nv-breadcrumbs` | breadcrumbs | |
|
||||
|
||||
## Disclosure
|
||||
|
|
@ -173,6 +189,61 @@ Set `--nv-scroller-item` for item width, `--nv-scroller-fade` for the edge fade.
|
|||
| `.nv-badge--square` | square badge | |
|
||||
| `.nv-badge__dot` | status dot | |
|
||||
|
||||
## Tile
|
||||
|
||||
| Class | Known as | Does |
|
||||
| --- | --- | --- |
|
||||
| `.nv-tile` | icon tile, icon badge, feature icon | A small raised key holding one glyph: tinted face, glyph in its tint. Not interactive. |
|
||||
| `.nv-tile--solid` | filled icon tile | Saturated face with a light glyph. |
|
||||
| `.nv-tile--glow` | glowing icon tile | Lit from inside. |
|
||||
| `.nv-tile--sm` `.nv-tile--lg` `.nv-tile--xl` | tile sizes | 32 / 56 / 72px; default 44px. |
|
||||
|
||||
`--nv-tile-tint` picks the color. An `<img>` inside fills the key, an `<svg>`
|
||||
takes half of it.
|
||||
|
||||
## Avatar
|
||||
|
||||
| Class | Known as | Does |
|
||||
| --- | --- | --- |
|
||||
| `.nv-avatar` | avatar, profile picture | Round raised disc holding an `<img>` or initials. |
|
||||
| `.nv-avatar--ring` | avatar ring, story ring | A ring in `--nv-avatar-tint`, set off by a gap of surface. |
|
||||
| `.nv-avatar--glow` | glowing avatar | The ring, giving off its tint. |
|
||||
| `.nv-avatar--sm` `.nv-avatar--lg` `.nv-avatar--xl` | avatar sizes | 28 / 64 / 96px; default 40px. |
|
||||
| `.nv-avatar__status` | presence dot | Grey at rest. |
|
||||
| `.nv-avatar__status--online` | online indicator | Lit green. |
|
||||
| `.nv-avatar-group` | avatar stack, facepile | Overlapping row. |
|
||||
|
||||
## Stat
|
||||
|
||||
| Class | Known as | Does |
|
||||
| --- | --- | --- |
|
||||
| `.nv-stat-group` | stats row, KPI strip, readout | One recessed well holding several readings, split by hairlines. Wraps on its own. Use a `<dl>`. |
|
||||
| `.nv-stat` | stat, metric, KPI | One reading: label, value, optional delta, in that order. |
|
||||
| `.nv-stat__label` | metric label | `<dt>` inside a group. |
|
||||
| `.nv-stat__value` | metric value, big number | `<dd>`; tabular numerals. |
|
||||
| `.nv-stat__delta` | change, trend | |
|
||||
| `.nv-stat__delta--up` `.nv-stat__delta--down` | positive / negative trend | Success and danger text. |
|
||||
|
||||
## Steps
|
||||
|
||||
| Class | Known as | Does |
|
||||
| --- | --- | --- |
|
||||
| `.nv-steps` | stepper, timeline, process, progress steps | Markers set into a rail cut into the surface. Horizontal, vertical below 40rem. Use an `<ol>`. |
|
||||
| `.nv-steps--vertical` | vertical stepper, timeline | Always vertical. |
|
||||
| `.nv-steps__item` | step | `data-state="done"` lights it and its stretch of rail; `aria-current="step"` lights the marker only. |
|
||||
| `.nv-steps__marker` | step number, step knob | |
|
||||
| `.nv-steps__body` | step content | |
|
||||
| `.nv-steps__title` | step title | |
|
||||
| `.nv-steps__text` | step description | |
|
||||
|
||||
## Skeleton
|
||||
|
||||
| Class | Known as | Does |
|
||||
| --- | --- | --- |
|
||||
| `.nv-skeleton` | skeleton, loading placeholder, shimmer | A shallow well where content will be, with a slow band of light crossing it. Still under reduced motion. |
|
||||
| `.nv-skeleton--text` | text line placeholder | The last of several lines ends short. |
|
||||
| `.nv-skeleton--circle` | avatar placeholder | |
|
||||
|
||||
## Table
|
||||
|
||||
| Class | Known as | Does |
|
||||
|
|
@ -197,6 +268,25 @@ Set `--nv-scroller-item` for item width, `--nv-scroller-fade` for the edge fade.
|
|||
|
||||
Set `--nv-bed-tint` to lead with a color other than the accent.
|
||||
|
||||
## Window
|
||||
|
||||
| Class | Known as | Does |
|
||||
| --- | --- | --- |
|
||||
| `.nv-window` | window, app frame | A framed, solid window. Content never sits on glass. |
|
||||
| `.nv-window--inactive` | unfocused window | Greys the lights and the title, drops one elevation. Hovering the lights restores their color. |
|
||||
| `.nv-window__titlebar` | titlebar, header bar | Raised strip: controls · title · actions, with the title on the window's center line. |
|
||||
| `.nv-window__controls` | traffic lights, window buttons | Group at the start of the bar. Its glyphs show while the pointer is over the group. |
|
||||
| `.nv-window__control` | window button | One light. Needs `aria-label`, plus one of the three below. |
|
||||
| `.nv-window__control--close` | close button | Red, ×. Always first. |
|
||||
| `.nv-window__control--minimize` | minimize button | Yellow, −. Always second. |
|
||||
| `.nv-window__control--zoom` | zoom, maximize button | Green, +. Always third. |
|
||||
| `.nv-window__title` | window title | Truncates. |
|
||||
| `.nv-window__actions` | titlebar actions | Trailing slot; put `.nv-button--ghost.nv-button--sm` here. |
|
||||
| `.nv-window__body` | window content | Fills the rest and scrolls. |
|
||||
|
||||
The three lights keep fixed colors on purpose: they are found by position and
|
||||
color before they are read, so they never take the brand.
|
||||
|
||||
## Surface, material and elevation
|
||||
|
||||
| Class | Known as | Does |
|
||||
|
|
@ -205,7 +295,7 @@ Set `--nv-bed-tint` to lead with a color other than the accent.
|
|||
| `.nv-material-solid` | opaque surface | Content lives here. The default. |
|
||||
| `.nv-material-elevated` | raised surface | Separated from its context. |
|
||||
| `.nv-material-inset` | recessed surface | Fields, wells, tracks. |
|
||||
| `.nv-material-frosted` | frosted glass, blur backdrop | Chrome that content passes under. |
|
||||
| `.nv-material-frosted` | frosted glass, blur backdrop | Chrome that floats over content: bars, docks, launchers, notifications, menus. Moderate blur, bevelled rim. |
|
||||
| `.nv-material-glass` | glass | Contextual layers where content behind must stay legible. |
|
||||
| `.nv-elevation-0` `.nv-elevation-1` `.nv-elevation-2` | elevation / z-depth | flush · resting · raised |
|
||||
| `.nv-elevation-3` `.nv-elevation-4` `.nv-elevation-5` | elevation / z-depth | floating · lifted · overlay |
|
||||
|
|
@ -215,6 +305,14 @@ Set `--nv-bed-tint` to lead with a color other than the accent.
|
|||
|
||||
Material and elevation are independent: combine freely.
|
||||
|
||||
Niveus is solid, with glass used sparingly: anything that holds content
|
||||
(windows, cards, dialogs) is solid, and only chrome floating over it is
|
||||
frosted. Raised things are bevelled — lit along the top edge, shaded along the
|
||||
bottom, with a contact outline — and carry a sheen across their face. When
|
||||
composing your own raised element, use `box-shadow: var(--nv-bevel),
|
||||
var(--nv-outline), var(--nv-elevation-2)` with `background-image:
|
||||
var(--nv-sheen-raised)` over its role color.
|
||||
|
||||
## Type roles
|
||||
|
||||
| Class | Known as | Size |
|
||||
|
|
@ -225,10 +323,19 @@ Material and elevation are independent: combine freely.
|
|||
| `.nv-body` | body copy | 15px |
|
||||
| `.nv-label` | label, UI text | 13px |
|
||||
| `.nv-caption` | caption, secondary text | 12px |
|
||||
| `.nv-overline` | overline, eyebrow, kicker | 12px uppercase |
|
||||
| `.nv-overline` | overline, eyebrow, engraved label | 11px mono, uppercase, wide tracking |
|
||||
| `.nv-code` | code, monospace | 13px |
|
||||
| `.nv-text-primary` `.nv-text-secondary` `.nv-text-tertiary` | text color roles | Emphasis, not size. |
|
||||
| `.nv-text-accent` `.nv-text-success` `.nv-text-warning` `.nv-text-danger` | semantic text colors | |
|
||||
| `.nv-text-lit` | gradient text, metallic text | Lit from above, settling into the accent. One display line per page. |
|
||||
| `.nv-text-lit--accent` | accent gradient text | The accent alone, lit from above — for a phrase inside a display line. |
|
||||
|
||||
## Reveal
|
||||
|
||||
| Class | Known as | Does |
|
||||
| --- | --- | --- |
|
||||
| `.nv-reveal` | scroll reveal, animate on scroll | Rises and fades in once, as it scrolls into view. Needs `niveus.js`; without it, or under reduced motion, nothing is hidden. |
|
||||
| `.nv-reveal-group` | staggered reveal | Its children arrive one after another, `--nv-stagger` apart. |
|
||||
|
||||
## Layout utilities
|
||||
|
||||
|
|
@ -243,7 +350,8 @@ Material and elevation are independent: combine freely.
|
|||
| `.nv-truncate` | ellipsis, text truncation | One line with an ellipsis. |
|
||||
| `.nv-prose` | prose, measure | Readable line length and leading. |
|
||||
| `.nv-visually-hidden` | screen-reader-only, sr-only | Available to assistive tech, invisible on screen. |
|
||||
| `.nv-continuous` | cross-fading region | Content that should cross-fade in place when it changes. |
|
||||
| `.nv-continuous` | content region | Content that hands over in place (out, then in) when it changes. |
|
||||
| `.nv-content` | view-transition class | Not an HTML class: the `view-transition-class` that gives a named element the hand-over animation. Set `view-transition-class: nv-content` on your own named element to get it. |
|
||||
| `.nv-carried` | (view-transition class) | Applied to nav items so they ride above a travelling marker. |
|
||||
| `.nv-travelling` | (view-transition class) | Applied to a selection marker so it travels below the labels. |
|
||||
|
||||
|
|
@ -274,9 +382,14 @@ danger danger-hover danger-active danger-subtle danger-border
|
|||
danger-text on-danger
|
||||
|
||||
shadow-ambient shadow-penumbra shadow-umbra shadow-inset
|
||||
highlight highlight-strong elevation-tint-1 … -5
|
||||
highlight highlight-strong lowlight outline elevation-tint-1 … -5
|
||||
sheen-top sheen-bottom sheen-strong-top sheen-strong-bottom
|
||||
knob knob-shade
|
||||
material-frosted material-glass material-border
|
||||
window-close window-minimize window-zoom window-inactive
|
||||
window-control-ring window-glyph
|
||||
focus-ring focus-ring-contrast selection
|
||||
glow
|
||||
```
|
||||
|
||||
`on-*` is the text that goes on top of that color, and is derived — never set
|
||||
|
|
@ -292,8 +405,9 @@ it by hand.
|
|||
| `--nv-contrast-pivot` | `0.7` | Lightness where a color can no longer carry a label. |
|
||||
| `--nv-contrast-dark` / `-light` | `0.53` / `0.78` | How far either side a color is pushed. |
|
||||
|
||||
`--nv-palette-{neutral|accent|success|warning|danger}-{0…1000}` are raw values.
|
||||
Components must never reference them.
|
||||
`--nv-palette-{neutral|accent|success|warning|danger}-{0…1000}` and
|
||||
`--nv-palette-window-{close|minimize|zoom}` are raw values. Components must
|
||||
never reference them.
|
||||
|
||||
### Scales
|
||||
|
||||
|
|
@ -304,24 +418,28 @@ Components must never reference them.
|
|||
| `--nv-font-size-` | `2xs xs sm md lg xl 2xl 3xl 4xl 5xl` |
|
||||
| `--nv-font-weight-` | `regular medium semibold bold` |
|
||||
| `--nv-line-height-` | `tight snug normal relaxed` |
|
||||
| `--nv-letter-spacing-` | `tighter tight normal wide wider` |
|
||||
| `--nv-font-` | `display heading title body label caption code` (composite shorthands) |
|
||||
| `--nv-font-family-` | `sans mono` |
|
||||
| `--nv-letter-spacing-` | `tighter tight normal wide wider engraved` |
|
||||
| `--nv-font-` | `display heading title body label caption code engraved` (composite shorthands) |
|
||||
| `--nv-font-family-` | `sans` (Instrument Sans) `mono` (JetBrains Mono), both shipped in `fonts/` |
|
||||
| `--nv-measure` | `-narrow` · `--nv-measure` · `-wide` |
|
||||
| `--nv-control-height-` | `sm md lg` — also `control-padding-` and `control-gap-` |
|
||||
| `--nv-elevation-` | `0 1 2 3 4 5`, `inset-sm` `inset-md` `inset-lg` |
|
||||
| `--nv-highlight-` | `top` `top-strong` `edge` |
|
||||
| bevel | `--nv-bevel` (lit top + shaded bottom) · `--nv-lowlight-bottom` · `--nv-outline` (contact line) · `--nv-ledge` (lit lower lip of a recess) |
|
||||
| `--nv-sheen-` | `raised filled surface knob` — gradients laid over a role color as `background-image` |
|
||||
| `--nv-blur-` | `sm md lg xl` — also `backdrop-frosted` `backdrop-glass` `backdrop-scrim` |
|
||||
| `--nv-material-` | `{solid,elevated,inset,frosted,glass}-{bg,border,shadow}` |
|
||||
| `--nv-glow-` | `sm md lg` (accent halos) · `blur-sm/md/lg` `spread-sm/md/lg` (geometry for a tinted glow) · `strength` (how much tint a glow carries) |
|
||||
|
||||
### Motion
|
||||
|
||||
| Family | Steps |
|
||||
| --- | --- |
|
||||
| `--nv-duration-` | `instant fast quick normal slow slower travel expand theme` |
|
||||
| `--nv-duration-` | `instant fast quick normal slow slower travel expand theme shimmer` |
|
||||
| `--nv-ease-` | `standard entrance exit spring emphasized linear` |
|
||||
| `--nv-transition-` | `colors depth control surface expand` (composites) |
|
||||
| displacement | `--nv-lift-hover` `--nv-press-depth` `--nv-travel-sm/md/lg` |
|
||||
| sequence | `--nv-stagger` — the gap between siblings arriving one after another |
|
||||
|
||||
`prefers-reduced-motion` collapses every duration and displacement at the token
|
||||
level. Components never opt in individually.
|
||||
|
|
@ -332,7 +450,9 @@ level. Components never opt in individually.
|
|||
`--nv-border-width-strong` · `--nv-target-min` · `--nv-layout-gutter` ·
|
||||
`--nv-layout-max-width` · `--nv-selection-name` · `--nv-anchor` ·
|
||||
`--nv-button-offset` · `--nv-bed-tint` · `--nv-scroller-item` ·
|
||||
`--nv-scroller-fade` · `--nv-content-name`
|
||||
`--nv-scroller-fade` · `--nv-content-name` · `--nv-card-tint` ·
|
||||
`--nv-tile-tint` · `--nv-avatar-tint` · `--nv-pointer-x` / `--nv-pointer-y`
|
||||
(set by `niveus.js`) · `--nv-reveal-index` (set by `niveus.js`)
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -343,14 +463,14 @@ everything still renders — state changes simply arrive instead of travelling.
|
|||
|
||||
| Function | Signature | Does |
|
||||
| --- | --- | --- |
|
||||
| `nv.transition` | `(update, { direction, kind }) => Promise` | Runs `update` inside a view transition so the change can be followed. `direction` is `"forward"`/`"backward"`; `kind: "theme"` slows the cross-fade. Falls back to running `update` directly under reduced motion or without API support. |
|
||||
| `nv.transition` | `(update, { direction, kind, scope }) => Promise` | Runs `update` inside a view transition so the change can be followed. `direction` is `"forward"`/`"backward"`; `kind: "theme"` slows the cross-fade; `scope` is the selection group (or list of groups) whose marker should travel — pass the group whose `aria-current`/`aria-selected` the update moves. Without `scope` nothing is lifted and the change cross-fades in place. Falls back to running `update` directly under reduced motion or without API support. |
|
||||
| `nv.setTheme` | `("light" \| "dark" \| "system") => Promise` | Cross-fades the whole surface into the new appearance and fires `nv:theme` on `<html>`. |
|
||||
| `nv.syncThemeControls` | `(theme) => void` | Sets `aria-pressed` on every `[data-nv-theme]`. |
|
||||
| `nv.openDialog` | `(dialog \| id, trigger?) => dialog` | `showModal()`, plus a transform origin so the dialog expands out of its trigger. |
|
||||
| `nv.selectTab` | `(tablist, tab) => Promise` | Moves selection and its panel, with direction. |
|
||||
| `nv.initScroller` | `(frame) => void` | Wires one scroller's controls. |
|
||||
| `nv.liftLabels` | `(scope) => void` | Names navigation items so a travelling marker passes behind them. |
|
||||
| `nv.wire` | `(scope = document) => void` | Applies all of the below. Runs once on load; call again after injecting markup. |
|
||||
| `nv.liftLabels` | `(scope) => Element[]` | Names the navigation items in `scope` so a travelling marker passes behind them, and returns them. `nv.transition` does this for its `scope` and removes the names afterwards. |
|
||||
| `nv.wire` | `(scope = document) => void` | Applies all of the below, and starts watching `.nv-reveal` / `.nv-reveal-group`. Runs once on load; call again after injecting markup. |
|
||||
| `nv.prefersReducedMotion` | `() => boolean` | |
|
||||
|
||||
### Data attributes
|
||||
|
|
@ -367,19 +487,22 @@ everything still renders — state changes simply arrive instead of travelling.
|
|||
| `data-scrolled` | `.nv-nav` | Set by the application on scroll; gives the bar its shadow. |
|
||||
| `data-nv-direction` | `<html>` | Set during a transition by `nv.transition`. |
|
||||
| `data-nv-transition` | `<html>` | `"theme"` during an appearance change. |
|
||||
| `data-nv-reveal` | revealed element | `pending` while waiting to scroll into view, `shown` while arriving; removed once it has. Set by `niveus.js`. |
|
||||
| `data-nv-travelling` | selection group | Set by `nv.transition` on each `scope` for the length of the change; names its marker. |
|
||||
|
||||
---
|
||||
|
||||
## Rules that bite
|
||||
|
||||
1. **`view-transition-name` must be unique per document.** A duplicate makes
|
||||
the browser skip the transition entirely. Each selection group needs its own
|
||||
`--nv-selection-name`; `.nv-nav-tabs` defaults to `nv-tabs-selection` and
|
||||
everything else to `nv-selection`, which is enough for one of each per page.
|
||||
the browser skip the transition entirely. Markers are only named while their
|
||||
group is in `scope`, so this only bites when one transition moves two groups
|
||||
at once: give each its own `--nv-selection-name`. `.nv-nav-tabs` defaults
|
||||
to `nv-tabs-selection` and everything else to `nv-selection`.
|
||||
2. **A menu and its trigger must name the same anchor** through `--nv-anchor`,
|
||||
and the value must be unique per pair.
|
||||
3. **Only one `.nv-tab-panel` may be visible at a time** — hide the rest with
|
||||
`hidden`. They share one content name.
|
||||
3. **Hide inactive `.nv-tab-panel`s with `hidden`.** `nv.selectTab` relies
|
||||
on it to know which panel is leaving.
|
||||
4. **Never reference `--nv-palette-*` from application code.** It is raw, and
|
||||
does not adapt to the appearance.
|
||||
5. **A floating control positioned with `translate`** needs
|
||||
|
|
|
|||
Loading…
Reference in a new issue