@inera/ids-design 8.1.0 → 8.2.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 (42) hide show
  1. package/components/action-link/action-link-lit.d.ts +2 -0
  2. package/components/action-link/action-link-lit.js +7 -0
  3. package/components/action-link/action-link.css +173 -0
  4. package/components/box-link/box-link-lit.js +1 -1
  5. package/components/box-link/box-link.css +0 -2
  6. package/components/card/card-lit.js +1 -1
  7. package/components/card/card.css +8 -12
  8. package/components/carousel/carousel-item-lit.js +1 -1
  9. package/components/carousel/carousel-item.css +0 -1
  10. package/components/carousel/carousel-lit.js +1 -1
  11. package/components/carousel/carousel.css +5 -0
  12. package/components/form/datepicker/datepicker-lit.d.ts +2 -0
  13. package/components/form/datepicker/datepicker-lit.js +9 -0
  14. package/components/form/datepicker/datepicker.css +570 -0
  15. package/components/form/error-message/error-message-lit.js +1 -1
  16. package/components/form/error-message/error-message.css +1 -0
  17. package/components/form/group/group-lit.js +1 -1
  18. package/components/form/group/group.css +1 -1
  19. package/components/form/range/range-lit.js +1 -1
  20. package/components/form/range/range.css +11 -1
  21. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  22. package/components/form/select-multiple/select-multiple.css +30 -6
  23. package/components/navigation/local/navigation-local-lit.js +1 -1
  24. package/components/navigation/local/navigation-local.css +1 -1
  25. package/components/side-menu/side-menu-lit.js +1 -1
  26. package/components/side-menu/side-menu.css +0 -1
  27. package/components/stepper/stepper-lit.js +1 -1
  28. package/components/stepper/stepper.css +1 -20
  29. package/components/tabs/tab-lit.js +1 -1
  30. package/components/tabs/tab.css +5 -2
  31. package/components/tabs/tabs-lit.js +1 -1
  32. package/components/tooltip/tooltip-lit.js +1 -1
  33. package/components/tooltip/tooltip.css +2 -2
  34. package/global/global.css +149 -50
  35. package/package.json +1 -1
  36. package/styles.css +305 -132
  37. package/tokens/component-tokens.scss +2 -0
  38. package/tokens/themes/1177-admin-tokens.css +110 -110
  39. package/tokens/themes/1177-pro-tokens.css +112 -112
  40. package/tokens/themes/1177-tokens.css +113 -113
  41. package/tokens/themes/inera-admin-tokens.css +113 -112
  42. package/tokens/themes/inera-tokens.css +113 -112
package/tokens/themes/inera-admin-tokens.css CHANGED
@@ -18,12 +18,15 @@
18
18
  --ids-palette-accent-50: #4f9278;
19
19
  --ids-palette-accent-60: #6faf97;
20
20
  --ids-palette-accent-70: #94d1b6;
21
- --ids-palette-neutral-10: #151515;
22
- --ids-palette-neutral-15: #252525;
23
- --ids-palette-neutral-20: #353636;
24
- --ids-palette-neutral-40: #727373;
25
- --ids-palette-neutral-90: #cccccc;
26
- --ids-palette-neutral-99: #f0f0f0;
21
+ --ids-palette-neutral-10: #16181a;
22
+ --ids-palette-neutral-20: #222529;
23
+ --ids-palette-neutral-30: #303438;
24
+ --ids-palette-neutral-40: #4d545c;
25
+ --ids-palette-neutral-60: #7b848f;
26
+ --ids-palette-neutral-70: #a1a9b2;
27
+ --ids-palette-neutral-90: #cfd7dd;
28
+ --ids-palette-neutral-95: #edf1f5;
29
+ --ids-palette-neutral-99: #f7f9fc;
27
30
  --ids-palette-neutral-100: #ffffff;
28
31
  --ids-palette-success-40: #2c863f;
29
32
  --ids-palette-success-99: #e7f7ea;
