@norges-domstoler/dds-design-tokens

Biblioteket inneholder design tokens brukt i Domstolenes designsystem Elsa: farger, typografi, avstander skygger og størrelser. Design tokens kan brukes i domstolenes tjenester i bl.a. global styling og custom elementer. Ellers er det obligatorisk å bruke komponentbiblioteket dds-components.

🔍 Oversikt

Design tokens består av base-tokens og referanse-tokens. Base-tokens er variabler genererte fra Figma styles og tilsvarer identiteten til domstolene definert i designprofilen.

Referanse-tokens (OBS! under arbeid) bruker base-tokens til å definere logikk for hvordan base-tokens skal brukes videre i komponenter og andre elementer. F.eks., referanse-tokens kan spesifisere hva fokusfargen skal være, eller font og farge for label i skjemakomponenter. Tanken med referanse-tokens er å gjøre det enklere å gjenbruke koden og eventuelt endre på styling i komponenter ved å endre kun på tokens, uten å røre CSS inni komponentene.

📃 Tilgjengelige base-tokens

border
borderRadius
breakpoints
colors
font
fontPackages (kun JS)
grid
iconSizes
innerShadow
outerShadow
spacing

📦 Installasjon

npm install @norges-domstoler/dds-design-tokens

🔨 Bruk

Design tokens er eksportert som JS-konstanter, CSS-variabler og SCSS-variabler. Les mer under Kom i gang og Design tokens i dokumentasjonen.

JS

import * as React from "react";
import { render } from "react-dom";
import { ddsBaseTokens } from "@norges-domstoler/dds-design-tokens";

const { colors: Colors, spacing: Spacing } = ddsBaseTokens;

const style = {
  backgroundColor: Colors.DdsColorPrimaryBase,
  padding: Spacing.SizesDdsSpacingLocalX075,
};

const App = () => <div style={style}>Tekst</div>;

render(<App />, document.getElementById("root"));

CSS

@import "@norges-domstoler/dds-design-tokens/dist/css/colors.css";

body {
  background-color: var(--dds-color-primary-base);
}

SCSS

@use "@norges-domstoler/dds-design-tokens/dist/scss/colors" as colors;

body {
  background-color: colors.$dds-color-primary-base;
}

⌨️ For bidragsytere

Bilioteket ligger under /tokens.

Installasjon

Klon repoet og installer style-dictionary i /tokens/dds:

cd tokens/dds
npm install -D style-dictionary

Generere design tokens i kode

Biblioteket bruker Style-dictionary for å generere design tokens som JS-konstanter, CSS-variabler og SCSS-variabler fra en eller flere JSON-filer. JSON-filen(e) ligger i /dds/properties. For å generere variabler fra JSON kjør følgende kommando fra /dds:

npm run build-tokens

Genererte variabler ligger i /dds/build organisert etter plattform.

Build

Det brukes custom build for generering av variabler, den ligger i /dds/build.js. I tillegg spesifiserer /dds/config.json hva output skal være og mappestruktur for den etter npm run build-tokens kjøres.

npm