@norges-domstoler/dds-design-tokens 5.0.0 → 6.0.0

package/README.md

@@ -2,26 +2,32 @@
 
 [![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-design-tokens)](https://www.npmjs.com/package/@norges-domstoler/dds-design-tokens)
 
-Biblioteket inneholder design tokens brukt i [Domstolenes designsystem Elsa](https://design.domstol.no/): farger, typografi, avstander skygger og størrelser. Design tokens kan brukes i domstolenes tjenester i bl.a. global styling og custom elementer. Ellers er det obligatorisk å bruke komponentbiblioteket [dds-components](https://www.npmjs.com/package/@norges-domstoler/dds-components).
+Biblioteket inneholder design tokens brukt i [Domstolenes designsystem Elsa](https://design.domstol.no/): farger, typografi, avstander, grid, brekkpunker og skygger. Design tokens kan brukes i domstolenes tjenester i bl.a. global styling og custom elementer. Ellers er det obligatorisk å bruke komponentbiblioteket [dds-components](https://www.npmjs.com/package/@norges-domstoler/dds-components).
+
+Les mer om [design tokens i dokumentasjonen](https://design.domstol.no/987b33f71/p/50f2cd-design-tokens).
 
 ## 🔍 Oversikt
 
-Design tokens består av base-tokens og referanse-tokens. Base-tokens er variabler genererte fra Figma styles og tilsvarer identiteten til domstolene definert i designprofilen.
+Design tokens består av base-tokens og semantiske tokens. Base-tokens er variabler genererte fra Figma styles og tilsvarer identiteten til domstolene definert i designprofilen.
+
+Tanken med semantiske tokens er å innbake i navnet hva token brukes til og kunne benytte seg av themes. Semantiske tokens bruker base-tokens til å definere logikk for hvordan base-tokens skal brukes videre i komponenter og andre elementer. F.eks., semantiske tokens kan spesifisere hva fokusfargen skal være, eller font og farger for knapper.
+
+### 📃 Tilgjengelige samantiske tokens
 
-Referanse-tokens (OBS! under arbeid) bruker base-tokens til å definere logikk for hvordan base-tokens skal brukes videre i komponenter og andre elementer. F.eks., referanse-tokens kan spesifisere hva fokusfargen skal være, eller font og farge for label i skjemakomponenter. Tanken med referanse-tokens er å gjøre det enklere å gjenbruke koden og eventuelt endre på styling i komponenter ved å endre kun på tokens, uten å røre CSS inni komponentene.
+> [!NOTE]
+> Semantiske tokens er under arbeid. Flere typer tokens blir tilgjengelige over tid.
+
+- color
 
 ### 📃 Tilgjengelige base-tokens
 
-- border
 - borderRadius
-- breakpoints
-- colors
+- breakpoint
 - font
 - fontPackages (kun JS)
 - grid
-- iconSizes
-- innerShadow
-- outerShadow
+- iconSize
+- shadow
 - spacing
 
 ## 📦 Installasjon
@@ -32,18 +38,18 @@ pnpm add @norges-domstoler/dds-design-tokens
 
 ## 🔨 Bruk
 
-Design tokens er eksportert som JS-konstanter, CSS-variabler og SCSS-variabler. Les mer under [Kom i gang](https://design.domstol.no/987b33f71/p/956e78-kom-i-gang/b/0174a7) og [Design tokens](https://design.domstol.no/987b33f71/p/18bd6f-design-tokens/b/499a2c) i dokumentasjonen.
+Design tokens er eksportert som JS-konstanter, CSS-variabler og SCSS-variabler.
 
 ### JS
 
 ```js
 import * as React from 'react';
 import { render } from 'react-dom';
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { ddsTokens } from '@norges-domstoler/dds-design-tokens';
 
 const style = {
-  backgroundColor: ddsBaseTokens.DdsColorPrimaryBase,
-  padding: ddsBaseTokens.DdsSpacingX075,
+  backgroundColor: ddsTokens.ddsColorBgDefault,
+  padding: ddsTokens.ddsSpacingX075,
 };
 
 const App = () => <div style={style}>Tekst</div>;
@@ -53,21 +59,24 @@ render(<App />, document.getElementById('root'));
 
 ### CSS
 
+> [!TIP]
+> Vi anbefaler VS Code plugin [CSS Variable Autocomplete](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables) for sømløs bruk av tokens i CSS.
+
 ```css
-@import '@norges-domstoler/dds-design-tokens/dist/css/colors.css';
+@import '@norges-domstoler/dds-design-tokens/dist/css/ddsTokens.css';
 
 body {
-  background-color: var(--dds-color-primary-base);
+  background-color: var(--dds-color-bg-default);
 }
 ```
 
 ### SCSS
 
 ```scss
-@use '@norges-domstoler/dds-design-tokens/dist/scss/colors' as colors;
+@use '@norges-domstoler/dds-design-tokens/dist/scss/ddsTokens' as ddsTokens;
 
 body {
-  background-color: colors.$dds-color-primary-base;
+  background-color: ddsTokens.$dds-color-bg-default;
 }
 ```