@@ -53,12 +56,12 @@
53
56
  .ids--inera-admin.ids--light {
54
57
  --ids-font-family-primary: Open sans;
55
58
  --ids-font-family-secondary: Poppins;
56
- --ids-font-weight-heading-xxl: 700;
57
- --ids-font-weight-heading-xl: 700;
58
- --ids-font-weight-heading-l: 700;
59
- --ids-font-weight-heading-m: 700;
60
- --ids-font-weight-heading-s: 700;
61
- --ids-font-weight-heading-xs: 700;
59
+ --ids-font-weight-heading-xxl: 600;
60
+ --ids-font-weight-heading-xl: 600;
61
+ --ids-font-weight-heading-l: 600;
62
+ --ids-font-weight-heading-m: 600;
63
+ --ids-font-weight-heading-s: 600;
64
+ --ids-font-weight-heading-xs: 600;
62
65
  --ids-font-weight-preamble: 300;
63
66
  --ids-font-weight-body-text: 400;
64
67
  --ids-font-weight-small-text: 400;
@@ -106,19 +109,19 @@
106
109
  --ids-font-family-small-text: var(--ids-font-family-primary);
107
110
  --ids-font-family-button: var(--ids-font-family-primary);
108
111
  --ids-color-surface-background-default: var(--ids-palette-neutral-100);
109
- --ids-color-surface-border-default: var(--ids-palette-neutral-40);
110
- --ids-color-surface-text-on-default: var(--ids-palette-neutral-20);
112
+ --ids-color-surface-border-default: var(--ids-palette-neutral-60);
113
+ --ids-color-surface-text-on-default: var(--ids-palette-neutral-30);
111
114
  --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-100);
112
115
  --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-90);
113
- --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-20);
116
+ --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-30);
114
117
  --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-40);
115
118
  --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-100);
116
- --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-20);
117
- --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-40);
119
+ --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-90);
120
+ --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-30);
118
121
  --ids-color-surface-background-alternative: var(--ids-palette-secondary-95);
119
- --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-20);
122
+ --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-30);
120
123
  --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-secondary-95);
121
- --ids-color-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-20);
124
+ --ids-color-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-30);
122
125
  --ids-color-brand-text-logo: var(--ids-palette-primary-40);
123
126
  --ids-color-brand-text-primary: var(--ids-palette-primary-40);
124
127
  --ids-color-brand-background-primary: var(--ids-palette-primary-40);
@@ -128,7 +131,7 @@
128
131
  --ids-color-brand-text-on-primary: var(--ids-palette-neutral-100);
129
132
  --ids-color-brand-background-secondary: var(--ids-palette-secondary-95);
130
133
  --ids-color-brand-text-secondary: var(--ids-palette-primary-30);
131
- --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-20);
134
+ --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-30);
132
135
  --ids-color-navigation-background-default: var(--ids-palette-primary-40);
133
136
  --ids-color-navigation-border-default: var(--ids-palette-primary-40);
134
137
  --ids-color-navigation-text-default: var(--ids-palette-primary-30);
@@ -153,80 +156,81 @@
153
156
  --ids-color-interactive-background-active: var(--ids-palette-accent-20);
154
157
  --ids-color-interactive-border-active: var(--ids-palette-accent-20);
155
158
  --ids-color-interactive-text-active: var(--ids-palette-accent-20);
159
+ --ids-color-interactive-toggle-marker-disabled: var(--ids-palette-neutral-90);
156
160
  --ids-color-interactive-text-on-active: var(--ids-palette-neutral-100);
157
- --ids-color-interactive-background-disabled: var(--ids-palette-neutral-100);
158
- --ids-color-interactive-border-disabled: var(--ids-palette-neutral-90);
159
- --ids-color-interactive-text-disabled: var(--ids-palette-neutral-40);
160
- --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
161
- --ids-color-interactive-focus-outline: var(--ids-palette-neutral-20);
161
+ --ids-color-interactive-background-disabled: var(--ids-palette-neutral-95);
162
+ --ids-color-interactive-border-disabled: var(--ids-palette-neutral-95);
163
+ --ids-color-interactive-text-disabled: var(--ids-palette-neutral-70);
164
+ --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-70);
165
+ --ids-color-interactive-focus-outline: var(--ids-palette-neutral-30);
162
166
  --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-100);
163
167
  --ids-color-feedback-background-information: var(--ids-palette-neutral-99);
164
168
  --ids-color-feedback-border-information: var(--ids-palette-neutral-40);
