@norges-domstoler/dds-design-tokens 0.0.1-beta.8 → 0.0.4

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 (41) hide show
  1. package/README.md +20 -6
  2. package/dist/css/border.css +11 -0
  3. package/dist/css/borderRadius.css +22 -0
  4. package/dist/css/colors.css +73 -0
  5. package/dist/css/ddsTokens.css +456 -0
  6. package/dist/css/font.css +315 -0
  7. package/dist/css/grid.css +32 -0
  8. package/dist/css/iconSize.css +10 -0
  9. package/dist/css/innershadow.css +11 -0
  10. package/dist/css/outershadow.css +15 -0
  11. package/dist/css/spacing.css +23 -0
  12. package/dist/dds/build/js/border.d.ts +1 -4
  13. package/dist/dds/build/js/borderRadius.d.ts +1 -7
  14. package/dist/dds/build/js/colors.d.ts +52 -306
  15. package/dist/dds/build/js/ddsTokens.d.ts +444 -1035
  16. package/dist/dds/build/js/font.d.ts +393 -721
  17. package/dist/dds/build/js/fontObject.d.ts +4290 -8872
  18. package/dist/dds/build/js/grid.d.ts +1 -1
  19. package/dist/dds/build/js/iconSize.d.ts +1 -1
  20. package/dist/dds/build/js/innershadow.d.ts +1 -1
  21. package/dist/dds/build/js/outershadow.d.ts +1 -1
  22. package/dist/dds/build/js/spacing.d.ts +1 -1
  23. package/dist/dds/{helpers → formattedStyles/fontPackages}/fontPackages.d.ts +56 -172
  24. package/dist/dds/formattedStyles/fontPackages/index.d.ts +1 -0
  25. package/dist/dds/index.d.ts +2 -1
  26. package/dist/dds/utils/fontPackageFormatter.d.ts +19 -0
  27. package/dist/index.es.js +6893 -14625
  28. package/dist/index.es.js.map +1 -1
  29. package/dist/index.js +6893 -14625
  30. package/dist/scss/_border.scss +8 -0
  31. package/dist/scss/_borderRadius.scss +19 -0
  32. package/dist/scss/_colors.scss +70 -0
  33. package/dist/scss/_ddsTokens.scss +453 -0
  34. package/dist/scss/_font.scss +312 -0
  35. package/dist/scss/_iconSize.scss +7 -0
  36. package/dist/scss/_innershadow.scss +8 -0
  37. package/dist/scss/_outershadow.scss +12 -0
  38. package/dist/scss/_spacing.scss +20 -0
  39. package/dist/src/ddsBaseTokens.d.ts +58 -173
  40. package/dist/src/ddsReferenceTokens.d.ts +1 -42
  41. package/package.json +2 -1
