@i-cell/ids-styles 0.0.2 → 0.0.3

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 (43) hide show
  1. package/dist/accordion/accordion.css +69 -68
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +69 -73
  4. package/dist/action-item/action-item.css +67 -55
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +67 -73
  7. package/dist/action-panel/action-panel.css +29 -28
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +35 -39
  10. package/dist/avatar/avatar.css +77 -154
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +77 -148
  13. package/dist/button/button.css +134 -178
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +141 -179
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +137 -189
  19. package/dist/checkbox/checkbox.css +554 -0
  20. package/dist/checkbox/checkbox.min.css +1 -0
  21. package/dist/checkbox/checkbox.plugin.js +539 -0
  22. package/dist/components.css +1566 -1326
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +1511 -1374
  25. package/dist/dialog/dialog.css +99 -95
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +103 -102
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +22 -30
  31. package/dist/form-elements/message/message.css +165 -0
  32. package/dist/form-elements/message/message.min.css +1 -0
  33. package/dist/form-elements/message/message.plugin.js +116 -0
  34. package/dist/form-elements/required-marker/required-marker.css +6 -0
  35. package/dist/form-elements/required-marker/required-marker.min.css +1 -0
  36. package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
  37. package/dist/icon-button/icon-button.css +101 -124
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +108 -125
  40. package/dist/tag/tag.css +104 -417
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +111 -418
  43. package/package.json +6 -4
package/dist/components.css CHANGED
@@ -3,12 +3,13 @@
3
3
  flex-direction: column;
4
4
  align-items: flex-start;
5
5
  width: 100%;
6
- background: var(--ids-comp-accordion-item-color-bg-enabled);
6
+ background: var(--ids-comp-accordion-item-color-bg-default);
7
7
  }
8
8
  .ids-accordion > .ids-accordion-summary {
9
9
  display: flex;
10
10
  align-items: center;
11
11
  width: 100%;
12
+ box-sizing: border-box;
12
13
  border-style: solid;
13
14
  cursor: pointer;
14
15
  }
@@ -34,104 +35,104 @@
34
35
  .ids-accordion > .ids-accordion-content {
35
36
  display: flex;
36
37
  flex-direction: column;
37
- background: var(--ids-comp-accordion-details-color-bg-enabled);
38
+ background: var(--ids-comp-accordion-details-color-bg-default);
38
39
  }
39
40
  .ids-accordion.ids-accordion-compact {
40
- padding: var(--ids-comp-size-accordion-item-size-padding-y-compact) var(--ids-comp-size-accordion-item-size-padding-x-compact);
41
- gap: var(--ids-comp-size-accordion-item-size-gap-compact);
42
- border-radius: var(--ids-comp-size-accordion-item-size-border-radius-compact);
41
+ padding: var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact);
42
+ gap: var(--ids-comp-accordion-item-size-gap-compact);
43
+ border-radius: var(--ids-comp-accordion-item-size-border-radius-compact);
43
44
  }
44
45
  .ids-accordion.ids-accordion-compact > .ids-accordion-summary {
45
- height: var(--ids-comp-size-accordion-summary-size-height-compact);
46
- padding: var(--ids-comp-size-accordion-summary-size-padding-y-compact) var(--ids-comp-size-accordion-summary-size-padding-x-compact);
47
- gap: var(--ids-comp-size-accordion-summary-size-gap-compact);
48
- border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-compact);
49
- border-width: var(--ids-comp-size-accordion-summary-size-border-width-compact);
46
+ height: var(--ids-comp-accordion-summary-size-height-compact);
47
+ padding: var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact);
48
+ gap: var(--ids-comp-accordion-summary-size-gap-compact);
49
+ border-radius: var(--ids-comp-accordion-summary-size-border-radius-compact);
50
+ border-width: var(--ids-comp-accordion-summary-size-border-width-compact);
50
51
  }
51
52
  .ids-accordion.ids-accordion-compact > .ids-accordion-summary > .ids-accordion-title {
52
- font-family: var(--ids-comp-size-accordion-summary-typography-font-family-compact);
53
- font-size: var(--ids-comp-size-accordion-summary-typography-font-size-compact);
54
- font-weight: var(--ids-comp-size-accordion-summary-typography-font-weight-compact);
55
- letter-spacing: var(--ids-comp-size-accordion-summary-typography-letter-spacing-compact);
56
- line-height: var(--ids-comp-size-accordion-summary-typography-line-height-compact);
53
+ font-family: var(--ids-comp-accordion-summary-typography-font-family-compact);
54
+ font-size: var(--ids-comp-accordion-summary-typography-font-size-compact);
55
+ font-weight: var(--ids-comp-accordion-summary-typography-font-weight-compact);
56
+ letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-compact);
57
+ line-height: var(--ids-comp-accordion-summary-typography-line-height-compact);
57
58
  }
58
59
  .ids-accordion.ids-accordion-compact > .ids-accordion-content {
59
- padding: var(--ids-comp-size-accordion-details-size-padding-y-compact) var(--ids-comp-size-accordion-details-size-padding-x-compact);
60
- gap: var(--ids-comp-size-accordion-details-size-gap-compact);
60
+ padding: var(--ids-comp-accordion-details-size-padding-y-compact) var(--ids-comp-accordion-details-size-padding-x-compact);
61
+ gap: var(--ids-comp-accordion-details-size-gap-compact);
61
62
  }
62
63
  .ids-accordion.ids-accordion-comfortable {
63
- padding: var(--ids-comp-size-accordion-item-size-padding-y-comfortable) var(--ids-comp-size-accordion-item-size-padding-x-comfortable);
64
- gap: var(--ids-comp-size-accordion-item-size-gap-comfortable);
65
- border-radius: var(--ids-comp-size-accordion-item-size-border-radius-comfortable);
64
+ padding: var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable);
65
+ gap: var(--ids-comp-accordion-item-size-gap-comfortable);
66
+ border-radius: var(--ids-comp-accordion-item-size-border-radius-comfortable);
66
67
  }
67
68
  .ids-accordion.ids-accordion-comfortable > .ids-accordion-summary {
68
- height: var(--ids-comp-size-accordion-summary-size-height-comfortable);
69
- padding: var(--ids-comp-size-accordion-summary-size-padding-y-comfortable) var(--ids-comp-size-accordion-summary-size-padding-x-comfortable);
70
- gap: var(--ids-comp-size-accordion-summary-size-gap-comfortable);
71
- border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-comfortable);
72
- border-width: var(--ids-comp-size-accordion-summary-size-border-width-comfortable);
69
+ height: var(--ids-comp-accordion-summary-size-height-comfortable);
70
+ padding: var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable);
71
+ gap: var(--ids-comp-accordion-summary-size-gap-comfortable);
72
+ border-radius: var(--ids-comp-accordion-summary-size-border-radius-comfortable);
73
+ border-width: var(--ids-comp-accordion-summary-size-border-width-comfortable);
73
74
  }
74
75
  .ids-accordion.ids-accordion-comfortable > .ids-accordion-summary > .ids-accordion-title {
75
- font-family: var(--ids-comp-size-accordion-summary-typography-font-family-comfortable);
76
- font-size: var(--ids-comp-size-accordion-summary-typography-font-size-comfortable);
77
- font-weight: var(--ids-comp-size-accordion-summary-typography-font-weight-comfortable);
78
- letter-spacing: var(--ids-comp-size-accordion-summary-typography-letter-spacing-comfortable);
79
- line-height: var(--ids-comp-size-accordion-summary-typography-line-height-comfortable);
76
+ font-family: var(--ids-comp-accordion-summary-typography-font-family-comfortable);
77
+ font-size: var(--ids-comp-accordion-summary-typography-font-size-comfortable);
78
+ font-weight: var(--ids-comp-accordion-summary-typography-font-weight-comfortable);
79
+ letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable);
80
+ line-height: var(--ids-comp-accordion-summary-typography-line-height-comfortable);
80
81
  }
81
82
  .ids-accordion.ids-accordion-comfortable > .ids-accordion-content {
82
- padding: var(--ids-comp-size-accordion-details-size-padding-y-comfortable) var(--ids-comp-size-accordion-details-size-padding-x-comfortable);
83
- gap: var(--ids-comp-size-accordion-details-size-gap-comfortable);
83
+ padding: var(--ids-comp-accordion-details-size-padding-y-comfortable) var(--ids-comp-accordion-details-size-padding-x-comfortable);
84
+ gap: var(--ids-comp-accordion-details-size-gap-comfortable);
84
85
  }
85
86
  .ids-accordion.ids-accordion-spacious {
86
- padding: var(--ids-comp-size-accordion-item-size-padding-y-spacious) var(--ids-comp-size-accordion-item-size-padding-x-spacious);
87
- gap: var(--ids-comp-size-accordion-item-size-gap-spacious);
88
- border-radius: var(--ids-comp-size-accordion-item-size-border-radius-spacious);
87
+ padding: var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious);
88
+ gap: var(--ids-comp-accordion-item-size-gap-spacious);
89
+ border-radius: var(--ids-comp-accordion-item-size-border-radius-spacious);
89
90
  }
90
91
  .ids-accordion.ids-accordion-spacious > .ids-accordion-summary {
91
- height: var(--ids-comp-size-accordion-summary-size-height-spacious);
92
- padding: var(--ids-comp-size-accordion-summary-size-padding-y-spacious) var(--ids-comp-size-accordion-summary-size-padding-x-spacious);
93
- gap: var(--ids-comp-size-accordion-summary-size-gap-spacious);
94
- border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-spacious);
95
- border-width: var(--ids-comp-size-accordion-summary-size-border-width-spacious);
92
+ height: var(--ids-comp-accordion-summary-size-height-spacious);
93
+ padding: var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious);
94
+ gap: var(--ids-comp-accordion-summary-size-gap-spacious);
95
+ border-radius: var(--ids-comp-accordion-summary-size-border-radius-spacious);
96
+ border-width: var(--ids-comp-accordion-summary-size-border-width-spacious);
96
97
  }
97
98
  .ids-accordion.ids-accordion-spacious > .ids-accordion-summary > .ids-accordion-title {
98
- font-family: var(--ids-comp-size-accordion-summary-typography-font-family-spacious);
99
- font-size: var(--ids-comp-size-accordion-summary-typography-font-size-spacious);
100
- font-weight: var(--ids-comp-size-accordion-summary-typography-font-weight-spacious);
101
- letter-spacing: var(--ids-comp-size-accordion-summary-typography-letter-spacing-spacious);
102
- line-height: var(--ids-comp-size-accordion-summary-typography-line-height-spacious);
99
+ font-family: var(--ids-comp-accordion-summary-typography-font-family-spacious);
100
+ font-size: var(--ids-comp-accordion-summary-typography-font-size-spacious);
101
+ font-weight: var(--ids-comp-accordion-summary-typography-font-weight-spacious);
102
+ letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-spacious);
103
+ line-height: var(--ids-comp-accordion-summary-typography-line-height-spacious);
103
104
  }
104
105
  .ids-accordion.ids-accordion-spacious > .ids-accordion-content {
105
- padding: var(--ids-comp-size-accordion-details-size-padding-y-spacious) var(--ids-comp-size-accordion-details-size-padding-x-spacious);
106
- gap: var(--ids-comp-size-accordion-details-size-gap-spacious);
106
+ padding: var(--ids-comp-accordion-details-size-padding-y-spacious) var(--ids-comp-accordion-details-size-padding-x-spacious);
107
+ gap: var(--ids-comp-accordion-details-size-gap-spacious);
107
108
  }
108
109
  .ids-accordion.ids-accordion-dense {
109
- padding: var(--ids-comp-size-accordion-item-size-padding-y-dense) var(--ids-comp-size-accordion-item-size-padding-x-dense);
110
- gap: var(--ids-comp-size-accordion-item-size-gap-dense);
111
- border-radius: var(--ids-comp-size-accordion-item-size-border-radius-dense);
110
+ padding: var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense);
111
+ gap: var(--ids-comp-accordion-item-size-gap-dense);
112
+ border-radius: var(--ids-comp-accordion-item-size-border-radius-dense);
112
113
  }
113
114
  .ids-accordion.ids-accordion-dense > .ids-accordion-summary {
114
- height: var(--ids-comp-size-accordion-summary-size-height-dense);
115
- padding: var(--ids-comp-size-accordion-summary-size-padding-y-dense) var(--ids-comp-size-accordion-summary-size-padding-x-dense);
116
- gap: var(--ids-comp-size-accordion-summary-size-gap-dense);
117
- border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-dense);
118
- border-width: var(--ids-comp-size-accordion-summary-size-border-width-dense);
115
+ height: var(--ids-comp-accordion-summary-size-height-dense);
116
+ padding: var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense);
117
+ gap: var(--ids-comp-accordion-summary-size-gap-dense);
118
+ border-radius: var(--ids-comp-accordion-summary-size-border-radius-dense);
119
+ border-width: var(--ids-comp-accordion-summary-size-border-width-dense);
119
120
  }
120
121
  .ids-accordion.ids-accordion-dense > .ids-accordion-summary > .ids-accordion-title {
121
- font-family: var(--ids-comp-size-accordion-summary-typography-font-family-dense);
122
- font-size: var(--ids-comp-size-accordion-summary-typography-font-size-dense);
123
- font-weight: var(--ids-comp-size-accordion-summary-typography-font-weight-dense);
124
- letter-spacing: var(--ids-comp-size-accordion-summary-typography-letter-spacing-dense);
125
- line-height: var(--ids-comp-size-accordion-summary-typography-line-height-dense);
122
+ font-family: var(--ids-comp-accordion-summary-typography-font-family-dense);
123
+ font-size: var(--ids-comp-accordion-summary-typography-font-size-dense);
124
+ font-weight: var(--ids-comp-accordion-summary-typography-font-weight-dense);
125
+ letter-spacing: var(--ids-comp-accordion-summary-typography-letter-spacing-dense);
126
+ line-height: var(--ids-comp-accordion-summary-typography-line-height-dense);
126
127
  }
127
128
  .ids-accordion.ids-accordion-dense > .ids-accordion-content {
128
- padding: var(--ids-comp-size-accordion-details-size-padding-y-dense) var(--ids-comp-size-accordion-details-size-padding-x-dense);
129
- gap: var(--ids-comp-size-accordion-details-size-gap-dense);
129
+ padding: var(--ids-comp-accordion-details-size-padding-y-dense) var(--ids-comp-accordion-details-size-padding-x-dense);
130
+ gap: var(--ids-comp-accordion-details-size-gap-dense);
130
131
  }
131
132
  .ids-accordion.ids-accordion-text > .ids-accordion-summary {
132
- background: var(--ids-comp-accordion-summary-text-color-bg-enabled);
133
- border-color: var(--ids-comp-accordion-summary-text-color-border-enabled);
134
- color: var(--ids-comp-accordion-summary-text-color-fg-label-enabled);
133
+ background: var(--ids-comp-accordion-summary-text-color-bg-default);
134
+ border-color: var(--ids-comp-accordion-summary-text-color-border-default);
135
+ color: var(--ids-comp-accordion-summary-text-color-fg-label-default);
135
136
  }
136
137
  .ids-accordion.ids-accordion-text > .ids-accordion-summary:hover {
137
138
  background: var(--ids-comp-accordion-summary-text-color-bg-hovered);
@@ -154,9 +155,9 @@
154
155
  color: var(--ids-comp-accordion-summary-text-color-fg-label-disabled);
155
156
  }
156
157
  .ids-accordion.ids-accordion-filled > .ids-accordion-summary {
157
- background: var(--ids-comp-accordion-summary-filled-color-bg-enabled);
158
- border-color: var(--ids-comp-accordion-summary-filled-color-border-enabled);
159
- color: var(--ids-comp-accordion-summary-filled-color-fg-label-enabled);
158
+ background: var(--ids-comp-accordion-summary-filled-color-bg-default);
159
+ border-color: var(--ids-comp-accordion-summary-filled-color-border-default);
160
+ color: var(--ids-comp-accordion-summary-filled-color-fg-label-default);
160
161
  }
161
162
  .ids-accordion.ids-accordion-filled > .ids-accordion-summary:hover {
162
163
  background: var(--ids-comp-accordion-summary-filled-color-bg-hovered);
@@ -199,110 +200,122 @@
199
200
  justify-content: center;
200
201
  }
201
202
  .ids-action-item.ids-action-item-compact {
202
- gap: var(--ids-comp-size-action-item-size-gap-compact);
203
- border-radius: var(--ids-comp-size-action-item-size-border-radius-compact);
204
- padding: var(--ids-comp-size-action-item-size-padding-y-compact) var(--ids-comp-size-action-item-size-padding-x-compact);
205
- height: var(--ids-comp-size-action-item-size-height-compact);
206
- font-family: var(--ids-comp-size-action-item-label-typography-font-family-compact);
207
- font-size: var(--ids-comp-size-action-item-label-typography-font-size-compact);
208
- font-weight: var(--ids-comp-size-action-item-label-typography-font-weight-compact);
209
- letter-spacing: var(--ids-comp-size-action-item-label-typography-letter-spacing-compact);
210
- line-height: var(--ids-comp-size-action-item-label-typography-line-height-compact);
203
+ gap: var(--ids-comp-action-item-size-gap-compact);
204
+ border-radius: var(--ids-comp-action-item-size-border-radius-compact);
205
+ padding: var(--ids-comp-action-item-size-padding-y-compact) var(--ids-comp-action-item-size-padding-x-compact);
206
+ height: var(--ids-comp-action-item-size-height-compact);
207
+ font-family: var(--ids-comp-action-item-label-typography-font-family-compact);
208
+ font-size: var(--ids-comp-action-item-label-typography-font-size-compact);
209
+ font-weight: var(--ids-comp-action-item-label-typography-font-weight-compact);
210
+ letter-spacing: var(--ids-comp-action-item-label-typography-letter-spacing-compact);
211
+ line-height: var(--ids-comp-action-item-label-typography-line-height-compact);
211
212
  }
212
213
  .ids-action-item.ids-action-item-compact *[icon-leading],
213
214
  .ids-action-item.ids-action-item-compact *[icon-trailing] {
214
- width: var(--ids-comp-action-item-size-compact-icon);
215
- height: var(--ids-comp-action-item-size-compact-icon);
215
+ width: var(--ids-comp-action-item-size-icon-compact);
216
+ height: var(--ids-comp-action-item-size-icon-compact);
216
217
  }
217
218
  .ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface {
218
- border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-enabled);
219
+ border-style: solid;
220
+ border-width: var(--ids-comp-action-item-size-border-width-compact);
221
+ border-color: var(--ids-comp-action-item-text-color-border-surface-default);
219
222
  }
220
223
  .ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover {
221
- border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-hovered);
224
+ border-color: var(--ids-comp-action-item-text-color-border-surface-hovered);
222
225
  }
223
226
  .ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled {
224
- border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-disabled);
227
+ border-color: var(--ids-comp-action-item-text-color-border-surface-disabled);
225
228
  }
226
229
  .ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface {
227
- border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-enabled);
230
+ border-style: solid;
231
+ border-width: var(--ids-comp-action-item-size-border-width-compact);
232
+ border-color: var(--ids-comp-action-item-filled-color-border-surface-default);
228
233
  }
229
234
  .ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover {
230
- border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-hovered);
235
+ border-color: var(--ids-comp-action-item-filled-color-border-surface-hovered);
231
236
  }
232
237
  .ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled {
233
- border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-disabled);
238
+ border-color: var(--ids-comp-action-item-filled-color-border-surface-disabled);
234
239
  }
235
240
  .ids-action-item.ids-action-item-comfortable {
236
- gap: var(--ids-comp-size-action-item-size-gap-comfortable);
237
- border-radius: var(--ids-comp-size-action-item-size-border-radius-comfortable);
238
- padding: var(--ids-comp-size-action-item-size-padding-y-comfortable) var(--ids-comp-size-action-item-size-padding-x-comfortable);
239
- height: var(--ids-comp-size-action-item-size-height-comfortable);
240
- font-family: var(--ids-comp-size-action-item-label-typography-font-family-comfortable);
241
- font-size: var(--ids-comp-size-action-item-label-typography-font-size-comfortable);
242
- font-weight: var(--ids-comp-size-action-item-label-typography-font-weight-comfortable);
243
- letter-spacing: var(--ids-comp-size-action-item-label-typography-letter-spacing-comfortable);
244
- line-height: var(--ids-comp-size-action-item-label-typography-line-height-comfortable);
241
+ gap: var(--ids-comp-action-item-size-gap-comfortable);
242
+ border-radius: var(--ids-comp-action-item-size-border-radius-comfortable);
243
+ padding: var(--ids-comp-action-item-size-padding-y-comfortable) var(--ids-comp-action-item-size-padding-x-comfortable);
244
+ height: var(--ids-comp-action-item-size-height-comfortable);
245
+ font-family: var(--ids-comp-action-item-label-typography-font-family-comfortable);
246
+ font-size: var(--ids-comp-action-item-label-typography-font-size-comfortable);
247
+ font-weight: var(--ids-comp-action-item-label-typography-font-weight-comfortable);
248
+ letter-spacing: var(--ids-comp-action-item-label-typography-letter-spacing-comfortable);
249
+ line-height: var(--ids-comp-action-item-label-typography-line-height-comfortable);
245
250
  }
246
251
  .ids-action-item.ids-action-item-comfortable *[icon-leading],
247
252
  .ids-action-item.ids-action-item-comfortable *[icon-trailing] {
248
- width: var(--ids-comp-action-item-size-comfortable-icon);
249
- height: var(--ids-comp-action-item-size-comfortable-icon);
253
+ width: var(--ids-comp-action-item-size-icon-comfortable);
254
+ height: var(--ids-comp-action-item-size-icon-comfortable);
250
255
  }
251
256
  .ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface {
252
- border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-enabled);
257
+ border-style: solid;
258
+ border-width: var(--ids-comp-action-item-size-border-width-comfortable);
259
+ border-color: var(--ids-comp-action-item-text-color-border-surface-default);
253
260
  }
254
261
  .ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover {
255
- border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-hovered);
262
+ border-color: var(--ids-comp-action-item-text-color-border-surface-hovered);
256
263
  }
257
264
  .ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled {
258
- border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-disabled);
265
+ border-color: var(--ids-comp-action-item-text-color-border-surface-disabled);
259
266
  }
260
267
  .ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface {
261
- border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-enabled);
268
+ border-style: solid;
269
+ border-width: var(--ids-comp-action-item-size-border-width-comfortable);
270
+ border-color: var(--ids-comp-action-item-filled-color-border-surface-default);
262
271
  }
263
272
  .ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover {
264
- border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-hovered);
273
+ border-color: var(--ids-comp-action-item-filled-color-border-surface-hovered);
265
274
  }
266
275
  .ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled {
267
- border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-disabled);
276
+ border-color: var(--ids-comp-action-item-filled-color-border-surface-disabled);
268
277
  }
269
278
  .ids-action-item.ids-action-item-spacious {
270
- gap: var(--ids-comp-size-action-item-size-gap-spacious);
271
- border-radius: var(--ids-comp-size-action-item-size-border-radius-spacious);
272
- padding: var(--ids-comp-size-action-item-size-padding-y-spacious) var(--ids-comp-size-action-item-size-padding-x-spacious);
273
- height: var(--ids-comp-size-action-item-size-height-spacious);
274
- font-family: var(--ids-comp-size-action-item-label-typography-font-family-spacious);
275
- font-size: var(--ids-comp-size-action-item-label-typography-font-size-spacious);
276
- font-weight: var(--ids-comp-size-action-item-label-typography-font-weight-spacious);
277
- letter-spacing: var(--ids-comp-size-action-item-label-typography-letter-spacing-spacious);
278
- line-height: var(--ids-comp-size-action-item-label-typography-line-height-spacious);
279
+ gap: var(--ids-comp-action-item-size-gap-spacious);
280
+ border-radius: var(--ids-comp-action-item-size-border-radius-spacious);
281
+ padding: var(--ids-comp-action-item-size-padding-y-spacious) var(--ids-comp-action-item-size-padding-x-spacious);
282
+ height: var(--ids-comp-action-item-size-height-spacious);
283
+ font-family: var(--ids-comp-action-item-label-typography-font-family-spacious);
284
+ font-size: var(--ids-comp-action-item-label-typography-font-size-spacious);
285
+ font-weight: var(--ids-comp-action-item-label-typography-font-weight-spacious);
286
+ letter-spacing: var(--ids-comp-action-item-label-typography-letter-spacing-spacious);
287
+ line-height: var(--ids-comp-action-item-label-typography-line-height-spacious);
279
288
  }
280
289
  .ids-action-item.ids-action-item-spacious *[icon-leading],
281
290
  .ids-action-item.ids-action-item-spacious *[icon-trailing] {
282
- width: var(--ids-comp-action-item-size-spacious-icon);
283
- height: var(--ids-comp-action-item-size-spacious-icon);
291
+ width: var(--ids-comp-action-item-size-icon-spacious);
292
+ height: var(--ids-comp-action-item-size-icon-spacious);
284
293
  }
285
294
  .ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface {
286
- border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-enabled);
295
+ border-style: solid;
296
+ border-width: var(--ids-comp-action-item-size-border-width-spacious);
297
+ border-color: var(--ids-comp-action-item-text-color-border-surface-default);
287
298
  }
288
299
  .ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover {
289
- border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-hovered);
300
+ border-color: var(--ids-comp-action-item-text-color-border-surface-hovered);
290
301
  }
291
302
  .ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled {
292
- border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-disabled);
303
+ border-color: var(--ids-comp-action-item-text-color-border-surface-disabled);
293
304
  }
294
305
  .ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface {
295
- border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-enabled);
306
+ border-style: solid;
307
+ border-width: var(--ids-comp-action-item-size-border-width-spacious);
308
+ border-color: var(--ids-comp-action-item-filled-color-border-surface-default);
296
309
  }
297
310
  .ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover {
298
- border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-hovered);
311
+ border-color: var(--ids-comp-action-item-filled-color-border-surface-hovered);
299
312
  }
300
313
  .ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled {
301
- border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-disabled);
314
+ border-color: var(--ids-comp-action-item-filled-color-border-surface-disabled);
302
315
  }
303
316
  .ids-action-item.ids-action-item-text.ids-action-item-surface {
304
- color: var(--ids-comp-action-item-text-color-fg-label-surface-enabled);
305
- background: var(--ids-comp-action-item-text-color-bg-surface-enabled);
317
+ color: var(--ids-comp-action-item-text-color-fg-label-surface-default);
318
+ background: var(--ids-comp-action-item-text-color-bg-surface-default);
306
319
  }
307
320
  .ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active {
308
321
  color: var(--ids-comp-action-item-text-color-fg-label-surface-active);
@@ -324,8 +337,8 @@
324
337
  background: var(--ids-comp-action-item-text-color-bg-surface-disabled);
325
338
  }
326
339
  .ids-action-item.ids-action-item-filled.ids-action-item-surface {
327
- color: var(--ids-comp-action-item-filled-color-fg-label-surface-enabled);
328
- background: var(--ids-comp-action-item-filled-color-bg-surface-enabled);
340
+ color: var(--ids-comp-action-item-filled-color-fg-label-surface-default);
341
+ background: var(--ids-comp-action-item-filled-color-bg-surface-default);
329
342
  }
330
343
  .ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active {
331
344
  color: var(--ids-comp-action-item-filled-color-fg-label-surface-active);
@@ -352,62 +365,63 @@
352
365
  width: 22.25rem;
353
366
  flex-direction: column;
354
367
  align-items: flex-start;
368
+ box-sizing: border-box;
355
369
  }
356
370
  .ids-action-panel.ids-action-panel-compact {
357
- gap: var(--ids-comp-size-action-panel-size-gap-compact);
358
- padding: var(--ids-comp-size-action-panel-size-padding-y-compact) var(--ids-comp-size-action-panel-size-padding-x-compact);
359
- border-radius: var(--ids-comp-size-action-panel-size-border-radius-compact);
371
+ gap: var(--ids-comp-action-panel-size-gap-compact);
372
+ padding: var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact);
373
+ border-radius: var(--ids-comp-action-panel-size-border-radius-compact);
360
374
  }
361
375
  .ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined {
362
- border: var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-enabled);
376
+ border: var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default);
363
377
  }
364
378
  .ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined {
365
- border: var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled);
379
+ border: var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
366
380
  }
367
381
  .ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined {
368
- border: var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled);
382
+ border: var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
369
383
  }
370
384
  .ids-action-panel.ids-action-panel-comfortable {
371
- gap: var(--ids-comp-size-action-panel-size-gap-comfortable);
372
- padding: var(--ids-comp-size-action-panel-size-padding-y-comfortable) var(--ids-comp-size-action-panel-size-padding-x-comfortable);
373
- border-radius: var(--ids-comp-size-action-panel-size-border-radius-comfortable);
385
+ gap: var(--ids-comp-action-panel-size-gap-comfortable);
386
+ padding: var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable);
387
+ border-radius: var(--ids-comp-action-panel-size-border-radius-comfortable);
374
388
  }
375
389
  .ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined {
376
- border: var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-enabled);
390
+ border: var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default);
377
391
  }
378
392
  .ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined {
379
- border: var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled);
393
+ border: var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
380
394
  }
381
395
  .ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined {
382
- border: var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled);
396
+ border: var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
383
397
  }
384
398
  .ids-action-panel.ids-action-panel-spacious {
385
- gap: var(--ids-comp-size-action-panel-size-gap-spacious);
386
- padding: var(--ids-comp-size-action-panel-size-padding-y-spacious) var(--ids-comp-size-action-panel-size-padding-x-spacious);
387
- border-radius: var(--ids-comp-size-action-panel-size-border-radius-spacious);
399
+ gap: var(--ids-comp-action-panel-size-gap-spacious);
400
+ padding: var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious);
401
+ border-radius: var(--ids-comp-action-panel-size-border-radius-spacious);
388
402
  }
389
403
  .ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined {
390
- border: var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-enabled);
404
+ border: var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default);
391
405
  }
392
406
  .ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined {
393
- border: var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled);
407
+ border: var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
394
408
  }
395
409
  .ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined {
396
- border: var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled);
410
+ border: var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
397
411
  }
398
412
  .ids-action-panel.ids-action-panel-dense {
399
- gap: var(--ids-comp-size-action-panel-size-gap-dense);
400
- padding: var(--ids-comp-size-action-panel-size-padding-y-dense) var(--ids-comp-size-action-panel-size-padding-x-dense);
401
- border-radius: var(--ids-comp-size-action-panel-size-border-radius-dense);
413
+ gap: var(--ids-comp-action-panel-size-gap-dense);
414
+ padding: var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense);
415
+ border-radius: var(--ids-comp-action-panel-size-border-radius-dense);
402
416
  }
403
417
  .ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined {
404
- border: var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-enabled);
418
+ border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default);
405
419
  }
406
420
  .ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined {
407
- border: var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled);
421
+ border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
408
422
  }
409
423
  .ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined {
410
- border: var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled);
424
+ border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
411
425
  }
412
426
  .ids-action-panel.ids-action-panel-filled {
413
427
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0);
@@ -416,16 +430,16 @@
416
430
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0);
417
431
  }
418
432
  .ids-action-panel.ids-action-panel-elevated {
419
- box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-darker);
433
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
420
434
  }
421
435
  .ids-action-panel.ids-action-panel-filled {
422
- background: var(--ids-comp-action-panel-filled-color-bg-light-enabled);
436
+ background: var(--ids-comp-action-panel-filled-color-bg-light-default);
423
437
  }
424
438
  .ids-action-panel.ids-action-panel-outlined {
425
- background: var(--ids-comp-action-panel-outlined-color-bg-light-enabled);
439
+ background: var(--ids-comp-action-panel-outlined-color-bg-light-default);
426
440
  }
427
441
  .ids-action-panel.ids-action-panel-elevated {
428
- background: var(--ids-comp-action-panel-elevated-color-bg-light-enabled);
442
+ background: var(--ids-comp-action-panel-elevated-color-bg-light-default);
429
443
  }
430
444
  .ids-action-panel button:hover {
431
445
  border-color: transparent;
@@ -445,6 +459,7 @@
445
459
  align-items: center;
446
460
  flex-direction: column;
447
461
  justify-content: center;
462
+ border-style: solid;
448
463
  }