165
- --ids-color-feedback-text-on-information: var(--ids-palette-neutral-20);
166
- --ids-color-feedback-text-information: var(--ids-palette-neutral-20);
169
+ --ids-color-feedback-text-on-information: var(--ids-palette-neutral-30);
170
+ --ids-color-feedback-text-information: var(--ids-palette-neutral-30);
167
171
  --ids-color-feedback-background-success: var(--ids-palette-success-99);
168
172
  --ids-color-feedback-border-success: var(--ids-palette-success-40);
169
- --ids-color-feedback-text-on-success: var(--ids-palette-neutral-20);
173
+ --ids-color-feedback-text-on-success: var(--ids-palette-neutral-30);
170
174
  --ids-color-feedback-text-success: var(--ids-palette-success-40);
171
175
  --ids-color-feedback-background-attention: var(--ids-palette-attention-95);
172
176
  --ids-color-feedback-border-attention: var(--ids-palette-neutral-40);
173
- --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-20);
174
- --ids-color-feedback-text-attention: var(--ids-palette-neutral-20);
177
+ --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-30);
178
+ --ids-color-feedback-text-attention: var(--ids-palette-neutral-30);
175
179
  --ids-color-feedback-background-error: var(--ids-palette-error-99);
176
180
  --ids-color-feedback-border-error: var(--ids-palette-error-40);
177
- --ids-color-feedback-text-on-error: var(--ids-palette-neutral-20);
181
+ --ids-color-feedback-text-on-error: var(--ids-palette-neutral-30);
178
182
  --ids-color-feedback-text-error: var(--ids-palette-error-40);
179
183
  --ids-color-feedback-background-notification: var(--ids-palette-primary-40);
180
184
  --ids-color-feedback-text-on-notification: var(--ids-palette-neutral-100);
181
185
  --ids-color-form-background-default: var(--ids-palette-secondary-95);
182
186
  --ids-color-form-border-default: var(--ids-palette-accent-40);
183
- --ids-color-form-text-on-default: var(--ids-palette-neutral-20);
187
+ --ids-color-form-text-on-default: var(--ids-palette-neutral-30);
184
188
  --ids-color-form-placeholder-text-on-default: var(--ids-palette-neutral-40);
185
189
  --ids-color-form-background-light-default: var(--ids-palette-neutral-100);
186
190
  --ids-color-form-border-light-default: var(--ids-palette-accent-40);
187
- --ids-color-form-text-on-light-default: var(--ids-palette-neutral-20);
191
+ --ids-color-form-text-on-light-default: var(--ids-palette-neutral-30);
188
192
  --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-40);
189
193
  --ids-color-form-background-hover: var(--ids-palette-secondary-90);
190
194
  --ids-color-form-border-hover: var(--ids-palette-accent-30);
191
- --ids-color-form-text-on-hover: var(--ids-palette-neutral-20);
195
+ --ids-color-form-text-on-hover: var(--ids-palette-neutral-30);
192
196
  --ids-color-form-placeholder-text-on-hover: var(--ids-palette-neutral-40);
193
197
  --ids-color-form-background-light-hover: var(--ids-palette-secondary-90);
194
198
  --ids-color-form-border-light-hover: var(--ids-palette-accent-30);
195
- --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-20);
199
+ --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-30);
196
200
  --ids-color-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-40);
197
201
  --ids-color-form-background-active: var(--ids-palette-secondary-95);
198
202
  --ids-color-form-border-active: var(--ids-palette-accent-20);
199
- --ids-color-form-text-on-active: var(--ids-palette-neutral-20);
203
+ --ids-color-form-text-on-active: var(--ids-palette-neutral-30);
200
204
  --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-40);
201
205
  --ids-color-form-background-light-active: var(--ids-palette-neutral-100);
202
206
  --ids-color-form-border-light-active: var(--ids-palette-accent-20);
203
- --ids-color-form-text-on-light-active: var(--ids-palette-neutral-20);
207
+ --ids-color-form-text-on-light-active: var(--ids-palette-neutral-30);
204
208
  --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-40);
