Skip to content

feat(css): add theme package to @digdir/designsystemet-css #4328

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Barsnes merged 10 commits into from
Dec 16, 2025
Merged

feat(css): add theme package to @digdir/designsystemet-css #4328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2bbfc39
feat(css): add theme package to @digdir/designsystemet-css
Barsnes Dec 16, 2025
1eaeae2
use root tokens
Barsnes Dec 16, 2025
23ed97f
Create weak-coats-love.md
Barsnes Dec 16, 2025
2310d06
no need for local config
Barsnes Dec 16, 2025
4d5e1ba
relevant docs
Barsnes Dec 16, 2025
48b3296
missed doc
Barsnes Dec 16, 2025
080250d
update changeset
Barsnes Dec 16, 2025
556ef97
proper build
Barsnes Dec 16, 2025
91882e7
build?
Barsnes Dec 16, 2025
b013bf5
proper build in paralell
Barsnes Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/weak-coats-love.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@digdir/designsystemet-css": patch
---

Add export for a default theme under `/theme`.
If you are using the default theme from `@digdir/designsystemet-theme`, we recommend importing the CSS from `@digdir/designsystemet-css/theme.css` and removing `@digdir/designsystemet-theme` from your dependencies.
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Our goal is to create consistent and user-friendly experiences in digital soluti

