Designsystem Themes

This package provides prebuilt themes for use with Designsystemet at KS Digital. Themes are created using the Theme Builder from Designsystemet

Supported Themes

The following themes are officially supported:

• Ledsagerbevis
• Forvaltning
• Minkommune

Additionally, a base style is provided and should be applied first. We aim to keep this base style as minimal as possible.

Usage

To use the themes, include the base styles and one of the supported themes in your CSS or JavaScript/TypeScript files as shown below:

In CSS Files

If your bundler (e.g., Vite) is configured to resolve npm packages in CSS imports:

@import url('@ks-digital/designsystem-themes/base.css');
@import url('@ks-digital/designsystem-themes/ledsagerbevis.css');

Tailwind

If you are using Tailwind with Preflight, ensure that you load the Designsystemet styles first by importing base.tailwind.css instead of base.css. The base.tailwind.css file includes all of base.css along with some overrides to ensure smooth integration between Designsystemet and Tailwind.

The [theme].tailwind.css bridges the gap between Designsystemet and Tailwind, by mapping Tailwind-classes to the Designsystem-tokens! So import that as well.

v4

@import url('@ks-digital/designsystem-themes/base.tailwind.css');
@import url('@ks-digital/designsystem-themes/ledsagerbevis.css');
@import url('@ks-digital/designsystem-themes/ledsagerbevis.tailwind.css');
@import url('tailwindcss');

v3 and older

Note:
Tailwind versions earlier than v4 do not support mapping Tailwind utility classes directly to Designsystemet tokens.

@import url('@ks-digital/designsystem-themes/base.tailwind.css');
@import url('@ks-digital/designsystem-themes/ledsagerbevis.css');

@layer tailwind-base, ds;

@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

In JavaScript/TypeScript Files

If you are using a JavaScript or TypeScript application, import the styles like this. If you are using React, please check the readme in the React-package as well.

import '@ks-digital/designsystem-themes/base.css'
import '@ks-digital/designsystem-themes/ledsagerbevis.css'

Adding new themes

1. Add theme to designsystemet.config.json.
2. Build themes npx @digdir/designsystemet@latest tokens build --experimental-tailwind --out-dir packages/themes/src/themes
3. Add theme exports-field in packages/themes/package.json
4. Add theme to Angular Storybook packages/angular/.storybook/themes.ts