@inera/ids-design 7.1.2 → 7.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 (58) hide show
  1. package/components/accordion/accordion-lit.js +1 -1
  2. package/components/accordion/accordion.css +6 -4
  3. package/components/alert/alert-lit.js +1 -1
  4. package/components/alert/alert.css +12 -8
  5. package/components/alert-global/alert-global-lit.js +1 -1
  6. package/components/alert-global/alert-global.css +6 -4
  7. package/components/box-link/box-link-lit.js +1 -1
  8. package/components/box-link/box-link.css +5 -5
  9. package/components/card/card-lit.js +1 -1
  10. package/components/card/card.css +32 -0
  11. package/components/carousel/carousel-lit.js +1 -1
  12. package/components/carousel/carousel.css +12 -8
  13. package/components/dialog/dialog-lit.js +1 -1
  14. package/components/dialog/dialog.css +14 -12
  15. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  16. package/components/form/select-multiple/select-multiple.css +15 -13
  17. package/components/header-1177/composite-header-1177.css +27 -23
  18. package/components/header-1177/header-1177-lit.js +1 -1
  19. package/components/header-1177/header-1177-menu-mobile-lit.js +1 -1
  20. package/components/header-1177/header-1177-menu-mobile.css +9 -5
  21. package/components/header-1177/header-1177.css +18 -18
  22. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  23. package/components/header-1177-admin/header-1177-admin.css +12 -12
  24. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  25. package/components/header-1177-pro/header-1177-pro-avatar.css +12 -12
  26. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  27. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +6 -4
  28. package/components/header-inera/header-inera-nav-mobile-lit.js +1 -1
  29. package/components/header-inera/header-inera-nav-mobile.css +4 -4
  30. package/components/header-inera-admin/composite-header-inera-admin.css +104 -46
  31. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  32. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +1 -1
  33. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +7 -7
  34. package/components/header-inera-admin/header-inera-admin.css +97 -39
  35. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  36. package/components/mobile-menu/mobile-menu.css +39 -25
  37. package/components/popover/popover-content-lit.js +1 -1
  38. package/components/popover/popover-content.css +11 -11
  39. package/components/side-menu/side-menu-lit.js +1 -1
  40. package/components/side-menu/side-menu.css +28 -18
  41. package/components/side-panel/side-panel-lit.js +1 -1
  42. package/components/side-panel/side-panel.css +32 -30
  43. package/components/tabs/tab-lit.js +1 -1
  44. package/components/tabs/tab.css +6 -4
  45. package/components/tabs/tabs-lit.js +2 -2
  46. package/components/tabs/tabs.css +3 -0
  47. package/components/tag/tag-lit.js +1 -1
  48. package/components/tag/tag.css +6 -4
  49. package/package.json +1 -1
  50. package/themes/1177/1177.css +38 -29
  51. package/themes/1177-pro/1177-pro.css +38 -29
  52. package/themes/inera/inera.css +38 -29
  53. package/themes/inera-admin/inera-admin.css +38 -29
  54. package/tokens/themes/1177-admin-tokens.css +300 -0
  55. package/tokens/themes/1177-pro-tokens.css +300 -0
  56. package/tokens/themes/1177-tokens.css +300 -0
  57. package/tokens/themes/inera-admin-tokens.css +290 -0
  58. package/tokens/themes/inera-tokens.css +290 -0