449
464
  .ids-avatar .ids-avatar-icon {
450
465
  gap: 10px;
@@ -462,98 +477,100 @@
462
477
  }
463
478
  .ids-avatar:focus {
464
479
  outline-offset: 2px;
465
- outline: var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-dark-focused);
480
+ outline-style: solid;
481
+ outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
482
+ outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
466
483
  }
467
484
  .ids-avatar:focus.ids-avatar-light {
468
- outline: var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-light-focused);
485
+ outline-color: var(--ids-comp-avatar-focused-outline-color-light-focused);
469
486
  }
470
487
  .ids-avatar:active {
471
488
  outline: none;
472
489
  }
473
490
  .ids-avatar.ids-avatar-compact {
474
- width: var(--ids-comp-size-avatar-size-height-compact);
475
- height: var(--ids-comp-size-avatar-size-width-compact);
476
- gap: var(--ids-comp-size-avatar-size-gap-compact);
477
- border-radius: var(--ids-comp-size-avatar-size-border-radius-compact);
478
- padding: var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact);
479
- border: var(--ids-comp-size-avatar-size-border-compact) solid;
480
- font-family: var(--ids-comp-size-avatar-initials-typography-font-family-compact);
481
- font-size: var(--ids-comp-size-avatar-initials-typography-font-size-compact);
482
- font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-compact);
483
- letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-compact);
484
- line-height: var(--ids-comp-size-avatar-initials-typography-line-height-compact);
491
+ width: var(--ids-comp-avatar-size-height-compact);
492
+ height: var(--ids-comp-avatar-size-width-compact);
493
+ gap: var(--ids-comp-avatar-size-gap-compact);
494
+ border-radius: var(--ids-comp-avatar-size-border-radius-compact);
495
+ padding: var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact);
496
+ border: var(--ids-comp-avatar-size-border-compact);
497
+ font-family: var(--ids-comp-avatar-initials-typography-font-family-compact);
498
+ font-size: var(--ids-comp-avatar-initials-typography-font-size-compact);
499
+ font-weight: var(--ids-comp-avatar-initials-typography-font-weight-compact);
500
+ letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-compact);
501
+ line-height: var(--ids-comp-avatar-initials-typography-line-height-compact);
485
502
  }
486
503
  .ids-avatar.ids-avatar-compact:has(.ids-avatar-image) {
487
504
  padding: 0;
488
505
  }
489
506
  .ids-avatar.ids-avatar-compact .ids-avatar-image {
490
- width: var(--ids-comp-size-avatar-size-width-compact);
491
- height: var(--ids-comp-size-avatar-size-height-compact);
507
+ width: var(--ids-comp-avatar-size-width-compact);
508
+ height: var(--ids-comp-avatar-size-height-compact);
492
509
  }
493
510
  .ids-avatar.ids-avatar-comfortable {
494
- width: var(--ids-comp-size-avatar-size-height-comfortable);
495
- height: var(--ids-comp-size-avatar-size-width-comfortable);
496
- gap: var(--ids-comp-size-avatar-size-gap-comfortable);
497
- border-radius: var(--ids-comp-size-avatar-size-border-radius-comfortable);
498
- padding: var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable);
499
- border: var(--ids-comp-size-avatar-size-border-comfortable) solid;
500
- font-family: var(--ids-comp-size-avatar-initials-typography-font-family-comfortable);
501
- font-size: var(--ids-comp-size-avatar-initials-typography-font-size-comfortable);
502
- font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-comfortable);
503
- letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-comfortable);
504
- line-height: var(--ids-comp-size-avatar-initials-typography-line-height-comfortable);
511
+ width: var(--ids-comp-avatar-size-height-comfortable);
512
+ height: var(--ids-comp-avatar-size-width-comfortable);
513
+ gap: var(--ids-comp-avatar-size-gap-comfortable);
514
+ border-radius: var(--ids-comp-avatar-size-border-radius-comfortable);
515
+ padding: var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable);
516
+ border: var(--ids-comp-avatar-size-border-comfortable);
517
+ font-family: var(--ids-comp-avatar-initials-typography-font-family-comfortable);
518
+ font-size: var(--ids-comp-avatar-initials-typography-font-size-comfortable);
519
+ font-weight: var(--ids-comp-avatar-initials-typography-font-weight-comfortable);
520
+ letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);
521
+ line-height: var(--ids-comp-avatar-initials-typography-line-height-comfortable);
505
522
  }
506
523
  .ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image) {
507
524
  padding: 0;
508
525
  }
509
526
  .ids-avatar.ids-avatar-comfortable .ids-avatar-image {
510
- width: var(--ids-comp-size-avatar-size-width-comfortable);
511
- height: var(--ids-comp-size-avatar-size-height-comfortable);
527
+ width: var(--ids-comp-avatar-size-width-comfortable);
528
+ height: var(--ids-comp-avatar-size-height-comfortable);
512
529
  }
513
530
  .ids-avatar.ids-avatar-spacious {
514
- width: var(--ids-comp-size-avatar-size-height-spacious);
515
- height: var(--ids-comp-size-avatar-size-width-spacious);
516
- gap: var(--ids-comp-size-avatar-size-gap-spacious);
517
- border-radius: var(--ids-comp-size-avatar-size-border-radius-spacious);
518
- padding: var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious);
519
- border: var(--ids-comp-size-avatar-size-border-spacious) solid;
520
- font-family: var(--ids-comp-size-avatar-initials-typography-font-family-spacious);
521
- font-size: var(--ids-comp-size-avatar-initials-typography-font-size-spacious);
522
- font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-spacious);
523
- letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-spacious);
524
- line-height: var(--ids-comp-size-avatar-initials-typography-line-height-spacious);
531
+ width: var(--ids-comp-avatar-size-height-spacious);
532
+ height: var(--ids-comp-avatar-size-width-spacious);
533
+ gap: var(--ids-comp-avatar-size-gap-spacious);
534
+ border-radius: var(--ids-comp-avatar-size-border-radius-spacious);
535
+ padding: var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious);
536
+ border: var(--ids-comp-avatar-size-border-spacious);
537
+ font-family: var(--ids-comp-avatar-initials-typography-font-family-spacious);
538
+ font-size: var(--ids-comp-avatar-initials-typography-font-size-spacious);
539
+ font-weight: var(--ids-comp-avatar-initials-typography-font-weight-spacious);
540
+ letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);
541
+ line-height: var(--ids-comp-avatar-initials-typography-line-height-spacious);
525
542
  }
526
543
  .ids-avatar.ids-avatar-spacious:has(.ids-avatar-image) {
527
544
  padding: 0;
528
545
  }
529
546
  .ids-avatar.ids-avatar-spacious .ids-avatar-image {
530
- width: var(--ids-comp-size-avatar-size-width-spacious);
531
- height: var(--ids-comp-size-avatar-size-height-spacious);
547
+ width: var(--ids-comp-avatar-size-width-spacious);
548
+ height: var(--ids-comp-avatar-size-height-spacious);
532
549
  }
533
550
  .ids-avatar.ids-avatar-dense {
534
- width: var(--ids-comp-size-avatar-size-height-dense);
535
- height: var(--ids-comp-size-avatar-size-width-dense);
536
- gap: var(--ids-comp-size-avatar-size-gap-dense);
537
- border-radius: var(--ids-comp-size-avatar-size-border-radius-dense);
538
- padding: var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense);
539
- border: var(--ids-comp-size-avatar-size-border-dense) solid;
540
- font-family: var(--ids-comp-size-avatar-initials-typography-font-family-dense);
541
- font-size: var(--ids-comp-size-avatar-initials-typography-font-size-dense);
542
- font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-dense);
543
- letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-dense);
544
- line-height: var(--ids-comp-size-avatar-initials-typography-line-height-dense);
551
+ width: var(--ids-comp-avatar-size-height-dense);
552
+ height: var(--ids-comp-avatar-size-width-dense);
553
+ gap: var(--ids-comp-avatar-size-gap-dense);
554
+ border-radius: var(--ids-comp-avatar-size-border-radius-dense);
555
+ padding: var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense);
556
+ border: var(--ids-comp-avatar-size-border-dense);
557
+ font-family: var(--ids-comp-avatar-initials-typography-font-family-dense);
558
+ font-size: var(--ids-comp-avatar-initials-typography-font-size-dense);
559
+ font-weight: var(--ids-comp-avatar-initials-typography-font-weight-dense);
560
+ letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-dense);
561
+ line-height: var(--ids-comp-avatar-initials-typography-line-height-dense);
545
562
  }
546
563
  .ids-avatar.ids-avatar-dense:has(.ids-avatar-image) {
547
564
  padding: 0;
548
565
  }
549
566
  .ids-avatar.ids-avatar-dense .ids-avatar-image {
550
- width: var(--ids-comp-size-avatar-size-width-dense);
551
- height: var(--ids-comp-size-avatar-size-height-dense);
567
+ width: var(--ids-comp-avatar-size-width-dense);
568
+ height: var(--ids-comp-avatar-size-height-dense);
552
569
  }
553
570
  .ids-avatar.ids-avatar-primary {
554
- color: var(--ids-comp-avatar-color-fg-primary-enabled);
555
- background: var(--ids-comp-avatar-color-bg-primary-enabled);
556
- border-color: var(--ids-comp-avatar-color-border-primary-enabled);
571
+ color: var(--ids-comp-avatar-color-fg-primary-default);
572
+ background: var(--ids-comp-avatar-color-bg-primary-default);
573
+ border-color: var(--ids-comp-avatar-color-border-primary-default);
557
574
  }
558
575
  .ids-avatar.ids-avatar-primary:hover {
559
576
  background: var(--ids-comp-avatar-color-bg-primary-hovered);
@@ -568,12 +585,12 @@
568
585
  border-color: var(--ids-comp-avatar-color-border-primary-pressed);
569
586
  }
570
587
  .ids-avatar.ids-avatar-primary .ids-avatar-icon path {
571
- fill: var(--ids-comp-avatar-color-fg-primary-enabled);
588
+ fill: var(--ids-comp-avatar-color-fg-primary-default);
572
589
  }
573
590
  .ids-avatar.ids-avatar-secondary {
574
- color: var(--ids-comp-avatar-color-fg-secondary-enabled);
575
- background: var(--ids-comp-avatar-color-bg-secondary-enabled);
576
- border-color: var(--ids-comp-avatar-color-border-secondary-enabled);
591
+ color: var(--ids-comp-avatar-color-fg-secondary-default);
592
+ background: var(--ids-comp-avatar-color-bg-secondary-default);
593
+ border-color: var(--ids-comp-avatar-color-border-secondary-default);
577
594
  }
578
595
  .ids-avatar.ids-avatar-secondary:hover {
579
596
  background: var(--ids-comp-avatar-color-bg-secondary-hovered);
@@ -588,92 +605,12 @@
588
605
  border-color: var(--ids-comp-avatar-color-border-secondary-pressed);
589
606
  }
590
607
  .ids-avatar.ids-avatar-secondary .ids-avatar-icon path {
591
- fill: var(--ids-comp-avatar-color-fg-secondary-enabled);
592
- }
593
- .ids-avatar.ids-avatar-brand {
594
- color: var(--ids-comp-avatar-color-fg-brand-enabled);
595
- background: var(--ids-comp-avatar-color-bg-brand-enabled);
596
- border-color: var(--ids-comp-avatar-color-border-brand-enabled);
597
- }
598
- .ids-avatar.ids-avatar-brand:hover {
599
- background: var(--ids-comp-avatar-color-bg-brand-hovered);
600
- border-color: var(--ids-comp-avatar-color-border-brand-hovered);
601
- }
602
- .ids-avatar.ids-avatar-brand:focus {
603
- background: var(--ids-comp-avatar-color-bg-brand-focused);
604
- border-color: var(--ids-comp-avatar-color-border-brand-focused);
605
- }
606
- .ids-avatar.ids-avatar-brand:active {
607
- background: var(--ids-comp-avatar-color-bg-brand-pressed);
608
- border-color: var(--ids-comp-avatar-color-border-brand-pressed);
609
- }
610
- .ids-avatar.ids-avatar-brand .ids-avatar-icon path {
611
- fill: var(--ids-comp-avatar-color-fg-brand-enabled);
612
- }
613
- .ids-avatar.ids-avatar-error {
614
- color: var(--ids-comp-avatar-color-fg-error-enabled);
615
- background: var(--ids-comp-avatar-color-bg-error-enabled);
616
- border-color: var(--ids-comp-avatar-color-border-error-enabled);
617
- }
618
- .ids-avatar.ids-avatar-error:hover {
619
- background: var(--ids-comp-avatar-color-bg-error-hovered);
620
- border-color: var(--ids-comp-avatar-color-border-error-hovered);
621
- }
622
- .ids-avatar.ids-avatar-error:focus {
623
- background: var(--ids-comp-avatar-color-bg-error-focused);
624
- border-color: var(--ids-comp-avatar-color-border-error-focused);
625
- }
626
- .ids-avatar.ids-avatar-error:active {
627
- background: var(--ids-comp-avatar-color-bg-error-pressed);
628
- border-color: var(--ids-comp-avatar-color-border-error-pressed);
629
- }
630
- .ids-avatar.ids-avatar-error .ids-avatar-icon path {
631
- fill: var(--ids-comp-avatar-color-fg-error-enabled);
632
- }
633
- .ids-avatar.ids-avatar-success {
634
- color: var(--ids-comp-avatar-color-fg-success-enabled);
635
- background: var(--ids-comp-avatar-color-bg-success-enabled);
636
- border-color: var(--ids-comp-avatar-color-border-success-enabled);
637
- }
638
- .ids-avatar.ids-avatar-success:hover {
639
- background: var(--ids-comp-avatar-color-bg-success-hovered);
640
- border-color: var(--ids-comp-avatar-color-border-success-hovered);
641
- }
642
- .ids-avatar.ids-avatar-success:focus {
643
- background: var(--ids-comp-avatar-color-bg-success-focused);
644
- border-color: var(--ids-comp-avatar-color-border-success-focused);
645
- }
646
- .ids-avatar.ids-avatar-success:active {
647
- background: var(--ids-comp-avatar-color-bg-success-pressed);
648
- border-color: var(--ids-comp-avatar-color-border-success-pressed);
649
- }
650
- .ids-avatar.ids-avatar-success .ids-avatar-icon path {
651
- fill: var(--ids-comp-avatar-color-fg-success-enabled);
652
- }
653
- .ids-avatar.ids-avatar-warning {
654
- color: var(--ids-comp-avatar-color-fg-warning-enabled);
655
- background: var(--ids-comp-avatar-color-bg-warning-enabled);
656
- border-color: var(--ids-comp-avatar-color-border-warning-enabled);
657
- }
658
- .ids-avatar.ids-avatar-warning:hover {
659
- background: var(--ids-comp-avatar-color-bg-warning-hovered);
660
- border-color: var(--ids-comp-avatar-color-border-warning-hovered);
661
- }
662
- .ids-avatar.ids-avatar-warning:focus {
663
- background: var(--ids-comp-avatar-color-bg-warning-focused);
664
- border-color: var(--ids-comp-avatar-color-border-warning-focused);
665
- }
666
- .ids-avatar.ids-avatar-warning:active {
667
- background: var(--ids-comp-avatar-color-bg-warning-pressed);
668
- border-color: var(--ids-comp-avatar-color-border-warning-pressed);
669
- }
670
- .ids-avatar.ids-avatar-warning .ids-avatar-icon path {
671
- fill: var(--ids-comp-avatar-color-fg-warning-enabled);
608
+ fill: var(--ids-comp-avatar-color-fg-secondary-default);
672
609
  }
673
610
  .ids-avatar.ids-avatar-light {
674
- color: var(--ids-comp-avatar-color-fg-light-enabled);
675
- background: var(--ids-comp-avatar-color-bg-light-enabled);
676
- border-color: var(--ids-comp-avatar-color-border-light-enabled);
611
+ color: var(--ids-comp-avatar-color-fg-light-default);
612
+ background: var(--ids-comp-avatar-color-bg-light-default);
613
+ border-color: var(--ids-comp-avatar-color-border-light-default);
677
614
  }
678
615
  .ids-avatar.ids-avatar-light:hover {
679
616
  background: var(--ids-comp-avatar-color-bg-light-hovered);
@@ -688,12 +625,12 @@
688
625
  border-color: var(--ids-comp-avatar-color-border-light-pressed);
689
626
  }
690
627
  .ids-avatar.ids-avatar-light .ids-avatar-icon path {
691
- fill: var(--ids-comp-avatar-color-fg-light-enabled);
628
+ fill: var(--ids-comp-avatar-color-fg-light-default);
692
629
  }
693
630
  .ids-avatar.ids-avatar-dark {
694
- color: var(--ids-comp-avatar-color-fg-dark-enabled);
695
- background: var(--ids-comp-avatar-color-bg-dark-enabled);
696
- border-color: var(--ids-comp-avatar-color-border-dark-enabled);
631
+ color: var(--ids-comp-avatar-color-fg-dark-default);
632
+ background: var(--ids-comp-avatar-color-bg-dark-default);
633
+ border-color: var(--ids-comp-avatar-color-border-dark-default);
697
634
  }
698
635
  .ids-avatar.ids-avatar-dark:hover {
699
636
  background: var(--ids-comp-avatar-color-bg-dark-hovered);
@@ -708,12 +645,12 @@
708
645
  border-color: var(--ids-comp-avatar-color-border-dark-pressed);
709
646
  }
710
647
  .ids-avatar.ids-avatar-dark .ids-avatar-icon path {
711
- fill: var(--ids-comp-avatar-color-fg-dark-enabled);
648
+ fill: var(--ids-comp-avatar-color-fg-dark-default);
712
649
  }
713
650
  .ids-avatar.ids-avatar-surface {
714
- color: var(--ids-comp-avatar-color-fg-surface-enabled);
715
- background: var(--ids-comp-avatar-color-bg-surface-enabled);
716
- border-color: var(--ids-comp-avatar-color-border-surface-enabled);
651
+ color: var(--ids-comp-avatar-color-fg-surface-default);
652
+ background: var(--ids-comp-avatar-color-bg-surface-default);
653
+ border-color: var(--ids-comp-avatar-color-border-surface-default);
717
654
  }
718
655
  .ids-avatar.ids-avatar-surface:hover {
719
656
  background: var(--ids-comp-avatar-color-bg-surface-hovered);
@@ -728,7 +665,7 @@
728
665
  border-color: var(--ids-comp-avatar-color-border-surface-pressed);
729
666
  }
730
667
  .ids-avatar.ids-avatar-surface .ids-avatar-icon path {
731
- fill: var(--ids-comp-avatar-color-fg-surface-enabled);
668
+ fill: var(--ids-comp-avatar-color-fg-surface-default);
732
669
  }
733
670
 
734
671
  .ids-button {
@@ -737,6 +674,7 @@
737
674
  align-items: center;
738
675
  display: inline-flex;
739
676
  justify-content: center;
677
+ border-style: solid;
740
678
  }
741
679
  .ids-button:focus {
742
680
  outline-offset: 2px;
@@ -756,89 +694,89 @@
756
694
  justify-content: center;
757
695
  }
758
696
  .ids-button.ids-button-compact {
759
- gap: var(--ids-comp-size-buttons-size-gap-compact);
760
- height: var(--ids-comp-size-buttons-size-height-compact);
761
- min-width: var(--ids-comp-size-buttons-size-min-width-compact);
762
- padding: var(--ids-comp-size-buttons-size-padding-y-compact) var(--ids-comp-size-buttons-size-padding-x-compact);
763
- border-radius: var(--ids-comp-size-buttons-size-border-radius-compact);
764
- border: var(--ids-comp-size-buttons-size-border-width-compact) solid;
697
+ gap: var(--ids-comp-buttons-size-gap-compact);
698
+ height: var(--ids-comp-buttons-size-height-compact);
699
+ min-width: var(--ids-comp-buttons-size-min-width-compact);
700
+ padding: var(--ids-comp-buttons-size-padding-y-compact) var(--ids-comp-buttons-size-padding-x-compact);
701
+ border-radius: var(--ids-comp-buttons-size-border-radius-compact);
702
+ border-width: var(--ids-comp-buttons-size-border-width-compact);
765
703
  }
766
704
  .ids-button.ids-button-compact > .ids-button-label {
767
- font-family: var(--ids-comp-size-buttons-label-typography-font-family-compact);
768
- font-size: var(--ids-comp-size-buttons-label-typography-font-size-compact);
769
- font-weight: var(--ids-comp-size-buttons-label-typography-font-weight-compact);
770
- letter-spacing: var(--ids-comp-size-buttons-label-typography-letter-spacing-compact);
771
- line-height: var(--ids-comp-size-buttons-label-typography-line-height-compact);
705
+ font-family: var(--ids-comp-buttons-label-typography-font-family-compact);
706
+ font-size: var(--ids-comp-buttons-label-typography-font-size-compact);
707
+ font-weight: var(--ids-comp-buttons-label-typography-font-weight-compact);
708
+ letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-compact);
709
+ line-height: var(--ids-comp-buttons-label-typography-line-height-compact);
772
710
  }
773
711
  .ids-button.ids-button-compact *[icon-leading],
774
712
  .ids-button.ids-button-compact *[icon-trailing] {
775
- width: var(--ids-comp-size-buttons-size-icon-compact);
776
- height: var(--ids-comp-size-buttons-size-icon-compact);
713
+ width: var(--ids-comp-buttons-size-icon-compact);
714
+ height: var(--ids-comp-buttons-size-icon-compact);
777
715
  }
778
716
  .ids-button.ids-button-comfortable {
779
- gap: var(--ids-comp-size-buttons-size-gap-comfortable);
780
- height: var(--ids-comp-size-buttons-size-height-comfortable);
781
- min-width: var(--ids-comp-size-buttons-size-min-width-comfortable);
782
- padding: var(--ids-comp-size-buttons-size-padding-y-comfortable) var(--ids-comp-size-buttons-size-padding-x-comfortable);
783
- border-radius: var(--ids-comp-size-buttons-size-border-radius-comfortable);
784
- border: var(--ids-comp-size-buttons-size-border-width-comfortable) solid;
717
+ gap: var(--ids-comp-buttons-size-gap-comfortable);
718
+ height: var(--ids-comp-buttons-size-height-comfortable);
719
+ min-width: var(--ids-comp-buttons-size-min-width-comfortable);
720
+ padding: var(--ids-comp-buttons-size-padding-y-comfortable) var(--ids-comp-buttons-size-padding-x-comfortable);
721
+ border-radius: var(--ids-comp-buttons-size-border-radius-comfortable);
722
+ border-width: var(--ids-comp-buttons-size-border-width-comfortable);
785
723
  }
786
724
  .ids-button.ids-button-comfortable > .ids-button-label {
787
- font-family: var(--ids-comp-size-buttons-label-typography-font-family-comfortable);
788
- font-size: var(--ids-comp-size-buttons-label-typography-font-size-comfortable);
789
- font-weight: var(--ids-comp-size-buttons-label-typography-font-weight-comfortable);
790
- letter-spacing: var(--ids-comp-size-buttons-label-typography-letter-spacing-comfortable);
791
- line-height: var(--ids-comp-size-buttons-label-typography-line-height-comfortable);
725
+ font-family: var(--ids-comp-buttons-label-typography-font-family-comfortable);
726
+ font-size: var(--ids-comp-buttons-label-typography-font-size-comfortable);
727
+ font-weight: var(--ids-comp-buttons-label-typography-font-weight-comfortable);
728
+ letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-comfortable);
729
+ line-height: var(--ids-comp-buttons-label-typography-line-height-comfortable);
792
730
  }
793
731
  .ids-button.ids-button-comfortable *[icon-leading],
794
732
  .ids-button.ids-button-comfortable *[icon-trailing] {
795
- width: var(--ids-comp-size-buttons-size-icon-comfortable);
796
- height: var(--ids-comp-size-buttons-size-icon-comfortable);
733
+ width: var(--ids-comp-buttons-size-icon-comfortable);
734
+ height: var(--ids-comp-buttons-size-icon-comfortable);
797
735
  }
798
736
  .ids-button.ids-button-spacious {
799
- gap: var(--ids-comp-size-buttons-size-gap-spacious);
800
- height: var(--ids-comp-size-buttons-size-height-spacious);
801
- min-width: var(--ids-comp-size-buttons-size-min-width-spacious);
802
- padding: var(--ids-comp-size-buttons-size-padding-y-spacious) var(--ids-comp-size-buttons-size-padding-x-spacious);
803
- border-radius: var(--ids-comp-size-buttons-size-border-radius-spacious);
804
- border: var(--ids-comp-size-buttons-size-border-width-spacious) solid;
737
+ gap: var(--ids-comp-buttons-size-gap-spacious);
738
+ height: var(--ids-comp-buttons-size-height-spacious);
739
+ min-width: var(--ids-comp-buttons-size-min-width-spacious);
740
+ padding: var(--ids-comp-buttons-size-padding-y-spacious) var(--ids-comp-buttons-size-padding-x-spacious);
741
+ border-radius: var(--ids-comp-buttons-size-border-radius-spacious);
742
+ border-width: var(--ids-comp-buttons-size-border-width-spacious);
805
743
  }
806
744
  .ids-button.ids-button-spacious > .ids-button-label {
807
- font-family: var(--ids-comp-size-buttons-label-typography-font-family-spacious);
808
- font-size: var(--ids-comp-size-buttons-label-typography-font-size-spacious);
809
- font-weight: var(--ids-comp-size-buttons-label-typography-font-weight-spacious);
810
- letter-spacing: var(--ids-comp-size-buttons-label-typography-letter-spacing-spacious);
811
- line-height: var(--ids-comp-size-buttons-label-typography-line-height-spacious);
745
+ font-family: var(--ids-comp-buttons-label-typography-font-family-spacious);
746
+ font-size: var(--ids-comp-buttons-label-typography-font-size-spacious);
747
+ font-weight: var(--ids-comp-buttons-label-typography-font-weight-spacious);
748
+ letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-spacious);
749
+ line-height: var(--ids-comp-buttons-label-typography-line-height-spacious);
812
750
  }
813
751
  .ids-button.ids-button-spacious *[icon-leading],
814
752
  .ids-button.ids-button-spacious *[icon-trailing] {
815
- width: var(--ids-comp-size-buttons-size-icon-spacious);
816
- height: var(--ids-comp-size-buttons-size-icon-spacious);
753
+ width: var(--ids-comp-buttons-size-icon-spacious);
754
+ height: var(--ids-comp-buttons-size-icon-spacious);
817
755
  }
818
756
  .ids-button.ids-button-dense {
819
- gap: var(--ids-comp-size-buttons-size-gap-dense);
820
- height: var(--ids-comp-size-buttons-size-height-dense);
821
- min-width: var(--ids-comp-size-buttons-size-min-width-dense);
822
- padding: var(--ids-comp-size-buttons-size-padding-y-dense) var(--ids-comp-size-buttons-size-padding-x-dense);
823
- border-radius: var(--ids-comp-size-buttons-size-border-radius-dense);
824
- border: var(--ids-comp-size-buttons-size-border-width-dense) solid;
757
+ gap: var(--ids-comp-buttons-size-gap-dense);
758
+ height: var(--ids-comp-buttons-size-height-dense);
759
+ min-width: var(--ids-comp-buttons-size-min-width-dense);
760
+ padding: var(--ids-comp-buttons-size-padding-y-dense) var(--ids-comp-buttons-size-padding-x-dense);
761
+ border-radius: var(--ids-comp-buttons-size-border-radius-dense);
762
+ border-width: var(--ids-comp-buttons-size-border-width-dense);
825
763
  }
826
764
  .ids-button.ids-button-dense > .ids-button-label {
827
- font-family: var(--ids-comp-size-buttons-label-typography-font-family-dense);
828
- font-size: var(--ids-comp-size-buttons-label-typography-font-size-dense);
829
- font-weight: var(--ids-comp-size-buttons-label-typography-font-weight-dense);
830
- letter-spacing: var(--ids-comp-size-buttons-label-typography-letter-spacing-dense);
831
- line-height: var(--ids-comp-size-buttons-label-typography-line-height-dense);
765
+ font-family: var(--ids-comp-buttons-label-typography-font-family-dense);
766
+ font-size: var(--ids-comp-buttons-label-typography-font-size-dense);
767
+ font-weight: var(--ids-comp-buttons-label-typography-font-weight-dense);
768
+ letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-dense);
769
+ line-height: var(--ids-comp-buttons-label-typography-line-height-dense);
832
770
  }
833
771
  .ids-button.ids-button-dense *[icon-leading],
834
772
  .ids-button.ids-button-dense *[icon-trailing] {
835
- width: var(--ids-comp-size-buttons-size-icon-dense);
836
- height: var(--ids-comp-size-buttons-size-icon-dense);
773
+ width: var(--ids-comp-buttons-size-icon-dense);
774
+ height: var(--ids-comp-buttons-size-icon-dense);
837
775
  }
838
776
  .ids-button.ids-button-filled.ids-button-primary {
839
- color: var(--ids-comp-buttons-filled-color-fg-label-primary-enabled);
840
- background: var(--ids-comp-buttons-filled-color-bg-primary-enabled);
841
- border-color: var(--ids-comp-buttons-filled-color-border-primary-enabled);
777
+ color: var(--ids-comp-buttons-filled-color-fg-label-primary-default);
778
+ background: var(--ids-comp-buttons-filled-color-bg-primary-default);
779
+ border-color: var(--ids-comp-buttons-filled-color-border-primary-default);
842
780
  }
843
781
  .ids-button.ids-button-filled.ids-button-primary:hover {
844
782
  background: var(--ids-comp-buttons-filled-color-bg-primary-hovered);
@@ -862,9 +800,9 @@
862
800
  border-color: var(--ids-comp-buttons-filled-color-border-primary-disabled);
863
801
  }
864
802
  .ids-button.ids-button-filled.ids-button-secondary {
865
- color: var(--ids-comp-buttons-filled-color-fg-label-secondary-enabled);
866
- background: var(--ids-comp-buttons-filled-color-bg-secondary-enabled);
867
- border-color: var(--ids-comp-buttons-filled-color-border-secondary-enabled);
803
+ color: var(--ids-comp-buttons-filled-color-fg-label-secondary-default);
804
+ background: var(--ids-comp-buttons-filled-color-bg-secondary-default);
805
+ border-color: var(--ids-comp-buttons-filled-color-border-secondary-default);
868
806
  }
869
807
  .ids-button.ids-button-filled.ids-button-secondary:hover {
870
808
  background: var(--ids-comp-buttons-filled-color-bg-secondary-hovered);
@@ -888,9 +826,9 @@
888
826
  border-color: var(--ids-comp-buttons-filled-color-border-secondary-disabled);
889
827
  }
890
828
  .ids-button.ids-button-filled.ids-button-brand {
891
- color: var(--ids-comp-buttons-filled-color-fg-label-brand-enabled);
892
- background: var(--ids-comp-buttons-filled-color-bg-brand-enabled);
893
- border-color: var(--ids-comp-buttons-filled-color-border-brand-enabled);
829
+ color: var(--ids-comp-buttons-filled-color-fg-label-brand-default);
830
+ background: var(--ids-comp-buttons-filled-color-bg-brand-default);
831
+ border-color: var(--ids-comp-buttons-filled-color-border-brand-default);
894
832
  }
895
833
  .ids-button.ids-button-filled.ids-button-brand:hover {
896
834
  background: var(--ids-comp-buttons-filled-color-bg-brand-hovered);
@@ -914,9 +852,9 @@
914
852
  border-color: var(--ids-comp-buttons-filled-color-border-brand-disabled);
915
853
  }
916
854
  .ids-button.ids-button-filled.ids-button-error {
917
- color: var(--ids-comp-buttons-filled-color-fg-label-error-enabled);
918
- background: var(--ids-comp-buttons-filled-color-bg-error-enabled);
919
- border-color: var(--ids-comp-buttons-filled-color-border-error-enabled);
855
+ color: var(--ids-comp-buttons-filled-color-fg-label-error-default);
856
+ background: var(--ids-comp-buttons-filled-color-bg-error-default);
857
+ border-color: var(--ids-comp-buttons-filled-color-border-error-default);
920
858
  }
