Sheriff Designsystemet Theme

@politiet/sheriff-designsystemet-theme is a Sheriff theme for Designsystemet.no.

Why

Designsystemet.no offers several useful components. This theme allows you to use them freely and get them themed as Sheriff components!

Installation

Install this theme's package along with @digdir's packages:

npm install @politiet/sheriff-designsystemet-theme @digdir/designsystemet-css @digdir/designsystemet-web

Usage

Load Designsystemet's base CSS first, then this theme on top of it:

import '@digdir/designsystemet-css';
import '@politiet/sheriff-designsystemet-theme';

Then use Designsystemet's components as usual. They will now be styled as Sheriff components.

<div data-color-scheme="light" data-color="accent" data-size="md">
	<h1 class="ds-heading" data-size="lg">Designsystemet with the Sheriff theme</h1>
	<button class="ds-button" data-variant="primary">Primary</button>
</div>

Building the theme

We use Designsystemet's (DS) own tooling (@digdir/designsystemet) to setup and build our theme.

1. scripts/sync-sheriff-tokens.mjs reads Sheriff's CSS colour variables writes them into
2. designsystemet tokens build --config designsystemet.config.json compiles the tokens into design-tokens-build/sheriff.css.
3. That file is copied to dist/sheriff-theme.css, which is what the package publishes.

Run the whole pipeline:

npm run build

Updating the source tokens

To re-scaffold the Designsystemet token source (for example after changing designsystemet.config.json), see design-tokens/README.md.