@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/1177-pro-tokens.css CHANGED
@@ -4,11 +4,11 @@
4
4
  /*Base tokens*/
5
5
 
6
6
  --ids-palette-primary-20: #6a0032;
7
- --ids-palette-primary-30: #a00b36;
7
+ --ids-palette-primary-30: #99173a;
8
8
  --ids-palette-primary-40: #c12143;
9
- --ids-palette-primary-50: #cf234a;
10
- --ids-palette-primary-60: #da254c;
11
- --ids-palette-primary-70: #e75a78;
9
+ --ids-palette-primary-50: #e6375c;
10
+ --ids-palette-primary-60: #f55b7c;
11
+ --ids-palette-primary-70: #f88ba3;
12
12
  --ids-palette-primary-90: #faeef0;
13
13
  --ids-palette-secondary-95: #faf8f6;
14
14
  --ids-palette-accent-20: #273149;
@@ -19,13 +19,15 @@
19
19
  --ids-palette-accent-70: #9ac0f2;
20
20
  --ids-palette-accent-90: #e0e7ef;
21
21
  --ids-palette-accent-95: #f8fafc;
22
- --ids-palette-neutral-10: #151515;
23
- --ids-palette-neutral-15: #252525;
24
- --ids-palette-neutral-20: #353535;
25
- --ids-palette-neutral-40: #636466;
26
- --ids-palette-neutral-50: #808285;
27
- --ids-palette-neutral-90: #dadbdc;
28
- --ids-palette-neutral-99: #f1f2f2;
22
+ --ids-palette-neutral-10: #16181a;
23
+ --ids-palette-neutral-20: #222529;
24
+ --ids-palette-neutral-30: #383d42;
25
+ --ids-palette-neutral-40: #4d545c;
26
+ --ids-palette-neutral-60: #7b848f;
27
+ --ids-palette-neutral-70: #a1a9b2;
28
+ --ids-palette-neutral-90: #cfd7dd;
29
+ --ids-palette-neutral-95: #edf1f5;
30
+ --ids-palette-neutral-99: #f7f9fc;
29
31
  --ids-palette-neutral-100: #ffffff;
30
32
  --ids-palette-success-30: #395428;
31
33
  --ids-palette-success-40: #419002;
@@ -57,7 +59,7 @@
57
59
  --ids-color-light-brand-text-on-primary: var(--ids-palette-neutral-100);
58
60
  --ids-color-light-brand-background-secondary: var(--ids-palette-secondary-95);
59
61
  --ids-color-light-brand-text-secondary: var(--ids-palette-accent-30);
60
- --ids-color-light-brand-text-on-secondary: var(--ids-palette-neutral-20);
62
+ --ids-color-light-brand-text-on-secondary: var(--ids-palette-neutral-30);
61
63
  --ids-color-light-navigation-background-default: var(--ids-palette-accent-40);
62
64
  --ids-color-light-navigation-border-default: var(--ids-palette-accent-40);
63
65
  --ids-color-light-navigation-text-default: var(--ids-palette-accent-40);
@@ -72,15 +74,15 @@
72
74
  --ids-color-light-navigation-text-active: var(--ids-palette-accent-20);
73
75
  --ids-color-light-navigation-text-on-active: var(--ids-palette-neutral-100);
74
76
  --ids-color-light-heading-text-m-xxl: var(--ids-palette-neutral-20);
75
- --ids-color-dark-brand-background-primary: var(--ids-palette-neutral-20);
77
+ --ids-color-dark-brand-background-primary: var(--ids-palette-neutral-30);
76
78
  --ids-color-dark-brand-border-primary: var(--ids-palette-accent-50);
77
79
  --ids-color-dark-brand-text-primary: var(--ids-palette-accent-50);
78
80
  --ids-color-dark-brand-text-primary-subtle: var(--ids-palette-neutral-90);
79
81
  --ids-color-dark-brand-text-on-primary: var(--ids-palette-accent-90);