921
859
  .ids-button.ids-button-filled.ids-button-error:hover {
922
860
  background: var(--ids-comp-buttons-filled-color-bg-error-hovered);
@@ -934,15 +872,10 @@
934
872
  color: var(--ids-comp-buttons-filled-color-fg-label-error-pressed);
935
873
  border-color: var(--ids-comp-buttons-filled-color-border-error-pressed);
936
874
  }
937
- .ids-button.ids-button-filled.ids-button-error:disabled {
938
- background: var(--ids-comp-buttons-filled-color-bg-error-disabled);
939
- color: var(--ids-comp-buttons-filled-color-fg-label-error-disabled);
940
- border-color: var(--ids-comp-buttons-filled-color-border-error-disabled);
941
- }
942
875
  .ids-button.ids-button-filled.ids-button-success {
943
- color: var(--ids-comp-buttons-filled-color-fg-label-success-enabled);
944
- background: var(--ids-comp-buttons-filled-color-bg-success-enabled);
945
- border-color: var(--ids-comp-buttons-filled-color-border-success-enabled);
876
+ color: var(--ids-comp-buttons-filled-color-fg-label-success-default);
877
+ background: var(--ids-comp-buttons-filled-color-bg-success-default);
878
+ border-color: var(--ids-comp-buttons-filled-color-border-success-default);
946
879
  }
947
880
  .ids-button.ids-button-filled.ids-button-success:hover {
948
881
  background: var(--ids-comp-buttons-filled-color-bg-success-hovered);
@@ -960,15 +893,10 @@
960
893
  color: var(--ids-comp-buttons-filled-color-fg-label-success-pressed);
961
894
  border-color: var(--ids-comp-buttons-filled-color-border-success-pressed);
962
895
  }
963
- .ids-button.ids-button-filled.ids-button-success:disabled {
964
- background: var(--ids-comp-buttons-filled-color-bg-success-disabled);
965
- color: var(--ids-comp-buttons-filled-color-fg-label-success-disabled);
966
- border-color: var(--ids-comp-buttons-filled-color-border-success-disabled);
967
- }
968
896
  .ids-button.ids-button-filled.ids-button-warning {
969
- color: var(--ids-comp-buttons-filled-color-fg-label-warning-enabled);
970
- background: var(--ids-comp-buttons-filled-color-bg-warning-enabled);
971
- border-color: var(--ids-comp-buttons-filled-color-border-warning-enabled);
897
+ color: var(--ids-comp-buttons-filled-color-fg-label-warning-default);
898
+ background: var(--ids-comp-buttons-filled-color-bg-warning-default);
899
+ border-color: var(--ids-comp-buttons-filled-color-border-warning-default);
972
900
  }
973
901
  .ids-button.ids-button-filled.ids-button-warning:hover {
974
902
  background: var(--ids-comp-buttons-filled-color-bg-warning-hovered);
@@ -986,15 +914,10 @@
986
914
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-pressed);
987
915
  border-color: var(--ids-comp-buttons-filled-color-border-warning-pressed);
988
916
  }
989
- .ids-button.ids-button-filled.ids-button-warning:disabled {
990
- background: var(--ids-comp-buttons-filled-color-bg-warning-disabled);
991
- color: var(--ids-comp-buttons-filled-color-fg-label-warning-disabled);
992
- border-color: var(--ids-comp-buttons-filled-color-border-warning-disabled);
993
- }
994
917
  .ids-button.ids-button-filled.ids-button-light {
995
- color: var(--ids-comp-buttons-filled-color-fg-label-light-enabled);
996
- background: var(--ids-comp-buttons-filled-color-bg-light-enabled);
997
- border-color: var(--ids-comp-buttons-filled-color-border-light-enabled);
918
+ color: var(--ids-comp-buttons-filled-color-fg-label-light-default);
919
+ background: var(--ids-comp-buttons-filled-color-bg-light-default);
920
+ border-color: var(--ids-comp-buttons-filled-color-border-light-default);
998
921
  }
999
922
  .ids-button.ids-button-filled.ids-button-light:hover {
1000
923
  background: var(--ids-comp-buttons-filled-color-bg-light-hovered);
@@ -1018,9 +941,9 @@
1018
941
  border-color: var(--ids-comp-buttons-filled-color-border-light-disabled);
1019
942
  }
1020
943
  .ids-button.ids-button-filled.ids-button-dark {
1021
- color: var(--ids-comp-buttons-filled-color-fg-label-dark-enabled);
1022
- background: var(--ids-comp-buttons-filled-color-bg-dark-enabled);
1023
- border-color: var(--ids-comp-buttons-filled-color-border-dark-enabled);
944
+ color: var(--ids-comp-buttons-filled-color-fg-label-dark-default);
945
+ background: var(--ids-comp-buttons-filled-color-bg-dark-default);
946
+ border-color: var(--ids-comp-buttons-filled-color-border-dark-default);
1024
947
  }
1025
948
  .ids-button.ids-button-filled.ids-button-dark:hover {
1026
949
  background: var(--ids-comp-buttons-filled-color-bg-dark-hovered);
@@ -1044,9 +967,9 @@
1044
967
  border-color: var(--ids-comp-buttons-filled-color-border-dark-disabled);
1045
968
  }
1046
969
  .ids-button.ids-button-filled.ids-button-surface {
1047
- color: var(--ids-comp-buttons-filled-color-fg-label-surface-enabled);
1048
- background: var(--ids-comp-buttons-filled-color-bg-surface-enabled);
1049
- border-color: var(--ids-comp-buttons-filled-color-border-surface-enabled);
970
+ color: var(--ids-comp-buttons-filled-color-fg-label-surface-default);
971
+ background: var(--ids-comp-buttons-filled-color-bg-surface-default);
972
+ border-color: var(--ids-comp-buttons-filled-color-border-surface-default);
1050
973
  }
1051
974
  .ids-button.ids-button-filled.ids-button-surface:hover {
1052
975
  background: var(--ids-comp-buttons-filled-color-bg-surface-hovered);
@@ -1070,9 +993,9 @@
1070
993
  border-color: var(--ids-comp-buttons-filled-color-border-surface-disabled);
1071
994
  }
1072
995
  .ids-button.ids-button-outlined.ids-button-primary {
1073
- color: var(--ids-comp-buttons-outlined-color-fg-label-primary-enabled);
1074
- background: var(--ids-comp-buttons-outlined-color-bg-primary-enabled);
1075
- border-color: var(--ids-comp-buttons-outlined-color-border-primary-enabled);
996
+ color: var(--ids-comp-buttons-outlined-color-fg-label-primary-default);
997
+ background: var(--ids-comp-buttons-outlined-color-bg-primary-default);
998
+ border-color: var(--ids-comp-buttons-outlined-color-border-primary-default);
1076
999
  }
1077
1000
  .ids-button.ids-button-outlined.ids-button-primary:hover {
1078
1001
  background: var(--ids-comp-buttons-outlined-color-bg-primary-hovered);
@@ -1096,9 +1019,9 @@
1096
1019
  border-color: var(--ids-comp-buttons-outlined-color-border-primary-disabled);
1097
1020
  }
1098
1021
  .ids-button.ids-button-outlined.ids-button-secondary {
1099
- color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-enabled);
1100
- background: var(--ids-comp-buttons-outlined-color-bg-secondary-enabled);
1101
- border-color: var(--ids-comp-buttons-outlined-color-border-secondary-enabled);
1022
+ color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-default);
1023
+ background: var(--ids-comp-buttons-outlined-color-bg-secondary-default);
1024
+ border-color: var(--ids-comp-buttons-outlined-color-border-secondary-default);
1102
1025
  }
1103
1026
  .ids-button.ids-button-outlined.ids-button-secondary:hover {
1104
1027
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-hovered);
@@ -1122,9 +1045,9 @@
1122
1045
  border-color: var(--ids-comp-buttons-outlined-color-border-secondary-disabled);
1123
1046
  }
1124
1047
  .ids-button.ids-button-outlined.ids-button-brand {
1125
- color: var(--ids-comp-buttons-outlined-color-fg-label-brand-enabled);
1126
- background: var(--ids-comp-buttons-outlined-color-bg-brand-enabled);
1127
- border-color: var(--ids-comp-buttons-outlined-color-border-brand-enabled);
1048
+ color: var(--ids-comp-buttons-outlined-color-fg-label-brand-default);
1049
+ background: var(--ids-comp-buttons-outlined-color-bg-brand-default);
1050
+ border-color: var(--ids-comp-buttons-outlined-color-border-brand-default);
1128
1051
  }
1129
1052
  .ids-button.ids-button-outlined.ids-button-brand:hover {
1130
1053
  background: var(--ids-comp-buttons-outlined-color-bg-brand-hovered);
@@ -1148,9 +1071,9 @@
1148
1071
  border-color: var(--ids-comp-buttons-outlined-color-border-brand-disabled);
1149
1072
  }
1150
1073
  .ids-button.ids-button-outlined.ids-button-error {
1151
- color: var(--ids-comp-buttons-outlined-color-fg-label-error-enabled);
1152
- background: var(--ids-comp-buttons-outlined-color-bg-error-enabled);
1153
- border-color: var(--ids-comp-buttons-outlined-color-border-error-enabled);
1074
+ color: var(--ids-comp-buttons-outlined-color-fg-label-error-default);
1075
+ background: var(--ids-comp-buttons-outlined-color-bg-error-default);
1076
+ border-color: var(--ids-comp-buttons-outlined-color-border-error-default);
1154
1077
  }
1155
1078
  .ids-button.ids-button-outlined.ids-button-error:hover {
1156
1079
  background: var(--ids-comp-buttons-outlined-color-bg-error-hovered);
@@ -1168,15 +1091,10 @@
1168
1091
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-pressed);
1169
1092
  border-color: var(--ids-comp-buttons-outlined-color-border-error-pressed);
1170
1093
  }
1171
- .ids-button.ids-button-outlined.ids-button-error:disabled {
1172
- background: var(--ids-comp-buttons-outlined-color-bg-error-disabled);
1173
- color: var(--ids-comp-buttons-outlined-color-fg-label-error-disabled);
1174
- border-color: var(--ids-comp-buttons-outlined-color-border-error-disabled);
1175
- }
1176
1094
  .ids-button.ids-button-outlined.ids-button-success {
1177
- color: var(--ids-comp-buttons-outlined-color-fg-label-success-enabled);
1178
- background: var(--ids-comp-buttons-outlined-color-bg-success-enabled);
1179
- border-color: var(--ids-comp-buttons-outlined-color-border-success-enabled);
1095
+ color: var(--ids-comp-buttons-outlined-color-fg-label-success-default);
1096
+ background: var(--ids-comp-buttons-outlined-color-bg-success-default);
1097
+ border-color: var(--ids-comp-buttons-outlined-color-border-success-default);
1180
1098
  }
1181
1099
  .ids-button.ids-button-outlined.ids-button-success:hover {
1182
1100
  background: var(--ids-comp-buttons-outlined-color-bg-success-hovered);
@@ -1194,15 +1112,10 @@
1194
1112
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-pressed);
1195
1113
  border-color: var(--ids-comp-buttons-outlined-color-border-success-pressed);
1196
1114
  }
1197
- .ids-button.ids-button-outlined.ids-button-success:disabled {
1198
- background: var(--ids-comp-buttons-outlined-color-bg-success-disabled);
1199
- color: var(--ids-comp-buttons-outlined-color-fg-label-success-disabled);
1200
- border-color: var(--ids-comp-buttons-outlined-color-border-success-disabled);
1201
- }
1202
1115
  .ids-button.ids-button-outlined.ids-button-warning {
1203
- color: var(--ids-comp-buttons-outlined-color-fg-label-warning-enabled);
1204
- background: var(--ids-comp-buttons-outlined-color-bg-warning-enabled);
1205
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-enabled);
1116
+ color: var(--ids-comp-buttons-outlined-color-fg-label-warning-default);
1117
+ background: var(--ids-comp-buttons-outlined-color-bg-warning-default);
1118
+ border-color: var(--ids-comp-buttons-outlined-color-border-warning-default);
1206
1119
  }
1207
1120
  .ids-button.ids-button-outlined.ids-button-warning:hover {
1208
1121
  background: var(--ids-comp-buttons-outlined-color-bg-warning-hovered);
@@ -1220,15 +1133,10 @@
1220
1133
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed);
1221
1134
  border-color: var(--ids-comp-buttons-outlined-color-border-warning-pressed);
1222
1135
  }
1223
- .ids-button.ids-button-outlined.ids-button-warning:disabled {
1224
- background: var(--ids-comp-buttons-outlined-color-bg-warning-disabled);
1225
- color: var(--ids-comp-buttons-outlined-color-fg-label-warning-disabled);
1226
- border-color: var(--ids-comp-buttons-outlined-color-border-warning-disabled);
1227
- }
1228
1136
  .ids-button.ids-button-outlined.ids-button-light {
1229
- color: var(--ids-comp-buttons-outlined-color-fg-label-light-enabled);
1230
- background: var(--ids-comp-buttons-outlined-color-bg-light-enabled);
1231
- border-color: var(--ids-comp-buttons-outlined-color-border-light-enabled);
1137
+ color: var(--ids-comp-buttons-outlined-color-fg-label-light-default);
1138
+ background: var(--ids-comp-buttons-outlined-color-bg-light-default);
1139
+ border-color: var(--ids-comp-buttons-outlined-color-border-light-default);
1232
1140
  }
1233
1141
  .ids-button.ids-button-outlined.ids-button-light:hover {
1234
1142
  background: var(--ids-comp-buttons-outlined-color-bg-light-hovered);
@@ -1252,9 +1160,9 @@
1252
1160
  border-color: var(--ids-comp-buttons-outlined-color-border-light-disabled);
1253
1161
  }
1254
1162
  .ids-button.ids-button-outlined.ids-button-dark {
1255
- color: var(--ids-comp-buttons-outlined-color-fg-label-dark-enabled);
1256
- background: var(--ids-comp-buttons-outlined-color-bg-dark-enabled);
1257
- border-color: var(--ids-comp-buttons-outlined-color-border-dark-enabled);
1163
+ color: var(--ids-comp-buttons-outlined-color-fg-label-dark-default);
1164
+ background: var(--ids-comp-buttons-outlined-color-bg-dark-default);
1165
+ border-color: var(--ids-comp-buttons-outlined-color-border-dark-default);
1258
1166
  }
1259
1167
  .ids-button.ids-button-outlined.ids-button-dark:hover {
1260
1168
  background: var(--ids-comp-buttons-outlined-color-bg-dark-hovered);
@@ -1278,9 +1186,9 @@
1278
1186
  border-color: var(--ids-comp-buttons-outlined-color-border-dark-disabled);
1279
1187
  }
1280
1188
  .ids-button.ids-button-outlined.ids-button-surface {
1281
- color: var(--ids-comp-buttons-outlined-color-fg-label-surface-enabled);
1282
- background: var(--ids-comp-buttons-outlined-color-bg-surface-enabled);
1283
- border-color: var(--ids-comp-buttons-outlined-color-border-surface-enabled);
1189
+ color: var(--ids-comp-buttons-outlined-color-fg-label-surface-default);
1190
+ background: var(--ids-comp-buttons-outlined-color-bg-surface-default);
1191
+ border-color: var(--ids-comp-buttons-outlined-color-border-surface-default);
1284
1192
  }
1285
1193
  .ids-button.ids-button-outlined.ids-button-surface:hover {
1286
1194
  background: var(--ids-comp-buttons-outlined-color-bg-surface-hovered);
@@ -1304,9 +1212,9 @@
1304
1212
  border-color: var(--ids-comp-buttons-outlined-color-border-surface-disabled);
1305
1213
  }
1306
1214
  .ids-button.ids-button-text.ids-button-primary {
1307
- color: var(--ids-comp-buttons-text-color-fg-label-primary-enabled);
1308
- background: var(--ids-comp-buttons-text-color-bg-primary-enabled);
1309
- border-color: var(--ids-comp-buttons-text-color-border-primary-enabled);
1215
+ color: var(--ids-comp-buttons-text-color-fg-label-primary-default);
1216
+ background: var(--ids-comp-buttons-text-color-bg-primary-default);
1217
+ border-color: var(--ids-comp-buttons-text-color-border-primary-default);
1310
1218
  }
1311
1219
  .ids-button.ids-button-text.ids-button-primary:hover {
1312
1220
  background: var(--ids-comp-buttons-text-color-bg-primary-hovered);
@@ -1330,9 +1238,9 @@
1330
1238
  border-color: var(--ids-comp-buttons-text-color-border-primary-disabled);
1331
1239
  }
1332
1240
  .ids-button.ids-button-text.ids-button-secondary {
1333
- color: var(--ids-comp-buttons-text-color-fg-label-secondary-enabled);
1334
- background: var(--ids-comp-buttons-text-color-bg-secondary-enabled);
1335
- border-color: var(--ids-comp-buttons-text-color-border-secondary-enabled);
1241
+ color: var(--ids-comp-buttons-text-color-fg-label-secondary-default);
1242
+ background: var(--ids-comp-buttons-text-color-bg-secondary-default);
1243
+ border-color: var(--ids-comp-buttons-text-color-border-secondary-default);
1336
1244
  }
1337
1245
  .ids-button.ids-button-text.ids-button-secondary:hover {
1338
1246
  background: var(--ids-comp-buttons-text-color-bg-secondary-hovered);
@@ -1356,9 +1264,9 @@
1356
1264
  border-color: var(--ids-comp-buttons-text-color-border-secondary-disabled);
1357
1265
  }
1358
1266
  .ids-button.ids-button-text.ids-button-brand {
1359
- color: var(--ids-comp-buttons-text-color-fg-label-brand-enabled);
1360
- background: var(--ids-comp-buttons-text-color-bg-brand-enabled);
1361
- border-color: var(--ids-comp-buttons-text-color-border-brand-enabled);
1267
+ color: var(--ids-comp-buttons-text-color-fg-label-brand-default);
1268
+ background: var(--ids-comp-buttons-text-color-bg-brand-default);
1269
+ border-color: var(--ids-comp-buttons-text-color-border-brand-default);
1362
1270
  }
1363
1271
  .ids-button.ids-button-text.ids-button-brand:hover {
1364
1272
  background: var(--ids-comp-buttons-text-color-bg-brand-hovered);
@@ -1382,9 +1290,9 @@
1382
1290
  border-color: var(--ids-comp-buttons-text-color-border-brand-disabled);
1383
1291
  }
1384
1292
  .ids-button.ids-button-text.ids-button-error {
1385
- color: var(--ids-comp-buttons-text-color-fg-label-error-enabled);
1386
- background: var(--ids-comp-buttons-text-color-bg-error-enabled);
1387
- border-color: var(--ids-comp-buttons-text-color-border-error-enabled);
1293
+ color: var(--ids-comp-buttons-text-color-fg-label-error-default);
1294
+ background: var(--ids-comp-buttons-text-color-bg-error-default);
1295
+ border-color: var(--ids-comp-buttons-text-color-border-error-default);
1388
1296
  }
1389
1297
  .ids-button.ids-button-text.ids-button-error:hover {
1390
1298
  background: var(--ids-comp-buttons-text-color-bg-error-hovered);
@@ -1402,15 +1310,10 @@
1402
1310
  color: var(--ids-comp-buttons-text-color-fg-label-error-pressed);
1403
1311
  border-color: var(--ids-comp-buttons-text-color-border-error-pressed);
1404
1312
  }
1405
- .ids-button.ids-button-text.ids-button-error:disabled {
1406
- background: var(--ids-comp-buttons-text-color-bg-error-disabled);
1407
- color: var(--ids-comp-buttons-text-color-fg-label-error-disabled);
1408
- border-color: var(--ids-comp-buttons-text-color-border-error-disabled);
1409
- }
1410
1313
  .ids-button.ids-button-text.ids-button-success {
1411
- color: var(--ids-comp-buttons-text-color-fg-label-success-enabled);
1412
- background: var(--ids-comp-buttons-text-color-bg-success-enabled);
1413
- border-color: var(--ids-comp-buttons-text-color-border-success-enabled);
1314
+ color: var(--ids-comp-buttons-text-color-fg-label-success-default);
1315
+ background: var(--ids-comp-buttons-text-color-bg-success-default);
1316
+ border-color: var(--ids-comp-buttons-text-color-border-success-default);
1414
1317
  }
1415
1318
  .ids-button.ids-button-text.ids-button-success:hover {
1416
1319
  background: var(--ids-comp-buttons-text-color-bg-success-hovered);
@@ -1428,15 +1331,10 @@
1428
1331
  color: var(--ids-comp-buttons-text-color-fg-label-success-pressed);
1429
1332
  border-color: var(--ids-comp-buttons-text-color-border-success-pressed);
1430
1333
  }
1431
- .ids-button.ids-button-text.ids-button-success:disabled {
1432
- background: var(--ids-comp-buttons-text-color-bg-success-disabled);
1433
- color: var(--ids-comp-buttons-text-color-fg-label-success-disabled);
1434
- border-color: var(--ids-comp-buttons-text-color-border-success-disabled);
1435
- }
1436
1334
  .ids-button.ids-button-text.ids-button-warning {
1437
- color: var(--ids-comp-buttons-text-color-fg-label-warning-enabled);
1438
- background: var(--ids-comp-buttons-text-color-bg-warning-enabled);
1439
- border-color: var(--ids-comp-buttons-text-color-border-warning-enabled);
1335
+ color: var(--ids-comp-buttons-text-color-fg-label-warning-default);
1336
+ background: var(--ids-comp-buttons-text-color-bg-warning-default);
1337
+ border-color: var(--ids-comp-buttons-text-color-border-warning-default);
1440
1338
  }
1441
1339
  .ids-button.ids-button-text.ids-button-warning:hover {
1442
1340
  background: var(--ids-comp-buttons-text-color-bg-warning-hovered);
@@ -1454,15 +1352,10 @@
1454
1352
  color: var(--ids-comp-buttons-text-color-fg-label-warning-pressed);
1455
1353
  border-color: var(--ids-comp-buttons-text-color-border-warning-pressed);
1456
1354
  }
1457
- .ids-button.ids-button-text.ids-button-warning:disabled {
1458
- background: var(--ids-comp-buttons-text-color-bg-warning-disabled);
1459
- color: var(--ids-comp-buttons-text-color-fg-label-warning-disabled);
1460
- border-color: var(--ids-comp-buttons-text-color-border-warning-disabled);
1461
- }
1462
1355
  .ids-button.ids-button-text.ids-button-light {
1463
- color: var(--ids-comp-buttons-text-color-fg-label-light-enabled);
1464
- background: var(--ids-comp-buttons-text-color-bg-light-enabled);
1465
- border-color: var(--ids-comp-buttons-text-color-border-light-enabled);
1356
+ color: var(--ids-comp-buttons-text-color-fg-label-light-default);
1357
+ background: var(--ids-comp-buttons-text-color-bg-light-default);
1358
+ border-color: var(--ids-comp-buttons-text-color-border-light-default);
1466
1359
  }
1467
1360
  .ids-button.ids-button-text.ids-button-light:hover {
1468
1361
  background: var(--ids-comp-buttons-text-color-bg-light-hovered);
@@ -1486,9 +1379,9 @@
1486
1379
  border-color: var(--ids-comp-buttons-text-color-border-light-disabled);
1487
1380
  }
1488
1381
  .ids-button.ids-button-text.ids-button-dark {
1489
- color: var(--ids-comp-buttons-text-color-fg-label-dark-enabled);
1490
- background: var(--ids-comp-buttons-text-color-bg-dark-enabled);
1491
- border-color: var(--ids-comp-buttons-text-color-border-dark-enabled);
1382
+ color: var(--ids-comp-buttons-text-color-fg-label-dark-default);
1383
+ background: var(--ids-comp-buttons-text-color-bg-dark-default);
1384
+ border-color: var(--ids-comp-buttons-text-color-border-dark-default);
1492
1385
  }
1493
1386
  .ids-button.ids-button-text.ids-button-dark:hover {
1494
1387
  background: var(--ids-comp-buttons-text-color-bg-dark-hovered);
@@ -1512,9 +1405,9 @@
1512
1405
  border-color: var(--ids-comp-buttons-text-color-border-dark-disabled);
1513
1406
  }
1514
1407
  .ids-button.ids-button-text.ids-button-surface {
1515
- color: var(--ids-comp-buttons-text-color-fg-label-surface-enabled);
1516
- background: var(--ids-comp-buttons-text-color-bg-surface-enabled);
1517
- border-color: var(--ids-comp-buttons-text-color-border-surface-enabled);
1408
+ color: var(--ids-comp-buttons-text-color-fg-label-surface-default);
1409
+ background: var(--ids-comp-buttons-text-color-bg-surface-default);
1410
+ border-color: var(--ids-comp-buttons-text-color-border-surface-default);
1518
1411
  }
1519
1412
  .ids-button.ids-button-text.ids-button-surface:hover {
1520
1413
  background: var(--ids-comp-buttons-text-color-bg-surface-hovered);
@@ -1538,9 +1431,565 @@
1538
1431
  border-color: var(--ids-comp-buttons-text-color-border-surface-disabled);
1539
1432
  }
1540
1433
 