205
- --ids-color-form-background-disabled: var(--ids-palette-neutral-99);
206
- --ids-color-form-border-disabled: var(--ids-palette-neutral-40);
207
- --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-40);
208
- --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-40);
209
- --ids-color-form-background-light-disabled: var(--ids-palette-neutral-99);
210
- --ids-color-form-border-light-disabled: var(--ids-palette-neutral-40);
211
- --ids-color-form-text-on-disabled: var(--ids-palette-neutral-40);
212
- --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-40);
209
+ --ids-color-form-background-disabled: var(--ids-palette-neutral-95);
210
+ --ids-color-form-border-disabled: var(--ids-palette-neutral-95);
211
+ --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-70);
212
+ --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-70);
213
+ --ids-color-form-background-light-disabled: var(--ids-palette-neutral-95);
214
+ --ids-color-form-border-light-disabled: var(--ids-palette-neutral-95);
215
+ --ids-color-form-text-on-disabled: var(--ids-palette-neutral-70);
216
+ --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-70);
213
217
  --ids-color-form-background-invalid: var(--ids-palette-error-99);
214
218
  --ids-color-form-border-invalid: var(--ids-palette-error-40);
215
- --ids-color-form-text-on-invalid: var(--ids-palette-neutral-20);
219
+ --ids-color-form-text-on-invalid: var(--ids-palette-neutral-30);
216
220
  --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-40);
217
221
  --ids-color-form-message-background-invalid: var(--ids-palette-neutral-100);
218
222
  --ids-color-form-message-border-invalid: var(--ids-palette-error-40);
219
223
  --ids-color-form-message-text-on-invalid: var(--ids-palette-error-40);
220
224
  --ids-color-form-background-light-invalid: var(--ids-palette-error-99);
221
225
  --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
222
- --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-20);
226
+ --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-30);
223
227
  --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-40);
228
+ --ids-color-heading-text-m: var(--ids-palette-neutral-20);
229
+ --ids-color-heading-text-s: var(--ids-palette-neutral-20);
230
+ --ids-color-heading-text-xs: var(--ids-palette-neutral-20);
224
231
  --ids-color-heading-text-xxl: var(--ids-color-brand-text-primary);
225
232
  --ids-color-heading-text-xl: var(--ids-color-brand-text-primary);
226
233
  --ids-color-heading-text-l: var(--ids-color-brand-text-primary);
227
- --ids-color-heading-text-m: var(--ids-color-brand-text-primary);
228
- --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
229
- --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
230
234
  }
231
235
 
232
236
 
@@ -234,12 +238,12 @@
234
238
  .ids--inera-admin.ids--dark {
235
239
  --ids-font-family-primary: Open sans;
236
240
  --ids-font-family-secondary: Poppins;
237
- --ids-font-weight-heading-xxl: 700;
238
- --ids-font-weight-heading-xl: 700;
239
- --ids-font-weight-heading-l: 700;
240
- --ids-font-weight-heading-m: 700;
241
- --ids-font-weight-heading-s: 700;
242
- --ids-font-weight-heading-xs: 700;
241
+ --ids-font-weight-heading-xxl: 600;
242
+ --ids-font-weight-heading-xl: 600;
243
+ --ids-font-weight-heading-l: 600;
244
+ --ids-font-weight-heading-m: 600;
245
+ --ids-font-weight-heading-s: 600;
246
+ --ids-font-weight-heading-xs: 600;
243
247
  --ids-font-weight-preamble: 300;
244
248
  --ids-font-weight-body-text: 400;
245
249
  --ids-font-weight-small-text: 400;
@@ -288,26 +292,26 @@
288
292
  --ids-font-family-button: var(--ids-font-family-primary);
289
293
  --ids-color-surface-background-default: var(--ids-palette-neutral-10);
290
294
  --ids-color-surface-border-default: var(--ids-palette-neutral-40);
291
- --ids-color-surface-text-on-default: var(--ids-palette-neutral-100);
292
- --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-15);
293
- --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-40);
294
- --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-100);
295
+ --ids-color-surface-text-on-default: var(--ids-palette-neutral-90);
296
+ --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-20);
297
+ --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-30);
298
+ --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-90);
295
299
  --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-99);
296
- --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-20);
297
- --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-100);
300
+ --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-30);
298
301
  --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-40);
302
+ --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-90);
299
303
  --ids-color-surface-background-alternative: var(--ids-palette-neutral-10);
300
- --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-100);
301
- --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-neutral-15);
302
- --ids-color-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-100);
304
+ --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-90);
305
+ --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-neutral-20);
306
+ --ids-color-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-90);
303
307
  --ids-color-brand-text-logo: var(--ids-palette-primary-50);