80
- --ids-color-dark-brand-background-secondary: var(--ids-palette-neutral-15);
82
+ --ids-color-dark-brand-background-secondary: var(--ids-palette-neutral-20);
81
83
  --ids-color-dark-brand-text-secondary: var(--ids-palette-accent-90);
82
84
  --ids-color-dark-brand-text-on-secondary: var(--ids-palette-neutral-100);
83
- --ids-color-dark-navigation-background-default: var(--ids-palette-neutral-20);
85
+ --ids-color-dark-navigation-background-default: var(--ids-palette-neutral-30);
84
86
  --ids-color-dark-navigation-border-default: var(--ids-palette-accent-70);
85
87
  --ids-color-dark-navigation-text-default: var(--ids-palette-neutral-100);
86
88
  --ids-color-dark-navigation-icon-default: var(--ids-palette-neutral-100);
@@ -88,11 +90,11 @@
88
90
  --ids-color-dark-navigation-background-hover: var(--ids-palette-accent-60);
89
91
  --ids-color-dark-navigation-border-hover: var(--ids-palette-accent-60);
90
92
  --ids-color-dark-navigation-text-hover: var(--ids-palette-neutral-100);
91
- --ids-color-dark-navigation-text-on-hover: var(--ids-palette-neutral-20);
93
+ --ids-color-dark-navigation-text-on-hover: var(--ids-palette-neutral-30);
92
94
  --ids-color-dark-navigation-background-active: var(--ids-palette-accent-50);
93
95
  --ids-color-dark-navigation-border-active: var(--ids-palette-accent-50);
94
96
  --ids-color-dark-navigation-text-active: var(--ids-palette-neutral-100);
95
- --ids-color-dark-navigation-text-on-active: var(--ids-palette-neutral-20);
97
+ --ids-color-dark-navigation-text-on-active: var(--ids-palette-neutral-30);
96
98
  }
97
99
 
98
100
 
@@ -153,22 +155,22 @@
153
155
  --ids-font-family-small-text: var(--ids-font-family-primary);
154
156
  --ids-font-family-button: var(--ids-font-family-secondary);
155
157
  --ids-color-surface-background-default: var(--ids-palette-neutral-100);
156
- --ids-color-surface-border-default: var(--ids-palette-neutral-50);
157
- --ids-color-surface-text-on-default: var(--ids-palette-neutral-20);
158
+ --ids-color-surface-border-default: var(--ids-palette-neutral-60);
159
+ --ids-color-surface-text-on-default: var(--ids-palette-neutral-30);
158
160
  --ids-color-surface-text-subtle-on-default: var(--ids-palette-neutral-40);
159
161
  --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-100);
160
162
  --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-90);
161
- --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-20);
163
+ --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-30);
162
164
  --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-40);
163
165
  --ids-color-surface-background-elevated-1-hover: var(--ids-palette-neutral-100);
164
166
  --ids-color-surface-background-elevated-1-active: var(--ids-palette-neutral-100);
165
167
  --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-100);
166
- --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-50);
167
- --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-20);
168
+ --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-90);
169
+ --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-30);
168
170
  --ids-color-surface-background-alternative: var(--ids-palette-secondary-95);
169
- --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-20);
171
+ --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-30);
170
172
  --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-secondary-95);
171
- --ids-color-navigation-text-on-secondary: var(--ids-palette-neutral-20);
173
+ --ids-color-navigation-text-on-secondary: var(--ids-palette-neutral-30);
172
174
  --ids-color-interactive-background-default: var(--ids-palette-accent-40);
173
175
  --ids-color-interactive-border-default: var(--ids-palette-accent-40);
174
176
  --ids-color-interactive-text-default: var(--ids-palette-accent-40);
@@ -180,68 +182,72 @@
180
182
  --ids-color-interactive-background-active: var(--ids-palette-accent-20);