package/README.md CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
  [![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-design-tokens)](https://www.npmjs.com/package/@norges-domstoler/dds-design-tokens)
4
4
 
5
- Design tokens brukt i [domstolenes designsystem (DDS)](https://design.domstol.no/): farger, typografi, skygger osv. OBS! Domstolenes tjenester skal bruke komponentbiblioteket [dds-components](https://www.npmjs.com/package/@norges-domstoler/dds-components), dds-design-tokens kan brukes direkte kun som en midlertidig løsning.
5
+ Biblioteket inneholder design tokens brukt i [domstolenes designsystem (DDS)](https://design.domstol.no/): farger, typografi, skygger osv. Tokens kan brukes i Domstolenes tjenester i elementer som ikke ligger i komponentbiblioteket. OBS! Domstolenes tjenester skal bruke komponentbiblioteket [dds-components](https://www.npmjs.com/package/@norges-domstoler/dds-components), dds-design-tokens kan brukes direkte i egne komponenter kun som en midlertidig løsning i eldre prosjekter.
6
6
 
7
- Tokens består av base-tokens, altså variabler genererte fra Figma styles, og referanse-tokens - et objekt som bruker base-tokens til å definere logikk for hvordan base-tokens skal brukes videre i komponenter. F.eks., referanse-tokens kan spesifisere hva fokusfargen skal være, eller font og farge for label i skjemakomponenter. Tanken med referanse-tokens er å gjøre det enklere å gjenbruke koden og eventuelt endre på styling i komponenter ved å endre kun på tokens, uten å røre CSS inni komponentene. OBS! referanse-tokens er under arbeid.
7
+ Tokens består av base-tokens - variabler genererte fra Figma styles, og referanse-tokens - et objekt som bruker base-tokens til å definere logikk for hvordan base-tokens skal brukes videre i komponenter og andre elementer. F.eks., referanse-tokens kan spesifisere hva fokusfargen skal være, eller font og farge for label i skjemakomponenter. Tanken med referanse-tokens er å gjøre det enklere å gjenbruke koden og eventuelt endre på styling i komponenter ved å endre kun på tokens, uten å røre CSS inni komponentene. OBS! referanse-tokens er under arbeid.
8
+
9
+ Design tokens er eksportert som JS-konstanter, CSS-variabler og SCSS-variabler. Les mer under [Kom i gang](https://design.domstol.no/987b33f71/p/956e78-kom-i-gang/b/0174a7) og [Design tokens](https://design.domstol.no/987b33f71/p/18bd6f-design-tokens/b/499a2c) i dokumentasjonen.
8
10
 
9
11
  ## Installasjon
10
12
 
@@ -15,7 +17,20 @@ npm install @norges-domstoler/dds-design-tokens
15
17
  ## Bruk
16
18
 
17
19
  ```js
20
+ import * as React from "react";
21
+ import { render } from "react-dom";
18
22
  import { ddsBaseTokens } from "@norges-domstoler/dds-design-tokens";
23
+
24
+ const { colors: Colors, spacing: Spacing } = ddsBaseTokens;
25
+
26
+ const style = {
27
+ backgroundColor: Colors.DdsColorPrimaryBase,
28
+ padding: Spacing.SizesDdsSpacingLocalX075,
29
+ };
30
+
31
+ const App = () => <div style={style}>Tekst</div>;
32
+
33
+ render(<App />, document.getElementById("root"));
19
34
  ```
20
35
 
21
36
  ## Tilgjengelige base-tokens
@@ -23,6 +38,7 @@ import { ddsBaseTokens } from "@norges-domstoler/dds-design-tokens";
23
38
  - colors
24
39
  - fontPackages
25
40
  - spacing
41
+ - iconSizes
26
42
  - borderRadius
27
43
  - border
28
44
  - outerShadow
@@ -32,7 +48,7 @@ import { ddsBaseTokens } from "@norges-domstoler/dds-design-tokens";
32
48
 
33
49
  ### Installasjon
34
50
 
35
- Installer style-dictionary:
51
+ Klon repoet og installer style-dictionary:
36
52
 
37
53
  ```
38
54
  npm install -D style-dictionary
@@ -40,9 +56,7 @@ npm install -D style-dictionary
40
56
 
41
57
  ### Bruk
42
58
 
43
- _Under arbeid_
44
-
45
- Biblioteket bruker [Style-dictionary](https://amzn.github.io/style-dictionary) for å generere tokens som JS-variabler, 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`:
59
+ Biblioteket bruker [Style-dictionary](https://amzn.github.io/style-dictionary) for å generere tokens som 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`:
46
60
 
47
61
  ```
48
62
  npm run build
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 17 Sep 2021 11:44:35 GMT
4
+ */
5
+
6
+ :root {
7
+ --borders-dds-border-style-1-stroke-align: inside;
8
+ --borders-dds-border-style-1-stroke-miter-limit: 4;
9
+ --borders-dds-border-style-1-stroke-weight: 1px;
10
+ --borders-dds-border-style-1-stroke: rgba(119, 131, 140, 1);
11
+ }
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 17 Sep 2021 11:44:35 GMT
4
+ */
5
+
6
+ :root {
7
+ --radii-dds-border-radius-1-radius: 2px;
8
+ --radii-dds-border-radius-1-radii-top-left: 2px;
9
+ --radii-dds-border-radius-1-radii-top-right: 2px;
10
+ --radii-dds-border-radius-1-radii-bottom-right: 2px;
11
+ --radii-dds-border-radius-1-radii-bottom-left: 2px;
12
+ --radii-dds-border-radius-2-radius: 4px;
13
+ --radii-dds-border-radius-2-radii-top-left: 4px;
14
+ --radii-dds-border-radius-2-radii-top-right: 4px;
15
+ --radii-dds-border-radius-2-radii-bottom-right: 4px;
16
+ --radii-dds-border-radius-2-radii-bottom-left: 4px;
17
+ --radii-dds-border-radius-3-radius: 8px;
18
+ --radii-dds-border-radius-3-radii-top-left: 8px;
19
+ --radii-dds-border-radius-3-radii-top-right: 8px;
20
+ --radii-dds-border-radius-3-radii-bottom-right: 8px;
21
+ --radii-dds-border-radius-3-radii-bottom-left: 8px;
22
+ }
@@ -0,0 +1,73 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 17 Sep 2021 11:44:35 GMT
4
+ */
5
+
6
+ :root {
7
+ --dds-color-primary-lightest: rgba(234, 239, 244, 1);
8
+ --dds-color-primary-lighter: rgba(172, 187, 198, 1);
9
+ --dds-color-primary-light: rgba(79, 106, 126, 1);
10
+ --dds-color-primary-base: rgba(53, 71, 84, 1); /* Primary er hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
11
+ --dds-color-primary-dark: rgba(49, 61, 69, 1);
12
+ --dds-color-primary-darker: rgba(32, 43, 50, 1);
13
+ --dds-color-primary-darkest: rgba(21, 28, 34, 1);
14
+ --dds-color-neutrals-white: rgba(255, 255, 255, 1);
15
+ --dds-color-neutrals-gray-1: rgba(248, 249, 249, 1);
16
+ --dds-color-neutrals-gray-2: rgba(235, 236, 238, 1);
17
+ --dds-color-neutrals-gray-3: rgba(207, 212, 215, 1);
18
+ --dds-color-neutrals-gray-4: rgba(173, 181, 186, 1);
19
+ --dds-color-neutrals-gray-5: rgba(119, 131, 140, 1);
20
+ --dds-color-neutrals-gray-6: rgba(84, 92, 98, 1);
21
+ --dds-color-neutrals-gray-7: rgba(58, 65, 70, 1);
22
+ --dds-color-neutrals-gray-8: rgba(34, 39, 42, 1);
23
+ --dds-color-neutrals-gray-9: rgba(11, 13, 14, 1);
24
+ --dds-color-interactive-lightest: rgba(234, 242, 247, 1);
25
+ --dds-color-interactive-lighter: rgba(171, 201, 221, 1);
26
+ --dds-color-interactive-light: rgba(109, 161, 196, 1);
27
+ --dds-color-interactive-base: rgba(46, 120, 170, 1); /* Interactive brukes til interaksjon. Dette er vanligvis knapper og lenker. Den brukes ofte for å indikere at en komponent er klikkbar eller at man interagerer med den */
28
+ --dds-color-interactive-dark: rgba(37, 96, 136, 1);
29
+ --dds-color-interactive-darker: rgba(28, 72, 102, 1);
30
+ --dds-color-interactive-darkest: rgba(18, 48, 68, 1);
31
+ --dds-color-secondary-lightest: rgba(230, 237, 237, 1); /* --l80 */
32
+ --dds-color-secondary-lighter: rgba(205, 219, 219, 1);
33
+ --dds-color-secondary-light: rgba(184, 205, 205, 1);
34
+ --dds-color-secondary-base: rgba(154, 184, 183, 1); /* Secondary er den andre hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
35
+ --dds-color-secondary-dark: rgba(123, 147, 146, 1);
36
+ --dds-color-secondary-darker: rgba(77, 100, 99, 1);
37
+ --dds-color-secondary-darkest: rgba(62, 74, 73, 1);
38
+ --dds-color-tertiary-lightest: rgba(255, 230, 223, 1);
39
+ --dds-color-tertiary-lighter: rgba(255, 214, 202, 1);
40
+ --dds-color-tertiary-light: rgba(246, 193, 177, 1);
41
+ --dds-color-tertiary-base: rgba(242, 166, 143, 1); /* Tertiary er er den tredje profilfargen til Domstolene. Denne brukes gjerne som støttefarge */
42
+ --dds-color-tertiary-dark: rgba(245, 152, 119, 1);
43
+ --dds-color-tertiary-darker: rgba(242, 126, 85, 1);
44
+ --dds-color-tertiary-darkest: rgba(194, 101, 68, 1);
45
+ --dds-color-success-lightest: rgba(240, 249, 240, 1);
46
+ --dds-color-success-lighter: rgba(193, 229, 194, 1);
47
+ --dds-color-success-light: rgba(147, 210, 148, 1);
48
+ --dds-color-success-base: rgba(101, 190, 102, 1); /* Brukes for å kommunisere suksess eller noe som er riktig. */
49
+ --dds-color-success-dark: rgba(81, 152, 82, 1);
50
+ --dds-color-success-darker: rgba(61, 114, 61, 1);
51
+ --dds-color-success-darkest: rgba(40, 76, 41, 1);
52
+ --dds-color-danger-lightest: rgba(251, 235, 235, 1);
53
+ --dds-color-danger-lighter: rgba(239, 175, 175, 1);
54
+ --dds-color-danger-light: rgba(228, 115, 115, 1);
55
+ --dds-color-danger-base: rgba(216, 55, 55, 1); /* Brukes for å kommunisere feil og destruktive handlinger, som f.eks. slett. */
56
+ --dds-color-danger-dark: rgba(173, 44, 44, 1);
57
+ --dds-color-danger-darker: rgba(130, 33, 33, 1);
58
+ --dds-color-danger-darkest: rgba(86, 22, 22, 1);
59
+ --dds-color-warning-lightest: rgba(254, 252, 237, 1);
60
+ --dds-color-warning-lighter: rgba(251, 243, 184, 1);
61
+ --dds-color-warning-light: rgba(247, 233, 130, 1);
62
+ --dds-color-warning-base: rgba(244, 224, 77, 1); /* Brukes for å kommunisere varsler. */
63
+ --dds-color-warning-dark: rgba(195, 179, 62, 1);
64
+ --dds-color-warning-darker: rgba(146, 134, 46, 1);
65
+ --dds-color-warning-darkest: rgba(98, 90, 31, 1);
66
+ --dds-color-info-lightest: rgba(241, 248, 253, 1);
67
+ --dds-color-info-lighter: rgba(200, 227, 245, 1);
68
+ --dds-color-info-light: rgba(158, 206, 238, 1);
69
+ --dds-color-info-base: rgba(117, 185, 230, 1);
70
+ --dds-color-info-dark: rgba(94, 148, 184, 1);
71
+ --dds-color-info-darker: rgba(70, 111, 138, 1);
72
+ --dds-color-info-darkest: rgba(47, 74, 92, 1);
73
+ }
@@ -0,0 +1,456 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 17 Sep 2021 11:44:35 GMT
4
+ */
5
+
6
+ :root {
7
+ --dds-color-primary-lightest: rgba(234, 239, 244, 1);
8
+ --dds-color-primary-lighter: rgba(172, 187, 198, 1);
9
+ --dds-color-primary-light: rgba(79, 106, 126, 1);
10
+ --dds-color-primary-base: rgba(53, 71, 84, 1); /* Primary er hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
11
+ --dds-color-primary-dark: rgba(49, 61, 69, 1);
12
+ --dds-color-primary-darker: rgba(32, 43, 50, 1);
13
+ --dds-color-primary-darkest: rgba(21, 28, 34, 1);
14
+ --dds-color-neutrals-white: rgba(255, 255, 255, 1);
15
+ --dds-color-neutrals-gray-1: rgba(248, 249, 249, 1);
16
+ --dds-color-neutrals-gray-2: rgba(235, 236, 238, 1);
17
+ --dds-color-neutrals-gray-3: rgba(207, 212, 215, 1);
18
+ --dds-color-neutrals-gray-4: rgba(173, 181, 186, 1);
19
+ --dds-color-neutrals-gray-5: rgba(119, 131, 140, 1);
20
+ --dds-color-neutrals-gray-6: rgba(84, 92, 98, 1);
21
+ --dds-color-neutrals-gray-7: rgba(58, 65, 70, 1);
22
+ --dds-color-neutrals-gray-8: rgba(34, 39, 42, 1);
23
+ --dds-color-neutrals-gray-9: rgba(11, 13, 14, 1);
24
+ --dds-color-interactive-lightest: rgba(234, 242, 247, 1);
25
+ --dds-color-interactive-lighter: rgba(171, 201, 221, 1);
26
+ --dds-color-interactive-light: rgba(109, 161, 196, 1);
27
+ --dds-color-interactive-base: rgba(46, 120, 170, 1); /* Interactive brukes til interaksjon. Dette er vanligvis knapper og lenker. Den brukes ofte for å indikere at en komponent er klikkbar eller at man interagerer med den */
28
+ --dds-color-interactive-dark: rgba(37, 96, 136, 1);
29
+ --dds-color-interactive-darker: rgba(28, 72, 102, 1);
30
+ --dds-color-interactive-darkest: rgba(18, 48, 68, 1);
31
+ --dds-color-secondary-lightest: rgba(230, 237, 237, 1); /* --l80 */
32
+ --dds-color-secondary-lighter: rgba(205, 219, 219, 1);
33
+ --dds-color-secondary-light: rgba(184, 205, 205, 1);
34
+ --dds-color-secondary-base: rgba(154, 184, 183, 1); /* Secondary er den andre hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
35
+ --dds-color-secondary-dark: rgba(123, 147, 146, 1);
36
+ --dds-color-secondary-darker: rgba(77, 100, 99, 1);
37
+ --dds-color-secondary-darkest: rgba(62, 74, 73, 1);
38
+ --dds-color-tertiary-lightest: rgba(255, 230, 223, 1);
39
+ --dds-color-tertiary-lighter: rgba(255, 214, 202, 1);
40
+ --dds-color-tertiary-light: rgba(246, 193, 177, 1);
41
+ --dds-color-tertiary-base: rgba(242, 166, 143, 1); /* Tertiary er er den tredje profilfargen til Domstolene. Denne brukes gjerne som støttefarge */
42
+ --dds-color-tertiary-dark: rgba(245, 152, 119, 1);
43
+ --dds-color-tertiary-darker: rgba(242, 126, 85, 1);
44
+ --dds-color-tertiary-darkest: rgba(194, 101, 68, 1);
45
+ --dds-color-success-lightest: rgba(240, 249, 240, 1);
46
+ --dds-color-success-lighter: rgba(193, 229, 194, 1);
47
+ --dds-color-success-light: rgba(147, 210, 148, 1);
48
+ --dds-color-success-base: rgba(101, 190, 102, 1); /* Brukes for å kommunisere suksess eller noe som er riktig. */
49
+ --dds-color-success-dark: rgba(81, 152, 82, 1);
50
+ --dds-color-success-darker: rgba(61, 114, 61, 1);
51
+ --dds-color-success-darkest: rgba(40, 76, 41, 1);
52
+ --dds-color-danger-lightest: rgba(251, 235, 235, 1);
53
+ --dds-color-danger-lighter: rgba(239, 175, 175, 1);
54
+ --dds-color-danger-light: rgba(228, 115, 115, 1);
55
+ --dds-color-danger-base: rgba(216, 55, 55, 1); /* Brukes for å kommunisere feil og destruktive handlinger, som f.eks. slett. */
56
+ --dds-color-danger-dark: rgba(173, 44, 44, 1);
57
+ --dds-color-danger-darker: rgba(130, 33, 33, 1);
58
+ --dds-color-danger-darkest: rgba(86, 22, 22, 1);
59
+ --dds-color-warning-lightest: rgba(254, 252, 237, 1);
60
+ --dds-color-warning-lighter: rgba(251, 243, 184, 1);
61
+ --dds-color-warning-light: rgba(247, 233, 130, 1);
62
+ --dds-color-warning-base: rgba(244, 224, 77, 1); /* Brukes for å kommunisere varsler. */
63
+ --dds-color-warning-dark: rgba(195, 179, 62, 1);
64
+ --dds-color-warning-darker: rgba(146, 134, 46, 1);
65
+ --dds-color-warning-darkest: rgba(98, 90, 31, 1);
66
+ --dds-color-info-lightest: rgba(241, 248, 253, 1);
67
+ --dds-color-info-lighter: rgba(200, 227, 245, 1);
68
+ --dds-color-info-light: rgba(158, 206, 238, 1);
69
+ --dds-color-info-base: rgba(117, 185, 230, 1);
70
+ --dds-color-info-dark: rgba(94, 148, 184, 1);
71
+ --dds-color-info-darker: rgba(70, 111, 138, 1);
72
+ --dds-color-info-darkest: rgba(47, 74, 92, 1);
73
+ --dds-font-heading-sans-01-font-size: 14px;
74
+ --dds-font-heading-sans-01-text-decoration: none;
75
+ --dds-font-heading-sans-01-font-family: 'IBM Plex Sans';
76
+ --dds-font-heading-sans-01-font-weight: 600;
77
+ --dds-font-heading-sans-01-font-style: normal;
78
+ --dds-font-heading-sans-01-font-stretch: normal;
79
+ --dds-font-heading-sans-01-letter-spacing: 0.01em;
80
+ --dds-font-heading-sans-01-line-height: 1.5em;
81
+ --dds-font-heading-sans-01-paragraph-indent: 0px;
82
+ --dds-font-heading-sans-01-paragraph-spacing: 7px;
83
+ --dds-font-heading-sans-01-text-case: none;
84
+ --dds-font-heading-sans-02-font-size: 16px;
85
+ --dds-font-heading-sans-02-text-decoration: none;
86
+ --dds-font-heading-sans-02-font-family: 'IBM Plex Sans';
87
+ --dds-font-heading-sans-02-font-weight: 600;
88
+ --dds-font-heading-sans-02-font-style: normal;
89
+ --dds-font-heading-sans-02-font-stretch: normal;
90
+ --dds-font-heading-sans-02-letter-spacing: 0em;
91
+ --dds-font-heading-sans-02-line-height: 1.5em;
92
+ --dds-font-heading-sans-02-paragraph-indent: 0px;
93
+ --dds-font-heading-sans-02-paragraph-spacing: 9px;
94
+ --dds-font-heading-sans-02-text-case: none;
95
+ --dds-font-heading-sans-03-font-size: 24px;
96
+ --dds-font-heading-sans-03-text-decoration: none;
97
+ --dds-font-heading-sans-03-font-family: 'IBM Plex Sans';
98
+ --dds-font-heading-sans-03-font-weight: 400;
99
+ --dds-font-heading-sans-03-font-style: normal;
100
+ --dds-font-heading-sans-03-font-stretch: normal;
101
+ --dds-font-heading-sans-03-letter-spacing: 0em;
102
+ --dds-font-heading-sans-03-line-height: 1.35em;
103
+ --dds-font-heading-sans-03-paragraph-indent: 0px;
104
+ --dds-font-heading-sans-03-paragraph-spacing: 8px;
105
+ --dds-font-heading-sans-03-text-case: none;
106
+ --dds-font-heading-sans-04-font-size: 32px;
107
+ --dds-font-heading-sans-04-text-decoration: none;
108
+ --dds-font-heading-sans-04-font-family: 'IBM Plex Sans';
109
+ --dds-font-heading-sans-04-font-weight: 400;
110
+ --dds-font-heading-sans-04-font-style: normal;
111
+ --dds-font-heading-sans-04-font-stretch: normal;
112
+ --dds-font-heading-sans-04-letter-spacing: 0em;
113
+ --dds-font-heading-sans-04-line-height: 1.35em;
114
+ --dds-font-heading-sans-04-paragraph-indent: 0px;
115
+ --dds-font-heading-sans-04-paragraph-spacing: 10px;
116
+ --dds-font-heading-sans-04-text-case: none;
117
+ --dds-font-heading-sans-05-font-size: 40px;
118
+ --dds-font-heading-sans-05-text-decoration: none;
119
+ --dds-font-heading-sans-05-font-family: 'IBM Plex Sans';
120
+ --dds-font-heading-sans-05-font-weight: 300;
121
+ --dds-font-heading-sans-05-font-style: normal;
122
+ --dds-font-heading-sans-05-font-stretch: normal;
123
+ --dds-font-heading-sans-05-letter-spacing: -0.01em;
124
+ --dds-font-heading-sans-05-line-height: 1.35em;
125
+ --dds-font-heading-sans-05-paragraph-indent: 0px;
126
+ --dds-font-heading-sans-05-paragraph-spacing: 13px;
127
+ --dds-font-heading-sans-05-text-case: none;
128
+ --dds-font-heading-sans-06-font-size: 48px;
129
+ --dds-font-heading-sans-06-text-decoration: none;
130
+ --dds-font-heading-sans-06-font-family: 'IBM Plex Sans';
131
+ --dds-font-heading-sans-06-font-weight: 300;
132
+ --dds-font-heading-sans-06-font-style: normal;
133
+ --dds-font-heading-sans-06-font-stretch: normal;
134
+ --dds-font-heading-sans-06-letter-spacing: -0.01em;
135
+ --dds-font-heading-sans-06-line-height: 1.2em;
136
+ --dds-font-heading-sans-06-paragraph-indent: 0px;
137
+ --dds-font-heading-sans-06-paragraph-spacing: 12px;
138
+ --dds-font-heading-sans-06-text-case: none;
139
+ --dds-font-heading-sans-07-font-size: 64px;
140
+ --dds-font-heading-sans-07-text-decoration: none;
141
+ --dds-font-heading-sans-07-font-family: 'IBM Plex Sans';
142
+ --dds-font-heading-sans-07-font-weight: 300;
143
+ --dds-font-heading-sans-07-font-style: normal;
144
+ --dds-font-heading-sans-07-font-stretch: normal;
145
+ --dds-font-heading-sans-07-letter-spacing: -0.01em;
146
+ --dds-font-heading-sans-07-line-height: 1.2em;
147
+ --dds-font-heading-sans-07-paragraph-indent: 0px;
148
+ --dds-font-heading-sans-07-paragraph-spacing: 16px;
149
+ --dds-font-heading-sans-07-text-case: none;
150
+ --dds-font-heading-sans-08-font-size: 80px;
151
+ --dds-font-heading-sans-08-text-decoration: none;
152
+ --dds-font-heading-sans-08-font-family: 'IBM Plex Sans';
153
+ --dds-font-heading-sans-08-font-weight: 300;
154
+ --dds-font-heading-sans-08-font-style: normal;
155
+ --dds-font-heading-sans-08-font-stretch: normal;
156
+ --dds-font-heading-sans-08-letter-spacing: -0.01em;
157
+ --dds-font-heading-sans-08-line-height: 1.2em;
158
+ --dds-font-heading-sans-08-paragraph-indent: 0px;
159
+ --dds-font-heading-sans-08-paragraph-spacing: 20px;
160
+ --dds-font-heading-sans-08-text-case: none;
161
+ --dds-font-body-sans-01-font-size: 14px;
162
+ --dds-font-body-sans-01-text-decoration: none;
163
+ --dds-font-body-sans-01-font-family: 'IBM Plex Sans';
164
+ --dds-font-body-sans-01-font-weight: 400;
165
+ --dds-font-body-sans-01-font-style: normal;
166
+ --dds-font-body-sans-01-font-stretch: normal;
167
+ --dds-font-body-sans-01-letter-spacing: 0.01em;
168
+ --dds-font-body-sans-01-line-height: 1.5em;
169
+ --dds-font-body-sans-01-paragraph-indent: 0px;
170
+ --dds-font-body-sans-01-paragraph-spacing: 7px;
171
+ --dds-font-body-sans-01-text-case: none;
172
+ --dds-font-body-sans-02-font-size: 16px;
173
+ --dds-font-body-sans-02-text-decoration: none;
174
+ --dds-font-body-sans-02-font-family: 'IBM Plex Sans';
175
+ --dds-font-body-sans-02-font-weight: 400;
176
+ --dds-font-body-sans-02-font-style: normal;
177
+ --dds-font-body-sans-02-font-stretch: normal;
178
+ --dds-font-body-sans-02-letter-spacing: 0em;
179
+ --dds-font-body-sans-02-line-height: 1.5em;
180
+ --dds-font-body-sans-02-paragraph-indent: 0px;
181
+ --dds-font-body-sans-02-paragraph-spacing: 8px;
182
+ --dds-font-body-sans-02-text-case: none;
183
+ --dds-font-body-sans-03-font-size: 18px;
184
+ --dds-font-body-sans-03-text-decoration: none;
185
+ --dds-font-body-sans-03-font-family: 'IBM Plex Sans';
186
+ --dds-font-body-sans-03-font-weight: 400;
187
+ --dds-font-body-sans-03-font-style: normal;
188
+ --dds-font-body-sans-03-font-stretch: normal;
189
+ --dds-font-body-sans-03-letter-spacing: 0em;
190
+ --dds-font-body-sans-03-line-height: 1.5em;
191
+ --dds-font-body-sans-03-paragraph-indent: 0px;
192
+ --dds-font-body-sans-03-paragraph-spacing: 10px;
193
+ --dds-font-body-sans-03-text-case: none;
194
+ --dds-font-body-sans-04-font-size: 20px;
195
+ --dds-font-body-sans-04-text-decoration: none;
196
+ --dds-font-body-sans-04-font-family: 'IBM Plex Sans';
197
+ --dds-font-body-sans-04-font-weight: 400;
198
+ --dds-font-body-sans-04-font-style: normal;
199
+ --dds-font-body-sans-04-font-stretch: normal;
200
+ --dds-font-body-sans-04-letter-spacing: 0em;
201
+ --dds-font-body-sans-04-line-height: 1.5em;
202
+ --dds-font-body-sans-04-paragraph-indent: 0px;
203
+ --dds-font-body-sans-04-paragraph-spacing: 10px;
204
+ --dds-font-body-sans-04-text-case: none;
205
+ --dds-font-body-serif-01-font-size: 14px;
206
+ --dds-font-body-serif-01-text-decoration: none;
207
+ --dds-font-body-serif-01-font-family: 'Georgia';
208
+ --dds-font-body-serif-01-font-weight: 400;
209
+ --dds-font-body-serif-01-font-style: normal;
210
+ --dds-font-body-serif-01-font-stretch: normal;
211
+ --dds-font-body-serif-01-letter-spacing: 0.01em;
212
+ --dds-font-body-serif-01-line-height: 1.5em;
213
+ --dds-font-body-serif-01-paragraph-indent: 0px;
214
+ --dds-font-body-serif-01-paragraph-spacing: 7px;
215
+ --dds-font-body-serif-01-text-case: none;
216
+ --dds-font-body-serif-02-font-size: 16px;
217
+ --dds-font-body-serif-02-text-decoration: none;
218
+ --dds-font-body-serif-02-font-family: 'Georgia';
219
+ --dds-font-body-serif-02-font-weight: 400;
220
+ --dds-font-body-serif-02-font-style: normal;
221
+ --dds-font-body-serif-02-font-stretch: normal;
222
+ --dds-font-body-serif-02-letter-spacing: 0em;
223
+ --dds-font-body-serif-02-line-height: 1.5em;
224
+ --dds-font-body-serif-02-paragraph-indent: 0px;
225
+ --dds-font-body-serif-02-paragraph-spacing: 8px;
226
+ --dds-font-body-serif-02-text-case: none;
227
+ --dds-font-body-serif-03-font-size: 18px;
228
+ --dds-font-body-serif-03-text-decoration: none;
229
+ --dds-font-body-serif-03-font-family: 'Georgia';
230
+ --dds-font-body-serif-03-font-weight: 400;
231
+ --dds-font-body-serif-03-font-style: normal;
232
+ --dds-font-body-serif-03-font-stretch: normal;
233
+ --dds-font-body-serif-03-letter-spacing: 0em;
234
+ --dds-font-body-serif-03-line-height: 1.5em;
235
+ --dds-font-body-serif-03-paragraph-indent: 0px;
236
+ --dds-font-body-serif-03-paragraph-spacing: 10px;
237
+ --dds-font-body-serif-03-text-case: none;
238
+ --dds-font-body-serif-04-font-size: 20px;
239
+ --dds-font-body-serif-04-text-decoration: none;
240
+ --dds-font-body-serif-04-font-family: 'Georgia';
241
+ --dds-font-body-serif-04-font-weight: 400;
242
+ --dds-font-body-serif-04-font-style: normal;
243
+ --dds-font-body-serif-04-font-stretch: normal;
244
+ --dds-font-body-serif-04-letter-spacing: 0em;
245
+ --dds-font-body-serif-04-line-height: 1.5em;
246
+ --dds-font-body-serif-04-paragraph-indent: 0px;
247
+ --dds-font-body-serif-04-paragraph-spacing: 10px;
248
+ --dds-font-body-serif-04-text-case: none;
249
+ --dds-font-lead-sans-01-font-size: 18px;
250
+ --dds-font-lead-sans-01-text-decoration: none;
251
+ --dds-font-lead-sans-01-font-family: 'IBM Plex Sans';
252
+ --dds-font-lead-sans-01-font-weight: 600;
253
+ --dds-font-lead-sans-01-font-style: normal;
254
+ --dds-font-lead-sans-01-font-stretch: normal;
255
+ --dds-font-lead-sans-01-letter-spacing: 0em;
256
+ --dds-font-lead-sans-01-line-height: 1.5em;
257
+ --dds-font-lead-sans-01-paragraph-indent: 0px;
258
+ --dds-font-lead-sans-01-paragraph-spacing: 9px;
259
+ --dds-font-lead-sans-01-text-case: none;
260
+ --dds-font-lead-sans-02-font-size: 24px;
261
+ --dds-font-lead-sans-02-text-decoration: none;
262
+ --dds-font-lead-sans-02-font-family: 'IBM Plex Sans';
263
+ --dds-font-lead-sans-02-font-weight: 600;
264
+ --dds-font-lead-sans-02-font-style: normal;
265
+ --dds-font-lead-sans-02-font-stretch: normal;
266
+ --dds-font-lead-sans-02-letter-spacing: 0em;
267
+ --dds-font-lead-sans-02-line-height: 1.35em;
268
+ --dds-font-lead-sans-02-paragraph-indent: 0px;
269
+ --dds-font-lead-sans-02-paragraph-spacing: 8px;
270
+ --dds-font-lead-sans-02-text-case: none;
271
+ --dds-font-lead-sans-03-font-size: 24px;
272
+ --dds-font-lead-sans-03-text-decoration: none;
273
+ --dds-font-lead-sans-03-font-family: 'IBM Plex Sans';
274
+ --dds-font-lead-sans-03-font-weight: 300;
275
+ --dds-font-lead-sans-03-font-style: normal;
276
+ --dds-font-lead-sans-03-font-stretch: normal;
277
+ --dds-font-lead-sans-03-letter-spacing: 0em;
278
+ --dds-font-lead-sans-03-line-height: 1.35em;
279
+ --dds-font-lead-sans-03-paragraph-indent: 0px;
280
+ --dds-font-lead-sans-03-paragraph-spacing: 8px;
281
+ --dds-font-lead-sans-03-text-case: none;
282
+ --dds-font-lead-sans-04-font-size: 32px;
283
+ --dds-font-lead-sans-04-text-decoration: none;
284
+ --dds-font-lead-sans-04-font-family: 'IBM Plex Sans';
285
+ --dds-font-lead-sans-04-font-weight: 300;
286
+ --dds-font-lead-sans-04-font-style: normal;
287
+ --dds-font-lead-sans-04-font-stretch: normal;
288
+ --dds-font-lead-sans-04-letter-spacing: 0em;
289
+ --dds-font-lead-sans-04-line-height: 1.35em;
290
+ --dds-font-lead-sans-04-paragraph-indent: 0px;
291
+ --dds-font-lead-sans-04-paragraph-spacing: 10px;
292
+ --dds-font-lead-sans-04-text-case: none;
293
+ --dds-font-lead-sans-05-font-size: 40px;
294
+ --dds-font-lead-sans-05-text-decoration: none;
295
+ --dds-font-lead-sans-05-font-family: 'IBM Plex Sans';
296
+ --dds-font-lead-sans-05-font-weight: 300;
297
+ --dds-font-lead-sans-05-font-style: normal;
298
+ --dds-font-lead-sans-05-font-stretch: normal;
299
+ --dds-font-lead-sans-05-letter-spacing: -0.01em;
300
+ --dds-font-lead-sans-05-line-height: 1.35em;
301
+ --dds-font-lead-sans-05-paragraph-indent: 0px;
302
+ --dds-font-lead-sans-05-paragraph-spacing: 13px;
303
+ --dds-font-lead-sans-05-text-case: none;
304
+ --dds-font-supporting-style-label-01-font-size: 14px;
305
+ --dds-font-supporting-style-label-01-text-decoration: none;
306
+ --dds-font-supporting-style-label-01-font-family: 'IBM Plex Sans';
307
+ --dds-font-supporting-style-label-01-font-weight: 600;
308
+ --dds-font-supporting-style-label-01-font-style: normal;
309
+ --dds-font-supporting-style-label-01-font-stretch: normal;
310
+ --dds-font-supporting-style-label-01-letter-spacing: 0.01em;
311
+ --dds-font-supporting-style-label-01-line-height: 1.5em;
312
+ --dds-font-supporting-style-label-01-paragraph-indent: 0px;
313
+ --dds-font-supporting-style-label-01-paragraph-spacing: 7px;
314
+ --dds-font-supporting-style-label-01-text-case: none;
315
+ --dds-font-supporting-style-helpertext-01-font-size: 14px;
316
+ --dds-font-supporting-style-helpertext-01-text-decoration: none;
317
+ --dds-font-supporting-style-helpertext-01-font-family: 'IBM Plex Sans';
318
+ --dds-font-supporting-style-helpertext-01-font-weight: 400;
319
+ --dds-font-supporting-style-helpertext-01-font-style: normal;
320
+ --dds-font-supporting-style-helpertext-01-font-stretch: normal;
321
+ --dds-font-supporting-style-helpertext-01-letter-spacing: 0.01em;
322
+ --dds-font-supporting-style-helpertext-01-line-height: 1.5em;
323
+ --dds-font-supporting-style-helpertext-01-paragraph-indent: 0px;
324
+ --dds-font-supporting-style-helpertext-01-paragraph-spacing: 7px;
325
+ --dds-font-supporting-style-helpertext-01-text-case: none;
326
+ --dds-font-supporting-style-inputtext-01-font-size: 14px;
327
+ --dds-font-supporting-style-inputtext-01-text-decoration: none;
328
+ --dds-font-supporting-style-inputtext-01-font-family: 'IBM Plex Sans';
329
+ --dds-font-supporting-style-inputtext-01-font-weight: 400;
330
+ --dds-font-supporting-style-inputtext-01-font-style: normal;
331
+ --dds-font-supporting-style-inputtext-01-font-stretch: normal;
332
+ --dds-font-supporting-style-inputtext-01-letter-spacing: 0.01em;
333
+ --dds-font-supporting-style-inputtext-01-line-height: 1.5em;
334
+ --dds-font-supporting-style-inputtext-01-paragraph-indent: 0px;
335
+ --dds-font-supporting-style-inputtext-01-paragraph-spacing: 7px;
336
+ --dds-font-supporting-style-inputtext-01-text-case: none;
337
+ --dds-font-supporting-style-inputtext-02-font-size: 18px;
338
+ --dds-font-supporting-style-inputtext-02-text-decoration: none;
339
+ --dds-font-supporting-style-inputtext-02-font-family: 'IBM Plex Sans';
340
+ --dds-font-supporting-style-inputtext-02-font-weight: 400;
341
+ --dds-font-supporting-style-inputtext-02-font-style: normal;
342
+ --dds-font-supporting-style-inputtext-02-font-stretch: normal;
343
+ --dds-font-supporting-style-inputtext-02-letter-spacing: 0em;
344
+ --dds-font-supporting-style-inputtext-02-line-height: 1.5em;
345
+ --dds-font-supporting-style-inputtext-02-paragraph-indent: 0px;
346
+ --dds-font-supporting-style-inputtext-02-paragraph-spacing: 9px;
347
+ --dds-font-supporting-style-inputtext-02-text-case: none;
348
+ --dds-font-supporting-style-inputtext-03-font-size: 20px;
349
+ --dds-font-supporting-style-inputtext-03-text-decoration: none;
350
+ --dds-font-supporting-style-inputtext-03-font-family: 'IBM Plex Sans';
351
+ --dds-font-supporting-style-inputtext-03-font-weight: 400;
352
+ --dds-font-supporting-style-inputtext-03-font-style: normal;
353
+ --dds-font-supporting-style-inputtext-03-font-stretch: normal;
354
+ --dds-font-supporting-style-inputtext-03-letter-spacing: 0em;
355
+ --dds-font-supporting-style-inputtext-03-line-height: 1.5em;
356
+ --dds-font-supporting-style-inputtext-03-paragraph-indent: 0px;
357
+ --dds-font-supporting-style-inputtext-03-paragraph-spacing: 10px;
358
+ --dds-font-supporting-style-inputtext-03-text-case: none;
359
+ --dds-font-supporting-style-placeholdertext-01-font-size: 18px;
360
+ --dds-font-supporting-style-placeholdertext-01-text-decoration: none;
361
+ --dds-font-supporting-style-placeholdertext-01-font-family: 'IBM Plex Sans';
362
+ --dds-font-supporting-style-placeholdertext-01-font-weight: 400;
363
+ --dds-font-supporting-style-placeholdertext-01-font-style: italic;
364
+ --dds-font-supporting-style-placeholdertext-01-font-stretch: normal;
365
+ --dds-font-supporting-style-placeholdertext-01-letter-spacing: 0em;
366
+ --dds-font-supporting-style-placeholdertext-01-line-height: 1.5em;
367
+ --dds-font-supporting-style-placeholdertext-01-paragraph-indent: 0px;
368
+ --dds-font-supporting-style-placeholdertext-01-paragraph-spacing: 7px;
369
+ --dds-font-supporting-style-placeholdertext-01-text-case: none;
370
+ --dds-font-supporting-style-tiny-01-font-size: 12px;
371
+ --dds-font-supporting-style-tiny-01-text-decoration: none;
372
+ --dds-font-supporting-style-tiny-01-font-family: 'IBM Plex Sans';
373
+ --dds-font-supporting-style-tiny-01-font-weight: 400;
374
+ --dds-font-supporting-style-tiny-01-font-style: normal;
375
+ --dds-font-supporting-style-tiny-01-font-stretch: normal;
376
+ --dds-font-supporting-style-tiny-01-letter-spacing: 0.01em;
377
+ --dds-font-supporting-style-tiny-01-line-height: 1.5em;
378
+ --dds-font-supporting-style-tiny-01-paragraph-indent: 0px;
379
+ --dds-font-supporting-style-tiny-01-paragraph-spacing: 7px;
380
+ --dds-font-supporting-style-tiny-01-text-case: none;
381
+ --borders-dds-border-style-1-stroke-align: inside;
382
+ --borders-dds-border-style-1-stroke-miter-limit: 4;
383
+ --borders-dds-border-style-1-stroke-weight: 1px;
384
+ --borders-dds-border-style-1-stroke: rgba(119, 131, 140, 1);
385
+ --radii-dds-border-radius-1-radius: 2px;
386
+ --radii-dds-border-radius-1-radii-top-left: 2px;
387
+ --radii-dds-border-radius-1-radii-top-right: 2px;
388
+ --radii-dds-border-radius-1-radii-bottom-right: 2px;
389
+ --radii-dds-border-radius-1-radii-bottom-left: 2px;
390
+ --radii-dds-border-radius-2-radius: 4px;
391
+ --radii-dds-border-radius-2-radii-top-left: 4px;
392
+ --radii-dds-border-radius-2-radii-top-right: 4px;
393
+ --radii-dds-border-radius-2-radii-bottom-right: 4px;
394
+ --radii-dds-border-radius-2-radii-bottom-left: 4px;
395
+ --radii-dds-border-radius-3-radius: 8px;
396
+ --radii-dds-border-radius-3-radii-top-left: 8px;
397
+ --radii-dds-border-radius-3-radii-top-right: 8px;
398
+ --radii-dds-border-radius-3-radii-bottom-right: 8px;
399
+ --radii-dds-border-radius-3-radii-bottom-left: 8px;
400
+ --dds-innershadow-1-ondark: 1.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.5) inset;
401
+ --dds-innershadow-1-onlight: 1.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.1) inset;
402
+ --dds-innershadow-2-ondark: 2.0px 4.0px 8.0px 0px rgba(0, 0, 0, 0.5) inset;
403
+ --dds-innershadow-2-onlight: 2.0px 4.0px 8.0px 0px rgba(0, 0, 0, 0.1) inset;
404
+ --dds-shadow-1-ondark: 1.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.5);
405
+ --dds-shadow-1-onlight: 1.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.1);
406
+ --dds-shadow-2-ondark: 2.0px 4.0px 8.0px 0px rgba(0, 0, 0, 0.5);
407
+ --dds-shadow-2-onlight: 2.0px 4.0px 8.0px 0px rgba(0, 0, 0, 0.1);
408
+ --dds-shadow-3-ondark: 4.0px 8.0px 16.0px 0px rgba(0, 0, 0, 0.5);
409
+ --dds-shadow-3-onlight: 4.0px 8.0px 16.0px 0px rgba(0, 0, 0, 0.1);
410
+ --dds-shadow-4-ondark: 8.0px 16.0px 32.0px 0px rgba(0, 0, 0, 0.5);
411
+ --dds-shadow-4-onlight: 8.0px 16.0px 32.0px 0px rgba(0, 0, 0, 0.1);
412
+ --dds-grid-xs-0-599-pattern: columns;
413
+ --dds-grid-xs-0-599-gutter-size: 16px;
414
+ --dds-grid-xs-0-599-alignment: stretch;
415
+ --dds-grid-xs-0-599-count: 4;
416
+ --dds-grid-xs-0-599-offset: 16px;
417
+ --dds-grid-sm-600-959-pattern: columns;
418
+ --dds-grid-sm-600-959-gutter-size: 16px;
419
+ --dds-grid-sm-600-959-alignment: stretch;
420
+ --dds-grid-sm-600-959-count: 8;
421
+ --dds-grid-sm-600-959-offset: 16px;
422
+ --dds-grid-md-960-1279-pattern: columns;
423
+ --dds-grid-md-960-1279-gutter-size: 24px;
424
+ --dds-grid-md-960-1279-alignment: stretch;
425
+ --dds-grid-md-960-1279-count: 12;
426
+ --dds-grid-md-960-1279-offset: 24px;
427
+ --dds-grid-lg-1280-1919-pattern: columns;
428
+ --dds-grid-lg-1280-1919-gutter-size: 24px;
429
+ --dds-grid-lg-1280-1919-alignment: stretch;
430
+ --dds-grid-lg-1280-1919-count: 12;
431
+ --dds-grid-lg-1280-1919-offset: 24px;
432
+ --dds-grid-xl-1920-pattern: columns;
433
+ --dds-grid-xl-1920-gutter-size: 24px;
434
+ --dds-grid-xl-1920-alignment: stretch;
435
+ --dds-grid-xl-1920-count: 12;
436
+ --dds-grid-xl-1920-offset: 24px;
437
+ --dds-iconsize-medium: 24px;
438
+ --dds-iconsize-large: 40px;
439
+ --dds-iconsize-small: 16px;
440
+ --sizes-dds-spacing-local-x-3: 48px; /* 48px */
441
+ --sizes-dds-spacing-local-x-2-5: 40px; /* 40px */
442
+ --sizes-dds-spacing-local-x-2: 32px; /* 32px */
443
+ --sizes-dds-spacing-local-x-1-5: 24px; /* 24px */
444
+ --sizes-dds-spacing-local-x-1: 16px; /* 16px */
445
+ --sizes-dds-spacing-local-x-0-75: 12px; /* 12px */
446
+ --sizes-dds-spacing-local-x-0-5: 8px; /* 8px */
447
+ --sizes-dds-spacing-local-x-0-25: 4px; /* 4px */
448
+ --sizes-dds-spacing-local-x-0-125: 2px; /* 2px */
449
+ --sizes-dds-spacing-layout-x-10: 160px; /* 160px */
450
+ --sizes-dds-spacing-layout-x-6: 96px; /* 96px */
451
+ --sizes-dds-spacing-layout-x-4: 64px; /* 64px */
452
+ --sizes-dds-spacing-layout-x-3: 48px; /* 48px */
453
+ --sizes-dds-spacing-layout-x-2: 32px; /* 32px */
454
+ --sizes-dds-spacing-layout-x-1-5: 24px; /* 24px */
455
+ --sizes-dds-spacing-layout-x-1: 16px; /* 16px */
456
+ }