From 074edbd92c5ab7766265a549dbd310a67668e326 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 23 Feb 2026 13:19:41 +0100 Subject: [PATCH 01/16] docs: new getting started in code --- .../fundamentals/no/code/other-frameworks.mdx | 2 +- .../content/fundamentals/no/code/react.mdx | 2 +- .../content/fundamentals/no/code/setup.mdx | 159 ++++++++++++++++++ 3 files changed, 161 insertions(+), 2 deletions(-) create mode 100644 apps/www/app/content/fundamentals/no/code/setup.mdx diff --git a/apps/www/app/content/fundamentals/no/code/other-frameworks.mdx b/apps/www/app/content/fundamentals/no/code/other-frameworks.mdx index 7d20228019..172c7891c7 100644 --- a/apps/www/app/content/fundamentals/no/code/other-frameworks.mdx +++ b/apps/www/app/content/fundamentals/no/code/other-frameworks.mdx @@ -5,7 +5,7 @@ date: 2026-01-08 category: Kode color: blue icon: CodeIcon -published: true +published: false order: 30 search_terms: webkomponenter, webkomponentar, vanilla, webcomponents, vue, angular, svelte --- diff --git a/apps/www/app/content/fundamentals/no/code/react.mdx b/apps/www/app/content/fundamentals/no/code/react.mdx index d138728c1c..829ea5ccf3 100644 --- a/apps/www/app/content/fundamentals/no/code/react.mdx +++ b/apps/www/app/content/fundamentals/no/code/react.mdx @@ -5,7 +5,7 @@ date: 2026-01-08 category: Kode color: blue icon: CodeIcon -published: true +published: false order: 20 --- diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx new file mode 100644 index 0000000000..54c478a59c --- /dev/null +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -0,0 +1,159 @@ +--- +title: Oppsett +description: Kom i gang med Designsystemet i kode +date: 2026-02-23 +category: Kode +color: blue +icon: CodeIcon +published: true +order: 0 +search_terms: setup, oppsett, installasjon, installation, getting started, komme i gang +--- + + +Designsystemet består av flere kodepakker som du kan fritt velge mellom, avhengig av dine behov og preferanser. + + +Følg disse stegene for å komme i gang med det grunnleggende for bruk av Designsystemet i kode første gang. + + +Det anbefales at du også leser om [CSS](/no/fundamentals/code/css) og [bygg ditt tema](/no/fundamentals/start-here/own-theme). + + + +## 1. Installer pakkene + +```sh +npm i @digdir/designsystemet-web @digdir/designsystemet-css +``` + + +## 2. Font + +Komponentene er designet og utviklet med [Inter fonten](https://github.com/rsms/inter), så variasjoner kan forekomme dersom du bruker en annen font. +Dersom du velger å installere fonten på en annen måte, husk å inkludere fontvektene `400`, `500` og `600`. + +### Legg til Inter fonten (valgfritt) + +Legg til `` taggen under i ``, og sett `font-family` til `Inter` i din globale css fil. + +Du kan bruke denne koden for å legge til fonten i ``: + +```html + +``` + +### Konfigurasjon av fonten + +Vi anbefaler sterkt at du legger til følgende i din globale CSS fil. +`font-feature-settings` legger til en hale på små `L`'er. + +```css +body { + font-family: 'Inter', sans-serif; + font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */ +} +``` + +## 3. Importer CSS + +Importer `@digdir/designsystemet-css`. + +Direkte i din hoved CSS fil, eller legge de til som `` tagger i ``. Du kan også importere CSS i JavaScript filer hvis du har støtte for det. + +Dersom du ikke [lager ditt eget tema](/no/fundamentals/start-here/own-theme) kan du bruke et standardtema fra `@digdir/designsystemet-css/theme`. +Du kan lett bytte til ditt eget tema senere. + +```css +@import '@digdir/designsystemet-css/index.css'; +@import '@digdir/designsystemet-css/theme.css'; /* eller din tema fil */ +``` + + +

Merk: `background` og `color` blir satt på ``

+

+`background` og `color` blir automatisk definert på `body`-elementet, slik at vi ivaretar [universell utforming](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) og får samme font og farge på tvers. +Dette kan lett overstyres i ditt eget tema, eller i din globale CSS fil. +

