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

Barsnes · web-flow · commit 6e74f0f6fc20 · 2025-12-16T13:49:40.000+01:00
diff --git a/.changeset/weak-coats-love.md b/.changeset/weak-coats-love.md
@@ -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.
diff --git a/README.md b/README.md
@@ -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.
 
diff --git a/apps/storybook/stories/get-started.mdx b/apps/storybook/stories/get-started.mdx
@@ -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
@@ -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.
diff --git a/apps/www/app/content/components-docs/en/get-started/css.mdx b/apps/www/app/content/components-docs/en/get-started/css.mdx
@@ -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.
diff --git a/apps/www/app/content/components-docs/en/get-started/react.mdx b/apps/www/app/content/components-docs/en/get-started/react.mdx
@@ -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`:
@@ -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
 
diff --git a/apps/www/app/content/components-docs/en/get-started/without-react.mdx b/apps/www/app/content/components-docs/en/get-started/without-react.mdx
@@ -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
@@ -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
diff --git a/apps/www/app/content/components-docs/no/get-started/css.mdx b/apps/www/app/content/components-docs/no/get-started/css.mdx
@@ -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.
diff --git a/apps/www/app/content/components-docs/no/get-started/react.mdx b/apps/www/app/content/components-docs/no/get-started/react.mdx
@@ -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`:
@@ -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
 
diff --git a/apps/www/app/content/components-docs/no/get-started/without-react.mdx b/apps/www/app/content/components-docs/no/get-started/without-react.mdx
@@ -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
@@ -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.
diff --git a/packages/css/README.md b/packages/css/README.md
@@ -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.
 
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -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"
@@ -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",
@@ -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"
   }
 }
diff --git a/packages/react/README.md b/packages/react/README.md
@@ -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`
diff --git a/packages/react/stories/bruk.mdx b/packages/react/stories/bruk.mdx
@@ -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
 
diff --git a/packages/theme/README.md b/packages/theme/README.md
@@ -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/
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