1434
+ .ids-checkbox {
1435
+ display: inline-flex;
1436
+ align-self: stretch;
1437
+ align-items: flex-start;
1438
+ }
1439
+ .ids-checkbox .ids-checkbox__input-wrapper {
1440
+ position: relative;
1441
+ display: flex;
1442
+ align-items: center;
1443
+ justify-content: center;
1444
+ }
1445
+ .ids-checkbox .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
1446
+ position: absolute;
1447
+ z-index: 1;
1448
+ }
1449
+ .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox] {
1450
+ appearance: none;
1451
+ -webkit-appearance: none;
1452
+ flex-shrink: 0;
1453
+ border-style: solid;
1454
+ }
1455
+ .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus {
1456
+ outline-offset: 3px;
1457
+ outline-style: solid;
1458
+ }
1459
+ .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
1460
+ position: absolute;
1461
+ }
1462
+ .ids-checkbox .ids-checkbox__label-wrapper {
1463
+ display: flex;
1464
+ flex-direction: column;
1465
+ align-items: flex-start;
1466
+ flex: 1 0 0;
1467
+ }
1468
+ .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container {
1469
+ text-align: start;
1470
+ }
1471
+ .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1472
+ font-style: normal;
1473
+ }
1474
+ .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__message-container {
1475
+ width: 100%;
1476
+ }
1477
+ .ids-checkbox.ids-checkbox-compact {
1478
+ padding: var(--ids-comp-checkbox-container-size-padding-y-compact) var(--ids-comp-checkbox-container-size-padding-x-compact);
1479
+ gap: var(--ids-comp-checkbox-container-size-gap-compact);
1480
+ }
1481
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
1482
+ top: calc((var(--ids-comp-checkbox-input-size-height-compact) - var(--ids-comp-checkbox-input-size-touchtarget-height-compact)) / 2);
1483
+ left: calc((var(--ids-comp-checkbox-input-size-width-compact) - var(--ids-comp-checkbox-input-size-touchtarget-width-compact)) / 2);
1484
+ height: var(--ids-comp-checkbox-input-size-touchtarget-height-compact);
1485
+ width: var(--ids-comp-checkbox-input-size-touchtarget-width-compact);
1486
+ }
1487
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox] {
1488
+ width: var(--ids-comp-checkbox-input-size-width-compact);
1489
+ height: var(--ids-comp-checkbox-input-size-height-compact);
1490
+ border-radius: var(--ids-comp-checkbox-input-size-border-radius-compact);
1491
+ border-width: var(--ids-comp-checkbox-input-size-border-width-compact);
1492
+ }
1493
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus {
1494
+ outline-width: var(--ids-comp-checkbox-focused-outline-outline-compact);
1495
+ }
1496
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon {
1497
+ height: var(--ids-comp-checkbox-input-size-icon-compact);
1498
+ width: var(--ids-comp-checkbox-input-size-icon-compact);
1499
+ }
1500
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper {
1501
+ padding: var(--ids-comp-checkbox-label-group-size-padding-y-compact) var(--ids-comp-checkbox-label-group-size-padding-x-compact);
1502
+ gap: var(--ids-comp-checkbox-label-group-size-gap-compact);
1503
+ }
1504
+ .ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper .ids-checkbox__label-container {
1505
+ font-family: var(--ids-comp-checkbox-label-typography-font-family-compact);
1506
+ font-weight: var(--ids-comp-checkbox-label-typography-font-weight-compact);
1507
+ letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-compact);
1508
+ font-size: var(--ids-comp-checkbox-label-typography-font-size-compact);
1509
+ line-height: var(--ids-comp-checkbox-label-typography-line-height-compact);
1510
+ }
1511
+ .ids-checkbox.ids-checkbox-comfortable {
1512
+ padding: var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable);
1513
+ gap: var(--ids-comp-checkbox-container-size-gap-comfortable);
1514
+ }
1515
+ .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
1516
+ top: calc((var(--ids-comp-checkbox-input-size-height-comfortable) - var(--ids-comp-checkbox-input-size-touchtarget-height-comfortable)) / 2);
1517
+ left: calc((var(--ids-comp-checkbox-input-size-width-comfortable) - var(--ids-comp-checkbox-input-size-touchtarget-width-comfortable)) / 2);
1518
+ height: var(--ids-comp-checkbox-input-size-touchtarget-height-comfortable);
1519
+ width: var(--ids-comp-checkbox-input-size-touchtarget-width-comfortable);
1520
+ }
1521
+ .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox] {
1522
+ width: var(--ids-comp-checkbox-input-size-width-comfortable);
1523
+ height: var(--ids-comp-checkbox-input-size-height-comfortable);
1524
+ border-radius: var(--ids-comp-checkbox-input-size-border-radius-comfortable);
1525
+ border-width: var(--ids-comp-checkbox-input-size-border-width-comfortable);
1526
+ }
1527
+ .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus {
1528
+ outline-width: var(--ids-comp-checkbox-focused-outline-outline-comfortable);
1529
+ }
1530
+ .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon {
1531
+ height: var(--ids-comp-checkbox-input-size-icon-comfortable);
1532
+ width: var(--ids-comp-checkbox-input-size-icon-comfortable);
1533
+ }
1534
+ .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper {
1535
+ padding: var(--ids-comp-checkbox-label-group-size-padding-y-comfortable) var(--ids-comp-checkbox-label-group-size-padding-x-comfortable);
1536
+ gap: var(--ids-comp-checkbox-label-group-size-gap-comfortable);
1537
+ }
1538
+ .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper .ids-checkbox__label-container {
1539
+ font-family: var(--ids-comp-checkbox-label-typography-font-family-comfortable);
1540
+ font-weight: var(--ids-comp-checkbox-label-typography-font-weight-comfortable);
1541
+ letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-comfortable);
1542
+ font-size: var(--ids-comp-checkbox-label-typography-font-size-comfortable);
1543
+ line-height: var(--ids-comp-checkbox-label-typography-line-height-comfortable);
1544
+ }
1545
+ .ids-checkbox.ids-checkbox-spacious {
1546
+ padding: var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious);
1547
+ gap: var(--ids-comp-checkbox-container-size-gap-spacious);
1548
+ }
1549
+ .ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
1550
+ top: calc((var(--ids-comp-checkbox-input-size-height-spacious) - var(--ids-comp-checkbox-input-size-touchtarget-height-spacious)) / 2);
1551
+ left: calc((var(--ids-comp-checkbox-input-size-width-spacious) - var(--ids-comp-checkbox-input-size-touchtarget-width-spacious)) / 2);
1552
+ height: var(--ids-comp-checkbox-input-size-touchtarget-height-spacious);
1553
+ width: var(--ids-comp-checkbox-input-size-touchtarget-width-spacious);
1554
+ }
1555
+ .ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox] {
1556
+ width: var(--ids-comp-checkbox-input-size-width-spacious);
1557
+ height: var(--ids-comp-checkbox-input-size-height-spacious);
1558
+ border-radius: var(--ids-comp-checkbox-input-size-border-radius-spacious);
1559
+ border-width: var(--ids-comp-checkbox-input-size-border-width-spacious);
1560
+ }
1561
+ .ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus {
1562
+ outline-width: var(--ids-comp-checkbox-focused-outline-outline-spacious);
1563
+ }
1564
+ .ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon {
1565
+ height: var(--ids-comp-checkbox-input-size-icon-spacious);
1566
+ width: var(--ids-comp-checkbox-input-size-icon-spacious);
1567
+ }
1568
+ .ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper {
1569
+ padding: var(--ids-comp-checkbox-label-group-size-padding-y-spacious) var(--ids-comp-checkbox-label-group-size-padding-x-spacious);
1570
+ gap: var(--ids-comp-checkbox-label-group-size-gap-spacious);
1571
+ }
1572
+ .ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper .ids-checkbox__label-container {
1573
+ font-family: var(--ids-comp-checkbox-label-typography-font-family-spacious);
1574
+ font-weight: var(--ids-comp-checkbox-label-typography-font-weight-spacious);
1575
+ letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-spacious);
1576
+ font-size: var(--ids-comp-checkbox-label-typography-font-size-spacious);
1577
+ line-height: var(--ids-comp-checkbox-label-typography-line-height-spacious);
1578
+ }
1579
+ .ids-checkbox.ids-checkbox-dense {
1580
+ padding: var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense);
1581
+ gap: var(--ids-comp-checkbox-container-size-gap-dense);
1582
+ }
1583
+ .ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
1584
+ top: calc((var(--ids-comp-checkbox-input-size-height-dense) - var(--ids-comp-checkbox-input-size-touchtarget-height-dense)) / 2);
1585
+ left: calc((var(--ids-comp-checkbox-input-size-width-dense) - var(--ids-comp-checkbox-input-size-touchtarget-width-dense)) / 2);
1586
+ height: var(--ids-comp-checkbox-input-size-touchtarget-height-dense);
1587
+ width: var(--ids-comp-checkbox-input-size-touchtarget-width-dense);
1588
+ }
1589
+ .ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox] {
1590
+ width: var(--ids-comp-checkbox-input-size-width-dense);
1591
+ height: var(--ids-comp-checkbox-input-size-height-dense);
1592
+ border-radius: var(--ids-comp-checkbox-input-size-border-radius-dense);
1593
+ border-width: var(--ids-comp-checkbox-input-size-border-width-dense);
1594
+ }
1595
+ .ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus {
1596
+ outline-width: var(--ids-comp-checkbox-focused-outline-outline-dense);
1597
+ }
1598
+ .ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon {
1599
+ height: var(--ids-comp-checkbox-input-size-icon-dense);
1600
+ width: var(--ids-comp-checkbox-input-size-icon-dense);
1601
+ }
1602
+ .ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper {
1603
+ padding: var(--ids-comp-checkbox-label-group-size-padding-y-dense) var(--ids-comp-checkbox-label-group-size-padding-x-dense);
1604
+ gap: var(--ids-comp-checkbox-label-group-size-gap-dense);
1605
+ }
1606
+ .ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper .ids-checkbox__label-container {
1607
+ font-family: var(--ids-comp-checkbox-label-typography-font-family-dense);
1608
+ font-weight: var(--ids-comp-checkbox-label-typography-font-weight-dense);
1609
+ letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-dense);
1610
+ font-size: var(--ids-comp-checkbox-label-typography-font-size-dense);
1611
+ line-height: var(--ids-comp-checkbox-label-typography-line-height-dense);
1612
+ }
1613
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
1614
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-default);
1615
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
1616
+ }
1617
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
1618
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
1619
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
1620
+ }
1621
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
1622
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
1623
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
1624
+ }
1625
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
1626
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-focused);
1627
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
1628
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
1629
+ }
1630
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
1631
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-disabled);
1632
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled);
1633
+ }
1634
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
1635
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-default);
1636
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
1637
+ }
1638
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
1639
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
1640
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
1641
+ }
1642
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
1643
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
1644
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
1645
+ }
1646
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
1647
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-focused);
1648
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
1649
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
1650
+ }
1651
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
1652
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-disabled);
1653
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-disabled);
1654
+ }
1655
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
1656
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default);
1657
+ }
1658
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
1659
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
1660
+ }
1661
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
1662
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
1663
+ }
1664
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon {
1665
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused);
1666
+ }
1667
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
1668
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled);
1669
+ }
1670
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1671
+ color: var(--ids-comp-checkbox-label-color-fg-light-default);
1672
+ }
1673
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover {
1674
+ color: var(--ids-comp-checkbox-label-color-fg-light-hovered);
1675
+ }
1676
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active {
1677
+ color: var(--ids-comp-checkbox-label-color-fg-light-pressed);
1678
+ }
1679
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus {
1680
+ color: var(--ids-comp-checkbox-label-color-fg-light-focused);
1681
+ }
1682
+ .ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1683
+ color: var(--ids-comp-checkbox-label-color-fg-light-disabled);
1684
+ }
1685
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
1686
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-default);
1687
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
1688
+ }
1689
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
1690
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
1691
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
1692
+ }
1693
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
1694
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
1695
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
1696
+ }
1697
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
1698
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-focused);
1699
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
1700
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
1701
+ }
1702
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
1703
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled);
1704
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled);
1705
+ }
1706
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
1707
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-default);
1708
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
1709
+ }
1710
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
1711
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
1712
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
1713
+ }
1714
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
1715
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
1716
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
1717
+ }
1718
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
1719
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-focused);
1720
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
1721
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
1722
+ }
1723
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
1724
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-disabled);
1725
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled);
1726
+ }
1727
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
1728
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default);
1729
+ }
1730
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
1731
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
1732
+ }
1733
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
1734
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
1735
+ }
1736
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon {
1737
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused);
1738
+ }
1739
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
1740
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled);
1741
+ }
1742
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1743
+ color: var(--ids-comp-checkbox-label-color-fg-dark-default);
1744
+ }
1745
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover {
1746
+ color: var(--ids-comp-checkbox-label-color-fg-dark-hovered);
1747
+ }
1748
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active {
1749
+ color: var(--ids-comp-checkbox-label-color-fg-dark-pressed);
1750
+ }
1751
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus {
1752
+ color: var(--ids-comp-checkbox-label-color-fg-dark-focused);
1753
+ }
1754
+ .ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1755
+ color: var(--ids-comp-checkbox-label-color-fg-dark-disabled);
1756
+ }
1757
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
1758
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-default);
1759
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
1760
+ }
1761
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
1762
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
1763
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
1764
+ }
1765
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
1766
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
1767
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
1768
+ }
1769
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
1770
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-focused);
1771
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
1772
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
1773
+ }
1774
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
1775
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled);
1776
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled);
1777
+ }
1778
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
1779
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-default);
1780
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
1781
+ }
1782
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
1783
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
1784
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
1785
+ }
1786
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
1787
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
1788
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
1789
+ }
1790
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
1791
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-focused);
1792
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
1793
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
1794
+ }
1795
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
1796
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-disabled);
1797
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled);
1798
+ }
1799
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
1800
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default);
1801
+ }
1802
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
1803
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
1804
+ }
1805
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
1806
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
1807
+ }
1808
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon {
1809
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused);
1810
+ }
1811
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
1812
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled);
1813
+ }
1814
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1815
+ color: var(--ids-comp-checkbox-label-color-fg-surface-default);
1816
+ }
1817
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover {
1818
+ color: var(--ids-comp-checkbox-label-color-fg-surface-hovered);
1819
+ }
1820
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active {
1821
+ color: var(--ids-comp-checkbox-label-color-fg-surface-pressed);
1822
+ }
1823
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus {
1824
+ color: var(--ids-comp-checkbox-label-color-fg-surface-focused);
1825
+ }
1826
+ .ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1827
+ color: var(--ids-comp-checkbox-label-color-fg-surface-disabled);
1828
+ }
1829
+ .ids-checkbox.ids-checkbox-disabled {
1830
+ opacity: var(--ids-comp-checkbox-disabled);
1831
+ }
1832
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
1833
+ cursor: not-allowed;
1834
+ }
1835
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox] {
1836
+ cursor: not-allowed;
1837
+ }
1838
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
1839
+ cursor: not-allowed;
1840
+ }
1841
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1842
+ cursor: not-allowed;
1843
+ }
1844
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
1845
+ cursor: pointer;
1846
+ }
1847
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox] {
1848
+ cursor: pointer;
1849
+ }
1850
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
1851
+ cursor: pointer;
1852
+ }
1853
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
1854
+ cursor: pointer;
1855
+ }
1856
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
1857
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);
1858
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
1859
+ }
1860
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
1861
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);
1862
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
1863
+ }
1864
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
1865
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);
1866
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
1867
+ }
1868
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
1869
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);
1870
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
1871
+ }
1872
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
1873
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-default);
1874
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
1875
+ }
1876
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
1877
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);
1878
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
1879
+ }
1880
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
1881
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);
1882
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
1883
+ }
1884
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
1885
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);
1886
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
1887
+ }
1888
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
1889
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default);
1890
+ }
1891
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
1892
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered);
1893
+ }
1894
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
1895
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed);
1896
+ }
1897
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon {
1898
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused);
1899
+ }
1900
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
1901
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);
1902
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
1903
+ }
1904
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
1905
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);
1906
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
1907
+ }
1908
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
1909
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);
1910
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
1911
+ }
1912
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
1913
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);
1914
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
1915
+ }
1916
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
1917
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);
1918
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
1919
+ }
1920
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
1921
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);
1922
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
1923
+ }
1924
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
1925
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);
1926
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
1927
+ }
1928
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
1929
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);
1930
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
1931
+ }
1932
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
1933
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default);
1934
+ }
1935
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
1936
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered);
1937
+ }
1938
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
1939
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed);
1940
+ }
1941
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon {
1942
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused);
1943
+ }
1944
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
1945
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);
1946
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
1947
+ }
1948
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
1949
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);
1950
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
1951
+ }
1952
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
1953
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);
1954
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
1955
+ }
1956
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
1957
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);
1958
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
1959
+ }
1960
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
1961
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);
1962
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
1963
+ }
1964
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
1965
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);
1966
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
1967
+ }
1968
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
1969
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);
1970
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
1971
+ }
1972
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
1973
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);
1974
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
1975
+ }
1976
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
1977
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default);
1978
+ }
1979
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
1980
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered);
1981
+ }
1982
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
1983
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed);
1984
+ }
1985
+ .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon {
1986
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
1987
+ }
1988
+
1541
1989
  .ids-card {
1542
1990
  display: flex;
1543
1991
  border-style: solid;
1992
+ box-sizing: border-box;
1544
1993
  }
1545
1994
  .ids-card.ids-card-clickable {
1546
1995
  pointer-events: auto;
@@ -1617,180 +2066,180 @@
1617
2066
  box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-sm) var(--ids-smc-reference-container-effects-shadow-blur-md) var(--ids-smc-reference-container-effects-shadow-spread-xxl) var(--ids-smc-reference-container-effects-shadow-color-dark-light), var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xs) var(--ids-smc-reference-container-effects-shadow-blur-sm) var(--ids-smc-reference-container-effects-shadow-spread-xl) var(--ids-smc-reference-container-effects-shadow-color-dark-light);
1618
2067
  }
1619
2068
  .ids-card.ids-card-compact.ids-card-horizontal {
1620
- padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-compact) var(--ids-comp-size-card-container-horizontal-size-padding-x-compact);
1621
- gap: var(--ids-comp-size-card-container-horizontal-size-gap-compact);
1622
- border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-compact);
2069
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-compact) var(--ids-comp-card-container-horizontal-size-padding-x-compact);
2070
+ gap: var(--ids-comp-card-container-horizontal-size-gap-compact);
2071
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-compact);
1623
2072
  }
1624
2073
  .ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined {
1625
- border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-compact);
2074
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-compact);
1626
2075
  }
1627
2076
  .ids-card.ids-card-compact.ids-card-vertical {
1628
- padding: var(--ids-comp-size-card-container-vertical-size-padding-y-compact) var(--ids-comp-size-card-container-vertical-size-padding-x-compact);
1629
- gap: var(--ids-comp-size-card-container-vertical-size-gap-compact);
1630
- border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-compact);
2077
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-compact) var(--ids-comp-card-container-vertical-size-padding-x-compact);
2078
+ gap: var(--ids-comp-card-container-vertical-size-gap-compact);
2079
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-compact);
1631
2080
  }
1632
2081
  .ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined {
1633
- border-width: var(--ids-comp-size-card-container-vertical-size-border-width-compact);
2082
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-compact);
1634
2083
  }
1635
2084
  .ids-card.ids-card-compact.ids-card-clickable:focus {
1636
- outline-width: var(--ids-comp-size-card-focused-outline-outline-compact);
2085
+ outline-width: var(--ids-comp-card-focused-outline-outline-compact);
1637
2086
  }
1638
2087
  .ids-card.ids-card-compact .ids-card-header-headline {
1639
- gap: var(--ids-comp-size-card-header-headline-gap-compact);
1640
- padding: var(--ids-comp-size-card-header-headline-padding-y-compact) var(--ids-comp-size-card-header-headline-padding-x-compact);
2088
+ gap: var(--ids-comp-card-header-headline-gap-compact);
2089
+ padding: var(--ids-comp-card-header-headline-padding-y-compact) var(--ids-comp-card-header-headline-padding-x-compact);
1641
2090
  }
1642
2091
  .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
1643
- padding-top: var(--ids-comp-size-card-slot-size-padding-top-compact);
2092
+ padding-top: var(--ids-comp-card-slot-size-padding-top-compact);
1644
2093
  }
1645
2094
  .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
1646
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-compact);
2095
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-compact);
1647
2096
  }
1648
2097
  .ids-card.ids-card-compact.ids-card-vertical .ids-card-section.ids-card-section-padded {
1649
- padding-left: var(--ids-comp-size-card-slot-size-padding-x-compact);
1650
- padding-right: var(--ids-comp-size-card-slot-size-padding-x-compact);
2098
+ padding-left: var(--ids-comp-card-slot-size-padding-x-compact);
2099
+ padding-right: var(--ids-comp-card-slot-size-padding-x-compact);
1651
2100
  }
1652
2101
  .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
1653
- padding-left: var(--ids-comp-size-card-slot-size-padding-top-compact);
2102
+ padding-left: var(--ids-comp-card-slot-size-padding-top-compact);
1654
2103
  }
1655
2104
  .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
1656
- padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-compact);
2105
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-compact);
1657
2106
  }
1658
2107
  .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section.ids-card-section-padded {
1659
- padding-top: var(--ids-comp-size-card-slot-size-padding-x-compact);
1660
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-compact);
2108
+ padding-top: var(--ids-comp-card-slot-size-padding-x-compact);
2109
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-compact);
1661
2110
  }
1662
2111
  .ids-card.ids-card-comfortable.ids-card-horizontal {
1663
- padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-size-card-container-horizontal-size-padding-x-comfortable);
1664
- gap: var(--ids-comp-size-card-container-horizontal-size-gap-comfortable);
1665
- border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-comfortable);
2112
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-card-container-horizontal-size-padding-x-comfortable);
2113
+ gap: var(--ids-comp-card-container-horizontal-size-gap-comfortable);
2114
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-comfortable);
1666
2115
  }
1667
2116
  .ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined {
1668
- border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-comfortable);
2117
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-comfortable);
1669
2118
  }
1670
2119
  .ids-card.ids-card-comfortable.ids-card-vertical {
1671
- padding: var(--ids-comp-size-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-size-card-container-vertical-size-padding-x-comfortable);
1672
- gap: var(--ids-comp-size-card-container-vertical-size-gap-comfortable);
1673
- border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-comfortable);
2120
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-card-container-vertical-size-padding-x-comfortable);
2121
+ gap: var(--ids-comp-card-container-vertical-size-gap-comfortable);
2122
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-comfortable);
1674
2123
  }
1675
2124
  .ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined {
1676
- border-width: var(--ids-comp-size-card-container-vertical-size-border-width-comfortable);
2125
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-comfortable);
1677
2126
  }
1678
2127
  .ids-card.ids-card-comfortable.ids-card-clickable:focus {
1679
- outline-width: var(--ids-comp-size-card-focused-outline-outline-comfortable);
2128
+ outline-width: var(--ids-comp-card-focused-outline-outline-comfortable);
1680
2129
  }
1681
2130
  .ids-card.ids-card-comfortable .ids-card-header-headline {
1682
- gap: var(--ids-comp-size-card-header-headline-gap-comfortable);
1683
- padding: var(--ids-comp-size-card-header-headline-padding-y-comfortable) var(--ids-comp-size-card-header-headline-padding-x-comfortable);
2131
+ gap: var(--ids-comp-card-header-headline-gap-comfortable);
2132
+ padding: var(--ids-comp-card-header-headline-padding-y-comfortable) var(--ids-comp-card-header-headline-padding-x-comfortable);
1684
2133
  }
1685
2134
  .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
1686
- padding-top: var(--ids-comp-size-card-slot-size-padding-top-comfortable);
2135
+ padding-top: var(--ids-comp-card-slot-size-padding-top-comfortable);
1687
2136
  }
1688
2137
  .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
1689
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-comfortable);
2138
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-comfortable);
1690
2139
  }
1691
2140
  .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section.ids-card-section-padded {
1692
- padding-left: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
1693
- padding-right: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
2141
+ padding-left: var(--ids-comp-card-slot-size-padding-x-comfortable);
2142
+ padding-right: var(--ids-comp-card-slot-size-padding-x-comfortable);
1694
2143
  }
1695
2144
  .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
1696
- padding-left: var(--ids-comp-size-card-slot-size-padding-top-comfortable);
2145
+ padding-left: var(--ids-comp-card-slot-size-padding-top-comfortable);
1697
2146
  }
1698
2147
  .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
1699
- padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-comfortable);
2148
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-comfortable);
1700
2149
  }
1701
2150
  .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section.ids-card-section-padded {
1702
- padding-top: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
1703
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
2151
+ padding-top: var(--ids-comp-card-slot-size-padding-x-comfortable);
2152
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-comfortable);
1704
2153
  }
1705
2154
  .ids-card.ids-card-spacious.ids-card-horizontal {
1706
- padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-size-card-container-horizontal-size-padding-x-spacious);
1707
- gap: var(--ids-comp-size-card-container-horizontal-size-gap-spacious);
1708
- border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-spacious);
2155
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-card-container-horizontal-size-padding-x-spacious);
2156
+ gap: var(--ids-comp-card-container-horizontal-size-gap-spacious);
2157
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-spacious);
1709
2158
  }
1710
2159
  .ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined {
1711
- border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-spacious);
2160
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-spacious);
1712
2161
  }
1713
2162
  .ids-card.ids-card-spacious.ids-card-vertical {
1714
- padding: var(--ids-comp-size-card-container-vertical-size-padding-y-spacious) var(--ids-comp-size-card-container-vertical-size-padding-x-spacious);
1715
- gap: var(--ids-comp-size-card-container-vertical-size-gap-spacious);
1716
- border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-spacious);
2163
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-spacious) var(--ids-comp-card-container-vertical-size-padding-x-spacious);
2164
+ gap: var(--ids-comp-card-container-vertical-size-gap-spacious);
2165
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-spacious);
1717
2166
  }
1718
2167
  .ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined {
1719
- border-width: var(--ids-comp-size-card-container-vertical-size-border-width-spacious);
2168
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-spacious);
1720
2169
  }
1721
2170
  .ids-card.ids-card-spacious.ids-card-clickable:focus {
1722
- outline-width: var(--ids-comp-size-card-focused-outline-outline-spacious);
2171
+ outline-width: var(--ids-comp-card-focused-outline-outline-spacious);
1723
2172
  }
1724
2173
  .ids-card.ids-card-spacious .ids-card-header-headline {
1725
- gap: var(--ids-comp-size-card-header-headline-gap-spacious);
1726
- padding: var(--ids-comp-size-card-header-headline-padding-y-spacious) var(--ids-comp-size-card-header-headline-padding-x-spacious);
2174
+ gap: var(--ids-comp-card-header-headline-gap-spacious);
2175
+ padding: var(--ids-comp-card-header-headline-padding-y-spacious) var(--ids-comp-card-header-headline-padding-x-spacious);
1727
2176
  }
1728
2177
  .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
1729
- padding-top: var(--ids-comp-size-card-slot-size-padding-top-spacious);
2178
+ padding-top: var(--ids-comp-card-slot-size-padding-top-spacious);
1730
2179
  }
1731
2180
  .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
1732
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-spacious);
2181
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-spacious);
1733
2182
  }
1734
2183
  .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section.ids-card-section-padded {
1735
- padding-left: var(--ids-comp-size-card-slot-size-padding-x-spacious);
1736
- padding-right: var(--ids-comp-size-card-slot-size-padding-x-spacious);
2184
+ padding-left: var(--ids-comp-card-slot-size-padding-x-spacious);
2185
+ padding-right: var(--ids-comp-card-slot-size-padding-x-spacious);
1737
2186
  }
1738
2187
  .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
1739
- padding-left: var(--ids-comp-size-card-slot-size-padding-top-spacious);
2188
+ padding-left: var(--ids-comp-card-slot-size-padding-top-spacious);
1740
2189
  }
1741
2190
  .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
1742
- padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-spacious);
2191
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-spacious);
1743
2192
  }
1744
2193
  .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section.ids-card-section-padded {
1745
- padding-top: var(--ids-comp-size-card-slot-size-padding-x-spacious);
1746
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-spacious);
2194
+ padding-top: var(--ids-comp-card-slot-size-padding-x-spacious);
2195
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-spacious);
1747
2196
  }
1748
2197
  .ids-card.ids-card-dense.ids-card-horizontal {
1749
- padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-dense) var(--ids-comp-size-card-container-horizontal-size-padding-x-dense);
1750
- gap: var(--ids-comp-size-card-container-horizontal-size-gap-dense);
1751
- border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-dense);
2198
+ padding: var(--ids-comp-card-container-horizontal-size-padding-y-dense) var(--ids-comp-card-container-horizontal-size-padding-x-dense);
2199
+ gap: var(--ids-comp-card-container-horizontal-size-gap-dense);
2200
+ border-radius: var(--ids-comp-card-container-horizontal-size-border-radius-dense);
1752
2201
  }
1753
2202
  .ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined {
1754
- border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-dense);
2203
+ border-width: var(--ids-comp-card-container-horizontal-size-border-width-dense);
1755
2204
  }
1756
2205
  .ids-card.ids-card-dense.ids-card-vertical {
1757
- padding: var(--ids-comp-size-card-container-vertical-size-padding-y-dense) var(--ids-comp-size-card-container-vertical-size-padding-x-dense);
1758
- gap: var(--ids-comp-size-card-container-vertical-size-gap-dense);
1759
- border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-dense);
2206
+ padding: var(--ids-comp-card-container-vertical-size-padding-y-dense) var(--ids-comp-card-container-vertical-size-padding-x-dense);
2207
+ gap: var(--ids-comp-card-container-vertical-size-gap-dense);
2208
+ border-radius: var(--ids-comp-card-container-vertical-size-border-radius-dense);
1760
2209
  }
1761
2210
  .ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined {
1762
- border-width: var(--ids-comp-size-card-container-vertical-size-border-width-dense);
2211
+ border-width: var(--ids-comp-card-container-vertical-size-border-width-dense);
1763
2212
  }
1764
2213
  .ids-card.ids-card-dense.ids-card-clickable:focus {
1765
- outline-width: var(--ids-comp-size-card-focused-outline-outline-dense);
2214
+ outline-width: var(--ids-comp-card-focused-outline-outline-dense);
1766
2215
  }
1767
2216
  .ids-card.ids-card-dense .ids-card-header-headline {
1768
- gap: var(--ids-comp-size-card-header-headline-gap-dense);
1769
- padding: var(--ids-comp-size-card-header-headline-padding-y-dense) var(--ids-comp-size-card-header-headline-padding-x-dense);
2217
+ gap: var(--ids-comp-card-header-headline-gap-dense);
2218
+ padding: var(--ids-comp-card-header-headline-padding-y-dense) var(--ids-comp-card-header-headline-padding-x-dense);
1770
2219
  }
1771
2220
  .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
1772
- padding-top: var(--ids-comp-size-card-slot-size-padding-top-dense);
2221
+ padding-top: var(--ids-comp-card-slot-size-padding-top-dense);
1773
2222
  }
1774
2223
  .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
1775
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-dense);
2224
+ padding-bottom: var(--ids-comp-card-slot-size-padding-bottom-dense);
1776
2225
  }
1777
2226
  .ids-card.ids-card-dense.ids-card-vertical .ids-card-section.ids-card-section-padded {
1778
- padding-left: var(--ids-comp-size-card-slot-size-padding-x-dense);
1779
- padding-right: var(--ids-comp-size-card-slot-size-padding-x-dense);
2227
+ padding-left: var(--ids-comp-card-slot-size-padding-x-dense);
2228
+ padding-right: var(--ids-comp-card-slot-size-padding-x-dense);
1780
2229
  }
1781
2230
  .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
1782
- padding-left: var(--ids-comp-size-card-slot-size-padding-top-dense);
2231
+ padding-left: var(--ids-comp-card-slot-size-padding-top-dense);
1783
2232
  }
1784
2233
  .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
1785
- padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-dense);
2234
+ padding-right: var(--ids-comp-card-slot-size-padding-bottom-dense);
1786
2235
  }
1787
2236
  .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section.ids-card-section-padded {
1788
- padding-top: var(--ids-comp-size-card-slot-size-padding-x-dense);
1789
- padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-dense);
2237
+ padding-top: var(--ids-comp-card-slot-size-padding-x-dense);
2238
+ padding-bottom: var(--ids-comp-card-slot-size-padding-x-dense);
1790
2239
  }
1791
2240
  .ids-card.ids-card-filled.ids-card-primary {
1792
- background-color: var(--ids-comp-card-filled-color-bg-primary-enabled);
1793
- border-color: var(--ids-comp-card-filled-color-border-primary-enabled);
2241
+ background-color: var(--ids-comp-card-filled-color-bg-primary-default);
2242
+ border-color: var(--ids-comp-card-filled-color-border-primary-default);
1794
2243
  }
1795
2244
  .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:hover {
1796
2245
  background-color: var(--ids-comp-card-filled-color-bg-primary-hovered);
@@ -1809,8 +2258,8 @@
1809
2258
  border-color: var(--ids-comp-card-filled-color-border-primary-disabled);
1810
2259
  }
1811
2260
  .ids-card.ids-card-filled.ids-card-secondary {
1812
- background-color: var(--ids-comp-card-filled-color-bg-secondary-enabled);
1813
- border-color: var(--ids-comp-card-filled-color-border-secondary-enabled);
2261
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-default);
2262
+ border-color: var(--ids-comp-card-filled-color-border-secondary-default);
1814
2263
  }
1815
2264
  .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:hover {
1816
2265
  background-color: var(--ids-comp-card-filled-color-bg-secondary-hovered);
@@ -1829,8 +2278,8 @@
1829
2278
  border-color: var(--ids-comp-card-filled-color-border-secondary-disabled);
1830
2279
  }
1831
2280
  .ids-card.ids-card-filled.ids-card-brand {
1832
- background-color: var(--ids-comp-card-filled-color-bg-brand-enabled);
1833
- border-color: var(--ids-comp-card-filled-color-border-brand-enabled);
2281
+ background-color: var(--ids-comp-card-filled-color-bg-brand-default);
2282
+ border-color: var(--ids-comp-card-filled-color-border-brand-default);
1834
2283
  }
1835
2284
  .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:hover {
1836
2285
  background-color: var(--ids-comp-card-filled-color-bg-brand-hovered);
@@ -1849,8 +2298,8 @@
1849
2298
  border-color: var(--ids-comp-card-filled-color-border-brand-disabled);
1850
2299
  }
1851
2300
  .ids-card.ids-card-filled.ids-card-error {
1852
- background-color: var(--ids-comp-card-filled-color-bg-error-enabled);
1853
- border-color: var(--ids-comp-card-filled-color-border-error-enabled);
2301
+ background-color: var(--ids-comp-card-filled-color-bg-error-default);
2302
+ border-color: var(--ids-comp-card-filled-color-border-error-default);
1854
2303
  }
1855
2304
  .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:hover {
1856
2305
  background-color: var(--ids-comp-card-filled-color-bg-error-hovered);
@@ -1864,13 +2313,9 @@
1864
2313
  background-color: var(--ids-comp-card-filled-color-bg-error-pressed);
1865
2314
  border-color: var(--ids-comp-card-filled-color-border-error-pressed);
1866
2315
  }
1867
- .ids-card.ids-card-filled.ids-card-error.ids-card-clickable.ids-card-disabled {
1868
- background-color: var(--ids-comp-card-filled-color-bg-error-disabled);
1869
- border-color: var(--ids-comp-card-filled-color-border-error-disabled);
1870
- }
1871
2316
  .ids-card.ids-card-filled.ids-card-success {
1872
- background-color: var(--ids-comp-card-filled-color-bg-success-enabled);
1873
- border-color: var(--ids-comp-card-filled-color-border-success-enabled);
2317
+ background-color: var(--ids-comp-card-filled-color-bg-success-default);
2318
+ border-color: var(--ids-comp-card-filled-color-border-success-default);
1874
2319
  }
1875
2320
  .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:hover {
1876
2321
  background-color: var(--ids-comp-card-filled-color-bg-success-hovered);
@@ -1884,13 +2329,9 @@
1884
2329
  background-color: var(--ids-comp-card-filled-color-bg-success-pressed);
1885
2330
  border-color: var(--ids-comp-card-filled-color-border-success-pressed);
1886
2331
  }
1887
- .ids-card.ids-card-filled.ids-card-success.ids-card-clickable.ids-card-disabled {
1888
- background-color: var(--ids-comp-card-filled-color-bg-success-disabled);
1889
- border-color: var(--ids-comp-card-filled-color-border-success-disabled);
1890
- }
1891
2332
  .ids-card.ids-card-filled.ids-card-warning {
1892
- background-color: var(--ids-comp-card-filled-color-bg-warning-enabled);
1893
- border-color: var(--ids-comp-card-filled-color-border-warning-enabled);
2333
+ background-color: var(--ids-comp-card-filled-color-bg-warning-default);
2334
+ border-color: var(--ids-comp-card-filled-color-border-warning-default);
1894
2335
  }
1895
2336
  .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:hover {
1896
2337
  background-color: var(--ids-comp-card-filled-color-bg-warning-hovered);
@@ -1904,13 +2345,9 @@
1904
2345
  background-color: var(--ids-comp-card-filled-color-bg-warning-pressed);
1905
2346
  border-color: var(--ids-comp-card-filled-color-border-warning-pressed);
1906
2347
  }
1907
- .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable.ids-card-disabled {
1908
- background-color: var(--ids-comp-card-filled-color-bg-warning-disabled);
1909
- border-color: var(--ids-comp-card-filled-color-border-warning-disabled);
1910
- }
1911
2348
  .ids-card.ids-card-filled.ids-card-info {
1912
- background-color: var(--ids-comp-card-filled-color-bg-info-enabled);
1913
- border-color: var(--ids-comp-card-filled-color-border-info-enabled);
2349
+ background-color: var(--ids-comp-card-filled-color-bg-info-default);
2350
+ border-color: var(--ids-comp-card-filled-color-border-info-default);
1914
2351
  }
1915
2352
  .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:hover {
1916
2353
  background-color: var(--ids-comp-card-filled-color-bg-info-hovered);
@@ -1924,13 +2361,9 @@
1924
2361
  background-color: var(--ids-comp-card-filled-color-bg-info-pressed);
1925
2362
  border-color: var(--ids-comp-card-filled-color-border-info-pressed);
1926
2363
  }
1927
- .ids-card.ids-card-filled.ids-card-info.ids-card-clickable.ids-card-disabled {
1928
- background-color: var(--ids-comp-card-filled-color-bg-info-disabled);
1929
- border-color: var(--ids-comp-card-filled-color-border-info-disabled);
1930
- }
1931
2364
  .ids-card.ids-card-filled.ids-card-light {
1932
- background-color: var(--ids-comp-card-filled-color-bg-light-enabled);
1933
- border-color: var(--ids-comp-card-filled-color-border-light-enabled);
2365
+ background-color: var(--ids-comp-card-filled-color-bg-light-default);
2366
+ border-color: var(--ids-comp-card-filled-color-border-light-default);
1934
2367
  }
1935
2368
  .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:hover {
1936
2369
  background-color: var(--ids-comp-card-filled-color-bg-light-hovered);
@@ -1949,8 +2382,8 @@
1949
2382
  border-color: var(--ids-comp-card-filled-color-border-light-disabled);
1950
2383
  }