181
183
  --ids-color-interactive-border-active: var(--ids-palette-accent-20);
182
184
  --ids-color-interactive-text-active: var(--ids-palette-accent-20);
185
+ --ids-color-interactive-toggle-marker-disabled: var(--ids-palette-neutral-90);
183
186
  --ids-color-interactive-text-on-active: var(--ids-palette-neutral-100);
184
- --ids-color-interactive-background-disabled: var(--ids-palette-neutral-100);
185
- --ids-color-interactive-border-disabled: var(--ids-palette-neutral-50);
186
- --ids-color-interactive-text-disabled: var(--ids-palette-neutral-40);
187
- --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
187
+ --ids-color-interactive-background-disabled: var(--ids-palette-neutral-95);
188
+ --ids-color-interactive-border-disabled: var(--ids-palette-neutral-95);
189
+ --ids-color-interactive-text-disabled: var(--ids-palette-neutral-70);
190
+ --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-70);
188
191
  --ids-color-interactive-focus-outline: var(--ids-palette-neutral-40);
189
192
  --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-100);
190
193
  --ids-color-feedback-background-information: var(--ids-palette-accent-95);
191
194
  --ids-color-feedback-border-information: var(--ids-palette-accent-40);
192
- --ids-color-feedback-text-on-information: var(--ids-palette-neutral-20);
195
+ --ids-color-feedback-text-on-information: var(--ids-palette-neutral-30);
193
196
  --ids-color-feedback-text-information: var(--ids-palette-accent-30);
194
197
  --ids-color-feedback-background-success: var(--ids-palette-success-99);
195
198
  --ids-color-feedback-border-success: var(--ids-palette-success-40);
196
- --ids-color-feedback-text-on-success: var(--ids-palette-neutral-20);
199
+ --ids-color-feedback-text-on-success: var(--ids-palette-neutral-30);
197
200
  --ids-color-feedback-text-success: var(--ids-palette-success-30);
198
201
  --ids-color-feedback-background-attention: var(--ids-palette-attention-95);
199
- --ids-color-feedback-border-attention: var(--ids-palette-neutral-50);
200
- --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-20);
202
+ --ids-color-feedback-border-attention: var(--ids-palette-neutral-60);
203
+ --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-30);
201
204
  --ids-color-feedback-text-attention: var(--ids-palette-neutral-40);
202
205
  --ids-color-feedback-background-error: var(--ids-palette-primary-90);
203
- --ids-color-feedback-text-on-error: var(--ids-palette-neutral-20);
206
+ --ids-color-feedback-text-on-error: var(--ids-palette-neutral-30);
204
207
  --ids-color-feedback-background-notification: var(--ids-palette-primary-40);
205
208
  --ids-color-feedback-text-on-notification: var(--ids-palette-neutral-100);
206
209
  --ids-color-form-background-default: var(--ids-palette-accent-95);
207
210
  --ids-color-form-border-default: var(--ids-palette-accent-40);
208
- --ids-color-form-text-on-default: var(--ids-palette-neutral-20);
211
+ --ids-color-form-text-on-default: var(--ids-palette-neutral-30);
209
212
  --ids-color-form-placeholder-text-on-default: var(--ids-palette-neutral-40);
210
213
  --ids-color-form-background-light-default: var(--ids-palette-neutral-100);
211
214
  --ids-color-form-border-light-default: var(--ids-palette-accent-40);
212
- --ids-color-form-text-on-light-default: var(--ids-palette-neutral-20);
215
+ --ids-color-form-text-on-light-default: var(--ids-palette-neutral-30);
213
216
  --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-40);
214
217
  --ids-color-form-background-hover: var(--ids-palette-accent-90);
215
218
  --ids-color-form-border-hover: var(--ids-palette-accent-30);
216
- --ids-color-form-text-on-hover: var(--ids-palette-neutral-20);
219
+ --ids-color-form-text-on-hover: var(--ids-palette-neutral-30);
217
220
  --ids-color-form-placeholder-text-on-hover: var(--ids-palette-neutral-40);
