@digdir/designsystemet-theme

@digdir/designsystemet-theme

Themes for Designsystemet

This package contains the following predefined brand themes

• altinn
• digdir
• tilsynet
• brreg

Installation

npm install @digdir/designsystemet-theme

Usage

When importing the package make sure to specify which brand tokens you want to import. By default the digdir is imported if you don't specify a brand.

import '@digdir/designsystemet-theme/brand/<brand>/tokens';

// This imports Digdir brand css tokens
import '@digdir/designsystemet-theme';

//  This imports Altinn css tokens
import '@digdir/designsystemet-theme/brand/altinn/tokens.css';

CSS

When importing css tokens a set of css variables are added to your :root {}. You only need to import this once in your application, preferably somewhere in your "root" html.

All variables are prefixed with fds.

import '@digdir/designsystemet-theme/brand/altinn/tokens.css';

div {
  padding: var(--fds-spacing-1);
}