@norges-domstoler/dds-design-tokens 5.0.0 → 5.1.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;
 }
 ```
 

package/dist/cjs/dds/build/js/colors.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 10 Jun 2024 11:27:50 GMT
+ * Generated on Tue, 23 Jul 2024 10:51:13 GMT
  */
 export declare const DdsColorPrimaryLightest = "#eaeff4";
 export declare const DdsColorPrimaryLighter = "#acbbc6";
@@ -102,6 +102,7 @@ export declare const DdsColorSurfaceFieldDisabled = "#f8f9f9";
 export declare const DdsColorSurfaceHighlightedDefault = "#ffe6df";
 export declare const DdsColorSurfaceScrollbar = "#adb5ba";
 export declare const DdsColorSurfaceNotification = "#d83737";
+export declare const DdsColorSurfaceSkeleton = "#cfd4d7";
 export declare const DdsColorBorderDefault = "#77838c";
 export declare const DdsColorBorderSubtle = "#cfd4d7";
 export declare const DdsColorBorderInverse = "#acbbc6";
@@ -141,7 +142,7 @@ export declare const DdsColorIconOnInfoDefault = "#466f8a";
 export declare const DdsColorIconOnInfoStrong = "#0b0d0e";
 export declare const DdsColorBrandPrimaryDefault = "#354754";
 export declare const DdsColorBrandPrimarySubtle = "#eaeff4";
-export declare const DdsColorBrandPrimaryMedium = "#acbbc6";
+export declare const DdsColorBrandPrimaryMedium = "#4f6a7e";
 export declare const DdsColorBrandPrimaryStrong = "#202b32";
 export declare const DdsColorBrandSecondaryDefault = "#9ab8b7";
 export declare const DdsColorBrandSecondarySubtle = "#e6eded";

package/dist/cjs/dds/build/js/ddsTokens.d.ts

@@ -506,6 +506,7 @@ export declare const DdsColorSurfaceFieldDisabled = "#f8f9f9";
 export declare const DdsColorSurfaceHighlightedDefault = "#ffe6df";
 export declare const DdsColorSurfaceScrollbar = "#adb5ba";
 export declare const DdsColorSurfaceNotification = "#d83737";
+export declare const DdsColorSurfaceSkeleton = "#cfd4d7";
 export declare const DdsColorBorderDefault = "#77838c";
 export declare const DdsColorBorderSubtle = "#cfd4d7";
 export declare const DdsColorBorderInverse = "#acbbc6";
@@ -545,7 +546,7 @@ export declare const DdsColorIconOnInfoDefault = "#466f8a";
 export declare const DdsColorIconOnInfoStrong = "#0b0d0e";
 export declare const DdsColorBrandPrimaryDefault = "#354754";
 export declare const DdsColorBrandPrimarySubtle = "#eaeff4";
-export declare const DdsColorBrandPrimaryMedium = "#acbbc6";
+export declare const DdsColorBrandPrimaryMedium = "#4f6a7e";
 export declare const DdsColorBrandPrimaryStrong = "#202b32";
 export declare const DdsColorBrandSecondaryDefault = "#9ab8b7";
 export declare const DdsColorBrandSecondarySubtle = "#e6eded";