@norges-domstoler/dds-design-tokens 0.0.6 → 1.1.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 (40) hide show
  1. package/README.md +26 -22
  2. package/dist/css/border.css +5 -1
  3. package/dist/css/borderRadius.css +1 -1
  4. package/dist/css/breakpoints.css +12 -0
  5. package/dist/css/colors.css +1 -1
  6. package/dist/css/ddsTokens.css +32 -12
  7. package/dist/css/font.css +23 -12
  8. package/dist/css/grid.css +1 -1
  9. package/dist/css/iconSize.css +1 -1
  10. package/dist/css/innershadow.css +1 -1
  11. package/dist/css/outershadow.css +1 -1
  12. package/dist/css/spacing.css +33 -1
  13. package/dist/dds/build/js/border.d.ts +6 -1
  14. package/dist/dds/build/js/borderRadius.d.ts +1 -1
  15. package/dist/dds/build/js/breakpoints.d.ts +14 -0
  16. package/dist/dds/build/js/colors.d.ts +1 -1
  17. package/dist/dds/build/js/ddsTokens.d.ts +51 -22
  18. package/dist/dds/build/js/font.d.ts +36 -22
  19. package/dist/dds/build/js/fontObject.d.ts +205 -1
  20. package/dist/dds/build/js/grid.d.ts +1 -1
  21. package/dist/dds/build/js/iconSize.d.ts +1 -1
  22. package/dist/dds/build/js/innershadow.d.ts +1 -1
  23. package/dist/dds/build/js/outershadow.d.ts +1 -1
  24. package/dist/dds/build/js/spacing.d.ts +65 -1
  25. package/dist/dds/formattedStyles/fontPackages/fontPackages.d.ts +19 -0
  26. package/dist/index.es.js +492 -61
  27. package/dist/index.es.js.map +1 -1
  28. package/dist/index.js +492 -61
  29. package/dist/scss/_border.scss +5 -1
  30. package/dist/scss/_borderRadius.scss +1 -1
  31. package/dist/scss/_breakpoints.scss +9 -0
  32. package/dist/scss/_colors.scss +1 -1
  33. package/dist/scss/_ddsTokens.scss +32 -12
  34. package/dist/scss/_font.scss +24 -13
  35. package/dist/scss/_iconSize.scss +1 -1
  36. package/dist/scss/_innershadow.scss +1 -1
  37. package/dist/scss/_outershadow.scss +1 -1
  38. package/dist/scss/_spacing.scss +34 -2
  39. package/dist/src/ddsBaseTokens.d.ts +19 -0
  40. package/package.json +5 -3
