@norges-domstoler/dds-design-tokens 6.0.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +71 -39
  2. package/dist/cjs/dds/build/js/Core/ddsTokens.d.ts +275 -0
  3. package/dist/cjs/dds/build/js/Public/ddsTokens.d.ts +275 -0
  4. package/dist/cjs/dds/index.d.ts +2 -1
  5. package/dist/cjs/index.js +1020 -735
  6. package/dist/cjs/src/index.d.ts +554 -412
  7. package/dist/css/ddsTokens-core.css +212 -0
  8. package/dist/css/ddsTokens-public.css +212 -0
  9. package/dist/dds/build/js/Core/ddsTokens.d.ts +275 -0
  10. package/dist/dds/build/js/Core/ddsTokens.js +278 -0
  11. package/dist/dds/build/js/Public/ddsTokens.d.ts +275 -0
  12. package/dist/dds/build/js/Public/ddsTokens.js +278 -0
  13. package/dist/dds/index.d.ts +2 -1
  14. package/dist/index.js +6 -2
  15. package/dist/scss/_ddsTokens.scss +206 -311
  16. package/dist/src/index.d.ts +554 -412
  17. package/package.json +17 -12
  18. package/dist/cjs/dds/build/js/ddsTokens.d.ts +0 -412
  19. package/dist/css/ddsTokens.css +0 -321
  20. package/dist/dds/build/js/ddsTokens.d.ts +0 -412
  21. package/dist/dds/build/js/ddsTokens.js +0 -415