218
221
  --ids-color-form-background-light-hover: var(--ids-palette-accent-95);
219
222
  --ids-color-form-border-light-hover: var(--ids-palette-accent-30);
220
- --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-20);
223
+ --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-30);
221
224
  --ids-color-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-40);
222
225
  --ids-color-form-background-active: var(--ids-palette-accent-95);
223
226
  --ids-color-form-border-active: var(--ids-palette-accent-20);
224
- --ids-color-form-text-on-active: var(--ids-palette-neutral-20);
227
+ --ids-color-form-text-on-active: var(--ids-palette-neutral-30);
225
228
  --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-40);
226
229
  --ids-color-form-background-light-active: var(--ids-palette-neutral-100);
227
230
  --ids-color-form-border-light-active: var(--ids-palette-accent-20);
228
- --ids-color-form-text-on-light-active: var(--ids-palette-neutral-20);
231
+ --ids-color-form-text-on-light-active: var(--ids-palette-neutral-30);
229
232
  --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-40);
230
- --ids-color-form-background-disabled: var(--ids-palette-neutral-99);
231
- --ids-color-form-border-disabled: var(--ids-palette-neutral-40);
232
- --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-40);
233
- --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-40);
234
- --ids-color-form-background-light-disabled: var(--ids-palette-neutral-99);
235
- --ids-color-form-border-light-disabled: var(--ids-palette-neutral-40);
236
- --ids-color-form-text-on-disabled: var(--ids-palette-neutral-40);
237
- --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-40);
233
+ --ids-color-form-background-disabled: var(--ids-palette-neutral-95);
234
+ --ids-color-form-border-disabled: var(--ids-palette-neutral-95);
235
+ --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-70);
236
+ --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-70);
237
+ --ids-color-form-background-light-disabled: var(--ids-palette-neutral-95);
238
+ --ids-color-form-border-light-disabled: var(--ids-palette-neutral-95);
239
+ --ids-color-form-text-on-disabled: var(--ids-palette-neutral-70);
240
+ --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-70);
238
241
  --ids-color-form-background-invalid: var(--ids-palette-primary-90);
239
- --ids-color-form-text-on-invalid: var(--ids-palette-neutral-20);
242
+ --ids-color-form-text-on-invalid: var(--ids-palette-neutral-30);
240
243
  --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-40);
241
244
  --ids-color-form-message-background-invalid: var(--ids-palette-neutral-100);
242
245
  --ids-color-form-background-light-invalid: var(--ids-palette-primary-90);
243
- --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-20);
246
+ --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-30);
244
247
  --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-40);
248
+ --ids-color-heading-text-m: var(--ids-palette-neutral-20);
249
+ --ids-color-heading-text-s: var(--ids-palette-neutral-20);
250
+ --ids-color-heading-text-xs: var(--ids-palette-neutral-20);
245
251
  --ids-color-brand-background-primary: var(--ids-color-light-brand-background-primary);
246
252
  --ids-color-brand-border-primary: var(--ids-color-light-brand-border-primary);
247
253
  --ids-color-brand-text-primary: var(--ids-color-light-brand-text-primary);
@@ -272,9 +278,6 @@
272
278
  --ids-color-heading-text-xxl: var(--ids-color-light-heading-text-m-xxl);
273
279
  --ids-color-heading-text-xl: var(--ids-color-light-heading-text-m-xxl);
274
280
  --ids-color-heading-text-l: var(--ids-color-light-heading-text-m-xxl);
275
- --ids-color-heading-text-m: var(--ids-color-light-heading-text-m-xxl);
276
- --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
277
- --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
278
281
  }
279
282
 
280
283
 
@@ -335,21 +338,21 @@
335
338
  --ids-font-family-small-text: var(--ids-font-family-primary);
