@norges-domstoler/dds-design-tokens

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

Design tokens kommer i to temaer: Core og Public. Valg av tema styres med <ThemeProvider> komponent som ligger i dds-components.

🔍 Oversikt

💡 Se alle tokens i Elsa Storybook.

Design tokens består av base-tokens og semantiske tokens.

Base-tokens er variabler genererte fra Figma styles og tilsvarer identiteten til domstolene definert i designprofilen.

Semantiske tokens har innbakt i navnet hva token brukes til, samt tillater bruk av temaer. De refererer til base-tokens og definerer logikk for deres bruk i komponenter og andre elementer. F.eks., semantiske tokens kan spesifisere fokusfargen, eller font og farger for knapper.

Enkelte typer tokens er tilgjengelige kun i base-variant, da de brukes i ulike kontekster og ikke har snevret bruksområde. Dette inkluderer avstander, brekkpunkter og skygger.

📦 Installasjon

pnpm add @norges-domstoler/dds-design-tokens

🔨 Bruk

Design tokens er eksportert som JS-konstanter, CSS-variabler og SCSS-variabler. De brukes i kombinasjon med <ThemeProvider> komponent fra @norges-domstoler/dds-components biblioteket for å sette riktig tema. CSS-variabler brukes direkte fra @norges-domstoler/dds-components - se README.

CSS

[!TIP] Vi anbefaler VS Code plugin CSS Variable Autocomplete for sømløs bruk av tokens i CSS.

/* styles.css */
@import '@norges-domstoler/dds-components/index.css';

.panel {
  background-color: var(--dds-color-bg-default);
}

import { ThemeProvider } from '@norges-domstoler/dds-components';
import './styles.css';

const Panel = <div className="panel"> tekst </div>;

const App = () => (
  <ThemeProvider>
    <Panel />;
  </ThemeProvider>
);

JS

import * as React from 'react';
import { ddsTokens } from '@norges-domstoler/dds-design-tokens';
import { ThemeProvider, useTheme } from '@norges-domstoler/dds-components';

const { theme } = useTheme();

const style = {
  backgroundColor: theme.ddsColorBgDefault,
  padding: theme.ddsSpacingX075,
};

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

SCSS

SCSS-variabler refererer til CSS-variabler; theming skjer dermed utenfor SCSS. Dermed trenger du å importere både index.css fra dds-components og _ddsTokens.scss.

/* _styles.scss */
@import '@norges-domstoler/dds-components/index.css';
@import '@norges-domstoler/dds-design-tokens/dist/scss/_ddsTokens.scss';

.panel {
  background-color: $dds-color-bg-default;
}

import { ThemeProvider } from '@norges-domstoler/dds-components';
import './_styles.scss';

const Panel = <div className="panel"> tekst </div>;

const App = () => (
  <ThemeProvider>
    <Panel />;
  </ThemeProvider>
);