package/tokens/themes/1177-pro-tokens.css ADDED
@@ -0,0 +1,300 @@
1
+ .ids--1177-pro.ids--light,
2
+ .ids--1177-pro.ids--dark {
3
+ --ids-palette-primary-30: #6a0032;
4
+ --ids-palette-primary-35: #a00b36;
5
+ --ids-palette-primary-40: #c12143;
6
+ --ids-palette-primary-60: #da254c;
7
+ --ids-palette-primary-90: #faeef0;
8
+ --ids-palette-secondary-95: #faf8f6;
9
+ --ids-palette-accent-30: #3b4266;
10
+ --ids-palette-accent-40: #396291;
11
+ --ids-palette-accent-50: #166ed4;
12
+ --ids-palette-accent-60: #79aeec;
13
+ --ids-palette-accent-90: #c6d2df;
14
+ --ids-palette-accent-95: #f1f1f5;
15
+ --ids-palette-neutral-10: #151515;
16
+ --ids-palette-neutral-15: #252525;
17
+ --ids-palette-neutral-20: #353535;
18
+ --ids-palette-neutral-40: #636466;
19
+ --ids-palette-neutral-50: #808285;
20
+ --ids-palette-neutral-90: #dadbdc;
21
+ --ids-palette-neutral-99: #f1f2f2;
22
+ --ids-palette-neutral-100: #ffffff;
23
+ --ids-palette-success-30: #395428;
24
+ --ids-palette-success-40: #419002;
25
+ --ids-palette-success-99: #eef8ee;
26
+ --ids-palette-attention-40: #ffc100;
27
+ --ids-palette-attention-95: #fff8e0;
28
+ --ids-palette-error-35: #a00b36;
29
+ --ids-palette-error-40: #c12143;
30
+ --ids-palette-error-60: #da254c;
31
+ --ids-palette-error-99: #faeef0;
32
+ }
33
+
34
+ .ids--1177-pro.ids--light {
35
+ --ids-input-height: 3rem;
36
+ --ids-input-padding-x: 1.25rem;
37
+ --ids-textarea-padding-x: 1.25rem;
38
+ --ids-select-height: 3rem;
39
+ --ids-select-padding-x: 1.25rem;
40
+ --ids-search-button-small-padding-x: 1.75rem;
41
+ --ids-search-button-small-padding-y: 0.75rem;
42
+ --ids-search-button-small-font-seize: 1.125rem;
43
+ --ids-search-button-small-line-height: 1.5rem;
44
+ --ids-font-family-primary: Open sans;
45
+ --ids-font-family-secondary: Inter;
46
+ --ids-color-surface-background-default: #ffffff;
47
+ --ids-color-surface-border-default: #808285;
48
+ --ids-color-surface-text-on-default: #353535;
49
+ --ids-color-surface-text-subtle-on-default: #636466;
50
+ --ids-color-surface-background-elevated-1: #ffffff;
51
+ --ids-color-surface-border-elevated-1: #dadbdc;
52
+ --ids-color-surface-text-on-elevated-1: #353535;
53
+ --ids-color-surface-text-subtle-on-elevated-1: #636466;
54
+ --ids-color-surface-background-elevated-1-hover: #ffffff;
55
+ --ids-color-surface-background-elevated-1-active: #ffffff;
56
+ --ids-color-surface-background-elevated-2: #ffffff;
57
+ --ids-color-surface-border-elevated-2: #dadbdc;
58
+ --ids-color-surface-text-on-elevated-2: #353535;
59
+ --ids-color-surface-background-alternative: #faf8f6;
60
+ --ids-color-surface-text-on-alternative: #353535;
61
+ --ids-color-surface-background-alternative-elevated-1: #faf8f6;
62
+ --ids-color-brand-background-primary: #396291;
63
+ --ids-color-brand-border-primary: #396291;
64
+ --ids-color-brand-text-primary: #396291;
65
+ --ids-color-brand-text-primary-subtle: #3b4266;
66
+ --ids-color-brand-text-on-primary: #ffffff;
67
+ --ids-color-brand-background-secondary: #faf8f6;
68
+ --ids-color-brand-text-secondary: #3b4266;
69
+ --ids-color-brand-text-on-secondary: #353535;
70
+ --ids-color-brand-region-logo: #353535;
71
+ --ids-color-navigation-background-default: #c12143;
72
+ --ids-color-navigation-border-default: #a00b36;
73
+ --ids-color-navigation-text-default: #a00b36;
74
+ --ids-color-navigation-icon-default: #c12143;
75
+ --ids-color-navigation-text-on-default: #ffffff;
76
+ --ids-color-navigation-background-hover: #6a0032;
77
+ --ids-color-navigation-border-hover: #6a0032;
78
+ --ids-color-navigation-text-hover: #6a0032;
79
+ --ids-color-navigation-text-on-hover: #ffffff;
80
+ --ids-color-navigation-background-active: #6a0032;
81
+ --ids-color-navigation-border-active: #6a0032;
82
+ --ids-color-navigation-text-active: #6a0032;
83
+ --ids-color-navigation-text-on-active: #ffffff;
84
+ --ids-color-navigation-text-on-secondary: #353535;
85
+ --ids-color-interactive-background-default: #396291;
86
+ --ids-color-interactive-border-default: #396291;
87
+ --ids-color-interactive-text-default: #396291;
88
+ --ids-color-interactive-text-on-default: #ffffff;
89
+ --ids-color-interactive-background-hover: #3b4266;
90
+ --ids-color-interactive-border-hover: #3b4266;
91
+ --ids-color-interactive-text-hover: #3b4266;
92
+ --ids-color-interactive-text-on-hover: #ffffff;
93
+ --ids-color-interactive-background-active: #3b4266;
94
+ --ids-color-interactive-border-active: #3b4266;
95
+ --ids-color-interactive-text-active: #3b4266;
96
+ --ids-color-interactive-text-on-active: #ffffff;
97
+ --ids-color-interactive-background-disabled: #ffffff;
98
+ --ids-color-interactive-border-disabled: #808285;
99
+ --ids-color-interactive-text-disabled: #636466;
100
+ --ids-color-interactive-text-on-disabled: #636466;
101
+ --ids-color-interactive-focus-outline: #636466;
102
+ --ids-color-interactive-focus-outline-on: #ffffff;
103
+ --ids-color-feedback-background-information: #f1f1f5;
104
+ --ids-color-feedback-border-information: #396291;
105
+ --ids-color-feedback-text-on-information: #353535;
106
+ --ids-color-feedback-text-information: #3b4266;
107
+ --ids-color-feedback-background-success: #eef8ee;
108
+ --ids-color-feedback-border-success: #419002;
109
+ --ids-color-feedback-text-on-success: #353535;
110
+ --ids-color-feedback-text-success: #395428;
111
+ --ids-color-feedback-background-attention: #fff8e0;
112
+ --ids-color-feedback-border-attention: #808285;
113
+ --ids-color-feedback-text-on-attention: #353535;
114
+ --ids-color-feedback-text-attention: #636466;
115
+ --ids-color-feedback-background-error: #faeef0;
116
+ --ids-color-feedback-border-error: #c12143;
117
+ --ids-color-feedback-text-on-error: #353535;
118
+ --ids-color-feedback-text-error: #a00b36;
119
+ --ids-color-feedback-background-notification: #c12143;
120
+ --ids-color-feedback-text-on-notification: #ffffff;
121
+ --ids-color-form-background-default: #f1f1f5;
122
+ --ids-color-form-border-default: #396291;
123
+ --ids-color-form-text-on-default: #353535;
124
+ --ids-color-form-placeholder-text-on-default: #636466;
125
+ --ids-color-form-background-light-default: #ffffff;
126
+ --ids-color-form-border-light-default: #396291;
127
+ --ids-color-form-text-on-light-default: #353535;
128
+ --ids-color-form-placeholder-text-on-light-default: #636466;
129
+ --ids-color-form-background-active: #f1f1f5;
130
+ --ids-color-form-border-active: #396291;
131
+ --ids-color-form-text-on-active: #353535;
132
+ --ids-color-form-placeholder-text-on-active: #636466;
133
+ --ids-color-form-background-light-active: #ffffff;
134
+ --ids-color-form-border-light-active: #396291;
135
+ --ids-color-form-text-on-light-active: #353535;
136
+ --ids-color-form-placeholder-text-on-light-active: #636466;
137
+ --ids-color-form-background-disabled: #f1f2f2;
138
+ --ids-color-form-border-disabled: #636466;
139
+ --ids-color-form-text-on-light-disabled: #636466;
140
+ --ids-color-form-placeholder-text-on-light-disabled: #636466;
141
+ --ids-color-form-background-light-disabled: #f1f2f2;
142
+ --ids-color-form-border-light-disabled: #636466;
143
+ --ids-color-form-text-on-disabled: #636466;
144
+ --ids-color-form-placeholder-text-on-disabled: #636466;
145
+ --ids-color-form-background-invalid: #faeef0;
146
+ --ids-color-form-border-invalid: #c12143;
147
+ --ids-color-form-text-on-invalid: #353535;
148
+ --ids-color-form-placeholder-text-on-invalid: #636466;
149
+ --ids-color-form-message-background-invalid: #ffffff;
150
+ --ids-color-form-message-border-invalid: #c12143;
151
+ --ids-color-form-message-text-on-invalid: #c12143;
152
+ --ids-color-form-background-light-invalid: #faeef0;
153
+ --ids-color-form-border-light-invalid: #c12143;
154
+ --ids-color-form-text-on-light-invalid: #353535;
155
+ --ids-color-form-placeholder-text-on-light-invalid: #636466;
156
+ --ids-color-heading-text-xxl: #353535;
157
+ --ids-color-heading-text-xl: #353535;
158
+ --ids-color-heading-text-l: #353535;
159
+ --ids-color-heading-text-m: #353535;
160
+ --ids-color-heading-text-s: #353535;
161
+ --ids-color-heading-text-xs: #353535;
162
+ --ids-border-radius-primary: 0.625rem;
163
+ --ids-border-radius-secondary: 0.3125rem;
164
+ --ids-border-width-general: 0.0625rem;
165
+ --ids-border-width-invalid: 0.125rem;
166
+ }
167
+
168
+ .ids--1177-pro.ids--dark {
169
+ --ids-input-height: 3rem;
170
+ --ids-input-padding-x: 1.25rem;
171
+ --ids-textarea-padding-x: 1.25rem;
172
+ --ids-select-height: 3rem;
173
+ --ids-select-padding-x: 1.25rem;
174
+ --ids-search-button-small-padding-x: 1.75rem;
175
+ --ids-search-button-small-padding-y: 0.75rem;
176
+ --ids-search-button-small-font-seize: 1.125rem;
177
+ --ids-search-button-small-line-height: 1.5rem;
178
+ --ids-font-family-primary: Open sans;
179
+ --ids-font-family-secondary: Inter;
180
+ --ids-color-surface-background-default: #151515;
181
+ --ids-color-surface-border-default: #808285;
182
+ --ids-color-surface-text-on-default: #ffffff;
183
+ --ids-color-surface-text-subtle-on-default: #f1f2f2;
184
+ --ids-color-surface-background-elevated-1: #252525;
185
+ --ids-color-surface-border-elevated-1: #808285;
186
+ --ids-color-surface-text-on-elevated-1: #ffffff;
187
+ --ids-color-surface-text-subtle-on-elevated-1: #f1f2f2;
188
+ --ids-color-surface-background-elevated-1-hover: #353535;
189
+ --ids-color-surface-background-elevated-1-active: #353535;
190
+ --ids-color-surface-background-elevated-2: #353535;
191
+ --ids-color-surface-border-elevated-2: #808285;
192
+ --ids-color-surface-text-on-elevated-2: #ffffff;
193
+ --ids-color-surface-background-alternative: #151515;
194
+ --ids-color-surface-text-on-alternative: #ffffff;
195
+ --ids-color-surface-background-alternative-elevated-1: #252525;
196
+ --ids-color-brand-background-primary: #353535;
197
+ --ids-color-brand-border-primary: #166ed4;
198
+ --ids-color-brand-text-primary: #166ed4;
199
+ --ids-color-brand-text-primary-subtle: #dadbdc;
200
+ --ids-color-brand-text-on-primary: #c6d2df;
201
+ --ids-color-brand-background-secondary: #252525;
202
+ --ids-color-brand-text-secondary: #c6d2df;
203
+ --ids-color-brand-text-on-secondary: #ffffff;
204
+ --ids-color-brand-region-logo: #ffffff;
205
+ --ids-color-navigation-background-default: #151515;
206
+ --ids-color-navigation-border-default: #faeef0;
207
+ --ids-color-navigation-text-default: #faeef0;
208
+ --ids-color-navigation-icon-default: #faeef0;
209
+ --ids-color-navigation-text-on-default: #faeef0;
210
+ --ids-color-navigation-background-hover: #da254c;
211
+ --ids-color-navigation-border-hover: #da254c;
212
+ --ids-color-navigation-text-hover: #ffffff;
213
+ --ids-color-navigation-text-on-hover: #faeef0;
214
+ --ids-color-navigation-background-active: #da254c;
215
+ --ids-color-navigation-border-active: #da254c;
216
+ --ids-color-navigation-text-active: #ffffff;
217
+ --ids-color-navigation-text-on-active: #faeef0;
218
+ --ids-color-navigation-text-on-secondary: #ffffff;
219
+ --ids-color-interactive-background-default: #79aeec;
220
+ --ids-color-interactive-border-default: #c6d2df;
221
+ --ids-color-interactive-text-default: #79aeec;
222
+ --ids-color-interactive-text-on-default: #151515;
223
+ --ids-color-interactive-background-hover: #ffffff;
224
+ --ids-color-interactive-border-hover: #ffffff;
225
+ --ids-color-interactive-text-hover: #ffffff;
226
+ --ids-color-interactive-text-on-hover: #3b4266;
227
+ --ids-color-interactive-background-active: #ffffff;
228
+ --ids-color-interactive-border-active: #ffffff;
229
+ --ids-color-interactive-text-active: #ffffff;
230
+ --ids-color-interactive-text-on-active: #3b4266;
231
+ --ids-color-interactive-background-disabled: #dadbdc;
232
+ --ids-color-interactive-border-disabled: #808285;
233
+ --ids-color-interactive-text-disabled: #dadbdc;
234
+ --ids-color-interactive-text-on-disabled: #636466;
235
+ --ids-color-interactive-focus-outline: #f1f2f2;
236
+ --ids-color-interactive-focus-outline-on: #353535;
237
+ --ids-color-feedback-background-information: #252525;
238
+ --ids-color-feedback-border-information: #166ed4;
239
+ --ids-color-feedback-text-on-information: #ffffff;
240
+ --ids-color-feedback-text-information: #166ed4;
241
+ --ids-color-feedback-background-success: #252525;
242
+ --ids-color-feedback-border-success: #419002;
243
+ --ids-color-feedback-text-on-success: #ffffff;
244
+ --ids-color-feedback-text-success: #419002;
245
+ --ids-color-feedback-background-attention: #252525;
246
+ --ids-color-feedback-border-attention: #ffc100;
247
+ --ids-color-feedback-text-on-attention: #ffffff;
248
+ --ids-color-feedback-text-attention: #ffc100;
249
+ --ids-color-feedback-background-error: #252525;
250
+ --ids-color-feedback-border-error: #c12143;
251
+ --ids-color-feedback-text-on-error: #ffffff;
252
+ --ids-color-feedback-text-error: #da254c;
253
+ --ids-color-feedback-background-notification: #da254c;
254
+ --ids-color-feedback-text-on-notification: #ffffff;
255
+ --ids-color-form-background-default: #151515;
256
+ --ids-color-form-border-default: #c6d2df;
257
+ --ids-color-form-text-on-default: #ffffff;
258
+ --ids-color-form-placeholder-text-on-default: #f1f2f2;
259
+ --ids-color-form-background-light-default: #151515;
260
+ --ids-color-form-border-light-default: #c6d2df;
261
+ --ids-color-form-text-on-light-default: #ffffff;
262
+ --ids-color-form-placeholder-text-on-light-default: #f1f2f2;
263
+ --ids-color-form-background-active: #151515;
264
+ --ids-color-form-border-active: #ffffff;
265
+ --ids-color-form-text-on-active: #ffffff;
266
+ --ids-color-form-placeholder-text-on-active: #f1f2f2;
267
+ --ids-color-form-background-light-active: #151515;
268
+ --ids-color-form-border-light-active: #ffffff;
269
+ --ids-color-form-text-on-light-active: #ffffff;
270
+ --ids-color-form-placeholder-text-on-light-active: #f1f2f2;
271
+ --ids-color-form-background-disabled: #151515;
272
+ --ids-color-form-border-disabled: #dadbdc;
273
+ --ids-color-form-text-on-light-disabled: #f1f2f2;
274
+ --ids-color-form-placeholder-text-on-light-disabled: #f1f2f2;
275
+ --ids-color-form-background-light-disabled: #151515;
276
+ --ids-color-form-border-light-disabled: #dadbdc;
277
+ --ids-color-form-text-on-disabled: #f1f2f2;
278
+ --ids-color-form-placeholder-text-on-disabled: #f1f2f2;
279
+ --ids-color-form-background-invalid: #151515;
280
+ --ids-color-form-border-invalid: #c12143;
281
+ --ids-color-form-text-on-invalid: #ffffff;
282
+ --ids-color-form-placeholder-text-on-invalid: #f1f2f2;
283
+ --ids-color-form-message-background-invalid: #353535;
284
+ --ids-color-form-message-border-invalid: #da254c;
285
+ --ids-color-form-message-text-on-invalid: #ffffff;
286
+ --ids-color-form-background-light-invalid: #151515;
287
+ --ids-color-form-border-light-invalid: #da254c;
288
+ --ids-color-form-text-on-light-invalid: #ffffff;
289
+ --ids-color-form-placeholder-text-on-light-invalid: #f1f2f2;
290
+ --ids-color-heading-text-xxl: #ffffff;
291
+ --ids-color-heading-text-xl: #ffffff;
292
+ --ids-color-heading-text-l: #ffffff;
293
+ --ids-color-heading-text-m: #ffffff;
294
+ --ids-color-heading-text-s: #ffffff;
295
+ --ids-color-heading-text-xs: #ffffff;
296
+ --ids-border-radius-primary: 0.625rem;
297
+ --ids-border-radius-secondary: 0.3125rem;
298
+ --ids-border-width-general: 0.125rem;
299
+ --ids-border-width-invalid: 0.125rem;
300
+ }
package/tokens/themes/1177-tokens.css ADDED
@@ -0,0 +1,300 @@
1
+ .ids--1177.ids--light,
2
+ .ids--1177.ids--dark {
3
+ --ids-palette-primary-30: #6a0032;
4
+ --ids-palette-primary-35: #a00b36;
5
+ --ids-palette-primary-40: #c12143;
6
+ --ids-palette-primary-60: #da254c;
7
+ --ids-palette-primary-90: #faeef0;
8
+ --ids-palette-secondary-95: #faf8f6;
9
+ --ids-palette-accent-30: #3b4266;
10
+ --ids-palette-accent-40: #396291;
11
+ --ids-palette-accent-50: #166ed4;
12
+ --ids-palette-accent-60: #79aeec;
13
+ --ids-palette-accent-90: #c6d2df;
14
+ --ids-palette-accent-95: #f1f1f5;
15
+ --ids-palette-neutral-10: #151515;
16
+ --ids-palette-neutral-15: #252525;
17
+ --ids-palette-neutral-20: #353535;
18
+ --ids-palette-neutral-40: #636466;
19
+ --ids-palette-neutral-50: #808285;
20
+ --ids-palette-neutral-90: #dadbdc;
21
+ --ids-palette-neutral-99: #f1f2f2;
22
+ --ids-palette-neutral-100: #ffffff;
23
+ --ids-palette-success-30: #395428;
24
+ --ids-palette-success-40: #419002;
25
+ --ids-palette-success-99: #eef8ee;
26
+ --ids-palette-attention-40: #ffc100;
27
+ --ids-palette-attention-95: #fff8e0;
28
+ --ids-palette-error-35: #a00b36;
29
+ --ids-palette-error-40: #c12143;
30
+ --ids-palette-error-60: #da254c;
31
+ --ids-palette-error-99: #faeef0;
32
+ }
33
+
34
+ .ids--1177.ids--light {
35
+ --ids-input-height: 3rem;
36
+ --ids-input-padding-x: 1.25rem;
37
+ --ids-textarea-padding-x: 1.25rem;
38
+ --ids-select-height: 3rem;
39
+ --ids-select-padding-x: 1.25rem;
40
+ --ids-search-button-small-padding-x: 1.75rem;
41
+ --ids-search-button-small-padding-y: 0.75rem;
42
+ --ids-search-button-small-font-seize: 1.125rem;
43
+ --ids-search-button-small-line-height: 1.5rem;
44
+ --ids-font-family-primary: Open sans;
45
+ --ids-font-family-secondary: Inter;
46
+ --ids-color-surface-background-default: #ffffff;
47
+ --ids-color-surface-border-default: #808285;
48
+ --ids-color-surface-text-on-default: #353535;
49
+ --ids-color-surface-text-subtle-on-default: #636466;
50
+ --ids-color-surface-background-elevated-1: #ffffff;
51
+ --ids-color-surface-border-elevated-1: #dadbdc;
52
+ --ids-color-surface-text-on-elevated-1: #353535;
53
+ --ids-color-surface-text-subtle-on-elevated-1: #636466;
54
+ --ids-color-surface-background-elevated-1-hover: #ffffff;
55
+ --ids-color-surface-background-elevated-1-active: #ffffff;
56
+ --ids-color-surface-background-elevated-2: #ffffff;
57
+ --ids-color-surface-border-elevated-2: #dadbdc;
58
+ --ids-color-surface-text-on-elevated-2: #353535;
59
+ --ids-color-surface-background-alternative: #faf8f6;
60
+ --ids-color-surface-text-on-alternative: #353535;
61
+ --ids-color-surface-background-alternative-elevated-1: #faf8f6;
62
+ --ids-color-brand-background-primary: #c12143;
63
+ --ids-color-brand-border-primary: #c12143;
64
+ --ids-color-brand-text-primary: #c12143;
65
+ --ids-color-brand-text-primary-subtle: #6a0032;
66
+ --ids-color-brand-text-on-primary: #ffffff;
67
+ --ids-color-brand-background-secondary: #faeef0;
68
+ --ids-color-brand-text-secondary: #6a0032;
69
+ --ids-color-brand-text-on-secondary: #353535;
70
+ --ids-color-brand-region-logo: #ffffff;
71
+ --ids-color-navigation-background-default: #c12143;
72
+ --ids-color-navigation-border-default: #a00b36;
73
+ --ids-color-navigation-text-default: #a00b36;
74
+ --ids-color-navigation-icon-default: #c12143;
75
+ --ids-color-navigation-text-on-default: #ffffff;
76
+ --ids-color-navigation-background-hover: #6a0032;
77
+ --ids-color-navigation-border-hover: #6a0032;
78
+ --ids-color-navigation-text-hover: #6a0032;
79
+ --ids-color-navigation-text-on-hover: #ffffff;
80
+ --ids-color-navigation-background-active: #6a0032;
81
+ --ids-color-navigation-border-active: #6a0032;
82
+ --ids-color-navigation-text-active: #6a0032;
83
+ --ids-color-navigation-text-on-active: #ffffff;
84
+ --ids-color-navigation-text-on-secondary: #353535;
85
+ --ids-color-interactive-background-default: #396291;
86
+ --ids-color-interactive-border-default: #396291;
87
+ --ids-color-interactive-text-default: #396291;
88
+ --ids-color-interactive-text-on-default: #ffffff;
89
+ --ids-color-interactive-background-hover: #3b4266;
90
+ --ids-color-interactive-border-hover: #3b4266;
91
+ --ids-color-interactive-text-hover: #3b4266;
92
+ --ids-color-interactive-text-on-hover: #ffffff;
93
+ --ids-color-interactive-background-active: #3b4266;
94
+ --ids-color-interactive-border-active: #3b4266;
95
+ --ids-color-interactive-text-active: #3b4266;
96
+ --ids-color-interactive-text-on-active: #ffffff;
97
+ --ids-color-interactive-background-disabled: #ffffff;
98
+ --ids-color-interactive-border-disabled: #808285;
99
+ --ids-color-interactive-text-disabled: #636466;
100
+ --ids-color-interactive-text-on-disabled: #636466;
101
+ --ids-color-interactive-focus-outline: #636466;
102
+ --ids-color-interactive-focus-outline-on: #ffffff;
103
+ --ids-color-feedback-background-information: #f1f1f5;
104
+ --ids-color-feedback-border-information: #396291;
105
+ --ids-color-feedback-text-on-information: #353535;
106
+ --ids-color-feedback-text-information: #3b4266;
107
+ --ids-color-feedback-background-success: #eef8ee;
108
+ --ids-color-feedback-border-success: #419002;
109
+ --ids-color-feedback-text-on-success: #353535;
110
+ --ids-color-feedback-text-success: #395428;
111
+ --ids-color-feedback-background-attention: #fff8e0;
112
+ --ids-color-feedback-border-attention: #808285;
113
+ --ids-color-feedback-text-on-attention: #353535;
114
+ --ids-color-feedback-text-attention: #636466;
115
+ --ids-color-feedback-background-error: #faeef0;
116
+ --ids-color-feedback-border-error: #c12143;
117
+ --ids-color-feedback-text-on-error: #353535;
118
+ --ids-color-feedback-text-error: #a00b36;
119
+ --ids-color-feedback-background-notification: #c12143;
120
+ --ids-color-feedback-text-on-notification: #ffffff;
121
+ --ids-color-form-background-default: #f1f1f5;
122
+ --ids-color-form-border-default: #396291;
123
+ --ids-color-form-text-on-default: #353535;
124
+ --ids-color-form-placeholder-text-on-default: #636466;
125
+ --ids-color-form-background-light-default: #ffffff;
126
+ --ids-color-form-border-light-default: #396291;
127
+ --ids-color-form-text-on-light-default: #353535;
128
+ --ids-color-form-placeholder-text-on-light-default: #636466;
129
+ --ids-color-form-background-active: #f1f1f5;
130
+ --ids-color-form-border-active: #396291;
131
+ --ids-color-form-text-on-active: #353535;
132
+ --ids-color-form-placeholder-text-on-active: #636466;
133
+ --ids-color-form-background-light-active: #ffffff;
134
+ --ids-color-form-border-light-active: #396291;
135
+ --ids-color-form-text-on-light-active: #353535;
136
+ --ids-color-form-placeholder-text-on-light-active: #636466;
137
+ --ids-color-form-background-disabled: #f1f2f2;
138
+ --ids-color-form-border-disabled: #636466;
139
+ --ids-color-form-text-on-light-disabled: #636466;
140
+ --ids-color-form-placeholder-text-on-light-disabled: #636466;
141
+ --ids-color-form-background-light-disabled: #f1f2f2;
142
+ --ids-color-form-border-light-disabled: #636466;
143
+ --ids-color-form-text-on-disabled: #636466;
144
+ --ids-color-form-placeholder-text-on-disabled: #636466;
145
+ --ids-color-form-background-invalid: #faeef0;
146
+ --ids-color-form-border-invalid: #c12143;
147
+ --ids-color-form-text-on-invalid: #353535;
148
+ --ids-color-form-placeholder-text-on-invalid: #636466;
149
+ --ids-color-form-message-background-invalid: #ffffff;
150
+ --ids-color-form-message-border-invalid: #c12143;
151
+ --ids-color-form-message-text-on-invalid: #c12143;
152
+ --ids-color-form-background-light-invalid: #faeef0;
153
+ --ids-color-form-border-light-invalid: #c12143;
154
+ --ids-color-form-text-on-light-invalid: #353535;
155
+ --ids-color-form-placeholder-text-on-light-invalid: #636466;
156
+ --ids-color-heading-text-xxl: #c12143;
157
+ --ids-color-heading-text-xl: #c12143;
158
+ --ids-color-heading-text-l: #c12143;
159
+ --ids-color-heading-text-m: #c12143;
160
+ --ids-color-heading-text-s: #353535;
161
+ --ids-color-heading-text-xs: #353535;
162
+ --ids-border-radius-primary: 0.625rem;
163
+ --ids-border-radius-secondary: 0.3125rem;
164
+ --ids-border-width-general: 0.0625rem;
165
+ --ids-border-width-invalid: 0.125rem;
166
+ }
167
+
168
+ .ids--1177.ids--dark {
169
+ --ids-input-height: 3rem;
170
+ --ids-input-padding-x: 1.25rem;
171
+ --ids-textarea-padding-x: 1.25rem;
172
+ --ids-select-height: 3rem;
173
+ --ids-select-padding-x: 1.25rem;
174
+ --ids-search-button-small-padding-x: 1.75rem;
175
+ --ids-search-button-small-padding-y: 0.75rem;
176
+ --ids-search-button-small-font-seize: 1.125rem;
177
+ --ids-search-button-small-line-height: 1.5rem;
178
+ --ids-font-family-primary: Open sans;
179
+ --ids-font-family-secondary: Inter;
180
+ --ids-color-surface-background-default: #151515;
181
+ --ids-color-surface-border-default: #808285;
182
+ --ids-color-surface-text-on-default: #ffffff;
183
+ --ids-color-surface-text-subtle-on-default: #f1f2f2;
184
+ --ids-color-surface-background-elevated-1: #252525;
185
+ --ids-color-surface-border-elevated-1: #808285;
186
+ --ids-color-surface-text-on-elevated-1: #ffffff;
187
+ --ids-color-surface-text-subtle-on-elevated-1: #f1f2f2;
188
+ --ids-color-surface-background-elevated-1-hover: #353535;
189
+ --ids-color-surface-background-elevated-1-active: #353535;
190
+ --ids-color-surface-background-elevated-2: #353535;
191
+ --ids-color-surface-border-elevated-2: #808285;
192
+ --ids-color-surface-text-on-elevated-2: #ffffff;
193
+ --ids-color-surface-background-alternative: #151515;
194
+ --ids-color-surface-text-on-alternative: #ffffff;
195
+ --ids-color-surface-background-alternative-elevated-1: #252525;
196
+ --ids-color-brand-background-primary: #353535;
197
+ --ids-color-brand-border-primary: #da254c;
198
+ --ids-color-brand-text-primary: #da254c;
199
+ --ids-color-brand-text-primary-subtle: #dadbdc;
200
+ --ids-color-brand-text-on-primary: #da254c;
201
+ --ids-color-brand-background-secondary: #252525;
202
+ --ids-color-brand-text-secondary: #faeef0;
203
+ --ids-color-brand-text-on-secondary: #ffffff;
204
+ --ids-color-brand-region-logo: #ffffff;
205
+ --ids-color-navigation-background-default: #151515;
206
+ --ids-color-navigation-border-default: #faeef0;
207
+ --ids-color-navigation-text-default: #faeef0;
208
+ --ids-color-navigation-icon-default: #faeef0;
209
+ --ids-color-navigation-text-on-default: #faeef0;
210
+ --ids-color-navigation-background-hover: #da254c;
211
+ --ids-color-navigation-border-hover: #da254c;
212
+ --ids-color-navigation-text-hover: #ffffff;
213
+ --ids-color-navigation-text-on-hover: #faeef0;
214
+ --ids-color-navigation-background-active: #da254c;
215
+ --ids-color-navigation-border-active: #da254c;
216
+ --ids-color-navigation-text-active: #ffffff;
217
+ --ids-color-navigation-text-on-active: #faeef0;
218
+ --ids-color-navigation-text-on-secondary: #ffffff;
219
+ --ids-color-interactive-background-default: #79aeec;
220
+ --ids-color-interactive-border-default: #c6d2df;
221
+ --ids-color-interactive-text-default: #79aeec;
222
+ --ids-color-interactive-text-on-default: #151515;
223
+ --ids-color-interactive-background-hover: #ffffff;
224
+ --ids-color-interactive-border-hover: #ffffff;
225
+ --ids-color-interactive-text-hover: #ffffff;
226
+ --ids-color-interactive-text-on-hover: #3b4266;
227
+ --ids-color-interactive-background-active: #ffffff;
228
+ --ids-color-interactive-border-active: #ffffff;
229
+ --ids-color-interactive-text-active: #ffffff;
230
+ --ids-color-interactive-text-on-active: #3b4266;
231
+ --ids-color-interactive-background-disabled: #dadbdc;
232
+ --ids-color-interactive-border-disabled: #808285;
233
+ --ids-color-interactive-text-disabled: #dadbdc;
234
+ --ids-color-interactive-text-on-disabled: #636466;
235
+ --ids-color-interactive-focus-outline: #f1f2f2;
236
+ --ids-color-interactive-focus-outline-on: #353535;
237
+ --ids-color-feedback-background-information: #252525;
238
+ --ids-color-feedback-border-information: #166ed4;
239
+ --ids-color-feedback-text-on-information: #ffffff;
240
+ --ids-color-feedback-text-information: #166ed4;
241
+ --ids-color-feedback-background-success: #252525;
242
+ --ids-color-feedback-border-success: #419002;
243
+ --ids-color-feedback-text-on-success: #ffffff;
244
+ --ids-color-feedback-text-success: #419002;
245
+ --ids-color-feedback-background-attention: #252525;
246
+ --ids-color-feedback-border-attention: #ffc100;
247
+ --ids-color-feedback-text-on-attention: #ffffff;
248
+ --ids-color-feedback-text-attention: #ffc100;
249
+ --ids-color-feedback-background-error: #252525;
250
+ --ids-color-feedback-border-error: #c12143;
251
+ --ids-color-feedback-text-on-error: #ffffff;
252
+ --ids-color-feedback-text-error: #da254c;
253
+ --ids-color-feedback-background-notification: #da254c;
254
+ --ids-color-feedback-text-on-notification: #ffffff;
255
+ --ids-color-form-background-default: #151515;
256
+ --ids-color-form-border-default: #c6d2df;
257
+ --ids-color-form-text-on-default: #ffffff;
258
+ --ids-color-form-placeholder-text-on-default: #f1f2f2;
259
+ --ids-color-form-background-light-default: #151515;
260
+ --ids-color-form-border-light-default: #c6d2df;
261
+ --ids-color-form-text-on-light-default: #ffffff;
262
+ --ids-color-form-placeholder-text-on-light-default: #f1f2f2;
263
+ --ids-color-form-background-active: #151515;
264
+ --ids-color-form-border-active: #ffffff;
265
+ --ids-color-form-text-on-active: #ffffff;
266
+ --ids-color-form-placeholder-text-on-active: #f1f2f2;
267
+ --ids-color-form-background-light-active: #151515;
268
+ --ids-color-form-border-light-active: #ffffff;
269
+ --ids-color-form-text-on-light-active: #ffffff;
270
+ --ids-color-form-placeholder-text-on-light-active: #f1f2f2;
271
+ --ids-color-form-background-disabled: #151515;
272
+ --ids-color-form-border-disabled: #dadbdc;
273
+ --ids-color-form-text-on-light-disabled: #f1f2f2;
274
+ --ids-color-form-placeholder-text-on-light-disabled: #f1f2f2;
275
+ --ids-color-form-background-light-disabled: #151515;
276
+ --ids-color-form-border-light-disabled: #dadbdc;
277
+ --ids-color-form-text-on-disabled: #f1f2f2;
278
+ --ids-color-form-placeholder-text-on-disabled: #f1f2f2;
279
+ --ids-color-form-background-invalid: #151515;
280
+ --ids-color-form-border-invalid: #c12143;
281
+ --ids-color-form-text-on-invalid: #ffffff;
282
+ --ids-color-form-placeholder-text-on-invalid: #f1f2f2;
283
+ --ids-color-form-message-background-invalid: #353535;
284
+ --ids-color-form-message-border-invalid: #da254c;
285
+ --ids-color-form-message-text-on-invalid: #ffffff;
286
+ --ids-color-form-background-light-invalid: #151515;
287
+ --ids-color-form-border-light-invalid: #da254c;
288
+ --ids-color-form-text-on-light-invalid: #ffffff;
289
+ --ids-color-form-placeholder-text-on-light-invalid: #f1f2f2;
290
+ --ids-color-heading-text-xxl: #ffffff;
291
+ --ids-color-heading-text-xl: #ffffff;
292
+ --ids-color-heading-text-l: #ffffff;
293
+ --ids-color-heading-text-m: #ffffff;
294
+ --ids-color-heading-text-s: #ffffff;
295
+ --ids-color-heading-text-xs: #ffffff;
296
+ --ids-border-radius-primary: 0.625rem;
297
+ --ids-border-radius-secondary: 0.3125rem;
298
+ --ids-border-width-general: 0.125rem;
299
+ --ids-border-width-invalid: 0.125rem;
300
+ }