+ + + + +## 4. Importer Javascript + +Importer `@digdir/designsystemet-web` i din hoved JavaScript fil. + +Dette vil registrere alle web-komponenter og observatører globalt, så du trenger bare å gjøre dette en gang. + + +```jsx +import '@digdir/designsystemet-web'; +``` + +## 5. Bruk + +Nå er du klar til å bruke Designsystemet i kode! + +Alle komponenter har egen side i [komponent-dokumentasjonen](/no/components), vi anbefaler at du leser gjennom disse for å se hvordan du kan bruke komponentene. +Det er også anbefalt at du leser gjennom tilgjengelighets-sida. + +```html +; + + + + +``` + +## Typescript + +Designsystemet tilbyr typesikkerhet for flere data-attributter. +For å aktivere dette, legg til følgende i din `tsconfig.json`: + +```json +{ + "compilerOptions": { + "types": [ + "@digdir/designsystemet-web", + "@digdir/designsystemet-css/theme" /* eller din tema typefil, /types.d.ts */ + ] + }, +} +``` + + + +## React + +Ønsker du å bruke React, kan du installere `@digdir/designsystemet-react` istedenfor `@digdir/designsystemet-web`. + +```sh +npm i @digdir/designsystemet-react +``` + +### Typescript + +React pakken tilbyr også typesikkerhet for `data-color` og `data-size` på React JSX elementer. +For å aktivere dette, legg til følgende i din `tsconfig.json` (i tillegg til det som er nevnt over): + +```json +{ + "compilerOptions": { + "types": [ + ... + "@digdir/designsystemet-react/react-types", + ] + }, +} +``` + + +### Polyfill + +Designsystemet bruker [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) i enkelte komponenter. Dette apiet er klassifisert som [Baseline: Newly available](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) fra april 2024, da Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en polyfill for å sikre at `popover` fungerer for alle. +* [Popover-Polyfill](https://github.com/oddbird/popover-polyfill) From 2733b51f20efc765fb5c5e7e9152b2ce689fa8e4 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 23 Feb 2026 13:55:09 +0100 Subject: [PATCH 02/16] tabs for css imports --- .../content/fundamentals/no/code/setup.mdx | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index 54c478a59c..7b39621d22 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -64,15 +64,31 @@ body { Importer `@digdir/designsystemet-css`. -Direkte i din hoved CSS fil, eller legge de til som `` tagger i ``. Du kan også importere CSS i JavaScript filer hvis du har støtte for det. - Dersom du ikke [lager ditt eget tema](/no/fundamentals/start-here/own-theme) kan du bruke et standardtema fra `@digdir/designsystemet-css/theme`. Du kan lett bytte til ditt eget tema senere. + + + CSS + JavaScript + + ```css @import '@digdir/designsystemet-css/index.css'; @import '@digdir/designsystemet-css/theme.css'; /* eller din tema fil */ +``` + + +```js +import '@digdir/designsystemet-css'; +import '@digdir/designsystemet-css/theme'; /* eller din tema fil */ ``` + + + + + +

Merk: `background` og `color` blir satt på ``