304
308
  --ids-color-brand-text-primary: var(--ids-palette-primary-60);
305
- --ids-color-brand-background-primary: var(--ids-palette-neutral-15);
309
+ --ids-color-brand-background-primary: var(--ids-palette-neutral-20);
306
310
  --ids-color-brand-background-primary-subtle: var(--ids-palette-primary-30);
307
311
  --ids-color-brand-background-primary-subtle-2: var(--ids-palette-neutral-10);
308
312
  --ids-color-brand-border-primary: var(--ids-palette-primary-50);
309
313
  --ids-color-brand-text-on-primary: var(--ids-palette-neutral-100);
310
- --ids-color-brand-background-secondary: var(--ids-palette-neutral-15);
314
+ --ids-color-brand-background-secondary: var(--ids-palette-neutral-20);
311
315
  --ids-color-brand-text-secondary: var(--ids-palette-primary-70);
312
316
  --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-100);
313
317
  --ids-color-navigation-background-default: var(--ids-palette-neutral-10);
@@ -334,26 +338,27 @@
334
338
  --ids-color-interactive-background-active: var(--ids-palette-accent-50);
335
339
  --ids-color-interactive-border-active: var(--ids-palette-accent-50);
336
340
  --ids-color-interactive-text-active: var(--ids-palette-accent-50);
341
+ --ids-color-interactive-toggle-marker-disabled: var(--ids-palette-neutral-40);
337
342
  --ids-color-interactive-text-on-active: var(--ids-palette-neutral-10);
338
- --ids-color-interactive-background-disabled: var(--ids-palette-neutral-90);
339
- --ids-color-interactive-border-disabled: var(--ids-palette-neutral-90);
340
- --ids-color-interactive-text-disabled: var(--ids-palette-neutral-90);
341
- --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
343
+ --ids-color-interactive-background-disabled: var(--ids-palette-neutral-30);
344
+ --ids-color-interactive-border-disabled: var(--ids-palette-neutral-30);
345
+ --ids-color-interactive-text-disabled: var(--ids-palette-neutral-60);
346
+ --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-60);
342
347
  --ids-color-interactive-focus-outline: var(--ids-palette-neutral-99);
343
348
  --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-99);
344
- --ids-color-feedback-background-information: var(--ids-palette-neutral-15);
349
+ --ids-color-feedback-background-information: var(--ids-palette-neutral-20);
345
350
  --ids-color-feedback-border-information: var(--ids-palette-neutral-40);
346
351
  --ids-color-feedback-text-on-information: var(--ids-palette-neutral-100);
347
352
  --ids-color-feedback-text-information: var(--ids-palette-neutral-90);
348
- --ids-color-feedback-background-success: var(--ids-palette-neutral-15);
353
+ --ids-color-feedback-background-success: var(--ids-palette-neutral-20);
349
354
  --ids-color-feedback-border-success: var(--ids-palette-success-40);
350
355
  --ids-color-feedback-text-on-success: var(--ids-palette-neutral-100);
351
356
  --ids-color-feedback-text-success: var(--ids-palette-success-40);
352
- --ids-color-feedback-background-attention: var(--ids-palette-neutral-15);
357
+ --ids-color-feedback-background-attention: var(--ids-palette-neutral-20);
353
358
  --ids-color-feedback-border-attention: var(--ids-palette-attention-40);
354
359
  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-100);
355
360
  --ids-color-feedback-text-attention: var(--ids-palette-attention-40);
356
- --ids-color-feedback-background-error: var(--ids-palette-neutral-15);
361
+ --ids-color-feedback-background-error: var(--ids-palette-neutral-20);
357
362
  --ids-color-feedback-border-error: var(--ids-palette-error-60);
358
363
  --ids-color-feedback-text-on-error: var(--ids-palette-neutral-100);
359
364
  --ids-color-feedback-text-error: var(--ids-palette-error-60);
@@ -367,11 +372,11 @@
367
372
  --ids-color-form-border-light-default: var(--ids-palette-accent-70);
368
373
  --ids-color-form-text-on-light-default: var(--ids-palette-neutral-100);
369
374
  --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-99);
