@norges-domstoler/dds-components 0.0.0-dev-20260714080948 → 0.0.0-dev-20260717081939
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/dist/assets/fonts/EB-Garamond-400-italic.woff2 +0 -0
- package/dist/assets/fonts/EB-Garamond-400.woff2 +0 -0
- package/dist/assets/fonts/EB-Garamond-600-italic.woff2 +0 -0
- package/dist/assets/fonts/EB-Garamond-600.woff2 +0 -0
- package/dist/assets/fonts/Poppins-latin-600.woff2 +0 -0
- package/dist/assets/fonts/Poppins-latin-600italic.woff2 +0 -0
- package/dist/assets/fonts/Poppins-latin-italic.woff2 +0 -0
- package/dist/assets/fonts/Poppins-latin-regular.woff2 +0 -0
- package/dist/index.cjs +3 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1226 -398
- package/dist/index.d.cts +1880 -988
- package/dist/index.d.mts +1880 -988
- package/dist/index.mjs +3 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/dist/index.css
CHANGED
|
@@ -7,80 +7,6 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
.dds-core-dark {
|
|
10
|
-
--dds-font-family-sans: 'IBM Plex Sans', Arial, sans-serif;
|
|
11
|
-
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
12
|
-
--dds-font-size-x5: 5rem;
|
|
13
|
-
--dds-font-size-x4: 4rem;
|
|
14
|
-
--dds-font-size-x3: 3rem;
|
|
15
|
-
--dds-font-size-x2-5: 2.5rem;
|
|
16
|
-
--dds-font-size-x2: 2rem;
|
|
17
|
-
--dds-font-size-x1-5: 1.5rem;
|
|
18
|
-
--dds-font-size-x1-25: 1.25rem;
|
|
19
|
-
--dds-font-size-x1-125: 1.125rem;
|
|
20
|
-
--dds-font-size-x1: 1rem;
|
|
21
|
-
--dds-font-size-x0-875: 0.875rem;
|
|
22
|
-
--dds-font-size-x0-75: 0.75rem;
|
|
23
|
-
--dds-font-weight-light: 300;
|
|
24
|
-
--dds-font-weight-normal: 400;
|
|
25
|
-
--dds-font-weight-semi-bold: 500;
|
|
26
|
-
--dds-font-weight-bold: 600;
|
|
27
|
-
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
28
|
-
--dds-font-lineheight-x3: 1.2;
|
|
29
|
-
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
30
|
-
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
31
|
-
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
32
|
-
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
33
|
-
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
34
|
-
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
35
|
-
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
36
|
-
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
37
|
-
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
38
|
-
--dds-font-style-underline: underline;
|
|
39
|
-
--dds-font-style-normal: none;
|
|
40
|
-
--dds-font-style-italic: italic;
|
|
41
|
-
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
42
|
-
--dds-spacing-x0: 0rem;
|
|
43
|
-
--dds-spacing-x0-125: 0.125rem;
|
|
44
|
-
--dds-spacing-x0-25: 0.25rem;
|
|
45
|
-
--dds-spacing-x0-5: 0.5rem;
|
|
46
|
-
--dds-spacing-x0-75: 0.75rem;
|
|
47
|
-
--dds-spacing-x1: 1rem;
|
|
48
|
-
--dds-spacing-x1-5: 1.5rem;
|
|
49
|
-
--dds-spacing-x2: 2rem;
|
|
50
|
-
--dds-spacing-x2-5: 2.5rem;
|
|
51
|
-
--dds-spacing-x3: 3rem;
|
|
52
|
-
--dds-spacing-x4: 4rem;
|
|
53
|
-
--dds-spacing-x6: 6rem;
|
|
54
|
-
--dds-spacing-x10: 10rem;
|
|
55
|
-
--dds-grid-xs-gutter-size: 16px;
|
|
56
|
-
--dds-grid-xs-count: 4;
|
|
57
|
-
--dds-grid-sm-gutter-size: 16px;
|
|
58
|
-
--dds-grid-sm-count: 8;
|
|
59
|
-
--dds-grid-lg-gutter-size: 24px;
|
|
60
|
-
--dds-grid-lg-count: 12;
|
|
61
|
-
--dds-grid-md-gutter-size: 24px;
|
|
62
|
-
--dds-grid-md-count: 12;
|
|
63
|
-
--dds-grid-xl-gutter-size: 24px;
|
|
64
|
-
--dds-grid-xl-count: 12;
|
|
65
|
-
--dds-size-icon-large: 40px;
|
|
66
|
-
--dds-size-icon-medium: 24px;
|
|
67
|
-
--dds-size-icon-small: 16px;
|
|
68
|
-
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
69
|
-
--dds-breakpoint-xs: 1px;
|
|
70
|
-
--dds-breakpoint-sm: 600px;
|
|
71
|
-
--dds-breakpoint-md: 960px;
|
|
72
|
-
--dds-breakpoint-lg: 1280px;
|
|
73
|
-
--dds-breakpoint-xl: 1920px;
|
|
74
|
-
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
75
|
-
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
76
|
-
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
77
|
-
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
78
|
-
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
79
|
-
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
80
|
-
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
81
|
-
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
82
|
-
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
83
|
-
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
84
10
|
--dds-color-data-10-default: #62abcb;
|
|
85
11
|
--dds-color-data-10-subtle: #135774;
|
|
86
12
|
--dds-color-data-10-border: #62abcb;
|
|
@@ -201,10 +127,11 @@
|
|
|
201
127
|
--dds-color-data-09-default: #5dafad;
|
|
202
128
|
--dds-color-data-09-subtle: #006461;
|
|
203
129
|
--dds-color-data-09-border: #5dafad;
|
|
204
|
-
--dds-
|
|
205
|
-
--dds-
|
|
206
|
-
--dds-
|
|
207
|
-
--dds-
|
|
130
|
+
--dds-border-radius-button: 2px; /* For use in button component and togglebutton */
|
|
131
|
+
--dds-border-radius-surface: 4px; /* Most surfaces, for example cards, papers, messages, backgrounds in GUI */
|
|
132
|
+
--dds-border-radius-input: 2px; /* All input fields, and check boxes */
|
|
133
|
+
--dds-border-radius-chip: 4px; /* Chips and tags */
|
|
134
|
+
--dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
|
|
208
135
|
--dds-color-bg-default: #181a1c; /* UI shell base color */
|
|
209
136
|
--dds-color-bg-subtle: #22272a; /* Alternative UI shell base color */
|
|
210
137
|
--dds-color-surface-default: #181a1c; /* Default bg */
|
|
@@ -306,14 +233,90 @@
|
|
|
306
233
|
--dds-color-brand-tertiary-strong: #ffd6ca; /* Tertiary brand color */
|
|
307
234
|
--dds-color-focus-outside: #f1f8fd; /* Contrast to .inside */
|
|
308
235
|
--dds-color-focus-inside: #2a4b61; /* Contrast to .outside */
|
|
236
|
+
--dds-motion-micro-state: 200ms linear; /* Animasjon for hover og andre states. feks. selected, pressed */
|
|
237
|
+
--dds-motion-surface: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Default animasjon for fokusmarkering, åpne/lukke funksjonalitet. feks, modal, accordion etc */
|
|
238
|
+
--dds-motion-chevron: 200ms linear; /* Animert chevron */
|
|
239
|
+
--dds-motion-animation-skeleton: 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; /* Skeleton animasjon */
|
|
309
240
|
--dds-shadow-large: 8px 16px 32px 0px rgba(11, 13, 14, 80%); /* Dialoger. Eksempel: modal, drawer, popover */
|
|
310
241
|
--dds-shadow-medium: 2px 4px 8px 0px rgba(11, 13, 14, 80%); /* Dropdowns. Eksempel: overflowmenu, dropdown */
|
|
311
242
|
--dds-shadow-small: 1px 2px 4px 0px rgba(11, 13, 14, 80%); /* Eksempel: tooltip */
|
|
312
|
-
--dds-
|
|
313
|
-
--dds-
|
|
314
|
-
--dds-
|
|
315
|
-
--dds-
|
|
316
|
-
--dds-
|
|
243
|
+
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
244
|
+
--dds-spacing-x0: 0rem;
|
|
245
|
+
--dds-spacing-x0-125: 0.125rem;
|
|
246
|
+
--dds-spacing-x0-25: 0.25rem;
|
|
247
|
+
--dds-spacing-x0-5: 0.5rem;
|
|
248
|
+
--dds-spacing-x0-75: 0.75rem;
|
|
249
|
+
--dds-spacing-x1: 1rem;
|
|
250
|
+
--dds-spacing-x1-5: 1.5rem;
|
|
251
|
+
--dds-spacing-x2: 2rem;
|
|
252
|
+
--dds-spacing-x2-5: 2.5rem;
|
|
253
|
+
--dds-spacing-x3: 3rem;
|
|
254
|
+
--dds-spacing-x4: 4rem;
|
|
255
|
+
--dds-spacing-x6: 6rem;
|
|
256
|
+
--dds-spacing-x10: 10rem;
|
|
257
|
+
--dds-grid-xs-gutter-size: 16px;
|
|
258
|
+
--dds-grid-xs-count: 4;
|
|
259
|
+
--dds-grid-sm-gutter-size: 16px;
|
|
260
|
+
--dds-grid-sm-count: 8;
|
|
261
|
+
--dds-grid-lg-gutter-size: 24px;
|
|
262
|
+
--dds-grid-lg-count: 12;
|
|
263
|
+
--dds-grid-md-gutter-size: 24px;
|
|
264
|
+
--dds-grid-md-count: 12;
|
|
265
|
+
--dds-grid-xl-gutter-size: 24px;
|
|
266
|
+
--dds-grid-xl-count: 12;
|
|
267
|
+
--dds-size-icon-large: 40px;
|
|
268
|
+
--dds-size-icon-medium: 24px;
|
|
269
|
+
--dds-size-icon-small: 16px;
|
|
270
|
+
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
271
|
+
--dds-breakpoint-xs: 1px;
|
|
272
|
+
--dds-breakpoint-sm: 600px;
|
|
273
|
+
--dds-breakpoint-md: 960px;
|
|
274
|
+
--dds-breakpoint-lg: 1280px;
|
|
275
|
+
--dds-breakpoint-xl: 1920px;
|
|
276
|
+
--dds-font-family-sans-domstol: 'IBM Plex Sans', Arial, sans-serif;
|
|
277
|
+
--dds-font-family-sans-supreme: Poppins, Arial, sans-serif;
|
|
278
|
+
--dds-font-family-serif-supreme: 'EB Garamond', serif;
|
|
279
|
+
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
280
|
+
--dds-font-size-x5: 5rem;
|
|
281
|
+
--dds-font-size-x4: 4rem;
|
|
282
|
+
--dds-font-size-x3: 3rem;
|
|
283
|
+
--dds-font-size-x2-5: 2.5rem;
|
|
284
|
+
--dds-font-size-x2: 2rem;
|
|
285
|
+
--dds-font-size-x1-5: 1.5rem;
|
|
286
|
+
--dds-font-size-x1-25: 1.25rem;
|
|
287
|
+
--dds-font-size-x1-125: 1.125rem;
|
|
288
|
+
--dds-font-size-x1: 1rem;
|
|
289
|
+
--dds-font-size-x0-875: 0.875rem;
|
|
290
|
+
--dds-font-size-x0-75: 0.75rem;
|
|
291
|
+
--dds-font-weight-light: 300;
|
|
292
|
+
--dds-font-weight-regular: 400;
|
|
293
|
+
--dds-font-weight-semi-bold: 500;
|
|
294
|
+
--dds-font-weight-bold: 600;
|
|
295
|
+
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
296
|
+
--dds-font-lineheight-x3: 1.2;
|
|
297
|
+
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
298
|
+
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
299
|
+
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
300
|
+
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
301
|
+
--dds-font-letter-spacing-xloose: 0.09em;
|
|
302
|
+
--dds-font-style-underline: underline;
|
|
303
|
+
--dds-font-style-normal: none;
|
|
304
|
+
--dds-font-style-italic: italic;
|
|
305
|
+
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
306
|
+
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
307
|
+
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
308
|
+
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
309
|
+
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
310
|
+
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
311
|
+
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
312
|
+
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
313
|
+
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
314
|
+
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
315
|
+
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
316
|
+
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
317
|
+
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
318
|
+
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
319
|
+
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
317
320
|
--dds-font-label-medium: 600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Label for form components */
|
|
318
321
|
--dds-font-body-long-xsmall: 400 0.75rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Xsmall body text for editorial content */
|
|
319
322
|
--dds-font-body-long-small: 400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Small body text for editorial content */
|
|
@@ -323,8 +326,8 @@
|
|
|
323
326
|
--dds-font-heading-xsmall: 600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h5 */
|
|
324
327
|
--dds-font-heading-small: 600 1rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h4 */
|
|
325
328
|
--dds-font-heading-medium: 600 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h3 */
|
|
326
|
-
--dds-font-heading-large: 400
|
|
327
|
-
--dds-font-heading-xlarge: 400
|
|
329
|
+
--dds-font-heading-large: 400 1.5rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h2 */
|
|
330
|
+
--dds-font-heading-xlarge: 400 2rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default H1 */
|
|
328
331
|
--dds-font-heading-xxlarge: 300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Display or extra large page title (h1) */
|
|
329
332
|
--dds-font-lead-medium: 300 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Lead brukes som ingress når man skriver artikler etc */
|
|
330
333
|
--dds-font-code-medium: 400 1rem/1.5 'IBM Plex Mono', 'Courier New', monospace; /* Brukes for kodesnutter etc */
|
|
@@ -379,80 +382,6 @@
|
|
|
379
382
|
*/
|
|
380
383
|
|
|
381
384
|
.dds-core-light {
|
|
382
|
-
--dds-font-family-sans: 'IBM Plex Sans', Arial, sans-serif;
|
|
383
|
-
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
384
|
-
--dds-font-size-x5: 5rem;
|
|
385
|
-
--dds-font-size-x4: 4rem;
|
|
386
|
-
--dds-font-size-x3: 3rem;
|
|
387
|
-
--dds-font-size-x2-5: 2.5rem;
|
|
388
|
-
--dds-font-size-x2: 2rem;
|
|
389
|
-
--dds-font-size-x1-5: 1.5rem;
|
|
390
|
-
--dds-font-size-x1-25: 1.25rem;
|
|
391
|
-
--dds-font-size-x1-125: 1.125rem;
|
|
392
|
-
--dds-font-size-x1: 1rem;
|
|
393
|
-
--dds-font-size-x0-875: 0.875rem;
|
|
394
|
-
--dds-font-size-x0-75: 0.75rem;
|
|
395
|
-
--dds-font-weight-light: 300;
|
|
396
|
-
--dds-font-weight-normal: 400;
|
|
397
|
-
--dds-font-weight-semi-bold: 500;
|
|
398
|
-
--dds-font-weight-bold: 600;
|
|
399
|
-
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
400
|
-
--dds-font-lineheight-x3: 1.2;
|
|
401
|
-
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
402
|
-
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
403
|
-
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
404
|
-
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
405
|
-
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
406
|
-
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
407
|
-
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
408
|
-
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
409
|
-
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
410
|
-
--dds-font-style-underline: underline;
|
|
411
|
-
--dds-font-style-normal: none;
|
|
412
|
-
--dds-font-style-italic: italic;
|
|
413
|
-
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
414
|
-
--dds-spacing-x0: 0rem;
|
|
415
|
-
--dds-spacing-x0-125: 0.125rem;
|
|
416
|
-
--dds-spacing-x0-25: 0.25rem;
|
|
417
|
-
--dds-spacing-x0-5: 0.5rem;
|
|
418
|
-
--dds-spacing-x0-75: 0.75rem;
|
|
419
|
-
--dds-spacing-x1: 1rem;
|
|
420
|
-
--dds-spacing-x1-5: 1.5rem;
|
|
421
|
-
--dds-spacing-x2: 2rem;
|
|
422
|
-
--dds-spacing-x2-5: 2.5rem;
|
|
423
|
-
--dds-spacing-x3: 3rem;
|
|
424
|
-
--dds-spacing-x4: 4rem;
|
|
425
|
-
--dds-spacing-x6: 6rem;
|
|
426
|
-
--dds-spacing-x10: 10rem;
|
|
427
|
-
--dds-grid-xs-gutter-size: 16px;
|
|
428
|
-
--dds-grid-xs-count: 4;
|
|
429
|
-
--dds-grid-sm-gutter-size: 16px;
|
|
430
|
-
--dds-grid-sm-count: 8;
|
|
431
|
-
--dds-grid-lg-gutter-size: 24px;
|
|
432
|
-
--dds-grid-lg-count: 12;
|
|
433
|
-
--dds-grid-md-gutter-size: 24px;
|
|
434
|
-
--dds-grid-md-count: 12;
|
|
435
|
-
--dds-grid-xl-gutter-size: 24px;
|
|
436
|
-
--dds-grid-xl-count: 12;
|
|
437
|
-
--dds-size-icon-large: 40px;
|
|
438
|
-
--dds-size-icon-medium: 24px;
|
|
439
|
-
--dds-size-icon-small: 16px;
|
|
440
|
-
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
441
|
-
--dds-breakpoint-xs: 1px;
|
|
442
|
-
--dds-breakpoint-sm: 600px;
|
|
443
|
-
--dds-breakpoint-md: 960px;
|
|
444
|
-
--dds-breakpoint-lg: 1280px;
|
|
445
|
-
--dds-breakpoint-xl: 1920px;
|
|
446
|
-
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
447
|
-
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
448
|
-
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
449
|
-
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
450
|
-
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
451
|
-
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
452
|
-
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
453
|
-
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
454
|
-
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
455
|
-
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
456
385
|
--dds-color-data-10-default: #196b8f;
|
|
457
386
|
--dds-color-data-10-subtle: #93cee6;
|
|
458
387
|
--dds-color-data-10-border: #196b8f;
|
|
@@ -573,10 +502,11 @@
|
|
|
573
502
|
--dds-color-data-09-default: #007d79;
|
|
574
503
|
--dds-color-data-09-subtle: #90ccc9;
|
|
575
504
|
--dds-color-data-09-border: #007d79;
|
|
576
|
-
--dds-
|
|
577
|
-
--dds-
|
|
578
|
-
--dds-
|
|
579
|
-
--dds-
|
|
505
|
+
--dds-border-radius-button: 2px; /* For use in button component and togglebutton */
|
|
506
|
+
--dds-border-radius-surface: 4px; /* Most surfaces, for example cards, papers, messages, backgrounds in GUI */
|
|
507
|
+
--dds-border-radius-input: 2px; /* All input fields, and check boxes */
|
|
508
|
+
--dds-border-radius-chip: 4px; /* Chips and tags */
|
|
509
|
+
--dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
|
|
580
510
|
--dds-color-bg-default: #ffffff; /* UI shell base color */
|
|
581
511
|
--dds-color-bg-subtle: #f1f3f4; /* Alternative UI shell base color */
|
|
582
512
|
--dds-color-surface-default: #ffffff; /* Default bg */
|
|
@@ -678,25 +608,101 @@
|
|
|
678
608
|
--dds-color-brand-tertiary-strong: #d45d32; /* Tertiary brand color */
|
|
679
609
|
--dds-color-focus-outside: #2a4b61; /* Contrast to .inside */
|
|
680
610
|
--dds-color-focus-inside: #f1f8fd; /* Contrast to .outside */
|
|
611
|
+
--dds-motion-micro-state: 200ms linear; /* Animasjon for hover og andre states. feks. selected, pressed */
|
|
612
|
+
--dds-motion-surface: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Default animasjon for fokusmarkering, åpne/lukke funksjonalitet. feks, modal, accordion etc */
|
|
613
|
+
--dds-motion-chevron: 200ms linear; /* Animert chevron */
|
|
614
|
+
--dds-motion-animation-skeleton: 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; /* Skeleton animasjon */
|
|
681
615
|
--dds-shadow-large: 8px 16px 32px 0px rgba(11, 13, 14, 10%); /* Dialoger. Eksempel: modal, drawer, popover */
|
|
682
616
|
--dds-shadow-medium: 2px 4px 8px 0px rgba(11, 13, 14, 10%); /* Dropdowns. Eksempel: overflowmenu, dropdown */
|
|
683
617
|
--dds-shadow-small: 1px 2px 4px 0px rgba(11, 13, 14, 10%); /* Eksempel: tooltip */
|
|
684
|
-
--dds-
|
|
685
|
-
--dds-
|
|
686
|
-
--dds-
|
|
687
|
-
--dds-
|
|
688
|
-
--dds-
|
|
689
|
-
--dds-
|
|
690
|
-
--dds-
|
|
691
|
-
--dds-
|
|
692
|
-
--dds-
|
|
618
|
+
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
619
|
+
--dds-spacing-x0: 0rem;
|
|
620
|
+
--dds-spacing-x0-125: 0.125rem;
|
|
621
|
+
--dds-spacing-x0-25: 0.25rem;
|
|
622
|
+
--dds-spacing-x0-5: 0.5rem;
|
|
623
|
+
--dds-spacing-x0-75: 0.75rem;
|
|
624
|
+
--dds-spacing-x1: 1rem;
|
|
625
|
+
--dds-spacing-x1-5: 1.5rem;
|
|
626
|
+
--dds-spacing-x2: 2rem;
|
|
627
|
+
--dds-spacing-x2-5: 2.5rem;
|
|
628
|
+
--dds-spacing-x3: 3rem;
|
|
629
|
+
--dds-spacing-x4: 4rem;
|
|
630
|
+
--dds-spacing-x6: 6rem;
|
|
631
|
+
--dds-spacing-x10: 10rem;
|
|
632
|
+
--dds-grid-xs-gutter-size: 16px;
|
|
633
|
+
--dds-grid-xs-count: 4;
|
|
634
|
+
--dds-grid-sm-gutter-size: 16px;
|
|
635
|
+
--dds-grid-sm-count: 8;
|
|
636
|
+
--dds-grid-lg-gutter-size: 24px;
|
|
637
|
+
--dds-grid-lg-count: 12;
|
|
638
|
+
--dds-grid-md-gutter-size: 24px;
|
|
639
|
+
--dds-grid-md-count: 12;
|
|
640
|
+
--dds-grid-xl-gutter-size: 24px;
|
|
641
|
+
--dds-grid-xl-count: 12;
|
|
642
|
+
--dds-size-icon-large: 40px;
|
|
643
|
+
--dds-size-icon-medium: 24px;
|
|
644
|
+
--dds-size-icon-small: 16px;
|
|
645
|
+
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
646
|
+
--dds-breakpoint-xs: 1px;
|
|
647
|
+
--dds-breakpoint-sm: 600px;
|
|
648
|
+
--dds-breakpoint-md: 960px;
|
|
649
|
+
--dds-breakpoint-lg: 1280px;
|
|
650
|
+
--dds-breakpoint-xl: 1920px;
|
|
651
|
+
--dds-font-family-sans-domstol: 'IBM Plex Sans', Arial, sans-serif;
|
|
652
|
+
--dds-font-family-sans-supreme: Poppins, Arial, sans-serif;
|
|
653
|
+
--dds-font-family-serif-supreme: 'EB Garamond', serif;
|
|
654
|
+
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
655
|
+
--dds-font-size-x5: 5rem;
|
|
656
|
+
--dds-font-size-x4: 4rem;
|
|
657
|
+
--dds-font-size-x3: 3rem;
|
|
658
|
+
--dds-font-size-x2-5: 2.5rem;
|
|
659
|
+
--dds-font-size-x2: 2rem;
|
|
660
|
+
--dds-font-size-x1-5: 1.5rem;
|
|
661
|
+
--dds-font-size-x1-25: 1.25rem;
|
|
662
|
+
--dds-font-size-x1-125: 1.125rem;
|
|
663
|
+
--dds-font-size-x1: 1rem;
|
|
664
|
+
--dds-font-size-x0-875: 0.875rem;
|
|
665
|
+
--dds-font-size-x0-75: 0.75rem;
|
|
666
|
+
--dds-font-weight-light: 300;
|
|
667
|
+
--dds-font-weight-regular: 400;
|
|
668
|
+
--dds-font-weight-semi-bold: 500;
|
|
669
|
+
--dds-font-weight-bold: 600;
|
|
670
|
+
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
671
|
+
--dds-font-lineheight-x3: 1.2;
|
|
672
|
+
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
673
|
+
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
674
|
+
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
675
|
+
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
676
|
+
--dds-font-letter-spacing-xloose: 0.09em;
|
|
677
|
+
--dds-font-style-underline: underline;
|
|
678
|
+
--dds-font-style-normal: none;
|
|
679
|
+
--dds-font-style-italic: italic;
|
|
680
|
+
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
681
|
+
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
682
|
+
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
683
|
+
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
684
|
+
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
685
|
+
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
686
|
+
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
687
|
+
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
688
|
+
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
689
|
+
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
690
|
+
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
691
|
+
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
692
|
+
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
693
|
+
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
694
|
+
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
695
|
+
--dds-font-label-medium: 600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Label for form components */
|
|
696
|
+
--dds-font-body-long-xsmall: 400 0.75rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Xsmall body text for editorial content */
|
|
697
|
+
--dds-font-body-long-small: 400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Small body text for editorial content */
|
|
698
|
+
--dds-font-body-long-medium: 400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default body text for editorial content */
|
|
693
699
|
--dds-font-body-long-large: 400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Large body text for editorial content */
|
|
694
700
|
--dds-font-heading-xxsmall: 600 0.75rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h6 */
|
|
695
701
|
--dds-font-heading-xsmall: 600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h5 */
|
|
696
702
|
--dds-font-heading-small: 600 1rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h4 */
|
|
697
703
|
--dds-font-heading-medium: 600 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h3 */
|
|
698
|
-
--dds-font-heading-large: 400
|
|
699
|
-
--dds-font-heading-xlarge: 400
|
|
704
|
+
--dds-font-heading-large: 400 1.5rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h2 */
|
|
705
|
+
--dds-font-heading-xlarge: 400 2rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default H1 */
|
|
700
706
|
--dds-font-heading-xxlarge: 300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Display or extra large page title (h1) */
|
|
701
707
|
--dds-font-lead-medium: 300 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Lead brukes som ingress når man skriver artikler etc */
|
|
702
708
|
--dds-font-code-medium: 400 1rem/1.5 'IBM Plex Mono', 'Courier New', monospace; /* Brukes for kodesnutter etc */
|
|
@@ -751,80 +757,6 @@
|
|
|
751
757
|
*/
|
|
752
758
|
|
|
753
759
|
.dds-public-dark {
|
|
754
|
-
--dds-font-family-sans: 'IBM Plex Sans', Arial, sans-serif;
|
|
755
|
-
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
756
|
-
--dds-font-size-x5: 5rem;
|
|
757
|
-
--dds-font-size-x4: 4rem;
|
|
758
|
-
--dds-font-size-x3: 3rem;
|
|
759
|
-
--dds-font-size-x2-5: 2.5rem;
|
|
760
|
-
--dds-font-size-x2: 2rem;
|
|
761
|
-
--dds-font-size-x1-5: 1.5rem;
|
|
762
|
-
--dds-font-size-x1-25: 1.25rem;
|
|
763
|
-
--dds-font-size-x1-125: 1.125rem;
|
|
764
|
-
--dds-font-size-x1: 1rem;
|
|
765
|
-
--dds-font-size-x0-875: 0.875rem;
|
|
766
|
-
--dds-font-size-x0-75: 0.75rem;
|
|
767
|
-
--dds-font-weight-light: 300;
|
|
768
|
-
--dds-font-weight-normal: 400;
|
|
769
|
-
--dds-font-weight-semi-bold: 500;
|
|
770
|
-
--dds-font-weight-bold: 600;
|
|
771
|
-
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
772
|
-
--dds-font-lineheight-x3: 1.2;
|
|
773
|
-
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
774
|
-
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
775
|
-
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
776
|
-
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
777
|
-
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
778
|
-
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
779
|
-
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
780
|
-
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
781
|
-
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
782
|
-
--dds-font-style-underline: underline;
|
|
783
|
-
--dds-font-style-normal: none;
|
|
784
|
-
--dds-font-style-italic: italic;
|
|
785
|
-
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
786
|
-
--dds-spacing-x0: 0rem;
|
|
787
|
-
--dds-spacing-x0-125: 0.125rem;
|
|
788
|
-
--dds-spacing-x0-25: 0.25rem;
|
|
789
|
-
--dds-spacing-x0-5: 0.5rem;
|
|
790
|
-
--dds-spacing-x0-75: 0.75rem;
|
|
791
|
-
--dds-spacing-x1: 1rem;
|
|
792
|
-
--dds-spacing-x1-5: 1.5rem;
|
|
793
|
-
--dds-spacing-x2: 2rem;
|
|
794
|
-
--dds-spacing-x2-5: 2.5rem;
|
|
795
|
-
--dds-spacing-x3: 3rem;
|
|
796
|
-
--dds-spacing-x4: 4rem;
|
|
797
|
-
--dds-spacing-x6: 6rem;
|
|
798
|
-
--dds-spacing-x10: 10rem;
|
|
799
|
-
--dds-grid-xs-gutter-size: 16px;
|
|
800
|
-
--dds-grid-xs-count: 4;
|
|
801
|
-
--dds-grid-sm-gutter-size: 16px;
|
|
802
|
-
--dds-grid-sm-count: 8;
|
|
803
|
-
--dds-grid-lg-gutter-size: 24px;
|
|
804
|
-
--dds-grid-lg-count: 12;
|
|
805
|
-
--dds-grid-md-gutter-size: 24px;
|
|
806
|
-
--dds-grid-md-count: 12;
|
|
807
|
-
--dds-grid-xl-gutter-size: 24px;
|
|
808
|
-
--dds-grid-xl-count: 12;
|
|
809
|
-
--dds-size-icon-large: 40px;
|
|
810
|
-
--dds-size-icon-medium: 24px;
|
|
811
|
-
--dds-size-icon-small: 16px;
|
|
812
|
-
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
813
|
-
--dds-breakpoint-xs: 1px;
|
|
814
|
-
--dds-breakpoint-sm: 600px;
|
|
815
|
-
--dds-breakpoint-md: 960px;
|
|
816
|
-
--dds-breakpoint-lg: 1280px;
|
|
817
|
-
--dds-breakpoint-xl: 1920px;
|
|
818
|
-
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
819
|
-
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
820
|
-
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
821
|
-
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
822
|
-
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
823
|
-
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
824
|
-
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
825
|
-
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
826
|
-
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
827
|
-
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
828
760
|
--dds-color-data-10-default: #62abcb;
|
|
829
761
|
--dds-color-data-10-subtle: #135774;
|
|
830
762
|
--dds-color-data-10-border: #62abcb;
|
|
@@ -945,10 +877,11 @@
|
|
|
945
877
|
--dds-color-data-09-default: #5dafad;
|
|
946
878
|
--dds-color-data-09-subtle: #006461;
|
|
947
879
|
--dds-color-data-09-border: #5dafad;
|
|
948
|
-
--dds-
|
|
949
|
-
--dds-
|
|
950
|
-
--dds-
|
|
951
|
-
--dds-
|
|
880
|
+
--dds-border-radius-button: 2px; /* For use in button component and togglebutton */
|
|
881
|
+
--dds-border-radius-surface: 2px; /* Most surfaces, for example cards, papers, messages, backgrounds in GUI */
|
|
882
|
+
--dds-border-radius-input: 2px; /* All input fields, and check boxes */
|
|
883
|
+
--dds-border-radius-chip: 2px; /* Chips and tags */
|
|
884
|
+
--dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
|
|
952
885
|
--dds-color-bg-default: #181a1c; /* UI shell base color */
|
|
953
886
|
--dds-color-bg-subtle: #22272a; /* Alternative UI shell base color */
|
|
954
887
|
--dds-color-surface-default: #181a1c; /* Default bg */
|
|
@@ -1050,14 +983,90 @@
|
|
|
1050
983
|
--dds-color-brand-tertiary-strong: #ffd6ca; /* Tertiary brand color */
|
|
1051
984
|
--dds-color-focus-outside: #f1f8fd; /* Contrast to .inside */
|
|
1052
985
|
--dds-color-focus-inside: #2a4b61; /* Contrast to .outside */
|
|
986
|
+
--dds-motion-micro-state: 200ms linear; /* Animasjon for hover og andre states. feks. selected, pressed */
|
|
987
|
+
--dds-motion-surface: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Default animasjon for fokusmarkering, åpne/lukke funksjonalitet. feks, modal, accordion etc */
|
|
988
|
+
--dds-motion-chevron: 200ms linear; /* Animert chevron */
|
|
989
|
+
--dds-motion-animation-skeleton: 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; /* Skeleton animasjon */
|
|
1053
990
|
--dds-shadow-large: 8px 16px 32px 0px rgba(11, 13, 14, 80%); /* Dialoger. Eksempel: modal, drawer, popover */
|
|
1054
991
|
--dds-shadow-medium: 2px 4px 8px 0px rgba(11, 13, 14, 80%); /* Dropdowns. Eksempel: overflowmenu, dropdown */
|
|
1055
992
|
--dds-shadow-small: 1px 2px 4px 0px rgba(11, 13, 14, 80%); /* Eksempel: tooltip */
|
|
1056
|
-
--dds-
|
|
1057
|
-
--dds-
|
|
1058
|
-
--dds-
|
|
1059
|
-
--dds-
|
|
1060
|
-
--dds-
|
|
993
|
+
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
994
|
+
--dds-spacing-x0: 0rem;
|
|
995
|
+
--dds-spacing-x0-125: 0.125rem;
|
|
996
|
+
--dds-spacing-x0-25: 0.25rem;
|
|
997
|
+
--dds-spacing-x0-5: 0.5rem;
|
|
998
|
+
--dds-spacing-x0-75: 0.75rem;
|
|
999
|
+
--dds-spacing-x1: 1rem;
|
|
1000
|
+
--dds-spacing-x1-5: 1.5rem;
|
|
1001
|
+
--dds-spacing-x2: 2rem;
|
|
1002
|
+
--dds-spacing-x2-5: 2.5rem;
|
|
1003
|
+
--dds-spacing-x3: 3rem;
|
|
1004
|
+
--dds-spacing-x4: 4rem;
|
|
1005
|
+
--dds-spacing-x6: 6rem;
|
|
1006
|
+
--dds-spacing-x10: 10rem;
|
|
1007
|
+
--dds-grid-xs-gutter-size: 16px;
|
|
1008
|
+
--dds-grid-xs-count: 4;
|
|
1009
|
+
--dds-grid-sm-gutter-size: 16px;
|
|
1010
|
+
--dds-grid-sm-count: 8;
|
|
1011
|
+
--dds-grid-lg-gutter-size: 24px;
|
|
1012
|
+
--dds-grid-lg-count: 12;
|
|
1013
|
+
--dds-grid-md-gutter-size: 24px;
|
|
1014
|
+
--dds-grid-md-count: 12;
|
|
1015
|
+
--dds-grid-xl-gutter-size: 24px;
|
|
1016
|
+
--dds-grid-xl-count: 12;
|
|
1017
|
+
--dds-size-icon-large: 40px;
|
|
1018
|
+
--dds-size-icon-medium: 24px;
|
|
1019
|
+
--dds-size-icon-small: 16px;
|
|
1020
|
+
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
1021
|
+
--dds-breakpoint-xs: 1px;
|
|
1022
|
+
--dds-breakpoint-sm: 600px;
|
|
1023
|
+
--dds-breakpoint-md: 960px;
|
|
1024
|
+
--dds-breakpoint-lg: 1280px;
|
|
1025
|
+
--dds-breakpoint-xl: 1920px;
|
|
1026
|
+
--dds-font-family-sans-domstol: 'IBM Plex Sans', Arial, sans-serif;
|
|
1027
|
+
--dds-font-family-sans-supreme: Poppins, Arial, sans-serif;
|
|
1028
|
+
--dds-font-family-serif-supreme: 'EB Garamond', serif;
|
|
1029
|
+
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
1030
|
+
--dds-font-size-x5: 5rem;
|
|
1031
|
+
--dds-font-size-x4: 4rem;
|
|
1032
|
+
--dds-font-size-x3: 3rem;
|
|
1033
|
+
--dds-font-size-x2-5: 2.5rem;
|
|
1034
|
+
--dds-font-size-x2: 2rem;
|
|
1035
|
+
--dds-font-size-x1-5: 1.5rem;
|
|
1036
|
+
--dds-font-size-x1-25: 1.25rem;
|
|
1037
|
+
--dds-font-size-x1-125: 1.125rem;
|
|
1038
|
+
--dds-font-size-x1: 1rem;
|
|
1039
|
+
--dds-font-size-x0-875: 0.875rem;
|
|
1040
|
+
--dds-font-size-x0-75: 0.75rem;
|
|
1041
|
+
--dds-font-weight-light: 300;
|
|
1042
|
+
--dds-font-weight-regular: 400;
|
|
1043
|
+
--dds-font-weight-semi-bold: 500;
|
|
1044
|
+
--dds-font-weight-bold: 600;
|
|
1045
|
+
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
1046
|
+
--dds-font-lineheight-x3: 1.2;
|
|
1047
|
+
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
1048
|
+
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
1049
|
+
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
1050
|
+
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
1051
|
+
--dds-font-letter-spacing-xloose: 0.09em;
|
|
1052
|
+
--dds-font-style-underline: underline;
|
|
1053
|
+
--dds-font-style-normal: none;
|
|
1054
|
+
--dds-font-style-italic: italic;
|
|
1055
|
+
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
1056
|
+
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
1057
|
+
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
1058
|
+
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
1059
|
+
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
1060
|
+
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
1061
|
+
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
1062
|
+
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
1063
|
+
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
1064
|
+
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
1065
|
+
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
1066
|
+
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
1067
|
+
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
1068
|
+
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
1069
|
+
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
1061
1070
|
--dds-font-label-medium: 600 1rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Label for form components */
|
|
1062
1071
|
--dds-font-body-long-xsmall: 400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Xsmall body text for editorial content */
|
|
1063
1072
|
--dds-font-body-long-small: 400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Small body text for editorial content */
|
|
@@ -1067,7 +1076,7 @@
|
|
|
1067
1076
|
--dds-font-heading-xsmall: 600 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h5 */
|
|
1068
1077
|
--dds-font-heading-small: 600 1.25rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h4 */
|
|
1069
1078
|
--dds-font-heading-medium: 500 1.5rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h3 */
|
|
1070
|
-
--dds-font-heading-large: 400
|
|
1079
|
+
--dds-font-heading-large: 400 2rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h2 */
|
|
1071
1080
|
--dds-font-heading-xlarge: 300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default H1 */
|
|
1072
1081
|
--dds-font-heading-xxlarge: 300 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Display or extra large page title (h1) */
|
|
1073
1082
|
--dds-font-lead-medium: 300 1.5rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Lead brukes som ingress når man skriver artikler etc */
|
|
@@ -1123,80 +1132,6 @@
|
|
|
1123
1132
|
*/
|
|
1124
1133
|
|
|
1125
1134
|
.dds-public-light {
|
|
1126
|
-
--dds-font-family-sans: 'IBM Plex Sans', Arial, sans-serif;
|
|
1127
|
-
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
1128
|
-
--dds-font-size-x5: 5rem;
|
|
1129
|
-
--dds-font-size-x4: 4rem;
|
|
1130
|
-
--dds-font-size-x3: 3rem;
|
|
1131
|
-
--dds-font-size-x2-5: 2.5rem;
|
|
1132
|
-
--dds-font-size-x2: 2rem;
|
|
1133
|
-
--dds-font-size-x1-5: 1.5rem;
|
|
1134
|
-
--dds-font-size-x1-25: 1.25rem;
|
|
1135
|
-
--dds-font-size-x1-125: 1.125rem;
|
|
1136
|
-
--dds-font-size-x1: 1rem;
|
|
1137
|
-
--dds-font-size-x0-875: 0.875rem;
|
|
1138
|
-
--dds-font-size-x0-75: 0.75rem;
|
|
1139
|
-
--dds-font-weight-light: 300;
|
|
1140
|
-
--dds-font-weight-normal: 400;
|
|
1141
|
-
--dds-font-weight-semi-bold: 500;
|
|
1142
|
-
--dds-font-weight-bold: 600;
|
|
1143
|
-
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
1144
|
-
--dds-font-lineheight-x3: 1.2;
|
|
1145
|
-
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
1146
|
-
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
1147
|
-
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
1148
|
-
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
1149
|
-
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
1150
|
-
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
1151
|
-
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
1152
|
-
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
1153
|
-
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
1154
|
-
--dds-font-style-underline: underline;
|
|
1155
|
-
--dds-font-style-normal: none;
|
|
1156
|
-
--dds-font-style-italic: italic;
|
|
1157
|
-
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
1158
|
-
--dds-spacing-x0: 0rem;
|
|
1159
|
-
--dds-spacing-x0-125: 0.125rem;
|
|
1160
|
-
--dds-spacing-x0-25: 0.25rem;
|
|
1161
|
-
--dds-spacing-x0-5: 0.5rem;
|
|
1162
|
-
--dds-spacing-x0-75: 0.75rem;
|
|
1163
|
-
--dds-spacing-x1: 1rem;
|
|
1164
|
-
--dds-spacing-x1-5: 1.5rem;
|
|
1165
|
-
--dds-spacing-x2: 2rem;
|
|
1166
|
-
--dds-spacing-x2-5: 2.5rem;
|
|
1167
|
-
--dds-spacing-x3: 3rem;
|
|
1168
|
-
--dds-spacing-x4: 4rem;
|
|
1169
|
-
--dds-spacing-x6: 6rem;
|
|
1170
|
-
--dds-spacing-x10: 10rem;
|
|
1171
|
-
--dds-grid-xs-gutter-size: 16px;
|
|
1172
|
-
--dds-grid-xs-count: 4;
|
|
1173
|
-
--dds-grid-sm-gutter-size: 16px;
|
|
1174
|
-
--dds-grid-sm-count: 8;
|
|
1175
|
-
--dds-grid-lg-gutter-size: 24px;
|
|
1176
|
-
--dds-grid-lg-count: 12;
|
|
1177
|
-
--dds-grid-md-gutter-size: 24px;
|
|
1178
|
-
--dds-grid-md-count: 12;
|
|
1179
|
-
--dds-grid-xl-gutter-size: 24px;
|
|
1180
|
-
--dds-grid-xl-count: 12;
|
|
1181
|
-
--dds-size-icon-large: 40px;
|
|
1182
|
-
--dds-size-icon-medium: 24px;
|
|
1183
|
-
--dds-size-icon-small: 16px;
|
|
1184
|
-
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
1185
|
-
--dds-breakpoint-xs: 1px;
|
|
1186
|
-
--dds-breakpoint-sm: 600px;
|
|
1187
|
-
--dds-breakpoint-md: 960px;
|
|
1188
|
-
--dds-breakpoint-lg: 1280px;
|
|
1189
|
-
--dds-breakpoint-xl: 1920px;
|
|
1190
|
-
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
1191
|
-
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
1192
|
-
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
1193
|
-
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
1194
|
-
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
1195
|
-
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
1196
|
-
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
1197
|
-
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
1198
|
-
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
1199
|
-
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
1200
1135
|
--dds-color-data-10-default: #196b8f;
|
|
1201
1136
|
--dds-color-data-10-subtle: #93cee6;
|
|
1202
1137
|
--dds-color-data-10-border: #196b8f;
|
|
@@ -1317,10 +1252,11 @@
|
|
|
1317
1252
|
--dds-color-data-09-default: #007d79;
|
|
1318
1253
|
--dds-color-data-09-subtle: #90ccc9;
|
|
1319
1254
|
--dds-color-data-09-border: #007d79;
|
|
1320
|
-
--dds-
|
|
1321
|
-
--dds-
|
|
1322
|
-
--dds-
|
|
1323
|
-
--dds-
|
|
1255
|
+
--dds-border-radius-button: 2px; /* For use in button component and togglebutton */
|
|
1256
|
+
--dds-border-radius-surface: 2px; /* Most surfaces, for example cards, papers, messages, backgrounds in GUI */
|
|
1257
|
+
--dds-border-radius-input: 2px; /* All input fields, and check boxes */
|
|
1258
|
+
--dds-border-radius-chip: 2px; /* Chips and tags */
|
|
1259
|
+
--dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
|
|
1324
1260
|
--dds-color-bg-default: #ffffff; /* UI shell base color */
|
|
1325
1261
|
--dds-color-bg-subtle: #f1f3f4; /* Alternative UI shell base color */
|
|
1326
1262
|
--dds-color-surface-default: #ffffff; /* Default bg */
|
|
@@ -1422,14 +1358,90 @@
|
|
|
1422
1358
|
--dds-color-brand-tertiary-strong: #d45d32; /* Tertiary brand color */
|
|
1423
1359
|
--dds-color-focus-outside: #2a4b61; /* Contrast to .inside */
|
|
1424
1360
|
--dds-color-focus-inside: #f1f8fd; /* Contrast to .outside */
|
|
1361
|
+
--dds-motion-micro-state: 200ms linear; /* Animasjon for hover og andre states. feks. selected, pressed */
|
|
1362
|
+
--dds-motion-surface: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Default animasjon for fokusmarkering, åpne/lukke funksjonalitet. feks, modal, accordion etc */
|
|
1363
|
+
--dds-motion-chevron: 200ms linear; /* Animert chevron */
|
|
1364
|
+
--dds-motion-animation-skeleton: 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; /* Skeleton animasjon */
|
|
1425
1365
|
--dds-shadow-large: 8px 16px 32px 0px rgba(11, 13, 14, 10%); /* Dialoger. Eksempel: modal, drawer, popover */
|
|
1426
1366
|
--dds-shadow-medium: 2px 4px 8px 0px rgba(11, 13, 14, 10%); /* Dropdowns. Eksempel: overflowmenu, dropdown */
|
|
1427
1367
|
--dds-shadow-small: 1px 2px 4px 0px rgba(11, 13, 14, 10%); /* Eksempel: tooltip */
|
|
1428
|
-
--dds-
|
|
1429
|
-
--dds-
|
|
1430
|
-
--dds-
|
|
1431
|
-
--dds-
|
|
1432
|
-
--dds-
|
|
1368
|
+
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
1369
|
+
--dds-spacing-x0: 0rem;
|
|
1370
|
+
--dds-spacing-x0-125: 0.125rem;
|
|
1371
|
+
--dds-spacing-x0-25: 0.25rem;
|
|
1372
|
+
--dds-spacing-x0-5: 0.5rem;
|
|
1373
|
+
--dds-spacing-x0-75: 0.75rem;
|
|
1374
|
+
--dds-spacing-x1: 1rem;
|
|
1375
|
+
--dds-spacing-x1-5: 1.5rem;
|
|
1376
|
+
--dds-spacing-x2: 2rem;
|
|
1377
|
+
--dds-spacing-x2-5: 2.5rem;
|
|
1378
|
+
--dds-spacing-x3: 3rem;
|
|
1379
|
+
--dds-spacing-x4: 4rem;
|
|
1380
|
+
--dds-spacing-x6: 6rem;
|
|
1381
|
+
--dds-spacing-x10: 10rem;
|
|
1382
|
+
--dds-grid-xs-gutter-size: 16px;
|
|
1383
|
+
--dds-grid-xs-count: 4;
|
|
1384
|
+
--dds-grid-sm-gutter-size: 16px;
|
|
1385
|
+
--dds-grid-sm-count: 8;
|
|
1386
|
+
--dds-grid-lg-gutter-size: 24px;
|
|
1387
|
+
--dds-grid-lg-count: 12;
|
|
1388
|
+
--dds-grid-md-gutter-size: 24px;
|
|
1389
|
+
--dds-grid-md-count: 12;
|
|
1390
|
+
--dds-grid-xl-gutter-size: 24px;
|
|
1391
|
+
--dds-grid-xl-count: 12;
|
|
1392
|
+
--dds-size-icon-large: 40px;
|
|
1393
|
+
--dds-size-icon-medium: 24px;
|
|
1394
|
+
--dds-size-icon-small: 16px;
|
|
1395
|
+
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
1396
|
+
--dds-breakpoint-xs: 1px;
|
|
1397
|
+
--dds-breakpoint-sm: 600px;
|
|
1398
|
+
--dds-breakpoint-md: 960px;
|
|
1399
|
+
--dds-breakpoint-lg: 1280px;
|
|
1400
|
+
--dds-breakpoint-xl: 1920px;
|
|
1401
|
+
--dds-font-family-sans-domstol: 'IBM Plex Sans', Arial, sans-serif;
|
|
1402
|
+
--dds-font-family-sans-supreme: Poppins, Arial, sans-serif;
|
|
1403
|
+
--dds-font-family-serif-supreme: 'EB Garamond', serif;
|
|
1404
|
+
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
1405
|
+
--dds-font-size-x5: 5rem;
|
|
1406
|
+
--dds-font-size-x4: 4rem;
|
|
1407
|
+
--dds-font-size-x3: 3rem;
|
|
1408
|
+
--dds-font-size-x2-5: 2.5rem;
|
|
1409
|
+
--dds-font-size-x2: 2rem;
|
|
1410
|
+
--dds-font-size-x1-5: 1.5rem;
|
|
1411
|
+
--dds-font-size-x1-25: 1.25rem;
|
|
1412
|
+
--dds-font-size-x1-125: 1.125rem;
|
|
1413
|
+
--dds-font-size-x1: 1rem;
|
|
1414
|
+
--dds-font-size-x0-875: 0.875rem;
|
|
1415
|
+
--dds-font-size-x0-75: 0.75rem;
|
|
1416
|
+
--dds-font-weight-light: 300;
|
|
1417
|
+
--dds-font-weight-regular: 400;
|
|
1418
|
+
--dds-font-weight-semi-bold: 500;
|
|
1419
|
+
--dds-font-weight-bold: 600;
|
|
1420
|
+
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
1421
|
+
--dds-font-lineheight-x3: 1.2;
|
|
1422
|
+
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
1423
|
+
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
1424
|
+
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
1425
|
+
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
1426
|
+
--dds-font-letter-spacing-xloose: 0.09em;
|
|
1427
|
+
--dds-font-style-underline: underline;
|
|
1428
|
+
--dds-font-style-normal: none;
|
|
1429
|
+
--dds-font-style-italic: italic;
|
|
1430
|
+
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
1431
|
+
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
1432
|
+
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
1433
|
+
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
1434
|
+
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
1435
|
+
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
1436
|
+
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
1437
|
+
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
1438
|
+
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
1439
|
+
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
1440
|
+
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
1441
|
+
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
1442
|
+
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
1443
|
+
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
1444
|
+
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
1433
1445
|
--dds-font-label-medium: 600 1rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Label for form components */
|
|
1434
1446
|
--dds-font-body-long-xsmall: 400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Xsmall body text for editorial content */
|
|
1435
1447
|
--dds-font-body-long-small: 400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Small body text for editorial content */
|
|
@@ -1439,7 +1451,7 @@
|
|
|
1439
1451
|
--dds-font-heading-xsmall: 600 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h5 */
|
|
1440
1452
|
--dds-font-heading-small: 600 1.25rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h4 */
|
|
1441
1453
|
--dds-font-heading-medium: 500 1.5rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h3 */
|
|
1442
|
-
--dds-font-heading-large: 400
|
|
1454
|
+
--dds-font-heading-large: 400 2rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h2 */
|
|
1443
1455
|
--dds-font-heading-xlarge: 300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default H1 */
|
|
1444
1456
|
--dds-font-heading-xxlarge: 300 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Display or extra large page title (h1) */
|
|
1445
1457
|
--dds-font-lead-medium: 300 1.5rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Lead brukes som ingress når man skriver artikler etc */
|
|
@@ -1489,64 +1501,880 @@
|
|
|
1489
1501
|
--dds-size-height-input-small: 2.5rem; /* Brukes i input og buttons */
|
|
1490
1502
|
--dds-size-height-input-xsmall: 1.8125rem; /* Brukes i input og buttons */
|
|
1491
1503
|
}
|
|
1492
|
-
@font-face {
|
|
1493
|
-
font-family: IBM Plex Sans;
|
|
1494
|
-
font-style: normal;
|
|
1495
|
-
font-weight: 100 900;
|
|
1496
|
-
font-display: swap;
|
|
1497
|
-
src:
|
|
1498
|
-
local('IBM Plex Sans'),
|
|
1499
|
-
local('IBMPlexSans'),
|
|
1500
|
-
url('./assets/fonts/IBMPlexSansVar-Roman.woff2') format('woff2-variations'),
|
|
1501
|
-
url('./assets/fonts/IBMPlexSansVar-Roman.woff2') format('woff2');
|
|
1502
|
-
}
|
|
1503
|
-
|
|
1504
|
-
@font-face {
|
|
1505
|
-
font-family: IBM Plex Sans;
|
|
1506
|
-
font-style: italic;
|
|
1507
|
-
font-weight: 100 900;
|
|
1508
|
-
font-display: swap;
|
|
1509
|
-
src:
|
|
1510
|
-
local('IBM Plex Sans'),
|
|
1511
|
-
local('IBMPlexSans'),
|
|
1512
|
-
url('./assets/fonts/IBMPlexSansVar-Italic.woff2') format('woff2-variations'),
|
|
1513
|
-
url('./assets/fonts/IBMPlexSansVar-Italic.woff2') format('woff2');
|
|
1514
|
-
}
|
|
1515
|
-
|
|
1516
|
-
@font-face {
|
|
1517
|
-
font-family: IBM Plex Mono;
|
|
1518
|
-
font-style: normal;
|
|
1519
|
-
font-weight: 400;
|
|
1520
|
-
font-display: swap;
|
|
1521
|
-
src:
|
|
1522
|
-
local('IBM Plex Mono'),
|
|
1523
|
-
local('IBMPlexMono'),
|
|
1524
|
-
url('./assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'),
|
|
1525
|
-
url('./assets/fonts/IBMPlexMono-Regular.woff') format('woff');
|
|
1526
|
-
}
|
|
1527
1504
|
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
font-weight: 300;
|
|
1532
|
-
font-display: swap;
|
|
1533
|
-
src:
|
|
1534
|
-
local('IBM Plex Mono Light'),
|
|
1535
|
-
local('IBMPlexMono-Light'),
|
|
1536
|
-
url('./assets/fonts/IBMPlexMono-Light.woff2') format('woff2'),
|
|
1537
|
-
url('./assets/fonts/IBMPlexMono-Light.woff') format('woff');
|
|
1538
|
-
}
|
|
1505
|
+
/**
|
|
1506
|
+
* Do not edit directly, this file was auto-generated.
|
|
1507
|
+
*/
|
|
1539
1508
|
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1509
|
+
.dds-supreme-dark {
|
|
1510
|
+
--dds-color-data-10-default: #62abcb;
|
|
1511
|
+
--dds-color-data-10-subtle: #135774;
|
|
1512
|
+
--dds-color-data-10-border: #62abcb;
|
|
1513
|
+
--dds-color-data-red-100: #f8d2d4;
|
|
1514
|
+
--dds-color-data-red-200: #f0a5a9;
|
|
1515
|
+
--dds-color-data-red-300: #f4858b;
|
|
1516
|
+
--dds-color-data-red-400: #e14b53;
|
|
1517
|
+
--dds-color-data-red-500: #da1e28;
|
|
1518
|
+
--dds-color-data-red-600: #ae1820;
|
|
1519
|
+
--dds-color-data-red-700: #831218;
|
|
1520
|
+
--dds-color-data-red-800: #570c10;
|
|
1521
|
+
--dds-color-data-red-900: #2c0608;
|
|
1522
|
+
--dds-color-data-magenta-100: #f7d9f2;
|
|
1523
|
+
--dds-color-data-magenta-200: #edb5e4;
|
|
1524
|
+
--dds-color-data-magenta-300: #e079d0;
|
|
1525
|
+
--dds-color-data-magenta-400: #d54dc0;
|
|
1526
|
+
--dds-color-data-magenta-500: #cb20b0;
|
|
1527
|
+
--dds-color-data-magenta-600: #a21a8d;
|
|
1528
|
+
--dds-color-data-magenta-700: #7a136a;
|
|
1529
|
+
--dds-color-data-magenta-800: #510d46;
|
|
1530
|
+
--dds-color-data-magenta-900: #290623;
|
|
1531
|
+
--dds-color-data-brown-100: #f0ddd5;
|
|
1532
|
+
--dds-color-data-brown-200: #e1bcac;
|
|
1533
|
+
--dds-color-data-brown-300: #d19a82;
|
|
1534
|
+
--dds-color-data-brown-400: #c27959;
|
|
1535
|
+
--dds-color-data-brown-500: #b3572f;
|
|
1536
|
+
--dds-color-data-brown-600: #8f4626;
|
|
1537
|
+
--dds-color-data-brown-700: #6b341c;
|
|
1538
|
+
--dds-color-data-brown-800: #482313;
|
|
1539
|
+
--dds-color-data-brown-900: #241109;
|
|
1540
|
+
--dds-color-data-olive-100: #e9e7cd;
|
|
1541
|
+
--dds-color-data-olive-200: #cdc9a1;
|
|
1542
|
+
--dds-color-data-olive-300: #b3ae71;
|
|
1543
|
+
--dds-color-data-olive-400: #989344;
|
|
1544
|
+
--dds-color-data-olive-500: #7c7518;
|
|
1545
|
+
--dds-color-data-olive-600: #635e13;
|
|
1546
|
+
--dds-color-data-olive-700: #4a460e;
|
|
1547
|
+
--dds-color-data-olive-800: #322f0a;
|
|
1548
|
+
--dds-color-data-olive-900: #191705;
|
|
1549
|
+
--dds-color-data-green-100: #d7e8cf;
|
|
1550
|
+
--dds-color-data-green-200: #aed19e;
|
|
1551
|
+
--dds-color-data-green-300: #95c280;
|
|
1552
|
+
--dds-color-data-green-400: #619947;
|
|
1553
|
+
--dds-color-data-green-500: #3a8019;
|
|
1554
|
+
--dds-color-data-green-600: #2e6614;
|
|
1555
|
+
--dds-color-data-green-700: #234d0f;
|
|
1556
|
+
--dds-color-data-green-800: #17330a;
|
|
1557
|
+
--dds-color-data-green-900: #0c1a05;
|
|
1558
|
+
--dds-color-data-teal-100: #c2e2e1;
|
|
1559
|
+
--dds-color-data-teal-200: #90ccc9;
|
|
1560
|
+
--dds-color-data-teal-300: #5dafad;
|
|
1561
|
+
--dds-color-data-teal-400: #2c9390;
|
|
1562
|
+
--dds-color-data-teal-500: #007d79;
|
|
1563
|
+
--dds-color-data-teal-600: #006461;
|
|
1564
|
+
--dds-color-data-teal-700: #004b49;
|
|
1565
|
+
--dds-color-data-teal-800: #003230;
|
|
1566
|
+
--dds-color-data-teal-900: #001918;
|
|
1567
|
+
--dds-color-data-deepblue-100: #c6e3f1;
|
|
1568
|
+
--dds-color-data-deepblue-200: #93cee6;
|
|
1569
|
+
--dds-color-data-deepblue-300: #62abcb;
|
|
1570
|
+
--dds-color-data-deepblue-400: #358fb5;
|
|
1571
|
+
--dds-color-data-deepblue-500: #196b8f;
|
|
1572
|
+
--dds-color-data-deepblue-600: #135774;
|
|
1573
|
+
--dds-color-data-deepblue-700: #0e455e;
|
|
1574
|
+
--dds-color-data-deepblue-800: #0d3445;
|
|
1575
|
+
--dds-color-data-deepblue-900: #05151d;
|
|
1576
|
+
--dds-color-data-blue-100: #cfe0ff;
|
|
1577
|
+
--dds-color-data-blue-200: #9fc0ff;
|
|
1578
|
+
--dds-color-data-blue-300: #6fa1fe;
|
|
1579
|
+
--dds-color-data-blue-400: #3f81fe;
|
|
1580
|
+
--dds-color-data-blue-500: #0f62fe;
|
|
1581
|
+
--dds-color-data-blue-600: #0c4ecb;
|
|
1582
|
+
--dds-color-data-blue-700: #093b98;
|
|
1583
|
+
--dds-color-data-blue-800: #062766;
|
|
1584
|
+
--dds-color-data-blue-900: #031433;
|
|
1585
|
+
--dds-color-data-purple-100: #e8d9fe;
|
|
1586
|
+
--dds-color-data-purple-200: #d0b2fe;
|
|
1587
|
+
--dds-color-data-purple-300: #b98cfd;
|
|
1588
|
+
--dds-color-data-purple-400: #a165fd;
|
|
1589
|
+
--dds-color-data-purple-500: #8a3ffc;
|
|
1590
|
+
--dds-color-data-purple-600: #6e32ca;
|
|
1591
|
+
--dds-color-data-purple-700: #532697;
|
|
1592
|
+
--dds-color-data-purple-800: #371965;
|
|
1593
|
+
--dds-color-data-purple-900: #1c0d32;
|
|
1594
|
+
--dds-color-data-gray-100: #e3e3e3;
|
|
1595
|
+
--dds-color-data-gray-200: #c7c7c7;
|
|
1596
|
+
--dds-color-data-gray-300: #aaaaaa;
|
|
1597
|
+
--dds-color-data-gray-400: #8e8e8e;
|
|
1598
|
+
--dds-color-data-gray-500: #727272;
|
|
1599
|
+
--dds-color-data-gray-600: #5b5b5b;
|
|
1600
|
+
--dds-color-data-gray-700: #444444;
|
|
1601
|
+
--dds-color-data-gray-800: #2e2e2e;
|
|
1602
|
+
--dds-color-data-gray-900: #171717;
|
|
1603
|
+
--dds-color-data-01-default: #6fa1fe;
|
|
1604
|
+
--dds-color-data-01-subtle: #0c4ecb;
|
|
1605
|
+
--dds-color-data-01-border: #6fa1fe;
|
|
1606
|
+
--dds-color-data-02-default: #d19a82;
|
|
1607
|
+
--dds-color-data-02-subtle: #8f4626;
|
|
1608
|
+
--dds-color-data-02-border: #d19a82;
|
|
1609
|
+
--dds-color-data-03-default: #aaaaaa;
|
|
1610
|
+
--dds-color-data-03-subtle: #5b5b5b;
|
|
1611
|
+
--dds-color-data-03-border: #aaaaaa;
|
|
1612
|
+
--dds-color-data-04-default: #95c280;
|
|
1613
|
+
--dds-color-data-04-subtle: #2e6614;
|
|
1614
|
+
--dds-color-data-04-border: #95c280;
|
|
1615
|
+
--dds-color-data-05-default: #b98cfd;
|
|
1616
|
+
--dds-color-data-05-subtle: #6e32ca;
|
|
1617
|
+
--dds-color-data-05-border: #b98cfd;
|
|
1618
|
+
--dds-color-data-06-default: #e079d0;
|
|
1619
|
+
--dds-color-data-06-subtle: #a21a8d;
|
|
1620
|
+
--dds-color-data-06-border: #e079d0;
|
|
1621
|
+
--dds-color-data-07-default: #b3ae71;
|
|
1622
|
+
--dds-color-data-07-subtle: #635e13;
|
|
1623
|
+
--dds-color-data-07-border: #b3ae71;
|
|
1624
|
+
--dds-color-data-08-default: #f4858b;
|
|
1625
|
+
--dds-color-data-08-subtle: #ae1820;
|
|
1626
|
+
--dds-color-data-08-border: #f4858b;
|
|
1627
|
+
--dds-color-data-09-default: #5dafad;
|
|
1628
|
+
--dds-color-data-09-subtle: #006461;
|
|
1629
|
+
--dds-color-data-09-border: #5dafad;
|
|
1630
|
+
--dds-border-radius-button: 2px; /* For use in button component and togglebutton */
|
|
1631
|
+
--dds-border-radius-surface: 2px; /* Most surfaces, for example cards, papers, messages, backgrounds in GUI */
|
|
1632
|
+
--dds-border-radius-input: 2px; /* All input fields, and check boxes */
|
|
1633
|
+
--dds-border-radius-chip: 2px; /* Chips and tags */
|
|
1634
|
+
--dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
|
|
1635
|
+
--dds-color-bg-default: #1b1a18; /* UI shell base color */
|
|
1636
|
+
--dds-color-bg-subtle: #292824; /* Alternative UI shell base color */
|
|
1637
|
+
--dds-color-surface-default: #1b1a18; /* Default bg */
|
|
1638
|
+
--dds-color-surface-subtle: #292824; /* Subtle surface color */
|
|
1639
|
+
--dds-color-surface-medium: #363530; /* Medium surface color */
|
|
1640
|
+
--dds-color-surface-hover-default: #0b2d34; /* Hover on surface (default, subtle, medium) */
|
|
1641
|
+
--dds-color-surface-hover-subtle: #292824; /* Subtle hover on surface (default, medium) */
|
|
1642
|
+
--dds-color-surface-selected-default: #0b2d34; /* Selected state for surface (default, subtle, medium) */
|
|
1643
|
+
--dds-color-surface-inverse-default: #11454e; /* Can be used as a surface for menu, navigation, footer etc */
|
|
1644
|
+
--dds-color-surface-inverse-hover: #0e3a41; /* Hover on surface.inverse */
|
|
1645
|
+
--dds-color-surface-inverse-selected: #0b2d34; /* selected on surface.inverse */
|
|
1646
|
+
--dds-color-surface-action-resting: #79a9b2; /* Primary button bg */
|
|
1647
|
+
--dds-color-surface-action-hover: #a8c3c9; /* Hover on surface.action/selected */
|
|
1648
|
+
--dds-color-surface-action-selected: #79a9b2; /* Selected state for components such as togglebutton, togglebar, progress tracker, checkbox etc */
|
|
1649
|
+
--dds-color-surface-action-danger-resting: #e47373; /* Danger button */
|
|
1650
|
+
--dds-color-surface-action-danger-hover: #efafaf; /* Hover on surface.action-danger */
|
|
1651
|
+
--dds-color-surface-action-selected-disabled: #77838c; /* bg on a selected disabled checkbox, radio etc */
|
|
1652
|
+
--dds-color-surface-danger-default: #561616; /* tag, message, errormessage */
|
|
1653
|
+
--dds-color-surface-danger-strong: #dc4b4b; /* tag strong value */
|
|
1654
|
+
--dds-color-surface-success-default: #284c29; /* tag, message */
|
|
1655
|
+
--dds-color-surface-success-strong: #65be66; /* tag with strong value */
|
|
1656
|
+
--dds-color-surface-warning-default: #494317; /* tag, message */
|
|
1657
|
+
--dds-color-surface-warning-strong: #f4e04d; /* tag strong value */
|
|
1658
|
+
--dds-color-surface-info-default: #2a4b61; /* tag, message */
|
|
1659
|
+
--dds-color-surface-info-strong: #75b9e6; /* tag strong value */
|
|
1660
|
+
--dds-color-surface-paper-default: #363530; /* modal, drawer, popover etc */
|
|
1661
|
+
--dds-color-surface-backdrop-default: #0b0d0e80; /* background overlay for modals (50%) */
|
|
1662
|
+
--dds-color-surface-field-default: #0b0d0e; /* Form elements (textinput, datepicker etc) */
|
|
1663
|
+
--dds-color-surface-field-disabled: #303438; /* disabled state on surface.field */
|
|
1664
|
+
--dds-color-surface-highlighted-default: #594d2f; /* bg for highlighted text on text.default. Use with $Text */
|
|
1665
|
+
--dds-color-surface-scrollbar: #615f56; /* Used for scrollbar */
|
|
1666
|
+
--dds-color-surface-notification: #d83737; /* bg on a notification */
|
|
1667
|
+
--dds-color-surface-skeleton: #615f56; /* Used for skeleton */
|
|
1668
|
+
--dds-color-border-default: #878478; /* Form components, togglebutton, secondary button, checkbox etc */
|
|
1669
|
+
--dds-color-border-subtle: #615f56; /* Dropdown, tooltip, overflow etc */
|
|
1670
|
+
--dds-color-border-inverse: #a8c3c9; /* Border or divider on surface.inverse */
|
|
1671
|
+
--dds-color-border-action-default: #79a9b2; /* Used in progress tracker */
|
|
1672
|
+
--dds-color-border-action-hover: #a8c3c9; /* Hover on secondary button etc */
|
|
1673
|
+
--dds-color-border-success: #519852; /* Used with tag-default */
|
|
1674
|
+
--dds-color-border-warning: #ccba35; /* Tag.default */
|
|
1675
|
+
--dds-color-border-danger: #ad2c2c; /* Tag.default, error message field */
|
|
1676
|
+
--dds-color-border-info: #5197c5; /* Tag.default */
|
|
1677
|
+
--dds-color-border-on-action: #1b1a18; /* Used on primary split button */
|
|
1678
|
+
--dds-color-text-default: #ffffff; /* default text, heading, body. on surface.hover */
|
|
1679
|
+
--dds-color-text-medium: #e7e6e4; /* Label, etc */
|
|
1680
|
+
--dds-color-text-subtle: #cfcec9; /* Disabled or less important text */
|
|
1681
|
+
--dds-color-text-on-inverse: #ffffff; /* On surface.inverse */
|
|
1682
|
+
--dds-color-text-danger: #efafaf; /* Error text on paper, or default or subtle surafce/bg */
|
|
1683
|
+
--dds-color-text-on-action: #0b0d0e; /* On surface.action (primary and danger button) */
|
|
1684
|
+
--dds-color-text-on-status-default: #ffffff; /* On default status surfaces */
|
|
1685
|
+
--dds-color-text-on-status-strong: #0b0d0e; /* On status surfaces with strong prop */
|
|
1686
|
+
--dds-color-text-action-resting: #a8c3c9; /* Link, number in progress tracker */
|
|
1687
|
+
--dds-color-text-action-hover: #e9f1f2; /* Hover on text.action */
|
|
1688
|
+
--dds-color-text-requiredfield: #efafaf; /* Asterix to indicate required field */
|
|
1689
|
+
--dds-color-text-action-visited: #cca9e1; /* Used for visited links */
|
|
1690
|
+
--dds-color-text-action-visited-on-inverse: #f2eaf8; /* Used for visited links on inverse surfaces */
|
|
1691
|
+
--dds-color-text-on-notification: #ffffff; /* Used on surface.notification */
|
|
1692
|
+
--dds-color-text-on-primary-default: #ffffff; /* Used on brand.primary-default */
|
|
1693
|
+
--dds-color-text-on-primary-subtle: #ffffff; /* Used on brand.primary-subtle */
|
|
1694
|
+
--dds-color-text-on-primary-medium: #ffffff; /* Used on brand.primary-medium */
|
|
1695
|
+
--dds-color-text-on-primary-strong: #0b0d0e; /* Used on brand.primary-strong */
|
|
1696
|
+
--dds-color-text-on-secondary-default: #ffffff; /* Used on brand.secondary-default */
|
|
1697
|
+
--dds-color-text-on-secondary-subtle: #ffffff; /* Used on brand.secondary-subtle */
|
|
1698
|
+
--dds-color-text-on-secondary-medium: #ffffff; /* Used on brand.secondary-medium */
|
|
1699
|
+
--dds-color-text-on-secondary-strong: #0b0d0e; /* Used on brand.secondary-strong */
|
|
1700
|
+
--dds-color-text-on-tertiary-default: #0b0d0e; /* Used on brand.tertiary-default */
|
|
1701
|
+
--dds-color-text-on-tertiary-subtle: #ffffff; /* Used on brand.tertiary-subtle */
|
|
1702
|
+
--dds-color-text-on-tertiary-medium: #0b0d0e; /* Used on brand.tertiary-medium */
|
|
1703
|
+
--dds-color-text-on-tertiary-strong: #0b0d0e; /* Used on brand.tertiary-strong */
|
|
1704
|
+
--dds-color-text-on-data-default: #0b0d0e; /* Used on data. with default value */
|
|
1705
|
+
--dds-color-text-on-data-subtle: #ffffff; /* Used on data. with subtle value */
|
|
1706
|
+
--dds-color-icon-default: #ffffff; /* Often used with text.default */
|
|
1707
|
+
--dds-color-icon-medium: #e7e6e4; /* Often used with text.medium */
|
|
1708
|
+
--dds-color-icon-subtle: #cfcec9; /* Often used with text.subtle */
|
|
1709
|
+
--dds-color-icon-on-inverse: #ffffff; /* On surface.inverse */
|
|
1710
|
+
--dds-color-icon-on-action: #0b0d0e; /* On surface.action (primary and danger button) */
|
|
1711
|
+
--dds-color-icon-action-resting: #a8c3c9; /* Often used with Text.action */
|
|
1712
|
+
--dds-color-icon-action-hover: #e9f1f2; /* hover on icon-action */
|
|
1713
|
+
--dds-color-icon-on-success-default: #c1e5c2; /* On surface.success-default */
|
|
1714
|
+
--dds-color-icon-on-success-strong: #0b0d0e; /* On surface-success-strong */
|
|
1715
|
+
--dds-color-icon-on-warning-default: #fbf3b8; /* On surface.warning-default */
|
|
1716
|
+
--dds-color-icon-on-warning-strong: #0b0d0e; /* On surface.warning-strong */
|
|
1717
|
+
--dds-color-icon-on-danger-default: #efafaf; /* On surface.danger-default */
|
|
1718
|
+
--dds-color-icon-on-danger-strong: #0b0d0e; /* On surface.danger-strong */
|
|
1719
|
+
--dds-color-icon-on-info-default: #c8e3f5; /* On surface.info-default */
|
|
1720
|
+
--dds-color-icon-on-info-strong: #0b0d0e; /* On surface.info-strong */
|
|
1721
|
+
--dds-color-icon-danger: #efafaf; /* Error icon on paper, or default or subtle surafce/bg */
|
|
1722
|
+
--dds-color-brand-primary-default: #206f7e; /* Primary brand color */
|
|
1723
|
+
--dds-color-brand-primary-subtle: #0b2d34; /* Primary brand color */
|
|
1724
|
+
--dds-color-brand-primary-medium: #165c69; /* Primary brand color */
|
|
1725
|
+
--dds-color-brand-primary-strong: #79a9b2; /* Primary brand color */
|
|
1726
|
+
--dds-color-brand-secondary-default: #891d22; /* Secondary brand color */
|
|
1727
|
+
--dds-color-brand-secondary-subtle: #370c0e; /* Secondary brand color */
|
|
1728
|
+
--dds-color-brand-secondary-medium: #521114; /* Secondary brand color */
|
|
1729
|
+
--dds-color-brand-secondary-strong: #b8777a; /* Secondary brand color */
|
|
1730
|
+
--dds-color-brand-tertiary-default: #b1995d; /* Tertiary brand color */
|
|
1731
|
+
--dds-color-brand-tertiary-subtle: #594d2f; /* Tertiary brand color */
|
|
1732
|
+
--dds-color-brand-tertiary-medium: #8e7a4a; /* Tertiary brand color */
|
|
1733
|
+
--dds-color-brand-tertiary-strong: #d0c29e; /* Tertiary brand color */
|
|
1734
|
+
--dds-color-focus-outside: #e9f1f2; /* Contrast to .inside */
|
|
1735
|
+
--dds-color-focus-inside: #082228; /* Contrast to .outside */
|
|
1736
|
+
--dds-motion-micro-state: 200ms linear; /* Animasjon for hover og andre states. feks. selected, pressed */
|
|
1737
|
+
--dds-motion-surface: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Default animasjon for fokusmarkering, åpne/lukke funksjonalitet. feks, modal, accordion etc */
|
|
1738
|
+
--dds-motion-chevron: 200ms linear; /* Animert chevron */
|
|
1739
|
+
--dds-motion-animation-skeleton: 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; /* Skeleton animasjon */
|
|
1740
|
+
--dds-shadow-large: 8px 16px 32px 0px rgba(11, 13, 14, 80%); /* Dialoger. Eksempel: modal, drawer, popover */
|
|
1741
|
+
--dds-shadow-medium: 2px 4px 8px 0px rgba(11, 13, 14, 80%); /* Dropdowns. Eksempel: overflowmenu, dropdown */
|
|
1742
|
+
--dds-shadow-small: 1px 2px 4px 0px rgba(11, 13, 14, 80%); /* Eksempel: tooltip */
|
|
1743
|
+
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
1744
|
+
--dds-spacing-x0: 0rem;
|
|
1745
|
+
--dds-spacing-x0-125: 0.125rem;
|
|
1746
|
+
--dds-spacing-x0-25: 0.25rem;
|
|
1747
|
+
--dds-spacing-x0-5: 0.5rem;
|
|
1748
|
+
--dds-spacing-x0-75: 0.75rem;
|
|
1749
|
+
--dds-spacing-x1: 1rem;
|
|
1750
|
+
--dds-spacing-x1-5: 1.5rem;
|
|
1751
|
+
--dds-spacing-x2: 2rem;
|
|
1752
|
+
--dds-spacing-x2-5: 2.5rem;
|
|
1753
|
+
--dds-spacing-x3: 3rem;
|
|
1754
|
+
--dds-spacing-x4: 4rem;
|
|
1755
|
+
--dds-spacing-x6: 6rem;
|
|
1756
|
+
--dds-spacing-x10: 10rem;
|
|
1757
|
+
--dds-grid-xs-gutter-size: 16px;
|
|
1758
|
+
--dds-grid-xs-count: 4;
|
|
1759
|
+
--dds-grid-sm-gutter-size: 16px;
|
|
1760
|
+
--dds-grid-sm-count: 8;
|
|
1761
|
+
--dds-grid-lg-gutter-size: 24px;
|
|
1762
|
+
--dds-grid-lg-count: 12;
|
|
1763
|
+
--dds-grid-md-gutter-size: 24px;
|
|
1764
|
+
--dds-grid-md-count: 12;
|
|
1765
|
+
--dds-grid-xl-gutter-size: 24px;
|
|
1766
|
+
--dds-grid-xl-count: 12;
|
|
1767
|
+
--dds-size-icon-large: 40px;
|
|
1768
|
+
--dds-size-icon-medium: 24px;
|
|
1769
|
+
--dds-size-icon-small: 16px;
|
|
1770
|
+
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
1771
|
+
--dds-breakpoint-xs: 1px;
|
|
1772
|
+
--dds-breakpoint-sm: 600px;
|
|
1773
|
+
--dds-breakpoint-md: 960px;
|
|
1774
|
+
--dds-breakpoint-lg: 1280px;
|
|
1775
|
+
--dds-breakpoint-xl: 1920px;
|
|
1776
|
+
--dds-font-family-sans-domstol: 'IBM Plex Sans', Arial, sans-serif;
|
|
1777
|
+
--dds-font-family-sans-supreme: Poppins, Arial, sans-serif;
|
|
1778
|
+
--dds-font-family-serif-supreme: 'EB Garamond', serif;
|
|
1779
|
+
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
1780
|
+
--dds-font-size-x5: 5rem;
|
|
1781
|
+
--dds-font-size-x4: 4rem;
|
|
1782
|
+
--dds-font-size-x3: 3rem;
|
|
1783
|
+
--dds-font-size-x2-5: 2.5rem;
|
|
1784
|
+
--dds-font-size-x2: 2rem;
|
|
1785
|
+
--dds-font-size-x1-5: 1.5rem;
|
|
1786
|
+
--dds-font-size-x1-25: 1.25rem;
|
|
1787
|
+
--dds-font-size-x1-125: 1.125rem;
|
|
1788
|
+
--dds-font-size-x1: 1rem;
|
|
1789
|
+
--dds-font-size-x0-875: 0.875rem;
|
|
1790
|
+
--dds-font-size-x0-75: 0.75rem;
|
|
1791
|
+
--dds-font-weight-light: 300;
|
|
1792
|
+
--dds-font-weight-regular: 400;
|
|
1793
|
+
--dds-font-weight-semi-bold: 500;
|
|
1794
|
+
--dds-font-weight-bold: 600;
|
|
1795
|
+
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
1796
|
+
--dds-font-lineheight-x3: 1.2;
|
|
1797
|
+
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
1798
|
+
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
1799
|
+
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
1800
|
+
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
1801
|
+
--dds-font-letter-spacing-xloose: 0.09em;
|
|
1802
|
+
--dds-font-style-underline: underline;
|
|
1803
|
+
--dds-font-style-normal: none;
|
|
1804
|
+
--dds-font-style-italic: italic;
|
|
1805
|
+
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
1806
|
+
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
1807
|
+
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
1808
|
+
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
1809
|
+
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
1810
|
+
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
1811
|
+
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
1812
|
+
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
1813
|
+
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
1814
|
+
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
1815
|
+
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
1816
|
+
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
1817
|
+
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
1818
|
+
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
1819
|
+
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
1820
|
+
--dds-size-height-input-large: 3.8125rem; /* Brukes i input og buttons */
|
|
1821
|
+
--dds-size-height-input-medium: 3.125rem; /* Brukes i input og buttons */
|
|
1822
|
+
--dds-size-height-input-small: 2.5rem; /* Brukes i input og buttons */
|
|
1823
|
+
--dds-size-height-input-xsmall: 1.8125rem; /* Brukes i input og buttons */
|
|
1824
|
+
--dds-font-label-medium: 400 1rem/1.3 Poppins, Arial, sans-serif; /* Label for form components */
|
|
1825
|
+
--dds-font-body-long-xsmall: 400 0.875rem/1.5 Poppins, Arial, sans-serif; /* Xsmall body text for editorial content */
|
|
1826
|
+
--dds-font-body-long-small: 400 1rem/1.5 Poppins, Arial, sans-serif; /* Small body text for editorial content */
|
|
1827
|
+
--dds-font-body-long-medium: 400 1.125rem/1.5 Poppins, Arial, sans-serif; /* Default body text for editorial content */
|
|
1828
|
+
--dds-font-body-long-large: 400 1.25rem/1.5 Poppins, Arial, sans-serif; /* Large body text for editorial content */
|
|
1829
|
+
--dds-font-heading-xxsmall: 600 1rem/1.3 Poppins, Arial, sans-serif; /* Default h6 */
|
|
1830
|
+
--dds-font-heading-xsmall: 600 1.125rem/1.3 Poppins, Arial, sans-serif; /* Default h5 */
|
|
1831
|
+
--dds-font-heading-small: 600 1.25rem/1.3 Poppins, Arial, sans-serif; /* Default h4 */
|
|
1832
|
+
--dds-font-heading-medium: 600 1.5rem/1.3 Poppins, Arial, sans-serif; /* Default h3 */
|
|
1833
|
+
--dds-font-heading-large: 600 2rem/1.3 Poppins, Arial, sans-serif; /* Default h2 */
|
|
1834
|
+
--dds-font-heading-xlarge: 600 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.3 Poppins, Arial, sans-serif; /* Default H1 */
|
|
1835
|
+
--dds-font-heading-xxlarge: 600 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.3 Poppins, Arial, sans-serif; /* Display or extra large page title (h1) */
|
|
1836
|
+
--dds-font-lead-medium: 400 1.5rem/1.5 Poppins, Arial, sans-serif; /* Lead brukes som ingress når man skriver artikler etc */
|
|
1837
|
+
--dds-font-code-medium: 400 1.125rem/1.5 'IBM Plex Mono', 'Courier New', monospace; /* Brukes for kodesnutter etc */
|
|
1838
|
+
--dds-font-body-short-xsmall: 400 0.875rem/1.3 Poppins, Arial, sans-serif; /* used with xsmall button and input fields */
|
|
1839
|
+
--dds-font-body-short-small: 400 1rem/1.3 Poppins, Arial, sans-serif; /* used with small button and input fields */
|
|
1840
|
+
--dds-font-body-short-medium: 400 1.125rem/1.3 Poppins, Arial, sans-serif; /* Used with medium button and input fields */
|
|
1841
|
+
--dds-font-body-short-large: 400 1.25rem/1.3 Poppins, Arial, sans-serif; /* Used for large button and large search */
|
|
1842
|
+
--dds-font-heading-xxlarge-letter-spacing: -0.01em;
|
|
1843
|
+
--dds-font-heading-xxlarge-paragraph-spacing: 0.4em;
|
|
1844
|
+
--dds-font-heading-xlarge-letter-spacing: -0.01em;
|
|
1845
|
+
--dds-font-heading-xlarge-paragraph-spacing: 0.4em;
|
|
1846
|
+
--dds-font-heading-large-letter-spacing: 0em;
|
|
1847
|
+
--dds-font-heading-large-paragraph-spacing: 0.4em;
|
|
1848
|
+
--dds-font-heading-medium-letter-spacing: 0em;
|
|
1849
|
+
--dds-font-heading-medium-paragraph-spacing: 0.4em;
|
|
1850
|
+
--dds-font-heading-small-letter-spacing: 0em;
|
|
1851
|
+
--dds-font-heading-small-paragraph-spacing: 0.4em;
|
|
1852
|
+
--dds-font-heading-xsmall-letter-spacing: 0em;
|
|
1853
|
+
--dds-font-heading-xsmall-paragraph-spacing: 0.4em;
|
|
1854
|
+
--dds-font-heading-xxsmall-letter-spacing: 0.01em;
|
|
1855
|
+
--dds-font-heading-xxsmall-paragraph-spacing: 0.4em;
|
|
1856
|
+
--dds-font-body-long-large-letter-spacing: 0em;
|
|
1857
|
+
--dds-font-body-long-large-paragraph-spacing: 1em;
|
|
1858
|
+
--dds-font-body-long-medium-letter-spacing: 0em;
|
|
1859
|
+
--dds-font-body-long-medium-paragraph-spacing: 1em;
|
|
1860
|
+
--dds-font-body-long-small-letter-spacing: 0em;
|
|
1861
|
+
--dds-font-body-long-small-paragraph-spacing: 1em;
|
|
1862
|
+
--dds-font-body-long-xsmall-letter-spacing: 0.01em;
|
|
1863
|
+
--dds-font-body-long-xsmall-paragraph-spacing: 1em;
|
|
1864
|
+
--dds-font-lead-medium-letter-spacing: 0em;
|
|
1865
|
+
--dds-font-lead-medium-paragraph-spacing: 0.66em;
|
|
1866
|
+
--dds-font-code-medium-letter-spacing: 0em;
|
|
1867
|
+
--dds-font-code-medium-paragraph-spacing: 1em;
|
|
1868
|
+
--dds-font-label-medium-letter-spacing: 0.01em;
|
|
1869
|
+
--dds-font-label-medium-paragraph-spacing: 1em;
|
|
1870
|
+
--dds-font-body-short-large-letter-spacing: 0em;
|
|
1871
|
+
--dds-font-body-short-large-paragraph-spacing: 1em;
|
|
1872
|
+
--dds-font-body-short-medium-letter-spacing: 0em;
|
|
1873
|
+
--dds-font-body-short-medium-paragraph-spacing: 1em;
|
|
1874
|
+
--dds-font-body-short-small-letter-spacing: 0.01em;
|
|
1875
|
+
--dds-font-body-short-small-paragraph-spacing: 1em;
|
|
1876
|
+
--dds-font-body-short-xsmall-letter-spacing: 0.01em;
|
|
1877
|
+
--dds-font-body-short-xsmall-paragraph-spacing: 1em;
|
|
1878
|
+
}
|
|
1879
|
+
|
|
1880
|
+
/**
|
|
1881
|
+
* Do not edit directly, this file was auto-generated.
|
|
1882
|
+
*/
|
|
1883
|
+
|
|
1884
|
+
.dds-supreme-light {
|
|
1885
|
+
--dds-color-data-10-default: #196b8f;
|
|
1886
|
+
--dds-color-data-10-subtle: #93cee6;
|
|
1887
|
+
--dds-color-data-10-border: #196b8f;
|
|
1888
|
+
--dds-color-data-red-100: #f8d2d4;
|
|
1889
|
+
--dds-color-data-red-200: #f0a5a9;
|
|
1890
|
+
--dds-color-data-red-300: #f4858b;
|
|
1891
|
+
--dds-color-data-red-400: #e14b53;
|
|
1892
|
+
--dds-color-data-red-500: #da1e28;
|
|
1893
|
+
--dds-color-data-red-600: #ae1820;
|
|
1894
|
+
--dds-color-data-red-700: #831218;
|
|
1895
|
+
--dds-color-data-red-800: #570c10;
|
|
1896
|
+
--dds-color-data-red-900: #2c0608;
|
|
1897
|
+
--dds-color-data-magenta-100: #f7d9f2;
|
|
1898
|
+
--dds-color-data-magenta-200: #edb5e4;
|
|
1899
|
+
--dds-color-data-magenta-300: #e079d0;
|
|
1900
|
+
--dds-color-data-magenta-400: #d54dc0;
|
|
1901
|
+
--dds-color-data-magenta-500: #cb20b0;
|
|
1902
|
+
--dds-color-data-magenta-600: #a21a8d;
|
|
1903
|
+
--dds-color-data-magenta-700: #7a136a;
|
|
1904
|
+
--dds-color-data-magenta-800: #510d46;
|
|
1905
|
+
--dds-color-data-magenta-900: #290623;
|
|
1906
|
+
--dds-color-data-brown-100: #f0ddd5;
|
|
1907
|
+
--dds-color-data-brown-200: #e1bcac;
|
|
1908
|
+
--dds-color-data-brown-300: #d19a82;
|
|
1909
|
+
--dds-color-data-brown-400: #c27959;
|
|
1910
|
+
--dds-color-data-brown-500: #b3572f;
|
|
1911
|
+
--dds-color-data-brown-600: #8f4626;
|
|
1912
|
+
--dds-color-data-brown-700: #6b341c;
|
|
1913
|
+
--dds-color-data-brown-800: #482313;
|
|
1914
|
+
--dds-color-data-brown-900: #241109;
|
|
1915
|
+
--dds-color-data-olive-100: #e9e7cd;
|
|
1916
|
+
--dds-color-data-olive-200: #cdc9a1;
|
|
1917
|
+
--dds-color-data-olive-300: #b3ae71;
|
|
1918
|
+
--dds-color-data-olive-400: #989344;
|
|
1919
|
+
--dds-color-data-olive-500: #7c7518;
|
|
1920
|
+
--dds-color-data-olive-600: #635e13;
|
|
1921
|
+
--dds-color-data-olive-700: #4a460e;
|
|
1922
|
+
--dds-color-data-olive-800: #322f0a;
|
|
1923
|
+
--dds-color-data-olive-900: #191705;
|
|
1924
|
+
--dds-color-data-green-100: #d7e8cf;
|
|
1925
|
+
--dds-color-data-green-200: #aed19e;
|
|
1926
|
+
--dds-color-data-green-300: #95c280;
|
|
1927
|
+
--dds-color-data-green-400: #619947;
|
|
1928
|
+
--dds-color-data-green-500: #3a8019;
|
|
1929
|
+
--dds-color-data-green-600: #2e6614;
|
|
1930
|
+
--dds-color-data-green-700: #234d0f;
|
|
1931
|
+
--dds-color-data-green-800: #17330a;
|
|
1932
|
+
--dds-color-data-green-900: #0c1a05;
|
|
1933
|
+
--dds-color-data-teal-100: #c2e2e1;
|
|
1934
|
+
--dds-color-data-teal-200: #90ccc9;
|
|
1935
|
+
--dds-color-data-teal-300: #5dafad;
|
|
1936
|
+
--dds-color-data-teal-400: #2c9390;
|
|
1937
|
+
--dds-color-data-teal-500: #007d79;
|
|
1938
|
+
--dds-color-data-teal-600: #006461;
|
|
1939
|
+
--dds-color-data-teal-700: #004b49;
|
|
1940
|
+
--dds-color-data-teal-800: #003230;
|
|
1941
|
+
--dds-color-data-teal-900: #001918;
|
|
1942
|
+
--dds-color-data-deepblue-100: #c6e3f1;
|
|
1943
|
+
--dds-color-data-deepblue-200: #93cee6;
|
|
1944
|
+
--dds-color-data-deepblue-300: #62abcb;
|
|
1945
|
+
--dds-color-data-deepblue-400: #358fb5;
|
|
1946
|
+
--dds-color-data-deepblue-500: #196b8f;
|
|
1947
|
+
--dds-color-data-deepblue-600: #135774;
|
|
1948
|
+
--dds-color-data-deepblue-700: #0e455e;
|
|
1949
|
+
--dds-color-data-deepblue-800: #0d3445;
|
|
1950
|
+
--dds-color-data-deepblue-900: #05151d;
|
|
1951
|
+
--dds-color-data-blue-100: #cfe0ff;
|
|
1952
|
+
--dds-color-data-blue-200: #9fc0ff;
|
|
1953
|
+
--dds-color-data-blue-300: #6fa1fe;
|
|
1954
|
+
--dds-color-data-blue-400: #3f81fe;
|
|
1955
|
+
--dds-color-data-blue-500: #0f62fe;
|
|
1956
|
+
--dds-color-data-blue-600: #0c4ecb;
|
|
1957
|
+
--dds-color-data-blue-700: #093b98;
|
|
1958
|
+
--dds-color-data-blue-800: #062766;
|
|
1959
|
+
--dds-color-data-blue-900: #031433;
|
|
1960
|
+
--dds-color-data-purple-100: #e8d9fe;
|
|
1961
|
+
--dds-color-data-purple-200: #d0b2fe;
|
|
1962
|
+
--dds-color-data-purple-300: #b98cfd;
|
|
1963
|
+
--dds-color-data-purple-400: #a165fd;
|
|
1964
|
+
--dds-color-data-purple-500: #8a3ffc;
|
|
1965
|
+
--dds-color-data-purple-600: #6e32ca;
|
|
1966
|
+
--dds-color-data-purple-700: #532697;
|
|
1967
|
+
--dds-color-data-purple-800: #371965;
|
|
1968
|
+
--dds-color-data-purple-900: #1c0d32;
|
|
1969
|
+
--dds-color-data-gray-100: #e3e3e3;
|
|
1970
|
+
--dds-color-data-gray-200: #c7c7c7;
|
|
1971
|
+
--dds-color-data-gray-300: #aaaaaa;
|
|
1972
|
+
--dds-color-data-gray-400: #8e8e8e;
|
|
1973
|
+
--dds-color-data-gray-500: #727272;
|
|
1974
|
+
--dds-color-data-gray-600: #5b5b5b;
|
|
1975
|
+
--dds-color-data-gray-700: #444444;
|
|
1976
|
+
--dds-color-data-gray-800: #2e2e2e;
|
|
1977
|
+
--dds-color-data-gray-900: #171717;
|
|
1978
|
+
--dds-color-data-01-default: #0f62fe;
|
|
1979
|
+
--dds-color-data-01-subtle: #9fc0ff;
|
|
1980
|
+
--dds-color-data-01-border: #0f62fe;
|
|
1981
|
+
--dds-color-data-02-default: #b3572f;
|
|
1982
|
+
--dds-color-data-02-subtle: #e1bcac;
|
|
1983
|
+
--dds-color-data-02-border: #b3572f;
|
|
1984
|
+
--dds-color-data-03-default: #727272;
|
|
1985
|
+
--dds-color-data-03-subtle: #c7c7c7;
|
|
1986
|
+
--dds-color-data-03-border: #727272;
|
|
1987
|
+
--dds-color-data-04-default: #3a8019;
|
|
1988
|
+
--dds-color-data-04-subtle: #aed19e;
|
|
1989
|
+
--dds-color-data-04-border: #3a8019;
|
|
1990
|
+
--dds-color-data-05-default: #8a3ffc;
|
|
1991
|
+
--dds-color-data-05-subtle: #d0b2fe;
|
|
1992
|
+
--dds-color-data-05-border: #8a3ffc;
|
|
1993
|
+
--dds-color-data-06-default: #cb20b0;
|
|
1994
|
+
--dds-color-data-06-subtle: #edb5e4;
|
|
1995
|
+
--dds-color-data-06-border: #cb20b0;
|
|
1996
|
+
--dds-color-data-07-default: #7c7518;
|
|
1997
|
+
--dds-color-data-07-subtle: #cdc9a1;
|
|
1998
|
+
--dds-color-data-07-border: #7c7518;
|
|
1999
|
+
--dds-color-data-08-default: #da1e28;
|
|
2000
|
+
--dds-color-data-08-subtle: #f0a5a9;
|
|
2001
|
+
--dds-color-data-08-border: #da1e28;
|
|
2002
|
+
--dds-color-data-09-default: #007d79;
|
|
2003
|
+
--dds-color-data-09-subtle: #90ccc9;
|
|
2004
|
+
--dds-color-data-09-border: #007d79;
|
|
2005
|
+
--dds-border-radius-button: 2px; /* For use in button component and togglebutton */
|
|
2006
|
+
--dds-border-radius-surface: 2px; /* Most surfaces, for example cards, papers, messages, backgrounds in GUI */
|
|
2007
|
+
--dds-border-radius-input: 2px; /* All input fields, and check boxes */
|
|
2008
|
+
--dds-border-radius-chip: 2px; /* Chips and tags */
|
|
2009
|
+
--dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
|
|
2010
|
+
--dds-color-bg-default: #ffffff; /* UI shell base color */
|
|
2011
|
+
--dds-color-bg-subtle: #f3f3f2; /* Alternative UI shell base color */
|
|
2012
|
+
--dds-color-surface-default: #ffffff; /* Default bg */
|
|
2013
|
+
--dds-color-surface-subtle: #f3f3f2; /* Subtle surface color */
|
|
2014
|
+
--dds-color-surface-medium: #e7e6e4; /* Medium surface color */
|
|
2015
|
+
--dds-color-surface-hover-default: #e9f1f2; /* Hover on surface (default, subtle, medium) */
|
|
2016
|
+
--dds-color-surface-hover-subtle: #f3f3f2; /* Subtle hover on surface (default, medium) */
|
|
2017
|
+
--dds-color-surface-selected-default: #e9f1f2; /* Selected state for surface (default, subtle, medium) */
|
|
2018
|
+
--dds-color-surface-inverse-default: #11454e; /* Can be used as a surface for menu, navigation, footer etc */
|
|
2019
|
+
--dds-color-surface-inverse-hover: #0e3a41; /* Hover on surface.inverse */
|
|
2020
|
+
--dds-color-surface-inverse-selected: #0b2d34; /* selected on surface.inverse */
|
|
2021
|
+
--dds-color-surface-action-resting: #79a9b2; /* Primary button bg */
|
|
2022
|
+
--dds-color-surface-action-hover: #a8c3c9; /* Hover on surface.action/selected */
|
|
2023
|
+
--dds-color-surface-action-selected: #79a9b2; /* Selected state for components such as togglebutton, togglebar, progress tracker, checkbox etc */
|
|
2024
|
+
--dds-color-surface-action-danger-resting: #e47373; /* Danger button */
|
|
2025
|
+
--dds-color-surface-action-danger-hover: #efafaf; /* Hover on surface.action-danger */
|
|
2026
|
+
--dds-color-surface-action-selected-disabled: #77838c; /* bg on a selected disabled checkbox, radio etc */
|
|
2027
|
+
--dds-color-surface-danger-default: #fbebeb; /* tag, message, errormessage */
|
|
2028
|
+
--dds-color-surface-danger-strong: #e47373; /* tag strong value */
|
|
2029
|
+
--dds-color-surface-success-default: #f0f9f0; /* tag, message */
|
|
2030
|
+
--dds-color-surface-success-strong: #93d294; /* tag with strong value */
|
|
2031
|
+
--dds-color-surface-warning-default: #fefced; /* tag, message */
|
|
2032
|
+
--dds-color-surface-warning-strong: #f7e982; /* tag strong value */
|
|
2033
|
+
--dds-color-surface-info-default: #f1f8fd; /* tag, message */
|
|
2034
|
+
--dds-color-surface-info-strong: #9eceee; /* tag strong value */
|
|
2035
|
+
--dds-color-surface-paper-default: #ffffff; /* modal, drawer, popover etc */
|
|
2036
|
+
--dds-color-surface-backdrop-default: #0b0d0e80; /* background overlay for modals (50%) */
|
|
2037
|
+
--dds-color-surface-field-default: #ffffff; /* Form elements (textinput, datepicker etc) */
|
|
2038
|
+
--dds-color-surface-field-disabled: #f1f3f4; /* disabled state on surface.field */
|
|
2039
|
+
--dds-color-surface-highlighted-default: #e0d6be; /* bg for highlighted text on text.default. Use with $Text */
|
|
2040
|
+
--dds-color-surface-scrollbar: #b7b5ae; /* Used for scrollbar */
|
|
2041
|
+
--dds-color-surface-notification: #d83737; /* bg on a notification */
|
|
2042
|
+
--dds-color-surface-skeleton: #cfcec9; /* Used for skeleton */
|
|
2043
|
+
--dds-color-border-default: #878478; /* Form components, togglebutton, secondary button, checkbox etc */
|
|
2044
|
+
--dds-color-border-subtle: #cfcec9; /* Dropdown, tooltip, overflow etc */
|
|
2045
|
+
--dds-color-border-inverse: #a8c3c9; /* Border or divider on surface.inverse */
|
|
2046
|
+
--dds-color-border-action-default: #79a9b2; /* Used in progress tracker */
|
|
2047
|
+
--dds-color-border-action-hover: #a8c3c9; /* Hover on secondary button etc */
|
|
2048
|
+
--dds-color-border-success: #65be66; /* Used with tag-default */
|
|
2049
|
+
--dds-color-border-warning: #f4e04d; /* Tag.default */
|
|
2050
|
+
--dds-color-border-danger: #d83737; /* Tag.default, error message field */
|
|
2051
|
+
--dds-color-border-info: #75b9e6; /* Tag.default */
|
|
2052
|
+
--dds-color-border-on-action: #ffffff; /* Used on primary split button */
|
|
2053
|
+
--dds-color-text-default: #0b0d0e; /* default text, heading, body. on surface.hover */
|
|
2054
|
+
--dds-color-text-medium: #514f48; /* Label, etc */
|
|
2055
|
+
--dds-color-text-subtle: #615f56; /* Disabled or less important text */
|
|
2056
|
+
--dds-color-text-on-inverse: #ffffff; /* On surface.inverse */
|
|
2057
|
+
--dds-color-text-danger: #ad2c2c; /* Error text on paper, or default or subtle surafce/bg */
|
|
2058
|
+
--dds-color-text-on-action: #0b0d0e; /* On surface.action (primary and danger button) */
|
|
2059
|
+
--dds-color-text-on-status-default: #0b0d0e; /* On default status surfaces */
|
|
2060
|
+
--dds-color-text-on-status-strong: #0b0d0e; /* On status surfaces with strong prop */
|
|
2061
|
+
--dds-color-text-action-resting: #206f7e; /* Link, number in progress tracker */
|
|
2062
|
+
--dds-color-text-action-hover: #165c69; /* Hover on text.action */
|
|
2063
|
+
--dds-color-text-requiredfield: #d83737; /* Asterix to indicate required field */
|
|
2064
|
+
--dds-color-text-action-visited: #7f29b4; /* Used for visited links */
|
|
2065
|
+
--dds-color-text-action-visited-on-inverse: #cca9e1; /* Used for visited links on inverse surfaces */
|
|
2066
|
+
--dds-color-text-on-notification: #ffffff; /* Used on surface.notification */
|
|
2067
|
+
--dds-color-text-on-primary-default: #0b0d0e; /* Used on brand.primary-default */
|
|
2068
|
+
--dds-color-text-on-primary-subtle: #0b0d0e; /* Used on brand.primary-subtle */
|
|
2069
|
+
--dds-color-text-on-primary-medium: #0b0d0e; /* Used on brand.primary-medium */
|
|
2070
|
+
--dds-color-text-on-primary-strong: #ffffff; /* Used on brand.primary-strong */
|
|
2071
|
+
--dds-color-text-on-secondary-default: #ffffff; /* Used on brand.secondary-default */
|
|
2072
|
+
--dds-color-text-on-secondary-subtle: #0b0d0e; /* Used on brand.secondary-subtle */
|
|
2073
|
+
--dds-color-text-on-secondary-medium: #ffffff; /* Used on brand.secondary-medium */
|
|
2074
|
+
--dds-color-text-on-secondary-strong: #ffffff; /* Used on brand.secondary-strong */
|
|
2075
|
+
--dds-color-text-on-tertiary-default: #0b0d0e; /* Used on brand.tertiary-default */
|
|
2076
|
+
--dds-color-text-on-tertiary-subtle: #0b0d0e; /* Used on brand.tertiary-subtle */
|
|
2077
|
+
--dds-color-text-on-tertiary-medium: #0b0d0e; /* Used on brand.tertiary-medium */
|
|
2078
|
+
--dds-color-text-on-tertiary-strong: #ffffff; /* Used on brand.tertiary-strong */
|
|
2079
|
+
--dds-color-text-on-data-default: #ffffff; /* Used on data. with default value */
|
|
2080
|
+
--dds-color-text-on-data-subtle: #0b0d0e; /* Used on data. with subtle value */
|
|
2081
|
+
--dds-color-icon-default: #0b0d0e; /* Often used with text.default */
|
|
2082
|
+
--dds-color-icon-medium: #514f48; /* Often used with text.medium */
|
|
2083
|
+
--dds-color-icon-subtle: #615f56; /* Often used with text.subtle */
|
|
2084
|
+
--dds-color-icon-on-inverse: #ffffff; /* On surface.inverse */
|
|
2085
|
+
--dds-color-icon-on-action: #0b0d0e; /* On surface.action (primary and danger button) */
|
|
2086
|
+
--dds-color-icon-action-resting: #206f7e; /* Often used with Text.action */
|
|
2087
|
+
--dds-color-icon-action-hover: #165c69; /* hover on icon-action */
|
|
2088
|
+
--dds-color-icon-on-success-default: #3d723d; /* On surface.success-default */
|
|
2089
|
+
--dds-color-icon-on-success-strong: #0b0d0e; /* On surface-success-strong */
|
|
2090
|
+
--dds-color-icon-on-warning-default: #9a8c26; /* On surface.warning-default */
|
|
2091
|
+
--dds-color-icon-on-warning-strong: #0b0d0e; /* On surface.warning-strong */
|
|
2092
|
+
--dds-color-icon-on-danger-default: #ad2c2c; /* On surface.danger-default */
|
|
2093
|
+
--dds-color-icon-on-danger-strong: #0b0d0e; /* On surface.danger-strong */
|
|
2094
|
+
--dds-color-icon-on-info-default: #3e7192; /* On surface.info-default */
|
|
2095
|
+
--dds-color-icon-on-info-strong: #0b0d0e; /* On surface.info-strong */
|
|
2096
|
+
--dds-color-icon-danger: #ad2c2c; /* Error icon on paper, or default or subtle surafce/bg */
|
|
2097
|
+
--dds-color-brand-primary-default: #4d8c98; /* Primary brand color */
|
|
2098
|
+
--dds-color-brand-primary-subtle: #e9f1f2; /* Primary brand color */
|
|
2099
|
+
--dds-color-brand-primary-medium: #79a9b2; /* Primary brand color */
|
|
2100
|
+
--dds-color-brand-primary-strong: #11454e; /* Primary brand color */
|
|
2101
|
+
--dds-color-brand-secondary-default: #891d22; /* Secondary brand color */
|
|
2102
|
+
--dds-color-brand-secondary-subtle: #f3e8e9; /* Secondary brand color */
|
|
2103
|
+
--dds-color-brand-secondary-medium: #a14a4e; /* Secondary brand color */
|
|
2104
|
+
--dds-color-brand-secondary-strong: #521114; /* Secondary brand color */
|
|
2105
|
+
--dds-color-brand-tertiary-default: #b1995d; /* Tertiary brand color */
|
|
2106
|
+
--dds-color-brand-tertiary-subtle: #efebdf; /* Tertiary brand color */
|
|
2107
|
+
--dds-color-brand-tertiary-medium: #d0c29e; /* Tertiary brand color */
|
|
2108
|
+
--dds-color-brand-tertiary-strong: #6a5c38; /* Tertiary brand color */
|
|
2109
|
+
--dds-color-focus-outside: #082228; /* Contrast to .inside */
|
|
2110
|
+
--dds-color-focus-inside: #e9f1f2; /* Contrast to .outside */
|
|
2111
|
+
--dds-motion-micro-state: 200ms linear; /* Animasjon for hover og andre states. feks. selected, pressed */
|
|
2112
|
+
--dds-motion-surface: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Default animasjon for fokusmarkering, åpne/lukke funksjonalitet. feks, modal, accordion etc */
|
|
2113
|
+
--dds-motion-chevron: 200ms linear; /* Animert chevron */
|
|
2114
|
+
--dds-motion-animation-skeleton: 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; /* Skeleton animasjon */
|
|
2115
|
+
--dds-shadow-large: 8px 16px 32px 0px rgba(11, 13, 14, 10%); /* Dialoger. Eksempel: modal, drawer, popover */
|
|
2116
|
+
--dds-shadow-medium: 2px 4px 8px 0px rgba(11, 13, 14, 10%); /* Dropdowns. Eksempel: overflowmenu, dropdown */
|
|
2117
|
+
--dds-shadow-small: 1px 2px 4px 0px rgba(11, 13, 14, 10%); /* Eksempel: tooltip */
|
|
2118
|
+
--dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
|
|
2119
|
+
--dds-spacing-x0: 0rem;
|
|
2120
|
+
--dds-spacing-x0-125: 0.125rem;
|
|
2121
|
+
--dds-spacing-x0-25: 0.25rem;
|
|
2122
|
+
--dds-spacing-x0-5: 0.5rem;
|
|
2123
|
+
--dds-spacing-x0-75: 0.75rem;
|
|
2124
|
+
--dds-spacing-x1: 1rem;
|
|
2125
|
+
--dds-spacing-x1-5: 1.5rem;
|
|
2126
|
+
--dds-spacing-x2: 2rem;
|
|
2127
|
+
--dds-spacing-x2-5: 2.5rem;
|
|
2128
|
+
--dds-spacing-x3: 3rem;
|
|
2129
|
+
--dds-spacing-x4: 4rem;
|
|
2130
|
+
--dds-spacing-x6: 6rem;
|
|
2131
|
+
--dds-spacing-x10: 10rem;
|
|
2132
|
+
--dds-grid-xs-gutter-size: 16px;
|
|
2133
|
+
--dds-grid-xs-count: 4;
|
|
2134
|
+
--dds-grid-sm-gutter-size: 16px;
|
|
2135
|
+
--dds-grid-sm-count: 8;
|
|
2136
|
+
--dds-grid-lg-gutter-size: 24px;
|
|
2137
|
+
--dds-grid-lg-count: 12;
|
|
2138
|
+
--dds-grid-md-gutter-size: 24px;
|
|
2139
|
+
--dds-grid-md-count: 12;
|
|
2140
|
+
--dds-grid-xl-gutter-size: 24px;
|
|
2141
|
+
--dds-grid-xl-count: 12;
|
|
2142
|
+
--dds-size-icon-large: 40px;
|
|
2143
|
+
--dds-size-icon-medium: 24px;
|
|
2144
|
+
--dds-size-icon-small: 16px;
|
|
2145
|
+
--dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
|
|
2146
|
+
--dds-breakpoint-xs: 1px;
|
|
2147
|
+
--dds-breakpoint-sm: 600px;
|
|
2148
|
+
--dds-breakpoint-md: 960px;
|
|
2149
|
+
--dds-breakpoint-lg: 1280px;
|
|
2150
|
+
--dds-breakpoint-xl: 1920px;
|
|
2151
|
+
--dds-font-family-sans-domstol: 'IBM Plex Sans', Arial, sans-serif;
|
|
2152
|
+
--dds-font-family-sans-supreme: Poppins, Arial, sans-serif;
|
|
2153
|
+
--dds-font-family-serif-supreme: 'EB Garamond', serif;
|
|
2154
|
+
--dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
|
|
2155
|
+
--dds-font-size-x5: 5rem;
|
|
2156
|
+
--dds-font-size-x4: 4rem;
|
|
2157
|
+
--dds-font-size-x3: 3rem;
|
|
2158
|
+
--dds-font-size-x2-5: 2.5rem;
|
|
2159
|
+
--dds-font-size-x2: 2rem;
|
|
2160
|
+
--dds-font-size-x1-5: 1.5rem;
|
|
2161
|
+
--dds-font-size-x1-25: 1.25rem;
|
|
2162
|
+
--dds-font-size-x1-125: 1.125rem;
|
|
2163
|
+
--dds-font-size-x1: 1rem;
|
|
2164
|
+
--dds-font-size-x0-875: 0.875rem;
|
|
2165
|
+
--dds-font-size-x0-75: 0.75rem;
|
|
2166
|
+
--dds-font-weight-light: 300;
|
|
2167
|
+
--dds-font-weight-regular: 400;
|
|
2168
|
+
--dds-font-weight-semi-bold: 500;
|
|
2169
|
+
--dds-font-weight-bold: 600;
|
|
2170
|
+
--dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
|
|
2171
|
+
--dds-font-lineheight-x3: 1.2;
|
|
2172
|
+
--dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
|
|
2173
|
+
--dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
|
|
2174
|
+
--dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
|
|
2175
|
+
--dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
|
|
2176
|
+
--dds-font-letter-spacing-xloose: 0.09em;
|
|
2177
|
+
--dds-font-style-underline: underline;
|
|
2178
|
+
--dds-font-style-normal: none;
|
|
2179
|
+
--dds-font-style-italic: italic;
|
|
2180
|
+
--dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre */
|
|
2181
|
+
--dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3 */
|
|
2182
|
+
--dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
|
|
2183
|
+
--dds-font-paragraph-spacing-list: 0.5em; /* Brukes mellom kulepunkter i lister */
|
|
2184
|
+
--dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
|
|
2185
|
+
--dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
|
|
2186
|
+
--dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
|
|
2187
|
+
--dds-zindex-drawer: 180; /* Brukes for dds-drawer */
|
|
2188
|
+
--dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
|
|
2189
|
+
--dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
|
|
2190
|
+
--dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
|
|
2191
|
+
--dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
|
|
2192
|
+
--dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
|
|
2193
|
+
--dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
|
|
2194
|
+
--dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
|
|
2195
|
+
--dds-size-height-input-large: 3.8125rem; /* Brukes i input og buttons */
|
|
2196
|
+
--dds-size-height-input-medium: 3.125rem; /* Brukes i input og buttons */
|
|
2197
|
+
--dds-size-height-input-small: 2.5rem; /* Brukes i input og buttons */
|
|
2198
|
+
--dds-size-height-input-xsmall: 1.8125rem; /* Brukes i input og buttons */
|
|
2199
|
+
--dds-font-label-medium: 400 1rem/1.3 Poppins, Arial, sans-serif; /* Label for form components */
|
|
2200
|
+
--dds-font-body-long-xsmall: 400 0.875rem/1.5 Poppins, Arial, sans-serif; /* Xsmall body text for editorial content */
|
|
2201
|
+
--dds-font-body-long-small: 400 1rem/1.5 Poppins, Arial, sans-serif; /* Small body text for editorial content */
|
|
2202
|
+
--dds-font-body-long-medium: 400 1.125rem/1.5 Poppins, Arial, sans-serif; /* Default body text for editorial content */
|
|
2203
|
+
--dds-font-body-long-large: 400 1.25rem/1.5 Poppins, Arial, sans-serif; /* Large body text for editorial content */
|
|
2204
|
+
--dds-font-heading-xxsmall: 600 1rem/1.3 Poppins, Arial, sans-serif; /* Default h6 */
|
|
2205
|
+
--dds-font-heading-xsmall: 600 1.125rem/1.3 Poppins, Arial, sans-serif; /* Default h5 */
|
|
2206
|
+
--dds-font-heading-small: 600 1.25rem/1.3 Poppins, Arial, sans-serif; /* Default h4 */
|
|
2207
|
+
--dds-font-heading-medium: 600 1.5rem/1.3 Poppins, Arial, sans-serif; /* Default h3 */
|
|
2208
|
+
--dds-font-heading-large: 600 2rem/1.3 Poppins, Arial, sans-serif; /* Default h2 */
|
|
2209
|
+
--dds-font-heading-xlarge: 600 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.3 Poppins, Arial, sans-serif; /* Default H1 */
|
|
2210
|
+
--dds-font-heading-xxlarge: 600 clamp(3rem, 1.333rem + 4.444vw, 4rem)/1.3 Poppins, Arial, sans-serif; /* Display or extra large page title (h1) */
|
|
2211
|
+
--dds-font-lead-medium: 400 1.5rem/1.5 Poppins, Arial, sans-serif; /* Lead brukes som ingress når man skriver artikler etc */
|
|
2212
|
+
--dds-font-code-medium: 400 1.125rem/1.5 'IBM Plex Mono', 'Courier New', monospace; /* Brukes for kodesnutter etc */
|
|
2213
|
+
--dds-font-body-short-xsmall: 400 0.875rem/1.3 Poppins, Arial, sans-serif; /* used with xsmall button and input fields */
|
|
2214
|
+
--dds-font-body-short-small: 400 1rem/1.3 Poppins, Arial, sans-serif; /* used with small button and input fields */
|
|
2215
|
+
--dds-font-body-short-medium: 400 1.125rem/1.3 Poppins, Arial, sans-serif; /* Used with medium button and input fields */
|
|
2216
|
+
--dds-font-body-short-large: 400 1.25rem/1.3 Poppins, Arial, sans-serif; /* Used for large button and large search */
|
|
2217
|
+
--dds-font-heading-xxlarge-letter-spacing: -0.01em;
|
|
2218
|
+
--dds-font-heading-xxlarge-paragraph-spacing: 0.4em;
|
|
2219
|
+
--dds-font-heading-xlarge-letter-spacing: -0.01em;
|
|
2220
|
+
--dds-font-heading-xlarge-paragraph-spacing: 0.4em;
|
|
2221
|
+
--dds-font-heading-large-letter-spacing: 0em;
|
|
2222
|
+
--dds-font-heading-large-paragraph-spacing: 0.4em;
|
|
2223
|
+
--dds-font-heading-medium-letter-spacing: 0em;
|
|
2224
|
+
--dds-font-heading-medium-paragraph-spacing: 0.4em;
|
|
2225
|
+
--dds-font-heading-small-letter-spacing: 0em;
|
|
2226
|
+
--dds-font-heading-small-paragraph-spacing: 0.4em;
|
|
2227
|
+
--dds-font-heading-xsmall-letter-spacing: 0em;
|
|
2228
|
+
--dds-font-heading-xsmall-paragraph-spacing: 0.4em;
|
|
2229
|
+
--dds-font-heading-xxsmall-letter-spacing: 0.01em;
|
|
2230
|
+
--dds-font-heading-xxsmall-paragraph-spacing: 0.4em;
|
|
2231
|
+
--dds-font-body-long-large-letter-spacing: 0em;
|
|
2232
|
+
--dds-font-body-long-large-paragraph-spacing: 1em;
|
|
2233
|
+
--dds-font-body-long-medium-letter-spacing: 0em;
|
|
2234
|
+
--dds-font-body-long-medium-paragraph-spacing: 1em;
|
|
2235
|
+
--dds-font-body-long-small-letter-spacing: 0em;
|
|
2236
|
+
--dds-font-body-long-small-paragraph-spacing: 1em;
|
|
2237
|
+
--dds-font-body-long-xsmall-letter-spacing: 0.01em;
|
|
2238
|
+
--dds-font-body-long-xsmall-paragraph-spacing: 1em;
|
|
2239
|
+
--dds-font-lead-medium-letter-spacing: 0em;
|
|
2240
|
+
--dds-font-lead-medium-paragraph-spacing: 0.66em;
|
|
2241
|
+
--dds-font-code-medium-letter-spacing: 0em;
|
|
2242
|
+
--dds-font-code-medium-paragraph-spacing: 1em;
|
|
2243
|
+
--dds-font-label-medium-letter-spacing: 0.01em;
|
|
2244
|
+
--dds-font-label-medium-paragraph-spacing: 1em;
|
|
2245
|
+
--dds-font-body-short-large-letter-spacing: 0em;
|
|
2246
|
+
--dds-font-body-short-large-paragraph-spacing: 1em;
|
|
2247
|
+
--dds-font-body-short-medium-letter-spacing: 0em;
|
|
2248
|
+
--dds-font-body-short-medium-paragraph-spacing: 1em;
|
|
2249
|
+
--dds-font-body-short-small-letter-spacing: 0.01em;
|
|
2250
|
+
--dds-font-body-short-small-paragraph-spacing: 1em;
|
|
2251
|
+
--dds-font-body-short-xsmall-letter-spacing: 0.01em;
|
|
2252
|
+
--dds-font-body-short-xsmall-paragraph-spacing: 1em;
|
|
2253
|
+
}
|
|
2254
|
+
/* IBM Plex Variable */
|
|
2255
|
+
|
|
2256
|
+
@font-face {
|
|
2257
|
+
font-family: IBM Plex Sans;
|
|
2258
|
+
font-style: normal;
|
|
2259
|
+
font-weight: 100 900;
|
|
2260
|
+
font-display: swap;
|
|
2261
|
+
src:
|
|
2262
|
+
local('IBM Plex Sans'),
|
|
2263
|
+
local('IBMPlexSans'),
|
|
2264
|
+
url('./assets/fonts/IBMPlexSansVar-Roman.woff2') format('woff2-variations'),
|
|
2265
|
+
url('./assets/fonts/IBMPlexSansVar-Roman.woff2') format('woff2');
|
|
2266
|
+
}
|
|
2267
|
+
|
|
2268
|
+
@font-face {
|
|
2269
|
+
font-family: IBM Plex Sans;
|
|
2270
|
+
font-style: italic;
|
|
2271
|
+
font-weight: 100 900;
|
|
2272
|
+
font-display: swap;
|
|
2273
|
+
src:
|
|
2274
|
+
local('IBM Plex Sans'),
|
|
2275
|
+
local('IBMPlexSans'),
|
|
2276
|
+
url('./assets/fonts/IBMPlexSansVar-Italic.woff2') format('woff2-variations'),
|
|
2277
|
+
url('./assets/fonts/IBMPlexSansVar-Italic.woff2') format('woff2');
|
|
2278
|
+
}
|
|
2279
|
+
|
|
2280
|
+
/* IBM Plex Mono */
|
|
2281
|
+
|
|
2282
|
+
@font-face {
|
|
2283
|
+
font-family: IBM Plex Mono;
|
|
2284
|
+
font-style: normal;
|
|
2285
|
+
font-weight: 400;
|
|
2286
|
+
font-display: swap;
|
|
2287
|
+
src:
|
|
2288
|
+
url('./assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'),
|
|
2289
|
+
url('./assets/fonts/IBMPlexMono-Regular.woff') format('woff');
|
|
2290
|
+
}
|
|
2291
|
+
|
|
2292
|
+
@font-face {
|
|
2293
|
+
font-family: IBM Plex Mono;
|
|
2294
|
+
font-style: normal;
|
|
2295
|
+
font-weight: 300;
|
|
2296
|
+
font-display: swap;
|
|
2297
|
+
src:
|
|
2298
|
+
url('./assets/fonts/IBMPlexMono-Light.woff2') format('woff2'),
|
|
2299
|
+
url('./assets/fonts/IBMPlexMono-Light.woff') format('woff');
|
|
2300
|
+
}
|
|
2301
|
+
|
|
2302
|
+
@font-face {
|
|
2303
|
+
font-family: IBM Plex Mono;
|
|
2304
|
+
font-style: normal;
|
|
2305
|
+
font-weight: 600;
|
|
2306
|
+
font-display: swap;
|
|
2307
|
+
src:
|
|
2308
|
+
url('./assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2'),
|
|
2309
|
+
url('./assets/fonts/IBMPlexMono-SemiBold.woff') format('woff');
|
|
2310
|
+
}
|
|
2311
|
+
|
|
2312
|
+
/* Poppins */
|
|
2313
|
+
|
|
2314
|
+
@font-face {
|
|
2315
|
+
font-family: 'Poppins';
|
|
2316
|
+
font-style: normal;
|
|
2317
|
+
font-weight: 400;
|
|
2318
|
+
font-display: swap;
|
|
2319
|
+
src: url('./assets/fonts/Poppins-latin-regular.woff2') format('woff2');
|
|
2320
|
+
}
|
|
2321
|
+
|
|
2322
|
+
@font-face {
|
|
2323
|
+
font-family: 'Poppins';
|
|
2324
|
+
font-style: italic;
|
|
2325
|
+
font-weight: 400;
|
|
2326
|
+
font-display: swap;
|
|
2327
|
+
src: url('./assets/fonts/Poppins-latin-italic.woff2') format('woff2');
|
|
2328
|
+
}
|
|
2329
|
+
|
|
2330
|
+
@font-face {
|
|
2331
|
+
font-family: 'Poppins';
|
|
2332
|
+
font-style: normal;
|
|
2333
|
+
font-weight: 600;
|
|
2334
|
+
font-display: swap;
|
|
2335
|
+
src: url('./assets/fonts/Poppins-latin-600.woff2') format('woff2');
|
|
2336
|
+
}
|
|
2337
|
+
|
|
2338
|
+
@font-face {
|
|
2339
|
+
font-family: 'Poppins';
|
|
2340
|
+
font-style: italic;
|
|
2341
|
+
font-weight: 600;
|
|
2342
|
+
font-display: swap;
|
|
2343
|
+
src: url('./assets/fonts/Poppins-latin-600italic.woff2') format('woff2');
|
|
2344
|
+
}
|
|
2345
|
+
|
|
2346
|
+
/* EB Garamond */
|
|
2347
|
+
|
|
2348
|
+
@font-face {
|
|
2349
|
+
font-family: 'EB Garamond';
|
|
2350
|
+
font-style: normal;
|
|
2351
|
+
font-weight: 400;
|
|
2352
|
+
font-display: swap;
|
|
2353
|
+
src: url('./assets/fonts/EB-Garamond-400.woff2') format('woff2');
|
|
2354
|
+
}
|
|
2355
|
+
|
|
2356
|
+
@font-face {
|
|
2357
|
+
font-family: 'EB Garamond';
|
|
2358
|
+
font-style: normal;
|
|
2359
|
+
font-weight: 600;
|
|
2360
|
+
font-display: swap;
|
|
2361
|
+
src: url('./assets/fonts/EB-Garamond-600.woff2') format('woff2');
|
|
2362
|
+
}
|
|
2363
|
+
|
|
2364
|
+
@font-face {
|
|
2365
|
+
font-family: 'EB Garamond';
|
|
2366
|
+
font-style: italic;
|
|
2367
|
+
font-weight: 400;
|
|
2368
|
+
font-display: swap;
|
|
2369
|
+
src: url('./assets/fonts/EB-Garamond-400-italic.woff2') format('woff2');
|
|
2370
|
+
}
|
|
2371
|
+
|
|
2372
|
+
@font-face {
|
|
2373
|
+
font-family: 'EB Garamond';
|
|
2374
|
+
font-style: italic;
|
|
2375
|
+
font-weight: 600;
|
|
2376
|
+
font-display: swap;
|
|
2377
|
+
src: url('./assets/fonts/EB-Garamond-600-italic.woff2') format('woff2');
|
|
1550
2378
|
}
|
|
1551
2379
|
*::selection {
|
|
1552
2380
|
background-color: var(--dds-color-surface-highlighted-default);
|