@norges-domstoler/dds-design-tokens 7.0.0 → 7.2.0

package/README.md

@@ -1,34 +1,23 @@
 # @norges-domstoler/dds-design-tokens
 
-[![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-design-tokens)](https://www.npmjs.com/package/@norges-domstoler/dds-design-tokens)
+[![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-design-tokens)](https://www.npmjs.com/package/@norges-domstoler/dds-design-tokens) ![License](https://img.shields.io/npm/l/@norges-domstoler/dds-design-tokens)
 
-Biblioteket inneholder design tokens brukt i [Elsa - domstolenes designsystem](https://design.domstol.no/): farger, typografi, avstander, grid, brekkpunker, størrelser, broder-radius 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).
+Biblioteket inneholder design tokens brukt i [Elsa - domstolenes designsystem](https://design.domstol.no/): farger, typografi, osv. 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) i domstolenes applikasjoner.
 
 Design tokens kommer i to temaer: Core og Public. Valg av tema styres med `<ThemeProvider>` komponent som ligger i `dds-components`.
 
-Les mer om [design tokens i dokumentasjonen](https://design.domstol.no/987b33f71/p/50f2cd-design-tokens).
-
 ## 🔍 Oversikt
 
+> 💡 Se alle tokens i [Elsa Storybook](https://domstolene.github.io/designsystem/?path=/story/dds-design-tokens-tokens).
+
 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 temaer. 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.
+Semantiske tokens har innbakt i navnet hva token brukes til, samt tillater bruk av temaer. De refererer til base-tokens og definerer logikk for deres bruk i komponenter og andre elementer. F.eks., semantiske tokens kan spesifisere fokusfargen, eller font og farger for knapper.
 
 Enkelte typer tokens er tilgjengelige kun i base-variant, da de brukes i ulike kontekster og ikke har snevret bruksområde. Dette inkluderer avstander, brekkpunkter og skygger.
 
-### 📃 Tilgjengelige tokens
-
-- border-radius
-- breakpoint
-- color
-- font
-- grid
-- icon-size
-- shadow
-- spacing
-
 ## 📦 Installasjon
 
 ```sh
@@ -89,7 +78,7 @@ const App = () => (
 
 ### SCSS
 
-SCSS-variabler refererer til CSS-variabler; theming skjer dermed utenfor SCSS og du kan importere .
+SCSS-variabler refererer til CSS-variabler; theming skjer dermed utenfor SCSS. Dermed trenger du å importere både `index.css` fra dds-components og `_ddsTokens.scss`.
 
 ```scss
 /* _styles.scss */
@@ -113,27 +102,3 @@ const App = () => (
   </ThemeProvider>
 );
 ```
-
-## ⌨️ For bidragsytere
-
-Bilioteket ligger under `packages/tokens`. Selve design tokens ligger i JSON-filer hentet fra Figma.
-
-### Installasjon
-
-Installer style-dictionary:
-
-```
-pnpm --filter "@norges-domstoler/dds-design-tokens" add -D style-dictionary
-```
-
-### Generere variabler fra design tokens
-
-Biblioteket bruker [Style-dictionary](https://amzn.github.io/style-dictionary) for å generere JS-konstanter, CSS-variabler og SCSS-variabler fra en eller flere JSON-filer. JSON-filen(e) ligger i `dds/properties`. For å generere variabler fra JSON kjør følgende kommando fra `/dds`:
-
-```
-node build.js
-```
-
-Genererte variabler ligger i `dds/build` organisert etter plattform.
-
-Vi bruker custom build, den ligger i `/dds/build.js`.

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

@@ -122,6 +122,16 @@ export declare const ddsBreakpointLg = "1280px";
 export declare const ddsBreakpointLgNumberPx = 1280;
 export declare const ddsBreakpointXl = "1920px";
 export declare const ddsBreakpointXlNumberPx = 1920;
+export declare const ddsZindexSkiptocontent = "250";
+export declare const ddsZindexModalBackdrop = "200";
+export declare const ddsZindexDrawer = "180";
+export declare const ddsZindexDrawerBackdrop = "180";
+export declare const ddsZindexOverflowmenu = "160";
+export declare const ddsZindexPopover = "140";
+export declare const ddsZindexTooltip = "120";
+export declare const ddsZindexDropdown = "100";
+export declare const ddsZindexSticky = "50";
+export declare const ddsZindexAbsoluteElement = "1";
 export declare const ddsColorBgDefault = "#ffffff";
 export declare const ddsColorBgSubtle = "#f8f9f9";
 export declare const ddsColorSurfaceDefault = "#ffffff";
@@ -178,6 +188,7 @@ export declare const ddsColorTextRequiredfield = "#d83737";
 export declare const ddsColorTextActionVisited = "#7f29b4";
 export declare const ddsColorTextActionVisitedOnInverse = "#cca9e1";
 export declare const ddsColorTextOnNotification = "#ffffff";
+export declare const ddsColorTextDanger = "#ad2c2c";
 export declare const ddsColorIconDefault = "#0b0d0e";
 export declare const ddsColorIconMedium = "#3a4146";
 export declare const ddsColorIconSubtle = "#545c62";
@@ -193,6 +204,7 @@ export declare const ddsColorIconOnDangerDefault = "#ad2c2c";
 export declare const ddsColorIconOnDangerStrong = "#0b0d0e";
 export declare const ddsColorIconOnInfoDefault = "#466f8a";
 export declare const ddsColorIconOnInfoStrong = "#0b0d0e";
+export declare const ddsColorIconDanger = "#ad2c2c";
 export declare const ddsColorBrandPrimaryDefault = "#354754";
 export declare const ddsColorBrandPrimarySubtle = "#eaeff4";
 export declare const ddsColorBrandPrimaryMedium = "#4f6a7e";

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

@@ -122,6 +122,16 @@ export declare const ddsBreakpointLg = "1280px";
 export declare const ddsBreakpointLgNumberPx = 1280;
 export declare const ddsBreakpointXl = "1920px";
 export declare const ddsBreakpointXlNumberPx = 1920;
+export declare const ddsZindexSkiptocontent = "250";
+export declare const ddsZindexModalBackdrop = "200";
+export declare const ddsZindexDrawer = "180";
+export declare const ddsZindexDrawerBackdrop = "180";
+export declare const ddsZindexOverflowmenu = "160";
+export declare const ddsZindexPopover = "140";
+export declare const ddsZindexTooltip = "120";
+export declare const ddsZindexDropdown = "100";
+export declare const ddsZindexSticky = "50";
+export declare const ddsZindexAbsoluteElement = "1";
 export declare const ddsColorBgDefault = "#ffffff";
 export declare const ddsColorBgSubtle = "#f8f9f9";
 export declare const ddsColorSurfaceDefault = "#ffffff";
@@ -178,6 +188,7 @@ export declare const ddsColorTextRequiredfield = "#d83737";
 export declare const ddsColorTextActionVisited = "#7f29b4";
 export declare const ddsColorTextActionVisitedOnInverse = "#cca9e1";
 export declare const ddsColorTextOnNotification = "#ffffff";
+export declare const ddsColorTextDanger = "#ad2c2c";
 export declare const ddsColorIconDefault = "#0b0d0e";
 export declare const ddsColorIconMedium = "#3a4146";
 export declare const ddsColorIconSubtle = "#545c62";
@@ -193,6 +204,7 @@ export declare const ddsColorIconOnDangerDefault = "#ad2c2c";
 export declare const ddsColorIconOnDangerStrong = "#0b0d0e";
 export declare const ddsColorIconOnInfoDefault = "#466f8a";
 export declare const ddsColorIconOnInfoStrong = "#0b0d0e";
+export declare const ddsColorIconDanger = "#ad2c2c";
 export declare const ddsColorBrandPrimaryDefault = "#354754";
 export declare const ddsColorBrandPrimarySubtle = "#eaeff4";
 export declare const ddsColorBrandPrimaryMedium = "#4f6a7e";

package/dist/cjs/index.js

@@ -125,6 +125,16 @@ const ddsBreakpointLg$1 = "1280px";
 const ddsBreakpointLgNumberPx$1 = 1280;
 const ddsBreakpointXl$1 = "1920px";
 const ddsBreakpointXlNumberPx$1 = 1920;
+const ddsZindexSkiptocontent$1 = "250"; // Brukes for dds-skiptocontent
+const ddsZindexModalBackdrop$1 = "200"; // Brukes for dds-modal
+const ddsZindexDrawer$1 = "180"; // Brukes for dds-drawer
+const ddsZindexDrawerBackdrop$1 = "180"; // Brukes for dds-drawer
+const ddsZindexOverflowmenu$1 = "160"; // Brukes for dds-overflowmenu
+const ddsZindexPopover$1 = "140"; // Brukes for dds-popover og kalender i datepicker
+const ddsZindexTooltip$1 = "120"; // Brukes for dds-tooltip
+const ddsZindexDropdown$1 = "100"; // Dropdown brukes for bl.a søkeforslag, dropdown i select
+const ddsZindexSticky$1 = "50"; // Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater
+const ddsZindexAbsoluteElement$1 = "1"; // Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder
 const ddsColorBgDefault$1 = "#ffffff"; // UI shell base color
 const ddsColorBgSubtle$1 = "#f8f9f9"; // Alternative UI shell base color
 const ddsColorSurfaceDefault$1 = "#ffffff"; // Default bg
@@ -181,13 +191,14 @@ const ddsColorTextRequiredfield$1 = "#d83737"; // Asterix to indicate required f
 const ddsColorTextActionVisited$1 = "#7f29b4"; // Used for visited links
 const ddsColorTextActionVisitedOnInverse$1 = "#cca9e1"; // Used for visited links on inverse surfaces
 const ddsColorTextOnNotification$1 = "#ffffff"; // Used on surface.notification
+const ddsColorTextDanger$1 = "#ad2c2c"; // Error text on paper, or default or subtle surafce/bg
 const ddsColorIconDefault$1 = "#0b0d0e"; // Often used with text.default
 const ddsColorIconMedium$1 = "#3a4146"; // Often used with text.medium
 const ddsColorIconSubtle$1 = "#545c62"; // Often used with text.subtle
 const ddsColorIconOnInverse$1 = "#ffffff"; // On surface.inverse
 const ddsColorIconOnAction$1 = "#ffffff"; // On surface.action (primary and danger button)
 const ddsColorIconActionResting$1 = "#106ead"; // Often used with Text.action
-const ddsColorIconActionHover$1 = "#0d588a"; // hover on icon-action, used on secondary buttons etc
+const ddsColorIconActionHover$1 = "#0d588a"; // hover on icon-action
 const ddsColorIconOnSuccessDefault$1 = "#3d723d"; // On surface.success-default
 const ddsColorIconOnSuccessStrong$1 = "#0b0d0e"; // On surface-success-strong
 const ddsColorIconOnWarningDefault$1 = "#92862e"; // On surface.warning-default
@@ -196,6 +207,7 @@ const ddsColorIconOnDangerDefault$1 = "#ad2c2c"; // On surface.danger-default
 const ddsColorIconOnDangerStrong$1 = "#0b0d0e"; // On surface.danger-strong
 const ddsColorIconOnInfoDefault$1 = "#466f8a"; // On surface.info-default
 const ddsColorIconOnInfoStrong$1 = "#0b0d0e"; // On surface.info-strong
+const ddsColorIconDanger$1 = "#ad2c2c"; // Error icon on paper, or default or subtle surafce/bg
 const ddsColorBrandPrimaryDefault$1 = "#354754"; // Primary brand color
 const ddsColorBrandPrimarySubtle$1 = "#eaeff4"; // Primary brand color
 const ddsColorBrandPrimaryMedium$1 = "#4f6a7e"; // Primary brand color
@@ -327,6 +339,7 @@ var ddsTokensCore = /*#__PURE__*/Object.freeze({
   ddsColorFocusOutside: ddsColorFocusOutside$1,
   ddsColorIconActionHover: ddsColorIconActionHover$1,
   ddsColorIconActionResting: ddsColorIconActionResting$1,
+  ddsColorIconDanger: ddsColorIconDanger$1,
   ddsColorIconDefault: ddsColorIconDefault$1,
   ddsColorIconMedium: ddsColorIconMedium$1,
   ddsColorIconOnAction: ddsColorIconOnAction$1,
@@ -375,6 +388,7 @@ var ddsTokensCore = /*#__PURE__*/Object.freeze({
   ddsColorTextActionResting: ddsColorTextActionResting$1,
   ddsColorTextActionVisited: ddsColorTextActionVisited$1,
   ddsColorTextActionVisitedOnInverse: ddsColorTextActionVisitedOnInverse$1,
+  ddsColorTextDanger: ddsColorTextDanger$1,
   ddsColorTextDefault: ddsColorTextDefault$1,
   ddsColorTextMedium: ddsColorTextMedium$1,
   ddsColorTextOnAction: ddsColorTextOnAction$1,
@@ -553,7 +567,17 @@ var ddsTokensCore = /*#__PURE__*/Object.freeze({
   ddsSpacingX4: ddsSpacingX4$1,
   ddsSpacingX4NumberRem: ddsSpacingX4NumberRem$1,
   ddsSpacingX6: ddsSpacingX6$1,
-  ddsSpacingX6NumberRem: ddsSpacingX6NumberRem$1
+  ddsSpacingX6NumberRem: ddsSpacingX6NumberRem$1,
+  ddsZindexAbsoluteElement: ddsZindexAbsoluteElement$1,
+  ddsZindexDrawer: ddsZindexDrawer$1,
+  ddsZindexDrawerBackdrop: ddsZindexDrawerBackdrop$1,
+  ddsZindexDropdown: ddsZindexDropdown$1,
+  ddsZindexModalBackdrop: ddsZindexModalBackdrop$1,
+  ddsZindexOverflowmenu: ddsZindexOverflowmenu$1,
+  ddsZindexPopover: ddsZindexPopover$1,
+  ddsZindexSkiptocontent: ddsZindexSkiptocontent$1,
+  ddsZindexSticky: ddsZindexSticky$1,
+  ddsZindexTooltip: ddsZindexTooltip$1
 });
 
 // Do not edit directly, this file was auto-generated.
@@ -681,6 +705,16 @@ const ddsBreakpointLg = "1280px";
 const ddsBreakpointLgNumberPx = 1280;
 const ddsBreakpointXl = "1920px";
 const ddsBreakpointXlNumberPx = 1920;
+const ddsZindexSkiptocontent = "250"; // Brukes for dds-skiptocontent
+const ddsZindexModalBackdrop = "200"; // Brukes for dds-modal
+const ddsZindexDrawer = "180"; // Brukes for dds-drawer
+const ddsZindexDrawerBackdrop = "180"; // Brukes for dds-drawer
+const ddsZindexOverflowmenu = "160"; // Brukes for dds-overflowmenu
+const ddsZindexPopover = "140"; // Brukes for dds-popover og kalender i datepicker
+const ddsZindexTooltip = "120"; // Brukes for dds-tooltip
+const ddsZindexDropdown = "100"; // Dropdown brukes for bl.a søkeforslag, dropdown i select
+const ddsZindexSticky = "50"; // Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater
+const ddsZindexAbsoluteElement = "1"; // Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder
 const ddsColorBgDefault = "#ffffff"; // UI shell base color
 const ddsColorBgSubtle = "#f8f9f9"; // Alternative UI shell base color
 const ddsColorSurfaceDefault = "#ffffff"; // Default bg
@@ -737,6 +771,7 @@ const ddsColorTextRequiredfield = "#d83737"; // Asterix to indicate required fie
 const ddsColorTextActionVisited = "#7f29b4"; // Used for visited links
 const ddsColorTextActionVisitedOnInverse = "#cca9e1"; // Used for visited links on inverse surfaces
 const ddsColorTextOnNotification = "#ffffff"; // Used on surface.notification
+const ddsColorTextDanger = "#ad2c2c"; // Error text on paper, or default or subtle surafce/bg
 const ddsColorIconDefault = "#0b0d0e"; // Often used with text.default
 const ddsColorIconMedium = "#3a4146"; // Often used with text.medium
 const ddsColorIconSubtle = "#545c62"; // Often used with text.subtle
@@ -752,6 +787,7 @@ const ddsColorIconOnDangerDefault = "#ad2c2c"; // On surface.danger-default
 const ddsColorIconOnDangerStrong = "#0b0d0e"; // On surface.danger-strong
 const ddsColorIconOnInfoDefault = "#466f8a"; // On surface.info-default
 const ddsColorIconOnInfoStrong = "#0b0d0e"; // On surface.info-strong
+const ddsColorIconDanger = "#ad2c2c"; // Error icon on paper, or default or subtle surafce/bg
 const ddsColorBrandPrimaryDefault = "#354754"; // Primary brand color
 const ddsColorBrandPrimarySubtle = "#eaeff4"; // Primary brand color
 const ddsColorBrandPrimaryMedium = "#4f6a7e"; // Primary brand color
@@ -883,6 +919,7 @@ var ddsTokensPublic = /*#__PURE__*/Object.freeze({
   ddsColorFocusOutside: ddsColorFocusOutside,
   ddsColorIconActionHover: ddsColorIconActionHover,
   ddsColorIconActionResting: ddsColorIconActionResting,
+  ddsColorIconDanger: ddsColorIconDanger,
   ddsColorIconDefault: ddsColorIconDefault,
   ddsColorIconMedium: ddsColorIconMedium,
   ddsColorIconOnAction: ddsColorIconOnAction,
@@ -931,6 +968,7 @@ var ddsTokensPublic = /*#__PURE__*/Object.freeze({
   ddsColorTextActionResting: ddsColorTextActionResting,
   ddsColorTextActionVisited: ddsColorTextActionVisited,
   ddsColorTextActionVisitedOnInverse: ddsColorTextActionVisitedOnInverse,
+  ddsColorTextDanger: ddsColorTextDanger,
   ddsColorTextDefault: ddsColorTextDefault,
   ddsColorTextMedium: ddsColorTextMedium,
   ddsColorTextOnAction: ddsColorTextOnAction,
@@ -1109,7 +1147,17 @@ var ddsTokensPublic = /*#__PURE__*/Object.freeze({
   ddsSpacingX4: ddsSpacingX4,
   ddsSpacingX4NumberRem: ddsSpacingX4NumberRem,
   ddsSpacingX6: ddsSpacingX6,
-  ddsSpacingX6NumberRem: ddsSpacingX6NumberRem
+  ddsSpacingX6NumberRem: ddsSpacingX6NumberRem,
+  ddsZindexAbsoluteElement: ddsZindexAbsoluteElement,
+  ddsZindexDrawer: ddsZindexDrawer,
+  ddsZindexDrawerBackdrop: ddsZindexDrawerBackdrop,
+  ddsZindexDropdown: ddsZindexDropdown,
+  ddsZindexModalBackdrop: ddsZindexModalBackdrop,
+  ddsZindexOverflowmenu: ddsZindexOverflowmenu,
+  ddsZindexPopover: ddsZindexPopover,
+  ddsZindexSkiptocontent: ddsZindexSkiptocontent,
+  ddsZindexSticky: ddsZindexSticky,
+  ddsZindexTooltip: ddsZindexTooltip
 });
 
 const ddsTokens = {

package/dist/cjs/src/index.d.ts

@@ -124,6 +124,16 @@ export declare const ddsTokens: {
         ddsBreakpointLgNumberPx: 1280;
         ddsBreakpointXl: "1920px";
         ddsBreakpointXlNumberPx: 1920;
+        ddsZindexSkiptocontent: "250";
+        ddsZindexModalBackdrop: "200";
+        ddsZindexDrawer: "180";
+        ddsZindexDrawerBackdrop: "180";
+        ddsZindexOverflowmenu: "160";
+        ddsZindexPopover: "140";
+        ddsZindexTooltip: "120";
+        ddsZindexDropdown: "100";
+        ddsZindexSticky: "50";
+        ddsZindexAbsoluteElement: "1";
         ddsColorBgDefault: "#ffffff";
         ddsColorBgSubtle: "#f8f9f9";
         ddsColorSurfaceDefault: "#ffffff";
@@ -180,6 +190,7 @@ export declare const ddsTokens: {
         ddsColorTextActionVisited: "#7f29b4";
         ddsColorTextActionVisitedOnInverse: "#cca9e1";
         ddsColorTextOnNotification: "#ffffff";
+        ddsColorTextDanger: "#ad2c2c";
         ddsColorIconDefault: "#0b0d0e";
         ddsColorIconMedium: "#3a4146";
         ddsColorIconSubtle: "#545c62";
@@ -195,6 +206,7 @@ export declare const ddsTokens: {
         ddsColorIconOnDangerStrong: "#0b0d0e";
         ddsColorIconOnInfoDefault: "#466f8a";
         ddsColorIconOnInfoStrong: "#0b0d0e";
+        ddsColorIconDanger: "#ad2c2c";
         ddsColorBrandPrimaryDefault: "#354754";
         ddsColorBrandPrimarySubtle: "#eaeff4";
         ddsColorBrandPrimaryMedium: "#4f6a7e";
@@ -401,6 +413,16 @@ export declare const ddsTokens: {
         ddsBreakpointLgNumberPx: 1280;
         ddsBreakpointXl: "1920px";
         ddsBreakpointXlNumberPx: 1920;
+        ddsZindexSkiptocontent: "250";
+        ddsZindexModalBackdrop: "200";
+        ddsZindexDrawer: "180";
+        ddsZindexDrawerBackdrop: "180";
+        ddsZindexOverflowmenu: "160";
+        ddsZindexPopover: "140";
+        ddsZindexTooltip: "120";
+        ddsZindexDropdown: "100";
+        ddsZindexSticky: "50";
+        ddsZindexAbsoluteElement: "1";
         ddsColorBgDefault: "#ffffff";
         ddsColorBgSubtle: "#f8f9f9";
         ddsColorSurfaceDefault: "#ffffff";
@@ -457,6 +479,7 @@ export declare const ddsTokens: {
         ddsColorTextActionVisited: "#7f29b4";
         ddsColorTextActionVisitedOnInverse: "#cca9e1";
         ddsColorTextOnNotification: "#ffffff";
+        ddsColorTextDanger: "#ad2c2c";
         ddsColorIconDefault: "#0b0d0e";
         ddsColorIconMedium: "#3a4146";
         ddsColorIconSubtle: "#545c62";
@@ -472,6 +495,7 @@ export declare const ddsTokens: {
         ddsColorIconOnDangerStrong: "#0b0d0e";
         ddsColorIconOnInfoDefault: "#466f8a";
         ddsColorIconOnInfoStrong: "#0b0d0e";
+        ddsColorIconDanger: "#ad2c2c";
         ddsColorBrandPrimaryDefault: "#354754";
         ddsColorBrandPrimarySubtle: "#eaeff4";
         ddsColorBrandPrimaryMedium: "#4f6a7e";

package/dist/css/ddsTokens-core.css

@@ -77,6 +77,16 @@
   --dds-breakpoint-md: 960px;
   --dds-breakpoint-lg: 1280px;
   --dds-breakpoint-xl: 1920px;
+  --dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
+  --dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
+  --dds-zindex-drawer: 180; /* Brukes for dds-drawer */
+  --dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
+  --dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
+  --dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
+  --dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
+  --dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
+  --dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
+  --dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
   --dds-color-bg-default: #ffffff; /* UI shell base color */
   --dds-color-bg-subtle: #f8f9f9; /* Alternative UI shell base color */
   --dds-color-surface-default: #ffffff; /* Default bg */
@@ -133,13 +143,14 @@
   --dds-color-text-action-visited: #7f29b4; /* Used for visited links */
   --dds-color-text-action-visited-on-inverse: #cca9e1; /* Used for visited links on inverse surfaces */
   --dds-color-text-on-notification: #ffffff; /* Used on surface.notification */
+  --dds-color-text-danger: #ad2c2c; /* Error text on paper, or default or subtle surafce/bg */
   --dds-color-icon-default: #0b0d0e; /* Often used with text.default */
   --dds-color-icon-medium: #3a4146; /* Often used with text.medium */
   --dds-color-icon-subtle: #545c62; /* Often used with text.subtle */
   --dds-color-icon-on-inverse: #ffffff; /* On surface.inverse */
   --dds-color-icon-on-action: #ffffff; /* On surface.action (primary and danger button) */
   --dds-color-icon-action-resting: #106ead; /* Often used with Text.action */
-  --dds-color-icon-action-hover: #0d588a; /* hover on icon-action, used on secondary buttons etc */
+  --dds-color-icon-action-hover: #0d588a; /* hover on icon-action */
   --dds-color-icon-on-success-default: #3d723d; /* On surface.success-default */
   --dds-color-icon-on-success-strong: #0b0d0e; /* On surface-success-strong */
   --dds-color-icon-on-warning-default: #92862e; /* On surface.warning-default */
@@ -148,6 +159,7 @@
   --dds-color-icon-on-danger-strong: #0b0d0e; /* On surface.danger-strong */
   --dds-color-icon-on-info-default: #466f8a; /* On surface.info-default */
   --dds-color-icon-on-info-strong: #0b0d0e; /* On surface.info-strong */
+  --dds-color-icon-danger: #ad2c2c; /* Error icon on paper, or default or subtle surafce/bg */
   --dds-color-brand-primary-default: #354754; /* Primary brand color */
   --dds-color-brand-primary-subtle: #eaeff4; /* Primary brand color */
   --dds-color-brand-primary-medium: #4f6a7e; /* Primary brand color */

package/dist/css/ddsTokens-public.css

@@ -77,6 +77,16 @@
   --dds-breakpoint-md: 960px;
   --dds-breakpoint-lg: 1280px;
   --dds-breakpoint-xl: 1920px;
+  --dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
+  --dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
+  --dds-zindex-drawer: 180; /* Brukes for dds-drawer */
+  --dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
+  --dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
+  --dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
+  --dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
+  --dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
+  --dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
+  --dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
   --dds-color-bg-default: #ffffff; /* UI shell base color */
   --dds-color-bg-subtle: #f8f9f9; /* Alternative UI shell base color */
   --dds-color-surface-default: #ffffff; /* Default bg */
@@ -133,6 +143,7 @@
   --dds-color-text-action-visited: #7f29b4; /* Used for visited links */
   --dds-color-text-action-visited-on-inverse: #cca9e1; /* Used for visited links on inverse surfaces */
   --dds-color-text-on-notification: #ffffff; /* Used on surface.notification */
+  --dds-color-text-danger: #ad2c2c; /* Error text on paper, or default or subtle surafce/bg */
   --dds-color-icon-default: #0b0d0e; /* Often used with text.default */
   --dds-color-icon-medium: #3a4146; /* Often used with text.medium */
   --dds-color-icon-subtle: #545c62; /* Often used with text.subtle */
@@ -148,6 +159,7 @@
   --dds-color-icon-on-danger-strong: #0b0d0e; /* On surface.danger-strong */
   --dds-color-icon-on-info-default: #466f8a; /* On surface.info-default */
   --dds-color-icon-on-info-strong: #0b0d0e; /* On surface.info-strong */
+  --dds-color-icon-danger: #ad2c2c; /* Error icon on paper, or default or subtle surafce/bg */
   --dds-color-brand-primary-default: #354754; /* Primary brand color */
   --dds-color-brand-primary-subtle: #eaeff4; /* Primary brand color */
   --dds-color-brand-primary-medium: #4f6a7e; /* Primary brand color */

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

@@ -122,6 +122,16 @@ export declare const ddsBreakpointLg = "1280px";
 export declare const ddsBreakpointLgNumberPx = 1280;
 export declare const ddsBreakpointXl = "1920px";
 export declare const ddsBreakpointXlNumberPx = 1920;
+export declare const ddsZindexSkiptocontent = "250";
+export declare const ddsZindexModalBackdrop = "200";
+export declare const ddsZindexDrawer = "180";
+export declare const ddsZindexDrawerBackdrop = "180";
+export declare const ddsZindexOverflowmenu = "160";
+export declare const ddsZindexPopover = "140";
+export declare const ddsZindexTooltip = "120";
+export declare const ddsZindexDropdown = "100";
+export declare const ddsZindexSticky = "50";
+export declare const ddsZindexAbsoluteElement = "1";
 export declare const ddsColorBgDefault = "#ffffff";
 export declare const ddsColorBgSubtle = "#f8f9f9";
 export declare const ddsColorSurfaceDefault = "#ffffff";
@@ -178,6 +188,7 @@ export declare const ddsColorTextRequiredfield = "#d83737";
 export declare const ddsColorTextActionVisited = "#7f29b4";
 export declare const ddsColorTextActionVisitedOnInverse = "#cca9e1";
 export declare const ddsColorTextOnNotification = "#ffffff";
+export declare const ddsColorTextDanger = "#ad2c2c";
 export declare const ddsColorIconDefault = "#0b0d0e";
 export declare const ddsColorIconMedium = "#3a4146";
 export declare const ddsColorIconSubtle = "#545c62";
@@ -193,6 +204,7 @@ export declare const ddsColorIconOnDangerDefault = "#ad2c2c";
 export declare const ddsColorIconOnDangerStrong = "#0b0d0e";
 export declare const ddsColorIconOnInfoDefault = "#466f8a";
 export declare const ddsColorIconOnInfoStrong = "#0b0d0e";
+export declare const ddsColorIconDanger = "#ad2c2c";
 export declare const ddsColorBrandPrimaryDefault = "#354754";
 export declare const ddsColorBrandPrimarySubtle = "#eaeff4";
 export declare const ddsColorBrandPrimaryMedium = "#4f6a7e";

package/dist/dds/build/js/Core/ddsTokens.js

@@ -123,6 +123,16 @@ const ddsBreakpointLg = "1280px";
 const ddsBreakpointLgNumberPx = 1280;
 const ddsBreakpointXl = "1920px";
 const ddsBreakpointXlNumberPx = 1920;
+const ddsZindexSkiptocontent = "250"; // Brukes for dds-skiptocontent
+const ddsZindexModalBackdrop = "200"; // Brukes for dds-modal
+const ddsZindexDrawer = "180"; // Brukes for dds-drawer
+const ddsZindexDrawerBackdrop = "180"; // Brukes for dds-drawer
+const ddsZindexOverflowmenu = "160"; // Brukes for dds-overflowmenu
+const ddsZindexPopover = "140"; // Brukes for dds-popover og kalender i datepicker
+const ddsZindexTooltip = "120"; // Brukes for dds-tooltip
+const ddsZindexDropdown = "100"; // Dropdown brukes for bl.a søkeforslag, dropdown i select
+const ddsZindexSticky = "50"; // Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater
+const ddsZindexAbsoluteElement = "1"; // Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder
 const ddsColorBgDefault = "#ffffff"; // UI shell base color
 const ddsColorBgSubtle = "#f8f9f9"; // Alternative UI shell base color
 const ddsColorSurfaceDefault = "#ffffff"; // Default bg
@@ -179,13 +189,14 @@ const ddsColorTextRequiredfield = "#d83737"; // Asterix to indicate required fie
 const ddsColorTextActionVisited = "#7f29b4"; // Used for visited links
 const ddsColorTextActionVisitedOnInverse = "#cca9e1"; // Used for visited links on inverse surfaces
 const ddsColorTextOnNotification = "#ffffff"; // Used on surface.notification
+const ddsColorTextDanger = "#ad2c2c"; // Error text on paper, or default or subtle surafce/bg
 const ddsColorIconDefault = "#0b0d0e"; // Often used with text.default
 const ddsColorIconMedium = "#3a4146"; // Often used with text.medium
 const ddsColorIconSubtle = "#545c62"; // Often used with text.subtle
 const ddsColorIconOnInverse = "#ffffff"; // On surface.inverse
 const ddsColorIconOnAction = "#ffffff"; // On surface.action (primary and danger button)
 const ddsColorIconActionResting = "#106ead"; // Often used with Text.action
-const ddsColorIconActionHover = "#0d588a"; // hover on icon-action, used on secondary buttons etc
+const ddsColorIconActionHover = "#0d588a"; // hover on icon-action
 const ddsColorIconOnSuccessDefault = "#3d723d"; // On surface.success-default
 const ddsColorIconOnSuccessStrong = "#0b0d0e"; // On surface-success-strong
 const ddsColorIconOnWarningDefault = "#92862e"; // On surface.warning-default
@@ -194,6 +205,7 @@ const ddsColorIconOnDangerDefault = "#ad2c2c"; // On surface.danger-default
 const ddsColorIconOnDangerStrong = "#0b0d0e"; // On surface.danger-strong
 const ddsColorIconOnInfoDefault = "#466f8a"; // On surface.info-default
 const ddsColorIconOnInfoStrong = "#0b0d0e"; // On surface.info-strong
+const ddsColorIconDanger = "#ad2c2c"; // Error icon on paper, or default or subtle surafce/bg
 const ddsColorBrandPrimaryDefault = "#354754"; // Primary brand color
 const ddsColorBrandPrimarySubtle = "#eaeff4"; // Primary brand color
 const ddsColorBrandPrimaryMedium = "#4f6a7e"; // Primary brand color
@@ -275,4 +287,4 @@ const ddsFontLabelMediumLetterSpacing = "0.01em";
 const ddsFontLabelMediumParagraphSpacing = "1em";
 const ddsFontLabelMediumParagraphSpacingNumberEm = 1;
 
-export { ddsBorderRadiusButton, ddsBorderRadiusButtonNumberPx, ddsBorderRadiusChip, ddsBorderRadiusChipNumberPx, ddsBorderRadiusInput, ddsBorderRadiusInputNumberPx, ddsBorderRadiusRounded, ddsBorderRadiusRoundedNumberPx, ddsBorderRadiusSurface, ddsBorderRadiusSurfaceNumberPx, ddsBreakpointLg, ddsBreakpointLgNumberPx, ddsBreakpointMd, ddsBreakpointMdNumberPx, ddsBreakpointSm, ddsBreakpointSmNumberPx, ddsBreakpointXl, ddsBreakpointXlNumberPx, ddsBreakpointXs, ddsBreakpointXsNumberPx, ddsColorBgDefault, ddsColorBgSubtle, ddsColorBorderActionDefault, ddsColorBorderActionHover, ddsColorBorderDanger, ddsColorBorderDefault, ddsColorBorderInfo, ddsColorBorderInverse, ddsColorBorderOnAction, ddsColorBorderSubtle, ddsColorBorderSuccess, ddsColorBorderWarning, ddsColorBrandPrimaryDefault, ddsColorBrandPrimaryMedium, ddsColorBrandPrimaryStrong, ddsColorBrandPrimarySubtle, ddsColorBrandSecondaryDefault, ddsColorBrandSecondaryMedium, ddsColorBrandSecondaryStrong, ddsColorBrandSecondarySubtle, ddsColorBrandTertiaryDefault, ddsColorBrandTertiaryMedium, ddsColorBrandTertiaryStrong, ddsColorBrandTertiarySubtle, ddsColorFocusInside, ddsColorFocusOutside, ddsColorIconActionHover, ddsColorIconActionResting, ddsColorIconDefault, ddsColorIconMedium, ddsColorIconOnAction, ddsColorIconOnDangerDefault, ddsColorIconOnDangerStrong, ddsColorIconOnInfoDefault, ddsColorIconOnInfoStrong, ddsColorIconOnInverse, ddsColorIconOnSuccessDefault, ddsColorIconOnSuccessStrong, ddsColorIconOnWarningDefault, ddsColorIconOnWarningStrong, ddsColorIconSubtle, ddsColorSurfaceActionDangerHover, ddsColorSurfaceActionDangerResting, ddsColorSurfaceActionHover, ddsColorSurfaceActionResting, ddsColorSurfaceActionSelected, ddsColorSurfaceActionSelectedDisabled, ddsColorSurfaceBackdropDefault, ddsColorSurfaceDangerDefault, ddsColorSurfaceDangerStrong, ddsColorSurfaceDefault, ddsColorSurfaceFieldDefault, ddsColorSurfaceFieldDisabled, ddsColorSurfaceHighlightedDefault, ddsColorSurfaceHoverDefault, ddsColorSurfaceHoverSubtle, ddsColorSurfaceInfoDefault, ddsColorSurfaceInfoStrong, ddsColorSurfaceInverseDefault, ddsColorSurfaceInverseHover, ddsColorSurfaceInverseSelected, ddsColorSurfaceMedium, ddsColorSurfaceNotification, ddsColorSurfacePaperDefault, ddsColorSurfaceScrollbar, ddsColorSurfaceSelectedDefault, ddsColorSurfaceSkeleton, ddsColorSurfaceSubtle, ddsColorSurfaceSuccessDefault, ddsColorSurfaceSuccessStrong, ddsColorSurfaceWarningDefault, ddsColorSurfaceWarningStrong, ddsColorTextActionHover, ddsColorTextActionResting, ddsColorTextActionVisited, ddsColorTextActionVisitedOnInverse, ddsColorTextDefault, ddsColorTextMedium, ddsColorTextOnAction, ddsColorTextOnInverse, ddsColorTextOnNotification, ddsColorTextOnStatusDefault, ddsColorTextOnStatusStrong, ddsColorTextRequiredfield, ddsColorTextSubtle, ddsFontBodyLarge, ddsFontBodyLargeLetterSpacing, ddsFontBodyLargeParagraphSpacing, ddsFontBodyLargeParagraphSpacingNumberEm, ddsFontBodyMedium, ddsFontBodyMediumLetterSpacing, ddsFontBodyMediumParagraphSpacing, ddsFontBodyMediumParagraphSpacingNumberEm, ddsFontBodySmall, ddsFontBodySmallLetterSpacing, ddsFontBodySmallParagraphSpacing, ddsFontBodySmallParagraphSpacingNumberEm, ddsFontBodyXsmall, ddsFontBodyXsmallLetterSpacing, ddsFontBodyXsmallParagraphSpacing, ddsFontBodyXsmallParagraphSpacingNumberEm, ddsFontCodeMedium, ddsFontCodeMediumLetterSpacing, ddsFontCodeMediumParagraphSpacing, ddsFontCodeMediumParagraphSpacingNumberEm, ddsFontFamilyMonospace, ddsFontFamilySans, ddsFontHeadingLarge, ddsFontHeadingLargeLetterSpacing, ddsFontHeadingLargeParagraphSpacing, ddsFontHeadingLargeParagraphSpacingNumberEm, ddsFontHeadingMedium, ddsFontHeadingMediumLetterSpacing, ddsFontHeadingMediumParagraphSpacing, ddsFontHeadingMediumParagraphSpacingNumberEm, ddsFontHeadingSmall, ddsFontHeadingSmallLetterSpacing, ddsFontHeadingSmallParagraphSpacing, ddsFontHeadingSmallParagraphSpacingNumberEm, ddsFontHeadingXlarge, ddsFontHeadingXlargeLetterSpacing, ddsFontHeadingXlargeParagraphSpacing, ddsFontHeadingXlargeParagraphSpacingNumberEm, ddsFontHeadingXsmall, ddsFontHeadingXsmallLetterSpacing, ddsFontHeadingXsmallParagraphSpacing, ddsFontHeadingXsmallParagraphSpacingNumberEm, ddsFontHeadingXxlarge, ddsFontHeadingXxlargeLetterSpacing, ddsFontHeadingXxlargeParagraphSpacing, ddsFontHeadingXxlargeParagraphSpacingNumberEm, ddsFontHeadingXxsmall, ddsFontHeadingXxsmallLetterSpacing, ddsFontHeadingXxsmallParagraphSpacing, ddsFontHeadingXxsmallParagraphSpacingNumberEm, ddsFontLabelMedium, ddsFontLabelMediumLetterSpacing, ddsFontLabelMediumParagraphSpacing, ddsFontLabelMediumParagraphSpacingNumberEm, ddsFontLeadMedium, ddsFontLeadMediumLetterSpacing, ddsFontLeadMediumParagraphSpacing, ddsFontLeadMediumParagraphSpacingNumberEm, ddsFontLetterSpacingLoose, ddsFontLetterSpacingNormal, ddsFontLetterSpacingTight, ddsFontLineheightList, ddsFontLineheightX1, ddsFontLineheightX2, ddsFontLineheightX3, ddsFontParagraphSpacingHeading, ddsFontParagraphSpacingHeadingNumberEm, ddsFontParagraphSpacingLarge, ddsFontParagraphSpacingLargeNumberEm, ddsFontParagraphSpacingMedium, ddsFontParagraphSpacingMediumNumberEm, ddsFontParagraphSpacingSmall, ddsFontParagraphSpacingSmallNumberEm, ddsFontSizeLarge, ddsFontSizeLargeNumberRem, ddsFontSizeMedium, ddsFontSizeMediumNumberRem, ddsFontSizeSmall, ddsFontSizeSmallNumberRem, ddsFontSizeX075, ddsFontSizeX075NumberRem, ddsFontSizeX0875, ddsFontSizeX0875NumberRem, ddsFontSizeX1, ddsFontSizeX1125, ddsFontSizeX1125NumberRem, ddsFontSizeX125, ddsFontSizeX125NumberRem, ddsFontSizeX15, ddsFontSizeX15NumberRem, ddsFontSizeX1NumberRem, ddsFontSizeX2, ddsFontSizeX25, ddsFontSizeX25NumberRem, ddsFontSizeX2NumberRem, ddsFontSizeX3, ddsFontSizeX3NumberRem, ddsFontSizeX4, ddsFontSizeX4NumberRem, ddsFontSizeX5, ddsFontSizeX5NumberRem, ddsFontSizeXlarge, ddsFontSizeXlargeNumberRem, ddsFontSizeXsmall, ddsFontSizeXsmallNumberRem, ddsFontSizeXxlarge, ddsFontSizeXxlargeNumberRem, ddsFontSizeXxsmall, ddsFontSizeXxsmallNumberRem, ddsFontSizeXxxsmall, ddsFontSizeXxxsmallNumberRem, ddsFontStyleItalic, ddsFontStyleNormal, ddsFontStyleUnderline, ddsFontWeightBold, ddsFontWeightLight, ddsFontWeightNormal, ddsGridLgCount, ddsGridLgGutterSize, ddsGridLgGutterSizeNumberPx, ddsGridMdCount, ddsGridMdGutterSize, ddsGridMdGutterSizeNumberPx, ddsGridSmCount, ddsGridSmGutterSize, ddsGridSmGutterSizeNumberPx, ddsGridXlCount, ddsGridXlGutterSize, ddsGridXlGutterSizeNumberPx, ddsGridXsCount, ddsGridXsGutterSize, ddsGridXsGutterSizeNumberPx, ddsIconSizeLarge, ddsIconSizeLargeNumberPx, ddsIconSizeMedium, ddsIconSizeMediumNumberPx, ddsIconSizeSmall, ddsIconSizeSmallNumberPx, ddsShadow1, ddsShadow2, ddsShadow3, ddsShadow4, ddsSpacingPaddingTopHeading, ddsSpacingPaddingTopHeadingNumberEm, ddsSpacingX0, ddsSpacingX0125, ddsSpacingX0125NumberRem, ddsSpacingX025, ddsSpacingX025NumberRem, ddsSpacingX05, ddsSpacingX05NumberRem, ddsSpacingX075, ddsSpacingX075NumberRem, ddsSpacingX0NumberRem, ddsSpacingX1, ddsSpacingX10, ddsSpacingX10NumberRem, ddsSpacingX15, ddsSpacingX15NumberRem, ddsSpacingX1NumberRem, ddsSpacingX2, ddsSpacingX25, ddsSpacingX25NumberRem, ddsSpacingX2NumberRem, ddsSpacingX3, ddsSpacingX3NumberRem, ddsSpacingX4, ddsSpacingX4NumberRem, ddsSpacingX6, ddsSpacingX6NumberRem };
+export { ddsBorderRadiusButton, ddsBorderRadiusButtonNumberPx, ddsBorderRadiusChip, ddsBorderRadiusChipNumberPx, ddsBorderRadiusInput, ddsBorderRadiusInputNumberPx, ddsBorderRadiusRounded, ddsBorderRadiusRoundedNumberPx, ddsBorderRadiusSurface, ddsBorderRadiusSurfaceNumberPx, ddsBreakpointLg, ddsBreakpointLgNumberPx, ddsBreakpointMd, ddsBreakpointMdNumberPx, ddsBreakpointSm, ddsBreakpointSmNumberPx, ddsBreakpointXl, ddsBreakpointXlNumberPx, ddsBreakpointXs, ddsBreakpointXsNumberPx, ddsColorBgDefault, ddsColorBgSubtle, ddsColorBorderActionDefault, ddsColorBorderActionHover, ddsColorBorderDanger, ddsColorBorderDefault, ddsColorBorderInfo, ddsColorBorderInverse, ddsColorBorderOnAction, ddsColorBorderSubtle, ddsColorBorderSuccess, ddsColorBorderWarning, ddsColorBrandPrimaryDefault, ddsColorBrandPrimaryMedium, ddsColorBrandPrimaryStrong, ddsColorBrandPrimarySubtle, ddsColorBrandSecondaryDefault, ddsColorBrandSecondaryMedium, ddsColorBrandSecondaryStrong, ddsColorBrandSecondarySubtle, ddsColorBrandTertiaryDefault, ddsColorBrandTertiaryMedium, ddsColorBrandTertiaryStrong, ddsColorBrandTertiarySubtle, ddsColorFocusInside, ddsColorFocusOutside, ddsColorIconActionHover, ddsColorIconActionResting, ddsColorIconDanger, ddsColorIconDefault, ddsColorIconMedium, ddsColorIconOnAction, ddsColorIconOnDangerDefault, ddsColorIconOnDangerStrong, ddsColorIconOnInfoDefault, ddsColorIconOnInfoStrong, ddsColorIconOnInverse, ddsColorIconOnSuccessDefault, ddsColorIconOnSuccessStrong, ddsColorIconOnWarningDefault, ddsColorIconOnWarningStrong, ddsColorIconSubtle, ddsColorSurfaceActionDangerHover, ddsColorSurfaceActionDangerResting, ddsColorSurfaceActionHover, ddsColorSurfaceActionResting, ddsColorSurfaceActionSelected, ddsColorSurfaceActionSelectedDisabled, ddsColorSurfaceBackdropDefault, ddsColorSurfaceDangerDefault, ddsColorSurfaceDangerStrong, ddsColorSurfaceDefault, ddsColorSurfaceFieldDefault, ddsColorSurfaceFieldDisabled, ddsColorSurfaceHighlightedDefault, ddsColorSurfaceHoverDefault, ddsColorSurfaceHoverSubtle, ddsColorSurfaceInfoDefault, ddsColorSurfaceInfoStrong, ddsColorSurfaceInverseDefault, ddsColorSurfaceInverseHover, ddsColorSurfaceInverseSelected, ddsColorSurfaceMedium, ddsColorSurfaceNotification, ddsColorSurfacePaperDefault, ddsColorSurfaceScrollbar, ddsColorSurfaceSelectedDefault, ddsColorSurfaceSkeleton, ddsColorSurfaceSubtle, ddsColorSurfaceSuccessDefault, ddsColorSurfaceSuccessStrong, ddsColorSurfaceWarningDefault, ddsColorSurfaceWarningStrong, ddsColorTextActionHover, ddsColorTextActionResting, ddsColorTextActionVisited, ddsColorTextActionVisitedOnInverse, ddsColorTextDanger, ddsColorTextDefault, ddsColorTextMedium, ddsColorTextOnAction, ddsColorTextOnInverse, ddsColorTextOnNotification, ddsColorTextOnStatusDefault, ddsColorTextOnStatusStrong, ddsColorTextRequiredfield, ddsColorTextSubtle, ddsFontBodyLarge, ddsFontBodyLargeLetterSpacing, ddsFontBodyLargeParagraphSpacing, ddsFontBodyLargeParagraphSpacingNumberEm, ddsFontBodyMedium, ddsFontBodyMediumLetterSpacing, ddsFontBodyMediumParagraphSpacing, ddsFontBodyMediumParagraphSpacingNumberEm, ddsFontBodySmall, ddsFontBodySmallLetterSpacing, ddsFontBodySmallParagraphSpacing, ddsFontBodySmallParagraphSpacingNumberEm, ddsFontBodyXsmall, ddsFontBodyXsmallLetterSpacing, ddsFontBodyXsmallParagraphSpacing, ddsFontBodyXsmallParagraphSpacingNumberEm, ddsFontCodeMedium, ddsFontCodeMediumLetterSpacing, ddsFontCodeMediumParagraphSpacing, ddsFontCodeMediumParagraphSpacingNumberEm, ddsFontFamilyMonospace, ddsFontFamilySans, ddsFontHeadingLarge, ddsFontHeadingLargeLetterSpacing, ddsFontHeadingLargeParagraphSpacing, ddsFontHeadingLargeParagraphSpacingNumberEm, ddsFontHeadingMedium, ddsFontHeadingMediumLetterSpacing, ddsFontHeadingMediumParagraphSpacing, ddsFontHeadingMediumParagraphSpacingNumberEm, ddsFontHeadingSmall, ddsFontHeadingSmallLetterSpacing, ddsFontHeadingSmallParagraphSpacing, ddsFontHeadingSmallParagraphSpacingNumberEm, ddsFontHeadingXlarge, ddsFontHeadingXlargeLetterSpacing, ddsFontHeadingXlargeParagraphSpacing, ddsFontHeadingXlargeParagraphSpacingNumberEm, ddsFontHeadingXsmall, ddsFontHeadingXsmallLetterSpacing, ddsFontHeadingXsmallParagraphSpacing, ddsFontHeadingXsmallParagraphSpacingNumberEm, ddsFontHeadingXxlarge, ddsFontHeadingXxlargeLetterSpacing, ddsFontHeadingXxlargeParagraphSpacing, ddsFontHeadingXxlargeParagraphSpacingNumberEm, ddsFontHeadingXxsmall, ddsFontHeadingXxsmallLetterSpacing, ddsFontHeadingXxsmallParagraphSpacing, ddsFontHeadingXxsmallParagraphSpacingNumberEm, ddsFontLabelMedium, ddsFontLabelMediumLetterSpacing, ddsFontLabelMediumParagraphSpacing, ddsFontLabelMediumParagraphSpacingNumberEm, ddsFontLeadMedium, ddsFontLeadMediumLetterSpacing, ddsFontLeadMediumParagraphSpacing, ddsFontLeadMediumParagraphSpacingNumberEm, ddsFontLetterSpacingLoose, ddsFontLetterSpacingNormal, ddsFontLetterSpacingTight, ddsFontLineheightList, ddsFontLineheightX1, ddsFontLineheightX2, ddsFontLineheightX3, ddsFontParagraphSpacingHeading, ddsFontParagraphSpacingHeadingNumberEm, ddsFontParagraphSpacingLarge, ddsFontParagraphSpacingLargeNumberEm, ddsFontParagraphSpacingMedium, ddsFontParagraphSpacingMediumNumberEm, ddsFontParagraphSpacingSmall, ddsFontParagraphSpacingSmallNumberEm, ddsFontSizeLarge, ddsFontSizeLargeNumberRem, ddsFontSizeMedium, ddsFontSizeMediumNumberRem, ddsFontSizeSmall, ddsFontSizeSmallNumberRem, ddsFontSizeX075, ddsFontSizeX075NumberRem, ddsFontSizeX0875, ddsFontSizeX0875NumberRem, ddsFontSizeX1, ddsFontSizeX1125, ddsFontSizeX1125NumberRem, ddsFontSizeX125, ddsFontSizeX125NumberRem, ddsFontSizeX15, ddsFontSizeX15NumberRem, ddsFontSizeX1NumberRem, ddsFontSizeX2, ddsFontSizeX25, ddsFontSizeX25NumberRem, ddsFontSizeX2NumberRem, ddsFontSizeX3, ddsFontSizeX3NumberRem, ddsFontSizeX4, ddsFontSizeX4NumberRem, ddsFontSizeX5, ddsFontSizeX5NumberRem, ddsFontSizeXlarge, ddsFontSizeXlargeNumberRem, ddsFontSizeXsmall, ddsFontSizeXsmallNumberRem, ddsFontSizeXxlarge, ddsFontSizeXxlargeNumberRem, ddsFontSizeXxsmall, ddsFontSizeXxsmallNumberRem, ddsFontSizeXxxsmall, ddsFontSizeXxxsmallNumberRem, ddsFontStyleItalic, ddsFontStyleNormal, ddsFontStyleUnderline, ddsFontWeightBold, ddsFontWeightLight, ddsFontWeightNormal, ddsGridLgCount, ddsGridLgGutterSize, ddsGridLgGutterSizeNumberPx, ddsGridMdCount, ddsGridMdGutterSize, ddsGridMdGutterSizeNumberPx, ddsGridSmCount, ddsGridSmGutterSize, ddsGridSmGutterSizeNumberPx, ddsGridXlCount, ddsGridXlGutterSize, ddsGridXlGutterSizeNumberPx, ddsGridXsCount, ddsGridXsGutterSize, ddsGridXsGutterSizeNumberPx, ddsIconSizeLarge, ddsIconSizeLargeNumberPx, ddsIconSizeMedium, ddsIconSizeMediumNumberPx, ddsIconSizeSmall, ddsIconSizeSmallNumberPx, ddsShadow1, ddsShadow2, ddsShadow3, ddsShadow4, ddsSpacingPaddingTopHeading, ddsSpacingPaddingTopHeadingNumberEm, ddsSpacingX0, ddsSpacingX0125, ddsSpacingX0125NumberRem, ddsSpacingX025, ddsSpacingX025NumberRem, ddsSpacingX05, ddsSpacingX05NumberRem, ddsSpacingX075, ddsSpacingX075NumberRem, ddsSpacingX0NumberRem, ddsSpacingX1, ddsSpacingX10, ddsSpacingX10NumberRem, ddsSpacingX15, ddsSpacingX15NumberRem, ddsSpacingX1NumberRem, ddsSpacingX2, ddsSpacingX25, ddsSpacingX25NumberRem, ddsSpacingX2NumberRem, ddsSpacingX3, ddsSpacingX3NumberRem, ddsSpacingX4, ddsSpacingX4NumberRem, ddsSpacingX6, ddsSpacingX6NumberRem, ddsZindexAbsoluteElement, ddsZindexDrawer, ddsZindexDrawerBackdrop, ddsZindexDropdown, ddsZindexModalBackdrop, ddsZindexOverflowmenu, ddsZindexPopover, ddsZindexSkiptocontent, ddsZindexSticky, ddsZindexTooltip };

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

@@ -122,6 +122,16 @@ export declare const ddsBreakpointLg = "1280px";
 export declare const ddsBreakpointLgNumberPx = 1280;
 export declare const ddsBreakpointXl = "1920px";
 export declare const ddsBreakpointXlNumberPx = 1920;
+export declare const ddsZindexSkiptocontent = "250";
+export declare const ddsZindexModalBackdrop = "200";
+export declare const ddsZindexDrawer = "180";
+export declare const ddsZindexDrawerBackdrop = "180";
+export declare const ddsZindexOverflowmenu = "160";
+export declare const ddsZindexPopover = "140";
+export declare const ddsZindexTooltip = "120";
+export declare const ddsZindexDropdown = "100";
+export declare const ddsZindexSticky = "50";
+export declare const ddsZindexAbsoluteElement = "1";
 export declare const ddsColorBgDefault = "#ffffff";
 export declare const ddsColorBgSubtle = "#f8f9f9";
 export declare const ddsColorSurfaceDefault = "#ffffff";
@@ -178,6 +188,7 @@ export declare const ddsColorTextRequiredfield = "#d83737";
 export declare const ddsColorTextActionVisited = "#7f29b4";
 export declare const ddsColorTextActionVisitedOnInverse = "#cca9e1";
 export declare const ddsColorTextOnNotification = "#ffffff";
+export declare const ddsColorTextDanger = "#ad2c2c";
 export declare const ddsColorIconDefault = "#0b0d0e";
 export declare const ddsColorIconMedium = "#3a4146";
 export declare const ddsColorIconSubtle = "#545c62";
@@ -193,6 +204,7 @@ export declare const ddsColorIconOnDangerDefault = "#ad2c2c";
 export declare const ddsColorIconOnDangerStrong = "#0b0d0e";
 export declare const ddsColorIconOnInfoDefault = "#466f8a";
 export declare const ddsColorIconOnInfoStrong = "#0b0d0e";
+export declare const ddsColorIconDanger = "#ad2c2c";
 export declare const ddsColorBrandPrimaryDefault = "#354754";
 export declare const ddsColorBrandPrimarySubtle = "#eaeff4";
 export declare const ddsColorBrandPrimaryMedium = "#4f6a7e";

package/dist/dds/build/js/Public/ddsTokens.js

@@ -123,6 +123,16 @@ const ddsBreakpointLg = "1280px";
 const ddsBreakpointLgNumberPx = 1280;
 const ddsBreakpointXl = "1920px";
 const ddsBreakpointXlNumberPx = 1920;
+const ddsZindexSkiptocontent = "250"; // Brukes for dds-skiptocontent
+const ddsZindexModalBackdrop = "200"; // Brukes for dds-modal
+const ddsZindexDrawer = "180"; // Brukes for dds-drawer
+const ddsZindexDrawerBackdrop = "180"; // Brukes for dds-drawer
+const ddsZindexOverflowmenu = "160"; // Brukes for dds-overflowmenu
+const ddsZindexPopover = "140"; // Brukes for dds-popover og kalender i datepicker
+const ddsZindexTooltip = "120"; // Brukes for dds-tooltip
+const ddsZindexDropdown = "100"; // Dropdown brukes for bl.a søkeforslag, dropdown i select
+const ddsZindexSticky = "50"; // Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater
+const ddsZindexAbsoluteElement = "1"; // Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder
 const ddsColorBgDefault = "#ffffff"; // UI shell base color
 const ddsColorBgSubtle = "#f8f9f9"; // Alternative UI shell base color
 const ddsColorSurfaceDefault = "#ffffff"; // Default bg
@@ -179,6 +189,7 @@ const ddsColorTextRequiredfield = "#d83737"; // Asterix to indicate required fie
 const ddsColorTextActionVisited = "#7f29b4"; // Used for visited links
 const ddsColorTextActionVisitedOnInverse = "#cca9e1"; // Used for visited links on inverse surfaces
 const ddsColorTextOnNotification = "#ffffff"; // Used on surface.notification
+const ddsColorTextDanger = "#ad2c2c"; // Error text on paper, or default or subtle surafce/bg
 const ddsColorIconDefault = "#0b0d0e"; // Often used with text.default
 const ddsColorIconMedium = "#3a4146"; // Often used with text.medium
 const ddsColorIconSubtle = "#545c62"; // Often used with text.subtle
@@ -194,6 +205,7 @@ const ddsColorIconOnDangerDefault = "#ad2c2c"; // On surface.danger-default
 const ddsColorIconOnDangerStrong = "#0b0d0e"; // On surface.danger-strong
 const ddsColorIconOnInfoDefault = "#466f8a"; // On surface.info-default
 const ddsColorIconOnInfoStrong = "#0b0d0e"; // On surface.info-strong
+const ddsColorIconDanger = "#ad2c2c"; // Error icon on paper, or default or subtle surafce/bg
 const ddsColorBrandPrimaryDefault = "#354754"; // Primary brand color
 const ddsColorBrandPrimarySubtle = "#eaeff4"; // Primary brand color
 const ddsColorBrandPrimaryMedium = "#4f6a7e"; // Primary brand color
@@ -275,4 +287,4 @@ const ddsFontLabelMediumLetterSpacing = "0.01em";
 const ddsFontLabelMediumParagraphSpacing = "1em";
 const ddsFontLabelMediumParagraphSpacingNumberEm = 1;
 
-export { ddsBorderRadiusButton, ddsBorderRadiusButtonNumberPx, ddsBorderRadiusChip, ddsBorderRadiusChipNumberPx, ddsBorderRadiusInput, ddsBorderRadiusInputNumberPx, ddsBorderRadiusRounded, ddsBorderRadiusRoundedNumberPx, ddsBorderRadiusSurface, ddsBorderRadiusSurfaceNumberPx, ddsBreakpointLg, ddsBreakpointLgNumberPx, ddsBreakpointMd, ddsBreakpointMdNumberPx, ddsBreakpointSm, ddsBreakpointSmNumberPx, ddsBreakpointXl, ddsBreakpointXlNumberPx, ddsBreakpointXs, ddsBreakpointXsNumberPx, ddsColorBgDefault, ddsColorBgSubtle, ddsColorBorderActionDefault, ddsColorBorderActionHover, ddsColorBorderDanger, ddsColorBorderDefault, ddsColorBorderInfo, ddsColorBorderInverse, ddsColorBorderOnAction, ddsColorBorderSubtle, ddsColorBorderSuccess, ddsColorBorderWarning, ddsColorBrandPrimaryDefault, ddsColorBrandPrimaryMedium, ddsColorBrandPrimaryStrong, ddsColorBrandPrimarySubtle, ddsColorBrandSecondaryDefault, ddsColorBrandSecondaryMedium, ddsColorBrandSecondaryStrong, ddsColorBrandSecondarySubtle, ddsColorBrandTertiaryDefault, ddsColorBrandTertiaryMedium, ddsColorBrandTertiaryStrong, ddsColorBrandTertiarySubtle, ddsColorFocusInside, ddsColorFocusOutside, ddsColorIconActionHover, ddsColorIconActionResting, ddsColorIconDefault, ddsColorIconMedium, ddsColorIconOnAction, ddsColorIconOnDangerDefault, ddsColorIconOnDangerStrong, ddsColorIconOnInfoDefault, ddsColorIconOnInfoStrong, ddsColorIconOnInverse, ddsColorIconOnSuccessDefault, ddsColorIconOnSuccessStrong, ddsColorIconOnWarningDefault, ddsColorIconOnWarningStrong, ddsColorIconSubtle, ddsColorSurfaceActionDangerHover, ddsColorSurfaceActionDangerResting, ddsColorSurfaceActionHover, ddsColorSurfaceActionResting, ddsColorSurfaceActionSelected, ddsColorSurfaceActionSelectedDisabled, ddsColorSurfaceBackdropDefault, ddsColorSurfaceDangerDefault, ddsColorSurfaceDangerStrong, ddsColorSurfaceDefault, ddsColorSurfaceFieldDefault, ddsColorSurfaceFieldDisabled, ddsColorSurfaceHighlightedDefault, ddsColorSurfaceHoverDefault, ddsColorSurfaceHoverSubtle, ddsColorSurfaceInfoDefault, ddsColorSurfaceInfoStrong, ddsColorSurfaceInverseDefault, ddsColorSurfaceInverseHover, ddsColorSurfaceInverseSelected, ddsColorSurfaceMedium, ddsColorSurfaceNotification, ddsColorSurfacePaperDefault, ddsColorSurfaceScrollbar, ddsColorSurfaceSelectedDefault, ddsColorSurfaceSkeleton, ddsColorSurfaceSubtle, ddsColorSurfaceSuccessDefault, ddsColorSurfaceSuccessStrong, ddsColorSurfaceWarningDefault, ddsColorSurfaceWarningStrong, ddsColorTextActionHover, ddsColorTextActionResting, ddsColorTextActionVisited, ddsColorTextActionVisitedOnInverse, ddsColorTextDefault, ddsColorTextMedium, ddsColorTextOnAction, ddsColorTextOnInverse, ddsColorTextOnNotification, ddsColorTextOnStatusDefault, ddsColorTextOnStatusStrong, ddsColorTextRequiredfield, ddsColorTextSubtle, ddsFontBodyLarge, ddsFontBodyLargeLetterSpacing, ddsFontBodyLargeParagraphSpacing, ddsFontBodyLargeParagraphSpacingNumberEm, ddsFontBodyMedium, ddsFontBodyMediumLetterSpacing, ddsFontBodyMediumParagraphSpacing, ddsFontBodyMediumParagraphSpacingNumberEm, ddsFontBodySmall, ddsFontBodySmallLetterSpacing, ddsFontBodySmallParagraphSpacing, ddsFontBodySmallParagraphSpacingNumberEm, ddsFontBodyXsmall, ddsFontBodyXsmallLetterSpacing, ddsFontBodyXsmallParagraphSpacing, ddsFontBodyXsmallParagraphSpacingNumberEm, ddsFontCodeMedium, ddsFontCodeMediumLetterSpacing, ddsFontCodeMediumParagraphSpacing, ddsFontCodeMediumParagraphSpacingNumberEm, ddsFontFamilyMonospace, ddsFontFamilySans, ddsFontHeadingLarge, ddsFontHeadingLargeLetterSpacing, ddsFontHeadingLargeParagraphSpacing, ddsFontHeadingLargeParagraphSpacingNumberEm, ddsFontHeadingMedium, ddsFontHeadingMediumLetterSpacing, ddsFontHeadingMediumParagraphSpacing, ddsFontHeadingMediumParagraphSpacingNumberEm, ddsFontHeadingSmall, ddsFontHeadingSmallLetterSpacing, ddsFontHeadingSmallParagraphSpacing, ddsFontHeadingSmallParagraphSpacingNumberEm, ddsFontHeadingXlarge, ddsFontHeadingXlargeLetterSpacing, ddsFontHeadingXlargeParagraphSpacing, ddsFontHeadingXlargeParagraphSpacingNumberEm, ddsFontHeadingXsmall, ddsFontHeadingXsmallLetterSpacing, ddsFontHeadingXsmallParagraphSpacing, ddsFontHeadingXsmallParagraphSpacingNumberEm, ddsFontHeadingXxlarge, ddsFontHeadingXxlargeLetterSpacing, ddsFontHeadingXxlargeParagraphSpacing, ddsFontHeadingXxlargeParagraphSpacingNumberEm, ddsFontHeadingXxsmall, ddsFontHeadingXxsmallLetterSpacing, ddsFontHeadingXxsmallParagraphSpacing, ddsFontHeadingXxsmallParagraphSpacingNumberEm, ddsFontLabelMedium, ddsFontLabelMediumLetterSpacing, ddsFontLabelMediumParagraphSpacing, ddsFontLabelMediumParagraphSpacingNumberEm, ddsFontLeadMedium, ddsFontLeadMediumLetterSpacing, ddsFontLeadMediumParagraphSpacing, ddsFontLeadMediumParagraphSpacingNumberEm, ddsFontLetterSpacingLoose, ddsFontLetterSpacingNormal, ddsFontLetterSpacingTight, ddsFontLineheightList, ddsFontLineheightX1, ddsFontLineheightX2, ddsFontLineheightX3, ddsFontParagraphSpacingHeading, ddsFontParagraphSpacingHeadingNumberEm, ddsFontParagraphSpacingLarge, ddsFontParagraphSpacingLargeNumberEm, ddsFontParagraphSpacingMedium, ddsFontParagraphSpacingMediumNumberEm, ddsFontParagraphSpacingSmall, ddsFontParagraphSpacingSmallNumberEm, ddsFontSizeLarge, ddsFontSizeLargeNumberRem, ddsFontSizeMedium, ddsFontSizeMediumNumberRem, ddsFontSizeSmall, ddsFontSizeSmallNumberRem, ddsFontSizeX075, ddsFontSizeX075NumberRem, ddsFontSizeX0875, ddsFontSizeX0875NumberRem, ddsFontSizeX1, ddsFontSizeX1125, ddsFontSizeX1125NumberRem, ddsFontSizeX125, ddsFontSizeX125NumberRem, ddsFontSizeX15, ddsFontSizeX15NumberRem, ddsFontSizeX1NumberRem, ddsFontSizeX2, ddsFontSizeX25, ddsFontSizeX25NumberRem, ddsFontSizeX2NumberRem, ddsFontSizeX3, ddsFontSizeX3NumberRem, ddsFontSizeX4, ddsFontSizeX4NumberRem, ddsFontSizeX5, ddsFontSizeX5NumberRem, ddsFontSizeXlarge, ddsFontSizeXlargeNumberRem, ddsFontSizeXsmall, ddsFontSizeXsmallNumberRem, ddsFontSizeXxlarge, ddsFontSizeXxlargeNumberRem, ddsFontSizeXxsmall, ddsFontSizeXxsmallNumberRem, ddsFontSizeXxxsmall, ddsFontSizeXxxsmallNumberRem, ddsFontStyleItalic, ddsFontStyleNormal, ddsFontStyleUnderline, ddsFontWeightBold, ddsFontWeightLight, ddsFontWeightNormal, ddsGridLgCount, ddsGridLgGutterSize, ddsGridLgGutterSizeNumberPx, ddsGridMdCount, ddsGridMdGutterSize, ddsGridMdGutterSizeNumberPx, ddsGridSmCount, ddsGridSmGutterSize, ddsGridSmGutterSizeNumberPx, ddsGridXlCount, ddsGridXlGutterSize, ddsGridXlGutterSizeNumberPx, ddsGridXsCount, ddsGridXsGutterSize, ddsGridXsGutterSizeNumberPx, ddsIconSizeLarge, ddsIconSizeLargeNumberPx, ddsIconSizeMedium, ddsIconSizeMediumNumberPx, ddsIconSizeSmall, ddsIconSizeSmallNumberPx, ddsShadow1, ddsShadow2, ddsShadow3, ddsShadow4, ddsSpacingPaddingTopHeading, ddsSpacingPaddingTopHeadingNumberEm, ddsSpacingX0, ddsSpacingX0125, ddsSpacingX0125NumberRem, ddsSpacingX025, ddsSpacingX025NumberRem, ddsSpacingX05, ddsSpacingX05NumberRem, ddsSpacingX075, ddsSpacingX075NumberRem, ddsSpacingX0NumberRem, ddsSpacingX1, ddsSpacingX10, ddsSpacingX10NumberRem, ddsSpacingX15, ddsSpacingX15NumberRem, ddsSpacingX1NumberRem, ddsSpacingX2, ddsSpacingX25, ddsSpacingX25NumberRem, ddsSpacingX2NumberRem, ddsSpacingX3, ddsSpacingX3NumberRem, ddsSpacingX4, ddsSpacingX4NumberRem, ddsSpacingX6, ddsSpacingX6NumberRem };
+export { ddsBorderRadiusButton, ddsBorderRadiusButtonNumberPx, ddsBorderRadiusChip, ddsBorderRadiusChipNumberPx, ddsBorderRadiusInput, ddsBorderRadiusInputNumberPx, ddsBorderRadiusRounded, ddsBorderRadiusRoundedNumberPx, ddsBorderRadiusSurface, ddsBorderRadiusSurfaceNumberPx, ddsBreakpointLg, ddsBreakpointLgNumberPx, ddsBreakpointMd, ddsBreakpointMdNumberPx, ddsBreakpointSm, ddsBreakpointSmNumberPx, ddsBreakpointXl, ddsBreakpointXlNumberPx, ddsBreakpointXs, ddsBreakpointXsNumberPx, ddsColorBgDefault, ddsColorBgSubtle, ddsColorBorderActionDefault, ddsColorBorderActionHover, ddsColorBorderDanger, ddsColorBorderDefault, ddsColorBorderInfo, ddsColorBorderInverse, ddsColorBorderOnAction, ddsColorBorderSubtle, ddsColorBorderSuccess, ddsColorBorderWarning, ddsColorBrandPrimaryDefault, ddsColorBrandPrimaryMedium, ddsColorBrandPrimaryStrong, ddsColorBrandPrimarySubtle, ddsColorBrandSecondaryDefault, ddsColorBrandSecondaryMedium, ddsColorBrandSecondaryStrong, ddsColorBrandSecondarySubtle, ddsColorBrandTertiaryDefault, ddsColorBrandTertiaryMedium, ddsColorBrandTertiaryStrong, ddsColorBrandTertiarySubtle, ddsColorFocusInside, ddsColorFocusOutside, ddsColorIconActionHover, ddsColorIconActionResting, ddsColorIconDanger, ddsColorIconDefault, ddsColorIconMedium, ddsColorIconOnAction, ddsColorIconOnDangerDefault, ddsColorIconOnDangerStrong, ddsColorIconOnInfoDefault, ddsColorIconOnInfoStrong, ddsColorIconOnInverse, ddsColorIconOnSuccessDefault, ddsColorIconOnSuccessStrong, ddsColorIconOnWarningDefault, ddsColorIconOnWarningStrong, ddsColorIconSubtle, ddsColorSurfaceActionDangerHover, ddsColorSurfaceActionDangerResting, ddsColorSurfaceActionHover, ddsColorSurfaceActionResting, ddsColorSurfaceActionSelected, ddsColorSurfaceActionSelectedDisabled, ddsColorSurfaceBackdropDefault, ddsColorSurfaceDangerDefault, ddsColorSurfaceDangerStrong, ddsColorSurfaceDefault, ddsColorSurfaceFieldDefault, ddsColorSurfaceFieldDisabled, ddsColorSurfaceHighlightedDefault, ddsColorSurfaceHoverDefault, ddsColorSurfaceHoverSubtle, ddsColorSurfaceInfoDefault, ddsColorSurfaceInfoStrong, ddsColorSurfaceInverseDefault, ddsColorSurfaceInverseHover, ddsColorSurfaceInverseSelected, ddsColorSurfaceMedium, ddsColorSurfaceNotification, ddsColorSurfacePaperDefault, ddsColorSurfaceScrollbar, ddsColorSurfaceSelectedDefault, ddsColorSurfaceSkeleton, ddsColorSurfaceSubtle, ddsColorSurfaceSuccessDefault, ddsColorSurfaceSuccessStrong, ddsColorSurfaceWarningDefault, ddsColorSurfaceWarningStrong, ddsColorTextActionHover, ddsColorTextActionResting, ddsColorTextActionVisited, ddsColorTextActionVisitedOnInverse, ddsColorTextDanger, ddsColorTextDefault, ddsColorTextMedium, ddsColorTextOnAction, ddsColorTextOnInverse, ddsColorTextOnNotification, ddsColorTextOnStatusDefault, ddsColorTextOnStatusStrong, ddsColorTextRequiredfield, ddsColorTextSubtle, ddsFontBodyLarge, ddsFontBodyLargeLetterSpacing, ddsFontBodyLargeParagraphSpacing, ddsFontBodyLargeParagraphSpacingNumberEm, ddsFontBodyMedium, ddsFontBodyMediumLetterSpacing, ddsFontBodyMediumParagraphSpacing, ddsFontBodyMediumParagraphSpacingNumberEm, ddsFontBodySmall, ddsFontBodySmallLetterSpacing, ddsFontBodySmallParagraphSpacing, ddsFontBodySmallParagraphSpacingNumberEm, ddsFontBodyXsmall, ddsFontBodyXsmallLetterSpacing, ddsFontBodyXsmallParagraphSpacing, ddsFontBodyXsmallParagraphSpacingNumberEm, ddsFontCodeMedium, ddsFontCodeMediumLetterSpacing, ddsFontCodeMediumParagraphSpacing, ddsFontCodeMediumParagraphSpacingNumberEm, ddsFontFamilyMonospace, ddsFontFamilySans, ddsFontHeadingLarge, ddsFontHeadingLargeLetterSpacing, ddsFontHeadingLargeParagraphSpacing, ddsFontHeadingLargeParagraphSpacingNumberEm, ddsFontHeadingMedium, ddsFontHeadingMediumLetterSpacing, ddsFontHeadingMediumParagraphSpacing, ddsFontHeadingMediumParagraphSpacingNumberEm, ddsFontHeadingSmall, ddsFontHeadingSmallLetterSpacing, ddsFontHeadingSmallParagraphSpacing, ddsFontHeadingSmallParagraphSpacingNumberEm, ddsFontHeadingXlarge, ddsFontHeadingXlargeLetterSpacing, ddsFontHeadingXlargeParagraphSpacing, ddsFontHeadingXlargeParagraphSpacingNumberEm, ddsFontHeadingXsmall, ddsFontHeadingXsmallLetterSpacing, ddsFontHeadingXsmallParagraphSpacing, ddsFontHeadingXsmallParagraphSpacingNumberEm, ddsFontHeadingXxlarge, ddsFontHeadingXxlargeLetterSpacing, ddsFontHeadingXxlargeParagraphSpacing, ddsFontHeadingXxlargeParagraphSpacingNumberEm, ddsFontHeadingXxsmall, ddsFontHeadingXxsmallLetterSpacing, ddsFontHeadingXxsmallParagraphSpacing, ddsFontHeadingXxsmallParagraphSpacingNumberEm, ddsFontLabelMedium, ddsFontLabelMediumLetterSpacing, ddsFontLabelMediumParagraphSpacing, ddsFontLabelMediumParagraphSpacingNumberEm, ddsFontLeadMedium, ddsFontLeadMediumLetterSpacing, ddsFontLeadMediumParagraphSpacing, ddsFontLeadMediumParagraphSpacingNumberEm, ddsFontLetterSpacingLoose, ddsFontLetterSpacingNormal, ddsFontLetterSpacingTight, ddsFontLineheightList, ddsFontLineheightX1, ddsFontLineheightX2, ddsFontLineheightX3, ddsFontParagraphSpacingHeading, ddsFontParagraphSpacingHeadingNumberEm, ddsFontParagraphSpacingLarge, ddsFontParagraphSpacingLargeNumberEm, ddsFontParagraphSpacingMedium, ddsFontParagraphSpacingMediumNumberEm, ddsFontParagraphSpacingSmall, ddsFontParagraphSpacingSmallNumberEm, ddsFontSizeLarge, ddsFontSizeLargeNumberRem, ddsFontSizeMedium, ddsFontSizeMediumNumberRem, ddsFontSizeSmall, ddsFontSizeSmallNumberRem, ddsFontSizeX075, ddsFontSizeX075NumberRem, ddsFontSizeX0875, ddsFontSizeX0875NumberRem, ddsFontSizeX1, ddsFontSizeX1125, ddsFontSizeX1125NumberRem, ddsFontSizeX125, ddsFontSizeX125NumberRem, ddsFontSizeX15, ddsFontSizeX15NumberRem, ddsFontSizeX1NumberRem, ddsFontSizeX2, ddsFontSizeX25, ddsFontSizeX25NumberRem, ddsFontSizeX2NumberRem, ddsFontSizeX3, ddsFontSizeX3NumberRem, ddsFontSizeX4, ddsFontSizeX4NumberRem, ddsFontSizeX5, ddsFontSizeX5NumberRem, ddsFontSizeXlarge, ddsFontSizeXlargeNumberRem, ddsFontSizeXsmall, ddsFontSizeXsmallNumberRem, ddsFontSizeXxlarge, ddsFontSizeXxlargeNumberRem, ddsFontSizeXxsmall, ddsFontSizeXxsmallNumberRem, ddsFontSizeXxxsmall, ddsFontSizeXxxsmallNumberRem, ddsFontStyleItalic, ddsFontStyleNormal, ddsFontStyleUnderline, ddsFontWeightBold, ddsFontWeightLight, ddsFontWeightNormal, ddsGridLgCount, ddsGridLgGutterSize, ddsGridLgGutterSizeNumberPx, ddsGridMdCount, ddsGridMdGutterSize, ddsGridMdGutterSizeNumberPx, ddsGridSmCount, ddsGridSmGutterSize, ddsGridSmGutterSizeNumberPx, ddsGridXlCount, ddsGridXlGutterSize, ddsGridXlGutterSizeNumberPx, ddsGridXsCount, ddsGridXsGutterSize, ddsGridXsGutterSizeNumberPx, ddsIconSizeLarge, ddsIconSizeLargeNumberPx, ddsIconSizeMedium, ddsIconSizeMediumNumberPx, ddsIconSizeSmall, ddsIconSizeSmallNumberPx, ddsShadow1, ddsShadow2, ddsShadow3, ddsShadow4, ddsSpacingPaddingTopHeading, ddsSpacingPaddingTopHeadingNumberEm, ddsSpacingX0, ddsSpacingX0125, ddsSpacingX0125NumberRem, ddsSpacingX025, ddsSpacingX025NumberRem, ddsSpacingX05, ddsSpacingX05NumberRem, ddsSpacingX075, ddsSpacingX075NumberRem, ddsSpacingX0NumberRem, ddsSpacingX1, ddsSpacingX10, ddsSpacingX10NumberRem, ddsSpacingX15, ddsSpacingX15NumberRem, ddsSpacingX1NumberRem, ddsSpacingX2, ddsSpacingX25, ddsSpacingX25NumberRem, ddsSpacingX2NumberRem, ddsSpacingX3, ddsSpacingX3NumberRem, ddsSpacingX4, ddsSpacingX4NumberRem, ddsSpacingX6, ddsSpacingX6NumberRem, ddsZindexAbsoluteElement, ddsZindexDrawer, ddsZindexDrawerBackdrop, ddsZindexDropdown, ddsZindexModalBackdrop, ddsZindexOverflowmenu, ddsZindexPopover, ddsZindexSkiptocontent, ddsZindexSticky, ddsZindexTooltip };

package/dist/scss/_ddsTokens.scss

@@ -75,6 +75,16 @@
   $dds-breakpoint-md: var(--dds-breakpoint-md);
   $dds-breakpoint-lg: var(--dds-breakpoint-lg);
   $dds-breakpoint-xl: var(--dds-breakpoint-xl);
+  $dds-zindex-skiptocontent: var(--dds-zindex-skiptocontent); /* Brukes for dds-skiptocontent */
+  $dds-zindex-modal-backdrop: var(--dds-zindex-modal-backdrop); /* Brukes for dds-modal */
+  $dds-zindex-drawer: var(--dds-zindex-drawer); /* Brukes for dds-drawer */
+  $dds-zindex-drawer-backdrop: var(--dds-zindex-drawer-backdrop); /* Brukes for dds-drawer */
+  $dds-zindex-overflowmenu: var(--dds-zindex-overflowmenu); /* Brukes for dds-overflowmenu */
+  $dds-zindex-popover: var(--dds-zindex-popover); /* Brukes for dds-popover og kalender i datepicker */
+  $dds-zindex-tooltip: var(--dds-zindex-tooltip); /* Brukes for dds-tooltip */
+  $dds-zindex-dropdown: var(--dds-zindex-dropdown); /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
+  $dds-zindex-sticky: var(--dds-zindex-sticky); /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
+  $dds-zindex-absolute-element: var(--dds-zindex-absolute-element); /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
   $dds-color-bg-default: var(--dds-color-bg-default); /* UI shell base color */
   $dds-color-bg-subtle: var(--dds-color-bg-subtle); /* Alternative UI shell base color */
   $dds-color-surface-default: var(--dds-color-surface-default); /* Default bg */
@@ -131,6 +141,7 @@
   $dds-color-text-action-visited: var(--dds-color-text-action-visited); /* Used for visited links */
   $dds-color-text-action-visited-on-inverse: var(--dds-color-text-action-visited-on-inverse); /* Used for visited links on inverse surfaces */
   $dds-color-text-on-notification: var(--dds-color-text-on-notification); /* Used on surface.notification */
+  $dds-color-text-danger: var(--dds-color-text-danger); /* Error text on paper, or default or subtle surafce/bg */
   $dds-color-icon-default: var(--dds-color-icon-default); /* Often used with text.default */
   $dds-color-icon-medium: var(--dds-color-icon-medium); /* Often used with text.medium */
   $dds-color-icon-subtle: var(--dds-color-icon-subtle); /* Often used with text.subtle */
@@ -146,6 +157,7 @@
   $dds-color-icon-on-danger-strong: var(--dds-color-icon-on-danger-strong); /* On surface.danger-strong */
   $dds-color-icon-on-info-default: var(--dds-color-icon-on-info-default); /* On surface.info-default */
   $dds-color-icon-on-info-strong: var(--dds-color-icon-on-info-strong); /* On surface.info-strong */
+  $dds-color-icon-danger: var(--dds-color-icon-danger); /* Error icon on paper, or default or subtle surafce/bg */
   $dds-color-brand-primary-default: var(--dds-color-brand-primary-default); /* Primary brand color */
   $dds-color-brand-primary-subtle: var(--dds-color-brand-primary-subtle); /* Primary brand color */
   $dds-color-brand-primary-medium: var(--dds-color-brand-primary-medium); /* Primary brand color */

package/dist/src/index.d.ts

@@ -124,6 +124,16 @@ export declare const ddsTokens: {
         ddsBreakpointLgNumberPx: 1280;
         ddsBreakpointXl: "1920px";
         ddsBreakpointXlNumberPx: 1920;
+        ddsZindexSkiptocontent: "250";
+        ddsZindexModalBackdrop: "200";
+        ddsZindexDrawer: "180";
+        ddsZindexDrawerBackdrop: "180";
+        ddsZindexOverflowmenu: "160";
+        ddsZindexPopover: "140";
+        ddsZindexTooltip: "120";
+        ddsZindexDropdown: "100";
+        ddsZindexSticky: "50";
+        ddsZindexAbsoluteElement: "1";
         ddsColorBgDefault: "#ffffff";
         ddsColorBgSubtle: "#f8f9f9";
         ddsColorSurfaceDefault: "#ffffff";
@@ -180,6 +190,7 @@ export declare const ddsTokens: {
         ddsColorTextActionVisited: "#7f29b4";
         ddsColorTextActionVisitedOnInverse: "#cca9e1";
         ddsColorTextOnNotification: "#ffffff";
+        ddsColorTextDanger: "#ad2c2c";
         ddsColorIconDefault: "#0b0d0e";
         ddsColorIconMedium: "#3a4146";
         ddsColorIconSubtle: "#545c62";
@@ -195,6 +206,7 @@ export declare const ddsTokens: {
         ddsColorIconOnDangerStrong: "#0b0d0e";
         ddsColorIconOnInfoDefault: "#466f8a";
         ddsColorIconOnInfoStrong: "#0b0d0e";
+        ddsColorIconDanger: "#ad2c2c";
         ddsColorBrandPrimaryDefault: "#354754";
         ddsColorBrandPrimarySubtle: "#eaeff4";
         ddsColorBrandPrimaryMedium: "#4f6a7e";
@@ -401,6 +413,16 @@ export declare const ddsTokens: {
         ddsBreakpointLgNumberPx: 1280;
         ddsBreakpointXl: "1920px";
         ddsBreakpointXlNumberPx: 1920;
+        ddsZindexSkiptocontent: "250";
+        ddsZindexModalBackdrop: "200";
+        ddsZindexDrawer: "180";
+        ddsZindexDrawerBackdrop: "180";
+        ddsZindexOverflowmenu: "160";
+        ddsZindexPopover: "140";
+        ddsZindexTooltip: "120";
+        ddsZindexDropdown: "100";
+        ddsZindexSticky: "50";
+        ddsZindexAbsoluteElement: "1";
         ddsColorBgDefault: "#ffffff";
         ddsColorBgSubtle: "#f8f9f9";
         ddsColorSurfaceDefault: "#ffffff";
@@ -457,6 +479,7 @@ export declare const ddsTokens: {
         ddsColorTextActionVisited: "#7f29b4";
         ddsColorTextActionVisitedOnInverse: "#cca9e1";
         ddsColorTextOnNotification: "#ffffff";
+        ddsColorTextDanger: "#ad2c2c";
         ddsColorIconDefault: "#0b0d0e";
         ddsColorIconMedium: "#3a4146";
         ddsColorIconSubtle: "#545c62";
@@ -472,6 +495,7 @@ export declare const ddsTokens: {
         ddsColorIconOnDangerStrong: "#0b0d0e";
         ddsColorIconOnInfoDefault: "#466f8a";
         ddsColorIconOnInfoStrong: "#0b0d0e";
+        ddsColorIconDanger: "#ad2c2c";
         ddsColorBrandPrimaryDefault: "#354754";
         ddsColorBrandPrimarySubtle: "#eaeff4";
         ddsColorBrandPrimaryMedium: "#4f6a7e";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-design-tokens",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "description": "Design tokens used in Domstolenes designsystem",
   "author": "DDS team",
   "license": "MIT",
@@ -38,16 +38,16 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.10",
     "@tokens-studio/sd-transforms": "^1.2.9",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "rollup": "^3.29.5",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-sass": "^1.14.0",
+    "rollup-plugin-sass": "^1.15.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "style-dictionary": "^4.3.0",
-    "typescript": "^5.7.2"
+    "style-dictionary": "^4.3.2",
+    "typescript": "^5.7.3"
   },
   "publishConfig": {
     "provenance": true