336
339
  --ids-font-family-button: var(--ids-font-family-secondary);
337
340
  --ids-color-surface-background-default: var(--ids-palette-neutral-10);
338
- --ids-color-surface-border-default: var(--ids-palette-neutral-50);
339
- --ids-color-surface-text-on-default: var(--ids-palette-neutral-100);
341
+ --ids-color-surface-border-default: var(--ids-palette-neutral-40);
342
+ --ids-color-surface-text-on-default: var(--ids-palette-neutral-90);
340
343
  --ids-color-surface-text-subtle-on-default: var(--ids-palette-neutral-99);
341
- --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-15);
342
- --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-50);
343
- --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-100);
344
+ --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-20);
345
+ --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-30);
346
+ --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-90);
344
347
  --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-99);
345
- --ids-color-surface-background-elevated-1-hover: var(--ids-palette-neutral-20);
346
- --ids-color-surface-background-elevated-1-active: var(--ids-palette-neutral-20);
347
- --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-20);
348
- --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-50);
349
- --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-100);
348
+ --ids-color-surface-background-elevated-1-hover: var(--ids-palette-neutral-30);
349
+ --ids-color-surface-background-elevated-1-active: var(--ids-palette-neutral-30);
350
+ --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-30);
351
+ --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-40);
352
+ --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-90);
350
353
  --ids-color-surface-background-alternative: var(--ids-palette-neutral-10);
351
- --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-100);
352
- --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-neutral-15);
354
+ --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-90);
355
+ --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-neutral-20);
353
356
  --ids-color-navigation-text-on-secondary: var(--ids-palette-neutral-100);
354
357
  --ids-color-interactive-background-default: var(--ids-palette-accent-60);
355
358
  --ids-color-interactive-border-default: var(--ids-palette-accent-90);
@@ -362,28 +365,29 @@
362
365
  --ids-color-interactive-background-active: var(--ids-palette-accent-50);
363
366
  --ids-color-interactive-border-active: var(--ids-palette-accent-50);
364
367
  --ids-color-interactive-text-active: var(--ids-palette-accent-50);
368
+ --ids-color-interactive-toggle-marker-disabled: var(--ids-palette-neutral-40);
365
369
  --ids-color-interactive-text-on-active: var(--ids-palette-neutral-10);
366
- --ids-color-interactive-background-disabled: var(--ids-palette-neutral-90);
367
- --ids-color-interactive-border-disabled: var(--ids-palette-neutral-50);
368
- --ids-color-interactive-text-disabled: var(--ids-palette-neutral-90);
369
- --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
370
+ --ids-color-interactive-background-disabled: var(--ids-palette-neutral-30);
371
+ --ids-color-interactive-border-disabled: var(--ids-palette-neutral-30);
372
+ --ids-color-interactive-text-disabled: var(--ids-palette-neutral-60);
373
+ --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-60);
370
374
  --ids-color-interactive-focus-outline: var(--ids-palette-neutral-99);
371
375
  --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-99);
372
- --ids-color-feedback-background-information: var(--ids-palette-neutral-15);
376
+ --ids-color-feedback-background-information: var(--ids-palette-neutral-20);
373
377
  --ids-color-feedback-border-information: var(--ids-palette-accent-50);
374
378
  --ids-color-feedback-text-on-information: var(--ids-palette-neutral-100);
375
379
  --ids-color-feedback-text-information: var(--ids-palette-accent-50);
376
- --ids-color-feedback-background-success: var(--ids-palette-neutral-15);
380
+ --ids-color-feedback-background-success: var(--ids-palette-neutral-20);
377
381
  --ids-color-feedback-border-success: var(--ids-palette-success-40);
378
382
  --ids-color-feedback-text-on-success: var(--ids-palette-neutral-100);
379
383
  --ids-color-feedback-text-success: var(--ids-palette-success-40);
