@norges-domstoler/dds-design-tokens

@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

pnpm add @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.SizesDdsSpacingX075,
};

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
pnpm add -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:

pnpm 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 pnpm build-tokens kjøres.