5.17.1 • Published yesterdayCLI

@klodd/ds

Licence

MIT

Version

5.17.1

Deps

Size

578 kB

Vulns

Weekly

Summary Dependency Versions

@klodd/ds

Senast audit: 2026-05-20. Aktiv åtgärdslista: audits/00-summary.md.

Klodd Design System - delade tokens, typografi och komponenter for Klodds appar (Jubb och Ekonom).

Dark-mode-first PWA-designsystem byggt pa Radix Colors. OKLCH-baserade fargramper, pixel-numerisk spacing-konvention och tre-lagers token- arkitektur som inte krocker mellan apps.

Installation

npm install @klodd/ds

Anvandning

Importera hela designsystemet plus en app-specifik tema-fil:

<link rel="stylesheet" href="node_modules/@klodd/ds/css/index.css">
<link rel="stylesheet" href="node_modules/@klodd/ds/css/apps/jubb.css">

Eller via CSS @import:

@import '@klodd/ds/css/index.css';
@import '@klodd/ds/css/apps/jubb.css';

Aktivera tema pa <html>:

<html lang="sv" data-app="jubb" data-theme="dark">

data-app valjer accent-tema (jubb = blue, ekonom = plum). data-theme valjer light/dark mode (light forberedd, dark default).

Token-arkitektur

Tre lager med strikt inkapsling. Komponenter laser ALDRIG primitives direkt - bara semantic-lagret eller app-tokens.

00-primitives.css   raa varden (gray/blue/plum OKLCH ramps,
                    pixel-numerisk space/fs/radius, motion, layout)
10-semantic.css     komponenter laser hardefran (surface/text/border/
                    accent + status + effects + transitions)
apps/<app>.css      per-app accent + surface-overrides (5-15 rader)

Fargsystem

Officiella Radix Colors dark-skalor:

Mauve Dark (neutral) - lila-tonad gra som kompletterar Blue och Plum
Blue Dark (Jubb accent) - sky-blue (#0090ff)
Plum Dark (Ekonom accent) - varm magenta-lila (#ab4aba)
Green/Amber/Red Dark - status (success/warning/danger)

Status-tokens har bade solid-bakgrund (--bg-success/warning/danger) och tonad/border-varianter (--positive/-dim/-border, --negative, --warning).

Lagg till en ny app

Lagg till accent-ramp i css/00-primitives.css om appen ska ha eget farg-spektrum (12 stegs Radix-skala, hue valt for app-identitet).

Skapa css/apps/<appname>.css med fem accent-overrides:

[data-app="<appname>"] {
  --accent-soft:     var(--<color>-3);
  --accent-moderate: var(--<color>-5);
  --accent-9:        var(--<color>-9);
  --accent-10:       var(--<color>-10);
  --accent-text:     var(--<color>-11);
}

Satt data-app="<appname>" i HTML-templaten (eller <html>-tag).
Klart - inga komponentandringar behovs. Komponenter laser bara --accent-* och far automatiskt nya farger.

Komponenter

Komponent	Klass-prefix	Anvandning
Knappar	`.btn`, `.btn--primary/secondary/ghost/danger`	Aktioner
Inputs	`.input`, `.textarea`, `.select`	Formularsfalt
Badges	`.badge`, `.badge--success/warning/danger`, `.score-pill`	Status-pills
Kort	`.card`, `.card--interactive/flush`	Innehallspaneler
Nav	`.bottom-nav`, `.topbar`, `.tab-bar`	Navigation
Feedback	`.toast`, `.empty-state`, `.skeleton`, `.spinner`	Loading + errors
Overlay	`.dialog`, `.sheet`	Modaler + bottom sheets
Icon	`.icon`, `.icon--xs/sm/md/lg/xl`	Lucide + custom SVG
Hero-roll	`.hero-amount[data-animate-roll]`	Display-siffer-animation

Komplett dokumentation

For detaljerad token-referens (vad varje token ska anvandas for/inte anvandas for), komponent-CSS-konventioner och exempel - se DESIGN_TOKENS_GUIDE.md i Jubb-repot.