380
- --ids-color-feedback-background-attention: var(--ids-palette-neutral-15);
384
+ --ids-color-feedback-background-attention: var(--ids-palette-neutral-20);
381
385
  --ids-color-feedback-border-attention: var(--ids-palette-attention-40);
382
386
  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-100);
383
387
  --ids-color-feedback-text-attention: var(--ids-palette-attention-40);
384
- --ids-color-feedback-background-error: var(--ids-palette-neutral-15);
388
+ --ids-color-feedback-background-error: var(--ids-palette-neutral-20);
385
389
  --ids-color-feedback-text-on-error: var(--ids-palette-neutral-100);
386
- --ids-color-feedback-background-notification: var(--ids-palette-primary-60);
390
+ --ids-color-feedback-background-notification: var(--ids-palette-primary-40);
387
391
  --ids-color-feedback-text-on-notification: var(--ids-palette-neutral-100);
388
392
  --ids-color-form-background-default: var(--ids-palette-neutral-10);
389
393
  --ids-color-form-border-default: var(--ids-palette-accent-90);
@@ -393,11 +397,11 @@
393
397
  --ids-color-form-border-light-default: var(--ids-palette-accent-90);
394
398
  --ids-color-form-text-on-light-default: var(--ids-palette-neutral-100);
395
399
  --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-99);
396
- --ids-color-form-background-hover: var(--ids-palette-neutral-15);
400
+ --ids-color-form-background-hover: var(--ids-palette-neutral-20);
397
401
  --ids-color-form-border-hover: var(--ids-palette-neutral-100);
398
402
  --ids-color-form-text-on-hover: var(--ids-palette-neutral-100);
399
403
  --ids-color-form-placeholder-text-on-hover: var(--ids-palette-neutral-99);
400
- --ids-color-form-background-light-hover: var(--ids-palette-neutral-15);
404
+ --ids-color-form-background-light-hover: var(--ids-palette-neutral-20);
401
405
  --ids-color-form-border-light-hover: var(--ids-palette-accent-90);
402
406
  --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-100);
403
407
  --ids-color-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-99);
@@ -409,22 +413,28 @@
409
413
  --ids-color-form-border-light-active: var(--ids-palette-neutral-100);
410
414
  --ids-color-form-text-on-light-active: var(--ids-palette-neutral-100);
411
415
  --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-99);
412
- --ids-color-form-background-disabled: var(--ids-palette-neutral-10);
413
- --ids-color-form-border-disabled: var(--ids-palette-neutral-90);
414
- --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-99);
415
- --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-99);
416
- --ids-color-form-background-light-disabled: var(--ids-palette-neutral-10);
417
- --ids-color-form-border-light-disabled: var(--ids-palette-neutral-90);
418
- --ids-color-form-text-on-disabled: var(--ids-palette-neutral-99);
419
- --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-99);
416
+ --ids-color-form-background-disabled: var(--ids-palette-neutral-30);
417
+ --ids-color-form-border-disabled: var(--ids-palette-neutral-30);
418
+ --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-60);
419
+ --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-60);
420
+ --ids-color-form-background-light-disabled: var(--ids-palette-neutral-30);
421
+ --ids-color-form-border-light-disabled: var(--ids-palette-neutral-30);
422
+ --ids-color-form-text-on-disabled: var(--ids-palette-neutral-60);
423
+ --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-60);
420
424
  --ids-color-form-background-invalid: var(--ids-palette-neutral-10);
421
425
  --ids-color-form-text-on-invalid: var(--ids-palette-neutral-100);
422
426
  --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-99);
423
- --ids-color-form-message-background-invalid: var(--ids-palette-neutral-20);
427
+ --ids-color-form-message-background-invalid: var(--ids-palette-neutral-30);
424
428
  --ids-color-form-message-text-on-invalid: var(--ids-palette-neutral-100);
425
429
  --ids-color-form-background-light-invalid: var(--ids-palette-neutral-10);
426
430
  --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-100);