@@ -153,7 +169,7 @@ For å aktivere dette, legg til følgende i din `tsconfig.json` (i tillegg til d ``` -### Polyfill +## Polyfill Designsystemet bruker [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) i enkelte komponenter. Dette apiet er klassifisert som [Baseline: Newly available](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) fra april 2024, da Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en polyfill for å sikre at `popover` fungerer for alle. * [Popover-Polyfill](https://github.com/oddbird/popover-polyfill) From 0aa13f6892683241e49dc92286a74eebe5a01a10 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 23 Feb 2026 14:10:54 +0100 Subject: [PATCH 03/16] add redirects --- apps/www/app/_utils/redirects.server.ts | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/apps/www/app/_utils/redirects.server.ts b/apps/www/app/_utils/redirects.server.ts index c8d0d9275c..010da7711f 100644 --- a/apps/www/app/_utils/redirects.server.ts +++ b/apps/www/app/_utils/redirects.server.ts @@ -14,7 +14,12 @@ export const designsystemetRedirects = (pathname: string) => { return null; }; -const redirects = [ +type Redirect = { + from: string; + to: string; +}; + +const redirects: Redirect[] = [ { from: '/komponenter', to: '/no/components', @@ -202,4 +207,20 @@ const redirects = [ from: '/no/fundamentals/figma/get-started', to: '/no/fundamentals/start-here/preparations#figma', }, + { + from: '/no/fundamentals/code/react', + to: '/no/fundamentals/code/setup', + }, + { + from: '/no/fundamentals/code/other-frameworks', + to: '/no/fundamentals/code/setup', + }, + { + from: '/en/fundamentals/code/react', + to: '/en/fundamentals/code/setup', + }, + { + from: '/en/fundamentals/code/other-frameworks', + to: '/en/fundamentals/code/setup', + }, ]; From bc513f8a489edc1baa13eb22d988738d99dbfb71 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 24 Feb 2026 09:24:12 +0100 Subject: [PATCH 04/16] testing new structure --- .../content/fundamentals/no/code/setup.mdx | 217 +++++++++++------- 1 file changed, 138 insertions(+), 79 deletions(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index 7b39621d22..4aa25cb2a6 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -11,54 +11,72 @@ search_terms: setup, oppsett, installasjon, installation, getting started, komme --- -Designsystemet består av flere kodepakker som du kan fritt velge mellom, avhengig av dine behov og preferanser. - Følg disse stegene for å komme i gang med det grunnleggende for bruk av Designsystemet i kode første gang. +Det anbefales at du også leser om [bygg ditt tema](/no/fundamentals/start-here/own-theme). + -Det anbefales at du også leser om [CSS](/no/fundamentals/code/css) og [bygg ditt tema](/no/fundamentals/start-here/own-theme). +## 1. Installer pakkene +Designsystemet består av flere kodepakker som du kan fritt velge mellom, avhengig av dine behov og preferanser. +Vi anbefaler at du starter med `@digdir/designsystemet-web` og `@digdir/designsystemet-css`, som er de mest grunnleggende pakkene for å komme i gang. -## 1. Installer pakkene + + + HTML + React + + +```sh +npm i @digdir/designsystemet-css @digdir/designsystemet-web +``` + + ```sh -npm i @digdir/designsystemet-web @digdir/designsystemet-css +npm i @digdir/designsystemet-css @digdir/designsystemet-react ``` + + -## 2. Font -Komponentene er designet og utviklet med [Inter fonten](https://github.com/rsms/inter), så variasjoner kan forekomme dersom du bruker en annen font. -Dersom du velger å installere fonten på en annen måte, husk å inkludere fontvektene `400`, `500` og `600`. +## 2. Importer Javascript -### Legg til Inter fonten (valgfritt) + + + HTML + React + + +Importer `@digdir/designsystemet-web` i din hoved JavaScript fil. +
+Dette vil registrere alle web-komponenter og observatører globalt, så du trenger bare å gjøre dette en gang. -Legg til `` taggen under i ``, og sett `font-family` til `Inter` i din globale css fil. +```jsx +import '@digdir/designsystemet-web'; +``` + + +Importer `@digdir/designsystemet-react` ved bruk av komponenter. -Du kan bruke denne koden for å legge til fonten i ``: +```js +import { Button } from '@digdir/designsystemet-react'; +``` -```html - +Ønsker du å bruke `@digdir/designsystemet-web` i React må du legge til [use client](https://react.dev/reference/rsc/use-client) øverst i filen din. + +```js +"use client"; +import '@digdir/designsystemet-web'; ``` + + -### Konfigurasjon av fonten -Vi anbefaler sterkt at du legger til følgende i din globale CSS fil. -`font-feature-settings` legger til en hale på små `L`'er. -```css -body { - font-family: 'Inter', sans-serif; - font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */ -} -``` ## 3. Importer CSS @@ -67,30 +85,29 @@ Importer `@digdir/designsystemet-css`. Dersom du ikke [lager ditt eget tema](/no/fundamentals/start-here/own-theme) kan du bruke et standardtema fra `@digdir/designsystemet-css/theme`. Du kan lett bytte til ditt eget tema senere. - - - CSS - JavaScript - - -```css -@import '@digdir/designsystemet-css/index.css'; -@import '@digdir/designsystemet-css/theme.css'; /* eller din tema fil */ -``` - - -```js -import '@digdir/designsystemet-css'; -import '@digdir/designsystemet-css/theme'; /* eller din tema fil */ -``` - - - - - +Les mer om [CSS](/no/fundamentals/code/css). - - + + + CSS + JavaScript + + + ```css + @import '@digdir/designsystemet-css/index.css'; + @import '@digdir/designsystemet-css/theme.css'; /* eller din tema fil */ + ``` + + + ```js + import '@digdir/designsystemet-css'; + import '@digdir/designsystemet-css/theme'; /* eller din tema fil */ + ``` + + + + +

Merk: `background` og `color` blir satt på ``

`background` og `color` blir automatisk definert på `body`-elementet, slik at vi ivaretar [universell utforming](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) og får samme font og farge på tvers. @@ -100,37 +117,58 @@ Dette kan lett overstyres i ditt eget tema, eller i din globale CSS fil. -## 4. Importer Javascript - -Importer `@digdir/designsystemet-web` i din hoved JavaScript fil. +## 4. Bruk -Dette vil registrere alle web-komponenter og observatører globalt, så du trenger bare å gjøre dette en gang. +Nå er du klar til å bruke Designsystemet i kode! -```jsx -import '@digdir/designsystemet-web'; -``` +Alle komponenter har egen side i [komponent-dokumentasjonen](/no/components), vi anbefaler at du leser gjennom disse for å se hvordan du kan bruke komponentene. -## 5. Bruk +Det er også anbefalt at du leser gjennom tilgjengelighets-sida. -Nå er du klar til å bruke Designsystemet i kode! +- Bruk `data-color-scheme="light | dark | auto"` for å sette dark/light mode. +- Bruk `data-size="sm | md | lg"` for å sette størrelse på komponentene. +- Bruk `data-color` for å sette farge på komponentene som du har definert for ditt tema. -Alle komponenter har egen side i [komponent-dokumentasjonen](/no/components), vi anbefaler at du leser gjennom disse for å se hvordan du kan bruke komponentene. -Det er også anbefalt at du leser gjennom tilgjengelighets-sida. + + + HTML + React + + ```html ; - + -``` +``` + + + ```js +; + + + + + ``` + + ## Typescript Designsystemet tilbyr typesikkerhet for flere data-attributter. For å aktivere dette, legg til følgende i din `tsconfig.json`: + + + + + HTML + React + + ```json { "compilerOptions": { @@ -141,30 +179,51 @@ For å aktivere dette, legg til følgende i din `tsconfig.json`: }, } ``` + + +```json +{ + "compilerOptions": { + "types": [ + "@digdir/designsystemet-react/react-types", + "@digdir/designsystemet-css/theme" /* eller din tema typefil, /types.d.ts */ + ] + }, +} +``` + + -## React +## Font -Ønsker du å bruke React, kan du installere `@digdir/designsystemet-react` istedenfor `@digdir/designsystemet-web`. +Komponentene er designet og utviklet med [Inter fonten](https://github.com/rsms/inter), så variasjoner kan forekomme dersom du bruker en annen font. +Dersom du velger å installere fonten på en annen måte, husk å inkludere fontvektene `400`, `500` og `600`. -```sh -npm i @digdir/designsystemet-react -``` +### Legg til Inter fonten (valgfritt) -### Typescript +Legg til `` taggen under i ``, og sett `font-family` til `Inter` i din globale css fil. -React pakken tilbyr også typesikkerhet for `data-color` og `data-size` på React JSX elementer. -For å aktivere dette, legg til følgende i din `tsconfig.json` (i tillegg til det som er nevnt over): +Du kan bruke denne koden for å legge til fonten i ``: -```json -{ - "compilerOptions": { - "types": [ - ... - "@digdir/designsystemet-react/react-types", - ] - }, +```html + +``` +### Konfigurasjon av fonten + +Vi anbefaler sterkt at du legger til følgende i din globale CSS fil. +`font-feature-settings` legger til en hale på små `L`'er. + +```css +body { + font-family: var(--ds-font-family), sans-serif; + font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */ } ``` From 42917d99aa4a7c975c5bef4906558b355f1a1282 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 24 Feb 2026 13:36:59 +0100 Subject: [PATCH 05/16] add-wide-content to tabs --- .../www/app/content/fundamentals/no/code/setup.mdx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index 4aa25cb2a6..25604e03d0 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -24,7 +24,7 @@ Designsystemet består av flere kodepakker som du kan fritt velge mellom, avheng Vi anbefaler at du starter med `@digdir/designsystemet-web` og `@digdir/designsystemet-css`, som er de mest grunnleggende pakkene for å komme i gang. - + HTML React @@ -45,7 +45,7 @@ npm i @digdir/designsystemet-css @digdir/designsystemet-react ## 2. Importer Javascript - + HTML React @@ -87,7 +87,7 @@ Du kan lett bytte til ditt eget tema senere. Les mer om [CSS](/no/fundamentals/code/css). - + CSS JavaScript @@ -131,14 +131,14 @@ Det er også anbefalt at du leser gjennom tilgjengelighets-sida. - Bruk `data-color` for å sette farge på komponentene som du har definert for ditt tema. - + HTML React ```html -; + @@ -161,9 +161,7 @@ Det er også anbefalt at du leser gjennom tilgjengelighets-sida. Designsystemet tilbyr typesikkerhet for flere data-attributter. For å aktivere dette, legg til følgende i din `tsconfig.json`: - - - + HTML React From 4dc1bd2826a7ca673cf4751c20a325c9dda197af Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Wed, 25 Feb 2026 11:26:57 +0100 Subject: [PATCH 06/16] remove not about using web in react and use client --- apps/www/app/content/fundamentals/no/code/setup.mdx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index 25604e03d0..0fb2ac6035 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -64,13 +64,6 @@ Importer `@digdir/designsystemet-react` ved bruk av komponenter. ```js import { Button } from '@digdir/designsystemet-react'; -``` - -Ønsker du å bruke `@digdir/designsystemet-web` i React må du legge til [use client](https://react.dev/reference/rsc/use-client) øverst i filen din. - -```js -"use client"; -import '@digdir/designsystemet-web'; ``` From a1b8a5980303f2343be6b793730ecedfd899bdcd Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Wed, 25 Feb 2026 12:00:14 +0100 Subject: [PATCH 07/16] english instead of bad norwegian translation --- apps/www/app/content/fundamentals/no/code/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index 0fb2ac6035..4ff5d204d9 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -53,7 +53,7 @@ npm i @digdir/designsystemet-css @digdir/designsystemet-react Importer `@digdir/designsystemet-web` i din hoved JavaScript fil.
-Dette vil registrere alle web-komponenter og observatører globalt, så du trenger bare å gjøre dette en gang. +Dette vil registrere alle web-komponenter og observers globalt, så du trenger bare å gjøre dette en gang. ```jsx import '@digdir/designsystemet-web'; From 3b7725aa661536f12344348b0b527742fb3dbd56 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 26 Feb 2026 12:07:11 +0100 Subject: [PATCH 08/16] Update apps/www/app/content/fundamentals/no/code/setup.mdx Co-authored-by: Tobias Barsnes --- apps/www/app/content/fundamentals/no/code/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index 4ff5d204d9..d09edcdc67 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -103,7 +103,7 @@ Les mer om [CSS](/no/fundamentals/code/css).

Merk: `background` og `color` blir satt på ``

-`background` og `color` blir automatisk definert på `body`-elementet, slik at vi ivaretar [universell utforming](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) og får samme font og farge på tvers. +`background` og `color` blir automatisk definert på `body`-elementet, slik at vi ivaretar [universell utforming (w3.org)](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) og får samme font og farge på tvers. Dette kan lett overstyres i ditt eget tema, eller i din globale CSS fil.

From f85ddb1090381acd71945607b5bc0faa4966cb23 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 26 Feb 2026 12:07:24 +0100 Subject: [PATCH 09/16] Update apps/www/app/content/fundamentals/no/code/setup.mdx Co-authored-by: Tobias Barsnes --- apps/www/app/content/fundamentals/no/code/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index d09edcdc67..9067f8851e 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -189,7 +189,7 @@ For å aktivere dette, legg til følgende i din `tsconfig.json`: ## Font -Komponentene er designet og utviklet med [Inter fonten](https://github.com/rsms/inter), så variasjoner kan forekomme dersom du bruker en annen font. +Komponentene er designet og utviklet med [Inter fonten (github.com)](https://github.com/rsms/inter), så variasjoner kan forekomme dersom du bruker en annen font. Dersom du velger å installere fonten på en annen måte, husk å inkludere fontvektene `400`, `500` og `600`. ### Legg til Inter fonten (valgfritt) From 638b16bcc2e81cad5b422cd2cb3fcc81d4b48963 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 26 Feb 2026 12:07:45 +0100 Subject: [PATCH 10/16] Update apps/www/app/content/fundamentals/no/code/setup.mdx Co-authored-by: Tobias Barsnes --- apps/www/app/content/fundamentals/no/code/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index 9067f8851e..a29914a926 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -221,5 +221,5 @@ body { ## Polyfill -Designsystemet bruker [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) i enkelte komponenter. Dette apiet er klassifisert som [Baseline: Newly available](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) fra april 2024, da Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en polyfill for å sikre at `popover` fungerer for alle. +Designsystemet bruker [popover (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) i enkelte komponenter. Dette apiet er klassifisert som [Baseline: Newly available (mozilla.org)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) fra april 2024, da Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en polyfill for å sikre at `popover` fungerer for alle. * [Popover-Polyfill](https://github.com/oddbird/popover-polyfill) From 5cf31bdc3b69b264daeed26888b56d546635b07e Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 26 Feb 2026 12:07:56 +0100 Subject: [PATCH 11/16] Update apps/www/app/content/fundamentals/no/code/setup.mdx Co-authored-by: Tobias Barsnes --- apps/www/app/content/fundamentals/no/code/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index a29914a926..64e47f0482 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -222,4 +222,4 @@ body { ## Polyfill Designsystemet bruker [popover (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) i enkelte komponenter. Dette apiet er klassifisert som [Baseline: Newly available (mozilla.org)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) fra april 2024, da Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en polyfill for å sikre at `popover` fungerer for alle. -* [Popover-Polyfill](https://github.com/oddbird/popover-polyfill) +* [Popover-Polyfill (github.com)](https://github.com/oddbird/popover-polyfill) From 7a0db20cab3525f653dfc68fe6f879a81234720d Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 26 Feb 2026 12:45:37 +0100 Subject: [PATCH 12/16] adjustments --- .../content/fundamentals/no/code/setup.mdx | 54 +++++++++++++------ 1 file changed, 37 insertions(+), 17 deletions(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index 64e47f0482..c5107c924b 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -11,12 +11,8 @@ search_terms: setup, oppsett, installasjon, installation, getting started, komme --- - Følg disse stegene for å komme i gang med det grunnleggende for bruk av Designsystemet i kode første gang. -Det anbefales at du også leser om [bygg ditt tema](/no/fundamentals/start-here/own-theme). - - ## 1. Installer pakkene Designsystemet består av flere kodepakker som du kan fritt velge mellom, avhengig av dine behov og preferanser. @@ -42,7 +38,6 @@ npm i @digdir/designsystemet-css @digdir/designsystemet-react - ## 2. Importer Javascript @@ -69,15 +64,10 @@ import { Button } from '@digdir/designsystemet-react'; - - ## 3. Importer CSS Importer `@digdir/designsystemet-css`. -Dersom du ikke [lager ditt eget tema](/no/fundamentals/start-here/own-theme) kan du bruke et standardtema fra `@digdir/designsystemet-css/theme`. -Du kan lett bytte til ditt eget tema senere. - Les mer om [CSS](/no/fundamentals/code/css). @@ -88,13 +78,11 @@ Les mer om [CSS](/no/fundamentals/code/css). ```css @import '@digdir/designsystemet-css/index.css'; - @import '@digdir/designsystemet-css/theme.css'; /* eller din tema fil */ ``` ```js import '@digdir/designsystemet-css'; - import '@digdir/designsystemet-css/theme'; /* eller din tema fil */ ``` @@ -109,6 +97,32 @@ Dette kan lett overstyres i ditt eget tema, eller i din globale CSS fil. +## Importer temaet + +Designsystemet er laget for å være tematiserbart, og det er derfor viktig at du importerer ditt tema etter at du har importert `@digdir/designsystemet-css`. + +[Bygg ditt eget tema](/no/fundamentals/start-here/own-theme) eller bruke standardtemaet; `@digdir/designsystemet-css/theme`. + + + + + Eget tema + Standardtema + + + ```css + @import '@digdir/designsystemet-css/index.css'; + @import 'design-tokens-build/.css'; + ``` + + + ```js + import '@digdir/designsystemet-css'; + import '@digdir/designsystemet-css/theme'; + ``` + + + ## 4. Bruk @@ -152,7 +166,12 @@ Det er også anbefalt at du leser gjennom tilgjengelighets-sida. ## Typescript Designsystemet tilbyr typesikkerhet for flere data-attributter. -For å aktivere dette, legg til følgende i din `tsconfig.json`: + +Installer type pakken og legg til typefilene i `tsconfig.json` for å få tilgang til disse. + +```sh +npm i -D @digdir/designsystemet-types +``` @@ -165,7 +184,8 @@ For å aktivere dette, legg til følgende i din `tsconfig.json`: "compilerOptions": { "types": [ "@digdir/designsystemet-web", - "@digdir/designsystemet-css/theme" /* eller din tema typefil, /types.d.ts */ + "@digdir/designsystemet-types", + "@digdir/designsystemet-css/theme" /* eller din tema typefil, design-tokens-build/types.d.ts */ ] }, } @@ -176,8 +196,8 @@ For å aktivere dette, legg til følgende i din `tsconfig.json`: { "compilerOptions": { "types": [ - "@digdir/designsystemet-react/react-types", - "@digdir/designsystemet-css/theme" /* eller din tema typefil, /types.d.ts */ + "@digdir/designsystemet-react/react-types", /** importerer @digdir/designsystemet-types for deg */ + "@digdir/designsystemet-css/theme" /* eller din tema typefil, design-tokens-build/types.d.ts */ ] }, } @@ -190,7 +210,7 @@ For å aktivere dette, legg til følgende i din `tsconfig.json`: ## Font Komponentene er designet og utviklet med [Inter fonten (github.com)](https://github.com/rsms/inter), så variasjoner kan forekomme dersom du bruker en annen font. -Dersom du velger å installere fonten på en annen måte, husk å inkludere fontvektene `400`, `500` og `600`. +Dersom du velger å installere fonten på en annen måte enn altinncdn.no, husk å inkludere fontvektene `400`, `500` og `600`. ### Legg til Inter fonten (valgfritt) From 2f26436c1e35b61b58da8c9aba0d4f6644bdfede Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 26 Feb 2026 12:54:00 +0100 Subject: [PATCH 13/16] fix chapter numbers --- apps/www/app/content/fundamentals/no/code/setup.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index c5107c924b..df86aedd60 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -97,7 +97,7 @@ Dette kan lett overstyres i ditt eget tema, eller i din globale CSS fil. -## Importer temaet +## 4. Importer temaet Designsystemet er laget for å være tematiserbart, og det er derfor viktig at du importerer ditt tema etter at du har importert `@digdir/designsystemet-css`. @@ -124,7 +124,7 @@ Designsystemet er laget for å være tematiserbart, og det er derfor viktig at d -## 4. Bruk +## 5. Bruk Nå er du klar til å bruke Designsystemet i kode! From ece8cb279451f1ee2dd072d51acd36479bd209f4 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 26 Feb 2026 12:56:32 +0100 Subject: [PATCH 14/16] tweak intro --- apps/www/app/content/fundamentals/no/code/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index df86aedd60..e85af7b7cb 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -11,7 +11,7 @@ search_terms: setup, oppsett, installasjon, installation, getting started, komme --- -Følg disse stegene for å komme i gang med det grunnleggende for bruk av Designsystemet i kode første gang. +Følg disse stegene for å komme i gang med bruk av Designsystemet i kode første gang. ## 1. Installer pakkene From 3328b7b9e4fde59b29a4d2a8cfdd2959edefd5fa Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 26 Feb 2026 16:36:37 +0100 Subject: [PATCH 15/16] add note about body/color and data-color-scheme --- apps/www/app/content/fundamentals/no/code/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index e85af7b7cb..1b5de0dab3 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -91,7 +91,7 @@ Les mer om [CSS](/no/fundamentals/code/css).

Merk: `background` og `color` blir satt på ``

-`background` og `color` blir automatisk definert på `body`-elementet, slik at vi ivaretar [universell utforming (w3.org)](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) og får samme font og farge på tvers. +`background` og `color` blir automatisk definert på `body`-elementet og ellers der `data-color-scheme` blir satt, slik at vi ivaretar [universell utforming (w3.org)](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) og får samme font og farge på tvers. Dette kan lett overstyres i ditt eget tema, eller i din globale CSS fil.

From 26b08f5d09a08371559ff3e56a12e7e6cffb4f7e Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 27 Feb 2026 08:54:49 +0100 Subject: [PATCH 16/16] add english version --- .../content/fundamentals/en/code/setup.mdx | 246 ++++++++++++++++++ .../content/fundamentals/no/code/setup.mdx | 2 +- 2 files changed, 247 insertions(+), 1 deletion(-) create mode 100644 apps/www/app/content/fundamentals/en/code/setup.mdx diff --git a/apps/www/app/content/fundamentals/en/code/setup.mdx b/apps/www/app/content/fundamentals/en/code/setup.mdx new file mode 100644 index 0000000000..37fc92e188 --- /dev/null +++ b/apps/www/app/content/fundamentals/en/code/setup.mdx @@ -0,0 +1,246 @@ +--- +title: Setup +description: Get started with the Designsystemet in code +date: 2026-02-27 +category: Code +color: blue +icon: CodeIcon +published: true +order: 0 +search_terms: setup, oppsett, installasjon, installation, getting started, komme i gang +--- + + +Follow these steps to get started with using Designsystemet in code for the first time. + +## 1. Install the packages + +Designsystemet consists of several code packages that you can freely choose from, depending on your needs and preferences. + +We recommend starting with `@digdir/designsystemet-web` and `@digdir/designsystemet-css` which are the most basic packages to get started. + + + + + HTML + React + + +```sh +npm i @digdir/designsystemet-css @digdir/designsystemet-web +``` + + +```sh +npm i @digdir/designsystemet-css @digdir/designsystemet-react +``` + + + + +## 2. Import Javascript + + + + HTML + React + + +Import `@digdir/designsystemet-web` in your main JavaScript file. +
+This will register all web components and observers globally, so you only need to do this once. + +```jsx +import '@digdir/designsystemet-web'; +``` + + +Import `@digdir/designsystemet-react` when using components. + +```js +import { Button } from '@digdir/designsystemet-react'; +``` + + + + +## 3. Import CSS + +Import `@digdir/designsystemet-css`. + +Read more about [CSS](/no/fundamentals/code/css). + + + + CSS + JavaScript + + + ```css + @import '@digdir/designsystemet-css/index.css'; + ``` + + + ```js + import '@digdir/designsystemet-css'; + ``` + + + + + +

Note: `background` and `color` are set on ``

+

+`background` and `color` are automatically defined on the `body` element and where `data-color-scheme` is set. +This is to ensure [universal design (w3.org)](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) and consistent font and color across the application. +This can be easily overridden in your own theme or in your global CSS file. +

+ + + +## 4. Import the theme + +The Designsystemet is designed to be themable, so it is important to import your theme after importing `@digdir/designsystemet-css`. + +[Build your own theme](/no/fundamentals/start-here/own-theme) or use the default theme; `@digdir/designsystemet-css/theme`. + + + + + Custom theme + Default theme + + + ```css + @import '@digdir/designsystemet-css/index.css'; + @import 'design-tokens-build/.css'; + ``` + + + ```js + import '@digdir/designsystemet-css'; + import '@digdir/designsystemet-css/theme'; + ``` + + + + +## 5. Usage + +You are now ready to use the Designsystemet in code! + + +All components have their own page in the [component documentation](/no/components), we recommend that you read through these to see how you can use the components. + +It is also recommended that you read through the accessibility page. + +- Use `data-color-scheme="light | dark | auto"` to set dark/light mode. +- Use `data-size="sm | md | lg"` to set the size of the components. +- Use `data-color` to set the color of the components. + + + + + HTML + React + + +```html + + + + + +``` + + + ```js +; + + + + + ``` + + + +## Typescript + +Designsystemet provides type safety for its data attributes. + +Install the type package and add the type files to `tsconfig.json` to access them. + +```sh +npm i -D @digdir/designsystemet-types +``` + + + + HTML + React + + +```json +{ + "compilerOptions": { + "types": [ + "@digdir/designsystemet-web", + "@digdir/designsystemet-types", + "@digdir/designsystemet-css/theme" /* or your theme type file, design-tokens-build/types.d.ts */ + ] + }, +} +``` + + +```json +{ + "compilerOptions": { + "types": [ + "@digdir/designsystemet-react/react-types", /** imports @digdir/designsystemet-types for you */ + "@digdir/designsystemet-css/theme" /* or your theme type file, design-tokens-build/types.d.ts */ + ] + }, +} +``` + + + + + +## Font + +The components are designed and developed with the [Inter font (github.com)](https://github.com/rsms/inter), so variations may occur if you use a different font. +If you choose to install the font in a way other than altinncdn.no, remember to include the font weights `400`, `500`, and `600`. + +### Add the Inter font (optional) + +Add the `` tag below in the ``, and set `font-family` to `Inter` in your global CSS file. + +You can use this code to add the font in ``: + +```html + +``` +### Font configuration + +We strongly recommend adding the following to your global CSS file. +`font-feature-settings` adds a tail to lowercase `l`s. + +```css +body { + font-family: var(--ds-font-family), sans-serif; + font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */ +} +``` + + +## Polyfill + +The design system uses [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) in some components. This api is classified as [Baseline: Newly available](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility) as of April 2024, when Firefox was the last browser to add it. In some cases, you may find that users are locked to older browser versions for various reasons, and then it may be appropriate to add a polyfill to ensure that `popover` works for everyone. +* [Popover-Polyfill](https://github.com/oddbird/popover-polyfill) diff --git a/apps/www/app/content/fundamentals/no/code/setup.mdx b/apps/www/app/content/fundamentals/no/code/setup.mdx index 1b5de0dab3..3b8e6e1d03 100644 --- a/apps/www/app/content/fundamentals/no/code/setup.mdx +++ b/apps/www/app/content/fundamentals/no/code/setup.mdx @@ -1,7 +1,7 @@ --- title: Oppsett description: Kom i gang med Designsystemet i kode -date: 2026-02-23 +date: 2026-02-27 category: Kode color: blue icon: CodeIcon