370
- --ids-color-form-background-hover: var(--ids-palette-neutral-15);
375
+ --ids-color-form-background-hover: var(--ids-palette-neutral-20);
371
376
  --ids-color-form-border-hover: var(--ids-palette-neutral-100);
372
377
  --ids-color-form-text-on-hover: var(--ids-palette-neutral-100);
373
378
  --ids-color-form-placeholder-text-on-hover: var(--ids-palette-neutral-99);
374
- --ids-color-form-background-light-hover: var(--ids-palette-neutral-15);
379
+ --ids-color-form-background-light-hover: var(--ids-palette-neutral-20);
375
380
  --ids-color-form-border-light-hover: var(--ids-palette-neutral-100);
376
381
  --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-100);
377
382
  --ids-color-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-99);
@@ -383,31 +388,31 @@
383
388
  --ids-color-form-border-light-active: var(--ids-palette-neutral-100);
384
389
  --ids-color-form-text-on-light-active: var(--ids-palette-neutral-100);
385
390
  --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-99);
386
- --ids-color-form-background-disabled: var(--ids-palette-neutral-10);
387
- --ids-color-form-border-disabled: var(--ids-palette-neutral-90);
388
- --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-99);
389
- --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-99);
390
- --ids-color-form-background-light-disabled: var(--ids-palette-neutral-10);
391
- --ids-color-form-border-light-disabled: var(--ids-palette-neutral-90);
392
- --ids-color-form-text-on-disabled: var(--ids-palette-neutral-99);
393
- --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-99);
391
+ --ids-color-form-background-disabled: var(--ids-palette-neutral-30);
392
+ --ids-color-form-border-disabled: var(--ids-palette-neutral-30);
393
+ --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-60);
394
+ --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-60);
395
+ --ids-color-form-background-light-disabled: var(--ids-palette-neutral-30);
396
+ --ids-color-form-border-light-disabled: var(--ids-palette-neutral-30);
397
+ --ids-color-form-text-on-disabled: var(--ids-palette-neutral-60);
398
+ --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-60);
394
399
  --ids-color-form-background-invalid: var(--ids-palette-neutral-10);
395
- --ids-color-form-border-invalid: var(--ids-palette-error-60);
400
+ --ids-color-form-border-invalid: var(--ids-palette-error-40);
396
401
  --ids-color-form-text-on-invalid: var(--ids-palette-neutral-100);
397
402
  --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-99);
398
- --ids-color-form-message-background-invalid: var(--ids-palette-neutral-20);
399
- --ids-color-form-message-border-invalid: var(--ids-palette-error-60);
403
+ --ids-color-form-message-background-invalid: var(--ids-palette-neutral-30);
404
+ --ids-color-form-message-border-invalid: var(--ids-palette-error-40);
400
405
  --ids-color-form-message-text-on-invalid: var(--ids-palette-neutral-100);
401
406
  --ids-color-form-background-light-invalid: var(--ids-palette-neutral-10);
402
- --ids-color-form-border-light-invalid: var(--ids-palette-error-60);
407
+ --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
403
408
  --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-100);
404
409
  --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-99);
405
- --ids-color-heading-text-xxl: var(--ids-color-surface-text-on-default);
406
- --ids-color-heading-text-xl: var(--ids-color-surface-text-on-default);
407
- --ids-color-heading-text-l: var(--ids-color-surface-text-on-default);
408
- --ids-color-heading-text-m: var(--ids-color-surface-text-on-default);
409
- --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
410
- --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
410
+ --ids-color-heading-text-xxl: var(--ids-palette-neutral-95);
411
+ --ids-color-heading-text-xl: var(--ids-palette-neutral-95);
412
+ --ids-color-heading-text-l: var(--ids-palette-neutral-95);
413
+ --ids-color-heading-text-m: var(--ids-palette-neutral-95);
414
+ --ids-color-heading-text-s: var(--ids-palette-neutral-95);
415
+ --ids-color-heading-text-xs: var(--ids-palette-neutral-95);
411
416
  }
412
417
 
413
418
 
@@ -449,7 +454,7 @@
449
454
  --ids-font-line-height-small-text: 1.25rem;
450
455
  --ids-font-line-height-button-l: 1.5rem;
451
456
  --ids-font-line-height-button-m: 1.25rem;
