@sunpool-as/tokens

SunPools design-tokens — farger, typografi, radius, skygger og bevegelse — som CSS-variabler, Tailwind 4-tema, Tailwind 3-preset og JS/TS. Kilden er Knowits designmanual. Ingen React: pakken virker også i jsPDF, ExcelJS, e-postmaler og Supabase edge functions.

Bruker appen @sunpool-as/ui, trenger du bare fonts.css herfra — resten kommer via @sunpool-as/ui/styles.css. Se docs/bruk-i-app.md.

Installer

npm install @sunpool-as/tokens

Pakken er ikke publisert ennå; se docs/distribusjon.md for registeret.

Pakken drar ikke inn Tailwind: tailwindcss er en valgfri peer, og tailwindcss-animate er limt inn i presetet. Avhengighetene er bare CSS (@fontsource-variable/hanken-grotesk, tw-animate-css).

CSS

Tailwind 4:

@import "tailwindcss";
@import "@sunpool-as/tokens/fonts.css";
@import "@sunpool-as/tokens/tailwind.css"; /* eller @sunpool-as/ui/styles.css hvis appen bruker komponentene */

Tailwind 3 (bro under migrering):

// tailwind.config.ts
import sunpool from "@sunpool-as/tokens/tailwind-preset";
export default { presets: [sunpool], content: ["./index.html", "./src/**/*.{ts,tsx}"] };

@import "@sunpool-as/tokens/fonts.css";
@import "@sunpool-as/tokens/css";
@import "@sunpool-as/tokens/base.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

| Sti | Innhold | |---|---| | @sunpool-as/tokens/css | :root og .dark: semantiske farger med shadcn-navn (HSL-kanaler), primitiver --sp-color-* (hex), --radius, --sp-font-*, --sp-duration-*, --sp-ease-* | | @sunpool-as/tokens/tailwind.css | Tailwind 4-tema (@theme inline), tw-animate-css, dark-variant og grunnstiler | | @sunpool-as/tokens/tailwind-preset | Tailwind 3-preset (ESM og CJS) med tailwindcss-animate innebygd (MIT, ingen ekstra avhengighet) | | @sunpool-as/tokens/base.css | Grunnstiler for Tailwind 3 (ramme, bakgrunn, tekst, font) | | @sunpool-as/tokens/fonts.css | Hanken Grotesk, selvhostet (Fontsource) | | @sunpool-as/tokens/legacy.css | Gamle variabelnavn for migrering (--trust-green, --shadow-card, --gradient-* …). Utfaset, fjernes i 2.0 | | @sunpool-as/tokens/tokens.json | Alle tokens som løste verdier (dokumentasjon, ev. Figma) |

Klassene: semantiske (bg-primary, text-muted-foreground, bg-success-subtle text-success-strong), merkevareskalaen 50–950 (bg-trust, bg-energy, text-trust, bg-positive-blue-50, bg-sand), typeskala (text-display|h1|h2|h3|h4|lead|body|small|caption), shadow-card/shadow-glow og skyggeskalaen tonet med Neutral dark. Presetet og v4-temaet har de samme skyggeverdiene; bare navnene følger Tailwind-versjonen (v3 shadow-sm = v4 shadow-xs, v3 shadow = v4 shadow-sm). Byttet til tokens gir derfor litt lysere skygger i steg 1, og Tailwind 4-kodemoden endrer dem ikke.

JS

import {
  palette,          // hex per familie og trinn: palette.trust[900] === "#0A3532"
  paletteRgb,       // [r, g, b] til jsPDF: doc.setTextColor(...paletteRgb.trust[900])
  semanticColors,   // { light, dark } med samme struktur som CSS-variablene
  chartColors,      // { light, dark }: 8 diagramfarger, fast familie per plass
  officialColors,   // manualens 17 farger med navn
  colorCombinations,// de 11 godkjente fargeparene
  logoColors,
  typeScale, fontFamily, fontWeight, radius, shadows, durations, easings,
  contrast,         // WCAG-kontrast mellom to hex-farger: contrast("#0A3532", "#FBF8F3") ≈ 12,6
  hexToRgb, luminance,
  twMergeExtension, // til tailwind-merge: extendTailwindMerge({ extend: twMergeExtension })
} from "@sunpool-as/tokens";

Regler

• Manualens offisielle farger endres aldri. De er merket official: true i src/color/primitives.json og voktet av tester. Brytes en kontrasttest, endre den semantiske koblingen i src/color/light.json/dark.json.
• accent er en nøytral hover-flate, ikke Energy. Energy er bg-energy; tekst på Energy er text-trust.
• Endret verdi på et semantisk token er en minor med før/etter-hex i changesetet. Fjernet eller omdøpt token er en major.

Utvikling

pnpm --filter @sunpool-as/tokens build   # src/ → dist/
pnpm --filter @sunpool-as/tokens test    # kontrast, offisielle farger, snapshot

Snapshotene i test/__snapshots__/ oppdateres med vitest -u etter en bevisst endring — les diffen. Alt i dist/ er generert.

Mer: Storybook (pnpm storybook, sidene under Grunnlag) · ADR 0001