@norges-domstoler/dds-design-tokens 7.1.0 → 7.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +6 -41
  2. package/dist/cjs/dds/build/js/Core/ddsTokens.d.ts +11 -16
  3. package/dist/cjs/dds/build/js/Public/ddsTokens.d.ts +15 -20
  4. package/dist/cjs/index.js +51 -71
  5. package/dist/cjs/src/index.d.ts +26 -36
  6. package/dist/css/ddsTokens-core.css +12 -9
  7. package/dist/css/ddsTokens-public.css +15 -12
  8. package/dist/dds/build/js/Core/ddsTokens.d.ts +11 -16
  9. package/dist/dds/build/js/Core/ddsTokens.js +13 -18
  10. package/dist/dds/build/js/Public/ddsTokens.d.ts +15 -20
  11. package/dist/dds/build/js/Public/ddsTokens.js +16 -21
  12. package/dist/scss/_ddsTokens.scss +11 -8
  13. package/dist/src/index.d.ts +26 -36
  14. package/package.json +3 -3
package/README.md CHANGED
@@ -1,34 +1,23 @@
1
1
  # @norges-domstoler/dds-design-tokens
2
2
 
3
- [![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-design-tokens)](https://www.npmjs.com/package/@norges-domstoler/dds-design-tokens)
3
+ [![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)
4
4
 
5
- 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).
5
+ 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.
6
6
 
7
7
  Design tokens kommer i to temaer: Core og Public. Valg av tema styres med `<ThemeProvider>` komponent som ligger i `dds-components`.
8
8
 
9
- Les mer om [design tokens i dokumentasjonen](https://design.domstol.no/987b33f71/p/50f2cd-design-tokens).
10
-
11
9
  ## 🔍 Oversikt
12
10
 
11
+ > 💡 Se alle tokens i [Elsa Storybook](https://domstolene.github.io/designsystem/?path=/story/dds-design-tokens-tokens).
12
+
13
13
  Design tokens består av base-tokens og semantiske tokens.
14
14
 
15
15
  Base-tokens er variabler genererte fra Figma styles og tilsvarer identiteten til domstolene definert i designprofilen.
16
16
 
17
- 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.
17
+ 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.
18
18
 
19
19
  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.
20
20
 
21
- ### 📃 Tilgjengelige tokens
22
-
23
- - border-radius
24
- - breakpoint
25
- - color
26
- - font
27
- - grid
28
- - icon-size
29
- - shadow
30
- - spacing
31
-
32
21
  ## 📦 Installasjon
33
22
 
34
23
  ```sh
@@ -89,7 +78,7 @@ const App = () => (
89
78
 
90
79
  ### SCSS
91
80
 
92
- SCSS-variabler refererer til CSS-variabler; theming skjer dermed utenfor SCSS og du kan importere .
81
+ 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`.
93
82
 
94
83
  ```scss
95
84
  /* _styles.scss */
@@ -113,27 +102,3 @@ const App = () => (
113
102
  </ThemeProvider>
114
103
  );
115
104
  ```
116
-
117
- ## ⌨️ For bidragsytere
118
-
119
- Bilioteket ligger under `packages/tokens`. Selve design tokens ligger i JSON-filer hentet fra Figma.
120
-
121
- ### Installasjon
122
-
123
- Installer style-dictionary:
124
-
125
- ```
126
- pnpm --filter "@norges-domstoler/dds-design-tokens" add -D style-dictionary
127
- ```
128
-
129
- ### Generere variabler fra design tokens
130
-
131
- 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`:
132
-
133
- ```
134
- node build.js
135
- ```
136
-
137
- Genererte variabler ligger i `dds/build` organisert etter plattform.
138
-
139
- Vi bruker custom build, den ligger i `/dds/build.js`.
package/dist/cjs/dds/build/js/Core/ddsTokens.d.ts CHANGED
@@ -22,24 +22,9 @@ export declare const ddsFontSizeX0875 = "0.875rem";
22
22
  export declare const ddsFontSizeX0875NumberRem = 0.875;
23
23
  export declare const ddsFontSizeX075 = "0.75rem";
24
24
  export declare const ddsFontSizeX075NumberRem = 0.75;
25
- export declare const ddsFontSizeXxlarge = "3rem";
26
- export declare const ddsFontSizeXxlargeNumberRem = 3;
27
- export declare const ddsFontSizeXlarge = "2rem";
28
- export declare const ddsFontSizeXlargeNumberRem = 2;
29
- export declare const ddsFontSizeLarge = "1.5rem";
30
- export declare const ddsFontSizeLargeNumberRem = 1.5;
31
- export declare const ddsFontSizeMedium = "1.25rem";
32
- export declare const ddsFontSizeMediumNumberRem = 1.25;
33
- export declare const ddsFontSizeSmall = "1.125rem";
34
- export declare const ddsFontSizeSmallNumberRem = 1.125;
35
- export declare const ddsFontSizeXsmall = "1rem";
36
- export declare const ddsFontSizeXsmallNumberRem = 1;
37
- export declare const ddsFontSizeXxsmall = "0.875rem";
38
- export declare const ddsFontSizeXxsmallNumberRem = 0.875;
39
- export declare const ddsFontSizeXxxsmall = "0.75rem";
40
- export declare const ddsFontSizeXxxsmallNumberRem = 0.75;
41
25
  export declare const ddsFontWeightLight = "300";
42
26
  export declare const ddsFontWeightNormal = "400";
27
+ export declare const ddsFontWeightSemiBold = "500";
43
28
  export declare const ddsFontWeightBold = "600";
44
29
  export declare const ddsFontLineheightX1 = 1.5;
45
30
  export declare const ddsFontLineheightX2 = 1.35;
@@ -122,6 +107,16 @@ export declare const ddsBreakpointLg = "1280px";
122
107
  export declare const ddsBreakpointLgNumberPx = 1280;
123
108
  export declare const ddsBreakpointXl = "1920px";
124
109
  export declare const ddsBreakpointXlNumberPx = 1920;
110
+ export declare const ddsZindexSkiptocontent = "250";
111
+ export declare const ddsZindexModalBackdrop = "200";
112
+ export declare const ddsZindexDrawer = "180";
113
+ export declare const ddsZindexDrawerBackdrop = "180";
114
+ export declare const ddsZindexOverflowmenu = "160";
115
+ export declare const ddsZindexPopover = "140";
116
+ export declare const ddsZindexTooltip = "120";
117
+ export declare const ddsZindexDropdown = "100";
118
+ export declare const ddsZindexSticky = "50";
119
+ export declare const ddsZindexAbsoluteElement = "1";
125
120
  export declare const ddsColorBgDefault = "#ffffff";
126
121
  export declare const ddsColorBgSubtle = "#f8f9f9";
127
122
  export declare const ddsColorSurfaceDefault = "#ffffff";
package/dist/cjs/dds/build/js/Public/ddsTokens.d.ts CHANGED
@@ -22,24 +22,9 @@ export declare const ddsFontSizeX0875 = "0.875rem";
22
22
  export declare const ddsFontSizeX0875NumberRem = 0.875;
23
23
  export declare const ddsFontSizeX075 = "0.75rem";
24
24
  export declare const ddsFontSizeX075NumberRem = 0.75;
25
- export declare const ddsFontSizeXxlarge = "4rem";
26
- export declare const ddsFontSizeXxlargeNumberRem = 4;
27
- export declare const ddsFontSizeXlarge = "3rem";
28
- export declare const ddsFontSizeXlargeNumberRem = 3;
29
- export declare const ddsFontSizeLarge = "2rem";
30
- export declare const ddsFontSizeLargeNumberRem = 2;
31
- export declare const ddsFontSizeMedium = "1.5rem";
32
- export declare const ddsFontSizeMediumNumberRem = 1.5;
33
- export declare const ddsFontSizeSmall = "1.25rem";
34
- export declare const ddsFontSizeSmallNumberRem = 1.25;
35
- export declare const ddsFontSizeXsmall = "1.125rem";
36
- export declare const ddsFontSizeXsmallNumberRem = 1.125;
37
- export declare const ddsFontSizeXxsmall = "1rem";
38
- export declare const ddsFontSizeXxsmallNumberRem = 1;
39
- export declare const ddsFontSizeXxxsmall = "0.875rem";
40
- export declare const ddsFontSizeXxxsmallNumberRem = 0.875;
41
25
  export declare const ddsFontWeightLight = "300";
42
26
  export declare const ddsFontWeightNormal = "400";
27
+ export declare const ddsFontWeightSemiBold = "500";
43
28
  export declare const ddsFontWeightBold = "600";
44
29
  export declare const ddsFontLineheightX1 = 1.5;
45
30
  export declare const ddsFontLineheightX2 = 1.35;
@@ -122,6 +107,16 @@ export declare const ddsBreakpointLg = "1280px";
122
107
  export declare const ddsBreakpointLgNumberPx = 1280;
123
108
  export declare const ddsBreakpointXl = "1920px";
124
109
  export declare const ddsBreakpointXlNumberPx = 1920;
110
+ export declare const ddsZindexSkiptocontent = "250";
111
+ export declare const ddsZindexModalBackdrop = "200";
112
+ export declare const ddsZindexDrawer = "180";
113
+ export declare const ddsZindexDrawerBackdrop = "180";
114
+ export declare const ddsZindexOverflowmenu = "160";
115
+ export declare const ddsZindexPopover = "140";
116
+ export declare const ddsZindexTooltip = "120";
117
+ export declare const ddsZindexDropdown = "100";
118
+ export declare const ddsZindexSticky = "50";
119
+ export declare const ddsZindexAbsoluteElement = "1";
125
120
  export declare const ddsColorBgDefault = "#ffffff";
126
121
  export declare const ddsColorBgSubtle = "#f8f9f9";
127
122
  export declare const ddsColorSurfaceDefault = "#ffffff";
@@ -224,10 +219,10 @@ export declare const ddsFontBodyXsmall = "400 0.875rem/1.5 'IBM Plex Sans', Aria
224
219
  export declare const ddsFontBodySmall = "400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
225
220
  export declare const ddsFontBodyMedium = "400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
226
221
  export declare const ddsFontBodyLarge = "400 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
227
- export declare const ddsFontHeadingXxsmall = "600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif";
228
- export declare const ddsFontHeadingXsmall = "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
229
- export declare const ddsFontHeadingSmall = "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
230
- export declare const ddsFontHeadingMedium = "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
222
+ export declare const ddsFontHeadingXxsmall = "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
223
+ export declare const ddsFontHeadingXsmall = "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
224
+ export declare const ddsFontHeadingSmall = "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
225
+ export declare const ddsFontHeadingMedium = "500 1.5rem/1.5 'IBM Plex Sans', Arial, sans-serif";
231
226
  export declare const ddsFontHeadingLarge = "400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
232
227
  export declare const ddsFontHeadingXlarge = "300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
233
228
  export declare const ddsFontHeadingXxlarge = "300 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.2 'IBM Plex Sans', Arial, sans-serif";
package/dist/cjs/index.js CHANGED
@@ -25,24 +25,9 @@ const ddsFontSizeX0875$1 = "0.875rem";
25
25
  const ddsFontSizeX0875NumberRem$1 = 0.875;
26
26
  const ddsFontSizeX075$1 = "0.75rem";
27
27
  const ddsFontSizeX075NumberRem$1 = 0.75;
28
- const ddsFontSizeXxlarge$1 = "3rem";
29
- const ddsFontSizeXxlargeNumberRem$1 = 3;
30
- const ddsFontSizeXlarge$1 = "2rem";
31
- const ddsFontSizeXlargeNumberRem$1 = 2;
32
- const ddsFontSizeLarge$1 = "1.5rem";
33
- const ddsFontSizeLargeNumberRem$1 = 1.5;
34
- const ddsFontSizeMedium$1 = "1.25rem";
35
- const ddsFontSizeMediumNumberRem$1 = 1.25;
36
- const ddsFontSizeSmall$1 = "1.125rem";
37
- const ddsFontSizeSmallNumberRem$1 = 1.125;
38
- const ddsFontSizeXsmall$1 = "1rem";
39
- const ddsFontSizeXsmallNumberRem$1 = 1;
40
- const ddsFontSizeXxsmall$1 = "0.875rem";
41
- const ddsFontSizeXxsmallNumberRem$1 = 0.875;
42
- const ddsFontSizeXxxsmall$1 = "0.75rem";
43
- const ddsFontSizeXxxsmallNumberRem$1 = 0.75;
44
28
  const ddsFontWeightLight$1 = "300";
45
29
  const ddsFontWeightNormal$1 = "400";
30
+ const ddsFontWeightSemiBold$1 = "500";
46
31
  const ddsFontWeightBold$1 = "600";
47
32
  const ddsFontLineheightX1$1 = 1.5; // Brukes på str ×1_25 og mindre
48
33
  const ddsFontLineheightX2$1 = 1.35; // Brukes på str x1.5, ×2 og ×3
@@ -125,6 +110,16 @@ const ddsBreakpointLg$1 = "1280px";
125
110
  const ddsBreakpointLgNumberPx$1 = 1280;
126
111
  const ddsBreakpointXl$1 = "1920px";
127
112
  const ddsBreakpointXlNumberPx$1 = 1920;
113
+ const ddsZindexSkiptocontent$1 = "250"; // Brukes for dds-skiptocontent
114
+ const ddsZindexModalBackdrop$1 = "200"; // Brukes for dds-modal
115
+ const ddsZindexDrawer$1 = "180"; // Brukes for dds-drawer
116
+ const ddsZindexDrawerBackdrop$1 = "180"; // Brukes for dds-drawer
117
+ const ddsZindexOverflowmenu$1 = "160"; // Brukes for dds-overflowmenu
118
+ const ddsZindexPopover$1 = "140"; // Brukes for dds-popover og kalender i datepicker
119
+ const ddsZindexTooltip$1 = "120"; // Brukes for dds-tooltip
120
+ const ddsZindexDropdown$1 = "100"; // Dropdown brukes for bl.a søkeforslag, dropdown i select
121
+ 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
122
+ const ddsZindexAbsoluteElement$1 = "1"; // Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder
128
123
  const ddsColorBgDefault$1 = "#ffffff"; // UI shell base color
129
124
  const ddsColorBgSubtle$1 = "#f8f9f9"; // Alternative UI shell base color
130
125
  const ddsColorSurfaceDefault$1 = "#ffffff"; // Default bg
@@ -188,7 +183,7 @@ const ddsColorIconSubtle$1 = "#545c62"; // Often used with text.subtle
188
183
  const ddsColorIconOnInverse$1 = "#ffffff"; // On surface.inverse
189
184
  const ddsColorIconOnAction$1 = "#ffffff"; // On surface.action (primary and danger button)
190
185
  const ddsColorIconActionResting$1 = "#106ead"; // Often used with Text.action
191
- const ddsColorIconActionHover$1 = "#0d588a"; // hover on icon-action, used on secondary buttons etc
186
+ const ddsColorIconActionHover$1 = "#0d588a"; // hover on icon-action
192
187
  const ddsColorIconOnSuccessDefault$1 = "#3d723d"; // On surface.success-default
193
188
  const ddsColorIconOnSuccessStrong$1 = "#0b0d0e"; // On surface-success-strong
194
189
  const ddsColorIconOnWarningDefault$1 = "#92862e"; // On surface.warning-default
@@ -461,12 +456,6 @@ var ddsTokensCore = /*#__PURE__*/Object.freeze({
461
456
  ddsFontParagraphSpacingMediumNumberEm: ddsFontParagraphSpacingMediumNumberEm$1,
462
457
  ddsFontParagraphSpacingSmall: ddsFontParagraphSpacingSmall$1,
463
458
  ddsFontParagraphSpacingSmallNumberEm: ddsFontParagraphSpacingSmallNumberEm$1,
464
- ddsFontSizeLarge: ddsFontSizeLarge$1,
465
- ddsFontSizeLargeNumberRem: ddsFontSizeLargeNumberRem$1,
466
- ddsFontSizeMedium: ddsFontSizeMedium$1,
467
- ddsFontSizeMediumNumberRem: ddsFontSizeMediumNumberRem$1,
468
- ddsFontSizeSmall: ddsFontSizeSmall$1,
469
- ddsFontSizeSmallNumberRem: ddsFontSizeSmallNumberRem$1,
470
459
  ddsFontSizeX075: ddsFontSizeX075$1,
471
460
  ddsFontSizeX075NumberRem: ddsFontSizeX075NumberRem$1,
472
461
  ddsFontSizeX0875: ddsFontSizeX0875$1,
@@ -489,22 +478,13 @@ var ddsTokensCore = /*#__PURE__*/Object.freeze({
489
478
  ddsFontSizeX4NumberRem: ddsFontSizeX4NumberRem$1,
490
479
  ddsFontSizeX5: ddsFontSizeX5$1,
491
480
  ddsFontSizeX5NumberRem: ddsFontSizeX5NumberRem$1,
492
- ddsFontSizeXlarge: ddsFontSizeXlarge$1,
493
- ddsFontSizeXlargeNumberRem: ddsFontSizeXlargeNumberRem$1,
494
- ddsFontSizeXsmall: ddsFontSizeXsmall$1,
495
- ddsFontSizeXsmallNumberRem: ddsFontSizeXsmallNumberRem$1,
496
- ddsFontSizeXxlarge: ddsFontSizeXxlarge$1,
497
- ddsFontSizeXxlargeNumberRem: ddsFontSizeXxlargeNumberRem$1,
498
- ddsFontSizeXxsmall: ddsFontSizeXxsmall$1,
499
- ddsFontSizeXxsmallNumberRem: ddsFontSizeXxsmallNumberRem$1,
500
- ddsFontSizeXxxsmall: ddsFontSizeXxxsmall$1,
501
- ddsFontSizeXxxsmallNumberRem: ddsFontSizeXxxsmallNumberRem$1,
502
481
  ddsFontStyleItalic: ddsFontStyleItalic$1,
503
482
  ddsFontStyleNormal: ddsFontStyleNormal$1,
504
483
  ddsFontStyleUnderline: ddsFontStyleUnderline$1,
505
484
  ddsFontWeightBold: ddsFontWeightBold$1,
506
485
  ddsFontWeightLight: ddsFontWeightLight$1,
507
486
  ddsFontWeightNormal: ddsFontWeightNormal$1,
487
+ ddsFontWeightSemiBold: ddsFontWeightSemiBold$1,
508
488
  ddsGridLgCount: ddsGridLgCount$1,
509
489
  ddsGridLgGutterSize: ddsGridLgGutterSize$1,
510
490
  ddsGridLgGutterSizeNumberPx: ddsGridLgGutterSizeNumberPx$1,
@@ -557,7 +537,17 @@ var ddsTokensCore = /*#__PURE__*/Object.freeze({
557
537
  ddsSpacingX4: ddsSpacingX4$1,
558
538
  ddsSpacingX4NumberRem: ddsSpacingX4NumberRem$1,
559
539
  ddsSpacingX6: ddsSpacingX6$1,
560
- ddsSpacingX6NumberRem: ddsSpacingX6NumberRem$1
540
+ ddsSpacingX6NumberRem: ddsSpacingX6NumberRem$1,
541
+ ddsZindexAbsoluteElement: ddsZindexAbsoluteElement$1,
542
+ ddsZindexDrawer: ddsZindexDrawer$1,
543
+ ddsZindexDrawerBackdrop: ddsZindexDrawerBackdrop$1,
544
+ ddsZindexDropdown: ddsZindexDropdown$1,
545
+ ddsZindexModalBackdrop: ddsZindexModalBackdrop$1,
546
+ ddsZindexOverflowmenu: ddsZindexOverflowmenu$1,
547
+ ddsZindexPopover: ddsZindexPopover$1,
548
+ ddsZindexSkiptocontent: ddsZindexSkiptocontent$1,
549
+ ddsZindexSticky: ddsZindexSticky$1,
550
+ ddsZindexTooltip: ddsZindexTooltip$1
561
551
  });
562
552
 
563
553
  // Do not edit directly, this file was auto-generated.
@@ -585,24 +575,9 @@ const ddsFontSizeX0875 = "0.875rem";
585
575
  const ddsFontSizeX0875NumberRem = 0.875;
586
576
  const ddsFontSizeX075 = "0.75rem";
587
577
  const ddsFontSizeX075NumberRem = 0.75;
588
- const ddsFontSizeXxlarge = "4rem";
589
- const ddsFontSizeXxlargeNumberRem = 4;
590
- const ddsFontSizeXlarge = "3rem";
591
- const ddsFontSizeXlargeNumberRem = 3;
592
- const ddsFontSizeLarge = "2rem";
593
- const ddsFontSizeLargeNumberRem = 2;
594
- const ddsFontSizeMedium = "1.5rem";
595
- const ddsFontSizeMediumNumberRem = 1.5;
596
- const ddsFontSizeSmall = "1.25rem";
597
- const ddsFontSizeSmallNumberRem = 1.25;
598
- const ddsFontSizeXsmall = "1.125rem";
599
- const ddsFontSizeXsmallNumberRem = 1.125;
600
- const ddsFontSizeXxsmall = "1rem";
601
- const ddsFontSizeXxsmallNumberRem = 1;
602
- const ddsFontSizeXxxsmall = "0.875rem";
603
- const ddsFontSizeXxxsmallNumberRem = 0.875;
604
578
  const ddsFontWeightLight = "300";
605
579
  const ddsFontWeightNormal = "400";
580
+ const ddsFontWeightSemiBold = "500";
606
581
  const ddsFontWeightBold = "600";
607
582
  const ddsFontLineheightX1 = 1.5; // Brukes på str ×1_25 og mindre
608
583
  const ddsFontLineheightX2 = 1.35; // Brukes på str x1.5, ×2 og ×3
@@ -685,6 +660,16 @@ const ddsBreakpointLg = "1280px";
685
660
  const ddsBreakpointLgNumberPx = 1280;
686
661
  const ddsBreakpointXl = "1920px";
687
662
  const ddsBreakpointXlNumberPx = 1920;
663
+ const ddsZindexSkiptocontent = "250"; // Brukes for dds-skiptocontent
664
+ const ddsZindexModalBackdrop = "200"; // Brukes for dds-modal
665
+ const ddsZindexDrawer = "180"; // Brukes for dds-drawer
666
+ const ddsZindexDrawerBackdrop = "180"; // Brukes for dds-drawer
667
+ const ddsZindexOverflowmenu = "160"; // Brukes for dds-overflowmenu
668
+ const ddsZindexPopover = "140"; // Brukes for dds-popover og kalender i datepicker
669
+ const ddsZindexTooltip = "120"; // Brukes for dds-tooltip
670
+ const ddsZindexDropdown = "100"; // Dropdown brukes for bl.a søkeforslag, dropdown i select
671
+ 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
672
+ const ddsZindexAbsoluteElement = "1"; // Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder
688
673
  const ddsColorBgDefault = "#ffffff"; // UI shell base color
689
674
  const ddsColorBgSubtle = "#f8f9f9"; // Alternative UI shell base color
690
675
  const ddsColorSurfaceDefault = "#ffffff"; // Default bg
@@ -787,10 +772,10 @@ const ddsFontBodyXsmall = "400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif";
787
772
  const ddsFontBodySmall = "400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // used with small button and input fields
788
773
  const ddsFontBodyMedium = "400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // standard body text, used with medium button and input fields
789
774
  const ddsFontBodyLarge = "400 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Used for large button and large search
790
- const ddsFontHeadingXxsmall = "600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h6
791
- const ddsFontHeadingXsmall = "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h5
792
- const ddsFontHeadingSmall = "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h4
793
- const ddsFontHeadingMedium = "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h3
775
+ const ddsFontHeadingXxsmall = "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h6
776
+ const ddsFontHeadingXsmall = "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h5
777
+ const ddsFontHeadingSmall = "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h4
778
+ const ddsFontHeadingMedium = "500 1.5rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h3
794
779
  const ddsFontHeadingLarge = "400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.35 'IBM Plex Sans', Arial, sans-serif"; // Default h2
795
780
  const ddsFontHeadingXlarge = "300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.35 'IBM Plex Sans', Arial, sans-serif"; // Default H1
796
781
  const ddsFontHeadingXxlarge = "300 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.2 'IBM Plex Sans', Arial, sans-serif"; // Display or extra large page title (h1)
@@ -1021,12 +1006,6 @@ var ddsTokensPublic = /*#__PURE__*/Object.freeze({
1021
1006
  ddsFontParagraphSpacingMediumNumberEm: ddsFontParagraphSpacingMediumNumberEm,
1022
1007
  ddsFontParagraphSpacingSmall: ddsFontParagraphSpacingSmall,
1023
1008
  ddsFontParagraphSpacingSmallNumberEm: ddsFontParagraphSpacingSmallNumberEm,
1024
- ddsFontSizeLarge: ddsFontSizeLarge,
1025
- ddsFontSizeLargeNumberRem: ddsFontSizeLargeNumberRem,
1026
- ddsFontSizeMedium: ddsFontSizeMedium,
1027
- ddsFontSizeMediumNumberRem: ddsFontSizeMediumNumberRem,
1028
- ddsFontSizeSmall: ddsFontSizeSmall,
1029
- ddsFontSizeSmallNumberRem: ddsFontSizeSmallNumberRem,
1030
1009
  ddsFontSizeX075: ddsFontSizeX075,
1031
1010
  ddsFontSizeX075NumberRem: ddsFontSizeX075NumberRem,
1032
1011
  ddsFontSizeX0875: ddsFontSizeX0875,
@@ -1049,22 +1028,13 @@ var ddsTokensPublic = /*#__PURE__*/Object.freeze({
1049
1028
  ddsFontSizeX4NumberRem: ddsFontSizeX4NumberRem,
1050
1029
  ddsFontSizeX5: ddsFontSizeX5,
1051
1030
  ddsFontSizeX5NumberRem: ddsFontSizeX5NumberRem,
1052
- ddsFontSizeXlarge: ddsFontSizeXlarge,
1053
- ddsFontSizeXlargeNumberRem: ddsFontSizeXlargeNumberRem,
1054
- ddsFontSizeXsmall: ddsFontSizeXsmall,
1055
- ddsFontSizeXsmallNumberRem: ddsFontSizeXsmallNumberRem,
1056
- ddsFontSizeXxlarge: ddsFontSizeXxlarge,
1057
- ddsFontSizeXxlargeNumberRem: ddsFontSizeXxlargeNumberRem,
1058
- ddsFontSizeXxsmall: ddsFontSizeXxsmall,
1059
- ddsFontSizeXxsmallNumberRem: ddsFontSizeXxsmallNumberRem,
1060
- ddsFontSizeXxxsmall: ddsFontSizeXxxsmall,
1061
- ddsFontSizeXxxsmallNumberRem: ddsFontSizeXxxsmallNumberRem,
1062
1031
  ddsFontStyleItalic: ddsFontStyleItalic,
1063
1032
  ddsFontStyleNormal: ddsFontStyleNormal,
1064
1033
  ddsFontStyleUnderline: ddsFontStyleUnderline,
1065
1034
  ddsFontWeightBold: ddsFontWeightBold,
1066
1035
  ddsFontWeightLight: ddsFontWeightLight,
1067
1036
  ddsFontWeightNormal: ddsFontWeightNormal,
1037
+ ddsFontWeightSemiBold: ddsFontWeightSemiBold,
1068
1038
  ddsGridLgCount: ddsGridLgCount,
1069
1039
  ddsGridLgGutterSize: ddsGridLgGutterSize,
1070
1040
  ddsGridLgGutterSizeNumberPx: ddsGridLgGutterSizeNumberPx,
@@ -1117,7 +1087,17 @@ var ddsTokensPublic = /*#__PURE__*/Object.freeze({
1117
1087
  ddsSpacingX4: ddsSpacingX4,
1118
1088
  ddsSpacingX4NumberRem: ddsSpacingX4NumberRem,
1119
1089
  ddsSpacingX6: ddsSpacingX6,
1120
- ddsSpacingX6NumberRem: ddsSpacingX6NumberRem
1090
+ ddsSpacingX6NumberRem: ddsSpacingX6NumberRem,
1091
+ ddsZindexAbsoluteElement: ddsZindexAbsoluteElement,
1092
+ ddsZindexDrawer: ddsZindexDrawer,
1093
+ ddsZindexDrawerBackdrop: ddsZindexDrawerBackdrop,
1094
+ ddsZindexDropdown: ddsZindexDropdown,
1095
+ ddsZindexModalBackdrop: ddsZindexModalBackdrop,
1096
+ ddsZindexOverflowmenu: ddsZindexOverflowmenu,
1097
+ ddsZindexPopover: ddsZindexPopover,
1098
+ ddsZindexSkiptocontent: ddsZindexSkiptocontent,
1099
+ ddsZindexSticky: ddsZindexSticky,
1100
+ ddsZindexTooltip: ddsZindexTooltip
1121
1101
  });
1122
1102
 
1123
1103
  const ddsTokens = {
package/dist/cjs/src/index.d.ts CHANGED
@@ -24,24 +24,9 @@ export declare const ddsTokens: {
24
24
  ddsFontSizeX0875NumberRem: 0.875;
25
25
  ddsFontSizeX075: "0.75rem";
26
26
  ddsFontSizeX075NumberRem: 0.75;
27
- ddsFontSizeXxlarge: "3rem";
28
- ddsFontSizeXxlargeNumberRem: 3;
29
- ddsFontSizeXlarge: "2rem";
30
- ddsFontSizeXlargeNumberRem: 2;
31
- ddsFontSizeLarge: "1.5rem";
32
- ddsFontSizeLargeNumberRem: 1.5;
33
- ddsFontSizeMedium: "1.25rem";
34
- ddsFontSizeMediumNumberRem: 1.25;
35
- ddsFontSizeSmall: "1.125rem";
36
- ddsFontSizeSmallNumberRem: 1.125;
37
- ddsFontSizeXsmall: "1rem";
38
- ddsFontSizeXsmallNumberRem: 1;
39
- ddsFontSizeXxsmall: "0.875rem";
40
- ddsFontSizeXxsmallNumberRem: 0.875;
41
- ddsFontSizeXxxsmall: "0.75rem";
42
- ddsFontSizeXxxsmallNumberRem: 0.75;
43
27
  ddsFontWeightLight: "300";
44
28
  ddsFontWeightNormal: "400";
29
+ ddsFontWeightSemiBold: "500";
45
30
  ddsFontWeightBold: "600";
46
31
  ddsFontLineheightX1: 1.5;
47
32
  ddsFontLineheightX2: 1.35;
@@ -124,6 +109,16 @@ export declare const ddsTokens: {
124
109
  ddsBreakpointLgNumberPx: 1280;
125
110
  ddsBreakpointXl: "1920px";
126
111
  ddsBreakpointXlNumberPx: 1920;
112
+ ddsZindexSkiptocontent: "250";
113
+ ddsZindexModalBackdrop: "200";
114
+ ddsZindexDrawer: "180";
115
+ ddsZindexDrawerBackdrop: "180";
116
+ ddsZindexOverflowmenu: "160";
117
+ ddsZindexPopover: "140";
118
+ ddsZindexTooltip: "120";
119
+ ddsZindexDropdown: "100";
120
+ ddsZindexSticky: "50";
121
+ ddsZindexAbsoluteElement: "1";
127
122
  ddsColorBgDefault: "#ffffff";
128
123
  ddsColorBgSubtle: "#f8f9f9";
129
124
  ddsColorSurfaceDefault: "#ffffff";
@@ -303,24 +298,9 @@ export declare const ddsTokens: {
303
298
  ddsFontSizeX0875NumberRem: 0.875;
304
299
  ddsFontSizeX075: "0.75rem";
305
300
  ddsFontSizeX075NumberRem: 0.75;
306
- ddsFontSizeXxlarge: "4rem";
307
- ddsFontSizeXxlargeNumberRem: 4;
308
- ddsFontSizeXlarge: "3rem";
309
- ddsFontSizeXlargeNumberRem: 3;
310
- ddsFontSizeLarge: "2rem";
311
- ddsFontSizeLargeNumberRem: 2;
312
- ddsFontSizeMedium: "1.5rem";
313
- ddsFontSizeMediumNumberRem: 1.5;
314
- ddsFontSizeSmall: "1.25rem";
315
- ddsFontSizeSmallNumberRem: 1.25;
316
- ddsFontSizeXsmall: "1.125rem";
317
- ddsFontSizeXsmallNumberRem: 1.125;
318
- ddsFontSizeXxsmall: "1rem";
319
- ddsFontSizeXxsmallNumberRem: 1;
320
- ddsFontSizeXxxsmall: "0.875rem";
321
- ddsFontSizeXxxsmallNumberRem: 0.875;
322
301
  ddsFontWeightLight: "300";
323
302
  ddsFontWeightNormal: "400";
303
+ ddsFontWeightSemiBold: "500";
324
304
  ddsFontWeightBold: "600";
325
305
  ddsFontLineheightX1: 1.5;
326
306
  ddsFontLineheightX2: 1.35;
@@ -403,6 +383,16 @@ export declare const ddsTokens: {
403
383
  ddsBreakpointLgNumberPx: 1280;
404
384
  ddsBreakpointXl: "1920px";
405
385
  ddsBreakpointXlNumberPx: 1920;
386
+ ddsZindexSkiptocontent: "250";
387
+ ddsZindexModalBackdrop: "200";
388
+ ddsZindexDrawer: "180";
389
+ ddsZindexDrawerBackdrop: "180";
390
+ ddsZindexOverflowmenu: "160";
391
+ ddsZindexPopover: "140";
392
+ ddsZindexTooltip: "120";
393
+ ddsZindexDropdown: "100";
394
+ ddsZindexSticky: "50";
395
+ ddsZindexAbsoluteElement: "1";
406
396
  ddsColorBgDefault: "#ffffff";
407
397
  ddsColorBgSubtle: "#f8f9f9";
408
398
  ddsColorSurfaceDefault: "#ffffff";
@@ -505,10 +495,10 @@ export declare const ddsTokens: {
505
495
  ddsFontBodySmall: "400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
506
496
  ddsFontBodyMedium: "400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
507
497
  ddsFontBodyLarge: "400 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
508
- ddsFontHeadingXxsmall: "600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif";
509
- ddsFontHeadingXsmall: "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
510
- ddsFontHeadingSmall: "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
511
- ddsFontHeadingMedium: "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
498
+ ddsFontHeadingXxsmall: "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
499
+ ddsFontHeadingXsmall: "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
500
+ ddsFontHeadingSmall: "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
501
+ ddsFontHeadingMedium: "500 1.5rem/1.5 'IBM Plex Sans', Arial, sans-serif";
512
502
  ddsFontHeadingLarge: "400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
513
503
  ddsFontHeadingXlarge: "300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
514
504
  ddsFontHeadingXxlarge: "300 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.2 'IBM Plex Sans', Arial, sans-serif";
package/dist/css/ddsTokens-core.css CHANGED
@@ -16,16 +16,9 @@
16
16
  --dds-font-size-x1: 1rem;
17
17
  --dds-font-size-x0-875: 0.875rem;
18
18
  --dds-font-size-x0-75: 0.75rem;
19
- --dds-font-size-xxlarge: 3rem;
20
- --dds-font-size-xlarge: 2rem;
21
- --dds-font-size-large: 1.5rem;
22
- --dds-font-size-medium: 1.25rem;
23
- --dds-font-size-small: 1.125rem;
24
- --dds-font-size-xsmall: 1rem;
25
- --dds-font-size-xxsmall: 0.875rem;
26
- --dds-font-size-xxxsmall: 0.75rem;
27
19
  --dds-font-weight-light: 300;
28
20
  --dds-font-weight-normal: 400;
21
+ --dds-font-weight-semi-bold: 500;
29
22
  --dds-font-weight-bold: 600;
30
23
  --dds-font-lineheight-x1: 1.5; /* Brukes på str ×1_25 og mindre */
31
24
  --dds-font-lineheight-x2: 1.35; /* Brukes på str x1.5, ×2 og ×3 */
@@ -77,6 +70,16 @@
77
70
  --dds-breakpoint-md: 960px;
78
71
  --dds-breakpoint-lg: 1280px;
79
72
  --dds-breakpoint-xl: 1920px;
73
+ --dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
74
+ --dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
75
+ --dds-zindex-drawer: 180; /* Brukes for dds-drawer */
76
+ --dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
77
+ --dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
78
+ --dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
79
+ --dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
80
+ --dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
81
+ --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 */
82
+ --dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
80
83
  --dds-color-bg-default: #ffffff; /* UI shell base color */
81
84
  --dds-color-bg-subtle: #f8f9f9; /* Alternative UI shell base color */
82
85
  --dds-color-surface-default: #ffffff; /* Default bg */
@@ -140,7 +143,7 @@
140
143
  --dds-color-icon-on-inverse: #ffffff; /* On surface.inverse */
141
144
  --dds-color-icon-on-action: #ffffff; /* On surface.action (primary and danger button) */
142
145
  --dds-color-icon-action-resting: #106ead; /* Often used with Text.action */
143
- --dds-color-icon-action-hover: #0d588a; /* hover on icon-action, used on secondary buttons etc */
146
+ --dds-color-icon-action-hover: #0d588a; /* hover on icon-action */
144
147
  --dds-color-icon-on-success-default: #3d723d; /* On surface.success-default */
145
148
  --dds-color-icon-on-success-strong: #0b0d0e; /* On surface-success-strong */
146
149
  --dds-color-icon-on-warning-default: #92862e; /* On surface.warning-default */
package/dist/css/ddsTokens-public.css CHANGED
@@ -16,16 +16,9 @@
16
16
  --dds-font-size-x1: 1rem;
17
17
  --dds-font-size-x0-875: 0.875rem;
18
18
  --dds-font-size-x0-75: 0.75rem;
19
- --dds-font-size-xxlarge: 4rem;
20
- --dds-font-size-xlarge: 3rem;
21
- --dds-font-size-large: 2rem;
22
- --dds-font-size-medium: 1.5rem;
23
- --dds-font-size-small: 1.25rem;
24
- --dds-font-size-xsmall: 1.125rem;
25
- --dds-font-size-xxsmall: 1rem;
26
- --dds-font-size-xxxsmall: 0.875rem;
27
19
  --dds-font-weight-light: 300;
28
20
  --dds-font-weight-normal: 400;
21
+ --dds-font-weight-semi-bold: 500;
29
22
  --dds-font-weight-bold: 600;
30
23
  --dds-font-lineheight-x1: 1.5; /* Brukes på str ×1_25 og mindre */
31
24
  --dds-font-lineheight-x2: 1.35; /* Brukes på str x1.5, ×2 og ×3 */
@@ -77,6 +70,16 @@
77
70
  --dds-breakpoint-md: 960px;
78
71
  --dds-breakpoint-lg: 1280px;
79
72
  --dds-breakpoint-xl: 1920px;
73
+ --dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
74
+ --dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
75
+ --dds-zindex-drawer: 180; /* Brukes for dds-drawer */
76
+ --dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
77
+ --dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
78
+ --dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
79
+ --dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
80
+ --dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
81
+ --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 */
82
+ --dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
80
83
  --dds-color-bg-default: #ffffff; /* UI shell base color */
81
84
  --dds-color-bg-subtle: #f8f9f9; /* Alternative UI shell base color */
82
85
  --dds-color-surface-default: #ffffff; /* Default bg */
@@ -174,10 +177,10 @@
174
177
  --dds-font-body-small: 400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* used with small button and input fields */
175
178
  --dds-font-body-medium: 400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* standard body text, used with medium button and input fields */
176
179
  --dds-font-body-large: 400 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Used for large button and large search */
177
- --dds-font-heading-xxsmall: 600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h6 */
178
- --dds-font-heading-xsmall: 600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h5 */
179
- --dds-font-heading-small: 600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h4 */
180
- --dds-font-heading-medium: 600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h3 */
180
+ --dds-font-heading-xxsmall: 600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h6 */
181
+ --dds-font-heading-xsmall: 600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h5 */
182
+ --dds-font-heading-small: 600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h4 */
183
+ --dds-font-heading-medium: 500 1.5rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h3 */
181
184
  --dds-font-heading-large: 400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.35 'IBM Plex Sans', Arial, sans-serif; /* Default h2 */
182
185
  --dds-font-heading-xlarge: 300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.35 'IBM Plex Sans', Arial, sans-serif; /* Default H1 */
183
186
  --dds-font-heading-xxlarge: 300 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.2 'IBM Plex Sans', Arial, sans-serif; /* Display or extra large page title (h1) */
package/dist/dds/build/js/Core/ddsTokens.d.ts CHANGED
@@ -22,24 +22,9 @@ export declare const ddsFontSizeX0875 = "0.875rem";
22
22
  export declare const ddsFontSizeX0875NumberRem = 0.875;
23
23
  export declare const ddsFontSizeX075 = "0.75rem";
24
24
  export declare const ddsFontSizeX075NumberRem = 0.75;
25
- export declare const ddsFontSizeXxlarge = "3rem";
26
- export declare const ddsFontSizeXxlargeNumberRem = 3;
27
- export declare const ddsFontSizeXlarge = "2rem";
28
- export declare const ddsFontSizeXlargeNumberRem = 2;
29
- export declare const ddsFontSizeLarge = "1.5rem";
30
- export declare const ddsFontSizeLargeNumberRem = 1.5;
31
- export declare const ddsFontSizeMedium = "1.25rem";
32
- export declare const ddsFontSizeMediumNumberRem = 1.25;
33
- export declare const ddsFontSizeSmall = "1.125rem";
34
- export declare const ddsFontSizeSmallNumberRem = 1.125;
35
- export declare const ddsFontSizeXsmall = "1rem";
36
- export declare const ddsFontSizeXsmallNumberRem = 1;
37
- export declare const ddsFontSizeXxsmall = "0.875rem";
38
- export declare const ddsFontSizeXxsmallNumberRem = 0.875;
39
- export declare const ddsFontSizeXxxsmall = "0.75rem";
40
- export declare const ddsFontSizeXxxsmallNumberRem = 0.75;
41
25
  export declare const ddsFontWeightLight = "300";
42
26
  export declare const ddsFontWeightNormal = "400";
27
+ export declare const ddsFontWeightSemiBold = "500";
43
28
  export declare const ddsFontWeightBold = "600";
44
29
  export declare const ddsFontLineheightX1 = 1.5;
45
30
  export declare const ddsFontLineheightX2 = 1.35;
@@ -122,6 +107,16 @@ export declare const ddsBreakpointLg = "1280px";
122
107
  export declare const ddsBreakpointLgNumberPx = 1280;
123
108
  export declare const ddsBreakpointXl = "1920px";
124
109
  export declare const ddsBreakpointXlNumberPx = 1920;
110
+ export declare const ddsZindexSkiptocontent = "250";
111
+ export declare const ddsZindexModalBackdrop = "200";
112
+ export declare const ddsZindexDrawer = "180";
113
+ export declare const ddsZindexDrawerBackdrop = "180";
114
+ export declare const ddsZindexOverflowmenu = "160";
115
+ export declare const ddsZindexPopover = "140";
116
+ export declare const ddsZindexTooltip = "120";
117
+ export declare const ddsZindexDropdown = "100";
118
+ export declare const ddsZindexSticky = "50";
119
+ export declare const ddsZindexAbsoluteElement = "1";
125
120
  export declare const ddsColorBgDefault = "#ffffff";
126
121
  export declare const ddsColorBgSubtle = "#f8f9f9";
127
122
  export declare const ddsColorSurfaceDefault = "#ffffff";
package/dist/dds/build/js/Core/ddsTokens.js CHANGED
@@ -23,24 +23,9 @@ const ddsFontSizeX0875 = "0.875rem";
23
23
  const ddsFontSizeX0875NumberRem = 0.875;
24
24
  const ddsFontSizeX075 = "0.75rem";
25
25
  const ddsFontSizeX075NumberRem = 0.75;
26
- const ddsFontSizeXxlarge = "3rem";
27
- const ddsFontSizeXxlargeNumberRem = 3;
28
- const ddsFontSizeXlarge = "2rem";
29
- const ddsFontSizeXlargeNumberRem = 2;
30
- const ddsFontSizeLarge = "1.5rem";
31
- const ddsFontSizeLargeNumberRem = 1.5;
32
- const ddsFontSizeMedium = "1.25rem";
33
- const ddsFontSizeMediumNumberRem = 1.25;
34
- const ddsFontSizeSmall = "1.125rem";
35
- const ddsFontSizeSmallNumberRem = 1.125;
36
- const ddsFontSizeXsmall = "1rem";
37
- const ddsFontSizeXsmallNumberRem = 1;
38
- const ddsFontSizeXxsmall = "0.875rem";
39
- const ddsFontSizeXxsmallNumberRem = 0.875;
40
- const ddsFontSizeXxxsmall = "0.75rem";
41
- const ddsFontSizeXxxsmallNumberRem = 0.75;
42
26
  const ddsFontWeightLight = "300";
43
27
  const ddsFontWeightNormal = "400";
28
+ const ddsFontWeightSemiBold = "500";
44
29
  const ddsFontWeightBold = "600";
45
30
  const ddsFontLineheightX1 = 1.5; // Brukes på str ×1_25 og mindre
46
31
  const ddsFontLineheightX2 = 1.35; // Brukes på str x1.5, ×2 og ×3
@@ -123,6 +108,16 @@ const ddsBreakpointLg = "1280px";
123
108
  const ddsBreakpointLgNumberPx = 1280;
124
109
  const ddsBreakpointXl = "1920px";
125
110
  const ddsBreakpointXlNumberPx = 1920;
111
+ const ddsZindexSkiptocontent = "250"; // Brukes for dds-skiptocontent
112
+ const ddsZindexModalBackdrop = "200"; // Brukes for dds-modal
113
+ const ddsZindexDrawer = "180"; // Brukes for dds-drawer
114
+ const ddsZindexDrawerBackdrop = "180"; // Brukes for dds-drawer
115
+ const ddsZindexOverflowmenu = "160"; // Brukes for dds-overflowmenu
116
+ const ddsZindexPopover = "140"; // Brukes for dds-popover og kalender i datepicker
117
+ const ddsZindexTooltip = "120"; // Brukes for dds-tooltip
118
+ const ddsZindexDropdown = "100"; // Dropdown brukes for bl.a søkeforslag, dropdown i select
119
+ 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
120
+ const ddsZindexAbsoluteElement = "1"; // Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder
126
121
  const ddsColorBgDefault = "#ffffff"; // UI shell base color
127
122
  const ddsColorBgSubtle = "#f8f9f9"; // Alternative UI shell base color
128
123
  const ddsColorSurfaceDefault = "#ffffff"; // Default bg
@@ -186,7 +181,7 @@ const ddsColorIconSubtle = "#545c62"; // Often used with text.subtle
186
181
  const ddsColorIconOnInverse = "#ffffff"; // On surface.inverse
187
182
  const ddsColorIconOnAction = "#ffffff"; // On surface.action (primary and danger button)
188
183
  const ddsColorIconActionResting = "#106ead"; // Often used with Text.action
189
- const ddsColorIconActionHover = "#0d588a"; // hover on icon-action, used on secondary buttons etc
184
+ const ddsColorIconActionHover = "#0d588a"; // hover on icon-action
190
185
  const ddsColorIconOnSuccessDefault = "#3d723d"; // On surface.success-default
191
186
  const ddsColorIconOnSuccessStrong = "#0b0d0e"; // On surface-success-strong
192
187
  const ddsColorIconOnWarningDefault = "#92862e"; // On surface.warning-default
@@ -277,4 +272,4 @@ const ddsFontLabelMediumLetterSpacing = "0.01em";
277
272
  const ddsFontLabelMediumParagraphSpacing = "1em";
278
273
  const ddsFontLabelMediumParagraphSpacingNumberEm = 1;
279
274
 
280
- 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 };
275
+ 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, ddsFontSizeX075, ddsFontSizeX075NumberRem, ddsFontSizeX0875, ddsFontSizeX0875NumberRem, ddsFontSizeX1, ddsFontSizeX1125, ddsFontSizeX1125NumberRem, ddsFontSizeX125, ddsFontSizeX125NumberRem, ddsFontSizeX15, ddsFontSizeX15NumberRem, ddsFontSizeX1NumberRem, ddsFontSizeX2, ddsFontSizeX25, ddsFontSizeX25NumberRem, ddsFontSizeX2NumberRem, ddsFontSizeX3, ddsFontSizeX3NumberRem, ddsFontSizeX4, ddsFontSizeX4NumberRem, ddsFontSizeX5, ddsFontSizeX5NumberRem, ddsFontStyleItalic, ddsFontStyleNormal, ddsFontStyleUnderline, ddsFontWeightBold, ddsFontWeightLight, ddsFontWeightNormal, ddsFontWeightSemiBold, 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 CHANGED
@@ -22,24 +22,9 @@ export declare const ddsFontSizeX0875 = "0.875rem";
22
22
  export declare const ddsFontSizeX0875NumberRem = 0.875;
23
23
  export declare const ddsFontSizeX075 = "0.75rem";
24
24
  export declare const ddsFontSizeX075NumberRem = 0.75;
25
- export declare const ddsFontSizeXxlarge = "4rem";
26
- export declare const ddsFontSizeXxlargeNumberRem = 4;
27
- export declare const ddsFontSizeXlarge = "3rem";
28
- export declare const ddsFontSizeXlargeNumberRem = 3;
29
- export declare const ddsFontSizeLarge = "2rem";
30
- export declare const ddsFontSizeLargeNumberRem = 2;
31
- export declare const ddsFontSizeMedium = "1.5rem";
32
- export declare const ddsFontSizeMediumNumberRem = 1.5;
33
- export declare const ddsFontSizeSmall = "1.25rem";
34
- export declare const ddsFontSizeSmallNumberRem = 1.25;
35
- export declare const ddsFontSizeXsmall = "1.125rem";
36
- export declare const ddsFontSizeXsmallNumberRem = 1.125;
37
- export declare const ddsFontSizeXxsmall = "1rem";
38
- export declare const ddsFontSizeXxsmallNumberRem = 1;
39
- export declare const ddsFontSizeXxxsmall = "0.875rem";
40
- export declare const ddsFontSizeXxxsmallNumberRem = 0.875;
41
25
  export declare const ddsFontWeightLight = "300";
42
26
  export declare const ddsFontWeightNormal = "400";
27
+ export declare const ddsFontWeightSemiBold = "500";
43
28
  export declare const ddsFontWeightBold = "600";
44
29
  export declare const ddsFontLineheightX1 = 1.5;
45
30
  export declare const ddsFontLineheightX2 = 1.35;
@@ -122,6 +107,16 @@ export declare const ddsBreakpointLg = "1280px";
122
107
  export declare const ddsBreakpointLgNumberPx = 1280;
123
108
  export declare const ddsBreakpointXl = "1920px";
124
109
  export declare const ddsBreakpointXlNumberPx = 1920;
110
+ export declare const ddsZindexSkiptocontent = "250";
111
+ export declare const ddsZindexModalBackdrop = "200";
112
+ export declare const ddsZindexDrawer = "180";
113
+ export declare const ddsZindexDrawerBackdrop = "180";
114
+ export declare const ddsZindexOverflowmenu = "160";
115
+ export declare const ddsZindexPopover = "140";
116
+ export declare const ddsZindexTooltip = "120";
117
+ export declare const ddsZindexDropdown = "100";
118
+ export declare const ddsZindexSticky = "50";
119
+ export declare const ddsZindexAbsoluteElement = "1";
125
120
  export declare const ddsColorBgDefault = "#ffffff";
126
121
  export declare const ddsColorBgSubtle = "#f8f9f9";
127
122
  export declare const ddsColorSurfaceDefault = "#ffffff";
@@ -224,10 +219,10 @@ export declare const ddsFontBodyXsmall = "400 0.875rem/1.5 'IBM Plex Sans', Aria
224
219
  export declare const ddsFontBodySmall = "400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
225
220
  export declare const ddsFontBodyMedium = "400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
226
221
  export declare const ddsFontBodyLarge = "400 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
227
- export declare const ddsFontHeadingXxsmall = "600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif";
228
- export declare const ddsFontHeadingXsmall = "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
229
- export declare const ddsFontHeadingSmall = "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
230
- export declare const ddsFontHeadingMedium = "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
222
+ export declare const ddsFontHeadingXxsmall = "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
223
+ export declare const ddsFontHeadingXsmall = "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
224
+ export declare const ddsFontHeadingSmall = "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
225
+ export declare const ddsFontHeadingMedium = "500 1.5rem/1.5 'IBM Plex Sans', Arial, sans-serif";
231
226
  export declare const ddsFontHeadingLarge = "400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
232
227
  export declare const ddsFontHeadingXlarge = "300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
233
228
  export declare const ddsFontHeadingXxlarge = "300 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.2 'IBM Plex Sans', Arial, sans-serif";
package/dist/dds/build/js/Public/ddsTokens.js CHANGED
@@ -23,24 +23,9 @@ const ddsFontSizeX0875 = "0.875rem";
23
23
  const ddsFontSizeX0875NumberRem = 0.875;
24
24
  const ddsFontSizeX075 = "0.75rem";
25
25
  const ddsFontSizeX075NumberRem = 0.75;
26
- const ddsFontSizeXxlarge = "4rem";
27
- const ddsFontSizeXxlargeNumberRem = 4;
28
- const ddsFontSizeXlarge = "3rem";
29
- const ddsFontSizeXlargeNumberRem = 3;
30
- const ddsFontSizeLarge = "2rem";
31
- const ddsFontSizeLargeNumberRem = 2;
32
- const ddsFontSizeMedium = "1.5rem";
33
- const ddsFontSizeMediumNumberRem = 1.5;
34
- const ddsFontSizeSmall = "1.25rem";
35
- const ddsFontSizeSmallNumberRem = 1.25;
36
- const ddsFontSizeXsmall = "1.125rem";
37
- const ddsFontSizeXsmallNumberRem = 1.125;
38
- const ddsFontSizeXxsmall = "1rem";
39
- const ddsFontSizeXxsmallNumberRem = 1;
40
- const ddsFontSizeXxxsmall = "0.875rem";
41
- const ddsFontSizeXxxsmallNumberRem = 0.875;
42
26
  const ddsFontWeightLight = "300";
43
27
  const ddsFontWeightNormal = "400";
28
+ const ddsFontWeightSemiBold = "500";
44
29
  const ddsFontWeightBold = "600";
45
30
  const ddsFontLineheightX1 = 1.5; // Brukes på str ×1_25 og mindre
46
31
  const ddsFontLineheightX2 = 1.35; // Brukes på str x1.5, ×2 og ×3
@@ -123,6 +108,16 @@ const ddsBreakpointLg = "1280px";
123
108
  const ddsBreakpointLgNumberPx = 1280;
124
109
  const ddsBreakpointXl = "1920px";
125
110
  const ddsBreakpointXlNumberPx = 1920;
111
+ const ddsZindexSkiptocontent = "250"; // Brukes for dds-skiptocontent
112
+ const ddsZindexModalBackdrop = "200"; // Brukes for dds-modal
113
+ const ddsZindexDrawer = "180"; // Brukes for dds-drawer
114
+ const ddsZindexDrawerBackdrop = "180"; // Brukes for dds-drawer
115
+ const ddsZindexOverflowmenu = "160"; // Brukes for dds-overflowmenu
116
+ const ddsZindexPopover = "140"; // Brukes for dds-popover og kalender i datepicker
117
+ const ddsZindexTooltip = "120"; // Brukes for dds-tooltip
118
+ const ddsZindexDropdown = "100"; // Dropdown brukes for bl.a søkeforslag, dropdown i select
119
+ 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
120
+ const ddsZindexAbsoluteElement = "1"; // Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder
126
121
  const ddsColorBgDefault = "#ffffff"; // UI shell base color
127
122
  const ddsColorBgSubtle = "#f8f9f9"; // Alternative UI shell base color
128
123
  const ddsColorSurfaceDefault = "#ffffff"; // Default bg
@@ -225,10 +220,10 @@ const ddsFontBodyXsmall = "400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif";
225
220
  const ddsFontBodySmall = "400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // used with small button and input fields
226
221
  const ddsFontBodyMedium = "400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // standard body text, used with medium button and input fields
227
222
  const ddsFontBodyLarge = "400 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Used for large button and large search
228
- const ddsFontHeadingXxsmall = "600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h6
229
- const ddsFontHeadingXsmall = "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h5
230
- const ddsFontHeadingSmall = "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h4
231
- const ddsFontHeadingMedium = "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h3
223
+ const ddsFontHeadingXxsmall = "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h6
224
+ const ddsFontHeadingXsmall = "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h5
225
+ const ddsFontHeadingSmall = "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h4
226
+ const ddsFontHeadingMedium = "500 1.5rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default h3
232
227
  const ddsFontHeadingLarge = "400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.35 'IBM Plex Sans', Arial, sans-serif"; // Default h2
233
228
  const ddsFontHeadingXlarge = "300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.35 'IBM Plex Sans', Arial, sans-serif"; // Default H1
234
229
  const ddsFontHeadingXxlarge = "300 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.2 'IBM Plex Sans', Arial, sans-serif"; // Display or extra large page title (h1)
@@ -277,4 +272,4 @@ const ddsFontLabelMediumLetterSpacing = "0.01em";
277
272
  const ddsFontLabelMediumParagraphSpacing = "1em";
278
273
  const ddsFontLabelMediumParagraphSpacingNumberEm = 1;
279
274
 
280
- 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 };
275
+ 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, ddsFontSizeX075, ddsFontSizeX075NumberRem, ddsFontSizeX0875, ddsFontSizeX0875NumberRem, ddsFontSizeX1, ddsFontSizeX1125, ddsFontSizeX1125NumberRem, ddsFontSizeX125, ddsFontSizeX125NumberRem, ddsFontSizeX15, ddsFontSizeX15NumberRem, ddsFontSizeX1NumberRem, ddsFontSizeX2, ddsFontSizeX25, ddsFontSizeX25NumberRem, ddsFontSizeX2NumberRem, ddsFontSizeX3, ddsFontSizeX3NumberRem, ddsFontSizeX4, ddsFontSizeX4NumberRem, ddsFontSizeX5, ddsFontSizeX5NumberRem, ddsFontStyleItalic, ddsFontStyleNormal, ddsFontStyleUnderline, ddsFontWeightBold, ddsFontWeightLight, ddsFontWeightNormal, ddsFontWeightSemiBold, 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 CHANGED
@@ -14,16 +14,9 @@
14
14
  $dds-font-size-x1: var(--dds-font-size-x1);
15
15
  $dds-font-size-x0-875: var(--dds-font-size-x0-875);
16
16
  $dds-font-size-x0-75: var(--dds-font-size-x0-75);
17
- $dds-font-size-xxlarge: var(--dds-font-size-xxlarge);
18
- $dds-font-size-xlarge: var(--dds-font-size-xlarge);
19
- $dds-font-size-large: var(--dds-font-size-large);
20
- $dds-font-size-medium: var(--dds-font-size-medium);
21
- $dds-font-size-small: var(--dds-font-size-small);
22
- $dds-font-size-xsmall: var(--dds-font-size-xsmall);
23
- $dds-font-size-xxsmall: var(--dds-font-size-xxsmall);
24
- $dds-font-size-xxxsmall: var(--dds-font-size-xxxsmall);
25
17
  $dds-font-weight-light: var(--dds-font-weight-light);
26
18
  $dds-font-weight-normal: var(--dds-font-weight-normal);
19
+ $dds-font-weight-semi-bold: var(--dds-font-weight-semi-bold);
27
20
  $dds-font-weight-bold: var(--dds-font-weight-bold);
28
21
  $dds-font-lineheight-x1: var(--dds-font-lineheight-x1); /* Brukes på str ×1_25 og mindre */
29
22
  $dds-font-lineheight-x2: var(--dds-font-lineheight-x2); /* Brukes på str x1.5, ×2 og ×3 */
@@ -75,6 +68,16 @@
75
68
  $dds-breakpoint-md: var(--dds-breakpoint-md);
76
69
  $dds-breakpoint-lg: var(--dds-breakpoint-lg);
77
70
  $dds-breakpoint-xl: var(--dds-breakpoint-xl);
71
+ $dds-zindex-skiptocontent: var(--dds-zindex-skiptocontent); /* Brukes for dds-skiptocontent */
72
+ $dds-zindex-modal-backdrop: var(--dds-zindex-modal-backdrop); /* Brukes for dds-modal */
73
+ $dds-zindex-drawer: var(--dds-zindex-drawer); /* Brukes for dds-drawer */
74
+ $dds-zindex-drawer-backdrop: var(--dds-zindex-drawer-backdrop); /* Brukes for dds-drawer */
75
+ $dds-zindex-overflowmenu: var(--dds-zindex-overflowmenu); /* Brukes for dds-overflowmenu */
76
+ $dds-zindex-popover: var(--dds-zindex-popover); /* Brukes for dds-popover og kalender i datepicker */
77
+ $dds-zindex-tooltip: var(--dds-zindex-tooltip); /* Brukes for dds-tooltip */
78
+ $dds-zindex-dropdown: var(--dds-zindex-dropdown); /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
79
+ $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 */
80
+ $dds-zindex-absolute-element: var(--dds-zindex-absolute-element); /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
78
81
  $dds-color-bg-default: var(--dds-color-bg-default); /* UI shell base color */
79
82
  $dds-color-bg-subtle: var(--dds-color-bg-subtle); /* Alternative UI shell base color */
80
83
  $dds-color-surface-default: var(--dds-color-surface-default); /* Default bg */
package/dist/src/index.d.ts CHANGED
@@ -24,24 +24,9 @@ export declare const ddsTokens: {
24
24
  ddsFontSizeX0875NumberRem: 0.875;
25
25
  ddsFontSizeX075: "0.75rem";
26
26
  ddsFontSizeX075NumberRem: 0.75;
27
- ddsFontSizeXxlarge: "3rem";
28
- ddsFontSizeXxlargeNumberRem: 3;
29
- ddsFontSizeXlarge: "2rem";
30
- ddsFontSizeXlargeNumberRem: 2;
31
- ddsFontSizeLarge: "1.5rem";
32
- ddsFontSizeLargeNumberRem: 1.5;
33
- ddsFontSizeMedium: "1.25rem";
34
- ddsFontSizeMediumNumberRem: 1.25;
35
- ddsFontSizeSmall: "1.125rem";
36
- ddsFontSizeSmallNumberRem: 1.125;
37
- ddsFontSizeXsmall: "1rem";
38
- ddsFontSizeXsmallNumberRem: 1;
39
- ddsFontSizeXxsmall: "0.875rem";
40
- ddsFontSizeXxsmallNumberRem: 0.875;
41
- ddsFontSizeXxxsmall: "0.75rem";
42
- ddsFontSizeXxxsmallNumberRem: 0.75;
43
27
  ddsFontWeightLight: "300";
44
28
  ddsFontWeightNormal: "400";
29
+ ddsFontWeightSemiBold: "500";
45
30
  ddsFontWeightBold: "600";
46
31
  ddsFontLineheightX1: 1.5;
47
32
  ddsFontLineheightX2: 1.35;
@@ -124,6 +109,16 @@ export declare const ddsTokens: {
124
109
  ddsBreakpointLgNumberPx: 1280;
125
110
  ddsBreakpointXl: "1920px";
126
111
  ddsBreakpointXlNumberPx: 1920;
112
+ ddsZindexSkiptocontent: "250";
113
+ ddsZindexModalBackdrop: "200";
114
+ ddsZindexDrawer: "180";
115
+ ddsZindexDrawerBackdrop: "180";
116
+ ddsZindexOverflowmenu: "160";
117
+ ddsZindexPopover: "140";
118
+ ddsZindexTooltip: "120";
119
+ ddsZindexDropdown: "100";
120
+ ddsZindexSticky: "50";
121
+ ddsZindexAbsoluteElement: "1";
127
122
  ddsColorBgDefault: "#ffffff";
128
123
  ddsColorBgSubtle: "#f8f9f9";
129
124
  ddsColorSurfaceDefault: "#ffffff";
@@ -303,24 +298,9 @@ export declare const ddsTokens: {
303
298
  ddsFontSizeX0875NumberRem: 0.875;
304
299
  ddsFontSizeX075: "0.75rem";
305
300
  ddsFontSizeX075NumberRem: 0.75;
306
- ddsFontSizeXxlarge: "4rem";
307
- ddsFontSizeXxlargeNumberRem: 4;
308
- ddsFontSizeXlarge: "3rem";
309
- ddsFontSizeXlargeNumberRem: 3;
310
- ddsFontSizeLarge: "2rem";
311
- ddsFontSizeLargeNumberRem: 2;
312
- ddsFontSizeMedium: "1.5rem";
313
- ddsFontSizeMediumNumberRem: 1.5;
314
- ddsFontSizeSmall: "1.25rem";
315
- ddsFontSizeSmallNumberRem: 1.25;
316
- ddsFontSizeXsmall: "1.125rem";
317
- ddsFontSizeXsmallNumberRem: 1.125;
318
- ddsFontSizeXxsmall: "1rem";
319
- ddsFontSizeXxsmallNumberRem: 1;
320
- ddsFontSizeXxxsmall: "0.875rem";
321
- ddsFontSizeXxxsmallNumberRem: 0.875;
322
301
  ddsFontWeightLight: "300";
323
302
  ddsFontWeightNormal: "400";
303
+ ddsFontWeightSemiBold: "500";
324
304
  ddsFontWeightBold: "600";
325
305
  ddsFontLineheightX1: 1.5;
326
306
  ddsFontLineheightX2: 1.35;
@@ -403,6 +383,16 @@ export declare const ddsTokens: {
403
383
  ddsBreakpointLgNumberPx: 1280;
404
384
  ddsBreakpointXl: "1920px";
405
385
  ddsBreakpointXlNumberPx: 1920;
386
+ ddsZindexSkiptocontent: "250";
387
+ ddsZindexModalBackdrop: "200";
388
+ ddsZindexDrawer: "180";
389
+ ddsZindexDrawerBackdrop: "180";
390
+ ddsZindexOverflowmenu: "160";
391
+ ddsZindexPopover: "140";
392
+ ddsZindexTooltip: "120";
393
+ ddsZindexDropdown: "100";
394
+ ddsZindexSticky: "50";
395
+ ddsZindexAbsoluteElement: "1";
406
396
  ddsColorBgDefault: "#ffffff";
407
397
  ddsColorBgSubtle: "#f8f9f9";
408
398
  ddsColorSurfaceDefault: "#ffffff";
@@ -505,10 +495,10 @@ export declare const ddsTokens: {
505
495
  ddsFontBodySmall: "400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
506
496
  ddsFontBodyMedium: "400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
507
497
  ddsFontBodyLarge: "400 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
508
- ddsFontHeadingXxsmall: "600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif";
509
- ddsFontHeadingXsmall: "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
510
- ddsFontHeadingSmall: "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
511
- ddsFontHeadingMedium: "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
498
+ ddsFontHeadingXxsmall: "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
499
+ ddsFontHeadingXsmall: "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
500
+ ddsFontHeadingSmall: "600 1.25rem/1.5 'IBM Plex Sans', Arial, sans-serif";
501
+ ddsFontHeadingMedium: "500 1.5rem/1.5 'IBM Plex Sans', Arial, sans-serif";
512
502
  ddsFontHeadingLarge: "400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
513
503
  ddsFontHeadingXlarge: "300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
514
504
  ddsFontHeadingXxlarge: "300 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.2 'IBM Plex Sans', Arial, sans-serif";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@norges-domstoler/dds-design-tokens",
3
- "version": "7.1.0",
3
+ "version": "7.3.0",
4
4
  "description": "Design tokens used in Domstolenes designsystem",
5
5
  "author": "DDS team",
6
6
  "license": "MIT",
@@ -38,7 +38,7 @@
38
38
  "devDependencies": {
39
39
  "@rollup/plugin-commonjs": "^28.0.2",
40
40
  "@rollup/plugin-node-resolve": "^16.0.0",
41
- "@types/node": "^22.10.7",
41
+ "@types/node": "^22.13.1",
42
42
  "@tokens-studio/sd-transforms": "^1.2.9",
43
43
  "fork-ts-checker-webpack-plugin": "^9.0.2",
44
44
  "rollup": "^3.29.5",
@@ -46,7 +46,7 @@
46
46
  "rollup-plugin-peer-deps-external": "^2.2.4",
47
47
  "rollup-plugin-sass": "^1.15.2",
48
48
  "rollup-plugin-typescript2": "^0.36.0",
49
- "style-dictionary": "^4.3.0",
49
+ "style-dictionary": "^4.3.2",
50
50
  "typescript": "^5.7.3"
51
51
  },
52
52
  "publishConfig": {