1951
2384
  .ids-card.ids-card-filled.ids-card-dark {
1952
- background-color: var(--ids-comp-card-filled-color-bg-dark-enabled);
1953
- border-color: var(--ids-comp-card-filled-color-border-dark-enabled);
2385
+ background-color: var(--ids-comp-card-filled-color-bg-dark-default);
2386
+ border-color: var(--ids-comp-card-filled-color-border-dark-default);
1954
2387
  }
1955
2388
  .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:hover {
1956
2389
  background-color: var(--ids-comp-card-filled-color-bg-dark-hovered);
@@ -1969,8 +2402,8 @@
1969
2402
  border-color: var(--ids-comp-card-filled-color-border-dark-disabled);
1970
2403
  }
1971
2404
  .ids-card.ids-card-filled.ids-card-surface {
1972
- background-color: var(--ids-comp-card-filled-color-bg-surface-enabled);
1973
- border-color: var(--ids-comp-card-filled-color-border-surface-enabled);
2405
+ background-color: var(--ids-comp-card-filled-color-bg-surface-default);
2406
+ border-color: var(--ids-comp-card-filled-color-border-surface-default);
1974
2407
  }
1975
2408
  .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:hover {
1976
2409
  background-color: var(--ids-comp-card-filled-color-bg-surface-hovered);
@@ -1989,8 +2422,8 @@
1989
2422
  border-color: var(--ids-comp-card-filled-color-border-surface-disabled);
1990
2423
  }
1991
2424
  .ids-card.ids-card-outlined.ids-card-primary {
1992
- background-color: var(--ids-comp-card-outlined-color-bg-primary-enabled);
1993
- border-color: var(--ids-comp-card-outlined-color-border-primary-enabled);
2425
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-default);
2426
+ border-color: var(--ids-comp-card-outlined-color-border-primary-default);
1994
2427
  }
1995
2428
  .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:hover {
1996
2429
  background-color: var(--ids-comp-card-outlined-color-bg-primary-hovered);
@@ -2009,8 +2442,8 @@
2009
2442
  border-color: var(--ids-comp-card-outlined-color-border-primary-disabled);
2010
2443
  }
2011
2444
  .ids-card.ids-card-outlined.ids-card-secondary {
2012
- background-color: var(--ids-comp-card-outlined-color-bg-secondary-enabled);
2013
- border-color: var(--ids-comp-card-outlined-color-border-secondary-enabled);
2445
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-default);
2446
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-default);
2014
2447
  }
2015
2448
  .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:hover {
2016
2449
  background-color: var(--ids-comp-card-outlined-color-bg-secondary-hovered);
@@ -2029,8 +2462,8 @@
2029
2462
  border-color: var(--ids-comp-card-outlined-color-border-secondary-disabled);
2030
2463
  }
2031
2464
  .ids-card.ids-card-outlined.ids-card-brand {
2032
- background-color: var(--ids-comp-card-outlined-color-bg-brand-enabled);
2033
- border-color: var(--ids-comp-card-outlined-color-border-brand-enabled);
2465
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-default);
2466
+ border-color: var(--ids-comp-card-outlined-color-border-brand-default);
2034
2467
  }
2035
2468
  .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:hover {
2036
2469
  background-color: var(--ids-comp-card-outlined-color-bg-brand-hovered);
@@ -2049,8 +2482,8 @@
2049
2482
  border-color: var(--ids-comp-card-outlined-color-border-brand-disabled);
2050
2483
  }
2051
2484
  .ids-card.ids-card-outlined.ids-card-error {
2052
- background-color: var(--ids-comp-card-outlined-color-bg-error-enabled);
2053
- border-color: var(--ids-comp-card-outlined-color-border-error-enabled);
2485
+ background-color: var(--ids-comp-card-outlined-color-bg-error-default);
2486
+ border-color: var(--ids-comp-card-outlined-color-border-error-default);
2054
2487
  }
2055
2488
  .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:hover {
2056
2489
  background-color: var(--ids-comp-card-outlined-color-bg-error-hovered);
@@ -2064,13 +2497,9 @@
2064
2497
  background-color: var(--ids-comp-card-outlined-color-bg-error-pressed);
2065
2498
  border-color: var(--ids-comp-card-outlined-color-border-error-pressed);
2066
2499
  }
2067
- .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable.ids-card-disabled {
2068
- background-color: var(--ids-comp-card-outlined-color-bg-error-disabled);
2069
- border-color: var(--ids-comp-card-outlined-color-border-error-disabled);
2070
- }
2071
2500
  .ids-card.ids-card-outlined.ids-card-success {
2072
- background-color: var(--ids-comp-card-outlined-color-bg-success-enabled);
2073
- border-color: var(--ids-comp-card-outlined-color-border-success-enabled);
2501
+ background-color: var(--ids-comp-card-outlined-color-bg-success-default);
2502
+ border-color: var(--ids-comp-card-outlined-color-border-success-default);
2074
2503
  }
2075
2504
  .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:hover {
2076
2505
  background-color: var(--ids-comp-card-outlined-color-bg-success-hovered);
@@ -2084,13 +2513,9 @@
2084
2513
  background-color: var(--ids-comp-card-outlined-color-bg-success-pressed);
2085
2514
  border-color: var(--ids-comp-card-outlined-color-border-success-pressed);
2086
2515
  }
2087
- .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable.ids-card-disabled {
2088
- background-color: var(--ids-comp-card-outlined-color-bg-success-disabled);
2089
- border-color: var(--ids-comp-card-outlined-color-border-success-disabled);
2090
- }
2091
2516
  .ids-card.ids-card-outlined.ids-card-warning {
2092
- background-color: var(--ids-comp-card-outlined-color-bg-warning-enabled);
2093
- border-color: var(--ids-comp-card-outlined-color-border-warning-enabled);
2517
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-default);
2518
+ border-color: var(--ids-comp-card-outlined-color-border-warning-default);
2094
2519
  }
2095
2520
  .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:hover {
2096
2521
  background-color: var(--ids-comp-card-outlined-color-bg-warning-hovered);
@@ -2104,13 +2529,9 @@
2104
2529
  background-color: var(--ids-comp-card-outlined-color-bg-warning-pressed);
2105
2530
  border-color: var(--ids-comp-card-outlined-color-border-warning-pressed);
2106
2531
  }
2107
- .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable.ids-card-disabled {
2108
- background-color: var(--ids-comp-card-outlined-color-bg-warning-disabled);
2109
- border-color: var(--ids-comp-card-outlined-color-border-warning-disabled);
2110
- }
2111
2532
  .ids-card.ids-card-outlined.ids-card-info {
2112
- background-color: var(--ids-comp-card-outlined-color-bg-info-enabled);
2113
- border-color: var(--ids-comp-card-outlined-color-border-info-enabled);
2533
+ background-color: var(--ids-comp-card-outlined-color-bg-info-default);
2534
+ border-color: var(--ids-comp-card-outlined-color-border-info-default);
2114
2535
  }
2115
2536
  .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:hover {
2116
2537
  background-color: var(--ids-comp-card-outlined-color-bg-info-hovered);
@@ -2124,13 +2545,9 @@
2124
2545
  background-color: var(--ids-comp-card-outlined-color-bg-info-pressed);
2125
2546
  border-color: var(--ids-comp-card-outlined-color-border-info-pressed);
2126
2547
  }
2127
- .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable.ids-card-disabled {
2128
- background-color: var(--ids-comp-card-outlined-color-bg-info-disabled);
2129
- border-color: var(--ids-comp-card-outlined-color-border-info-disabled);
2130
- }
2131
2548
  .ids-card.ids-card-outlined.ids-card-light {
2132
- background-color: var(--ids-comp-card-outlined-color-bg-light-enabled);
2133
- border-color: var(--ids-comp-card-outlined-color-border-light-enabled);
2549
+ background-color: var(--ids-comp-card-outlined-color-bg-light-default);
2550
+ border-color: var(--ids-comp-card-outlined-color-border-light-default);
2134
2551
  }
2135
2552
  .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:hover {
2136
2553
  background-color: var(--ids-comp-card-outlined-color-bg-light-hovered);
@@ -2149,8 +2566,8 @@
2149
2566
  border-color: var(--ids-comp-card-outlined-color-border-light-disabled);
2150
2567
  }
2151
2568
  .ids-card.ids-card-outlined.ids-card-dark {
2152
- background-color: var(--ids-comp-card-outlined-color-bg-dark-enabled);
2153
- border-color: var(--ids-comp-card-outlined-color-border-dark-enabled);
2569
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-default);
2570
+ border-color: var(--ids-comp-card-outlined-color-border-dark-default);
2154
2571
  }
2155
2572
  .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:hover {
2156
2573
  background-color: var(--ids-comp-card-outlined-color-bg-dark-hovered);
@@ -2169,8 +2586,8 @@
2169
2586
  border-color: var(--ids-comp-card-outlined-color-border-dark-disabled);
2170
2587
  }
2171
2588
  .ids-card.ids-card-outlined.ids-card-surface {
2172
- background-color: var(--ids-comp-card-outlined-color-bg-surface-enabled);
2173
- border-color: var(--ids-comp-card-outlined-color-border-surface-enabled);
2589
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-default);
2590
+ border-color: var(--ids-comp-card-outlined-color-border-surface-default);
2174
2591
  }
2175
2592
  .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:hover {
2176
2593
  background-color: var(--ids-comp-card-outlined-color-bg-surface-hovered);
@@ -2189,8 +2606,8 @@
2189
2606
  border-color: var(--ids-comp-card-outlined-color-border-surface-disabled);
2190
2607
  }
2191
2608
  .ids-card.ids-card-elevated.ids-card-primary {
2192
- background-color: var(--ids-comp-card-elevated-color-bg-primary-enabled);
2193
- border-color: var(--ids-comp-card-elevated-color-border-primary-enabled);
2609
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-default);
2610
+ border-color: var(--ids-comp-card-elevated-color-border-primary-default);
2194
2611
  }
2195
2612
  .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:hover {
2196
2613
  background-color: var(--ids-comp-card-elevated-color-bg-primary-hovered);
@@ -2209,8 +2626,8 @@
2209
2626
  border-color: var(--ids-comp-card-elevated-color-border-primary-disabled);
2210
2627
  }
2211
2628
  .ids-card.ids-card-elevated.ids-card-secondary {
2212
- background-color: var(--ids-comp-card-elevated-color-bg-secondary-enabled);
2213
- border-color: var(--ids-comp-card-elevated-color-border-secondary-enabled);
2629
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-default);
2630
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-default);
2214
2631
  }
2215
2632
  .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:hover {
2216
2633
  background-color: var(--ids-comp-card-elevated-color-bg-secondary-hovered);
@@ -2229,8 +2646,8 @@
2229
2646
  border-color: var(--ids-comp-card-elevated-color-border-secondary-disabled);
2230
2647
  }
2231
2648
  .ids-card.ids-card-elevated.ids-card-brand {
2232
- background-color: var(--ids-comp-card-elevated-color-bg-brand-enabled);
2233
- border-color: var(--ids-comp-card-elevated-color-border-brand-enabled);
2649
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-default);
2650
+ border-color: var(--ids-comp-card-elevated-color-border-brand-default);
2234
2651
  }
2235
2652
  .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:hover {
2236
2653
  background-color: var(--ids-comp-card-elevated-color-bg-brand-hovered);
@@ -2249,8 +2666,8 @@
2249
2666
  border-color: var(--ids-comp-card-elevated-color-border-brand-disabled);
2250
2667
  }
2251
2668
  .ids-card.ids-card-elevated.ids-card-error {
2252
- background-color: var(--ids-comp-card-elevated-color-bg-error-enabled);
2253
- border-color: var(--ids-comp-card-elevated-color-border-error-enabled);
2669
+ background-color: var(--ids-comp-card-elevated-color-bg-error-default);
2670
+ border-color: var(--ids-comp-card-elevated-color-border-error-default);
2254
2671
  }
2255
2672
  .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:hover {
2256
2673
  background-color: var(--ids-comp-card-elevated-color-bg-error-hovered);
@@ -2264,13 +2681,9 @@
2264
2681
  background-color: var(--ids-comp-card-elevated-color-bg-error-pressed);
2265
2682
  border-color: var(--ids-comp-card-elevated-color-border-error-pressed);
2266
2683
  }
2267
- .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable.ids-card-disabled {
2268
- background-color: var(--ids-comp-card-elevated-color-bg-error-disabled);
2269
- border-color: var(--ids-comp-card-elevated-color-border-error-disabled);
2270
- }
2271
2684
  .ids-card.ids-card-elevated.ids-card-success {
2272
- background-color: var(--ids-comp-card-elevated-color-bg-success-enabled);
2273
- border-color: var(--ids-comp-card-elevated-color-border-success-enabled);
2685
+ background-color: var(--ids-comp-card-elevated-color-bg-success-default);
2686
+ border-color: var(--ids-comp-card-elevated-color-border-success-default);
2274
2687
  }
2275
2688
  .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:hover {
2276
2689
  background-color: var(--ids-comp-card-elevated-color-bg-success-hovered);
@@ -2284,13 +2697,9 @@
2284
2697
  background-color: var(--ids-comp-card-elevated-color-bg-success-pressed);
2285
2698
  border-color: var(--ids-comp-card-elevated-color-border-success-pressed);
2286
2699
  }
2287
- .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable.ids-card-disabled {
2288
- background-color: var(--ids-comp-card-elevated-color-bg-success-disabled);
2289
- border-color: var(--ids-comp-card-elevated-color-border-success-disabled);
2290
- }
2291
2700
  .ids-card.ids-card-elevated.ids-card-warning {
2292
- background-color: var(--ids-comp-card-elevated-color-bg-warning-enabled);
2293
- border-color: var(--ids-comp-card-elevated-color-border-warning-enabled);
2701
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-default);
2702
+ border-color: var(--ids-comp-card-elevated-color-border-warning-default);
2294
2703
  }
2295
2704
  .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:hover {
2296
2705
  background-color: var(--ids-comp-card-elevated-color-bg-warning-hovered);
@@ -2304,13 +2713,9 @@
2304
2713
  background-color: var(--ids-comp-card-elevated-color-bg-warning-pressed);
2305
2714
  border-color: var(--ids-comp-card-elevated-color-border-warning-pressed);
2306
2715
  }
2307
- .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable.ids-card-disabled {
2308
- background-color: var(--ids-comp-card-elevated-color-bg-warning-disabled);
2309
- border-color: var(--ids-comp-card-elevated-color-border-warning-disabled);
2310
- }
2311
2716
  .ids-card.ids-card-elevated.ids-card-info {
2312
- background-color: var(--ids-comp-card-elevated-color-bg-info-enabled);
2313
- border-color: var(--ids-comp-card-elevated-color-border-info-enabled);
2717
+ background-color: var(--ids-comp-card-elevated-color-bg-info-default);
2718
+ border-color: var(--ids-comp-card-elevated-color-border-info-default);
2314
2719
  }
2315
2720
  .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:hover {
2316
2721
  background-color: var(--ids-comp-card-elevated-color-bg-info-hovered);
@@ -2324,13 +2729,9 @@
2324
2729
  background-color: var(--ids-comp-card-elevated-color-bg-info-pressed);
2325
2730
  border-color: var(--ids-comp-card-elevated-color-border-info-pressed);
2326
2731
  }
2327
- .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable.ids-card-disabled {
2328
- background-color: var(--ids-comp-card-elevated-color-bg-info-disabled);
2329
- border-color: var(--ids-comp-card-elevated-color-border-info-disabled);
2330
- }
2331
2732
  .ids-card.ids-card-elevated.ids-card-light {
2332
- background-color: var(--ids-comp-card-elevated-color-bg-light-enabled);
2333
- border-color: var(--ids-comp-card-elevated-color-border-light-enabled);
2733
+ background-color: var(--ids-comp-card-elevated-color-bg-light-default);
2734
+ border-color: var(--ids-comp-card-elevated-color-border-light-default);
2334
2735
  }
2335
2736
  .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:hover {
2336
2737
  background-color: var(--ids-comp-card-elevated-color-bg-light-hovered);
@@ -2349,8 +2750,8 @@
2349
2750
  border-color: var(--ids-comp-card-elevated-color-border-light-disabled);
2350
2751
  }
2351
2752
  .ids-card.ids-card-elevated.ids-card-dark {
2352
- background-color: var(--ids-comp-card-elevated-color-bg-dark-enabled);
2353
- border-color: var(--ids-comp-card-elevated-color-border-dark-enabled);
2753
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-default);
2754
+ border-color: var(--ids-comp-card-elevated-color-border-dark-default);
2354
2755
  }
2355
2756
  .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:hover {
2356
2757
  background-color: var(--ids-comp-card-elevated-color-bg-dark-hovered);
@@ -2369,8 +2770,8 @@
2369
2770
  border-color: var(--ids-comp-card-elevated-color-border-dark-disabled);
2370
2771
  }
2371
2772
  .ids-card.ids-card-elevated.ids-card-surface {
2372
- background-color: var(--ids-comp-card-elevated-color-bg-surface-enabled);
2373
- border-color: var(--ids-comp-card-elevated-color-border-surface-enabled);
2773
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-default);
2774
+ border-color: var(--ids-comp-card-elevated-color-border-surface-default);
2374
2775
  }
2375
2776
  .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:hover {
2376
2777
  background-color: var(--ids-comp-card-elevated-color-bg-surface-hovered);
@@ -2393,7 +2794,7 @@
2393
2794
  box-sizing: border-box;
2394
2795
  border-style: solid;
2395
2796
  border-color: var(--ids-comp-dialog-container-color-border-surface-default);
2396
- background-color: var(--ids-comp-dialog-container-color-bg-enabled);
2797
+ background-color: var(--ids-comp-dialog-container-color-bg-default);
2397
2798
  box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
2398
2799
  }
2399
2800
  .ids-dialog::backdrop {
@@ -2404,6 +2805,7 @@
2404
2805
  background-color: var(--ids-comp-dialog-backdrop-background);
2405
2806
  }
2406
2807
  .ids-dialog .ids-dialog-container {
2808
+ box-sizing: border-box;
2407
2809
  display: grid;
2408
2810
  grid-template-rows: auto 1fr auto;
2409
2811
  position: relative;
@@ -2416,6 +2818,9 @@
2416
2818
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title {
2417
2819
  font-style: normal;
2418
2820
  }
2821
+ .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden {
2822
+ display: none;
2823
+ }
2419
2824
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
2420
2825
  font-style: normal;
2421
2826
  }
@@ -2435,7 +2840,7 @@
2435
2840
  align-items: center;
2436
2841
  justify-content: center;
2437
2842
  overflow-y: auto;
2438
- background: var(--ids-comp-dialog-content-color-bg-enabled);
2843
+ background: var(--ids-comp-dialog-content-color-bg-default);
2439
2844
  }
2440
2845
  .ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow {
2441
2846
  overflow-y: auto;
@@ -2449,7 +2854,7 @@
2449
2854
  }
2450
2855
  .ids-dialog .ids-dialog-container .ids-dialog-actions {
2451
2856
  display: flex;
2452
- background: var(--ids-comp-dialog-footer-color-bg-enabled);
2857
+ background: var(--ids-comp-dialog-footer-color-bg-default);
2453
2858
  justify-content: flex-end;
2454
2859
  align-items: flex-start;
2455
2860
  align-content: flex-start;
@@ -2457,160 +2862,160 @@
2457
2862
  flex-wrap: wrap;
2458
2863
  }
2459
2864
  .ids-dialog.ids-dialog-compact {
2460
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-compact);
2461
- border-width: var(--ids-comp-size-dialog-container-size-border-width-compact);
2865
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-compact);
2866
+ border-width: var(--ids-comp-dialog-container-size-border-width-compact);
2462
2867
  }
2463
2868
  .ids-dialog.ids-dialog-compact .ids-dialog-container {
2464
- width: var(--ids-comp-size-dialog-container-size-width-compact);
2465
- min-height: var(--ids-comp-size-dialog-container-size-min-height-compact);
2466
- padding: var(--ids-comp-size-dialog-container-size-padding-y-compact) var(--ids-comp-size-dialog-container-size-padding-x-compact);
2467
- gap: var(--ids-comp-size-dialog-container-size-gap-compact);
2869
+ width: var(--ids-comp-dialog-container-size-width-compact);
2870
+ min-height: var(--ids-comp-dialog-container-size-min-height-compact);
2871
+ padding: var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);
2872
+ gap: var(--ids-comp-dialog-container-size-gap-compact);
2468
2873
  }
2469
2874
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title {
2470
- font-family: var(--ids-comp-size-dialog-header-title-typography-font-family-compact);
2471
- font-size: var(--ids-comp-size-dialog-header-title-typography-font-size-compact);
2472
- font-weight: var(--ids-comp-size-dialog-header-title-typography-font-weight-compact);
2473
- letter-spacing: var(--ids-comp-size-dialog-header-title-typography-letter-spacing-compact);
2474
- line-height: var(--ids-comp-size-dialog-header-title-typography-line-height-compact);
2875
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-compact);
2876
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-compact);
2877
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-compact);
2878
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-compact);
2879
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-compact);
2475
2880
  }
2476
2881
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
2477
- font-family: var(--ids-comp-size-dialog-header-subtitle-typography-font-family-compact);
2478
- font-size: var(--ids-comp-size-dialog-header-subtitle-typography-font-size-compact);
2479
- font-weight: var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-compact);
2480
- letter-spacing: var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-compact);
2481
- line-height: var(--ids-comp-size-dialog-header-subtitle-typography-line-height-compact);
2882
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-compact);
2883
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-compact);
2884
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact);
2885
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact);
2886
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-compact);
2482
2887
  }
2483
2888
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
2484
- gap: var(--ids-comp-size-dialog-header-size-gap-compact);
2485
- padding: var(--ids-comp-size-dialog-header-size-padding-y-compact) var(--ids-comp-size-dialog-header-size-padding-x-compact);
2889
+ gap: var(--ids-comp-dialog-header-size-gap-compact);
2890
+ padding: var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact);
2486
2891
  }
2487
2892
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content {
2488
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-size-dialog-content-fixed-size-padding-x-compact);
2893
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact);
2489
2894
  }
2490
2895
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
2491
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-compact);
2492
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact);
2493
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact);
2896
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact);
2897
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-compact);
2898
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-compact);
2494
2899
  }
2495
2900
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions {
2496
- padding: var(--ids-comp-size-dialog-footer-padding-y-compact) var(--ids-comp-size-dialog-footer-padding-x-compact);
2901
+ padding: var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact);
2497
2902
  }
2498
2903
  .ids-dialog.ids-dialog-comfortable {
2499
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-comfortable);
2500
- border-width: var(--ids-comp-size-dialog-container-size-border-width-comfortable);
2904
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-comfortable);
2905
+ border-width: var(--ids-comp-dialog-container-size-border-width-comfortable);
2501
2906
  }
2502
2907
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container {
2503
- width: var(--ids-comp-size-dialog-container-size-width-comfortable);
2504
- min-height: var(--ids-comp-size-dialog-container-size-min-height-comfortable);
2505
- padding: var(--ids-comp-size-dialog-container-size-padding-y-comfortable) var(--ids-comp-size-dialog-container-size-padding-x-comfortable);
2506
- gap: var(--ids-comp-size-dialog-container-size-gap-comfortable);
2908
+ width: var(--ids-comp-dialog-container-size-width-comfortable);
2909
+ min-height: var(--ids-comp-dialog-container-size-min-height-comfortable);
2910
+ padding: var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);
2911
+ gap: var(--ids-comp-dialog-container-size-gap-comfortable);
2507
2912
  }
2508
2913
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title {
2509
- font-family: var(--ids-comp-size-dialog-header-title-typography-font-family-comfortable);
2510
- font-size: var(--ids-comp-size-dialog-header-title-typography-font-size-comfortable);
2511
- font-weight: var(--ids-comp-size-dialog-header-title-typography-font-weight-comfortable);
2512
- letter-spacing: var(--ids-comp-size-dialog-header-title-typography-letter-spacing-comfortable);
2513
- line-height: var(--ids-comp-size-dialog-header-title-typography-line-height-comfortable);
2914
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-comfortable);
2915
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-comfortable);
2916
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-comfortable);
2917
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable);
2918
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-comfortable);
2514
2919
  }
2515
2920
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
2516
- font-family: var(--ids-comp-size-dialog-header-subtitle-typography-font-family-comfortable);
2517
- font-size: var(--ids-comp-size-dialog-header-subtitle-typography-font-size-comfortable);
2518
- font-weight: var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-comfortable);
2519
- letter-spacing: var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-comfortable);
2520
- line-height: var(--ids-comp-size-dialog-header-subtitle-typography-line-height-comfortable);
2921
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable);
2922
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable);
2923
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable);
2924
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable);
2925
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable);
2521
2926
  }
2522
2927
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
2523
- gap: var(--ids-comp-size-dialog-header-size-gap-comfortable);
2524
- padding: var(--ids-comp-size-dialog-header-size-padding-y-comfortable) var(--ids-comp-size-dialog-header-size-padding-x-comfortable);
2928
+ gap: var(--ids-comp-dialog-header-size-gap-comfortable);
2929
+ padding: var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable);
2525
2930
  }
2526
2931
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content {
2527
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-fixed-size-padding-x-comfortable);
2932
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable);
2528
2933
  }
2529
2934
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
2530
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-comfortable);
2531
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable);
2532
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable);
2935
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable);
2936
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);
2937
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);
2533
2938
  }
2534
2939
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions {
2535
- padding: var(--ids-comp-size-dialog-footer-padding-y-comfortable) var(--ids-comp-size-dialog-footer-padding-x-comfortable);
2940
+ padding: var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable);
2536
2941
  }
2537
2942
  .ids-dialog.ids-dialog-spacious {
2538
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-spacious);
2539
- border-width: var(--ids-comp-size-dialog-container-size-border-width-spacious);
2943
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-spacious);
2944
+ border-width: var(--ids-comp-dialog-container-size-border-width-spacious);
2540
2945
  }
2541
2946
  .ids-dialog.ids-dialog-spacious .ids-dialog-container {
2542
- width: var(--ids-comp-size-dialog-container-size-width-spacious);
2543
- min-height: var(--ids-comp-size-dialog-container-size-min-height-spacious);
2544
- padding: var(--ids-comp-size-dialog-container-size-padding-y-spacious) var(--ids-comp-size-dialog-container-size-padding-x-spacious);
2545
- gap: var(--ids-comp-size-dialog-container-size-gap-spacious);
2947
+ width: var(--ids-comp-dialog-container-size-width-spacious);
2948
+ min-height: var(--ids-comp-dialog-container-size-min-height-spacious);
2949
+ padding: var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);
2950
+ gap: var(--ids-comp-dialog-container-size-gap-spacious);
2546
2951
  }
2547
2952
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title {
2548
- font-family: var(--ids-comp-size-dialog-header-title-typography-font-family-spacious);
2549
- font-size: var(--ids-comp-size-dialog-header-title-typography-font-size-spacious);
2550
- font-weight: var(--ids-comp-size-dialog-header-title-typography-font-weight-spacious);
2551
- letter-spacing: var(--ids-comp-size-dialog-header-title-typography-letter-spacing-spacious);
2552
- line-height: var(--ids-comp-size-dialog-header-title-typography-line-height-spacious);
2953
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-spacious);
2954
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-spacious);
2955
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-spacious);
2956
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious);
2957
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-spacious);
2553
2958
  }
2554
2959
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
2555
- font-family: var(--ids-comp-size-dialog-header-subtitle-typography-font-family-spacious);
2556
- font-size: var(--ids-comp-size-dialog-header-subtitle-typography-font-size-spacious);
2557
- font-weight: var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-spacious);
2558
- letter-spacing: var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-spacious);
2559
- line-height: var(--ids-comp-size-dialog-header-subtitle-typography-line-height-spacious);
2960
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious);
2961
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious);
2962
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious);
2963
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious);
2964
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious);
2560
2965
  }
2561
2966
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
2562
- gap: var(--ids-comp-size-dialog-header-size-gap-spacious);
2563
- padding: var(--ids-comp-size-dialog-header-size-padding-y-spacious) var(--ids-comp-size-dialog-header-size-padding-x-spacious);
2967
+ gap: var(--ids-comp-dialog-header-size-gap-spacious);
2968
+ padding: var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious);
2564
2969
  }
2565
2970
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content {
2566
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-size-dialog-content-fixed-size-padding-x-spacious);
2971
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious);
2567
2972
  }
2568
2973
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
2569
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-spacious);
2570
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious);
2571
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious);
2974
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious);
2975
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);
2976
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);
2572
2977
  }
2573
2978
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions {
2574
- padding: var(--ids-comp-size-dialog-footer-padding-y-spacious) var(--ids-comp-size-dialog-footer-padding-x-spacious);
2979
+ padding: var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious);
2575
2980
  }
2576
2981
  .ids-dialog.ids-dialog-dense {
2577
- border-radius: var(--ids-comp-size-dialog-container-size-border-radius-dense);
2578
- border-width: var(--ids-comp-size-dialog-container-size-border-width-dense);
2982
+ border-radius: var(--ids-comp-dialog-container-size-border-radius-dense);
2983
+ border-width: var(--ids-comp-dialog-container-size-border-width-dense);
2579
2984
  }
2580
2985
  .ids-dialog.ids-dialog-dense .ids-dialog-container {
2581
- width: var(--ids-comp-size-dialog-container-size-width-dense);
2582
- min-height: var(--ids-comp-size-dialog-container-size-min-height-dense);
2583
- padding: var(--ids-comp-size-dialog-container-size-padding-y-dense) var(--ids-comp-size-dialog-container-size-padding-x-dense);
2584
- gap: var(--ids-comp-size-dialog-container-size-gap-dense);
2986
+ width: var(--ids-comp-dialog-container-size-width-dense);
2987
+ min-height: var(--ids-comp-dialog-container-size-min-height-dense);
2988
+ padding: var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);
2989
+ gap: var(--ids-comp-dialog-container-size-gap-dense);
2585
2990
  }
2586
2991
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title {
2587
- font-family: var(--ids-comp-size-dialog-header-title-typography-font-family-dense);
2588
- font-size: var(--ids-comp-size-dialog-header-title-typography-font-size-dense);
2589
- font-weight: var(--ids-comp-size-dialog-header-title-typography-font-weight-dense);
2590
- letter-spacing: var(--ids-comp-size-dialog-header-title-typography-letter-spacing-dense);
2591
- line-height: var(--ids-comp-size-dialog-header-title-typography-line-height-dense);
2992
+ font-family: var(--ids-comp-dialog-header-title-typography-font-family-dense);
2993
+ font-size: var(--ids-comp-dialog-header-title-typography-font-size-dense);
2994
+ font-weight: var(--ids-comp-dialog-header-title-typography-font-weight-dense);
2995
+ letter-spacing: var(--ids-comp-dialog-header-title-typography-letter-spacing-dense);
2996
+ line-height: var(--ids-comp-dialog-header-title-typography-line-height-dense);
2592
2997
  }
2593
2998
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
2594
- font-family: var(--ids-comp-size-dialog-header-subtitle-typography-font-family-dense);
2595
- font-size: var(--ids-comp-size-dialog-header-subtitle-typography-font-size-dense);
2596
- font-weight: var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-dense);
2597
- letter-spacing: var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-dense);
2598
- line-height: var(--ids-comp-size-dialog-header-subtitle-typography-line-height-dense);
2999
+ font-family: var(--ids-comp-dialog-header-subtitle-typography-font-family-dense);
3000
+ font-size: var(--ids-comp-dialog-header-subtitle-typography-font-size-dense);
3001
+ font-weight: var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense);
3002
+ letter-spacing: var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense);
3003
+ line-height: var(--ids-comp-dialog-header-subtitle-typography-line-height-dense);
2599
3004
  }
2600
3005
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
2601
- gap: var(--ids-comp-size-dialog-header-size-gap-dense);
2602
- padding: var(--ids-comp-size-dialog-header-size-padding-y-dense) var(--ids-comp-size-dialog-header-size-padding-x-dense);
3006
+ gap: var(--ids-comp-dialog-header-size-gap-dense);
3007
+ padding: var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense);
2603
3008
  }
2604
3009
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content {
2605
- padding: var(--ids-comp-size-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-size-dialog-content-fixed-size-padding-x-dense);
3010
+ padding: var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense);
2606
3011
  }
2607
3012
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable {
2608
- padding: var(--ids-comp-size-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-dense);
2609
- border-top-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense);
2610
- border-bottom-width: var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense);
3013
+ padding: var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense);
3014
+ border-top-width: var(--ids-comp-dialog-content-scrollable-size-border-width-dense);
3015
+ border-bottom-width: var(--ids-comp-dialog-content-scrollable-size-border-width-dense);
2611
3016
  }
2612
3017
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions {
2613
- padding: var(--ids-comp-size-dialog-footer-padding-y-dense) var(--ids-comp-size-dialog-footer-padding-x-dense);
3018
+ padding: var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense);
2614
3019
  }
2615
3020
 
2616
3021
  .ids-divider {
@@ -2620,71 +3025,242 @@
2620
3025
  align-items: center;
2621
3026
  justify-content: center;
2622
3027
  align-self: stretch;
2623
- width: var(--ids-divider-width);
2624
- height: var(--ids-divider-height);
2625
3028
  }
2626
3029
  .ids-divider.ids-divider-compact {
2627
- border-radius: var(--ids-comp-size-divider-size-border-radius-compact);
3030
+ border-radius: var(--ids-comp-divider-size-border-radius-compact);
2628
3031
  }
2629
3032
  .ids-divider.ids-divider-compact.ids-divider-horizontal {
2630
- height: var(--ids-comp-size-divider-size-height-compact);
3033
+ height: var(--ids-comp-divider-size-height-compact);
2631
3034
  }
2632
3035
  .ids-divider.ids-divider-compact.ids-divider-vertical {
2633
- width: var(--ids-comp-size-divider-size-width-compact);
3036
+ width: var(--ids-comp-divider-size-width-compact);
2634
3037
  }
2635
3038
  .ids-divider.ids-divider-comfortable {
2636
- border-radius: var(--ids-comp-size-divider-size-border-radius-comfortable);
3039
+ border-radius: var(--ids-comp-divider-size-border-radius-comfortable);
2637
3040
  }
2638
3041
  .ids-divider.ids-divider-comfortable.ids-divider-horizontal {
2639
- height: var(--ids-comp-size-divider-size-height-comfortable);
3042
+ height: var(--ids-comp-divider-size-height-comfortable);
2640
3043
  }
2641
3044
  .ids-divider.ids-divider-comfortable.ids-divider-vertical {
2642
- width: var(--ids-comp-size-divider-size-width-comfortable);
3045
+ width: var(--ids-comp-divider-size-width-comfortable);
2643
3046
  }
2644
3047
  .ids-divider.ids-divider-spacious {
2645
- border-radius: var(--ids-comp-size-divider-size-border-radius-spacious);
3048
+ border-radius: var(--ids-comp-divider-size-border-radius-spacious);
2646
3049
  }
2647
3050
  .ids-divider.ids-divider-spacious.ids-divider-horizontal {
2648
- height: var(--ids-comp-size-divider-size-height-spacious);
3051
+ height: var(--ids-comp-divider-size-height-spacious);
2649
3052
  }
2650
3053
  .ids-divider.ids-divider-spacious.ids-divider-vertical {
2651
- width: var(--ids-comp-size-divider-size-width-spacious);
3054
+ width: var(--ids-comp-divider-size-width-spacious);
2652
3055
  }
2653
3056
  .ids-divider.ids-divider-dense {
2654
- border-radius: var(--ids-comp-size-divider-size-border-radius-dense);
3057
+ border-radius: var(--ids-comp-divider-size-border-radius-dense);
2655
3058
  }
2656
3059
  .ids-divider.ids-divider-dense.ids-divider-horizontal {
2657
- height: var(--ids-comp-size-divider-size-height-dense);
3060
+ height: var(--ids-comp-divider-size-height-dense);
2658
3061
  }
2659
3062
  .ids-divider.ids-divider-dense.ids-divider-vertical {
2660
- width: var(--ids-comp-size-divider-size-width-dense);
3063
+ width: var(--ids-comp-divider-size-width-dense);
2661
3064
  }
2662
3065
  .ids-divider.ids-divider-primary {
2663
- background: var(--ids-comp-divider-color-bg-primary-enabled);
3066
+ background: var(--ids-comp-divider-color-bg-primary-default);
2664
3067
  }
2665
3068
  .ids-divider.ids-divider-secondary {
2666
- background: var(--ids-comp-divider-color-bg-secondary-enabled);
3069
+ background: var(--ids-comp-divider-color-bg-secondary-default);
2667
3070
  }
2668
3071
  .ids-divider.ids-divider-brand {
2669
- background: var(--ids-comp-divider-color-bg-brand-enabled);
3072
+ background: var(--ids-comp-divider-color-bg-brand-default);
2670
3073
  }
2671
3074
  .ids-divider.ids-divider-error {
2672
- background: var(--ids-comp-divider-color-bg-error-enabled);
3075
+ background: var(--ids-comp-divider-color-bg-error-default);
2673
3076
  }
2674
3077
  .ids-divider.ids-divider-success {
2675
- background: var(--ids-comp-divider-color-bg-success-enabled);
3078
+ background: var(--ids-comp-divider-color-bg-success-default);
2676
3079
  }
2677
3080
  .ids-divider.ids-divider-warning {
2678
- background: var(--ids-comp-divider-color-bg-warning-enabled);
3081
+ background: var(--ids-comp-divider-color-bg-warning-default);
2679
3082
  }
2680
3083
  .ids-divider.ids-divider-light {
2681
- background: var(--ids-comp-divider-color-bg-light-enabled);
3084
+ background: var(--ids-comp-divider-color-bg-light-default);
2682
3085
  }
2683
3086
  .ids-divider.ids-divider-dark {
2684
- background: var(--ids-comp-divider-color-bg-dark-enabled);
3087
+ background: var(--ids-comp-divider-color-bg-dark-default);
2685
3088
  }
2686
3089
  .ids-divider.ids-divider-surface {
2687
- background: var(--ids-comp-divider-color-bg-surface-enabled);
3090
+ background: var(--ids-comp-divider-color-bg-surface-default);
3091
+ }
3092
+
3093
+ .ids-message {
3094
+ display: flex;
3095
+ justify-content: flex-start;
3096
+ align-items: center;
3097
+ font-style: normal;
3098
+ }
3099
+ .ids-message .ids-message__prefix {
3100
+ display: flex;
3101
+ }
3102
+ .ids-message .ids-message__text {
3103
+ flex-grow: 1;
3104
+ text-align: start;
3105
+ }
3106
+ .ids-message.ids-message-compact {
3107
+ gap: var(--ids-comp-forms-message-size-gap-compact);
3108
+ padding: var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact);
3109
+ font-family: var(--ids-comp-forms-message-typography-font-family-compact);
3110
+ font-size: var(--ids-comp-forms-message-typography-font-size-compact);
3111
+ font-weight: var(--ids-comp-forms-message-typography-font-weight-compact);
3112
+ letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-compact);
3113
+ line-height: var(--ids-comp-forms-message-typography-line-height-compact);
3114
+ }
3115
+ .ids-message.ids-message-compact .ids-message__prefix {
3116
+ height: var(--ids-comp-forms-message-size-icon-height-compact);
3117
+ width: var(--ids-comp-forms-message-size-icon-width-compact);
3118
+ }
3119
+ .ids-message.ids-message-compact .ids-message__prefix > ids-icon {
3120
+ height: inherit;
3121
+ width: inherit;
3122
+ }
3123
+ .ids-message.ids-message-comfortable {
3124
+ gap: var(--ids-comp-forms-message-size-gap-comfortable);
3125
+ padding: var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable);
3126
+ font-family: var(--ids-comp-forms-message-typography-font-family-comfortable);
3127
+ font-size: var(--ids-comp-forms-message-typography-font-size-comfortable);
3128
+ font-weight: var(--ids-comp-forms-message-typography-font-weight-comfortable);
3129
+ letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-comfortable);
3130
+ line-height: var(--ids-comp-forms-message-typography-line-height-comfortable);
3131
+ }
3132
+ .ids-message.ids-message-comfortable .ids-message__prefix {
3133
+ height: var(--ids-comp-forms-message-size-icon-height-comfortable);
3134
+ width: var(--ids-comp-forms-message-size-icon-width-comfortable);
3135
+ }
3136
+ .ids-message.ids-message-comfortable .ids-message__prefix > ids-icon {
3137
+ height: inherit;
3138
+ width: inherit;
3139
+ }
3140
+ .ids-message.ids-message-spacious {
3141
+ gap: var(--ids-comp-forms-message-size-gap-spacious);
3142
+ padding: var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious);
3143
+ font-family: var(--ids-comp-forms-message-typography-font-family-spacious);
3144
+ font-size: var(--ids-comp-forms-message-typography-font-size-spacious);
3145
+ font-weight: var(--ids-comp-forms-message-typography-font-weight-spacious);
3146
+ letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-spacious);
3147
+ line-height: var(--ids-comp-forms-message-typography-line-height-spacious);
3148
+ }
3149
+ .ids-message.ids-message-spacious .ids-message__prefix {
3150
+ height: var(--ids-comp-forms-message-size-icon-height-spacious);
3151
+ width: var(--ids-comp-forms-message-size-icon-width-spacious);
3152
+ }
3153
+ .ids-message.ids-message-spacious .ids-message__prefix > ids-icon {
3154
+ height: inherit;
3155
+ width: inherit;
3156
+ }
3157
+ .ids-message.ids-message-dense {
3158
+ gap: var(--ids-comp-forms-message-size-gap-dense);
3159
+ padding: var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense);
3160
+ font-family: var(--ids-comp-forms-message-typography-font-family-dense);
3161
+ font-size: var(--ids-comp-forms-message-typography-font-size-dense);
3162
+ font-weight: var(--ids-comp-forms-message-typography-font-weight-dense);
3163
+ letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-dense);
3164
+ line-height: var(--ids-comp-forms-message-typography-line-height-dense);
3165
+ }
3166
+ .ids-message.ids-message-dense .ids-message__prefix {
3167
+ height: var(--ids-comp-forms-message-size-icon-height-dense);
3168
+ width: var(--ids-comp-forms-message-size-icon-width-dense);
3169
+ }
3170
+ .ids-message.ids-message-dense .ids-message__prefix > ids-icon {
3171
+ height: inherit;
3172
+ width: inherit;
3173
+ }
3174
+ .ids-message.ids-message-light .ids-message__prefix {
3175
+ color: var(--ids-comp-forms-message-color-fg-icon-light-default);
3176
+ }
3177
+ .ids-message.ids-message-light .ids-message__text,
3178
+ .ids-message.ids-message-light .ids-message__suffix {
3179
+ color: var(--ids-comp-forms-message-color-fg-text-light-default);
3180
+ }
3181
+ .ids-message.ids-message-light.ids-message-disabled .ids-message__prefix {
3182
+ color: var(--ids-comp-forms-message-color-fg-icon-light-disabled);
3183
+ }
3184
+ .ids-message.ids-message-light.ids-message-disabled .ids-message__text,
3185
+ .ids-message.ids-message-light.ids-message-disabled .ids-message__suffix {
3186
+ color: var(--ids-comp-forms-message-color-fg-text-light-disabled);
3187
+ }
3188
+ .ids-message.ids-message-light.ids-error-message .ids-message__prefix {
3189
+ color: var(--ids-comp-forms-message-color-fg-icon-light-error-default);
3190
+ }
3191
+ .ids-message.ids-message-light.ids-error-message .ids-message__text,
3192
+ .ids-message.ids-message-light.ids-error-message .ids-message__suffix {
3193
+ color: var(--ids-comp-forms-message-color-fg-text-light-error-default);
3194
+ }
3195
+ .ids-message.ids-success-message .ids-message__prefix {
3196
+ color: var(--ids-comp-forms-message-color-fg-icon-light-success-default);
3197
+ }
3198
+ .ids-message.ids-success-message .ids-message__text,
3199
+ .ids-message.ids-success-message .ids-message__suffix {
3200
+ color: var(--ids-comp-forms-message-color-fg-text-light-success-default);
3201
+ }
3202
+ .ids-message.ids-message-dark .ids-message__prefix {
3203
+ color: var(--ids-comp-forms-message-color-fg-icon-dark-default);
3204
+ }
3205
+ .ids-message.ids-message-dark .ids-message__text,
3206
+ .ids-message.ids-message-dark .ids-message__suffix {
3207
+ color: var(--ids-comp-forms-message-color-fg-text-dark-default);
3208
+ }
3209
+ .ids-message.ids-message-dark.ids-message-disabled .ids-message__prefix {
3210
+ color: var(--ids-comp-forms-message-color-fg-icon-dark-disabled);
3211
+ }
3212
+ .ids-message.ids-message-dark.ids-message-disabled .ids-message__text,
3213
+ .ids-message.ids-message-dark.ids-message-disabled .ids-message__suffix {
3214
+ color: var(--ids-comp-forms-message-color-fg-text-dark-disabled);
3215
+ }
3216
+ .ids-message.ids-message-dark.ids-error-message .ids-message__prefix {
3217
+ color: var(--ids-comp-forms-message-color-fg-icon-dark-error-default);
3218
+ }
3219
+ .ids-message.ids-message-dark.ids-error-message .ids-message__text,
3220
+ .ids-message.ids-message-dark.ids-error-message .ids-message__suffix {
3221
+ color: var(--ids-comp-forms-message-color-fg-text-dark-error-default);
3222
+ }
3223
+ .ids-message.ids-success-message .ids-message__prefix {
3224
+ color: var(--ids-comp-forms-message-color-fg-icon-dark-success-default);
3225
+ }
3226
+ .ids-message.ids-success-message .ids-message__text,
3227
+ .ids-message.ids-success-message .ids-message__suffix {
3228
+ color: var(--ids-comp-forms-message-color-fg-text-dark-success-default);
3229
+ }
3230
+ .ids-message.ids-message-surface .ids-message__prefix {
3231
+ color: var(--ids-comp-forms-message-color-fg-icon-surface-default);
3232
+ }
3233
+ .ids-message.ids-message-surface .ids-message__text,
3234
+ .ids-message.ids-message-surface .ids-message__suffix {
3235
+ color: var(--ids-comp-forms-message-color-fg-text-surface-default);
3236
+ }
3237
+ .ids-message.ids-message-surface.ids-message-disabled .ids-message__prefix {
3238
+ color: var(--ids-comp-forms-message-color-fg-icon-surface-disabled);
3239
+ }
3240
+ .ids-message.ids-message-surface.ids-message-disabled .ids-message__text,
3241
+ .ids-message.ids-message-surface.ids-message-disabled .ids-message__suffix {
3242
+ color: var(--ids-comp-forms-message-color-fg-text-surface-disabled);
3243
+ }
3244
+ .ids-message.ids-message-surface.ids-error-message .ids-message__prefix {
3245
+ color: var(--ids-comp-forms-message-color-fg-icon-surface-error-default);
3246
+ }
3247
+ .ids-message.ids-message-surface.ids-error-message .ids-message__text,
3248
+ .ids-message.ids-message-surface.ids-error-message .ids-message__suffix {
3249
+ color: var(--ids-comp-forms-message-color-fg-text-surface-error-default);
3250
+ }
3251
+ .ids-message.ids-success-message .ids-message__prefix {
3252
+ color: var(--ids-comp-forms-message-color-fg-icon-surface-success-default);
3253
+ }
3254
+ .ids-message.ids-success-message .ids-message__text,
3255
+ .ids-message.ids-success-message .ids-message__suffix {
3256
+ color: var(--ids-comp-forms-message-color-fg-text-surface-success-default);
3257
+ }
3258
+
3259
+ .ids-form-field__required-marker::after {
3260
+ content: "*";
3261
+ color: var(--ids-comp-forms-asterisk-color-fg-default);
3262
+ margin-left: 1px;
3263
+ margin-right: 0;
2688
3264
  }
2689
3265
 
2690
3266
  .ids-icon-button {
@@ -2693,6 +3269,7 @@
2693
3269
  flex-shrink: 0;
2694
3270
  align-items: center;
2695
3271
  justify-content: center;
3272
+ border-style: solid;
2696
3273
  }
2697
3274
  .ids-icon-button:focus {
2698
3275
  outline-offset: 2px;
@@ -2705,53 +3282,53 @@
2705
3282
  outline: none;
2706
3283
  }
2707
3284
  .ids-icon-button.ids-icon-button-compact {
2708
- padding: var(--ids-comp-size-icon-button-size-padding-y-compact) var(--ids-comp-size-icon-button-size-padding-x-compact);
2709
- width: var(--ids-comp-size-icon-button-size-width-compact);
2710
- height: var(--ids-comp-size-icon-button-size-height-compact);
2711
- border-radius: var(--ids-comp-size-icon-button-size-border-radius-compact);
2712
- border: var(--ids-comp-size-icon-button-size-border-compact) solid;
3285
+ padding: var(--ids-comp-icon-button-size-padding-y-compact) var(--ids-comp-icon-button-size-padding-x-compact);
3286
+ width: var(--ids-comp-icon-button-size-width-compact);
3287
+ height: var(--ids-comp-icon-button-size-height-compact);
3288
+ border-radius: var(--ids-comp-icon-button-size-border-radius-compact);
3289
+ border-width: var(--ids-comp-icon-button-size-border-compact);
2713
3290
  }
2714
3291
  .ids-icon-button.ids-icon-button-compact *[icon] {
2715
- width: var(--ids-comp-size-icon-button-size-icon-compact);
2716
- height: var(--ids-comp-size-icon-button-size-icon-compact);
3292
+ width: var(--ids-comp-icon-button-size-icon-compact);
3293
+ height: var(--ids-comp-icon-button-size-icon-compact);
2717
3294
  }
2718
3295
  .ids-icon-button.ids-icon-button-comfortable {
2719
- padding: var(--ids-comp-size-icon-button-size-padding-y-comfortable) var(--ids-comp-size-icon-button-size-padding-x-comfortable);
2720
- width: var(--ids-comp-size-icon-button-size-width-comfortable);
2721
- height: var(--ids-comp-size-icon-button-size-height-comfortable);
2722
- border-radius: var(--ids-comp-size-icon-button-size-border-radius-comfortable);
2723
- border: var(--ids-comp-size-icon-button-size-border-comfortable) solid;
3296
+ padding: var(--ids-comp-icon-button-size-padding-y-comfortable) var(--ids-comp-icon-button-size-padding-x-comfortable);
3297
+ width: var(--ids-comp-icon-button-size-width-comfortable);
3298
+ height: var(--ids-comp-icon-button-size-height-comfortable);
3299
+ border-radius: var(--ids-comp-icon-button-size-border-radius-comfortable);
3300
+ border-width: var(--ids-comp-icon-button-size-border-comfortable);
2724
3301
  }
2725
3302
  .ids-icon-button.ids-icon-button-comfortable *[icon] {
2726
- width: var(--ids-comp-size-icon-button-size-icon-comfortable);
2727
- height: var(--ids-comp-size-icon-button-size-icon-comfortable);
3303
+ width: var(--ids-comp-icon-button-size-icon-comfortable);
3304
+ height: var(--ids-comp-icon-button-size-icon-comfortable);
2728
3305
  }
2729
3306
  .ids-icon-button.ids-icon-button-spacious {
2730
- padding: var(--ids-comp-size-icon-button-size-padding-y-spacious) var(--ids-comp-size-icon-button-size-padding-x-spacious);
2731
- width: var(--ids-comp-size-icon-button-size-width-spacious);
2732
- height: var(--ids-comp-size-icon-button-size-height-spacious);
2733
- border-radius: var(--ids-comp-size-icon-button-size-border-radius-spacious);
2734
- border: var(--ids-comp-size-icon-button-size-border-spacious) solid;
3307
+ padding: var(--ids-comp-icon-button-size-padding-y-spacious) var(--ids-comp-icon-button-size-padding-x-spacious);
3308
+ width: var(--ids-comp-icon-button-size-width-spacious);
3309
+ height: var(--ids-comp-icon-button-size-height-spacious);
3310
+ border-radius: var(--ids-comp-icon-button-size-border-radius-spacious);
3311
+ border-width: var(--ids-comp-icon-button-size-border-spacious);
2735
3312
  }
2736
3313
  .ids-icon-button.ids-icon-button-spacious *[icon] {
2737
- width: var(--ids-comp-size-icon-button-size-icon-spacious);
2738
- height: var(--ids-comp-size-icon-button-size-icon-spacious);
3314
+ width: var(--ids-comp-icon-button-size-icon-spacious);
3315
+ height: var(--ids-comp-icon-button-size-icon-spacious);
2739
3316
  }
2740
3317
  .ids-icon-button.ids-icon-button-dense {
2741
- padding: var(--ids-comp-size-icon-button-size-padding-y-dense) var(--ids-comp-size-icon-button-size-padding-x-dense);
2742
- width: var(--ids-comp-size-icon-button-size-width-dense);
2743
- height: var(--ids-comp-size-icon-button-size-height-dense);
2744
- border-radius: var(--ids-comp-size-icon-button-size-border-radius-dense);
2745
- border: var(--ids-comp-size-icon-button-size-border-dense) solid;
3318
+ padding: var(--ids-comp-icon-button-size-padding-y-dense) var(--ids-comp-icon-button-size-padding-x-dense);
3319
+ width: var(--ids-comp-icon-button-size-width-dense);
3320
+ height: var(--ids-comp-icon-button-size-height-dense);
3321
+ border-radius: var(--ids-comp-icon-button-size-border-radius-dense);
3322
+ border-width: var(--ids-comp-icon-button-size-border-dense);
2746
3323
  }
2747
3324
  .ids-icon-button.ids-icon-button-dense *[icon] {
2748
- width: var(--ids-comp-size-icon-button-size-icon-dense);
2749
- height: var(--ids-comp-size-icon-button-size-icon-dense);
3325
+ width: var(--ids-comp-icon-button-size-icon-dense);
3326
+ height: var(--ids-comp-icon-button-size-icon-dense);
2750
3327
  }
2751
3328
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-primary {
2752
- color: var(--ids-comp-icon-button-filled-color-fg-primary-enabled);
2753
- background: var(--ids-comp-icon-button-filled-color-bg-primary-enabled);
2754
- border-color: var(--ids-comp-icon-button-filled-color-border-primary-enabled);
3329
+ color: var(--ids-comp-icon-button-filled-color-fg-primary-default);
3330
+ background: var(--ids-comp-icon-button-filled-color-bg-primary-default);
3331
+ border-color: var(--ids-comp-icon-button-filled-color-border-primary-default);
2755
3332
  }
2756
3333
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:hover {
2757
3334
  background: var(--ids-comp-icon-button-filled-color-bg-primary-hovered);
@@ -2773,9 +3350,9 @@
2773
3350
  border-color: var(--ids-comp-icon-button-filled-color-border-primary-disabled);
2774
3351
  }
2775
3352
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary {
2776
- color: var(--ids-comp-icon-button-filled-color-fg-secondary-enabled);
2777
- background: var(--ids-comp-icon-button-filled-color-bg-secondary-enabled);
2778
- border-color: var(--ids-comp-icon-button-filled-color-border-secondary-enabled);
3353
+ color: var(--ids-comp-icon-button-filled-color-fg-secondary-default);
3354
+ background: var(--ids-comp-icon-button-filled-color-bg-secondary-default);
3355
+ border-color: var(--ids-comp-icon-button-filled-color-border-secondary-default);
2779
3356
  }
2780
3357
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:hover {
2781
3358
  background: var(--ids-comp-icon-button-filled-color-bg-secondary-hovered);
@@ -2797,9 +3374,9 @@
2797
3374
  border-color: var(--ids-comp-icon-button-filled-color-border-secondary-disabled);
2798
3375
  }
2799
3376
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-brand {
2800
- color: var(--ids-comp-icon-button-filled-color-fg-brand-enabled);
2801
- background: var(--ids-comp-icon-button-filled-color-bg-brand-enabled);
2802
- border-color: var(--ids-comp-icon-button-filled-color-border-brand-enabled);
3377
+ color: var(--ids-comp-icon-button-filled-color-fg-brand-default);
3378
+ background: var(--ids-comp-icon-button-filled-color-bg-brand-default);
3379
+ border-color: var(--ids-comp-icon-button-filled-color-border-brand-default);
2803
3380
  }
2804
3381
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:hover {
2805
3382
  background: var(--ids-comp-icon-button-filled-color-bg-brand-hovered);
@@ -2821,9 +3398,9 @@
2821
3398
  border-color: var(--ids-comp-icon-button-filled-color-border-brand-disabled);
2822
3399
  }
2823
3400
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-error {
2824
- color: var(--ids-comp-icon-button-filled-color-fg-error-enabled);
2825
- background: var(--ids-comp-icon-button-filled-color-bg-error-enabled);
2826
- border-color: var(--ids-comp-icon-button-filled-color-border-error-enabled);
3401
+ color: var(--ids-comp-icon-button-filled-color-fg-error-default);
3402
+ background: var(--ids-comp-icon-button-filled-color-bg-error-default);
3403
+ border-color: var(--ids-comp-icon-button-filled-color-border-error-default);
2827
3404
  }
2828
3405
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-error:hover {
2829
3406
  background: var(--ids-comp-icon-button-filled-color-bg-error-hovered);
@@ -2840,14 +3417,12 @@
2840
3417
  border-color: var(--ids-comp-icon-button-filled-color-border-error-pressed);
2841
3418
  }
2842
3419
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-error:disabled {
2843
- background: var(--ids-comp-icon-button-filled-color-bg-error-disabled);
2844
- color: var(--ids-comp-icon-button-filled-color-fg-error-disabled);
2845
3420
  border-color: var(--ids-comp-icon-button-filled-color-border-error-disabled);
2846
3421
  }
2847
3422
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-success {
2848
- color: var(--ids-comp-icon-button-filled-color-fg-success-enabled);
2849
- background: var(--ids-comp-icon-button-filled-color-bg-success-enabled);
2850
- border-color: var(--ids-comp-icon-button-filled-color-border-success-enabled);
3423
+ color: var(--ids-comp-icon-button-filled-color-fg-success-default);
3424
+ background: var(--ids-comp-icon-button-filled-color-bg-success-default);
3425
+ border-color: var(--ids-comp-icon-button-filled-color-border-success-default);
2851
3426
  }
2852
3427
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-success:hover {
2853
3428
  background: var(--ids-comp-icon-button-filled-color-bg-success-hovered);
@@ -2864,14 +3439,12 @@
2864
3439
  border-color: var(--ids-comp-icon-button-filled-color-border-success-pressed);
2865
3440
  }
2866
3441
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-success:disabled {
2867
- background: var(--ids-comp-icon-button-filled-color-bg-success-disabled);
2868
- color: var(--ids-comp-icon-button-filled-color-fg-success-disabled);
2869
3442
  border-color: var(--ids-comp-icon-button-filled-color-border-success-disabled);
2870
3443
  }
2871
3444
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-warning {
2872
- color: var(--ids-comp-icon-button-filled-color-fg-warning-enabled);
2873
- background: var(--ids-comp-icon-button-filled-color-bg-warning-enabled);
2874
- border-color: var(--ids-comp-icon-button-filled-color-border-warning-enabled);
3445
+ color: var(--ids-comp-icon-button-filled-color-fg-warning-default);
3446
+ background: var(--ids-comp-icon-button-filled-color-bg-warning-default);
3447
+ border-color: var(--ids-comp-icon-button-filled-color-border-warning-default);
2875
3448
  }
2876
3449
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:hover {
2877
3450
  background: var(--ids-comp-icon-button-filled-color-bg-warning-hovered);
@@ -2888,14 +3461,12 @@
2888
3461
  border-color: var(--ids-comp-icon-button-filled-color-border-warning-pressed);
2889
3462
  }
2890
3463
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:disabled {
2891
- background: var(--ids-comp-icon-button-filled-color-bg-warning-disabled);
2892
- color: var(--ids-comp-icon-button-filled-color-fg-warning-disabled);
2893
3464
  border-color: var(--ids-comp-icon-button-filled-color-border-warning-disabled);
2894
3465
  }
2895
3466
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-light {
2896
- color: var(--ids-comp-icon-button-filled-color-fg-light-enabled);
2897
- background: var(--ids-comp-icon-button-filled-color-bg-light-enabled);
2898
- border-color: var(--ids-comp-icon-button-filled-color-border-light-enabled);
3467
+ color: var(--ids-comp-icon-button-filled-color-fg-light-default);
3468
+ background: var(--ids-comp-icon-button-filled-color-bg-light-default);
3469
+ border-color: var(--ids-comp-icon-button-filled-color-border-light-default);
2899
3470
  }
2900
3471
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-light:hover {
2901
3472
  background: var(--ids-comp-icon-button-filled-color-bg-light-hovered);
@@ -2917,9 +3488,9 @@
2917
3488
  border-color: var(--ids-comp-icon-button-filled-color-border-light-disabled);
2918
3489
  }
2919
3490
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-dark {
2920
- color: var(--ids-comp-icon-button-filled-color-fg-dark-enabled);
2921
- background: var(--ids-comp-icon-button-filled-color-bg-dark-enabled);
2922
- border-color: var(--ids-comp-icon-button-filled-color-border-dark-enabled);
3491
+ color: var(--ids-comp-icon-button-filled-color-fg-dark-default);
3492
+ background: var(--ids-comp-icon-button-filled-color-bg-dark-default);
3493
+ border-color: var(--ids-comp-icon-button-filled-color-border-dark-default);
2923
3494
  }
2924
3495
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:hover {
2925
3496
  background: var(--ids-comp-icon-button-filled-color-bg-dark-hovered);
@@ -2941,9 +3512,9 @@
2941
3512
  border-color: var(--ids-comp-icon-button-filled-color-border-dark-disabled);
2942
3513
  }
2943
3514
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-surface {
2944
- color: var(--ids-comp-icon-button-filled-color-fg-surface-enabled);
2945
- background: var(--ids-comp-icon-button-filled-color-bg-surface-enabled);
2946
- border-color: var(--ids-comp-icon-button-filled-color-border-surface-enabled);
3515
+ color: var(--ids-comp-icon-button-filled-color-fg-surface-default);
3516
+ background: var(--ids-comp-icon-button-filled-color-bg-surface-default);
3517
+ border-color: var(--ids-comp-icon-button-filled-color-border-surface-default);
2947
3518
  }
2948
3519
  .ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:hover {
2949
3520
  background: var(--ids-comp-icon-button-filled-color-bg-surface-hovered);
@@ -2965,9 +3536,9 @@
2965
3536
  border-color: var(--ids-comp-icon-button-filled-color-border-surface-disabled);
2966
3537
  }
2967
3538
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary {
2968
- color: var(--ids-comp-icon-button-outlined-color-fg-primary-enabled);
2969
- background: var(--ids-comp-icon-button-outlined-color-bg-primary-enabled);
2970
- border-color: var(--ids-comp-icon-button-outlined-color-border-primary-enabled);
3539
+ color: var(--ids-comp-icon-button-outlined-color-fg-primary-default);
3540
+ background: var(--ids-comp-icon-button-outlined-color-bg-primary-default);
3541
+ border-color: var(--ids-comp-icon-button-outlined-color-border-primary-default);
2971
3542
  }
2972
3543
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:hover {
2973
3544
  background: var(--ids-comp-icon-button-outlined-color-bg-primary-hovered);
@@ -2989,9 +3560,9 @@
2989
3560
  border-color: var(--ids-comp-icon-button-outlined-color-border-primary-disabled);
2990
3561
  }
2991
3562
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary {
2992
- color: var(--ids-comp-icon-button-outlined-color-fg-secondary-enabled);
2993
- background: var(--ids-comp-icon-button-outlined-color-bg-secondary-enabled);
2994
- border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-enabled);
3563
+ color: var(--ids-comp-icon-button-outlined-color-fg-secondary-default);
3564
+ background: var(--ids-comp-icon-button-outlined-color-bg-secondary-default);
3565
+ border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-default);
2995
3566
  }
2996
3567
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:hover {
2997
3568
  background: var(--ids-comp-icon-button-outlined-color-bg-secondary-hovered);
@@ -3013,9 +3584,9 @@
3013
3584
  border-color: var(--ids-comp-icon-button-outlined-color-border-secondary-disabled);
3014
3585
  }
3015
3586
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand {
3016
- color: var(--ids-comp-icon-button-outlined-color-fg-brand-enabled);
3017
- background: var(--ids-comp-icon-button-outlined-color-bg-brand-enabled);
3018
- border-color: var(--ids-comp-icon-button-outlined-color-border-brand-enabled);
3587
+ color: var(--ids-comp-icon-button-outlined-color-fg-brand-default);
3588
+ background: var(--ids-comp-icon-button-outlined-color-bg-brand-default);
3589
+ border-color: var(--ids-comp-icon-button-outlined-color-border-brand-default);
3019
3590
  }
3020
3591
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:hover {
3021
3592
  background: var(--ids-comp-icon-button-outlined-color-bg-brand-hovered);
@@ -3037,9 +3608,9 @@
3037
3608
  border-color: var(--ids-comp-icon-button-outlined-color-border-brand-disabled);
3038
3609
  }
3039
3610
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-error {
3040
- color: var(--ids-comp-icon-button-outlined-color-fg-error-enabled);
3041
- background: var(--ids-comp-icon-button-outlined-color-bg-error-enabled);
3042
- border-color: var(--ids-comp-icon-button-outlined-color-border-error-enabled);
3611
+ color: var(--ids-comp-icon-button-outlined-color-fg-error-default);
3612
+ background: var(--ids-comp-icon-button-outlined-color-bg-error-default);
3613
+ border-color: var(--ids-comp-icon-button-outlined-color-border-error-default);
3043
3614
  }
3044
3615
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:hover {
3045
3616
  background: var(--ids-comp-icon-button-outlined-color-bg-error-hovered);
@@ -3056,14 +3627,12 @@
3056
3627
  border-color: var(--ids-comp-icon-button-outlined-color-border-error-pressed);
3057
3628
  }
3058
3629
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:disabled {
3059
- background: var(--ids-comp-icon-button-outlined-color-bg-error-disabled);
3060
- color: var(--ids-comp-icon-button-outlined-color-fg-error-disabled);
3061
3630
  border-color: var(--ids-comp-icon-button-outlined-color-border-error-disabled);
3062
3631
  }
3063
3632
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-success {
3064
- color: var(--ids-comp-icon-button-outlined-color-fg-success-enabled);
3065
- background: var(--ids-comp-icon-button-outlined-color-bg-success-enabled);
3066
- border-color: var(--ids-comp-icon-button-outlined-color-border-success-enabled);
3633
+ color: var(--ids-comp-icon-button-outlined-color-fg-success-default);
3634
+ background: var(--ids-comp-icon-button-outlined-color-bg-success-default);
3635
+ border-color: var(--ids-comp-icon-button-outlined-color-border-success-default);
3067
3636
  }
3068
3637
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:hover {
3069
3638
  background: var(--ids-comp-icon-button-outlined-color-bg-success-hovered);
@@ -3080,14 +3649,12 @@
3080
3649
  border-color: var(--ids-comp-icon-button-outlined-color-border-success-pressed);
3081
3650
  }
3082
3651
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:disabled {
3083
- background: var(--ids-comp-icon-button-outlined-color-bg-success-disabled);
3084
- color: var(--ids-comp-icon-button-outlined-color-fg-success-disabled);
3085
3652
  border-color: var(--ids-comp-icon-button-outlined-color-border-success-disabled);
3086
3653
  }
3087
3654
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning {
3088
- color: var(--ids-comp-icon-button-outlined-color-fg-warning-enabled);
3089
- background: var(--ids-comp-icon-button-outlined-color-bg-warning-enabled);
3090
- border-color: var(--ids-comp-icon-button-outlined-color-border-warning-enabled);
3655
+ color: var(--ids-comp-icon-button-outlined-color-fg-warning-default);
3656
+ background: var(--ids-comp-icon-button-outlined-color-bg-warning-default);
3657
+ border-color: var(--ids-comp-icon-button-outlined-color-border-warning-default);
3091
3658
  }
3092
3659
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:hover {
3093
3660
  background: var(--ids-comp-icon-button-outlined-color-bg-warning-hovered);
@@ -3104,14 +3671,12 @@
3104
3671
  border-color: var(--ids-comp-icon-button-outlined-color-border-warning-pressed);
3105
3672
  }
3106
3673
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:disabled {
3107
- background: var(--ids-comp-icon-button-outlined-color-bg-warning-disabled);
3108
- color: var(--ids-comp-icon-button-outlined-color-fg-warning-disabled);
3109
3674
  border-color: var(--ids-comp-icon-button-outlined-color-border-warning-disabled);
3110
3675
  }
3111
3676
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-light {
3112
- color: var(--ids-comp-icon-button-outlined-color-fg-light-enabled);
3113
- background: var(--ids-comp-icon-button-outlined-color-bg-light-enabled);
3114
- border-color: var(--ids-comp-icon-button-outlined-color-border-light-enabled);
3677
+ color: var(--ids-comp-icon-button-outlined-color-fg-light-default);
3678
+ background: var(--ids-comp-icon-button-outlined-color-bg-light-default);
3679
+ border-color: var(--ids-comp-icon-button-outlined-color-border-light-default);
3115
3680
  }
3116
3681
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:hover {
3117
3682
  background: var(--ids-comp-icon-button-outlined-color-bg-light-hovered);
@@ -3133,9 +3698,9 @@
3133
3698
  border-color: var(--ids-comp-icon-button-outlined-color-border-light-disabled);
3134
3699
  }
3135
3700
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark {
3136
- color: var(--ids-comp-icon-button-outlined-color-fg-dark-enabled);
3137
- background: var(--ids-comp-icon-button-outlined-color-bg-dark-enabled);
3138
- border-color: var(--ids-comp-icon-button-outlined-color-border-dark-enabled);
3701
+ color: var(--ids-comp-icon-button-outlined-color-fg-dark-default);
3702
+ background: var(--ids-comp-icon-button-outlined-color-bg-dark-default);
3703
+ border-color: var(--ids-comp-icon-button-outlined-color-border-dark-default);
3139
3704
  }
3140
3705
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:hover {
3141
3706
  background: var(--ids-comp-icon-button-outlined-color-bg-dark-hovered);
@@ -3157,9 +3722,9 @@
3157
3722
  border-color: var(--ids-comp-icon-button-outlined-color-border-dark-disabled);
3158
3723
  }
3159
3724
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface {
3160
- color: var(--ids-comp-icon-button-outlined-color-fg-surface-enabled);
3161
- background: var(--ids-comp-icon-button-outlined-color-bg-surface-enabled);
3162
- border-color: var(--ids-comp-icon-button-outlined-color-border-surface-enabled);
3725
+ color: var(--ids-comp-icon-button-outlined-color-fg-surface-default);
3726
+ background: var(--ids-comp-icon-button-outlined-color-bg-surface-default);
3727
+ border-color: var(--ids-comp-icon-button-outlined-color-border-surface-default);
3163
3728
  }
3164
3729
  .ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:hover {
3165
3730
  background: var(--ids-comp-icon-button-outlined-color-bg-surface-hovered);
@@ -3184,8 +3749,8 @@
3184
3749
  border: none;
3185
3750
  }
3186
3751
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-primary {
3187
- color: var(--ids-comp-icon-button-standard-color-fg-primary-enabled);
3188
- background: var(--ids-comp-icon-button-standard-color-bg-primary-enabled);
3752
+ color: var(--ids-comp-icon-button-standard-color-fg-primary-default);
3753
+ background: var(--ids-comp-icon-button-standard-color-bg-primary-default);
3189
3754
  }
3190
3755
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:hover {
3191
3756
  background: var(--ids-comp-icon-button-standard-color-bg-primary-hovered);
@@ -3204,8 +3769,8 @@
3204
3769
  color: var(--ids-comp-icon-button-standard-color-fg-primary-disabled);
3205
3770
  }
3206
3771
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary {
3207
- color: var(--ids-comp-icon-button-standard-color-fg-secondary-enabled);
3208
- background: var(--ids-comp-icon-button-standard-color-bg-secondary-enabled);
3772
+ color: var(--ids-comp-icon-button-standard-color-fg-secondary-default);
3773
+ background: var(--ids-comp-icon-button-standard-color-bg-secondary-default);
3209
3774
  }
3210
3775
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:hover {
3211
3776
  background: var(--ids-comp-icon-button-standard-color-bg-secondary-hovered);
@@ -3224,8 +3789,8 @@
3224
3789
  color: var(--ids-comp-icon-button-standard-color-fg-secondary-disabled);
3225
3790
  }
3226
3791
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-brand {
3227
- color: var(--ids-comp-icon-button-standard-color-fg-brand-enabled);
3228
- background: var(--ids-comp-icon-button-standard-color-bg-brand-enabled);
3792
+ color: var(--ids-comp-icon-button-standard-color-fg-brand-default);
3793
+ background: var(--ids-comp-icon-button-standard-color-bg-brand-default);
3229
3794
  }
3230
3795
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:hover {
3231
3796
  background: var(--ids-comp-icon-button-standard-color-bg-brand-hovered);
@@ -3244,8 +3809,8 @@
3244
3809
  color: var(--ids-comp-icon-button-standard-color-fg-brand-disabled);
3245
3810
  }
3246
3811
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-error {
3247
- color: var(--ids-comp-icon-button-standard-color-fg-error-enabled);
3248
- background: var(--ids-comp-icon-button-standard-color-bg-error-enabled);
3812
+ color: var(--ids-comp-icon-button-standard-color-fg-error-default);
3813
+ background: var(--ids-comp-icon-button-standard-color-bg-error-default);
3249
3814
  }
3250
3815
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-error:hover {
3251
3816
  background: var(--ids-comp-icon-button-standard-color-bg-error-hovered);
@@ -3259,13 +3824,9 @@
3259
3824
  background: var(--ids-comp-icon-button-standard-color-bg-error-pressed);
3260
3825
  color: var(--ids-comp-icon-button-standard-color-fg-error-pressed);
3261
3826
  }
3262
- .ids-icon-button.ids-icon-button-standard.ids-icon-button-error:disabled {
3263
- background: var(--ids-comp-icon-button-standard-color-bg-error-disabled);
3264
- color: var(--ids-comp-icon-button-standard-color-fg-error-disabled);
3265
- }
3266
3827
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-success {
3267
- color: var(--ids-comp-icon-button-standard-color-fg-success-enabled);
3268
- background: var(--ids-comp-icon-button-standard-color-bg-success-enabled);
3828
+ color: var(--ids-comp-icon-button-standard-color-fg-success-default);
3829
+ background: var(--ids-comp-icon-button-standard-color-bg-success-default);
3269
3830
  }
3270
3831
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-success:hover {
3271
3832
  background: var(--ids-comp-icon-button-standard-color-bg-success-hovered);
@@ -3279,13 +3840,9 @@
3279
3840
  background: var(--ids-comp-icon-button-standard-color-bg-success-pressed);
3280
3841
  color: var(--ids-comp-icon-button-standard-color-fg-success-pressed);
3281
3842
  }
3282
- .ids-icon-button.ids-icon-button-standard.ids-icon-button-success:disabled {
3283
- background: var(--ids-comp-icon-button-standard-color-bg-success-disabled);
3284
- color: var(--ids-comp-icon-button-standard-color-fg-success-disabled);
3285
- }
3286
3843
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-warning {
3287
- color: var(--ids-comp-icon-button-standard-color-fg-warning-enabled);
3288
- background: var(--ids-comp-icon-button-standard-color-bg-warning-enabled);
3844
+ color: var(--ids-comp-icon-button-standard-color-fg-warning-default);
3845
+ background: var(--ids-comp-icon-button-standard-color-bg-warning-default);
3289
3846
  }
3290
3847
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:hover {
3291
3848
  background: var(--ids-comp-icon-button-standard-color-bg-warning-hovered);
@@ -3299,13 +3856,9 @@
3299
3856
  background: var(--ids-comp-icon-button-standard-color-bg-warning-pressed);
3300
3857
  color: var(--ids-comp-icon-button-standard-color-fg-warning-pressed);
3301
3858
  }
3302
- .ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:disabled {
3303
- background: var(--ids-comp-icon-button-standard-color-bg-warning-disabled);
3304
- color: var(--ids-comp-icon-button-standard-color-fg-warning-disabled);
3305
- }
3306
3859
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-light {
3307
- color: var(--ids-comp-icon-button-standard-color-fg-light-enabled);
3308
- background: var(--ids-comp-icon-button-standard-color-bg-light-enabled);
3860
+ color: var(--ids-comp-icon-button-standard-color-fg-light-default);
3861
+ background: var(--ids-comp-icon-button-standard-color-bg-light-default);
3309
3862
  }
3310
3863
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-light:hover {
3311
3864
  background: var(--ids-comp-icon-button-standard-color-bg-light-hovered);
@@ -3324,8 +3877,8 @@
3324
3877
  color: var(--ids-comp-icon-button-standard-color-fg-light-disabled);
3325
3878
  }
3326
3879
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-dark {
3327
- color: var(--ids-comp-icon-button-standard-color-fg-dark-enabled);
3328
- background: var(--ids-comp-icon-button-standard-color-bg-dark-enabled);
3880
+ color: var(--ids-comp-icon-button-standard-color-fg-dark-default);
3881
+ background: var(--ids-comp-icon-button-standard-color-bg-dark-default);
3329
3882
  }
3330
3883
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:hover {
3331
3884
  background: var(--ids-comp-icon-button-standard-color-bg-dark-hovered);
@@ -3344,8 +3897,8 @@
3344
3897
  color: var(--ids-comp-icon-button-standard-color-fg-dark-disabled);
3345
3898
  }
3346
3899
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-surface {
3347
- color: var(--ids-comp-icon-button-standard-color-fg-surface-enabled);
3348
- background: var(--ids-comp-icon-button-standard-color-bg-surface-enabled);
3900
+ color: var(--ids-comp-icon-button-standard-color-fg-surface-default);
3901
+ background: var(--ids-comp-icon-button-standard-color-bg-surface-default);
3349
3902
  }
3350
3903
  .ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:hover {
3351
3904
  background: var(--ids-comp-icon-button-standard-color-bg-surface-hovered);
@@ -3370,6 +3923,8 @@
3370
3923
  display: inline-flex;
3371
3924
  align-items: center;
3372
3925
  justify-content: center;
3926
+ border-style: solid;
3927
+ box-sizing: border-box;
3373
3928
  }
3374
3929
  .ids-tag:focus {
3375
3930
  outline-offset: 2px;
@@ -3389,85 +3944,85 @@
3389
3944
  justify-content: center;
3390
3945
  }
3391
3946
  .ids-tag.ids-tag-compact {
3392
- gap: var(--ids-comp-size-tag-size-gap-compact);
3393
- height: var(--ids-comp-size-tag-size-height-compact);
3394
- padding: var(--ids-comp-size-tag-size-padding-y-compact) var(--ids-comp-size-tag-size-padding-x-compact);
3395
- border-radius: var(--ids-comp-size-tag-size-border-radius-compact);
3396
- border: var(--ids-comp-size-tag-size-border-compact) solid;
3947
+ gap: var(--ids-comp-tag-size-gap-compact);
3948
+ height: var(--ids-comp-tag-size-height-compact);
3949
+ padding: var(--ids-comp-tag-size-padding-y-compact) var(--ids-comp-tag-size-padding-x-compact);
3950
+ border-radius: var(--ids-comp-tag-size-border-radius-compact);
3951
+ border: var(--ids-comp-tag-size-border-width-compact);
3397
3952
  }
3398
3953
  .ids-tag.ids-tag-compact > .ids-tag-label {
3399
- font-family: var(--ids-comp-size-tag-label-typography-font-family-compact);
3400
- font-size: var(--ids-comp-size-tag-label-typography-font-size-compact);
3401
- font-weight: var(--ids-comp-size-tag-label-typography-font-weight-compact);
3402
- letter-spacing: var(--ids-comp-size-tag-label-typography-letter-spacing-compact);
3403
- line-height: var(--ids-comp-size-tag-label-typography-line-height-compact);
3954
+ font-family: var(--ids-comp-tag-label-typography-font-family-compact);
3955
+ font-size: var(--ids-comp-tag-label-typography-font-size-compact);
3956
+ font-weight: var(--ids-comp-tag-label-typography-font-weight-compact);
3957
+ letter-spacing: var(--ids-comp-tag-label-typography-letter-spacing-compact);
3958
+ line-height: var(--ids-comp-tag-label-typography-line-height-compact);
3404
3959
  }
3405
3960
  .ids-tag.ids-tag-compact *[icon-leading],
3406
3961
  .ids-tag.ids-tag-compact *[icon-trailing] {
3407
- width: var(--ids-comp-size-tag-size-icon-compact);
3408
- height: var(--ids-comp-size-tag-size-icon-compact);
3962
+ width: var(--ids-comp-tag-size-icon-compact);
3963
+ height: var(--ids-comp-tag-size-icon-compact);
3409
3964
  }
3410
3965
  .ids-tag.ids-tag-comfortable {
3411
- gap: var(--ids-comp-size-tag-size-gap-comfortable);
3412
- height: var(--ids-comp-size-tag-size-height-comfortable);
3413
- padding: var(--ids-comp-size-tag-size-padding-y-comfortable) var(--ids-comp-size-tag-size-padding-x-comfortable);
3414
- border-radius: var(--ids-comp-size-tag-size-border-radius-comfortable);
3415
- border: var(--ids-comp-size-tag-size-border-comfortable) solid;
3966
+ gap: var(--ids-comp-tag-size-gap-comfortable);
3967
+ height: var(--ids-comp-tag-size-height-comfortable);
3968
+ padding: var(--ids-comp-tag-size-padding-y-comfortable) var(--ids-comp-tag-size-padding-x-comfortable);
3969
+ border-radius: var(--ids-comp-tag-size-border-radius-comfortable);
3970
+ border: var(--ids-comp-tag-size-border-width-comfortable);
3416
3971
  }
3417
3972
  .ids-tag.ids-tag-comfortable > .ids-tag-label {
3418
- font-family: var(--ids-comp-size-tag-label-typography-font-family-comfortable);
3419
- font-size: var(--ids-comp-size-tag-label-typography-font-size-comfortable);
3420
- font-weight: var(--ids-comp-size-tag-label-typography-font-weight-comfortable);
3421
- letter-spacing: var(--ids-comp-size-tag-label-typography-letter-spacing-comfortable);
3422
- line-height: var(--ids-comp-size-tag-label-typography-line-height-comfortable);
3973
+ font-family: var(--ids-comp-tag-label-typography-font-family-comfortable);
3974
+ font-size: var(--ids-comp-tag-label-typography-font-size-comfortable);
3975
+ font-weight: var(--ids-comp-tag-label-typography-font-weight-comfortable);
3976
+ letter-spacing: var(--ids-comp-tag-label-typography-letter-spacing-comfortable);
3977
+ line-height: var(--ids-comp-tag-label-typography-line-height-comfortable);
3423
3978
  }
3424
3979
  .ids-tag.ids-tag-comfortable *[icon-leading],
3425
3980
  .ids-tag.ids-tag-comfortable *[icon-trailing] {
3426
- width: var(--ids-comp-size-tag-size-icon-comfortable);
3427
- height: var(--ids-comp-size-tag-size-icon-comfortable);
3981
+ width: var(--ids-comp-tag-size-icon-comfortable);
3982
+ height: var(--ids-comp-tag-size-icon-comfortable);
3428
3983
  }
3429
3984
  .ids-tag.ids-tag-spacious {
3430
- gap: var(--ids-comp-size-tag-size-gap-spacious);
3431
- height: var(--ids-comp-size-tag-size-height-spacious);
3432
- padding: var(--ids-comp-size-tag-size-padding-y-spacious) var(--ids-comp-size-tag-size-padding-x-spacious);
3433
- border-radius: var(--ids-comp-size-tag-size-border-radius-spacious);
3434
- border: var(--ids-comp-size-tag-size-border-spacious) solid;
3985
+ gap: var(--ids-comp-tag-size-gap-spacious);
3986
+ height: var(--ids-comp-tag-size-height-spacious);
3987
+ padding: var(--ids-comp-tag-size-padding-y-spacious) var(--ids-comp-tag-size-padding-x-spacious);
3988
+ border-radius: var(--ids-comp-tag-size-border-radius-spacious);
3989
+ border: var(--ids-comp-tag-size-border-width-spacious);
3435
3990
  }
3436
3991
  .ids-tag.ids-tag-spacious > .ids-tag-label {
3437
- font-family: var(--ids-comp-size-tag-label-typography-font-family-spacious);
3438
- font-size: var(--ids-comp-size-tag-label-typography-font-size-spacious);
3439
- font-weight: var(--ids-comp-size-tag-label-typography-font-weight-spacious);
3440
- letter-spacing: var(--ids-comp-size-tag-label-typography-letter-spacing-spacious);
3441
- line-height: var(--ids-comp-size-tag-label-typography-line-height-spacious);
3992
+ font-family: var(--ids-comp-tag-label-typography-font-family-spacious);
3993
+ font-size: var(--ids-comp-tag-label-typography-font-size-spacious);
3994
+ font-weight: var(--ids-comp-tag-label-typography-font-weight-spacious);
3995
+ letter-spacing: var(--ids-comp-tag-label-typography-letter-spacing-spacious);
3996
+ line-height: var(--ids-comp-tag-label-typography-line-height-spacious);
3442
3997
  }
3443
3998
  .ids-tag.ids-tag-spacious *[icon-leading],
3444
3999
  .ids-tag.ids-tag-spacious *[icon-trailing] {
3445
- width: var(--ids-comp-size-tag-size-icon-spacious);
3446
- height: var(--ids-comp-size-tag-size-icon-spacious);
4000
+ width: var(--ids-comp-tag-size-icon-spacious);
4001
+ height: var(--ids-comp-tag-size-icon-spacious);
3447
4002
  }
3448
4003
  .ids-tag.ids-tag-dense {
3449
- gap: var(--ids-comp-size-tag-size-gap-dense);
3450
- height: var(--ids-comp-size-tag-size-height-dense);
3451
- padding: var(--ids-comp-size-tag-size-padding-y-dense) var(--ids-comp-size-tag-size-padding-x-dense);
3452
- border-radius: var(--ids-comp-size-tag-size-border-radius-dense);
3453
- border: var(--ids-comp-size-tag-size-border-dense) solid;
4004
+ gap: var(--ids-comp-tag-size-gap-dense);
4005
+ height: var(--ids-comp-tag-size-height-dense);
4006
+ padding: var(--ids-comp-tag-size-padding-y-dense) var(--ids-comp-tag-size-padding-x-dense);
4007
+ border-radius: var(--ids-comp-tag-size-border-radius-dense);
4008
+ border: var(--ids-comp-tag-size-border-width-dense);
3454
4009
  }
3455
4010
  .ids-tag.ids-tag-dense > .ids-tag-label {
3456
- font-family: var(--ids-comp-size-tag-label-typography-font-family-dense);
3457
- font-size: var(--ids-comp-size-tag-label-typography-font-size-dense);
3458
- font-weight: var(--ids-comp-size-tag-label-typography-font-weight-dense);
3459
- letter-spacing: var(--ids-comp-size-tag-label-typography-letter-spacing-dense);
3460
- line-height: var(--ids-comp-size-tag-label-typography-line-height-dense);
4011
+ font-family: var(--ids-comp-tag-label-typography-font-family-dense);
4012
+ font-size: var(--ids-comp-tag-label-typography-font-size-dense);
4013
+ font-weight: var(--ids-comp-tag-label-typography-font-weight-dense);
4014
+ letter-spacing: var(--ids-comp-tag-label-typography-letter-spacing-dense);
4015
+ line-height: var(--ids-comp-tag-label-typography-line-height-dense);
3461
4016
  }
3462
4017
  .ids-tag.ids-tag-dense *[icon-leading],
3463
4018
  .ids-tag.ids-tag-dense *[icon-trailing] {
3464
- width: var(--ids-comp-size-tag-size-icon-dense);
3465
- height: var(--ids-comp-size-tag-size-icon-dense);
4019
+ width: var(--ids-comp-tag-size-icon-dense);
4020
+ height: var(--ids-comp-tag-size-icon-dense);
3466
4021
  }
3467
4022
  .ids-tag.ids-tag-filled.ids-tag-primary {
3468
- color: var(--ids-comp-tag-filled-color-fg-label-primary-enabled);
3469
- background: var(--ids-comp-tag-filled-color-bg-primary-enabled);
3470
- border-color: var(--ids-comp-tag-filled-color-border-primary-enabled);
4023
+ color: var(--ids-comp-tag-filled-color-fg-label-primary-default);
4024
+ background: var(--ids-comp-tag-filled-color-bg-primary-default);
4025
+ border-color: var(--ids-comp-tag-filled-color-border-primary-default);
3471
4026
  }
3472
4027
  .ids-tag.ids-tag-filled.ids-tag-primary:hover {
3473
4028
  color: var(--ids-comp-tag-filled-color-fg-label-primary-hovered);
@@ -3484,15 +4039,10 @@
3484
4039
  background: var(--ids-comp-tag-filled-color-bg-primary-pressed);
3485
4040
  border-color: var(--ids-comp-tag-filled-color-border-primary-pressed);
3486
4041
  }
3487
- .ids-tag.ids-tag-filled.ids-tag-primary:disabled {
3488
- color: var(--ids-comp-tag-filled-color-fg-label-primary-disabled);
3489
- background: var(--ids-comp-tag-filled-color-bg-primary-disabled);
3490
- border-color: var(--ids-comp-tag-filled-color-border-primary-disabled);
3491
- }
3492
4042
  .ids-tag.ids-tag-filled.ids-tag-secondary {
3493
- color: var(--ids-comp-tag-filled-color-fg-label-secondary-enabled);
3494
- background: var(--ids-comp-tag-filled-color-bg-secondary-enabled);
3495
- border-color: var(--ids-comp-tag-filled-color-border-secondary-enabled);
4043
+ color: var(--ids-comp-tag-filled-color-fg-label-secondary-default);
4044
+ background: var(--ids-comp-tag-filled-color-bg-secondary-default);
4045
+ border-color: var(--ids-comp-tag-filled-color-border-secondary-default);
3496
4046
  }
3497
4047
  .ids-tag.ids-tag-filled.ids-tag-secondary:hover {
3498
4048
  color: var(--ids-comp-tag-filled-color-fg-label-secondary-hovered);
@@ -3509,15 +4059,10 @@
3509
4059
  background: var(--ids-comp-tag-filled-color-bg-secondary-pressed);
3510
4060
  border-color: var(--ids-comp-tag-filled-color-border-secondary-pressed);
3511
4061
  }
3512
- .ids-tag.ids-tag-filled.ids-tag-secondary:disabled {
3513
- color: var(--ids-comp-tag-filled-color-fg-label-secondary-disabled);
3514
- background: var(--ids-comp-tag-filled-color-bg-secondary-disabled);
3515
- border-color: var(--ids-comp-tag-filled-color-border-secondary-disabled);
3516
- }
3517
4062
  .ids-tag.ids-tag-filled.ids-tag-brand {
3518
- color: var(--ids-comp-tag-filled-color-fg-label-brand-enabled);
3519
- background: var(--ids-comp-tag-filled-color-bg-brand-enabled);
3520
- border-color: var(--ids-comp-tag-filled-color-border-brand-enabled);
4063
+ color: var(--ids-comp-tag-filled-color-fg-label-brand-default);
4064
+ background: var(--ids-comp-tag-filled-color-bg-brand-default);
4065
+ border-color: var(--ids-comp-tag-filled-color-border-brand-default);
3521
4066
  }
3522
4067
  .ids-tag.ids-tag-filled.ids-tag-brand:hover {
3523
4068
  color: var(--ids-comp-tag-filled-color-fg-label-brand-hovered);
@@ -3534,15 +4079,10 @@
3534
4079
  background: var(--ids-comp-tag-filled-color-bg-brand-pressed);
3535
4080
  border-color: var(--ids-comp-tag-filled-color-border-brand-pressed);
3536
4081
  }
3537
- .ids-tag.ids-tag-filled.ids-tag-brand:disabled {
3538
- color: var(--ids-comp-tag-filled-color-fg-label-brand-disabled);
3539
- background: var(--ids-comp-tag-filled-color-bg-brand-disabled);
3540
- border-color: var(--ids-comp-tag-filled-color-border-brand-disabled);
3541
- }
3542
4082
  .ids-tag.ids-tag-filled.ids-tag-error {
3543
- color: var(--ids-comp-tag-filled-color-fg-label-error-enabled);
3544
- background: var(--ids-comp-tag-filled-color-bg-error-enabled);
3545
- border-color: var(--ids-comp-tag-filled-color-border-error-enabled);
4083
+ color: var(--ids-comp-tag-filled-color-fg-label-error-default);
4084
+ background: var(--ids-comp-tag-filled-color-bg-error-default);
4085
+ border-color: var(--ids-comp-tag-filled-color-border-error-default);
3546
4086
  }
3547
4087
  .ids-tag.ids-tag-filled.ids-tag-error:hover {
3548
4088
  color: var(--ids-comp-tag-filled-color-fg-label-error-hovered);
@@ -3559,15 +4099,10 @@
3559
4099
  background: var(--ids-comp-tag-filled-color-bg-error-pressed);
3560
4100
  border-color: var(--ids-comp-tag-filled-color-border-error-pressed);
3561
4101
  }
3562
- .ids-tag.ids-tag-filled.ids-tag-error:disabled {
3563
- color: var(--ids-comp-tag-filled-color-fg-label-error-disabled);
3564
- background: var(--ids-comp-tag-filled-color-bg-error-disabled);
3565
- border-color: var(--ids-comp-tag-filled-color-border-error-disabled);
3566
- }
3567
4102
  .ids-tag.ids-tag-filled.ids-tag-success {
3568
- color: var(--ids-comp-tag-filled-color-fg-label-success-enabled);
3569
- background: var(--ids-comp-tag-filled-color-bg-success-enabled);
3570
- border-color: var(--ids-comp-tag-filled-color-border-success-enabled);
4103
+ color: var(--ids-comp-tag-filled-color-fg-label-success-default);
4104
+ background: var(--ids-comp-tag-filled-color-bg-success-default);
4105
+ border-color: var(--ids-comp-tag-filled-color-border-success-default);
3571
4106
  }
3572
4107
  .ids-tag.ids-tag-filled.ids-tag-success:hover {
3573
4108
  color: var(--ids-comp-tag-filled-color-fg-label-success-hovered);
@@ -3584,15 +4119,10 @@
3584
4119
  background: var(--ids-comp-tag-filled-color-bg-success-pressed);
3585
4120
  border-color: var(--ids-comp-tag-filled-color-border-success-pressed);
3586
4121
  }
3587
- .ids-tag.ids-tag-filled.ids-tag-success:disabled {
3588
- color: var(--ids-comp-tag-filled-color-fg-label-success-disabled);
3589
- background: var(--ids-comp-tag-filled-color-bg-success-disabled);
3590
- border-color: var(--ids-comp-tag-filled-color-border-success-disabled);
3591
- }
3592
4122
  .ids-tag.ids-tag-filled.ids-tag-warning {
3593
- color: var(--ids-comp-tag-filled-color-fg-label-warning-enabled);
3594
- background: var(--ids-comp-tag-filled-color-bg-warning-enabled);
3595
- border-color: var(--ids-comp-tag-filled-color-border-warning-enabled);
4123
+ color: var(--ids-comp-tag-filled-color-fg-label-warning-default);
4124
+ background: var(--ids-comp-tag-filled-color-bg-warning-default);
4125
+ border-color: var(--ids-comp-tag-filled-color-border-warning-default);
3596
4126
  }
3597
4127
  .ids-tag.ids-tag-filled.ids-tag-warning:hover {
3598
4128
  color: var(--ids-comp-tag-filled-color-fg-label-warning-hovered);
@@ -3609,15 +4139,10 @@
3609
4139
  background: var(--ids-comp-tag-filled-color-bg-warning-pressed);
3610
4140
  border-color: var(--ids-comp-tag-filled-color-border-warning-pressed);
3611
4141
  }
3612
- .ids-tag.ids-tag-filled.ids-tag-warning:disabled {
3613
- color: var(--ids-comp-tag-filled-color-fg-label-warning-disabled);
3614
- background: var(--ids-comp-tag-filled-color-bg-warning-disabled);
3615
- border-color: var(--ids-comp-tag-filled-color-border-warning-disabled);
3616
- }
3617
4142
  .ids-tag.ids-tag-filled.ids-tag-light {
3618
- color: var(--ids-comp-tag-filled-color-fg-label-light-enabled);
3619
- background: var(--ids-comp-tag-filled-color-bg-light-enabled);
3620
- border-color: var(--ids-comp-tag-filled-color-border-light-enabled);
4143
+ color: var(--ids-comp-tag-filled-color-fg-label-light-default);
4144
+ background: var(--ids-comp-tag-filled-color-bg-light-default);
4145
+ border-color: var(--ids-comp-tag-filled-color-border-light-default);
3621
4146
  }
3622
4147
  .ids-tag.ids-tag-filled.ids-tag-light:hover {
3623
4148
  color: var(--ids-comp-tag-filled-color-fg-label-light-hovered);
@@ -3634,15 +4159,10 @@
3634
4159
  background: var(--ids-comp-tag-filled-color-bg-light-pressed);
3635
4160
  border-color: var(--ids-comp-tag-filled-color-border-light-pressed);
3636
4161
  }
3637
- .ids-tag.ids-tag-filled.ids-tag-light:disabled {
3638
- color: var(--ids-comp-tag-filled-color-fg-label-light-disabled);
3639
- background: var(--ids-comp-tag-filled-color-bg-light-disabled);
3640
- border-color: var(--ids-comp-tag-filled-color-border-light-disabled);
3641
- }
3642
4162
  .ids-tag.ids-tag-filled.ids-tag-dark {
3643
- color: var(--ids-comp-tag-filled-color-fg-label-dark-enabled);
3644
- background: var(--ids-comp-tag-filled-color-bg-dark-enabled);
3645
- border-color: var(--ids-comp-tag-filled-color-border-dark-enabled);
4163
+ color: var(--ids-comp-tag-filled-color-fg-label-dark-default);
4164
+ background: var(--ids-comp-tag-filled-color-bg-dark-default);
4165
+ border-color: var(--ids-comp-tag-filled-color-border-dark-default);
3646
4166
  }
3647
4167
  .ids-tag.ids-tag-filled.ids-tag-dark:hover {
3648
4168
  color: var(--ids-comp-tag-filled-color-fg-label-dark-hovered);
@@ -3659,15 +4179,10 @@
3659
4179
  background: var(--ids-comp-tag-filled-color-bg-dark-pressed);
3660
4180
  border-color: var(--ids-comp-tag-filled-color-border-dark-pressed);
3661
4181
  }
3662
- .ids-tag.ids-tag-filled.ids-tag-dark:disabled {
3663
- color: var(--ids-comp-tag-filled-color-fg-label-dark-disabled);
3664
- background: var(--ids-comp-tag-filled-color-bg-dark-disabled);
3665
- border-color: var(--ids-comp-tag-filled-color-border-dark-disabled);
3666
- }
3667
4182
  .ids-tag.ids-tag-filled.ids-tag-surface {
3668
- color: var(--ids-comp-tag-filled-color-fg-label-surface-enabled);
3669
- background: var(--ids-comp-tag-filled-color-bg-surface-enabled);
3670
- border-color: var(--ids-comp-tag-filled-color-border-surface-enabled);
4183
+ color: var(--ids-comp-tag-filled-color-fg-label-surface-default);
4184
+ background: var(--ids-comp-tag-filled-color-bg-surface-default);
4185
+ border-color: var(--ids-comp-tag-filled-color-border-surface-default);
3671
4186
  }
3672
4187
  .ids-tag.ids-tag-filled.ids-tag-surface:hover {
3673
4188
  color: var(--ids-comp-tag-filled-color-fg-label-surface-hovered);
@@ -3684,15 +4199,10 @@
3684
4199
  background: var(--ids-comp-tag-filled-color-bg-surface-pressed);
3685
4200
  border-color: var(--ids-comp-tag-filled-color-border-surface-pressed);
3686
4201
  }
3687
- .ids-tag.ids-tag-filled.ids-tag-surface:disabled {
3688
- color: var(--ids-comp-tag-filled-color-fg-label-surface-disabled);
3689
- background: var(--ids-comp-tag-filled-color-bg-surface-disabled);
3690
- border-color: var(--ids-comp-tag-filled-color-border-surface-disabled);
3691
- }
3692
4202
  .ids-tag.ids-tag-outlined.ids-tag-primary {
3693
- color: var(--ids-comp-tag-outlined-color-fg-label-primary-enabled);
3694
- background: var(--ids-comp-tag-outlined-color-bg-primary-enabled);
3695
- border-color: var(--ids-comp-tag-outlined-color-border-primary-enabled);
4203
+ color: var(--ids-comp-tag-outlined-color-fg-label-primary-default);
4204
+ background: var(--ids-comp-tag-outlined-color-bg-primary-default);
4205
+ border-color: var(--ids-comp-tag-outlined-color-border-primary-default);
3696
4206
  }
3697
4207
  .ids-tag.ids-tag-outlined.ids-tag-primary:hover {
3698
4208
  color: var(--ids-comp-tag-outlined-color-fg-label-primary-hovered);
@@ -3709,15 +4219,10 @@
3709
4219
  background: var(--ids-comp-tag-outlined-color-bg-primary-pressed);
3710
4220
  border-color: var(--ids-comp-tag-outlined-color-border-primary-pressed);
3711
4221
  }
3712
- .ids-tag.ids-tag-outlined.ids-tag-primary:disabled {
3713
- color: var(--ids-comp-tag-outlined-color-fg-label-primary-disabled);
3714
- background: var(--ids-comp-tag-outlined-color-bg-primary-disabled);
3715
- border-color: var(--ids-comp-tag-outlined-color-border-primary-disabled);
3716
- }
3717
4222
  .ids-tag.ids-tag-outlined.ids-tag-secondary {
3718
- color: var(--ids-comp-tag-outlined-color-fg-label-secondary-enabled);
3719
- background: var(--ids-comp-tag-outlined-color-bg-secondary-enabled);
3720
- border-color: var(--ids-comp-tag-outlined-color-border-secondary-enabled);
4223
+ color: var(--ids-comp-tag-outlined-color-fg-label-secondary-default);
4224
+ background: var(--ids-comp-tag-outlined-color-bg-secondary-default);
4225
+ border-color: var(--ids-comp-tag-outlined-color-border-secondary-default);
3721
4226
  }
3722
4227
  .ids-tag.ids-tag-outlined.ids-tag-secondary:hover {
3723
4228
  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered);
@@ -3734,15 +4239,10 @@
3734
4239
  background: var(--ids-comp-tag-outlined-color-bg-secondary-pressed);
3735
4240
  border-color: var(--ids-comp-tag-outlined-color-border-secondary-pressed);
3736
4241
  }
3737
- .ids-tag.ids-tag-outlined.ids-tag-secondary:disabled {
3738
- color: var(--ids-comp-tag-outlined-color-fg-label-secondary-disabled);
3739
- background: var(--ids-comp-tag-outlined-color-bg-secondary-disabled);
3740
- border-color: var(--ids-comp-tag-outlined-color-border-secondary-disabled);
3741
- }
3742
4242
  .ids-tag.ids-tag-outlined.ids-tag-brand {
3743
- color: var(--ids-comp-tag-outlined-color-fg-label-brand-enabled);
3744
- background: var(--ids-comp-tag-outlined-color-bg-brand-enabled);
3745
- border-color: var(--ids-comp-tag-outlined-color-border-brand-enabled);
4243
+ color: var(--ids-comp-tag-outlined-color-fg-label-brand-default);
4244
+ background: var(--ids-comp-tag-outlined-color-bg-brand-default);
4245
+ border-color: var(--ids-comp-tag-outlined-color-border-brand-default);
3746
4246
  }
3747
4247
  .ids-tag.ids-tag-outlined.ids-tag-brand:hover {
3748
4248
  color: var(--ids-comp-tag-outlined-color-fg-label-brand-hovered);
@@ -3759,15 +4259,10 @@
3759
4259
  background: var(--ids-comp-tag-outlined-color-bg-brand-pressed);
3760
4260
  border-color: var(--ids-comp-tag-outlined-color-border-brand-pressed);
3761
4261
  }
3762
- .ids-tag.ids-tag-outlined.ids-tag-brand:disabled {
3763
- color: var(--ids-comp-tag-outlined-color-fg-label-brand-disabled);
3764
- background: var(--ids-comp-tag-outlined-color-bg-brand-disabled);
3765
- border-color: var(--ids-comp-tag-outlined-color-border-brand-disabled);
3766
- }
3767
4262
  .ids-tag.ids-tag-outlined.ids-tag-error {
3768
- color: var(--ids-comp-tag-outlined-color-fg-label-error-enabled);
3769
- background: var(--ids-comp-tag-outlined-color-bg-error-enabled);
3770
- border-color: var(--ids-comp-tag-outlined-color-border-error-enabled);
4263
+ color: var(--ids-comp-tag-outlined-color-fg-label-error-default);
4264
+ background: var(--ids-comp-tag-outlined-color-bg-error-default);
4265
+ border-color: var(--ids-comp-tag-outlined-color-border-error-default);
3771
4266
  }
3772
4267
  .ids-tag.ids-tag-outlined.ids-tag-error:hover {
3773
4268
  color: var(--ids-comp-tag-outlined-color-fg-label-error-hovered);
@@ -3784,15 +4279,10 @@
3784
4279
  background: var(--ids-comp-tag-outlined-color-bg-error-pressed);
3785
4280
  border-color: var(--ids-comp-tag-outlined-color-border-error-pressed);
3786
4281
  }
3787
- .ids-tag.ids-tag-outlined.ids-tag-error:disabled {
3788
- color: var(--ids-comp-tag-outlined-color-fg-label-error-disabled);
3789
- background: var(--ids-comp-tag-outlined-color-bg-error-disabled);
3790
- border-color: var(--ids-comp-tag-outlined-color-border-error-disabled);
3791
- }
3792
4282
  .ids-tag.ids-tag-outlined.ids-tag-success {
3793
- color: var(--ids-comp-tag-outlined-color-fg-label-success-enabled);
3794
- background: var(--ids-comp-tag-outlined-color-bg-success-enabled);
3795
- border-color: var(--ids-comp-tag-outlined-color-border-success-enabled);
4283
+ color: var(--ids-comp-tag-outlined-color-fg-label-success-default);
4284
+ background: var(--ids-comp-tag-outlined-color-bg-success-default);
4285
+ border-color: var(--ids-comp-tag-outlined-color-border-success-default);
3796
4286
  }
3797
4287
  .ids-tag.ids-tag-outlined.ids-tag-success:hover {
3798
4288
  color: var(--ids-comp-tag-outlined-color-fg-label-success-hovered);
@@ -3809,15 +4299,10 @@
3809
4299
  background: var(--ids-comp-tag-outlined-color-bg-success-pressed);
3810
4300
  border-color: var(--ids-comp-tag-outlined-color-border-success-pressed);
3811
4301
  }
3812
- .ids-tag.ids-tag-outlined.ids-tag-success:disabled {
3813
- color: var(--ids-comp-tag-outlined-color-fg-label-success-disabled);
3814
- background: var(--ids-comp-tag-outlined-color-bg-success-disabled);
3815
- border-color: var(--ids-comp-tag-outlined-color-border-success-disabled);
3816
- }
3817
4302
  .ids-tag.ids-tag-outlined.ids-tag-warning {
3818
- color: var(--ids-comp-tag-outlined-color-fg-label-warning-enabled);
3819
- background: var(--ids-comp-tag-outlined-color-bg-warning-enabled);
3820
- border-color: var(--ids-comp-tag-outlined-color-border-warning-enabled);
4303
+ color: var(--ids-comp-tag-outlined-color-fg-label-warning-default);
4304
+ background: var(--ids-comp-tag-outlined-color-bg-warning-default);
4305
+ border-color: var(--ids-comp-tag-outlined-color-border-warning-default);
3821
4306
  }
3822
4307
  .ids-tag.ids-tag-outlined.ids-tag-warning:hover {
3823
4308
  color: var(--ids-comp-tag-outlined-color-fg-label-warning-hovered);
@@ -3834,15 +4319,10 @@
3834
4319
  background: var(--ids-comp-tag-outlined-color-bg-warning-pressed);
3835
4320
  border-color: var(--ids-comp-tag-outlined-color-border-warning-pressed);
3836
4321
  }
3837
- .ids-tag.ids-tag-outlined.ids-tag-warning:disabled {
3838
- color: var(--ids-comp-tag-outlined-color-fg-label-warning-disabled);
3839
- background: var(--ids-comp-tag-outlined-color-bg-warning-disabled);
3840
- border-color: var(--ids-comp-tag-outlined-color-border-warning-disabled);
3841
- }
3842
4322
  .ids-tag.ids-tag-outlined.ids-tag-light {
3843
- color: var(--ids-comp-tag-outlined-color-fg-label-light-enabled);
3844
- background: var(--ids-comp-tag-outlined-color-bg-light-enabled);
3845
- border-color: var(--ids-comp-tag-outlined-color-border-light-enabled);
4323
+ color: var(--ids-comp-tag-outlined-color-fg-label-light-default);
4324
+ background: var(--ids-comp-tag-outlined-color-bg-light-default);
4325
+ border-color: var(--ids-comp-tag-outlined-color-border-light-default);
3846
4326
  }
3847
4327
  .ids-tag.ids-tag-outlined.ids-tag-light:hover {
3848
4328
  color: var(--ids-comp-tag-outlined-color-fg-label-light-hovered);
@@ -3859,15 +4339,10 @@
3859
4339
  background: var(--ids-comp-tag-outlined-color-bg-light-pressed);
3860
4340
  border-color: var(--ids-comp-tag-outlined-color-border-light-pressed);
3861
4341
  }
3862
- .ids-tag.ids-tag-outlined.ids-tag-light:disabled {
3863
- color: var(--ids-comp-tag-outlined-color-fg-label-light-disabled);
3864
- background: var(--ids-comp-tag-outlined-color-bg-light-disabled);
3865
- border-color: var(--ids-comp-tag-outlined-color-border-light-disabled);
3866
- }
3867
4342
  .ids-tag.ids-tag-outlined.ids-tag-dark {
3868
- color: var(--ids-comp-tag-outlined-color-fg-label-dark-enabled);
3869
- background: var(--ids-comp-tag-outlined-color-bg-dark-enabled);
3870
- border-color: var(--ids-comp-tag-outlined-color-border-dark-enabled);
4343
+ color: var(--ids-comp-tag-outlined-color-fg-label-dark-default);
4344
+ background: var(--ids-comp-tag-outlined-color-bg-dark-default);
4345
+ border-color: var(--ids-comp-tag-outlined-color-border-dark-default);
3871
4346
  }
3872
4347
  .ids-tag.ids-tag-outlined.ids-tag-dark:hover {
3873
4348
  color: var(--ids-comp-tag-outlined-color-fg-label-dark-hovered);
@@ -3884,15 +4359,10 @@
3884
4359
  background: var(--ids-comp-tag-outlined-color-bg-dark-pressed);
3885
4360
  border-color: var(--ids-comp-tag-outlined-color-border-dark-pressed);
3886
4361
  }
3887
- .ids-tag.ids-tag-outlined.ids-tag-dark:disabled {
3888
- color: var(--ids-comp-tag-outlined-color-fg-label-dark-disabled);
3889
- background: var(--ids-comp-tag-outlined-color-bg-dark-disabled);
3890
- border-color: var(--ids-comp-tag-outlined-color-border-dark-disabled);
3891
- }
3892
4362
  .ids-tag.ids-tag-outlined.ids-tag-surface {
3893
- color: var(--ids-comp-tag-outlined-color-fg-label-surface-enabled);
3894
- background: var(--ids-comp-tag-outlined-color-bg-surface-enabled);
3895
- border-color: var(--ids-comp-tag-outlined-color-border-surface-enabled);
4363
+ color: var(--ids-comp-tag-outlined-color-fg-label-surface-default);
4364
+ background: var(--ids-comp-tag-outlined-color-bg-surface-default);
4365
+ border-color: var(--ids-comp-tag-outlined-color-border-surface-default);
3896
4366
  }
3897
4367
  .ids-tag.ids-tag-outlined.ids-tag-surface:hover {
3898
4368
  color: var(--ids-comp-tag-outlined-color-fg-label-surface-hovered);
@@ -3908,234 +4378,4 @@
3908
4378
  color: var(--ids-comp-tag-outlined-color-fg-label-surface-pressed);
3909
4379
  background: var(--ids-comp-tag-outlined-color-bg-surface-pressed);
3910
4380
  border-color: var(--ids-comp-tag-outlined-color-border-surface-pressed);
3911
- }
3912
- .ids-tag.ids-tag-outlined.ids-tag-surface:disabled {
3913
- color: var(--ids-comp-tag-outlined-color-fg-label-surface-disabled);
3914
- background: var(--ids-comp-tag-outlined-color-bg-surface-disabled);
3915
- border-color: var(--ids-comp-tag-outlined-color-border-surface-disabled);
3916
- }
3917
- .ids-tag.ids-tag-text.ids-tag-primary {
3918
- color: var(--ids-comp-tag-text-color-fg-label-primary-enabled);
3919
- background: var(--ids-comp-tag-text-color-bg-primary-enabled);
3920
- border-color: var(--ids-comp-tag-text-color-border-primary-enabled);
3921
- }
3922
- .ids-tag.ids-tag-text.ids-tag-primary:hover {
3923
- color: var(--ids-comp-tag-text-color-fg-label-primary-hovered);
3924
- background: var(--ids-comp-tag-text-color-bg-primary-hovered);
3925
- border-color: var(--ids-comp-tag-text-color-border-primary-hovered);
3926
- }
3927
- .ids-tag.ids-tag-text.ids-tag-primary:focus {
3928
- color: var(--ids-comp-tag-text-color-fg-label-primary-focused);
3929
- background: var(--ids-comp-tag-text-color-bg-primary-focused);
3930
- border-color: var(--ids-comp-tag-text-color-border-primary-focused);
3931
- }
3932
- .ids-tag.ids-tag-text.ids-tag-primary:active {
3933
- color: var(--ids-comp-tag-text-color-fg-label-primary-pressed);
3934
- background: var(--ids-comp-tag-text-color-bg-primary-pressed);
3935
- border-color: var(--ids-comp-tag-text-color-border-primary-pressed);
3936
- }
3937
- .ids-tag.ids-tag-text.ids-tag-primary:disabled {
3938
- color: var(--ids-comp-tag-text-color-fg-label-primary-disabled);
3939
- background: var(--ids-comp-tag-text-color-bg-primary-disabled);
3940
- border-color: var(--ids-comp-tag-text-color-border-primary-disabled);
3941
- }
3942
- .ids-tag.ids-tag-text.ids-tag-secondary {
3943
- color: var(--ids-comp-tag-text-color-fg-label-secondary-enabled);
3944
- background: var(--ids-comp-tag-text-color-bg-secondary-enabled);
3945
- border-color: var(--ids-comp-tag-text-color-border-secondary-enabled);
3946
- }
3947
- .ids-tag.ids-tag-text.ids-tag-secondary:hover {
3948
- color: var(--ids-comp-tag-text-color-fg-label-secondary-hovered);
3949
- background: var(--ids-comp-tag-text-color-bg-secondary-hovered);
3950
- border-color: var(--ids-comp-tag-text-color-border-secondary-hovered);
3951
- }
3952
- .ids-tag.ids-tag-text.ids-tag-secondary:focus {
3953
- color: var(--ids-comp-tag-text-color-fg-label-secondary-focused);
3954
- background: var(--ids-comp-tag-text-color-bg-secondary-focused);
3955
- border-color: var(--ids-comp-tag-text-color-border-secondary-focused);
3956
- }
3957
- .ids-tag.ids-tag-text.ids-tag-secondary:active {
3958
- color: var(--ids-comp-tag-text-color-fg-label-secondary-pressed);
3959
- background: var(--ids-comp-tag-text-color-bg-secondary-pressed);
3960
- border-color: var(--ids-comp-tag-text-color-border-secondary-pressed);
3961
- }
3962
- .ids-tag.ids-tag-text.ids-tag-secondary:disabled {
3963
- color: var(--ids-comp-tag-text-color-fg-label-secondary-disabled);
3964
- background: var(--ids-comp-tag-text-color-bg-secondary-disabled);
3965
- border-color: var(--ids-comp-tag-text-color-border-secondary-disabled);
3966
- }
3967
- .ids-tag.ids-tag-text.ids-tag-brand {
3968
- color: var(--ids-comp-tag-text-color-fg-label-brand-enabled);
3969
- background: var(--ids-comp-tag-text-color-bg-brand-enabled);
3970
- border-color: var(--ids-comp-tag-text-color-border-brand-enabled);
3971
- }
3972
- .ids-tag.ids-tag-text.ids-tag-brand:hover {
3973
- color: var(--ids-comp-tag-text-color-fg-label-brand-hovered);
3974
- background: var(--ids-comp-tag-text-color-bg-brand-hovered);
3975
- border-color: var(--ids-comp-tag-text-color-border-brand-hovered);
3976
- }
3977
- .ids-tag.ids-tag-text.ids-tag-brand:focus {
3978
- color: var(--ids-comp-tag-text-color-fg-label-brand-focused);
3979
- background: var(--ids-comp-tag-text-color-bg-brand-focused);
3980
- border-color: var(--ids-comp-tag-text-color-border-brand-focused);
3981
- }
3982
- .ids-tag.ids-tag-text.ids-tag-brand:active {
3983
- color: var(--ids-comp-tag-text-color-fg-label-brand-pressed);
3984
- background: var(--ids-comp-tag-text-color-bg-brand-pressed);
3985
- border-color: var(--ids-comp-tag-text-color-border-brand-pressed);
3986
- }
3987
- .ids-tag.ids-tag-text.ids-tag-brand:disabled {
3988
- color: var(--ids-comp-tag-text-color-fg-label-brand-disabled);
3989
- background: var(--ids-comp-tag-text-color-bg-brand-disabled);
3990
- border-color: var(--ids-comp-tag-text-color-border-brand-disabled);
3991
- }
3992
- .ids-tag.ids-tag-text.ids-tag-error {
3993
- color: var(--ids-comp-tag-text-color-fg-label-error-enabled);
3994
- background: var(--ids-comp-tag-text-color-bg-error-enabled);
3995
- border-color: var(--ids-comp-tag-text-color-border-error-enabled);
3996
- }
3997
- .ids-tag.ids-tag-text.ids-tag-error:hover {
3998
- color: var(--ids-comp-tag-text-color-fg-label-error-hovered);
3999
- background: var(--ids-comp-tag-text-color-bg-error-hovered);
4000
- border-color: var(--ids-comp-tag-text-color-border-error-hovered);
4001
- }
4002
- .ids-tag.ids-tag-text.ids-tag-error:focus {
4003
- color: var(--ids-comp-tag-text-color-fg-label-error-focused);
4004
- background: var(--ids-comp-tag-text-color-bg-error-focused);
4005
- border-color: var(--ids-comp-tag-text-color-border-error-focused);
4006
- }
4007
- .ids-tag.ids-tag-text.ids-tag-error:active {
4008
- color: var(--ids-comp-tag-text-color-fg-label-error-pressed);
4009
- background: var(--ids-comp-tag-text-color-bg-error-pressed);
4010
- border-color: var(--ids-comp-tag-text-color-border-error-pressed);
4011
- }
4012
- .ids-tag.ids-tag-text.ids-tag-error:disabled {
4013
- color: var(--ids-comp-tag-text-color-fg-label-error-disabled);
4014
- background: var(--ids-comp-tag-text-color-bg-error-disabled);
4015
- border-color: var(--ids-comp-tag-text-color-border-error-disabled);
4016
- }
4017
- .ids-tag.ids-tag-text.ids-tag-success {
4018
- color: var(--ids-comp-tag-text-color-fg-label-success-enabled);
4019
- background: var(--ids-comp-tag-text-color-bg-success-enabled);
4020
- border-color: var(--ids-comp-tag-text-color-border-success-enabled);
4021
- }
4022
- .ids-tag.ids-tag-text.ids-tag-success:hover {
4023
- color: var(--ids-comp-tag-text-color-fg-label-success-hovered);
4024
- background: var(--ids-comp-tag-text-color-bg-success-hovered);
4025
- border-color: var(--ids-comp-tag-text-color-border-success-hovered);
4026
- }
4027
- .ids-tag.ids-tag-text.ids-tag-success:focus {
4028
- color: var(--ids-comp-tag-text-color-fg-label-success-focused);
4029
- background: var(--ids-comp-tag-text-color-bg-success-focused);
4030
- border-color: var(--ids-comp-tag-text-color-border-success-focused);
4031
- }
4032
- .ids-tag.ids-tag-text.ids-tag-success:active {
4033
- color: var(--ids-comp-tag-text-color-fg-label-success-pressed);
4034
- background: var(--ids-comp-tag-text-color-bg-success-pressed);
4035
- border-color: var(--ids-comp-tag-text-color-border-success-pressed);
4036
- }
4037
- .ids-tag.ids-tag-text.ids-tag-success:disabled {
4038
- color: var(--ids-comp-tag-text-color-fg-label-success-disabled);
4039
- background: var(--ids-comp-tag-text-color-bg-success-disabled);
4040
- border-color: var(--ids-comp-tag-text-color-border-success-disabled);
4041
- }
4042
- .ids-tag.ids-tag-text.ids-tag-warning {
4043
- color: var(--ids-comp-tag-text-color-fg-label-warning-enabled);
4044
- background: var(--ids-comp-tag-text-color-bg-warning-enabled);
4045
- border-color: var(--ids-comp-tag-text-color-border-warning-enabled);
4046
- }
4047
- .ids-tag.ids-tag-text.ids-tag-warning:hover {
4048
- color: var(--ids-comp-tag-text-color-fg-label-warning-hovered);
4049
- background: var(--ids-comp-tag-text-color-bg-warning-hovered);
4050
- border-color: var(--ids-comp-tag-text-color-border-warning-hovered);
4051
- }
4052
- .ids-tag.ids-tag-text.ids-tag-warning:focus {
4053
- color: var(--ids-comp-tag-text-color-fg-label-warning-focused);
4054
- background: var(--ids-comp-tag-text-color-bg-warning-focused);
4055
- border-color: var(--ids-comp-tag-text-color-border-warning-focused);
4056
- }
4057
- .ids-tag.ids-tag-text.ids-tag-warning:active {
4058
- color: var(--ids-comp-tag-text-color-fg-label-warning-pressed);
4059
- background: var(--ids-comp-tag-text-color-bg-warning-pressed);
4060
- border-color: var(--ids-comp-tag-text-color-border-warning-pressed);
4061
- }
4062
- .ids-tag.ids-tag-text.ids-tag-warning:disabled {
4063
- color: var(--ids-comp-tag-text-color-fg-label-warning-disabled);
4064
- background: var(--ids-comp-tag-text-color-bg-warning-disabled);
4065
- border-color: var(--ids-comp-tag-text-color-border-warning-disabled);
4066
- }
4067
- .ids-tag.ids-tag-text.ids-tag-light {
4068
- color: var(--ids-comp-tag-text-color-fg-label-light-enabled);
4069
- background: var(--ids-comp-tag-text-color-bg-light-enabled);
4070
- border-color: var(--ids-comp-tag-text-color-border-light-enabled);
4071
- }
4072
- .ids-tag.ids-tag-text.ids-tag-light:hover {
4073
- color: var(--ids-comp-tag-text-color-fg-label-light-hovered);
4074
- background: var(--ids-comp-tag-text-color-bg-light-hovered);
4075
- border-color: var(--ids-comp-tag-text-color-border-light-hovered);
4076
- }
4077
- .ids-tag.ids-tag-text.ids-tag-light:focus {
4078
- color: var(--ids-comp-tag-text-color-fg-label-light-focused);
4079
- background: var(--ids-comp-tag-text-color-bg-light-focused);
4080
- border-color: var(--ids-comp-tag-text-color-border-light-focused);
4081
- }
4082
- .ids-tag.ids-tag-text.ids-tag-light:active {
4083
- color: var(--ids-comp-tag-text-color-fg-label-light-pressed);
4084
- background: var(--ids-comp-tag-text-color-bg-light-pressed);
4085
- border-color: var(--ids-comp-tag-text-color-border-light-pressed);
4086
- }
4087
- .ids-tag.ids-tag-text.ids-tag-light:disabled {
4088
- color: var(--ids-comp-tag-text-color-fg-label-light-disabled);
4089
- background: var(--ids-comp-tag-text-color-bg-light-disabled);
4090
- border-color: var(--ids-comp-tag-text-color-border-light-disabled);
4091
- }
4092
- .ids-tag.ids-tag-text.ids-tag-dark {
4093
- color: var(--ids-comp-tag-text-color-fg-label-dark-enabled);
4094
- background: var(--ids-comp-tag-text-color-bg-dark-enabled);
4095
- border-color: var(--ids-comp-tag-text-color-border-dark-enabled);
4096
- }
4097
- .ids-tag.ids-tag-text.ids-tag-dark:hover {
4098
- color: var(--ids-comp-tag-text-color-fg-label-dark-hovered);
4099
- background: var(--ids-comp-tag-text-color-bg-dark-hovered);
4100
- border-color: var(--ids-comp-tag-text-color-border-dark-hovered);
4101
- }
4102
- .ids-tag.ids-tag-text.ids-tag-dark:focus {
4103
- color: var(--ids-comp-tag-text-color-fg-label-dark-focused);
4104
- background: var(--ids-comp-tag-text-color-bg-dark-focused);
4105
- border-color: var(--ids-comp-tag-text-color-border-dark-focused);
4106
- }
4107
- .ids-tag.ids-tag-text.ids-tag-dark:active {
4108
- color: var(--ids-comp-tag-text-color-fg-label-dark-pressed);
4109
- background: var(--ids-comp-tag-text-color-bg-dark-pressed);
4110
- border-color: var(--ids-comp-tag-text-color-border-dark-pressed);
4111
- }
4112
- .ids-tag.ids-tag-text.ids-tag-dark:disabled {
4113
- color: var(--ids-comp-tag-text-color-fg-label-dark-disabled);
4114
- background: var(--ids-comp-tag-text-color-bg-dark-disabled);
4115
- border-color: var(--ids-comp-tag-text-color-border-dark-disabled);
4116
- }
4117
- .ids-tag.ids-tag-text.ids-tag-surface {
4118
- color: var(--ids-comp-tag-text-color-fg-label-surface-enabled);
4119
- background: var(--ids-comp-tag-text-color-bg-surface-enabled);
4120
- border-color: var(--ids-comp-tag-text-color-border-surface-enabled);
4121
- }
4122
- .ids-tag.ids-tag-text.ids-tag-surface:hover {
4123
- color: var(--ids-comp-tag-text-color-fg-label-surface-hovered);
4124
- background: var(--ids-comp-tag-text-color-bg-surface-hovered);
4125
- border-color: var(--ids-comp-tag-text-color-border-surface-hovered);
4126
- }
4127
- .ids-tag.ids-tag-text.ids-tag-surface:focus {
4128
- color: var(--ids-comp-tag-text-color-fg-label-surface-focused);
4129
- background: var(--ids-comp-tag-text-color-bg-surface-focused);
4130
- border-color: var(--ids-comp-tag-text-color-border-surface-focused);
4131
- }
4132
- .ids-tag.ids-tag-text.ids-tag-surface:active {
4133
- color: var(--ids-comp-tag-text-color-fg-label-surface-pressed);
4134
- background: var(--ids-comp-tag-text-color-bg-surface-pressed);
4135
- border-color: var(--ids-comp-tag-text-color-border-surface-pressed);
4136
- }
4137
- .ids-tag.ids-tag-text.ids-tag-surface:disabled {
4138
- color: var(--ids-comp-tag-text-color-fg-label-surface-disabled);
4139
- background: var(--ids-comp-tag-text-color-bg-surface-disabled);
4140
- border-color: var(--ids-comp-tag-text-color-border-surface-disabled);
4141
4381
  }