427
431
  --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-99);
432
+ --ids-color-heading-text-xxl: var(--ids-palette-neutral-95);
433
+ --ids-color-heading-text-xl: var(--ids-palette-neutral-95);
434
+ --ids-color-heading-text-l: var(--ids-palette-neutral-95);
435
+ --ids-color-heading-text-m: var(--ids-palette-neutral-95);
436
+ --ids-color-heading-text-s: var(--ids-palette-neutral-95);
437
+ --ids-color-heading-text-xs: var(--ids-palette-neutral-95);
428
438
  --ids-color-brand-background-primary: var(--ids-color-dark-brand-background-primary);
429
439
  --ids-color-brand-border-primary: var(--ids-color-dark-brand-border-primary);
430
440
  --ids-color-brand-text-primary: var(--ids-color-dark-brand-text-primary);
@@ -447,16 +457,10 @@
447
457
  --ids-color-navigation-text-active: var(--ids-color-dark-navigation-text-active);
448
458
  --ids-color-navigation-text-on-active: var(--ids-color-dark-navigation-text-on-active);
449
459
  --ids-color-feedback-border-error: var(--ids-palette-error-40);
450
- --ids-color-feedback-text-error: var(--ids-palette-error-60);
460
+ --ids-color-feedback-text-error: var(--ids-palette-error-40);
451
461
  --ids-color-form-border-invalid: var(--ids-palette-error-40);
452
- --ids-color-form-message-border-invalid: var(--ids-palette-error-60);
453
- --ids-color-form-border-light-invalid: var(--ids-palette-error-60);
454
- --ids-color-heading-text-xxl: var(--ids-color-surface-text-on-default);
455
- --ids-color-heading-text-xl: var(--ids-color-surface-text-on-default);
456
- --ids-color-heading-text-l: var(--ids-color-surface-text-on-default);
457
- --ids-color-heading-text-m: var(--ids-color-surface-text-on-default);
458
- --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
459
- --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
462
+ --ids-color-form-message-border-invalid: var(--ids-palette-error-40);
463
+ --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
460
464
  }
461
465
 
462
466
 
@@ -547,7 +551,7 @@
547
551
  --ids-font-line-height-header-profession-title: 1.5rem;
548
552
  --ids-font-line-height-button-l: 1.5rem;
549
553
  --ids-font-line-height-button-m: 1.25rem;
550
- --ids-font-line-height-button-s: 1.25rem;
554
+ --ids-font-line-height-button-s: 1rem;
551
555
  --ids-font-letter-spacing-heading-xxl: -0.078125rem;
552
556
  --ids-font-letter-spacing-heading-xl: -0.0625rem;
553
557
  --ids-font-letter-spacing-heading-l: -0.04375rem;