package/dist/scss/_ddsTokens.scss CHANGED
@@ -1,314 +1,209 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
- $dds-color-primary-lightest: #eaeff4;
5
- $dds-color-primary-lighter: #acbbc6;
6
- $dds-color-primary-light: #4f6a7e;
7
- $dds-color-primary-base: #354754; // Primary er hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge
8
- $dds-color-primary-dark: #313d45;
9
- $dds-color-primary-darker: #202b32;
10
- $dds-color-primary-darkest: #151c22;
11
- $dds-color-neutrals-white: #ffffff;
12
- $dds-color-neutrals-gray1: #f8f9f9;
13
- $dds-color-neutrals-gray2: #ebecee;
14
- $dds-color-neutrals-gray3: #cfd4d7;
15
- $dds-color-neutrals-gray4: #adb5ba;
16
- $dds-color-neutrals-gray5: #77838c;
17
- $dds-color-neutrals-gray6: #545c62;
18
- $dds-color-neutrals-gray7: #3a4146;
19
- $dds-color-neutrals-gray8: #22272a;
20
- $dds-color-neutrals-gray9: #0b0d0e;
21
- $dds-color-interactive-lightest: #e7f1f7;
22
- $dds-color-interactive-lighter: #9fc5de;
23
- $dds-color-interactive-light: #589ac6;
24
- $dds-color-interactive-base: #106ead; // Interactive brukes til interaksjon. Dette er vanligvis knapper og lenker. Den brukes ofte for å indikere at en komponent er klikkbar eller at man interagerer med den
25
- $dds-color-interactive-dark: #0d588a;
26
- $dds-color-interactive-darker: #0a4268;
27
- $dds-color-interactive-darkest: #062c45;
28
- $dds-color-secondary-lightest: #e6eded; // --l80
29
- $dds-color-secondary-lighter: #cddbdb;
30
- $dds-color-secondary-light: #b8cdcd;
31
- $dds-color-secondary-base: #9ab8b7; // Secondary er den andre hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge.
32
- $dds-color-secondary-dark: #7b9392;
33
- $dds-color-secondary-darker: #4d6463;
34
- $dds-color-secondary-darkest: #3e4a49;
35
- $dds-color-tertiary-lightest: #ffe6df;
36
- $dds-color-tertiary-lighter: #ffd6ca;
37
- $dds-color-tertiary-light: #f6c1b1;
38
- $dds-color-tertiary-base: #f2a68f; // Tertiary er er den tredje profilfargen til Domstolene. Denne brukes gjerne som støttefarge
39
- $dds-color-tertiary-dark: #f59877;
40
- $dds-color-tertiary-darker: #f27e55;
41
- $dds-color-tertiary-darkest: #c26544;
42
- $dds-color-success-lightest: #f0f9f0;
43
- $dds-color-success-lighter: #c1e5c2;
44
- $dds-color-success-light: #93d294;
45
- $dds-color-success-base: #65be66; // Brukes for å kommunisere suksess eller noe som er riktig.
46
- $dds-color-success-dark: #519852;
47
- $dds-color-success-darker: #3d723d;
48
- $dds-color-success-darkest: #284c29;
49
- $dds-color-danger-lightest: #fbebeb;
50
- $dds-color-danger-lighter: #efafaf;
51
- $dds-color-danger-light: #e47373;
52
- $dds-color-danger-base: #d83737; // Brukes for å kommunisere feil og destruktive handlinger, som f.eks. slett.
53
- $dds-color-danger-dark: #ad2c2c;
54
- $dds-color-danger-darker: #822121;
55
- $dds-color-danger-darkest: #561616;
56
- $dds-color-warning-lightest: #fefced;
57
- $dds-color-warning-lighter: #fbf3b8;
58
- $dds-color-warning-light: #f7e982;
59
- $dds-color-warning-base: #f4e04d; // Brukes for å kommunisere varsler.
60
- $dds-color-warning-dark: #c3b33e;
61
- $dds-color-warning-darker: #92862e;
62
- $dds-color-warning-darkest: #625a1f;
63
- $dds-color-info-lightest: #f1f8fd;
64
- $dds-color-info-lighter: #c8e3f5;
65
- $dds-color-info-light: #9eceee;
66
- $dds-color-info-base: #75b9e6;
67
- $dds-color-info-dark: #5e94b8;
68
- $dds-color-info-darker: #466f8a;
69
- $dds-color-info-darkest: #2f4a5c;
70
- $dds-color-visited-base: #7f29b4; // Used for visited links
71
- $dds-color-visited-lighter: #cca9e1; // Used for visited links
72
- $dds-color-bg-default: #ffffff; // UI shell base color
73
- $dds-color-bg-subtle: #f8f9f9; // Alternative UI shell base color
74
- $dds-color-surface-default: #ffffff; // Default bg
75
- $dds-color-surface-subtle: #f8f9f9; // Subtle surface color
76
- $dds-color-surface-medium: #ebecee; // Medium surface color
77
- $dds-color-surface-hover-default: #e7f1f7; // Hover on surface (default, subtle, medium)
78
- $dds-color-surface-hover-subtle: #f8f9f9; // Subtle hover on surface (default, medium)
79
- $dds-color-surface-selected-default: #e7f1f7; // Selected state for surface (default, subtle, medium)
80
- $dds-color-surface-inverse-default: #354754; // Can be used as a surface for menu, navigation, footer etc
81
- $dds-color-surface-inverse-hover: #313d45; // Hover on surface.inverse
82
- $dds-color-surface-inverse-selected: #202b32; // selected on surface.inverse
83
- $dds-color-surface-action-resting: #106ead; // Primary button bg
84
- $dds-color-surface-action-hover: #0d588a; // Hover on surface.action/selected
85
- $dds-color-surface-action-selected: #106ead; // Selected state for components such as togglebutton, togglebar, progress tracker, checkbox etc
86
- $dds-color-surface-action-danger-resting: #d83737; // Danger button
87
- $dds-color-surface-action-danger-hover: #ad2c2c; // Hover on surface.action-danger
88
- $dds-color-surface-action-selected-disabled: #77838c; // bg on a selected disabled checkbox, radio etc
89
- $dds-color-surface-danger-default: #fbebeb; // tag, message, errormessage
90
- // tag strong value
91
- //
92
- $dds-color-surface-danger-strong: #e47373;
93
- $dds-color-surface-success-default: #f0f9f0; // tag, message
94
- $dds-color-surface-success-strong: #93d294; // tag with strong value
95
- $dds-color-surface-warning-default: #fefced; // tag, message
96
- $dds-color-surface-warning-strong: #f7e982; // tag strong value
97
- $dds-color-surface-info-default: #f1f8fd; // tag, message
98
- $dds-color-surface-info-strong: #9eceee; // tag strong value
99
- $dds-color-surface-paper-default: #ffffff; // modal, drawer, popover etc
100
- $dds-color-surface-backdrop-default: #0b0d0e80; // background overlay for modals (50%)
101
- $dds-color-surface-field-default: #ffffff; // Form elements (textinput, datepicker etc)
102
- $dds-color-surface-field-disabled: #f8f9f9; // disabled state on surface.field
103
- $dds-color-surface-highlighted-default: #ffe6df; // bg for highlighted text on text.default. Use with $Text
104
- $dds-color-surface-scrollbar: #adb5ba; // Used for scrollbar
105
- $dds-color-surface-notification: #d83737; // bg on a notification
106
- $dds-color-surface-skeleton: #cfd4d7; // Used for skeleton
107
- $dds-color-border-default: #77838c; // Form components, togglebutton, secondary button, checkbox etc
108
- $dds-color-border-subtle: #cfd4d7; // Dropdown, tooltip, overflow etc
109
- $dds-color-border-inverse: #acbbc6; // Border or divider on surface.inverse
110
- $dds-color-border-action-default: #106ead; // Used in progress tracker
111
- $dds-color-border-action-hover: #0d588a; // Hover on secondary button etc
112
- // Tag-default
113
- //
114
- $dds-color-border-success: #65be66;
115
- $dds-color-border-warning: #f4e04d; // Tag.default
116
- $dds-color-border-danger: #d83737; // Tag.default, error message field
117
- $dds-color-border-info: #75b9e6; // Tag.default
118
- $dds-color-border-on-action: #ffffff; // Used on primary split button
119
- $dds-color-text-default: #0b0d0e; // default text, heading, body. on surface.hover
120
- $dds-color-text-medium: #3a4146; // Label, etc
121
- $dds-color-text-subtle: #545c62; // Disabled or less important text
122
- $dds-color-text-on-inverse: #ffffff; // On surface.inverse
123
- $dds-color-text-on-action: #ffffff; // On surface.action (primary and danger button)
124
- $dds-color-text-on-status-default: #0b0d0e; // On default status surfaces
125
- $dds-color-text-on-status-strong: #0b0d0e; // On status surfaces with strong prop
126
- $dds-color-text-action-resting: #106ead; // Link, number in progress tracker
127
- $dds-color-text-action-hover: #0d588a; // Hover on text.action
128
- $dds-color-text-requiredfield: #d83737; // Asterix to indicate required field
129
- $dds-color-text-action-visited: #7f29b4; // Used for visited links
130
- $dds-color-text-action-visited-on-inverse: #cca9e1; // Used for visited links on inverse surfaces
131
- $dds-color-text-on-notification: #ffffff; // Used on surface.notification
132
- $dds-color-icon-default: #0b0d0e; // Often used with text.default
133
- $dds-color-icon-medium: #3a4146; // Often used with text.medium
134
- $dds-color-icon-subtle: #545c62; // Often used with text.subtle
135
- $dds-color-icon-on-inverse: #ffffff; // On surface.inverse
136
- $dds-color-icon-on-action: #ffffff; // On surface.action (primary and danger button)
137
- $dds-color-icon-action-resting: #106ead; // Often used with Text.action
138
- $dds-color-icon-action-hover: #0d588a; // hover on icon-action, used on secondary buttons etc
139
- $dds-color-icon-on-success-default: #3d723d; // On surface.success-default
140
- $dds-color-icon-on-success-strong: #0b0d0e; // On surface-success-strong
141
- $dds-color-icon-on-warning-default: #92862e; // On surface.warning-default
142
- $dds-color-icon-on-warning-strong: #0b0d0e; // On surface.warning-strong
143
- $dds-color-icon-on-danger-default: #ad2c2c; // On surface.danger-default
144
- $dds-color-icon-on-danger-strong: #0b0d0e; // On surface.danger-strong
145
- $dds-color-icon-on-info-default: #466f8a; // On surface.info-default
146
- $dds-color-icon-on-info-strong: #0b0d0e; // On surface.info-strong
147
- $dds-color-brand-primary-default: #354754; // Primary brand color
148
- $dds-color-brand-primary-subtle: #eaeff4; // Primary brand color
149
- $dds-color-brand-primary-medium: #4f6a7e; // Primary brand color
150
- $dds-color-brand-primary-strong: #202b32;
151
- $dds-color-brand-secondary-default: #9ab8b7; // Secondary brand color
152
- $dds-color-brand-secondary-subtle: #e6eded; // Secondary brand color
153
- $dds-color-brand-secondary-medium: #b8cdcd; // Secondary brand color
154
- $dds-color-brand-secondary-strong: #4d6463;
155
- $dds-color-brand-tertiary-default: #f2a68f; // Tertiary brand color
156
- $dds-color-brand-tertiary-subtle: #ffe6df; // Tertiary brand color
157
- $dds-color-brand-tertiary-medium: #f6c1b1; // Tertiary brand color
158
- $dds-color-brand-tertiary-strong: #f27e55;
159
- $dds-color-focus-outside: #2f4a5c; // Contrast to .inside
160
- $dds-color-focus-inside: #f1f8fd; // Contrast to .outside
161
- $dds-border-radius-0: 0px;
162
- $dds-border-radius-1: 2px;
163
- $dds-border-radius-2: 4px;
164
- $dds-border-radius-3: 8px;
165
- $dds-border-radius-100: 9999px; // Rounded buttons, round shapes etc
166
- $dds-border-radius-button: 2px; // For use in button component and togglebutton
167
- $dds-border-radius-surface: 2px; // Most surfaces, for example cards, papers, messages, backgrounds in GUI
168
- $dds-border-radius-input: 2px; // All input fields, and check boxes
169
- $dds-border-radius-chip: 2px; // chips and tags
170
- $dds-border-radius-rounded: 9999px; // rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker
171
- $dds-spacing-x0: 0px;
172
- $dds-spacing-x0-125: 2px;
173
- $dds-spacing-x0-25: 4px;
174
- $dds-spacing-x0-5: 8px;
175
- $dds-spacing-x0-75: 12px;
176
- $dds-spacing-x1: 16px;
177
- $dds-spacing-x1-5: 24px;
178
- $dds-spacing-x2: 32px;
179
- $dds-spacing-x2-5: 40px;
180
- $dds-spacing-x3: 48px;
181
- $dds-spacing-x4: 64px;
182
- $dds-spacing-x6: 96px;
183
- $dds-spacing-x10: 160px;
184
- $dds-spacing-padding-top-heading: 0.7em; // Ekstra spacing over dds-header. 70% av størrelsen på headeren
185
- $dds-shadow-1: 1px 2px 4px 0px rgba(11, 13, 14, 10%);
186
- $dds-shadow-2: 2px 4px 8px 0px rgba(11, 13, 14, 10%);
187
- $dds-shadow-3: 4px 8px 16px 0px rgba(11, 13, 14, 10%);
188
- $dds-shadow-4: 8px 16px 32px 0px rgba(11, 13, 14, 10%);
189
- $dds-font-family-sans: 'IBM Plex Sans';
190
- $dds-font-family-monospace: 'IBM Plex Mono'; // For kode
191
- $dds-font-size-x5: 5rem;
192
- $dds-font-size-x4: 4rem;
193
- $dds-font-size-x3: 3rem;
194
- $dds-font-size-x2-5: 2.5rem;
195
- $dds-font-size-x2: 2rem;
196
- $dds-font-size-x1-5: 1.5rem;
197
- $dds-font-size-x1-25: 1.25rem;
198
- $dds-font-size-x1-125: 1.125rem;
199
- $dds-font-size-x1: 1rem;
200
- $dds-font-size-x0-875: 0.875rem;
201
- $dds-font-size-x0-75: 0.75rem;
202
- $dds-font-weight-light: 300;
203
- $dds-font-weight-normal: 400;
204
- $dds-font-weight-bold: 600;
205
- $dds-font-lineheight-x1: 1.5; // Brukes på str ×1_25 og mindre
206
- $dds-font-lineheight-x2: 1.35; // Brukes på str x1.5, ×2 og ×3
207
- $dds-font-lineheight-x3: 1.2; // Brukes på str ×3 og større
208
- $dds-font-lineheight-list: 2.5; // Brukes på lister
209
- $dds-font-letter-spacing-tight: -0.01em; // Brukes på str ×2.5 og større
210
- $dds-font-letter-spacing-normal: 0em; // Brukes på str ×1 og opp til og med ×2
211
- $dds-font-letter-spacing-loose: 0.01em; // Brukes på størrelser under ×1
212
- $dds-font-paragraph-spacing-small: 1em; // Brukes på str ×1_25 og mindre
213
- $dds-font-paragraph-spacing-medium: 0.66em; // Brukes på str x1.5, ×2 og ×3
214
- $dds-font-paragraph-spacing-large: 0.5em; // Brukes på str ×3 og større
215
- $dds-font-paragraph-spacing-heading: 0.4em; // Brukes på på alle headere (bottom)
216
- $dds-font-supporting-style-label-01: 600 0.875rem/1.5 'IBM Plex Sans'; // Label for form components
217
- $dds-font-supporting-style-helpertext-01: 400 0.75rem/1.5 'IBM Plex Sans'; // Helper text for form components
218
- $dds-font-supporting-style-placeholdertext-01: 400 1rem/1.5 'IBM Plex Sans'; // placeholder for form components (select)
219
- $dds-font-supporting-style-placeholdertext-02: 400 0.875rem/1.5 'IBM Plex Sans'; // placeholder for form components (select)
220
- $dds-font-supporting-style-placeholdertext-03: 400 0.75rem/1.5 'IBM Plex Sans'; // placeholder for form components (select)
221
- $dds-font-supporting-style-tiny-01: 400 0.75rem/1.5 'IBM Plex Sans'; // Veldig liten font-størrelse, bruk sparsomt
222
- $dds-font-supporting-style-tiny-02: 300 0.75rem/1.5 'IBM Plex Sans'; // Veldig liten font-størrelse, bruk sparsomt
223
- $dds-font-body-sans-01: 400 0.875rem/1.5 'IBM Plex Sans';
224
- $dds-font-body-sans-02: 400 1rem/1.5 'IBM Plex Sans';
225
- $dds-font-body-sans-03: 400 1.125rem/1.5 'IBM Plex Sans';
226
- $dds-font-body-sans-04: 400 1.25rem/1.5 'IBM Plex Sans';
227
- $dds-font-heading-sans-01: 600 1rem/1.5 'IBM Plex Sans';
228
- $dds-font-heading-sans-02: 600 1.125rem/1.35 'IBM Plex Sans';
229
- $dds-font-heading-sans-03: 400 1.5rem/1.35 'IBM Plex Sans';
230
- $dds-font-heading-sans-04: 400 2rem/1.35 'IBM Plex Sans';
231
- $dds-font-heading-sans-05: 300 2.5rem/1.35 'IBM Plex Sans';
232
- $dds-font-heading-sans-06: 300 3rem/1.2 'IBM Plex Sans';
233
- $dds-font-heading-sans-07: 300 4rem/1.2 'IBM Plex Sans';
234
- $dds-font-heading-sans-08: 300 5rem/1.2 'IBM Plex Sans';
235
- $dds-font-lead-sans-01: 600 1.125rem/1.5 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
236
- $dds-font-lead-sans-02: 600 1.5rem/1.35 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
237
- $dds-font-lead-sans-03: 300 1.5rem/1.35 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
238
- $dds-font-lead-sans-04: 300 2rem/1.35 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
239
- $dds-font-lead-sans-05: 300 2.5rem/1.35 'IBM Plex Sans'; // Lead brukes som ingress når man skriver artikler etc
240
- $dds-font-code-monospace-02: 400 1rem/1.5 'IBM Plex Mono'; // Brukes for kodesnutter etc
241
- $dds-font-style-underline: underline;
242
- $dds-font-style-normal: none;
243
- $dds-font-style-italic: italic;
244
- $dds-icon-size-large: 40px;
245
- $dds-icon-size-medium: 24px;
246
- $dds-icon-size-small: 16px;
247
- $dds-grid-xs-count: 4;
248
- $dds-grid-xs-gutter-size: 16px;
249
- $dds-grid-sm-count: 8;
250
- $dds-grid-sm-gutter-size: 16px;
251
- $dds-grid-lg-count: 12;
252
- $dds-grid-lg-gutter-size: 24px;
253
- $dds-grid-md-count: 12;
254
- $dds-grid-md-gutter-size: 24px;
255
- $dds-grid-xl-count: 12;
256
- $dds-grid-xl-gutter-size: 24px;
257
- $dds-breakpoint-xs: 1px;
258
- $dds-breakpoint-sm: 600px;
259
- $dds-breakpoint-md: 960px;
260
- $dds-breakpoint-lg: 1280px;
261
- $dds-breakpoint-xl: 1920px;
262
- $dds-font-supporting-style-label-01-letter-spacing: 0.01em;
263
- $dds-font-supporting-style-label-01-paragraph-spacing: 1em;
264
- $dds-font-supporting-style-helpertext-01-letter-spacing: 0.01em;
265
- $dds-font-supporting-style-helpertext-01-paragraph-spacing: 1em;
266
- $dds-font-supporting-style-placeholdertext-01-letter-spacing: 0em;
267
- $dds-font-supporting-style-placeholdertext-01-paragraph-spacing: 1em;
268
- $dds-font-supporting-style-placeholdertext-01-font-style: italic;
269
- $dds-font-supporting-style-placeholdertext-02-letter-spacing: 0.01em;
270
- $dds-font-supporting-style-placeholdertext-02-paragraph-spacing: 1em;
271
- $dds-font-supporting-style-placeholdertext-02-font-style: italic;
272
- $dds-font-supporting-style-placeholdertext-03-letter-spacing: 0.01em;
273
- $dds-font-supporting-style-placeholdertext-03-paragraph-spacing: 1em;
274
- $dds-font-supporting-style-placeholdertext-03-font-style: italic;
275
- $dds-font-supporting-style-tiny-01-letter-spacing: 0.01em;
276
- $dds-font-supporting-style-tiny-01-paragraph-spacing: 1em;
277
- $dds-font-supporting-style-tiny-02-letter-spacing: 0.01em;
278
- $dds-font-supporting-style-tiny-02-paragraph-spacing: 1em;
279
- $dds-font-body-sans-01-letter-spacing: 0.01em;
280
- $dds-font-body-sans-01-paragraph-spacing: 1em;
281
- $dds-font-body-sans-02-letter-spacing: 0em;
282
- $dds-font-body-sans-02-paragraph-spacing: 1em;
283
- $dds-font-body-sans-03-letter-spacing: 0em;
284
- $dds-font-body-sans-03-paragraph-spacing: 1em;
285
- $dds-font-body-sans-04-letter-spacing: 0em;
286
- $dds-font-body-sans-04-paragraph-spacing: 1em;
287
- $dds-font-heading-sans-01-letter-spacing: 0em;
288
- $dds-font-heading-sans-01-paragraph-spacing: 0.4em;
289
- $dds-font-heading-sans-02-letter-spacing: 0em;
290
- $dds-font-heading-sans-02-paragraph-spacing: 0.4em;
291
- $dds-font-heading-sans-03-letter-spacing: 0em;
292
- $dds-font-heading-sans-03-paragraph-spacing: 0.4em;
293
- $dds-font-heading-sans-04-letter-spacing: 0em;
294
- $dds-font-heading-sans-04-paragraph-spacing: 0.4em;
295
- $dds-font-heading-sans-05-letter-spacing: -0.01em;
296
- $dds-font-heading-sans-05-paragraph-spacing: 0.4em;
297
- $dds-font-heading-sans-06-letter-spacing: -0.01em;
298
- $dds-font-heading-sans-06-paragraph-spacing: 0.4em;
299
- $dds-font-heading-sans-07-letter-spacing: -0.01em;
300
- $dds-font-heading-sans-07-paragraph-spacing: 0.4em;
301
- $dds-font-heading-sans-08-letter-spacing: -0.01em;
302
- $dds-font-heading-sans-08-paragraph-spacing: 0.4em;
303
- $dds-font-lead-sans-01-letter-spacing: 0em;
304
- $dds-font-lead-sans-01-paragraph-spacing: 1em;
305
- $dds-font-lead-sans-02-letter-spacing: 0em;
306
- $dds-font-lead-sans-02-paragraph-spacing: 0.66em;
307
- $dds-font-lead-sans-03-letter-spacing: 0em;
308
- $dds-font-lead-sans-03-paragraph-spacing: 0.66em;
309
- $dds-font-lead-sans-04-letter-spacing: 0em;
310
- $dds-font-lead-sans-04-paragraph-spacing: 0.66em;
311
- $dds-font-lead-sans-05-letter-spacing: -0.01em;
312
- $dds-font-lead-sans-05-paragraph-spacing: 0.66em;
313
- $dds-font-code-monospace-02-letter-spacing: 0em;
314
- $dds-font-code-monospace-02-paragraph-spacing: 1em;
4
+ $dds-font-family-sans: var(--dds-font-family-sans);
5
+ $dds-font-family-monospace: var(--dds-font-family-monospace); /* For kode */
6
+ $dds-font-size-x5: var(--dds-font-size-x5);
7
+ $dds-font-size-x4: var(--dds-font-size-x4);
8
+ $dds-font-size-x3: var(--dds-font-size-x3);
9
+ $dds-font-size-x2-5: var(--dds-font-size-x2-5);
10
+ $dds-font-size-x2: var(--dds-font-size-x2);
11
+ $dds-font-size-x1-5: var(--dds-font-size-x1-5);
12
+ $dds-font-size-x1-25: var(--dds-font-size-x1-25);
13
+ $dds-font-size-x1-125: var(--dds-font-size-x1-125);
14
+ $dds-font-size-x1: var(--dds-font-size-x1);
15
+ $dds-font-size-x0-875: var(--dds-font-size-x0-875);
16
+ $dds-font-size-x0-75: var(--dds-font-size-x0-75);
17
+ $dds-font-size-xxlarge: var(--dds-font-size-xxlarge);
18
+ $dds-font-size-xlarge: var(--dds-font-size-xlarge);
19
+ $dds-font-size-large: var(--dds-font-size-large);
20
+ $dds-font-size-medium: var(--dds-font-size-medium);
21
+ $dds-font-size-small: var(--dds-font-size-small);
22
+ $dds-font-size-xsmall: var(--dds-font-size-xsmall);
23
+ $dds-font-size-xxsmall: var(--dds-font-size-xxsmall);
24
+ $dds-font-size-xxxsmall: var(--dds-font-size-xxxsmall);
25
+ $dds-font-weight-light: var(--dds-font-weight-light);
26
+ $dds-font-weight-normal: var(--dds-font-weight-normal);
27
+ $dds-font-weight-bold: var(--dds-font-weight-bold);
28
+ $dds-font-lineheight-x1: var(--dds-font-lineheight-x1); /* Brukes på str ×1_25 og mindre */
29
+ $dds-font-lineheight-x2: var(--dds-font-lineheight-x2); /* Brukes på str x1.5, ×2 og ×3 */
30
+ $dds-font-lineheight-x3: var(--dds-font-lineheight-x3); /* Brukes på str ×3 og større */
31
+ $dds-font-lineheight-list: var(--dds-font-lineheight-list); /* Brukes på lister */
32
+ $dds-font-letter-spacing-tight: var(--dds-font-letter-spacing-tight); /* Brukes på str ×2.5 og større */
33
+ $dds-font-letter-spacing-normal: var(--dds-font-letter-spacing-normal); /* Brukes på str ×1 og opp til og med ×2 */
34
+ $dds-font-letter-spacing-loose: var(--dds-font-letter-spacing-loose); /* Brukes på størrelser under ×1 */
35
+ $dds-font-paragraph-spacing-small: var(--dds-font-paragraph-spacing-small); /* Brukes på str ×1_25 og mindre */
36
+ $dds-font-paragraph-spacing-medium: var(--dds-font-paragraph-spacing-medium); /* Brukes på str x1.5, ×2 og ×3 */
37
+ $dds-font-paragraph-spacing-large: var(--dds-font-paragraph-spacing-large); /* Brukes på str ×3 og større */
38
+ $dds-font-paragraph-spacing-heading: var(--dds-font-paragraph-spacing-heading); /* Brukes på på alle headere (bottom) */
39
+ $dds-font-style-underline: var(--dds-font-style-underline);
40
+ $dds-font-style-normal: var(--dds-font-style-normal);
41
+ $dds-font-style-italic: var(--dds-font-style-italic);
42
+ $dds-spacing-padding-top-heading: var(--dds-spacing-padding-top-heading); /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
43
+ $dds-spacing-x0: var(--dds-spacing-x0);
44
+ $dds-spacing-x0-125: var(--dds-spacing-x0-125);
45
+ $dds-spacing-x0-25: var(--dds-spacing-x0-25);
46
+ $dds-spacing-x0-5: var(--dds-spacing-x0-5);
47
+ $dds-spacing-x0-75: var(--dds-spacing-x0-75);
48
+ $dds-spacing-x1: var(--dds-spacing-x1);
49
+ $dds-spacing-x1-5: var(--dds-spacing-x1-5);
50
+ $dds-spacing-x2: var(--dds-spacing-x2);
51
+ $dds-spacing-x2-5: var(--dds-spacing-x2-5);
52
+ $dds-spacing-x3: var(--dds-spacing-x3);
53
+ $dds-spacing-x4: var(--dds-spacing-x4);
54
+ $dds-spacing-x6: var(--dds-spacing-x6);
55
+ $dds-spacing-x10: var(--dds-spacing-x10);
56
+ $dds-shadow-1: var(--dds-shadow-1);
57
+ $dds-shadow-2: var(--dds-shadow-2);
58
+ $dds-shadow-3: var(--dds-shadow-3);
59
+ $dds-shadow-4: var(--dds-shadow-4);
60
+ $dds-grid-xs-gutter-size: var(--dds-grid-xs-gutter-size);
61
+ $dds-grid-xs-count: var(--dds-grid-xs-count);
62
+ $dds-grid-sm-gutter-size: var(--dds-grid-sm-gutter-size);
63
+ $dds-grid-sm-count: var(--dds-grid-sm-count);
64
+ $dds-grid-lg-gutter-size: var(--dds-grid-lg-gutter-size);
65
+ $dds-grid-lg-count: var(--dds-grid-lg-count);
66
+ $dds-grid-md-gutter-size: var(--dds-grid-md-gutter-size);
67
+ $dds-grid-md-count: var(--dds-grid-md-count);
68
+ $dds-grid-xl-gutter-size: var(--dds-grid-xl-gutter-size);
69
+ $dds-grid-xl-count: var(--dds-grid-xl-count);
70
+ $dds-icon-size-large: var(--dds-icon-size-large);
71
+ $dds-icon-size-medium: var(--dds-icon-size-medium);
72
+ $dds-icon-size-small: var(--dds-icon-size-small);
73
+ $dds-breakpoint-xs: var(--dds-breakpoint-xs);
74
+ $dds-breakpoint-sm: var(--dds-breakpoint-sm);
75
+ $dds-breakpoint-md: var(--dds-breakpoint-md);
76
+ $dds-breakpoint-lg: var(--dds-breakpoint-lg);
77
+ $dds-breakpoint-xl: var(--dds-breakpoint-xl);
78
+ $dds-color-bg-default: var(--dds-color-bg-default); /* UI shell base color */
79
+ $dds-color-bg-subtle: var(--dds-color-bg-subtle); /* Alternative UI shell base color */
80
+ $dds-color-surface-default: var(--dds-color-surface-default); /* Default bg */
81
+ $dds-color-surface-subtle: var(--dds-color-surface-subtle); /* Subtle surface color */
82
+ $dds-color-surface-medium: var(--dds-color-surface-medium); /* Medium surface color */
83
+ $dds-color-surface-hover-default: var(--dds-color-surface-hover-default); /* Hover on surface (default, subtle, medium) */
84
+ $dds-color-surface-hover-subtle: var(--dds-color-surface-hover-subtle); /* Subtle hover on surface (default, medium) */
85
+ $dds-color-surface-selected-default: var(--dds-color-surface-selected-default); /* Selected state for surface (default, subtle, medium) */
86
+ $dds-color-surface-inverse-default: var(--dds-color-surface-inverse-default); /* Can be used as a surface for menu, navigation, footer etc */
87
+ $dds-color-surface-inverse-hover: var(--dds-color-surface-inverse-hover); /* Hover on surface.inverse */
88
+ $dds-color-surface-inverse-selected: var(--dds-color-surface-inverse-selected); /* selected on surface.inverse */
89
+ $dds-color-surface-action-resting: var(--dds-color-surface-action-resting); /* Primary button bg */
90
+ $dds-color-surface-action-hover: var(--dds-color-surface-action-hover); /* Hover on surface.action/selected */
91
+ $dds-color-surface-action-selected: var(--dds-color-surface-action-selected); /* Selected state for components such as togglebutton, togglebar, progress tracker, checkbox etc */
92
+ $dds-color-surface-action-danger-resting: var(--dds-color-surface-action-danger-resting); /* Danger button */
93
+ $dds-color-surface-action-danger-hover: var(--dds-color-surface-action-danger-hover); /* Hover on surface.action-danger */
94
+ $dds-color-surface-action-selected-disabled: var(--dds-color-surface-action-selected-disabled); /* bg on a selected disabled checkbox, radio etc */
95
+ $dds-color-surface-danger-default: var(--dds-color-surface-danger-default); /* tag, message, errormessage */
96
+ $dds-color-surface-danger-strong: var(--dds-color-surface-danger-strong); /* tag strong value */
97
+ $dds-color-surface-success-default: var(--dds-color-surface-success-default); /* tag, message */
98
+ $dds-color-surface-success-strong: var(--dds-color-surface-success-strong); /* tag with strong value */
99
+ $dds-color-surface-warning-default: var(--dds-color-surface-warning-default); /* tag, message */
100
+ $dds-color-surface-warning-strong: var(--dds-color-surface-warning-strong); /* tag strong value */
101
+ $dds-color-surface-info-default: var(--dds-color-surface-info-default); /* tag, message */
102
+ $dds-color-surface-info-strong: var(--dds-color-surface-info-strong); /* tag strong value */
103
+ $dds-color-surface-paper-default: var(--dds-color-surface-paper-default); /* modal, drawer, popover etc */
104
+ $dds-color-surface-backdrop-default: var(--dds-color-surface-backdrop-default); /* background overlay for modals (50%) */
105
+ $dds-color-surface-field-default: var(--dds-color-surface-field-default); /* Form elements (textinput, datepicker etc) */
106
+ $dds-color-surface-field-disabled: var(--dds-color-surface-field-disabled); /* disabled state on surface.field */
107
+ $dds-color-surface-highlighted-default: var(--dds-color-surface-highlighted-default); /* bg for highlighted text on text.default. Use with $Text */
108
+ $dds-color-surface-scrollbar: var(--dds-color-surface-scrollbar); /* Used for scrollbar */
109
+ $dds-color-surface-notification: var(--dds-color-surface-notification); /* bg on a notification */
110
+ $dds-color-surface-skeleton: var(--dds-color-surface-skeleton); /* Used for skeleton */
111
+ $dds-color-border-default: var(--dds-color-border-default); /* Form components, togglebutton, secondary button, checkbox etc */
112
+ $dds-color-border-subtle: var(--dds-color-border-subtle); /* Dropdown, tooltip, overflow etc */
113
+ $dds-color-border-inverse: var(--dds-color-border-inverse); /* Border or divider on surface.inverse */
114
+ $dds-color-border-action-default: var(--dds-color-border-action-default); /* Used in progress tracker */
115
+ $dds-color-border-action-hover: var(--dds-color-border-action-hover); /* Hover on secondary button etc */
116
+ $dds-color-border-success: var(--dds-color-border-success); /* Used with tag-default */
117
+ $dds-color-border-warning: var(--dds-color-border-warning); /* Tag.default */
118
+ $dds-color-border-danger: var(--dds-color-border-danger); /* Tag.default, error message field */
119
+ $dds-color-border-info: var(--dds-color-border-info); /* Tag.default */
120
+ $dds-color-border-on-action: var(--dds-color-border-on-action); /* Used on primary split button */
121
+ $dds-color-text-default: var(--dds-color-text-default); /* default text, heading, body. on surface.hover */
122
+ $dds-color-text-medium: var(--dds-color-text-medium); /* Label, etc */
123
+ $dds-color-text-subtle: var(--dds-color-text-subtle); /* Disabled or less important text */
124
+ $dds-color-text-on-inverse: var(--dds-color-text-on-inverse); /* On surface.inverse */
125
+ $dds-color-text-on-action: var(--dds-color-text-on-action); /* On surface.action (primary and danger button) */
126
+ $dds-color-text-on-status-default: var(--dds-color-text-on-status-default); /* On default status surfaces */
127
+ $dds-color-text-on-status-strong: var(--dds-color-text-on-status-strong); /* On status surfaces with strong prop */
128
+ $dds-color-text-action-resting: var(--dds-color-text-action-resting); /* Link, number in progress tracker */
129
+ $dds-color-text-action-hover: var(--dds-color-text-action-hover); /* Hover on text.action */
130
+ $dds-color-text-requiredfield: var(--dds-color-text-requiredfield); /* Asterix to indicate required field */
131
+ $dds-color-text-action-visited: var(--dds-color-text-action-visited); /* Used for visited links */
132
+ $dds-color-text-action-visited-on-inverse: var(--dds-color-text-action-visited-on-inverse); /* Used for visited links on inverse surfaces */
133
+ $dds-color-text-on-notification: var(--dds-color-text-on-notification); /* Used on surface.notification */
134
+ $dds-color-icon-default: var(--dds-color-icon-default); /* Often used with text.default */
135
+ $dds-color-icon-medium: var(--dds-color-icon-medium); /* Often used with text.medium */
136
+ $dds-color-icon-subtle: var(--dds-color-icon-subtle); /* Often used with text.subtle */
137
+ $dds-color-icon-on-inverse: var(--dds-color-icon-on-inverse); /* On surface.inverse */
138
+ $dds-color-icon-on-action: var(--dds-color-icon-on-action); /* On surface.action (primary and danger button) */
139
+ $dds-color-icon-action-resting: var(--dds-color-icon-action-resting); /* Often used with Text.action */
140
+ $dds-color-icon-action-hover: var(--dds-color-icon-action-hover); /* hover on icon-action, used on secondary buttons etc */
141
+ $dds-color-icon-on-success-default: var(--dds-color-icon-on-success-default); /* On surface.success-default */
142
+ $dds-color-icon-on-success-strong: var(--dds-color-icon-on-success-strong); /* On surface-success-strong */
143
+ $dds-color-icon-on-warning-default: var(--dds-color-icon-on-warning-default); /* On surface.warning-default */
144
+ $dds-color-icon-on-warning-strong: var(--dds-color-icon-on-warning-strong); /* On surface.warning-strong */
145
+ $dds-color-icon-on-danger-default: var(--dds-color-icon-on-danger-default); /* On surface.danger-default */
146
+ $dds-color-icon-on-danger-strong: var(--dds-color-icon-on-danger-strong); /* On surface.danger-strong */
147
+ $dds-color-icon-on-info-default: var(--dds-color-icon-on-info-default); /* On surface.info-default */
148
+ $dds-color-icon-on-info-strong: var(--dds-color-icon-on-info-strong); /* On surface.info-strong */
149
+ $dds-color-brand-primary-default: var(--dds-color-brand-primary-default); /* Primary brand color */
150
+ $dds-color-brand-primary-subtle: var(--dds-color-brand-primary-subtle); /* Primary brand color */
151
+ $dds-color-brand-primary-medium: var(--dds-color-brand-primary-medium); /* Primary brand color */
152
+ $dds-color-brand-primary-strong: var(--dds-color-brand-primary-strong);
153
+ $dds-color-brand-secondary-default: var(--dds-color-brand-secondary-default); /* Secondary brand color */
154
+ $dds-color-brand-secondary-subtle: var(--dds-color-brand-secondary-subtle); /* Secondary brand color */
155
+ $dds-color-brand-secondary-medium: var(--dds-color-brand-secondary-medium); /* Secondary brand color */
156
+ $dds-color-brand-secondary-strong: var(--dds-color-brand-secondary-strong);
157
+ $dds-color-brand-tertiary-default: var(--dds-color-brand-tertiary-default); /* Tertiary brand color */
158
+ $dds-color-brand-tertiary-subtle: var(--dds-color-brand-tertiary-subtle); /* Tertiary brand color */
159
+ $dds-color-brand-tertiary-medium: var(--dds-color-brand-tertiary-medium); /* Tertiary brand color */
160
+ $dds-color-brand-tertiary-strong: var(--dds-color-brand-tertiary-strong);
161
+ $dds-color-focus-outside: var(--dds-color-focus-outside); /* Contrast to .inside */
162
+ $dds-color-focus-inside: var(--dds-color-focus-inside); /* Contrast to .outside */
163
+ $dds-border-radius-button: var(--dds-border-radius-button); /* For use in button component and togglebutton */
164
+ $dds-border-radius-surface: var(--dds-border-radius-surface); /* Most surfaces, for example cards, papers, messages, backgrounds in GUI */
165
+ $dds-border-radius-input: var(--dds-border-radius-input); /* All input fields, and check boxes */
166
+ $dds-border-radius-chip: var(--dds-border-radius-chip); /* Chips and tags */
167
+ $dds-border-radius-rounded: var(--dds-border-radius-rounded); /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
168
+ $dds-font-label-medium: var(--dds-font-label-medium); /* Label for form components */
169
+ $dds-font-body-xsmall: var(--dds-font-body-xsmall); /* used with xsmall button and input fields */
170
+ $dds-font-body-small: var(--dds-font-body-small); /* used with small button and input fields */
171
+ $dds-font-body-medium: var(--dds-font-body-medium); /* standard body text, used with medium button and input fields */
172
+ $dds-font-body-large: var(--dds-font-body-large); /* Used for large button and large search */
173
+ $dds-font-heading-xxsmall: var(--dds-font-heading-xxsmall); /* Default h6 */
174
+ $dds-font-heading-xsmall: var(--dds-font-heading-xsmall); /* Default h5 */
175
+ $dds-font-heading-small: var(--dds-font-heading-small); /* Default h4 */
176
+ $dds-font-heading-medium: var(--dds-font-heading-medium); /* Default h3 */
177
+ $dds-font-heading-large: var(--dds-font-heading-large); /* Default h2 */
178
+ $dds-font-heading-xlarge: var(--dds-font-heading-xlarge); /* Default H1 */
179
+ $dds-font-heading-xxlarge: var(--dds-font-heading-xxlarge); /* Display or extra large page title (h1) */
180
+ $dds-font-lead-medium: var(--dds-font-lead-medium); /* Lead brukes som ingress når man skriver artikler etc */
181
+ $dds-font-code-medium: var(--dds-font-code-medium); /* Brukes for kodesnutter etc */
182
+ $dds-font-heading-xxlarge-letter-spacing: var(--dds-font-heading-xxlarge-letter-spacing);
183
+ $dds-font-heading-xxlarge-paragraph-spacing: var(--dds-font-heading-xxlarge-paragraph-spacing);
184
+ $dds-font-heading-xlarge-letter-spacing: var(--dds-font-heading-xlarge-letter-spacing);
185
+ $dds-font-heading-xlarge-paragraph-spacing: var(--dds-font-heading-xlarge-paragraph-spacing);
186
+ $dds-font-heading-large-letter-spacing: var(--dds-font-heading-large-letter-spacing);
187
+ $dds-font-heading-large-paragraph-spacing: var(--dds-font-heading-large-paragraph-spacing);
188
+ $dds-font-heading-medium-letter-spacing: var(--dds-font-heading-medium-letter-spacing);
189
+ $dds-font-heading-medium-paragraph-spacing: var(--dds-font-heading-medium-paragraph-spacing);
190
+ $dds-font-heading-small-letter-spacing: var(--dds-font-heading-small-letter-spacing);
191
+ $dds-font-heading-small-paragraph-spacing: var(--dds-font-heading-small-paragraph-spacing);
192
+ $dds-font-heading-xsmall-letter-spacing: var(--dds-font-heading-xsmall-letter-spacing);
193
+ $dds-font-heading-xsmall-paragraph-spacing: var(--dds-font-heading-xsmall-paragraph-spacing);
194
+ $dds-font-heading-xxsmall-letter-spacing: var(--dds-font-heading-xxsmall-letter-spacing);
195
+ $dds-font-heading-xxsmall-paragraph-spacing: var(--dds-font-heading-xxsmall-paragraph-spacing);
196
+ $dds-font-body-large-letter-spacing: var(--dds-font-body-large-letter-spacing);
197
+ $dds-font-body-large-paragraph-spacing: var(--dds-font-body-large-paragraph-spacing);
198
+ $dds-font-body-medium-letter-spacing: var(--dds-font-body-medium-letter-spacing);
199
+ $dds-font-body-medium-paragraph-spacing: var(--dds-font-body-medium-paragraph-spacing);
200
+ $dds-font-body-small-letter-spacing: var(--dds-font-body-small-letter-spacing);
201
+ $dds-font-body-small-paragraph-spacing: var(--dds-font-body-small-paragraph-spacing);
202
+ $dds-font-body-xsmall-letter-spacing: var(--dds-font-body-xsmall-letter-spacing);
203
+ $dds-font-body-xsmall-paragraph-spacing: var(--dds-font-body-xsmall-paragraph-spacing);
204
+ $dds-font-lead-medium-letter-spacing: var(--dds-font-lead-medium-letter-spacing);
205
+ $dds-font-lead-medium-paragraph-spacing: var(--dds-font-lead-medium-paragraph-spacing);
206
+ $dds-font-code-medium-letter-spacing: var(--dds-font-code-medium-letter-spacing);
207
+ $dds-font-code-medium-paragraph-spacing: var(--dds-font-code-medium-paragraph-spacing);
208
+ $dds-font-label-medium-letter-spacing: var(--dds-font-label-medium-letter-spacing);
209
+ $dds-font-label-medium-paragraph-spacing: var(--dds-font-label-medium-paragraph-spacing);