@norges-domstoler/dds-design-tokens 5.0.0 → 6.0.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.
- package/README.md +26 -17
- package/dist/cjs/dds/build/js/ddsTokens.d.ts +412 -628
- package/dist/cjs/dds/index.d.ts +0 -9
- package/dist/cjs/index.js +826 -9882
- package/dist/cjs/src/index.d.ts +414 -2
- package/dist/css/ddsTokens.css +218 -375
- package/dist/dds/build/js/ddsTokens.d.ts +412 -628
- package/dist/dds/build/js/ddsTokens.js +414 -629
- package/dist/dds/index.d.ts +0 -9
- package/dist/index.js +5 -2
- package/dist/scss/_ddsTokens.scss +214 -375
- package/dist/src/index.d.ts +414 -2
- package/package.json +8 -6
- package/dist/cjs/dds/build/js/borderRadius.d.ts +0 -10
- package/dist/cjs/dds/build/js/breakpoints.d.ts +0 -10
- package/dist/cjs/dds/build/js/colors.d.ts +0 -155
- package/dist/cjs/dds/build/js/font.d.ts +0 -400
- package/dist/cjs/dds/build/js/fontObject.d.ts +0 -5714
- package/dist/cjs/dds/build/js/grid.d.ts +0 -15
- package/dist/cjs/dds/build/js/iconSize.d.ts +0 -6
- package/dist/cjs/dds/build/js/outershadow.d.ts +0 -12
- package/dist/cjs/dds/build/js/spacing.d.ts +0 -28
- package/dist/cjs/dds/formattedStyles/fontPackages/fontPackages.d.ts +0 -477
- package/dist/cjs/dds/formattedStyles/fontPackages/index.d.ts +0 -1
- package/dist/cjs/dds/utils/fontPackageFormatter.d.ts +0 -22
- package/dist/cjs/src/ddsBaseTokens.d.ts +0 -1118
- package/dist/cjs/src/ddsReferenceTokens.d.ts +0 -45
- package/dist/css/borderRadius.css +0 -12
- package/dist/css/breakpoints.css +0 -12
- package/dist/css/colors.css +0 -158
- package/dist/css/font.css +0 -282
- package/dist/css/grid.css +0 -17
- package/dist/css/iconSize.css +0 -10
- package/dist/css/outershadow.css +0 -15
- package/dist/css/spacing.css +0 -21
- package/dist/dds/build/js/borderRadius.d.ts +0 -10
- package/dist/dds/build/js/borderRadius.js +0 -12
- package/dist/dds/build/js/breakpoints.d.ts +0 -10
- package/dist/dds/build/js/breakpoints.js +0 -12
- package/dist/dds/build/js/colors.d.ts +0 -155
- package/dist/dds/build/js/colors.js +0 -157
- package/dist/dds/build/js/font.d.ts +0 -400
- package/dist/dds/build/js/font.js +0 -402
- package/dist/dds/build/js/fontObject.d.ts +0 -5714
- package/dist/dds/build/js/fontObject.js +0 -7216
- package/dist/dds/build/js/grid.d.ts +0 -15
- package/dist/dds/build/js/grid.js +0 -17
- package/dist/dds/build/js/iconSize.d.ts +0 -6
- package/dist/dds/build/js/iconSize.js +0 -8
- package/dist/dds/build/js/outershadow.d.ts +0 -12
- package/dist/dds/build/js/outershadow.js +0 -14
- package/dist/dds/build/js/spacing.d.ts +0 -28
- package/dist/dds/build/js/spacing.js +0 -30
- package/dist/dds/formattedStyles/fontPackages/fontPackages.d.ts +0 -477
- package/dist/dds/formattedStyles/fontPackages/fontPackages.js +0 -33
- package/dist/dds/formattedStyles/fontPackages/index.d.ts +0 -1
- package/dist/dds/utils/fontPackageFormatter.d.ts +0 -22
- package/dist/dds/utils/fontPackageFormatter.js +0 -23
- package/dist/ddsBaseTokens.js +0 -25
- package/dist/ddsReferenceTokens.js +0 -45
- package/dist/scss/_borderRadius.scss +0 -9
- package/dist/scss/_breakpoints.scss +0 -9
- package/dist/scss/_colors.scss +0 -155
- package/dist/scss/_font.scss +0 -279
- package/dist/scss/_iconSize.scss +0 -7
- package/dist/scss/_outershadow.scss +0 -12
- package/dist/scss/_spacing.scss +0 -18
- package/dist/src/ddsBaseTokens.d.ts +0 -1118
- package/dist/src/ddsReferenceTokens.d.ts +0 -45
|
@@ -1,294 +1,10 @@
|
|
|
1
1
|
|
|
2
|
-
// Do not edit directly
|
|
3
|
-
// Generated on Mon, 10 Jun 2024 11:27:49 GMT
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
4
3
|
|
|
5
|
-
$dds-font-heading-sans-01-font-size: 16px;
|
|
6
|
-
$dds-font-heading-sans-01-text-decoration: none;
|
|
7
|
-
$dds-font-heading-sans-01-font-family: 'IBM Plex Sans';
|
|
8
|
-
$dds-font-heading-sans-01-font-weight: 600;
|
|
9
|
-
$dds-font-heading-sans-01-font-style: normal;
|
|
10
|
-
$dds-font-heading-sans-01-font-stretch: normal;
|
|
11
|
-
$dds-font-heading-sans-01-letter-spacing: 0em;
|
|
12
|
-
$dds-font-heading-sans-01-line-height: 1.5em;
|
|
13
|
-
$dds-font-heading-sans-01-paragraph-indent: 0px;
|
|
14
|
-
$dds-font-heading-sans-01-paragraph-spacing: 6.400000095367432px;
|
|
15
|
-
$dds-font-heading-sans-01-text-case: none;
|
|
16
|
-
$dds-font-heading-sans-02-font-size: 18px;
|
|
17
|
-
$dds-font-heading-sans-02-text-decoration: none;
|
|
18
|
-
$dds-font-heading-sans-02-font-family: 'IBM Plex Sans';
|
|
19
|
-
$dds-font-heading-sans-02-font-weight: 600;
|
|
20
|
-
$dds-font-heading-sans-02-font-style: normal;
|
|
21
|
-
$dds-font-heading-sans-02-font-stretch: normal;
|
|
22
|
-
$dds-font-heading-sans-02-letter-spacing: 0em;
|
|
23
|
-
$dds-font-heading-sans-02-line-height: 1.5em;
|
|
24
|
-
$dds-font-heading-sans-02-paragraph-indent: 0px;
|
|
25
|
-
$dds-font-heading-sans-02-paragraph-spacing: 7.199999809265137px;
|
|
26
|
-
$dds-font-heading-sans-02-text-case: none;
|
|
27
|
-
$dds-font-heading-sans-03-font-size: 24px;
|
|
28
|
-
$dds-font-heading-sans-03-text-decoration: none;
|
|
29
|
-
$dds-font-heading-sans-03-font-family: 'IBM Plex Sans';
|
|
30
|
-
$dds-font-heading-sans-03-font-weight: 400;
|
|
31
|
-
$dds-font-heading-sans-03-font-style: normal;
|
|
32
|
-
$dds-font-heading-sans-03-font-stretch: normal;
|
|
33
|
-
$dds-font-heading-sans-03-letter-spacing: 0em;
|
|
34
|
-
$dds-font-heading-sans-03-line-height: 1.35em;
|
|
35
|
-
$dds-font-heading-sans-03-paragraph-indent: 0px;
|
|
36
|
-
$dds-font-heading-sans-03-paragraph-spacing: 9.600000381469727px;
|
|
37
|
-
$dds-font-heading-sans-03-text-case: none;
|
|
38
|
-
$dds-font-heading-sans-04-font-size: 32px;
|
|
39
|
-
$dds-font-heading-sans-04-text-decoration: none;
|
|
40
|
-
$dds-font-heading-sans-04-font-family: 'IBM Plex Sans';
|
|
41
|
-
$dds-font-heading-sans-04-font-weight: 400;
|
|
42
|
-
$dds-font-heading-sans-04-font-style: normal;
|
|
43
|
-
$dds-font-heading-sans-04-font-stretch: normal;
|
|
44
|
-
$dds-font-heading-sans-04-letter-spacing: 0em;
|
|
45
|
-
$dds-font-heading-sans-04-line-height: 1.35em;
|
|
46
|
-
$dds-font-heading-sans-04-paragraph-indent: 0px;
|
|
47
|
-
$dds-font-heading-sans-04-paragraph-spacing: 12.800000190734863px;
|
|
48
|
-
$dds-font-heading-sans-04-text-case: none;
|
|
49
|
-
$dds-font-heading-sans-05-font-size: 40px;
|
|
50
|
-
$dds-font-heading-sans-05-text-decoration: none;
|
|
51
|
-
$dds-font-heading-sans-05-font-family: 'IBM Plex Sans';
|
|
52
|
-
$dds-font-heading-sans-05-font-weight: 300;
|
|
53
|
-
$dds-font-heading-sans-05-font-style: normal;
|
|
54
|
-
$dds-font-heading-sans-05-font-stretch: normal;
|
|
55
|
-
$dds-font-heading-sans-05-letter-spacing: -0.01em;
|
|
56
|
-
$dds-font-heading-sans-05-line-height: 1.35em;
|
|
57
|
-
$dds-font-heading-sans-05-paragraph-indent: 0px;
|
|
58
|
-
$dds-font-heading-sans-05-paragraph-spacing: 16px;
|
|
59
|
-
$dds-font-heading-sans-05-text-case: none;
|
|
60
|
-
$dds-font-heading-sans-06-font-size: 48px;
|
|
61
|
-
$dds-font-heading-sans-06-text-decoration: none;
|
|
62
|
-
$dds-font-heading-sans-06-font-family: 'IBM Plex Sans';
|
|
63
|
-
$dds-font-heading-sans-06-font-weight: 300;
|
|
64
|
-
$dds-font-heading-sans-06-font-style: normal;
|
|
65
|
-
$dds-font-heading-sans-06-font-stretch: normal;
|
|
66
|
-
$dds-font-heading-sans-06-letter-spacing: -0.01em;
|
|
67
|
-
$dds-font-heading-sans-06-line-height: 1.2em;
|
|
68
|
-
$dds-font-heading-sans-06-paragraph-indent: 0px;
|
|
69
|
-
$dds-font-heading-sans-06-paragraph-spacing: 19.200000762939453px;
|
|
70
|
-
$dds-font-heading-sans-06-text-case: none;
|
|
71
|
-
$dds-font-heading-sans-07-font-size: 64px;
|
|
72
|
-
$dds-font-heading-sans-07-text-decoration: none;
|
|
73
|
-
$dds-font-heading-sans-07-font-family: 'IBM Plex Sans';
|
|
74
|
-
$dds-font-heading-sans-07-font-weight: 300;
|
|
75
|
-
$dds-font-heading-sans-07-font-style: normal;
|
|
76
|
-
$dds-font-heading-sans-07-font-stretch: normal;
|
|
77
|
-
$dds-font-heading-sans-07-letter-spacing: -0.01em;
|
|
78
|
-
$dds-font-heading-sans-07-line-height: 1.2em;
|
|
79
|
-
$dds-font-heading-sans-07-paragraph-indent: 0px;
|
|
80
|
-
$dds-font-heading-sans-07-paragraph-spacing: 25.600000381469727px;
|
|
81
|
-
$dds-font-heading-sans-07-text-case: none;
|
|
82
|
-
$dds-font-heading-sans-08-font-size: 80px;
|
|
83
|
-
$dds-font-heading-sans-08-text-decoration: none;
|
|
84
|
-
$dds-font-heading-sans-08-font-family: 'IBM Plex Sans';
|
|
85
|
-
$dds-font-heading-sans-08-font-weight: 300;
|
|
86
|
-
$dds-font-heading-sans-08-font-style: normal;
|
|
87
|
-
$dds-font-heading-sans-08-font-stretch: normal;
|
|
88
|
-
$dds-font-heading-sans-08-letter-spacing: -0.01em;
|
|
89
|
-
$dds-font-heading-sans-08-line-height: 1.2em;
|
|
90
|
-
$dds-font-heading-sans-08-paragraph-indent: 0px;
|
|
91
|
-
$dds-font-heading-sans-08-paragraph-spacing: 32px;
|
|
92
|
-
$dds-font-heading-sans-08-text-case: none;
|
|
93
|
-
$dds-font-body-sans-01-font-size: 14px;
|
|
94
|
-
$dds-font-body-sans-01-text-decoration: none;
|
|
95
|
-
$dds-font-body-sans-01-font-family: 'IBM Plex Sans';
|
|
96
|
-
$dds-font-body-sans-01-font-weight: 400;
|
|
97
|
-
$dds-font-body-sans-01-font-style: normal;
|
|
98
|
-
$dds-font-body-sans-01-font-stretch: normal;
|
|
99
|
-
$dds-font-body-sans-01-letter-spacing: 0.01em;
|
|
100
|
-
$dds-font-body-sans-01-line-height: 1.5em;
|
|
101
|
-
$dds-font-body-sans-01-paragraph-indent: 0px;
|
|
102
|
-
$dds-font-body-sans-01-paragraph-spacing: 14px;
|
|
103
|
-
$dds-font-body-sans-01-text-case: none;
|
|
104
|
-
$dds-font-body-sans-02-font-size: 16px;
|
|
105
|
-
$dds-font-body-sans-02-text-decoration: none;
|
|
106
|
-
$dds-font-body-sans-02-font-family: 'IBM Plex Sans';
|
|
107
|
-
$dds-font-body-sans-02-font-weight: 400;
|
|
108
|
-
$dds-font-body-sans-02-font-style: normal;
|
|
109
|
-
$dds-font-body-sans-02-font-stretch: normal;
|
|
110
|
-
$dds-font-body-sans-02-letter-spacing: 0em;
|
|
111
|
-
$dds-font-body-sans-02-line-height: 1.5em;
|
|
112
|
-
$dds-font-body-sans-02-paragraph-indent: 0px;
|
|
113
|
-
$dds-font-body-sans-02-paragraph-spacing: 16px;
|
|
114
|
-
$dds-font-body-sans-02-text-case: none;
|
|
115
|
-
$dds-font-body-sans-03-font-size: 18px;
|
|
116
|
-
$dds-font-body-sans-03-text-decoration: none;
|
|
117
|
-
$dds-font-body-sans-03-font-family: 'IBM Plex Sans';
|
|
118
|
-
$dds-font-body-sans-03-font-weight: 400;
|
|
119
|
-
$dds-font-body-sans-03-font-style: normal;
|
|
120
|
-
$dds-font-body-sans-03-font-stretch: normal;
|
|
121
|
-
$dds-font-body-sans-03-letter-spacing: 0em;
|
|
122
|
-
$dds-font-body-sans-03-line-height: 1.5em;
|
|
123
|
-
$dds-font-body-sans-03-paragraph-indent: 0px;
|
|
124
|
-
$dds-font-body-sans-03-paragraph-spacing: 18px;
|
|
125
|
-
$dds-font-body-sans-03-text-case: none;
|
|
126
|
-
$dds-font-body-sans-04-font-size: 20px;
|
|
127
|
-
$dds-font-body-sans-04-text-decoration: none;
|
|
128
|
-
$dds-font-body-sans-04-font-family: 'IBM Plex Sans';
|
|
129
|
-
$dds-font-body-sans-04-font-weight: 400;
|
|
130
|
-
$dds-font-body-sans-04-font-style: normal;
|
|
131
|
-
$dds-font-body-sans-04-font-stretch: normal;
|
|
132
|
-
$dds-font-body-sans-04-letter-spacing: 0em;
|
|
133
|
-
$dds-font-body-sans-04-line-height: 1.5em;
|
|
134
|
-
$dds-font-body-sans-04-paragraph-indent: 0px;
|
|
135
|
-
$dds-font-body-sans-04-paragraph-spacing: 20px;
|
|
136
|
-
$dds-font-body-sans-04-text-case: none;
|
|
137
|
-
$dds-font-lead-sans-01-font-size: 18px;
|
|
138
|
-
$dds-font-lead-sans-01-text-decoration: none;
|
|
139
|
-
$dds-font-lead-sans-01-font-family: 'IBM Plex Sans';
|
|
140
|
-
$dds-font-lead-sans-01-font-weight: 600;
|
|
141
|
-
$dds-font-lead-sans-01-font-style: normal;
|
|
142
|
-
$dds-font-lead-sans-01-font-stretch: normal;
|
|
143
|
-
$dds-font-lead-sans-01-letter-spacing: 0em;
|
|
144
|
-
$dds-font-lead-sans-01-line-height: 1.5em;
|
|
145
|
-
$dds-font-lead-sans-01-paragraph-indent: 0px;
|
|
146
|
-
$dds-font-lead-sans-01-paragraph-spacing: 18px;
|
|
147
|
-
$dds-font-lead-sans-01-text-case: none;
|
|
148
|
-
$dds-font-lead-sans-02-font-size: 24px;
|
|
149
|
-
$dds-font-lead-sans-02-text-decoration: none;
|
|
150
|
-
$dds-font-lead-sans-02-font-family: 'IBM Plex Sans';
|
|
151
|
-
$dds-font-lead-sans-02-font-weight: 600;
|
|
152
|
-
$dds-font-lead-sans-02-font-style: normal;
|
|
153
|
-
$dds-font-lead-sans-02-font-stretch: normal;
|
|
154
|
-
$dds-font-lead-sans-02-letter-spacing: 0em;
|
|
155
|
-
$dds-font-lead-sans-02-line-height: 1.35em;
|
|
156
|
-
$dds-font-lead-sans-02-paragraph-indent: 0px;
|
|
157
|
-
$dds-font-lead-sans-02-paragraph-spacing: 16px;
|
|
158
|
-
$dds-font-lead-sans-02-text-case: none;
|
|
159
|
-
$dds-font-lead-sans-03-font-size: 24px;
|
|
160
|
-
$dds-font-lead-sans-03-text-decoration: none;
|
|
161
|
-
$dds-font-lead-sans-03-font-family: 'IBM Plex Sans';
|
|
162
|
-
$dds-font-lead-sans-03-font-weight: 300;
|
|
163
|
-
$dds-font-lead-sans-03-font-style: normal;
|
|
164
|
-
$dds-font-lead-sans-03-font-stretch: normal;
|
|
165
|
-
$dds-font-lead-sans-03-letter-spacing: 0em;
|
|
166
|
-
$dds-font-lead-sans-03-line-height: 1.35em;
|
|
167
|
-
$dds-font-lead-sans-03-paragraph-indent: 0px;
|
|
168
|
-
$dds-font-lead-sans-03-paragraph-spacing: 16px;
|
|
169
|
-
$dds-font-lead-sans-03-text-case: none;
|
|
170
|
-
$dds-font-lead-sans-04-font-size: 32px;
|
|
171
|
-
$dds-font-lead-sans-04-text-decoration: none;
|
|
172
|
-
$dds-font-lead-sans-04-font-family: 'IBM Plex Sans';
|
|
173
|
-
$dds-font-lead-sans-04-font-weight: 300;
|
|
174
|
-
$dds-font-lead-sans-04-font-style: normal;
|
|
175
|
-
$dds-font-lead-sans-04-font-stretch: normal;
|
|
176
|
-
$dds-font-lead-sans-04-letter-spacing: 0em;
|
|
177
|
-
$dds-font-lead-sans-04-line-height: 1.35em;
|
|
178
|
-
$dds-font-lead-sans-04-paragraph-indent: 0px;
|
|
179
|
-
$dds-font-lead-sans-04-paragraph-spacing: 21px;
|
|
180
|
-
$dds-font-lead-sans-04-text-case: none;
|
|
181
|
-
$dds-font-lead-sans-05-font-size: 40px;
|
|
182
|
-
$dds-font-lead-sans-05-text-decoration: none;
|
|
183
|
-
$dds-font-lead-sans-05-font-family: 'IBM Plex Sans';
|
|
184
|
-
$dds-font-lead-sans-05-font-weight: 300;
|
|
185
|
-
$dds-font-lead-sans-05-font-style: normal;
|
|
186
|
-
$dds-font-lead-sans-05-font-stretch: normal;
|
|
187
|
-
$dds-font-lead-sans-05-letter-spacing: -0.01em;
|
|
188
|
-
$dds-font-lead-sans-05-line-height: 1.35em;
|
|
189
|
-
$dds-font-lead-sans-05-paragraph-indent: 0px;
|
|
190
|
-
$dds-font-lead-sans-05-paragraph-spacing: 26px;
|
|
191
|
-
$dds-font-lead-sans-05-text-case: none;
|
|
192
|
-
$dds-font-supporting-style-label-01-font-size: 14px;
|
|
193
|
-
$dds-font-supporting-style-label-01-text-decoration: none;
|
|
194
|
-
$dds-font-supporting-style-label-01-font-family: 'IBM Plex Sans';
|
|
195
|
-
$dds-font-supporting-style-label-01-font-weight: 600;
|
|
196
|
-
$dds-font-supporting-style-label-01-font-style: normal;
|
|
197
|
-
$dds-font-supporting-style-label-01-font-stretch: normal;
|
|
198
|
-
$dds-font-supporting-style-label-01-letter-spacing: 0.01em;
|
|
199
|
-
$dds-font-supporting-style-label-01-line-height: 1.5em;
|
|
200
|
-
$dds-font-supporting-style-label-01-paragraph-indent: 0px;
|
|
201
|
-
$dds-font-supporting-style-label-01-paragraph-spacing: 14px;
|
|
202
|
-
$dds-font-supporting-style-label-01-text-case: none;
|
|
203
|
-
$dds-font-supporting-style-helpertext-01-font-size: 12px;
|
|
204
|
-
$dds-font-supporting-style-helpertext-01-text-decoration: none;
|
|
205
|
-
$dds-font-supporting-style-helpertext-01-font-family: 'IBM Plex Sans';
|
|
206
|
-
$dds-font-supporting-style-helpertext-01-font-weight: 400;
|
|
207
|
-
$dds-font-supporting-style-helpertext-01-font-style: normal;
|
|
208
|
-
$dds-font-supporting-style-helpertext-01-font-stretch: normal;
|
|
209
|
-
$dds-font-supporting-style-helpertext-01-letter-spacing: 0.01em;
|
|
210
|
-
$dds-font-supporting-style-helpertext-01-line-height: 1.5em;
|
|
211
|
-
$dds-font-supporting-style-helpertext-01-paragraph-indent: 0px;
|
|
212
|
-
$dds-font-supporting-style-helpertext-01-paragraph-spacing: 12px;
|
|
213
|
-
$dds-font-supporting-style-helpertext-01-text-case: none;
|
|
214
|
-
$dds-font-supporting-style-placeholdertext-01-font-size: 16px;
|
|
215
|
-
$dds-font-supporting-style-placeholdertext-01-text-decoration: none;
|
|
216
|
-
$dds-font-supporting-style-placeholdertext-01-font-family: 'IBM Plex Sans';
|
|
217
|
-
$dds-font-supporting-style-placeholdertext-01-font-weight: 400;
|
|
218
|
-
$dds-font-supporting-style-placeholdertext-01-font-style: italic;
|
|
219
|
-
$dds-font-supporting-style-placeholdertext-01-font-stretch: normal;
|
|
220
|
-
$dds-font-supporting-style-placeholdertext-01-letter-spacing: 0em;
|
|
221
|
-
$dds-font-supporting-style-placeholdertext-01-line-height: 1.5em;
|
|
222
|
-
$dds-font-supporting-style-placeholdertext-01-paragraph-indent: 0px;
|
|
223
|
-
$dds-font-supporting-style-placeholdertext-01-paragraph-spacing: 16px;
|
|
224
|
-
$dds-font-supporting-style-placeholdertext-01-text-case: none;
|
|
225
|
-
$dds-font-supporting-style-tiny-01-font-size: 12px;
|
|
226
|
-
$dds-font-supporting-style-tiny-01-text-decoration: none;
|
|
227
|
-
$dds-font-supporting-style-tiny-01-font-family: 'IBM Plex Sans';
|
|
228
|
-
$dds-font-supporting-style-tiny-01-font-weight: 400;
|
|
229
|
-
$dds-font-supporting-style-tiny-01-font-style: normal;
|
|
230
|
-
$dds-font-supporting-style-tiny-01-font-stretch: normal;
|
|
231
|
-
$dds-font-supporting-style-tiny-01-letter-spacing: 0.01em;
|
|
232
|
-
$dds-font-supporting-style-tiny-01-line-height: 1.5em;
|
|
233
|
-
$dds-font-supporting-style-tiny-01-paragraph-indent: 0px;
|
|
234
|
-
$dds-font-supporting-style-tiny-01-paragraph-spacing: 12px;
|
|
235
|
-
$dds-font-supporting-style-tiny-01-text-case: none;
|
|
236
|
-
$dds-font-supporting-style-tiny-02-font-size: 12px;
|
|
237
|
-
$dds-font-supporting-style-tiny-02-text-decoration: none;
|
|
238
|
-
$dds-font-supporting-style-tiny-02-font-family: 'IBM Plex Sans';
|
|
239
|
-
$dds-font-supporting-style-tiny-02-font-weight: 300;
|
|
240
|
-
$dds-font-supporting-style-tiny-02-font-style: normal;
|
|
241
|
-
$dds-font-supporting-style-tiny-02-font-stretch: normal;
|
|
242
|
-
$dds-font-supporting-style-tiny-02-letter-spacing: 0.01em;
|
|
243
|
-
$dds-font-supporting-style-tiny-02-line-height: 1.5em;
|
|
244
|
-
$dds-font-supporting-style-tiny-02-paragraph-indent: 0px;
|
|
245
|
-
$dds-font-supporting-style-tiny-02-paragraph-spacing: 12px;
|
|
246
|
-
$dds-font-supporting-style-tiny-02-text-case: none;
|
|
247
|
-
$dds-font-supporting-style-placeholdertext-02-font-size: 14px;
|
|
248
|
-
$dds-font-supporting-style-placeholdertext-02-text-decoration: none;
|
|
249
|
-
$dds-font-supporting-style-placeholdertext-02-font-family: 'IBM Plex Sans';
|
|
250
|
-
$dds-font-supporting-style-placeholdertext-02-font-weight: 400;
|
|
251
|
-
$dds-font-supporting-style-placeholdertext-02-font-style: italic;
|
|
252
|
-
$dds-font-supporting-style-placeholdertext-02-font-stretch: normal;
|
|
253
|
-
$dds-font-supporting-style-placeholdertext-02-letter-spacing: 0.01em;
|
|
254
|
-
$dds-font-supporting-style-placeholdertext-02-line-height: 1.5em;
|
|
255
|
-
$dds-font-supporting-style-placeholdertext-02-paragraph-indent: 0px;
|
|
256
|
-
$dds-font-supporting-style-placeholdertext-02-paragraph-spacing: 14px;
|
|
257
|
-
$dds-font-supporting-style-placeholdertext-02-text-case: none;
|
|
258
|
-
$dds-font-supporting-style-placeholdertext-03-font-size: 12px;
|
|
259
|
-
$dds-font-supporting-style-placeholdertext-03-text-decoration: none;
|
|
260
|
-
$dds-font-supporting-style-placeholdertext-03-font-family: 'IBM Plex Sans';
|
|
261
|
-
$dds-font-supporting-style-placeholdertext-03-font-weight: 400;
|
|
262
|
-
$dds-font-supporting-style-placeholdertext-03-font-style: italic;
|
|
263
|
-
$dds-font-supporting-style-placeholdertext-03-font-stretch: normal;
|
|
264
|
-
$dds-font-supporting-style-placeholdertext-03-letter-spacing: 0.01em;
|
|
265
|
-
$dds-font-supporting-style-placeholdertext-03-line-height: 1.5em;
|
|
266
|
-
$dds-font-supporting-style-placeholdertext-03-paragraph-indent: 0px;
|
|
267
|
-
$dds-font-supporting-style-placeholdertext-03-paragraph-spacing: 12px;
|
|
268
|
-
$dds-font-supporting-style-placeholdertext-03-text-case: none;
|
|
269
|
-
$dds-font-code-monospace-02-font-size: 16px;
|
|
270
|
-
$dds-font-code-monospace-02-text-decoration: none;
|
|
271
|
-
$dds-font-code-monospace-02-font-family: 'IBM Plex Mono';
|
|
272
|
-
$dds-font-code-monospace-02-font-weight: 400;
|
|
273
|
-
$dds-font-code-monospace-02-font-style: normal;
|
|
274
|
-
$dds-font-code-monospace-02-font-stretch: normal;
|
|
275
|
-
$dds-font-code-monospace-02-letter-spacing: 0em;
|
|
276
|
-
$dds-font-code-monospace-02-line-height: 1.5em;
|
|
277
|
-
$dds-font-code-monospace-02-paragraph-indent: 0px;
|
|
278
|
-
$dds-font-code-monospace-02-paragraph-spacing: 9px;
|
|
279
|
-
$dds-font-code-monospace-02-text-case: none;
|
|
280
|
-
$dds-shadow-1-ondark: 1.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.5);
|
|
281
|
-
$dds-shadow-1-onlight: 1.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.1);
|
|
282
|
-
$dds-shadow-2-ondark: 2.0px 4.0px 8.0px 0px rgba(0, 0, 0, 0.5);
|
|
283
|
-
$dds-shadow-2-onlight: 2.0px 4.0px 8.0px 0px rgba(0, 0, 0, 0.1);
|
|
284
|
-
$dds-shadow-3-ondark: 4.0px 8.0px 16.0px 0px rgba(0, 0, 0, 0.5);
|
|
285
|
-
$dds-shadow-3-onlight: 4.0px 8.0px 16.0px 0px rgba(0, 0, 0, 0.1);
|
|
286
|
-
$dds-shadow-4-ondark: 8.0px 16.0px 32.0px 0px rgba(0, 0, 0, 0.5);
|
|
287
|
-
$dds-shadow-4-onlight: 8.0px 16.0px 32.0px 0px rgba(0, 0, 0, 0.1);
|
|
288
4
|
$dds-color-primary-lightest: #eaeff4;
|
|
289
5
|
$dds-color-primary-lighter: #acbbc6;
|
|
290
6
|
$dds-color-primary-light: #4f6a7e;
|
|
291
|
-
$dds-color-primary-base: #354754;
|
|
7
|
+
$dds-color-primary-base: #354754; // Primary er hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge
|
|
292
8
|
$dds-color-primary-dark: #313d45;
|
|
293
9
|
$dds-color-primary-darker: #202b32;
|
|
294
10
|
$dds-color-primary-darkest: #151c22;
|
|
@@ -305,42 +21,42 @@ $dds-color-neutrals-gray9: #0b0d0e;
|
|
|
305
21
|
$dds-color-interactive-lightest: #e7f1f7;
|
|
306
22
|
$dds-color-interactive-lighter: #9fc5de;
|
|
307
23
|
$dds-color-interactive-light: #589ac6;
|
|
308
|
-
$dds-color-interactive-base: #106ead;
|
|
24
|
+
$dds-color-interactive-base: #106ead; // 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
|
|
309
25
|
$dds-color-interactive-dark: #0d588a;
|
|
310
26
|
$dds-color-interactive-darker: #0a4268;
|
|
311
27
|
$dds-color-interactive-darkest: #062c45;
|
|
312
|
-
$dds-color-secondary-lightest: #e6eded;
|
|
28
|
+
$dds-color-secondary-lightest: #e6eded; // --l80
|
|
313
29
|
$dds-color-secondary-lighter: #cddbdb;
|
|
314
30
|
$dds-color-secondary-light: #b8cdcd;
|
|
315
|
-
$dds-color-secondary-base: #9ab8b7;
|
|
31
|
+
$dds-color-secondary-base: #9ab8b7; // Secondary er den andre hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge.
|
|
316
32
|
$dds-color-secondary-dark: #7b9392;
|
|
317
33
|
$dds-color-secondary-darker: #4d6463;
|
|
318
34
|
$dds-color-secondary-darkest: #3e4a49;
|
|
319
35
|
$dds-color-tertiary-lightest: #ffe6df;
|
|
320
36
|
$dds-color-tertiary-lighter: #ffd6ca;
|
|
321
37
|
$dds-color-tertiary-light: #f6c1b1;
|
|
322
|
-
$dds-color-tertiary-base: #f2a68f;
|
|
38
|
+
$dds-color-tertiary-base: #f2a68f; // Tertiary er er den tredje profilfargen til Domstolene. Denne brukes gjerne som støttefarge
|
|
323
39
|
$dds-color-tertiary-dark: #f59877;
|
|
324
40
|
$dds-color-tertiary-darker: #f27e55;
|
|
325
41
|
$dds-color-tertiary-darkest: #c26544;
|
|
326
42
|
$dds-color-success-lightest: #f0f9f0;
|
|
327
43
|
$dds-color-success-lighter: #c1e5c2;
|
|
328
44
|
$dds-color-success-light: #93d294;
|
|
329
|
-
$dds-color-success-base: #65be66;
|
|
45
|
+
$dds-color-success-base: #65be66; // Brukes for å kommunisere suksess eller noe som er riktig.
|
|
330
46
|
$dds-color-success-dark: #519852;
|
|
331
47
|
$dds-color-success-darker: #3d723d;
|
|
332
48
|
$dds-color-success-darkest: #284c29;
|
|
333
49
|
$dds-color-danger-lightest: #fbebeb;
|
|
334
50
|
$dds-color-danger-lighter: #efafaf;
|
|
335
51
|
$dds-color-danger-light: #e47373;
|
|
336
|
-
$dds-color-danger-base: #d83737;
|
|
52
|
+
$dds-color-danger-base: #d83737; // Brukes for å kommunisere feil og destruktive handlinger, som f.eks. slett.
|
|
337
53
|
$dds-color-danger-dark: #ad2c2c;
|
|
338
54
|
$dds-color-danger-darker: #822121;
|
|
339
55
|
$dds-color-danger-darkest: #561616;
|
|
340
56
|
$dds-color-warning-lightest: #fefced;
|
|
341
57
|
$dds-color-warning-lighter: #fbf3b8;
|
|
342
58
|
$dds-color-warning-light: #f7e982;
|
|
343
|
-
$dds-color-warning-base: #f4e04d;
|
|
59
|
+
$dds-color-warning-base: #f4e04d; // Brukes for å kommunisere varsler.
|
|
344
60
|
$dds-color-warning-dark: #c3b33e;
|
|
345
61
|
$dds-color-warning-darker: #92862e;
|
|
346
62
|
$dds-color-warning-darkest: #625a1f;
|
|
@@ -351,96 +67,107 @@ $dds-color-info-base: #75b9e6;
|
|
|
351
67
|
$dds-color-info-dark: #5e94b8;
|
|
352
68
|
$dds-color-info-darker: #466f8a;
|
|
353
69
|
$dds-color-info-darkest: #2f4a5c;
|
|
354
|
-
$dds-color-visited-base: #
|
|
355
|
-
$dds-color-visited-lighter: #
|
|
356
|
-
$dds-color-bg-default: #ffffff;
|
|
357
|
-
$dds-color-bg-subtle: #f8f9f9;
|
|
358
|
-
$dds-color-surface-default: #ffffff;
|
|
359
|
-
$dds-color-surface-subtle: #f8f9f9;
|
|
360
|
-
$dds-color-surface-medium: #ebecee;
|
|
361
|
-
$dds-color-surface-hover-default: #e7f1f7;
|
|
362
|
-
$dds-color-surface-hover-subtle: #f8f9f9;
|
|
363
|
-
$dds-color-surface-selected-default: #e7f1f7;
|
|
364
|
-
$dds-color-surface-inverse-default: #354754;
|
|
365
|
-
$dds-color-surface-inverse-hover: #313d45;
|
|
366
|
-
$dds-color-surface-inverse-selected: #202b32;
|
|
367
|
-
$dds-color-surface-action-resting: #106ead;
|
|
368
|
-
$dds-color-surface-action-hover: #0d588a;
|
|
369
|
-
$dds-color-surface-action-selected: #106ead;
|
|
370
|
-
$dds-color-surface-action-danger-resting: #d83737;
|
|
371
|
-
$dds-color-surface-action-danger-hover: #ad2c2c;
|
|
372
|
-
$dds-color-surface-action-selected-disabled: #77838c;
|
|
373
|
-
$dds-color-surface-danger-default: #fbebeb;
|
|
70
|
+
$dds-color-visited-base: #7f29b4; // Used for visited links
|
|
71
|
+
$dds-color-visited-lighter: #cca9e1; // Used for visited links
|
|
72
|
+
$dds-color-bg-default: #ffffff; // UI shell base color
|
|
73
|
+
$dds-color-bg-subtle: #f8f9f9; // Alternative UI shell base color
|
|
74
|
+
$dds-color-surface-default: #ffffff; // Default bg
|
|
75
|
+
$dds-color-surface-subtle: #f8f9f9; // Subtle surface color
|
|
76
|
+
$dds-color-surface-medium: #ebecee; // Medium surface color
|
|
77
|
+
$dds-color-surface-hover-default: #e7f1f7; // Hover on surface (default, subtle, medium)
|
|
78
|
+
$dds-color-surface-hover-subtle: #f8f9f9; // Subtle hover on surface (default, medium)
|
|
79
|
+
$dds-color-surface-selected-default: #e7f1f7; // Selected state for surface (default, subtle, medium)
|
|
80
|
+
$dds-color-surface-inverse-default: #354754; // Can be used as a surface for menu, navigation, footer etc
|
|
81
|
+
$dds-color-surface-inverse-hover: #313d45; // Hover on surface.inverse
|
|
82
|
+
$dds-color-surface-inverse-selected: #202b32; // selected on surface.inverse
|
|
83
|
+
$dds-color-surface-action-resting: #106ead; // Primary button bg
|
|
84
|
+
$dds-color-surface-action-hover: #0d588a; // Hover on surface.action/selected
|
|
85
|
+
$dds-color-surface-action-selected: #106ead; // Selected state for components such as togglebutton, togglebar, progress tracker, checkbox etc
|
|
86
|
+
$dds-color-surface-action-danger-resting: #d83737; // Danger button
|
|
87
|
+
$dds-color-surface-action-danger-hover: #ad2c2c; // Hover on surface.action-danger
|
|
88
|
+
$dds-color-surface-action-selected-disabled: #77838c; // bg on a selected disabled checkbox, radio etc
|
|
89
|
+
$dds-color-surface-danger-default: #fbebeb; // tag, message, errormessage
|
|
90
|
+
// tag strong value
|
|
91
|
+
//
|
|
374
92
|
$dds-color-surface-danger-strong: #e47373;
|
|
375
|
-
$dds-color-surface-success-default: #f0f9f0;
|
|
376
|
-
$dds-color-surface-success-strong: #93d294;
|
|
377
|
-
$dds-color-surface-warning-default: #fefced;
|
|
378
|
-
$dds-color-surface-warning-strong: #f7e982;
|
|
379
|
-
$dds-color-surface-info-default: #f1f8fd;
|
|
380
|
-
$dds-color-surface-info-strong: #9eceee;
|
|
381
|
-
$dds-color-surface-paper-default: #ffffff;
|
|
382
|
-
$dds-color-surface-backdrop-default: #0b0d0e80;
|
|
383
|
-
$dds-color-surface-field-default: #ffffff;
|
|
384
|
-
$dds-color-surface-field-disabled: #f8f9f9;
|
|
385
|
-
$dds-color-surface-highlighted-default: #ffe6df;
|
|
386
|
-
$dds-color-surface-scrollbar: #adb5ba;
|
|
387
|
-
$dds-color-surface-notification: #d83737;
|
|
388
|
-
$dds-color-
|
|
389
|
-
$dds-color-border-
|
|
390
|
-
$dds-color-border-
|
|
391
|
-
$dds-color-border-
|
|
392
|
-
$dds-color-border-action-
|
|
93
|
+
$dds-color-surface-success-default: #f0f9f0; // tag, message
|
|
94
|
+
$dds-color-surface-success-strong: #93d294; // tag with strong value
|
|
95
|
+
$dds-color-surface-warning-default: #fefced; // tag, message
|
|
96
|
+
$dds-color-surface-warning-strong: #f7e982; // tag strong value
|
|
97
|
+
$dds-color-surface-info-default: #f1f8fd; // tag, message
|
|
98
|
+
$dds-color-surface-info-strong: #9eceee; // tag strong value
|
|
99
|
+
$dds-color-surface-paper-default: #ffffff; // modal, drawer, popover etc
|
|
100
|
+
$dds-color-surface-backdrop-default: #0b0d0e80; // background overlay for modals (50%)
|
|
101
|
+
$dds-color-surface-field-default: #ffffff; // Form elements (textinput, datepicker etc)
|
|
102
|
+
$dds-color-surface-field-disabled: #f8f9f9; // disabled state on surface.field
|
|
103
|
+
$dds-color-surface-highlighted-default: #ffe6df; // bg for highlighted text on text.default. Use with $Text
|
|
104
|
+
$dds-color-surface-scrollbar: #adb5ba; // Used for scrollbar
|
|
105
|
+
$dds-color-surface-notification: #d83737; // bg on a notification
|
|
106
|
+
$dds-color-surface-skeleton: #cfd4d7; // Used for skeleton
|
|
107
|
+
$dds-color-border-default: #77838c; // Form components, togglebutton, secondary button, checkbox etc
|
|
108
|
+
$dds-color-border-subtle: #cfd4d7; // Dropdown, tooltip, overflow etc
|
|
109
|
+
$dds-color-border-inverse: #acbbc6; // Border or divider on surface.inverse
|
|
110
|
+
$dds-color-border-action-default: #106ead; // Used in progress tracker
|
|
111
|
+
$dds-color-border-action-hover: #0d588a; // Hover on secondary button etc
|
|
112
|
+
// Tag-default
|
|
113
|
+
//
|
|
393
114
|
$dds-color-border-success: #65be66;
|
|
394
|
-
$dds-color-border-warning: #f4e04d;
|
|
395
|
-
$dds-color-border-danger: #d83737;
|
|
396
|
-
$dds-color-border-info: #75b9e6;
|
|
397
|
-
$dds-color-border-on-action: #ffffff;
|
|
398
|
-
$dds-color-text-default: #0b0d0e;
|
|
399
|
-
$dds-color-text-medium: #3a4146;
|
|
400
|
-
$dds-color-text-subtle: #545c62;
|
|
401
|
-
$dds-color-text-on-inverse: #ffffff;
|
|
402
|
-
$dds-color-text-on-action: #ffffff;
|
|
403
|
-
$dds-color-text-on-status-default: #0b0d0e;
|
|
404
|
-
$dds-color-text-on-status-strong: #0b0d0e;
|
|
405
|
-
$dds-color-text-action-resting: #106ead;
|
|
406
|
-
$dds-color-text-action-hover: #0d588a;
|
|
407
|
-
$dds-color-text-requiredfield: #d83737;
|
|
408
|
-
$dds-color-text-action-visited: #
|
|
409
|
-
$dds-color-text-on-
|
|
410
|
-
$dds-color-
|
|
411
|
-
$dds-color-icon-
|
|
412
|
-
$dds-color-icon-
|
|
413
|
-
$dds-color-icon-
|
|
414
|
-
$dds-color-icon-on-
|
|
415
|
-
$dds-color-icon-action
|
|
416
|
-
$dds-color-icon-action-
|
|
417
|
-
$dds-color-icon-
|
|
418
|
-
$dds-color-icon-on-success-
|
|
419
|
-
$dds-color-icon-on-
|
|
420
|
-
$dds-color-icon-on-warning-
|
|
421
|
-
$dds-color-icon-on-
|
|
422
|
-
$dds-color-icon-on-danger-
|
|
423
|
-
$dds-color-icon-on-
|
|
424
|
-
$dds-color-icon-on-info-
|
|
425
|
-
$dds-color-
|
|
426
|
-
$dds-color-brand-primary-
|
|
427
|
-
$dds-color-brand-primary-
|
|
115
|
+
$dds-color-border-warning: #f4e04d; // Tag.default
|
|
116
|
+
$dds-color-border-danger: #d83737; // Tag.default, error message field
|
|
117
|
+
$dds-color-border-info: #75b9e6; // Tag.default
|
|
118
|
+
$dds-color-border-on-action: #ffffff; // Used on primary split button
|
|
119
|
+
$dds-color-text-default: #0b0d0e; // default text, heading, body. on surface.hover
|
|
120
|
+
$dds-color-text-medium: #3a4146; // Label, etc
|
|
121
|
+
$dds-color-text-subtle: #545c62; // Disabled or less important text
|
|
122
|
+
$dds-color-text-on-inverse: #ffffff; // On surface.inverse
|
|
123
|
+
$dds-color-text-on-action: #ffffff; // On surface.action (primary and danger button)
|
|
124
|
+
$dds-color-text-on-status-default: #0b0d0e; // On default status surfaces
|
|
125
|
+
$dds-color-text-on-status-strong: #0b0d0e; // On status surfaces with strong prop
|
|
126
|
+
$dds-color-text-action-resting: #106ead; // Link, number in progress tracker
|
|
127
|
+
$dds-color-text-action-hover: #0d588a; // Hover on text.action
|
|
128
|
+
$dds-color-text-requiredfield: #d83737; // Asterix to indicate required field
|
|
129
|
+
$dds-color-text-action-visited: #7f29b4; // Used for visited links
|
|
130
|
+
$dds-color-text-action-visited-on-inverse: #cca9e1; // Used for visited links on inverse surfaces
|
|
131
|
+
$dds-color-text-on-notification: #ffffff; // Used on surface.notification
|
|
132
|
+
$dds-color-icon-default: #0b0d0e; // Often used with text.default
|
|
133
|
+
$dds-color-icon-medium: #3a4146; // Often used with text.medium
|
|
134
|
+
$dds-color-icon-subtle: #545c62; // Often used with text.subtle
|
|
135
|
+
$dds-color-icon-on-inverse: #ffffff; // On surface.inverse
|
|
136
|
+
$dds-color-icon-on-action: #ffffff; // On surface.action (primary and danger button)
|
|
137
|
+
$dds-color-icon-action-resting: #106ead; // Often used with Text.action
|
|
138
|
+
$dds-color-icon-action-hover: #0d588a; // hover on icon-action, used on secondary buttons etc
|
|
139
|
+
$dds-color-icon-on-success-default: #3d723d; // On surface.success-default
|
|
140
|
+
$dds-color-icon-on-success-strong: #0b0d0e; // On surface-success-strong
|
|
141
|
+
$dds-color-icon-on-warning-default: #92862e; // On surface.warning-default
|
|
142
|
+
$dds-color-icon-on-warning-strong: #0b0d0e; // On surface.warning-strong
|
|
143
|
+
$dds-color-icon-on-danger-default: #ad2c2c; // On surface.danger-default
|
|
144
|
+
$dds-color-icon-on-danger-strong: #0b0d0e; // On surface.danger-strong
|
|
145
|
+
$dds-color-icon-on-info-default: #466f8a; // On surface.info-default
|
|
146
|
+
$dds-color-icon-on-info-strong: #0b0d0e; // On surface.info-strong
|
|
147
|
+
$dds-color-brand-primary-default: #354754; // Primary brand color
|
|
148
|
+
$dds-color-brand-primary-subtle: #eaeff4; // Primary brand color
|
|
149
|
+
$dds-color-brand-primary-medium: #4f6a7e; // Primary brand color
|
|
428
150
|
$dds-color-brand-primary-strong: #202b32;
|
|
429
|
-
$dds-color-brand-secondary-default: #9ab8b7;
|
|
430
|
-
$dds-color-brand-secondary-subtle: #e6eded;
|
|
431
|
-
$dds-color-brand-secondary-medium: #b8cdcd;
|
|
151
|
+
$dds-color-brand-secondary-default: #9ab8b7; // Secondary brand color
|
|
152
|
+
$dds-color-brand-secondary-subtle: #e6eded; // Secondary brand color
|
|
153
|
+
$dds-color-brand-secondary-medium: #b8cdcd; // Secondary brand color
|
|
432
154
|
$dds-color-brand-secondary-strong: #4d6463;
|
|
433
|
-
$dds-color-brand-tertiary-default: #f2a68f;
|
|
434
|
-
$dds-color-brand-tertiary-subtle: #ffe6df;
|
|
435
|
-
$dds-color-brand-tertiary-medium: #f6c1b1;
|
|
155
|
+
$dds-color-brand-tertiary-default: #f2a68f; // Tertiary brand color
|
|
156
|
+
$dds-color-brand-tertiary-subtle: #ffe6df; // Tertiary brand color
|
|
157
|
+
$dds-color-brand-tertiary-medium: #f6c1b1; // Tertiary brand color
|
|
436
158
|
$dds-color-brand-tertiary-strong: #f27e55;
|
|
437
|
-
$dds-color-focus-outside: #2f4a5c;
|
|
438
|
-
$dds-color-focus-inside: #f1f8fd;
|
|
159
|
+
$dds-color-focus-outside: #2f4a5c; // Contrast to .inside
|
|
160
|
+
$dds-color-focus-inside: #f1f8fd; // Contrast to .outside
|
|
439
161
|
$dds-border-radius-0: 0px;
|
|
440
162
|
$dds-border-radius-1: 2px;
|
|
441
163
|
$dds-border-radius-2: 4px;
|
|
442
164
|
$dds-border-radius-3: 8px;
|
|
443
|
-
$dds-border-radius-100: 9999px;
|
|
165
|
+
$dds-border-radius-100: 9999px; // Rounded buttons, round shapes etc
|
|
166
|
+
$dds-border-radius-button: 2px; // For use in button component and togglebutton
|
|
167
|
+
$dds-border-radius-surface: 2px; // Most surfaces, for example cards, papers, messages, backgrounds in GUI
|
|
168
|
+
$dds-border-radius-input: 2px; // All input fields, and check boxes
|
|
169
|
+
$dds-border-radius-chip: 2px; // chips and tags
|
|
170
|
+
$dds-border-radius-rounded: 9999px; // rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker
|
|
444
171
|
$dds-spacing-x0: 0px;
|
|
445
172
|
$dds-spacing-x0-125: 2px;
|
|
446
173
|
$dds-spacing-x0-25: 4px;
|
|
@@ -454,7 +181,66 @@ $dds-spacing-x3: 48px;
|
|
|
454
181
|
$dds-spacing-x4: 64px;
|
|
455
182
|
$dds-spacing-x6: 96px;
|
|
456
183
|
$dds-spacing-x10: 160px;
|
|
457
|
-
$dds-spacing-padding-top-heading: 0.7em;
|
|
184
|
+
$dds-spacing-padding-top-heading: 0.7em; // Ekstra spacing over dds-header. 70% av størrelsen på headeren
|
|
185
|
+
$dds-shadow-1: 1px 2px 4px 0px rgba(11, 13, 14, 10%);
|
|
186
|
+
$dds-shadow-2: 2px 4px 8px 0px rgba(11, 13, 14, 10%);
|
|
187
|
+
$dds-shadow-3: 4px 8px 16px 0px rgba(11, 13, 14, 10%);
|
|
188
|
+
$dds-shadow-4: 8px 16px 32px 0px rgba(11, 13, 14, 10%);
|
|
189
|
+
$dds-font-family-sans: 'IBM Plex Sans';
|
|
190
|
+
$dds-font-family-monospace: 'IBM Plex Mono'; // For kode
|
|
191
|
+
$dds-font-size-x5: 5rem;
|
|
192
|
+
$dds-font-size-x4: 4rem;
|
|
193
|
+
$dds-font-size-x3: 3rem;
|
|
194
|
+
$dds-font-size-x2-5: 2.5rem;
|
|
195
|
+
$dds-font-size-x2: 2rem;
|
|
196
|
+
$dds-font-size-x1-5: 1.5rem;
|
|
197
|
+
$dds-font-size-x1-25: 1.25rem;
|
|
198
|
+
$dds-font-size-x1-125: 1.125rem;
|
|
199
|
+
$dds-font-size-x1: 1rem;
|
|
200
|
+
$dds-font-size-x0-875: 0.875rem;
|
|
201
|
+
$dds-font-size-x0-75: 0.75rem;
|
|
202
|
+
$dds-font-weight-light: 300;
|
|
203
|
+
$dds-font-weight-normal: 400;
|
|
204
|
+
$dds-font-weight-bold: 600;
|
|
205
|
+
$dds-font-lineheight-x1: 1.5; // Brukes på str ×1_25 og mindre
|
|
206
|
+
$dds-font-lineheight-x2: 1.35; // Brukes på str x1.5, ×2 og ×3
|
|
207
|
+
$dds-font-lineheight-x3: 1.2; // Brukes på str ×3 og større
|
|
208
|
+
$dds-font-lineheight-list: 2.5; // Brukes på lister
|
|
209
|
+
$dds-font-letter-spacing-tight: -0.01em; // Brukes på str ×2.5 og større
|
|
210
|
+
$dds-font-letter-spacing-normal: 0em; // Brukes på str ×1 og opp til og med ×2
|
|
211
|
+
$dds-font-letter-spacing-loose: 0.01em; // Brukes på størrelser under ×1
|
|
212
|
+
$dds-font-paragraph-spacing-small: 1em; // Brukes på str ×1_25 og mindre
|
|
213
|
+
$dds-font-paragraph-spacing-medium: 0.66em; // Brukes på str x1.5, ×2 og ×3
|
|
214
|
+
$dds-font-paragraph-spacing-large: 0.5em; // Brukes på str ×3 og større
|
|
215
|
+
$dds-font-paragraph-spacing-heading: 0.4em; // Brukes på på alle headere (bottom)
|
|
216
|
+
$dds-font-supporting-style-label-01: 600 0.875rem/1.5 'IBM Plex Sans'; // Label for form components
|
|
217
|
+
$dds-font-supporting-style-helpertext-01: 400 0.75rem/1.5 'IBM Plex Sans'; // Helper text for form components
|
|
218
|
+
$dds-font-supporting-style-placeholdertext-01: 400 1rem/1.5 'IBM Plex Sans'; // placeholder for form components (select)
|
|
219
|
+
$dds-font-supporting-style-placeholdertext-02: 400 0.875rem/1.5 'IBM Plex Sans'; // placeholder for form components (select)
|
|
220
|
+
$dds-font-supporting-style-placeholdertext-03: 400 0.75rem/1.5 'IBM Plex Sans'; // placeholder for form components (select)
|
|
221
|
+
$dds-font-supporting-style-tiny-01: 400 0.75rem/1.5 'IBM Plex Sans'; // Veldig liten font-størrelse, bruk sparsomt
|
|
222
|
+
$dds-font-supporting-style-tiny-02: 300 0.75rem/1.5 'IBM Plex Sans'; // Veldig liten font-størrelse, bruk sparsomt
|
|
223
|
+
$dds-font-body-sans-01: 400 0.875rem/1.5 'IBM Plex Sans';
|
|
224
|
+
$dds-font-body-sans-02: 400 1rem/1.5 'IBM Plex Sans';
|
|
225
|
+
$dds-font-body-sans-03: 400 1.125rem/1.5 'IBM Plex Sans';
|
|
226
|
+
$dds-font-body-sans-04: 400 1.25rem/1.5 'IBM Plex Sans';
|
|
227
|
+
$dds-font-heading-sans-01: 600 1rem/1.5 'IBM Plex Sans';
|
|
228
|
+
$dds-font-heading-sans-02: 600 1.125rem/1.35 'IBM Plex Sans';
|
|
229
|
+
$dds-font-heading-sans-03: 400 1.5rem/1.35 'IBM Plex Sans';
|
|
230
|
+
$dds-font-heading-sans-04: 400 2rem/1.35 'IBM Plex Sans';
|
|
231
|
+
$dds-font-heading-sans-05: 300 2.5rem/1.35 'IBM Plex Sans';
|
|
232
|
+
$dds-font-heading-sans-06: 300 3rem/1.2 'IBM Plex Sans';
|
|
233
|
+
$dds-font-heading-sans-07: 300 4rem/1.2 'IBM Plex Sans';
|
|
234
|
+
$dds-font-heading-sans-08: 300 5rem/1.2 'IBM Plex Sans';
|
|
235
|
+
$dds-font-lead-sans-01: 600 1.125rem/1.5 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
|
|
236
|
+
$dds-font-lead-sans-02: 600 1.5rem/1.35 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
|
|
237
|
+
$dds-font-lead-sans-03: 300 1.5rem/1.35 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
|
|
238
|
+
$dds-font-lead-sans-04: 300 2rem/1.35 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
|
|
239
|
+
$dds-font-lead-sans-05: 300 2.5rem/1.35 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
|
|
240
|
+
$dds-font-code-monospace-02: 400 1rem/1.5 'IBM Plex Mono'; // Brukes for kodesnutter etc
|
|
241
|
+
$dds-font-style-underline: underline;
|
|
242
|
+
$dds-font-style-normal: none;
|
|
243
|
+
$dds-font-style-italic: italic;
|
|
458
244
|
$dds-icon-size-large: 40px;
|
|
459
245
|
$dds-icon-size-medium: 24px;
|
|
460
246
|
$dds-icon-size-small: 16px;
|
|
@@ -473,3 +259,56 @@ $dds-breakpoint-sm: 600px;
|
|
|
473
259
|
$dds-breakpoint-md: 960px;
|
|
474
260
|
$dds-breakpoint-lg: 1280px;
|
|
475
261
|
$dds-breakpoint-xl: 1920px;
|
|
262
|
+
$dds-font-supporting-style-label-01-letter-spacing: 0.01em;
|
|
263
|
+
$dds-font-supporting-style-label-01-paragraph-spacing: 1em;
|
|
264
|
+
$dds-font-supporting-style-helpertext-01-letter-spacing: 0.01em;
|
|
265
|
+
$dds-font-supporting-style-helpertext-01-paragraph-spacing: 1em;
|
|
266
|
+
$dds-font-supporting-style-placeholdertext-01-letter-spacing: 0em;
|
|
267
|
+
$dds-font-supporting-style-placeholdertext-01-paragraph-spacing: 1em;
|
|
268
|
+
$dds-font-supporting-style-placeholdertext-01-font-style: italic;
|
|
269
|
+
$dds-font-supporting-style-placeholdertext-02-letter-spacing: 0.01em;
|
|
270
|
+
$dds-font-supporting-style-placeholdertext-02-paragraph-spacing: 1em;
|
|
271
|
+
$dds-font-supporting-style-placeholdertext-02-font-style: italic;
|
|
272
|
+
$dds-font-supporting-style-placeholdertext-03-letter-spacing: 0.01em;
|
|
273
|
+
$dds-font-supporting-style-placeholdertext-03-paragraph-spacing: 1em;
|
|
274
|
+
$dds-font-supporting-style-placeholdertext-03-font-style: italic;
|
|
275
|
+
$dds-font-supporting-style-tiny-01-letter-spacing: 0.01em;
|
|
276
|
+
$dds-font-supporting-style-tiny-01-paragraph-spacing: 1em;
|
|
277
|
+
$dds-font-supporting-style-tiny-02-letter-spacing: 0.01em;
|
|
278
|
+
$dds-font-supporting-style-tiny-02-paragraph-spacing: 1em;
|
|
279
|
+
$dds-font-body-sans-01-letter-spacing: 0.01em;
|
|
280
|
+
$dds-font-body-sans-01-paragraph-spacing: 1em;
|
|
281
|
+
$dds-font-body-sans-02-letter-spacing: 0em;
|
|
282
|
+
$dds-font-body-sans-02-paragraph-spacing: 1em;
|
|
283
|
+
$dds-font-body-sans-03-letter-spacing: 0em;
|
|
284
|
+
$dds-font-body-sans-03-paragraph-spacing: 1em;
|
|
285
|
+
$dds-font-body-sans-04-letter-spacing: 0em;
|
|
286
|
+
$dds-font-body-sans-04-paragraph-spacing: 1em;
|
|
287
|
+
$dds-font-heading-sans-01-letter-spacing: 0em;
|
|
288
|
+
$dds-font-heading-sans-01-paragraph-spacing: 0.4em;
|
|
289
|
+
$dds-font-heading-sans-02-letter-spacing: 0em;
|
|
290
|
+
$dds-font-heading-sans-02-paragraph-spacing: 0.4em;
|
|
291
|
+
$dds-font-heading-sans-03-letter-spacing: 0em;
|
|
292
|
+
$dds-font-heading-sans-03-paragraph-spacing: 0.4em;
|
|
293
|
+
$dds-font-heading-sans-04-letter-spacing: 0em;
|
|
294
|
+
$dds-font-heading-sans-04-paragraph-spacing: 0.4em;
|
|
295
|
+
$dds-font-heading-sans-05-letter-spacing: -0.01em;
|
|
296
|
+
$dds-font-heading-sans-05-paragraph-spacing: 0.4em;
|
|
297
|
+
$dds-font-heading-sans-06-letter-spacing: -0.01em;
|
|
298
|
+
$dds-font-heading-sans-06-paragraph-spacing: 0.4em;
|
|
299
|
+
$dds-font-heading-sans-07-letter-spacing: -0.01em;
|
|
300
|
+
$dds-font-heading-sans-07-paragraph-spacing: 0.4em;
|
|
301
|
+
$dds-font-heading-sans-08-letter-spacing: -0.01em;
|
|
302
|
+
$dds-font-heading-sans-08-paragraph-spacing: 0.4em;
|
|
303
|
+
$dds-font-lead-sans-01-letter-spacing: 0em;
|
|
304
|
+
$dds-font-lead-sans-01-paragraph-spacing: 1em;
|
|
305
|
+
$dds-font-lead-sans-02-letter-spacing: 0em;
|
|
306
|
+
$dds-font-lead-sans-02-paragraph-spacing: 0.66em;
|
|
307
|
+
$dds-font-lead-sans-03-letter-spacing: 0em;
|
|
308
|
+
$dds-font-lead-sans-03-paragraph-spacing: 0.66em;
|
|
309
|
+
$dds-font-lead-sans-04-letter-spacing: 0em;
|
|
310
|
+
$dds-font-lead-sans-04-paragraph-spacing: 0.66em;
|
|
311
|
+
$dds-font-lead-sans-05-letter-spacing: -0.01em;
|
|
312
|
+
$dds-font-lead-sans-05-paragraph-spacing: 0.66em;
|
|
313
|
+
$dds-font-code-monospace-02-letter-spacing: 0em;
|
|
314
|
+
$dds-font-code-monospace-02-paragraph-spacing: 1em;
|