package/README.md CHANGED
@@ -2,19 +2,36 @@
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
- Biblioteket inneholder design tokens brukt i [Domstolenes designsystem Elsa](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.
5
+ Biblioteket inneholder design tokens brukt i [Domstolenes designsystem Elsa](https://design.domstol.no/): farger, typografi, avstander skygger og størrelser. Design tokens kan brukes i domstolenes tjenester i bl.a. global styling og custom elementer. Ellers er det obligatorisk å bruke komponentbiblioteket [dds-components](https://www.npmjs.com/package/@norges-domstoler/dds-components).
6
6
 
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.
7
+ ## 🔍 Oversikt
8
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.
9
+ Design tokens består av base-tokens og referanse-tokens. Base-tokens er variabler genererte fra Figma styles og tilsvarer identiteten til domstolene definert i designprofilen.
10
+
11
+ Referanse-tokens (OBS! under arbeid) bruker base-tokens til å definere logikk for hvordan base-tokens skal brukes videre i komponenter og andre elementer. F.eks., referanse-tokens kan spesifisere hva fokusfargen skal være, eller font og farge for label i skjemakomponenter. Tanken med referanse-tokens er å gjøre det enklere å gjenbruke koden og eventuelt endre på styling i komponenter ved å endre kun på tokens, uten å røre CSS inni komponentene.
12
+
13
+ ### 📃 Tilgjengelige base-tokens
14
+
15
+ - colors
16
+ - fontPackages (kun JS)
17
+ - font
18
+ - grid
19
+ - spacing
20
+ - iconSizes
21
+ - borderRadius
22
+ - border
23
+ - outerShadow
24
+ - innerShadow
10
25
 
11
- ## Installasjon
26
+ ## 📦 Installasjon
12
27
 
13
28
  ```sh
14
29
  npm install @norges-domstoler/dds-design-tokens
15
30
  ```
16
31
 
17
- ## Bruk
32
+ ## 🔨 Bruk
33
+
34
+ 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.
18
35
 
19
36
  ### JS
20
37
 
@@ -55,20 +72,7 @@ body {
55
72
  }
56
73
  ```
57
74
 
58
- ## Tilgjengelige base-tokens
59
-
60
- - colors
61
- - fontPackages (kun JS)
62
- - font
63
- - grid
64
- - spacing
65
- - iconSizes
66
- - borderRadius
67
- - border
68
- - outerShadow
69
- - innerShadow
70
-
71
- ## For bidragsytere
75
+ ## ⌨️ For bidragsytere
72
76
 
73
77
  Bilioteket ligger under `/tokens`.
74
78
 
@@ -81,9 +85,9 @@ cd tokens/dds
81
85
  npm install -D style-dictionary
82
86
  ```
83
87
 
84
- ### Bruk
88
+ ### Generere design tokens i kode
85
89
 
86
- 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`:
90
+ Biblioteket bruker [Style-dictionary](https://amzn.github.io/style-dictionary) for å generere design 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`:
87
91
 
88
92
  ```
89
93
  npm run build-tokens
@@ -93,4 +97,4 @@ Genererte variabler ligger i `/dds/build` organisert etter plattform.
93
97
 
94
98
  ### Build
95
99
 
96
- Det brukes custom build for generering av variabler, den ligger i `/dds/build.js`. I tillegg spesifiserer `/dds/config.json` hva output skal være og mappestruktur for den etter `npm run build` kjøres.
100
+ Det brukes custom build for generering av variabler, den ligger i `/dds/build.js`. I tillegg spesifiserer `/dds/config.json` hva output skal være og mappestruktur for den etter `npm run build-tokens` kjøres.
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -8,6 +8,10 @@
8
8
  --borders-dds-border-focus-base-stroke-miter-limit: 4;
9
9
  --borders-dds-border-focus-base-stroke-weight: 1px;
10
10
  --borders-dds-border-focus-base-stroke: rgba(98, 90, 31, 1);
11
+ --borders-dds-border-focus-ondark-stroke-align: inside;
12
+ --borders-dds-border-focus-ondark-stroke-miter-limit: 4;
13
+ --borders-dds-border-focus-ondark-stroke-weight: 1px;
14
+ --borders-dds-border-focus-ondark-stroke: rgba(251, 243, 184, 1);
11
15
  --borders-dds-border-focus-inputfield-stroke-align: inside;
12
16
  --borders-dds-border-focus-inputfield-stroke-miter-limit: 4;
13
17
  --borders-dds-border-focus-inputfield-stroke-weight: 2px;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
+ */
5
+
6
+ :root {
7
+ --dds-breakpoint-xs: 1px;
8
+ --dds-breakpoint-sm: 600px;
9
+ --dds-breakpoint-md: 960px;
10
+ --dds-breakpoint-lg: 1280px;
11
+ --dds-breakpoint-xl: 1920px;
12
+ }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,9 +1,14 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --dds-breakpoint-xs: 1px;
8
+ --dds-breakpoint-sm: 600px;
9
+ --dds-breakpoint-md: 960px;
10
+ --dds-breakpoint-lg: 1280px;
11
+ --dds-breakpoint-xl: 1920px;
7
12
  --dds-color-primary-lightest: rgba(234, 239, 244, 1);
8
13
  --dds-color-primary-lighter: rgba(172, 187, 198, 1);
9
14
  --dds-color-primary-light: rgba(79, 106, 126, 1);
@@ -70,18 +75,18 @@
70
75
  --dds-color-info-dark: rgba(94, 148, 184, 1);
71
76
  --dds-color-info-darker: rgba(70, 111, 138, 1);
72
77
  --dds-color-info-darkest: rgba(47, 74, 92, 1);
73
- --dds-font-heading-sans-01-font-size: 14px;
78
+ --dds-font-heading-sans-01-font-size: 16px;
74
79
  --dds-font-heading-sans-01-text-decoration: none;
75
80
  --dds-font-heading-sans-01-font-family: 'IBM Plex Sans';
76
81
  --dds-font-heading-sans-01-font-weight: 600;
77
82
  --dds-font-heading-sans-01-font-style: normal;
78
83
  --dds-font-heading-sans-01-font-stretch: normal;
79
- --dds-font-heading-sans-01-letter-spacing: 0.01em;
84
+ --dds-font-heading-sans-01-letter-spacing: 0em;
80
85
  --dds-font-heading-sans-01-line-height: 1.5em;
81
86
  --dds-font-heading-sans-01-paragraph-indent: 0px;
82
- --dds-font-heading-sans-01-paragraph-spacing: 14px;
87
+ --dds-font-heading-sans-01-paragraph-spacing: 6.400000095367432px;
83
88
  --dds-font-heading-sans-01-text-case: none;
84
- --dds-font-heading-sans-02-font-size: 16px;
89
+ --dds-font-heading-sans-02-font-size: 18px;
85
90
  --dds-font-heading-sans-02-text-decoration: none;
86
91
  --dds-font-heading-sans-02-font-family: 'IBM Plex Sans';
87
92
  --dds-font-heading-sans-02-font-weight: 600;
@@ -90,7 +95,7 @@
90
95
  --dds-font-heading-sans-02-letter-spacing: 0em;
91
96
  --dds-font-heading-sans-02-line-height: 1.5em;
92
97
  --dds-font-heading-sans-02-paragraph-indent: 0px;
93
- --dds-font-heading-sans-02-paragraph-spacing: 16px;
98
+ --dds-font-heading-sans-02-paragraph-spacing: 7.199999809265137px;
94
99
  --dds-font-heading-sans-02-text-case: none;
95
100
  --dds-font-heading-sans-03-font-size: 24px;
96
101
  --dds-font-heading-sans-03-text-decoration: none;
@@ -101,7 +106,7 @@
101
106
  --dds-font-heading-sans-03-letter-spacing: 0em;
102
107
  --dds-font-heading-sans-03-line-height: 1.35em;
103
108
  --dds-font-heading-sans-03-paragraph-indent: 0px;
104
- --dds-font-heading-sans-03-paragraph-spacing: 16px;
109
+ --dds-font-heading-sans-03-paragraph-spacing: 9.600000381469727px;
105
110
  --dds-font-heading-sans-03-text-case: none;
106
111
  --dds-font-heading-sans-04-font-size: 32px;
107
112
  --dds-font-heading-sans-04-text-decoration: none;
@@ -112,7 +117,7 @@
112
117
  --dds-font-heading-sans-04-letter-spacing: 0em;
113
118
  --dds-font-heading-sans-04-line-height: 1.35em;
114
119
  --dds-font-heading-sans-04-paragraph-indent: 0px;
115
- --dds-font-heading-sans-04-paragraph-spacing: 21px;
120
+ --dds-font-heading-sans-04-paragraph-spacing: 12.800000190734863px;
116
121
  --dds-font-heading-sans-04-text-case: none;
117
122
  --dds-font-heading-sans-05-font-size: 40px;
118
123
  --dds-font-heading-sans-05-text-decoration: none;
@@ -123,7 +128,7 @@
123
128
  --dds-font-heading-sans-05-letter-spacing: -0.01em;
124
129
  --dds-font-heading-sans-05-line-height: 1.35em;
125
130
  --dds-font-heading-sans-05-paragraph-indent: 0px;
126
- --dds-font-heading-sans-05-paragraph-spacing: 26px;
131
+ --dds-font-heading-sans-05-paragraph-spacing: 16px;
127
132
  --dds-font-heading-sans-05-text-case: none;
128
133
  --dds-font-heading-sans-06-font-size: 48px;
129
134
  --dds-font-heading-sans-06-text-decoration: none;
@@ -134,7 +139,7 @@
134
139
  --dds-font-heading-sans-06-letter-spacing: -0.01em;
135
140
  --dds-font-heading-sans-06-line-height: 1.2em;
136
141
  --dds-font-heading-sans-06-paragraph-indent: 0px;
137
- --dds-font-heading-sans-06-paragraph-spacing: 24px;
142
+ --dds-font-heading-sans-06-paragraph-spacing: 19.200000762939453px;
138
143
  --dds-font-heading-sans-06-text-case: none;
139
144
  --dds-font-heading-sans-07-font-size: 64px;
140
145
  --dds-font-heading-sans-07-text-decoration: none;
@@ -145,7 +150,7 @@
145
150
  --dds-font-heading-sans-07-letter-spacing: -0.01em;
146
151
  --dds-font-heading-sans-07-line-height: 1.2em;
147
152
  --dds-font-heading-sans-07-paragraph-indent: 0px;
148
- --dds-font-heading-sans-07-paragraph-spacing: 32px;
153
+ --dds-font-heading-sans-07-paragraph-spacing: 25.600000381469727px;
149
154
  --dds-font-heading-sans-07-text-case: none;
150
155
  --dds-font-heading-sans-08-font-size: 80px;
151
156
  --dds-font-heading-sans-08-text-decoration: none;
@@ -156,7 +161,7 @@
156
161
  --dds-font-heading-sans-08-letter-spacing: -0.01em;
157
162
  --dds-font-heading-sans-08-line-height: 1.2em;
158
163
  --dds-font-heading-sans-08-paragraph-indent: 0px;
159
- --dds-font-heading-sans-08-paragraph-spacing: 40px;
164
+ --dds-font-heading-sans-08-paragraph-spacing: 32px;
160
165
  --dds-font-heading-sans-08-text-case: none;
161
166
  --dds-font-body-sans-01-font-size: 14px;
162
167
  --dds-font-body-sans-01-text-decoration: none;
@@ -378,10 +383,25 @@
378
383
  --dds-font-supporting-style-tiny-01-paragraph-indent: 0px;
379
384
  --dds-font-supporting-style-tiny-01-paragraph-spacing: 12px;
380
385
  --dds-font-supporting-style-tiny-01-text-case: none;
386
+ --dds-font-supporting-style-tiny-02-font-size: 12px;
387
+ --dds-font-supporting-style-tiny-02-text-decoration: none;
388
+ --dds-font-supporting-style-tiny-02-font-family: 'IBM Plex Sans';
389
+ --dds-font-supporting-style-tiny-02-font-weight: 300;
390
+ --dds-font-supporting-style-tiny-02-font-style: normal;
391
+ --dds-font-supporting-style-tiny-02-font-stretch: normal;
392
+ --dds-font-supporting-style-tiny-02-letter-spacing: 0.01em;
393
+ --dds-font-supporting-style-tiny-02-line-height: 1.5em;
394
+ --dds-font-supporting-style-tiny-02-paragraph-indent: 0px;
395
+ --dds-font-supporting-style-tiny-02-paragraph-spacing: 12px;
396
+ --dds-font-supporting-style-tiny-02-text-case: none;
381
397
  --borders-dds-border-focus-base-stroke-align: inside;
382
398
  --borders-dds-border-focus-base-stroke-miter-limit: 4;
383
399
  --borders-dds-border-focus-base-stroke-weight: 1px;
384
400
  --borders-dds-border-focus-base-stroke: rgba(98, 90, 31, 1);
401
+ --borders-dds-border-focus-ondark-stroke-align: inside;
402
+ --borders-dds-border-focus-ondark-stroke-miter-limit: 4;
403
+ --borders-dds-border-focus-ondark-stroke-weight: 1px;
404
+ --borders-dds-border-focus-ondark-stroke: rgba(251, 243, 184, 1);
385
405
  --borders-dds-border-focus-inputfield-stroke-align: inside;
386
406
  --borders-dds-border-focus-inputfield-stroke-miter-limit: 4;
387
407
  --borders-dds-border-focus-inputfield-stroke-weight: 2px;
package/dist/css/font.css CHANGED
@@ -1,21 +1,21 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --dds-font-heading-sans-01-font-size: 14px;
7
+ --dds-font-heading-sans-01-font-size: 16px;
8
8
  --dds-font-heading-sans-01-text-decoration: none;
9
9
  --dds-font-heading-sans-01-font-family: 'IBM Plex Sans';
10
10
  --dds-font-heading-sans-01-font-weight: 600;
11
11
  --dds-font-heading-sans-01-font-style: normal;
12
12
  --dds-font-heading-sans-01-font-stretch: normal;
13
- --dds-font-heading-sans-01-letter-spacing: 0.01em;
13
+ --dds-font-heading-sans-01-letter-spacing: 0em;
14
14
  --dds-font-heading-sans-01-line-height: 1.5em;
15
15
  --dds-font-heading-sans-01-paragraph-indent: 0px;
16
- --dds-font-heading-sans-01-paragraph-spacing: 14px;
16
+ --dds-font-heading-sans-01-paragraph-spacing: 6.400000095367432px;
17
17
  --dds-font-heading-sans-01-text-case: none;
18
- --dds-font-heading-sans-02-font-size: 16px;
18
+ --dds-font-heading-sans-02-font-size: 18px;
19
19
  --dds-font-heading-sans-02-text-decoration: none;
20
20
  --dds-font-heading-sans-02-font-family: 'IBM Plex Sans';
21
21
  --dds-font-heading-sans-02-font-weight: 600;
@@ -24,7 +24,7 @@
24
24
  --dds-font-heading-sans-02-letter-spacing: 0em;
25
25
  --dds-font-heading-sans-02-line-height: 1.5em;
26
26
  --dds-font-heading-sans-02-paragraph-indent: 0px;
27
- --dds-font-heading-sans-02-paragraph-spacing: 16px;
27
+ --dds-font-heading-sans-02-paragraph-spacing: 7.199999809265137px;
28
28
  --dds-font-heading-sans-02-text-case: none;
29
29
  --dds-font-heading-sans-03-font-size: 24px;
30
30
  --dds-font-heading-sans-03-text-decoration: none;
@@ -35,7 +35,7 @@
35
35
  --dds-font-heading-sans-03-letter-spacing: 0em;
36
36
  --dds-font-heading-sans-03-line-height: 1.35em;
37
37
  --dds-font-heading-sans-03-paragraph-indent: 0px;
38
- --dds-font-heading-sans-03-paragraph-spacing: 16px;
38
+ --dds-font-heading-sans-03-paragraph-spacing: 9.600000381469727px;
39
39
  --dds-font-heading-sans-03-text-case: none;
40
40
  --dds-font-heading-sans-04-font-size: 32px;
41
41
  --dds-font-heading-sans-04-text-decoration: none;
@@ -46,7 +46,7 @@
46
46
  --dds-font-heading-sans-04-letter-spacing: 0em;
47
47
  --dds-font-heading-sans-04-line-height: 1.35em;
48
48
  --dds-font-heading-sans-04-paragraph-indent: 0px;
49
- --dds-font-heading-sans-04-paragraph-spacing: 21px;
49
+ --dds-font-heading-sans-04-paragraph-spacing: 12.800000190734863px;
50
50
  --dds-font-heading-sans-04-text-case: none;
51
51
  --dds-font-heading-sans-05-font-size: 40px;
52
52
  --dds-font-heading-sans-05-text-decoration: none;
@@ -57,7 +57,7 @@
57
57
  --dds-font-heading-sans-05-letter-spacing: -0.01em;
58
58
  --dds-font-heading-sans-05-line-height: 1.35em;
59
59
  --dds-font-heading-sans-05-paragraph-indent: 0px;
60
- --dds-font-heading-sans-05-paragraph-spacing: 26px;
60
+ --dds-font-heading-sans-05-paragraph-spacing: 16px;
61
61
  --dds-font-heading-sans-05-text-case: none;
62
62
  --dds-font-heading-sans-06-font-size: 48px;
63
63
  --dds-font-heading-sans-06-text-decoration: none;
@@ -68,7 +68,7 @@
68
68
  --dds-font-heading-sans-06-letter-spacing: -0.01em;
69
69
  --dds-font-heading-sans-06-line-height: 1.2em;
70
70
  --dds-font-heading-sans-06-paragraph-indent: 0px;
71
- --dds-font-heading-sans-06-paragraph-spacing: 24px;
71
+ --dds-font-heading-sans-06-paragraph-spacing: 19.200000762939453px;
72
72
  --dds-font-heading-sans-06-text-case: none;
73
73
  --dds-font-heading-sans-07-font-size: 64px;
74
74
  --dds-font-heading-sans-07-text-decoration: none;
@@ -79,7 +79,7 @@
79
79
  --dds-font-heading-sans-07-letter-spacing: -0.01em;
80
80
  --dds-font-heading-sans-07-line-height: 1.2em;
81
81
  --dds-font-heading-sans-07-paragraph-indent: 0px;
82
- --dds-font-heading-sans-07-paragraph-spacing: 32px;
82
+ --dds-font-heading-sans-07-paragraph-spacing: 25.600000381469727px;
83
83
  --dds-font-heading-sans-07-text-case: none;
84
84
  --dds-font-heading-sans-08-font-size: 80px;
85
85
  --dds-font-heading-sans-08-text-decoration: none;
@@ -90,7 +90,7 @@
90
90
  --dds-font-heading-sans-08-letter-spacing: -0.01em;
91
91
  --dds-font-heading-sans-08-line-height: 1.2em;
92
92
  --dds-font-heading-sans-08-paragraph-indent: 0px;
93
- --dds-font-heading-sans-08-paragraph-spacing: 40px;
93
+ --dds-font-heading-sans-08-paragraph-spacing: 32px;
94
94
  --dds-font-heading-sans-08-text-case: none;
95
95
  --dds-font-body-sans-01-font-size: 14px;
96
96
  --dds-font-body-sans-01-text-decoration: none;
@@ -312,4 +312,15 @@
312
312
  --dds-font-supporting-style-tiny-01-paragraph-indent: 0px;
313
313
  --dds-font-supporting-style-tiny-01-paragraph-spacing: 12px;
314
314
  --dds-font-supporting-style-tiny-01-text-case: none;
315
+ --dds-font-supporting-style-tiny-02-font-size: 12px;
316
+ --dds-font-supporting-style-tiny-02-text-decoration: none;
317
+ --dds-font-supporting-style-tiny-02-font-family: 'IBM Plex Sans';
318
+ --dds-font-supporting-style-tiny-02-font-weight: 300;
319
+ --dds-font-supporting-style-tiny-02-font-style: normal;
320
+ --dds-font-supporting-style-tiny-02-font-stretch: normal;
321
+ --dds-font-supporting-style-tiny-02-letter-spacing: 0.01em;
322
+ --dds-font-supporting-style-tiny-02-line-height: 1.5em;
323
+ --dds-font-supporting-style-tiny-02-paragraph-indent: 0px;
324
+ --dds-font-supporting-style-tiny-02-paragraph-spacing: 12px;
325
+ --dds-font-supporting-style-tiny-02-text-case: none;
315
326
  }
package/dist/css/grid.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,4 +20,36 @@
20
20
  --sizes-dds-spacing-layout-x-2: 32px; /* 32px */
21
21
  --sizes-dds-spacing-layout-x-1-5: 24px; /* 24px */
22
22
  --sizes-dds-spacing-layout-x-1: 16px; /* 16px */
23
+ --spacing-dds-spacing-padding-top-heading-sans-01-top: 11.2px;
24
+ --spacing-dds-spacing-padding-top-heading-sans-01-right: 0px;
25
+ --spacing-dds-spacing-padding-top-heading-sans-01-bottom: 0px;
26
+ --spacing-dds-spacing-padding-top-heading-sans-01-left: 0px;
27
+ --spacing-dds-spacing-padding-top-heading-sans-02-top: 12.6px;
28
+ --spacing-dds-spacing-padding-top-heading-sans-02-right: 0px;
29
+ --spacing-dds-spacing-padding-top-heading-sans-02-bottom: 0px;
30
+ --spacing-dds-spacing-padding-top-heading-sans-02-left: 0px;
31
+ --spacing-dds-spacing-padding-top-heading-sans-03-top: 16.8px;
32
+ --spacing-dds-spacing-padding-top-heading-sans-03-right: 0px;
33
+ --spacing-dds-spacing-padding-top-heading-sans-03-bottom: 0px;
34
+ --spacing-dds-spacing-padding-top-heading-sans-03-left: 0px;
35
+ --spacing-dds-spacing-padding-top-heading-sans-04-top: 22.4px;
36
+ --spacing-dds-spacing-padding-top-heading-sans-04-right: 0px;
37
+ --spacing-dds-spacing-padding-top-heading-sans-04-bottom: 0px;
38
+ --spacing-dds-spacing-padding-top-heading-sans-04-left: 0px;
39
+ --spacing-dds-spacing-padding-top-heading-sans-05-top: 28px;
40
+ --spacing-dds-spacing-padding-top-heading-sans-05-right: 0px;
41
+ --spacing-dds-spacing-padding-top-heading-sans-05-bottom: 0px;
42
+ --spacing-dds-spacing-padding-top-heading-sans-05-left: 0px;
43
+ --spacing-dds-spacing-padding-top-heading-sans-06-top: 33.6px;
44
+ --spacing-dds-spacing-padding-top-heading-sans-06-right: 0px;
45
+ --spacing-dds-spacing-padding-top-heading-sans-06-bottom: 0px;
46
+ --spacing-dds-spacing-padding-top-heading-sans-06-left: 0px;
47
+ --spacing-dds-spacing-padding-top-heading-sans-07-top: 44.8px;
48
+ --spacing-dds-spacing-padding-top-heading-sans-07-right: 0px;
49
+ --spacing-dds-spacing-padding-top-heading-sans-07-bottom: 0px;
50
+ --spacing-dds-spacing-padding-top-heading-sans-07-left: 0px;
51
+ --spacing-dds-spacing-padding-top-heading-sans-08-top: 56px;
52
+ --spacing-dds-spacing-padding-top-heading-sans-08-right: 0px;
53
+ --spacing-dds-spacing-padding-top-heading-sans-08-bottom: 0px;
54
+ --spacing-dds-spacing-padding-top-heading-sans-08-left: 0px;
23
55
  }
@@ -1,12 +1,17 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
  export declare const BordersDdsBorderFocusBaseStrokeAlign = "inside";
6
6
  export declare const BordersDdsBorderFocusBaseStrokeMiterLimit = 4;
7
7
  export declare const BordersDdsBorderFocusBaseStrokeWeight = "1px";
8
8
  export declare const BordersDdsBorderFocusBaseStrokeWeightNumberPx = 1;
9
9
  export declare const BordersDdsBorderFocusBaseStroke = "rgba(98, 90, 31, 1)";
10
+ export declare const BordersDdsBorderFocusOndarkStrokeAlign = "inside";
11
+ export declare const BordersDdsBorderFocusOndarkStrokeMiterLimit = 4;
12
+ export declare const BordersDdsBorderFocusOndarkStrokeWeight = "1px";
13
+ export declare const BordersDdsBorderFocusOndarkStrokeWeightNumberPx = 1;
14
+ export declare const BordersDdsBorderFocusOndarkStroke = "rgba(251, 243, 184, 1)";
10
15
  export declare const BordersDdsBorderFocusInputfieldStrokeAlign = "inside";
11
16
  export declare const BordersDdsBorderFocusInputfieldStrokeMiterLimit = 4;
12
17
  export declare const BordersDdsBorderFocusInputfieldStrokeWeight = "2px";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
  export declare const RadiiDdsBorderRadius1Radius = "2px";
6
6
  export declare const RadiiDdsBorderRadius1RadiusNumberPx = 2;
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
+ */
5
+ export declare const DdsBreakpointXs = "1px";
6
+ export declare const DdsBreakpointXsNumberPx = 1;
7
+ export declare const DdsBreakpointSm = "600px";
8
+ export declare const DdsBreakpointSmNumberPx = 600;
9
+ export declare const DdsBreakpointMd = "960px";
10
+ export declare const DdsBreakpointMdNumberPx = 960;
11
+ export declare const DdsBreakpointLg = "1280px";
12
+ export declare const DdsBreakpointLgNumberPx = 1280;
13
+ export declare const DdsBreakpointXl = "1920px";
14
+ export declare const DdsBreakpointXlNumberPx = 1920;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 11 Feb 2022 13:10:58 GMT
3
+ * Generated on Wed, 27 Apr 2022 10:41:33 GMT
4
4
  */
5
5
  export declare const DdsColorPrimaryLightest = "rgba(234, 239, 244, 1)";
6
6
  export declare const DdsColorPrimaryLighter = "rgba(172, 187, 198, 1)";