@@ -617,7 +621,6 @@
617
621
  @media only screen and (max-width: 1024px) {
618
622
  .ids--1177-pro.ids--light, .ids--1177-pro.ids--dark {
619
623
  --ids-device-min-width: 20rem;
620
- --ids-device-max-width: 35.625rem;
621
624
  --ids-device-min-height: 35.5rem;
622
625
  --ids-components-logotype-region-width-citizen-blekinge: 5.646875rem;
623
626
  --ids-components-logotype-region-width-citizen-dalarna: 4.05875rem;
@@ -664,12 +667,6 @@
664
667
  --ids-components-carousel-image-height: 11.6875rem;
665
668
  --ids-components-header-logotype-width: 2.575625rem;
666
669
  --ids-components-header-avatar-max-width: 6rem;
667
- --ids-sections-3-columns-min-width: 17.5rem;
668
- --ids-sections-4-columns-min-width: 17.5rem;
669
- --ids-sections-6-columns-min-width: 17.5rem;
670
- --ids-sections-8-columns-min-width: 17.5rem;
671
- --ids-sections-9-columns-min-width: 17.5rem;
672
- --ids-sections-12-columns-min-width: 17.5rem;
673
670
  --ids-size-relation-6-8: 0.375rem;
674
671
  --ids-size-relation-14-16: 0.875rem;
675
672
  --ids-size-relation-18-20: 1.125rem;
@@ -677,15 +674,6 @@
677
674
  --ids-size-relation-280-620: 17.5rem;
678
675
  --ids-size-relation-4-6: 0.25rem;
679
676
  --ids-size-relation-34-38: 2.125rem;
680
- --ids-font-weight-heading-xxl: 700;
681
- --ids-font-weight-heading-xl: 700;
682
- --ids-font-weight-heading-l: 700;
683
- --ids-font-weight-heading-m: 700;
684
- --ids-font-weight-heading-s: 700;
685
- --ids-font-weight-heading-xs: 700;
686
- --ids-font-weight-preamble: 300;
687
- --ids-font-weight-body-text: 400;
688
- --ids-font-weight-small-text: 400;
689
677
  --ids-font-size-heading-xxl: 2rem;
690
678
  --ids-font-size-heading-xl: 1.625rem;
691
679
  --ids-font-size-heading-l: 1.5rem;
@@ -697,8 +685,14 @@
697
685
  --ids-font-size-small-text: 0.875rem;
698
686
  --ids-font-size-badge: 0.75rem;
699
687
  --ids-font-size-header-admin-title: 1rem;
700
- --ids-font-size-header-admin-title-extra: 0.625rem;
688
+ --ids-font-size-heade-admin-title-extra: 0.625rem;
701
689
  --ids-font-size-header-profession-title: 1rem;
690
+ --ids-font-size-button-l: 1.125rem;
691
+ --ids-font-size-button-m: 1rem;
692
+ --ids-font-size-button-s: 0.875rem;
693
+ --ids-font-size-icon-button-l: 1.5rem;
694
+ --ids-font-size-icon-button-m: 1.25rem;
695
+ --ids-font-size-icon-button-s: 1rem;
702
696
  --ids-font-line-height-heading-xxl: 2.5rem;
703
697
  --ids-font-line-height-heading-xl: 2.125rem;
704
698
  --ids-font-line-height-heading-l: 1.875rem;
@@ -708,9 +702,12 @@
708
702
  --ids-font-line-height-preamble: 1.75rem;
709
703
  --ids-font-line-height-body-text: 1.5rem;
710
704
  --ids-font-line-height-small-text: 1.25rem;
711
- --ids-font-line-height-header-admin-title: 0.875rem;
705
+ --ids-font-line-height-header-admin-itle: 0.875rem;
712
706
  --ids-font-line-height-header-admin-title-extra: 0.875rem;
713
707
  --ids-font-line-height-header-profession-title: 1.25rem;
708
+ --ids-font-line-height-button-l: 1.5rem;
709
+ --ids-font-line-height-button-m: 1.25rem;
710
+ --ids-font-line-height-button-s: 1rem;
714
711
  --ids-font-letter-spacing-heading-xxl: -0.051875rem;
715
712
  --ids-font-letter-spacing-heading-xl: -0.03125rem;
716
713
  --ids-font-letter-spacing-heading-l: -0.025rem;
@@ -723,6 +720,9 @@
723
720
  --ids-font-letter-spacing-header-admin-title: -0.015625rem;
724
721
  --ids-font-letter-spacing-header-admin-title-extra: -0.015625rem;
725
722
  --ids-font-letter-spacing-header-profession-title: 0;
723
+ --ids-font-letter-spacing-button-l: 0;
724
+ --ids-font-letter-spacing-button-m: 0;
725
+ --ids-font-letter-spacing-button-s: 0;
726
726
  --ids-font-paragraph-spacing-heading-xxl: 0;
727
727
  --ids-font-paragraph-spacing-heading-xl: 0;
728
728
  --ids-font-paragraph-spacing-heading-l: 0;