452
- --ids-font-line-height-button-s: 1.25rem;
457
+ --ids-font-line-height-button-s: 1rem;
453
458
  --ids-font-letter-spacing-heading-xxl: 0;
454
459
  --ids-font-letter-spacing-heading-xl: 0;
455
460
  --ids-font-letter-spacing-heading-l: 0;
@@ -514,15 +519,8 @@
514
519
  @media only screen and (max-width: 1024px) {
515
520
  .ids--inera-admin.ids--light, .ids--inera-admin.ids--dark {
516
521
  --ids-device-min-width: 20rem;
517
- --ids-device-max-width: 35.625rem;
518
522
  --ids-device-min-height: 35.5rem;
519
523
  --ids-device-show-on-desktop: false;
520
- --ids-section-3-columns-min-width: 17.5rem;
521
- --ids-section-4-columns-min-width: 17.5rem;
522
- --ids-section-6-columns-min-width: 17.5rem;
523
- --ids-section-8-columns-min-width: 17.5rem;
524
- --ids-section-9-columns-min-width: 17.5rem;
525
- --ids-section-12-columns-min-width: 17.5rem;
526
524
  --ids-size-relation-6-8: 0.375rem;
527
525
  --ids-size-relation-14-16: 0.875rem;
528
526
  --ids-size-relation-18-20: 1.125rem;
@@ -530,15 +528,6 @@
530
528
  --ids-size-relation-34-38: 2.125rem;
531
529
  --ids-size-relation-280-620: 17.5rem;
532
530
  --ids-components-carousel-image-height: 11.6875rem;
533
- --ids-font-weight-heading-xxl: 600;
534
- --ids-font-weight-heading-xl: 600;
535
- --ids-font-weight-heading-l: 600;
536
- --ids-font-weight-heading-m: 600;
537
- --ids-font-weight-heading-s: 600;
538
- --ids-font-weight-heading-xs: 600;
539
- --ids-font-weight-preamble: 300;
540
- --ids-font-weight-body-text: 400;
541
- --ids-font-weight-small-text: 400;
542
531
  --ids-font-size-heading-xxl: 1.875rem;
543
532
  --ids-font-size-heading-xl: 1.625rem;
544
533
  --ids-font-size-heading-l: 1.5rem;
@@ -549,6 +538,12 @@
549
538
  --ids-font-size-body-text: 1rem;
550
539
  --ids-font-size-small-text: 0.875rem;
551
540
  --ids-font-size-badge: 0.75rem;
541
+ --ids-font-size-button-l: 1.125rem;
542
+ --ids-font-size-button-m: 1rem;
543
+ --ids-font-size-button-s: 0.875rem;
544
+ --ids-font-size-icon-button-l: 1.5rem;
545
+ --ids-font-size-icon-button-m: 1.25rem;
546
+ --ids-font-size-icon-button-s: 1rem;
552
547
  --ids-font-line-height-heading-xxl: 2.375rem;
553
548
  --ids-font-line-height-heading-xl: 2rem;
554
549
  --ids-font-line-height-heading-l: 1.875rem;
@@ -558,6 +553,9 @@
558
553
  --ids-font-line-height-preamble: 1.75rem;
559
554
  --ids-font-line-height-body-text: 1.5rem;
560
555
  --ids-font-line-height-small-text: 1.25rem;
556
+ --ids-font-line-height-button-l: 1.5rem;
557
+ --ids-font-line-height-button-m: 1.25rem;
558
+ --ids-font-line-height-button-s: 1rem;
561
559
  --ids-font-letter-spacing-heading-xxl: 0;
562
560
  --ids-font-letter-spacing-heading-xl: 0;
563
561
  --ids-font-letter-spacing-heading-l: 0;
@@ -567,6 +565,9 @@
567
565
  --ids-font-letter-spacing-preamble: 0;
568
566
  --ids-font-letter-spacing-body-text: 0;
569
567
  --ids-font-letter-spacing-small-text: 0;
568
+ --ids-font-letter-spacing-button-l: 0;
569
+ --ids-font-letter-spacing-button-m: 0;
570
+ --ids-font-letter-spacing-button-s: 0;
570
571
  --ids-font-paragraph-spacing-heading-xxl: 0;
571
572
  --ids-font-paragraph-spacing-heading-xl: 0;
572
573
  --ids-font-paragraph-spacing-heading-l: 0;