[`@digdir/designsystemet`](https://www.npmjs.com/package/@digdir/designsystemet) - CLI for Designsystemet.

[`@digdir/designsystemet-css`](https://www.npmjs.com/package/@digdir/designsystemet-css) - CSS implementation of Designsystemet components. Used by the React package.
[`@digdir/designsystemet-css`](https://www.npmjs.com/package/@digdir/designsystemet-css) - CSS implementation of Designsystemet components. Used by the React package. Contains a default theme.

[`@digdir/designsystemet-react`](https://www.npmjs.com/package/@digdir/designsystemet-react) - React implementation of Designsystemet components.

Expand Down
6 changes: 3 additions & 3 deletions apps/storybook/stories/get-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Følg disse stegene for å komme i gang med React-komponentene.
## 1. Installer pakkene

```sh
npm i @digdir/designsystemet-react @digdir/designsystemet-theme @digdir/designsystemet-css
npm i @digdir/designsystemet-react @digdir/designsystemet-css
```

### Typescript
Expand Down Expand Up @@ -62,12 +62,12 @@ Designsystemet bruker [popover](https://developer.mozilla.org/en-US/docs/Web/HTM
## 4. Bruk en React-komponent

```jsx
import '@digdir/designsystemet-theme';
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-css/theme';

import { Button } from '@digdir/designsystemet-react';

<Button variant='secondary'>Jeg er en knapp!</Button>;
```

`@digdir/designsystemet-theme` og `@digdir/designsystemet-css` må kun importeres én gang i applikasjonen.
`@digdir/designsystemet-css` og `@digdir/designsystemet-css/theme` må kun importeres én gang i applikasjonen.
3 changes: 0 additions & 3 deletions apps/www/app/content/components-docs/en/get-started/css.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ sidebar_title: CSS
order: 50
---

If you don't [create your own theme](/en/fundamentals/themebuilder/own-theme) you must also install `@digdir/designsystemet-theme`.
You can easily create your own theme later.

### Layers

We use [css layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to get the lowest possible specificity in our css.
Expand Down
10 changes: 3 additions & 7 deletions apps/www/app/content/components-docs/en/get-started/react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,9 @@ It is recommended that you also read about [CSS](/en/components/get-started/css)
npm i @digdir/designsystemet-react @digdir/designsystemet-css
```

If you are not [creating your own theme](/en/fundamentals/themebuilder/own-theme) you must also install `@digdir/designsystemet-theme`.
If you are not [creating your own theme](/en/fundamentals/themebuilder/own-theme) you can get a default theme from `@digdir/designsystemet-css/theme`.
You can easily create your own theme later.

```sh
npm i @digdir/designsystemet-theme
```

### Typescript

If you are using Typescript, make sure you have typescript >= 3.8 and install `@digdir/designsystemet-types`:
Expand Down Expand Up @@ -65,15 +61,15 @@ body {
## 3. Use a React component

```tsx
import '@digdir/designsystemet-theme'; /* or your theme */
import '@digdir/designsystemet-css'; /* imported only once */
import '@digdir/designsystemet-css/theme'; /* or your theme */

import { Button } from '@digdir/designsystemet-react';

<Button variant='secondary'>I'm a button!</Button>;
```

`@digdir/designsystemet-theme` and `@digdir/designsystemet-css` must only be imported once in the application.
`@digdir/designsystemet-css` and `@digdir/designsystemet-css/theme` must only be imported once in the application.

## Extras

Expand Down
10 changes: 5 additions & 5 deletions apps/www/app/content/components-docs/en/get-started/without-react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ You will not get all the benefits that the React components give you, but you ca

## Get started

To use the Designsystemet CSS, you need to install `@digdir/designsystemet-css`. You can also install `@digdir/designsystemet-theme`, or [create your own theme](/en/fundamentals/themebuilder/own-theme). You can easily create your own theme later.
To use the Designsystemet CSS, you need to install `@digdir/designsystemet-css`. You can use the default theme from `@digdir/designsystemet-css/theme`, or [create your own theme](/en/fundamentals/themebuilder/own-theme). You can easily create your own theme later.

```sh
npm i @digdir/designsystemet-css @digdir/designsystemet-theme
npm i @digdir/designsystemet-css
```

### Add CSS to your project
Expand All @@ -24,15 +24,15 @@ You can import the CSS files directly into your main CSS file, or add them as `<
#### Import in CSS file

```css
@import '@digdir/designsystemet-theme/index.css';
@import '@digdir/designsystemet-css/index.css';
@import '@digdir/designsystemet-css/theme.css';
```

#### Add as `<link>` tags

```html
<link rel="stylesheet" href="path/to/node_modules/@digdir/designsystemet-theme/index.css" />
<link rel="stylesheet" href="path/to/node_modules/@digdir/designsystemet-css/index.css" />
<link rel="stylesheet" href="path/to/node_modules/@digdir/designsystemet-css/dist/theme/designsystemet.css" />
<link rel="stylesheet" href="path/to/node_modules/@digdir/designsystemet-css/dist/src/index.css" />
```

## Get started
Expand Down
3 changes: 0 additions & 3 deletions apps/www/app/content/components-docs/no/get-started/css.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ sidebar_title: CSS
order: 60
---

Dersom du ikke [lager ditt eget tema](/no/fundamentals/themebuilder/own-theme) må du også intallere `@digdir/designsystemet-theme`.
Du kan lett lage ditt eget tema senere.

### Layers

Vi bruker [css layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for å få lavest mulig spesifisitet på vår css.
Expand Down
10 changes: 3 additions & 7 deletions apps/www/app/content/components-docs/no/get-started/react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,9 @@ Det anbefales at du også leser om [CSS](/no/components/get-started/css).
npm i @digdir/designsystemet-react @digdir/designsystemet-css
```

Dersom du ikke [lager ditt eget tema](/no/fundamentals/themebuilder/own-theme) må du også intallere `@digdir/designsystemet-theme`.
Dersom du ikke [lager ditt eget tema](/no/fundamentals/themebuilder/own-theme) kan du bruke et standardtema fra `@digdir/designsystemet-css/theme`.
Du kan lett lage ditt eget tema senere.

```sh
npm i @digdir/designsystemet-theme
```

### Typescript

Dersom du bruker Typescript, sørg for at du har typescript >= 3.8 og installerer `@digdir/designsystemet-types`:
Expand Down Expand Up @@ -65,15 +61,15 @@ body {
## 3. Bruk en React-komponent

```tsx
import '@digdir/designsystemet-theme'; /* eller ditt tema */
import '@digdir/designsystemet-css'; /* importeres kun en gang */
import '@digdir/designsystemet-css/theme'; /* eller ditt tema */

import { Button } from '@digdir/designsystemet-react';

<Button variant='secondary'>Jeg er en knapp!</Button>;
```

`@digdir/designsystemet-theme` og `@digdir/designsystemet-css` må kun importeres én gang i applikasjonen.
`@digdir/designsystemet-css` og `@digdir/designsystemet-css/theme` må kun importeres én gang i applikasjonen.

## Eksta

Expand Down
11 changes: 5 additions & 6 deletions apps/www/app/content/components-docs/no/get-started/without-react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ Dette arbeider vi med å løfte ut av React og gjere tilgjengeleg for alle tekno

## Kom i gang

For å bruke Designsystemets uten React, trenger du CSS pakka. Du kan også installere `@digdir/designsystemet-theme` (for standard Designsystemet stil), eller [lage ditt eget tema](/no/fundamentals/themebuilder/own-theme). Du kan lett lage ditt eget tema senere.
For å bruke Designsystemets uten React, trenger du CSS pakka. Du kan [lage ditt eget tema](/no/fundamentals/themebuilder/own-theme), eller bruke standardtemaet fra `@digdir/designsystemet-css/theme`. Du kan lett lage ditt eget tema senere.

```sh
npm i @digdir/designsystemet-css @digdir/designsystemet-theme
npm i @digdir/designsystemet-css
```

### Legg til CSS i prosjektet ditt
Expand All @@ -28,19 +28,18 @@ Du kan importere CSS filene direkte i din hoved CSS fil, eller legge de til som

```css
@import '@digdir/designsystemet-css/index.css';
@import '@digdir/designsystemet-theme/index.css';
@import '@digdir/designsystemet-css/theme.css';
```

#### Import i JS fil

Hvis du har støtte for å importere CSS i JavaScript filer, kan du bruke denne metoden:

```js
import '@digdir/designsystemet-css/index.css';
import '@digdir/designsystemet-theme/index.css';
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-css/theme';
```


## Ta i bruk

Alle komponentar har ein seksjon for HTML nederst på kode-sidene i dokumentasjonen. Her får du info om korleis du kan bruke komponentane med rein HTML, og eventuelle fallgruver.
Expand Down
4 changes: 2 additions & 2 deletions packages/css/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
CSS implementation of the Designsystemet components

- Uses [@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) `ds`
- Uses `@digdir/designsystemet-theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming
- Build your own theme on https://theme.designsystemet.no/
- Exports a default theme under `/theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming
- Build your own theme on https://theme.designsystemet.no/en

Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.

Expand Down
12 changes: 10 additions & 2 deletions packages/css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@
"homepage": "https://github.com/digdir/designsystemet/tree/main/packages/css",
"license": "MIT",
"exports": {
"./theme": {
"types": "./types.d.ts",
"default": "./dist/theme/designsystemet.css"
},
"./theme.css": "./dist/theme/designsystemet.css",
"./theme/*": "./dist/theme/*",
".": {
"types": "./types.d.ts",
"default": "./dist/src/index.css"
Expand Down Expand Up @@ -38,7 +44,8 @@
"digdir"
],
"scripts": {
"build": "rimraf dist && postcss ./src/*.css --base . --dir ./dist"
"build": "rimraf dist && pnpm build:theme && postcss ./src/*.css --base . --dir ./dist && postcss ./dist/theme/*.css --dir ./dist/theme",
"build:theme": "tsx ../cli/bin/designsystemet.ts tokens build -t ../../design-tokens -o ./dist/theme --experimental-tailwind"
},
"devDependencies": {
"autoprefixer": "^10.4.22",
Expand All @@ -47,6 +54,7 @@
"postcss-cli": "^11.0.1",
"postcss-import": "^16.1.1",
"postcss-nesting": "^13.0.2",
"rimraf": "^6.1.2"
"rimraf": "^6.1.2",
"tsx": "^4.20.2"
}
}
4 changes: 2 additions & 2 deletions packages/react/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
React implementation of the Designsystemet components

- Uses `@digdir/designsystemet-css` for styling.
- Uses `@digdir/designsystemet-theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
- Build your own theme on https://theme.designsystemet.no/
- Uses `@digdir/designsystemet-css/theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
- Build your own theme on https://theme.designsystemet.no/en
- All components support `ref`.
- All components support SSR.
- Use full component name, e.g. `CardBlock` instead of `Card.Block`
Expand Down
2 changes: 1 addition & 1 deletion packages/react/stories/bruk.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ Modal har f.eks en `Modal.TriggerContext` komponent som kan wrappes rundt `Modal

## CSS

For å bruke Designsystemets CSS, så må du installere `@digdir/designsystemet-css` og `@digdir/designsystemet-theme`.
For å bruke Designsystemets CSS, så må du installere `@digdir/designsystemet-css`.

### Layers

Expand Down
2 changes: 1 addition & 1 deletion packages/theme/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ This package contains the following predefined Designsystemet themes for use in
- `uutilsynet`
- `portal`

As well as a default theme used in the themebuilder.
As well as a default theme used in the themebuilder. `@digdir/designsystemet-css` also exports this theme by default under `@digdir/designsystemet-css/theme`.

Build your own theme on https://theme.designsystemet.no/

Expand Down
3 changes: 3 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading