@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
@@ -7,12 +7,13 @@ module.exports = function ComponentsPlugin() {
7
7
  flexDirection: 'column',
8
8
  alignItems: 'flex-start',
9
9
  width: '100%',
10
- background: 'var(--ids-comp-accordion-item-color-bg-enabled)',
10
+ background: 'var(--ids-comp-accordion-item-color-bg-default)',
11
11
  },
12
12
  '.ids-accordion>.ids-accordion-summary': {
13
13
  display: 'flex',
14
14
  alignItems: 'center',
15
15
  width: '100%',
16
+ boxSizing: 'border-box',
16
17
  borderStyle: 'solid',
17
18
  cursor: 'pointer',
18
19
  },
@@ -35,111 +36,106 @@ module.exports = function ComponentsPlugin() {
35
36
  '.ids-accordion>.ids-accordion-content': {
36
37
  display: 'flex',
37
38
  flexDirection: 'column',
38
- background: 'var(--ids-comp-accordion-details-color-bg-enabled)',
39
+ background: 'var(--ids-comp-accordion-details-color-bg-default)',
39
40
  },
40
41
  '.ids-accordion.ids-accordion-compact': {
41
- padding: 'var(--ids-comp-size-accordion-item-size-padding-y-compact) var(--ids-comp-size-accordion-item-size-padding-x-compact)',
42
- gap: 'var(--ids-comp-size-accordion-item-size-gap-compact)',
43
- borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-compact)',
42
+ padding: 'var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact)',
43
+ gap: 'var(--ids-comp-accordion-item-size-gap-compact)',
44
+ borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-compact)',
44
45
  },
45
46
  '.ids-accordion.ids-accordion-compact>.ids-accordion-summary': {
46
- height: 'var(--ids-comp-size-accordion-summary-size-height-compact)',
47
- padding:
48
- 'var(--ids-comp-size-accordion-summary-size-padding-y-compact) var(--ids-comp-size-accordion-summary-size-padding-x-compact)',
49
- gap: 'var(--ids-comp-size-accordion-summary-size-gap-compact)',
50
- borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-compact)',
51
- borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-compact)',
47
+ height: 'var(--ids-comp-accordion-summary-size-height-compact)',
48
+ padding: 'var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact)',
49
+ gap: 'var(--ids-comp-accordion-summary-size-gap-compact)',
50
+ borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-compact)',
51
+ borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-compact)',
52
52
  },
53
53
  '.ids-accordion.ids-accordion-compact>.ids-accordion-summary>.ids-accordion-title': {
54
- fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-compact)',
55
- fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-compact)',
56
- fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-compact)',
57
- letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-compact)',
58
- lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-compact)',
54
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
55
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
56
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-compact)',
57
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-compact)',
58
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-compact)',
59
59
  },
60
60
  '.ids-accordion.ids-accordion-compact>.ids-accordion-content': {
61
- padding:
62
- 'var(--ids-comp-size-accordion-details-size-padding-y-compact) var(--ids-comp-size-accordion-details-size-padding-x-compact)',
63
- gap: 'var(--ids-comp-size-accordion-details-size-gap-compact)',
61
+ padding: 'var(--ids-comp-accordion-details-size-padding-y-compact) var(--ids-comp-accordion-details-size-padding-x-compact)',
62
+ gap: 'var(--ids-comp-accordion-details-size-gap-compact)',
64
63
  },
65
64
  '.ids-accordion.ids-accordion-comfortable': {
66
- padding:
67
- 'var(--ids-comp-size-accordion-item-size-padding-y-comfortable) var(--ids-comp-size-accordion-item-size-padding-x-comfortable)',
68
- gap: 'var(--ids-comp-size-accordion-item-size-gap-comfortable)',
69
- borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-comfortable)',
65
+ padding: 'var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable)',
66
+ gap: 'var(--ids-comp-accordion-item-size-gap-comfortable)',
67
+ borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-comfortable)',
70
68
  },
71
69
  '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary': {
72
- height: 'var(--ids-comp-size-accordion-summary-size-height-comfortable)',
70
+ height: 'var(--ids-comp-accordion-summary-size-height-comfortable)',
73
71
  padding:
74
- 'var(--ids-comp-size-accordion-summary-size-padding-y-comfortable) var(--ids-comp-size-accordion-summary-size-padding-x-comfortable)',
75
- gap: 'var(--ids-comp-size-accordion-summary-size-gap-comfortable)',
76
- borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-comfortable)',
77
- borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-comfortable)',
72
+ 'var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable)',
73
+ gap: 'var(--ids-comp-accordion-summary-size-gap-comfortable)',
74
+ borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-comfortable)',
75
+ borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-comfortable)',
78
76
  },
79
77
  '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary>.ids-accordion-title': {
80
- fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-comfortable)',
81
- fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-comfortable)',
82
- fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-comfortable)',
83
- letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-comfortable)',
84
- lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-comfortable)',
78
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
79
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
80
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-comfortable)',
81
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable)',
82
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-comfortable)',
85
83
  },
86
84
  '.ids-accordion.ids-accordion-comfortable>.ids-accordion-content': {
87
85
  padding:
88
- 'var(--ids-comp-size-accordion-details-size-padding-y-comfortable) var(--ids-comp-size-accordion-details-size-padding-x-comfortable)',
89
- gap: 'var(--ids-comp-size-accordion-details-size-gap-comfortable)',
86
+ 'var(--ids-comp-accordion-details-size-padding-y-comfortable) var(--ids-comp-accordion-details-size-padding-x-comfortable)',
87
+ gap: 'var(--ids-comp-accordion-details-size-gap-comfortable)',
90
88
  },
91
89
  '.ids-accordion.ids-accordion-spacious': {
92
- padding: 'var(--ids-comp-size-accordion-item-size-padding-y-spacious) var(--ids-comp-size-accordion-item-size-padding-x-spacious)',
93
- gap: 'var(--ids-comp-size-accordion-item-size-gap-spacious)',
94
- borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-spacious)',
90
+ padding: 'var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious)',
91
+ gap: 'var(--ids-comp-accordion-item-size-gap-spacious)',
92
+ borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-spacious)',
95
93
  },
96
94
  '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary': {
97
- height: 'var(--ids-comp-size-accordion-summary-size-height-spacious)',
98
- padding:
99
- 'var(--ids-comp-size-accordion-summary-size-padding-y-spacious) var(--ids-comp-size-accordion-summary-size-padding-x-spacious)',
100
- gap: 'var(--ids-comp-size-accordion-summary-size-gap-spacious)',
101
- borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-spacious)',
102
- borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-spacious)',
95
+ height: 'var(--ids-comp-accordion-summary-size-height-spacious)',
96
+ padding: 'var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious)',
97
+ gap: 'var(--ids-comp-accordion-summary-size-gap-spacious)',
98
+ borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-spacious)',
99
+ borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-spacious)',
103
100
  },
104
101
  '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary>.ids-accordion-title': {
105
- fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-spacious)',
106
- fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-spacious)',
107
- fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-spacious)',
108
- letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-spacious)',
109
- lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-spacious)',
102
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
103
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
104
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-spacious)',
105
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-spacious)',
106
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-spacious)',
110
107
  },
111
108
  '.ids-accordion.ids-accordion-spacious>.ids-accordion-content': {
112
- padding:
113
- 'var(--ids-comp-size-accordion-details-size-padding-y-spacious) var(--ids-comp-size-accordion-details-size-padding-x-spacious)',
114
- gap: 'var(--ids-comp-size-accordion-details-size-gap-spacious)',
109
+ padding: 'var(--ids-comp-accordion-details-size-padding-y-spacious) var(--ids-comp-accordion-details-size-padding-x-spacious)',
110
+ gap: 'var(--ids-comp-accordion-details-size-gap-spacious)',
115
111
  },
116
112
  '.ids-accordion.ids-accordion-dense': {
117
- padding: 'var(--ids-comp-size-accordion-item-size-padding-y-dense) var(--ids-comp-size-accordion-item-size-padding-x-dense)',
118
- gap: 'var(--ids-comp-size-accordion-item-size-gap-dense)',
119
- borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-dense)',
113
+ padding: 'var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense)',
114
+ gap: 'var(--ids-comp-accordion-item-size-gap-dense)',
115
+ borderRadius: 'var(--ids-comp-accordion-item-size-border-radius-dense)',
120
116
  },
121
117
  '.ids-accordion.ids-accordion-dense>.ids-accordion-summary': {
122
- height: 'var(--ids-comp-size-accordion-summary-size-height-dense)',
123
- padding: 'var(--ids-comp-size-accordion-summary-size-padding-y-dense) var(--ids-comp-size-accordion-summary-size-padding-x-dense)',
124
- gap: 'var(--ids-comp-size-accordion-summary-size-gap-dense)',
125
- borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-dense)',
126
- borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-dense)',
118
+ height: 'var(--ids-comp-accordion-summary-size-height-dense)',
119
+ padding: 'var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense)',
120
+ gap: 'var(--ids-comp-accordion-summary-size-gap-dense)',
121
+ borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-dense)',
122
+ borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-dense)',
127
123
  },
128
124
  '.ids-accordion.ids-accordion-dense>.ids-accordion-summary>.ids-accordion-title': {
129
- fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-dense)',
130
- fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-dense)',
131
- fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-dense)',
132
- letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-dense)',
133
- lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-dense)',
125
+ fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
126
+ fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
127
+ fontWeight: 'var(--ids-comp-accordion-summary-typography-font-weight-dense)',
128
+ letterSpacing: 'var(--ids-comp-accordion-summary-typography-letter-spacing-dense)',
129
+ lineHeight: 'var(--ids-comp-accordion-summary-typography-line-height-dense)',
134
130
  },
135
131
  '.ids-accordion.ids-accordion-dense>.ids-accordion-content': {
136
- padding: 'var(--ids-comp-size-accordion-details-size-padding-y-dense) var(--ids-comp-size-accordion-details-size-padding-x-dense)',
137
- gap: 'var(--ids-comp-size-accordion-details-size-gap-dense)',
132
+ padding: 'var(--ids-comp-accordion-details-size-padding-y-dense) var(--ids-comp-accordion-details-size-padding-x-dense)',
133
+ gap: 'var(--ids-comp-accordion-details-size-gap-dense)',
138
134
  },
139
135
  '.ids-accordion.ids-accordion-text>.ids-accordion-summary': {
140
- background: 'var(--ids-comp-accordion-summary-text-color-bg-enabled)',
141
- borderColor: 'var(--ids-comp-accordion-summary-text-color-border-enabled)',
142
- color: 'var(--ids-comp-accordion-summary-text-color-fg-label-enabled)',
136
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
137
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
138
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
143
139
  },
144
140
  '.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover': {
145
141
  background: 'var(--ids-comp-accordion-summary-text-color-bg-hovered)',
@@ -162,9 +158,9 @@ module.exports = function ComponentsPlugin() {
162
158
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
163
159
  },
164
160
  '.ids-accordion.ids-accordion-filled>.ids-accordion-summary': {
165
- background: 'var(--ids-comp-accordion-summary-filled-color-bg-enabled)',
166
- borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-enabled)',
167
- color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-enabled)',
161
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
162
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
163
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
168
164
  },
169
165
  '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover': {
170
166
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-hovered)',
@@ -195,125 +191,119 @@ module.exports = function ComponentsPlugin() {
195
191
  justifyContent: 'center',
196
192
  },
197
193
  '.ids-action-item.ids-action-item-compact': {
198
- gap: 'var(--ids-comp-size-action-item-size-gap-compact)',
199
- borderRadius: 'var(--ids-comp-size-action-item-size-border-radius-compact)',
200
- padding: 'var(--ids-comp-size-action-item-size-padding-y-compact) var(--ids-comp-size-action-item-size-padding-x-compact)',
201
- height: 'var(--ids-comp-size-action-item-size-height-compact)',
202
- fontFamily: 'var(--ids-comp-size-action-item-label-typography-font-family-compact)',
203
- fontSize: 'var(--ids-comp-size-action-item-label-typography-font-size-compact)',
204
- fontWeight: 'var(--ids-comp-size-action-item-label-typography-font-weight-compact)',
205
- letterSpacing: 'var(--ids-comp-size-action-item-label-typography-letter-spacing-compact)',
206
- lineHeight: 'var(--ids-comp-size-action-item-label-typography-line-height-compact)',
194
+ gap: 'var(--ids-comp-action-item-size-gap-compact)',
195
+ borderRadius: 'var(--ids-comp-action-item-size-border-radius-compact)',
196
+ padding: 'var(--ids-comp-action-item-size-padding-y-compact) var(--ids-comp-action-item-size-padding-x-compact)',
197
+ height: 'var(--ids-comp-action-item-size-height-compact)',
198
+ fontFamily: 'var(--ids-comp-action-item-label-typography-font-family-compact)',
199
+ fontSize: 'var(--ids-comp-action-item-label-typography-font-size-compact)',
200
+ fontWeight: 'var(--ids-comp-action-item-label-typography-font-weight-compact)',
201
+ letterSpacing: 'var(--ids-comp-action-item-label-typography-letter-spacing-compact)',
202
+ lineHeight: 'var(--ids-comp-action-item-label-typography-line-height-compact)',
207
203
  },
208
204
  '.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]': {
209
- width: 'var(--ids-comp-action-item-size-compact-icon)',
210
- height: 'var(--ids-comp-action-item-size-compact-icon)',
205
+ width: 'var(--ids-comp-action-item-size-icon-compact)',
206
+ height: 'var(--ids-comp-action-item-size-icon-compact)',
211
207
  },
212
208
  '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface': {
213
- border:
214
- 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-enabled)',
209
+ borderStyle: 'solid',
210
+ borderWidth: 'var(--ids-comp-action-item-size-border-width-compact)',
211
+ borderColor: 'var(--ids-comp-action-item-text-color-border-surface-default)',
215
212
  },
216
213
  '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover': {
217
- border:
218
- 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-hovered)',
214
+ borderColor: 'var(--ids-comp-action-item-text-color-border-surface-hovered)',
219
215
  },
220
216
  '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled': {
221
- border:
222
- 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-disabled)',
217
+ borderColor: 'var(--ids-comp-action-item-text-color-border-surface-disabled)',
223
218
  },
224
219
  '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface': {
225
- border:
226
- 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-enabled)',
220
+ borderStyle: 'solid',
221
+ borderWidth: 'var(--ids-comp-action-item-size-border-width-compact)',
222
+ borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-default)',
227
223
  },
228
224
  '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover': {
229
- border:
230
- 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-hovered)',
225
+ borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-hovered)',
231
226
  },
232
227
  '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled': {
233
- border:
234
- 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-disabled)',
228
+ borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-disabled)',
235
229
  },
236
230
  '.ids-action-item.ids-action-item-comfortable': {
237
- gap: 'var(--ids-comp-size-action-item-size-gap-comfortable)',
238
- borderRadius: 'var(--ids-comp-size-action-item-size-border-radius-comfortable)',
239
- padding: 'var(--ids-comp-size-action-item-size-padding-y-comfortable) var(--ids-comp-size-action-item-size-padding-x-comfortable)',
240
- height: 'var(--ids-comp-size-action-item-size-height-comfortable)',
241
- fontFamily: 'var(--ids-comp-size-action-item-label-typography-font-family-comfortable)',
242
- fontSize: 'var(--ids-comp-size-action-item-label-typography-font-size-comfortable)',
243
- fontWeight: 'var(--ids-comp-size-action-item-label-typography-font-weight-comfortable)',
244
- letterSpacing: 'var(--ids-comp-size-action-item-label-typography-letter-spacing-comfortable)',
245
- lineHeight: 'var(--ids-comp-size-action-item-label-typography-line-height-comfortable)',
231
+ gap: 'var(--ids-comp-action-item-size-gap-comfortable)',
232
+ borderRadius: 'var(--ids-comp-action-item-size-border-radius-comfortable)',
233
+ padding: 'var(--ids-comp-action-item-size-padding-y-comfortable) var(--ids-comp-action-item-size-padding-x-comfortable)',
234
+ height: 'var(--ids-comp-action-item-size-height-comfortable)',
235
+ fontFamily: 'var(--ids-comp-action-item-label-typography-font-family-comfortable)',
236
+ fontSize: 'var(--ids-comp-action-item-label-typography-font-size-comfortable)',
237
+ fontWeight: 'var(--ids-comp-action-item-label-typography-font-weight-comfortable)',
238
+ letterSpacing: 'var(--ids-comp-action-item-label-typography-letter-spacing-comfortable)',
239
+ lineHeight: 'var(--ids-comp-action-item-label-typography-line-height-comfortable)',
246
240
  },
247
241
  '.ids-action-item.ids-action-item-comfortable *[icon-leading],.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)',
242
+ width: 'var(--ids-comp-action-item-size-icon-comfortable)',
243
+ height: 'var(--ids-comp-action-item-size-icon-comfortable)',
250
244
  },
251
245
  '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface': {
252
- border:
253
- 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-enabled)',
246
+ borderStyle: 'solid',
247
+ borderWidth: 'var(--ids-comp-action-item-size-border-width-comfortable)',
248
+ borderColor: 'var(--ids-comp-action-item-text-color-border-surface-default)',
254
249
  },
255
250
  '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover': {
256
- border:
257
- 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-hovered)',
251
+ borderColor: 'var(--ids-comp-action-item-text-color-border-surface-hovered)',
258
252
  },
259
253
  '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled': {
260
- border:
261
- 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-disabled)',
254
+ borderColor: 'var(--ids-comp-action-item-text-color-border-surface-disabled)',
262
255
  },
263
256
  '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface': {
264
- border:
265
- 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-enabled)',
257
+ borderStyle: 'solid',
258
+ borderWidth: 'var(--ids-comp-action-item-size-border-width-comfortable)',
259
+ borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-default)',
266
260
  },
267
261
  '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover': {
268
- border:
269
- 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-hovered)',
262
+ borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-hovered)',
270
263
  },
271
264
  '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled': {
272
- border:
273
- 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-disabled)',
265
+ borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-disabled)',
274
266
  },
275
267
  '.ids-action-item.ids-action-item-spacious': {
276
- gap: 'var(--ids-comp-size-action-item-size-gap-spacious)',
277
- borderRadius: 'var(--ids-comp-size-action-item-size-border-radius-spacious)',
278
- padding: 'var(--ids-comp-size-action-item-size-padding-y-spacious) var(--ids-comp-size-action-item-size-padding-x-spacious)',
279
- height: 'var(--ids-comp-size-action-item-size-height-spacious)',
280
- fontFamily: 'var(--ids-comp-size-action-item-label-typography-font-family-spacious)',
281
- fontSize: 'var(--ids-comp-size-action-item-label-typography-font-size-spacious)',
282
- fontWeight: 'var(--ids-comp-size-action-item-label-typography-font-weight-spacious)',
283
- letterSpacing: 'var(--ids-comp-size-action-item-label-typography-letter-spacing-spacious)',
284
- lineHeight: 'var(--ids-comp-size-action-item-label-typography-line-height-spacious)',
268
+ gap: 'var(--ids-comp-action-item-size-gap-spacious)',
269
+ borderRadius: 'var(--ids-comp-action-item-size-border-radius-spacious)',
270
+ padding: 'var(--ids-comp-action-item-size-padding-y-spacious) var(--ids-comp-action-item-size-padding-x-spacious)',
271
+ height: 'var(--ids-comp-action-item-size-height-spacious)',
272
+ fontFamily: 'var(--ids-comp-action-item-label-typography-font-family-spacious)',
273
+ fontSize: 'var(--ids-comp-action-item-label-typography-font-size-spacious)',
274
+ fontWeight: 'var(--ids-comp-action-item-label-typography-font-weight-spacious)',
275
+ letterSpacing: 'var(--ids-comp-action-item-label-typography-letter-spacing-spacious)',
276
+ lineHeight: 'var(--ids-comp-action-item-label-typography-line-height-spacious)',
285
277
  },
286
278
  '.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]': {
287
- width: 'var(--ids-comp-action-item-size-spacious-icon)',
288
- height: 'var(--ids-comp-action-item-size-spacious-icon)',
279
+ width: 'var(--ids-comp-action-item-size-icon-spacious)',
280
+ height: 'var(--ids-comp-action-item-size-icon-spacious)',
289
281
  },
290
282
  '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface': {
291
- border:
292
- 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-enabled)',
283
+ borderStyle: 'solid',
284
+ borderWidth: 'var(--ids-comp-action-item-size-border-width-spacious)',
285
+ borderColor: 'var(--ids-comp-action-item-text-color-border-surface-default)',
293
286
  },
294
287
  '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover': {
295
- border:
296
- 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-hovered)',
288
+ borderColor: 'var(--ids-comp-action-item-text-color-border-surface-hovered)',
297
289
  },
298
290
  '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled': {
299
- border:
300
- 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-disabled)',
291
+ borderColor: 'var(--ids-comp-action-item-text-color-border-surface-disabled)',
301
292
  },
302
293
  '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface': {
303
- border:
304
- 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-enabled)',
294
+ borderStyle: 'solid',
295
+ borderWidth: 'var(--ids-comp-action-item-size-border-width-spacious)',
296
+ borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-default)',
305
297
  },
306
298
  '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover': {
307
- border:
308
- 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-hovered)',
299
+ borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-hovered)',
309
300
  },
310
301
  '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled': {
311
- border:
312
- 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-disabled)',
302
+ borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-disabled)',
313
303
  },
314
304
  '.ids-action-item.ids-action-item-text.ids-action-item-surface': {
315
- color: 'var(--ids-comp-action-item-text-color-fg-label-surface-enabled)',
316
- background: 'var(--ids-comp-action-item-text-color-bg-surface-enabled)',
305
+ color: 'var(--ids-comp-action-item-text-color-fg-label-surface-default)',
306
+ background: 'var(--ids-comp-action-item-text-color-bg-surface-default)',
317
307
  },
318
308
  '.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active': {
319
309
  color: 'var(--ids-comp-action-item-text-color-fg-label-surface-active)',
@@ -335,8 +325,8 @@ module.exports = function ComponentsPlugin() {
335
325
  background: 'var(--ids-comp-action-item-text-color-bg-surface-disabled)',
336
326
  },
337
327
  '.ids-action-item.ids-action-item-filled.ids-action-item-surface': {
338
- color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-enabled)',
339
- background: 'var(--ids-comp-action-item-filled-color-bg-surface-enabled)',
328
+ color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-default)',
329
+ background: 'var(--ids-comp-action-item-filled-color-bg-surface-default)',
340
330
  },
341
331
  '.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active': {
342
332
  color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-active)',
@@ -357,87 +347,83 @@ module.exports = function ComponentsPlugin() {
357
347
  color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-disabled)',
358
348
  background: 'var(--ids-comp-action-item-filled-color-bg-surface-disabled)',
359
349
  },
360
- '.ids-action-panel': { display: 'flex', width: '22.25rem', flexDirection: 'column', alignItems: 'flex-start' },
350
+ '.ids-action-panel': {
351
+ display: 'flex',
352
+ width: '22.25rem',
353
+ flexDirection: 'column',
354
+ alignItems: 'flex-start',
355
+ boxSizing: 'border-box',
356
+ },
361
357
  '.ids-action-panel.ids-action-panel-compact': {
362
- gap: 'var(--ids-comp-size-action-panel-size-gap-compact)',
363
- padding: 'var(--ids-comp-size-action-panel-size-padding-y-compact) var(--ids-comp-size-action-panel-size-padding-x-compact)',
364
- borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-compact)',
358
+ gap: 'var(--ids-comp-action-panel-size-gap-compact)',
359
+ padding: 'var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact)',
360
+ borderRadius: 'var(--ids-comp-action-panel-size-border-radius-compact)',
365
361
  },
366
362
  '.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined': {
367
- border:
368
- 'var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
363
+ border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
369
364
  },
370
365
  '.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined': {
371
- border:
372
- 'var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
366
+ border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
373
367
  },
374
368
  '.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined': {
375
- border:
376
- 'var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
369
+ border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
377
370
  },
378
371
  '.ids-action-panel.ids-action-panel-comfortable': {
379
- gap: 'var(--ids-comp-size-action-panel-size-gap-comfortable)',
380
- padding:
381
- 'var(--ids-comp-size-action-panel-size-padding-y-comfortable) var(--ids-comp-size-action-panel-size-padding-x-comfortable)',
382
- borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-comfortable)',
372
+ gap: 'var(--ids-comp-action-panel-size-gap-comfortable)',
373
+ padding: 'var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable)',
374
+ borderRadius: 'var(--ids-comp-action-panel-size-border-radius-comfortable)',
383
375
  },
384
376
  '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined': {
385
- border:
386
- 'var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
377
+ border: 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
387
378
  },
388
379
  '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined': {
389
380
  border:
390
- 'var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
381
+ 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
391
382
  },
392
383
  '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined': {
393
384
  border:
394
- 'var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
385
+ 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
395
386
  },
396
387
  '.ids-action-panel.ids-action-panel-spacious': {
397
- gap: 'var(--ids-comp-size-action-panel-size-gap-spacious)',
398
- padding: 'var(--ids-comp-size-action-panel-size-padding-y-spacious) var(--ids-comp-size-action-panel-size-padding-x-spacious)',
399
- borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-spacious)',
388
+ gap: 'var(--ids-comp-action-panel-size-gap-spacious)',
389
+ padding: 'var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious)',
390
+ borderRadius: 'var(--ids-comp-action-panel-size-border-radius-spacious)',
400
391
  },
401
392
  '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined': {
402
- border:
403
- 'var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
393
+ border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
404
394
  },
405
395
  '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined': {
406
- border:
407
- 'var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
396
+ border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
408
397
  },
409
398
  '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined': {
410
- border:
411
- 'var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
399
+ border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
412
400
  },
413
401
  '.ids-action-panel.ids-action-panel-dense': {
414
- gap: 'var(--ids-comp-size-action-panel-size-gap-dense)',
415
- padding: 'var(--ids-comp-size-action-panel-size-padding-y-dense) var(--ids-comp-size-action-panel-size-padding-x-dense)',
416
- borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-dense)',
402
+ gap: 'var(--ids-comp-action-panel-size-gap-dense)',
403
+ padding: 'var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense)',
404
+ borderRadius: 'var(--ids-comp-action-panel-size-border-radius-dense)',
417
405
  },
418
406
  '.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined': {
419
- border: 'var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
407
+ border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
420
408
  },
421
409
  '.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined': {
422
- border:
423
- 'var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
410
+ border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
424
411
  },
425
412
  '.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined': {
426
- border:
427
- 'var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
413
+ border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
428
414
  },
429
415
  '.ids-action-panel.ids-action-panel-filled': {
430
416
  boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
431
- background: 'var(--ids-comp-action-panel-filled-color-bg-light-enabled)',
417
+ background: 'var(--ids-comp-action-panel-filled-color-bg-light-default)',
432
418
  },
433
419
  '.ids-action-panel.ids-action-panel-outlined': {
434
420
  boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
435
- background: 'var(--ids-comp-action-panel-outlined-color-bg-light-enabled)',
421
+ background: 'var(--ids-comp-action-panel-outlined-color-bg-light-default)',
436
422
  },
437
423
  '.ids-action-panel.ids-action-panel-elevated': {
438
424
  boxShadow:
439
- '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)',
440
- background: 'var(--ids-comp-action-panel-elevated-color-bg-light-enabled)',
425
+ '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)',
426
+ background: 'var(--ids-comp-action-panel-elevated-color-bg-light-default)',
441
427
  },
442
428
  '.ids-action-panel button:hover': { borderColor: 'rgba(0,0,0,0)' },
443
429
  '.ids-action-panel button:focus': { outline: 'none !important' },
@@ -449,6 +435,7 @@ module.exports = function ComponentsPlugin() {
449
435
  alignItems: 'center',
450
436
  flexDirection: 'column',
451
437
  justifyContent: 'center',
438
+ borderStyle: 'solid',
452
439
  },
453
440
  '.ids-avatar .ids-avatar-icon': {
454
441
  gap: '10px',
@@ -462,88 +449,88 @@ module.exports = function ComponentsPlugin() {
462
449
  '.ids-avatar .ids-avatar-image': { borderRadius: '50%', verticalAlign: 'middle', maxWidth: 'none' },
463
450
  '.ids-avatar:focus': {
464
451
  outlineOffset: '2px',
465
- outline: 'var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-dark-focused)',
466
- },
467
- '.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)',
452
+ outlineStyle: 'solid',
453
+ outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
454
+ outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
469
455
  },
456
+ '.ids-avatar:focus.ids-avatar-light': { outlineColor: 'var(--ids-comp-avatar-focused-outline-color-light-focused)' },
470
457
  '.ids-avatar:active': { outline: 'none' },
471
458
  '.ids-avatar.ids-avatar-compact': {
472
- width: 'var(--ids-comp-size-avatar-size-height-compact)',
473
- height: 'var(--ids-comp-size-avatar-size-width-compact)',
474
- gap: 'var(--ids-comp-size-avatar-size-gap-compact)',
475
- borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-compact)',
476
- padding: 'var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact)',
477
- border: 'var(--ids-comp-size-avatar-size-border-compact) solid',
478
- fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-compact)',
479
- fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-compact)',
480
- fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-compact)',
481
- letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-compact)',
482
- lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-compact)',
459
+ width: 'var(--ids-comp-avatar-size-height-compact)',
460
+ height: 'var(--ids-comp-avatar-size-width-compact)',
461
+ gap: 'var(--ids-comp-avatar-size-gap-compact)',
462
+ borderRadius: 'var(--ids-comp-avatar-size-border-radius-compact)',
463
+ padding: 'var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact)',
464
+ border: 'var(--ids-comp-avatar-size-border-compact)',
465
+ fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-compact)',
466
+ fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-compact)',
467
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-compact)',
468
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-compact)',
469
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-compact)',
483
470
  },
484
471
  '.ids-avatar.ids-avatar-compact:has(.ids-avatar-image)': { padding: '0' },
485
472
  '.ids-avatar.ids-avatar-compact .ids-avatar-image': {
486
- width: 'var(--ids-comp-size-avatar-size-width-compact)',
487
- height: 'var(--ids-comp-size-avatar-size-height-compact)',
473
+ width: 'var(--ids-comp-avatar-size-width-compact)',
474
+ height: 'var(--ids-comp-avatar-size-height-compact)',
488
475
  },
489
476
  '.ids-avatar.ids-avatar-comfortable': {
490
- width: 'var(--ids-comp-size-avatar-size-height-comfortable)',
491
- height: 'var(--ids-comp-size-avatar-size-width-comfortable)',
492
- gap: 'var(--ids-comp-size-avatar-size-gap-comfortable)',
493
- borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-comfortable)',
494
- padding: 'var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable)',
495
- border: 'var(--ids-comp-size-avatar-size-border-comfortable) solid',
496
- fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-comfortable)',
497
- fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-comfortable)',
498
- fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-comfortable)',
499
- letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-comfortable)',
500
- lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-comfortable)',
477
+ width: 'var(--ids-comp-avatar-size-height-comfortable)',
478
+ height: 'var(--ids-comp-avatar-size-width-comfortable)',
479
+ gap: 'var(--ids-comp-avatar-size-gap-comfortable)',
480
+ borderRadius: 'var(--ids-comp-avatar-size-border-radius-comfortable)',
481
+ padding: 'var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable)',
482
+ border: 'var(--ids-comp-avatar-size-border-comfortable)',
483
+ fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-comfortable)',
484
+ fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-comfortable)',
485
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-comfortable)',
486
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable)',
487
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-comfortable)',
501
488
  },
502
489
  '.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image)': { padding: '0' },
503
490
  '.ids-avatar.ids-avatar-comfortable .ids-avatar-image': {
504
- width: 'var(--ids-comp-size-avatar-size-width-comfortable)',
505
- height: 'var(--ids-comp-size-avatar-size-height-comfortable)',
491
+ width: 'var(--ids-comp-avatar-size-width-comfortable)',
492
+ height: 'var(--ids-comp-avatar-size-height-comfortable)',
506
493
  },
507
494
  '.ids-avatar.ids-avatar-spacious': {
508
- width: 'var(--ids-comp-size-avatar-size-height-spacious)',
509
- height: 'var(--ids-comp-size-avatar-size-width-spacious)',
510
- gap: 'var(--ids-comp-size-avatar-size-gap-spacious)',
511
- borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-spacious)',
512
- padding: 'var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious)',
513
- border: 'var(--ids-comp-size-avatar-size-border-spacious) solid',
514
- fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-spacious)',
515
- fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-spacious)',
516
- fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-spacious)',
517
- letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-spacious)',
518
- lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-spacious)',
495
+ width: 'var(--ids-comp-avatar-size-height-spacious)',
496
+ height: 'var(--ids-comp-avatar-size-width-spacious)',
497
+ gap: 'var(--ids-comp-avatar-size-gap-spacious)',
498
+ borderRadius: 'var(--ids-comp-avatar-size-border-radius-spacious)',
499
+ padding: 'var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious)',
500
+ border: 'var(--ids-comp-avatar-size-border-spacious)',
501
+ fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-spacious)',
502
+ fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-spacious)',
503
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-spacious)',
504
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-spacious)',
505
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-spacious)',
519
506
  },
520
507
  '.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image)': { padding: '0' },
521
508
  '.ids-avatar.ids-avatar-spacious .ids-avatar-image': {
522
- width: 'var(--ids-comp-size-avatar-size-width-spacious)',
523
- height: 'var(--ids-comp-size-avatar-size-height-spacious)',
509
+ width: 'var(--ids-comp-avatar-size-width-spacious)',
510
+ height: 'var(--ids-comp-avatar-size-height-spacious)',
524
511
  },
525
512
  '.ids-avatar.ids-avatar-dense': {
526
- width: 'var(--ids-comp-size-avatar-size-height-dense)',
527
- height: 'var(--ids-comp-size-avatar-size-width-dense)',
528
- gap: 'var(--ids-comp-size-avatar-size-gap-dense)',
529
- borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-dense)',
530
- padding: 'var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense)',
531
- border: 'var(--ids-comp-size-avatar-size-border-dense) solid',
532
- fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-dense)',
533
- fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-dense)',
534
- fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-dense)',
535
- letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-dense)',
536
- lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-dense)',
513
+ width: 'var(--ids-comp-avatar-size-height-dense)',
514
+ height: 'var(--ids-comp-avatar-size-width-dense)',
515
+ gap: 'var(--ids-comp-avatar-size-gap-dense)',
516
+ borderRadius: 'var(--ids-comp-avatar-size-border-radius-dense)',
517
+ padding: 'var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense)',
518
+ border: 'var(--ids-comp-avatar-size-border-dense)',
519
+ fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-dense)',
520
+ fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-dense)',
521
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-dense)',
522
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-dense)',
523
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-dense)',
537
524
  },
538
525
  '.ids-avatar.ids-avatar-dense:has(.ids-avatar-image)': { padding: '0' },
539
526
  '.ids-avatar.ids-avatar-dense .ids-avatar-image': {
540
- width: 'var(--ids-comp-size-avatar-size-width-dense)',
541
- height: 'var(--ids-comp-size-avatar-size-height-dense)',
527
+ width: 'var(--ids-comp-avatar-size-width-dense)',
528
+ height: 'var(--ids-comp-avatar-size-height-dense)',
542
529
  },
543
530
  '.ids-avatar.ids-avatar-primary': {
544
- color: 'var(--ids-comp-avatar-color-fg-primary-enabled)',
545
- background: 'var(--ids-comp-avatar-color-bg-primary-enabled)',
546
- borderColor: 'var(--ids-comp-avatar-color-border-primary-enabled)',
531
+ color: 'var(--ids-comp-avatar-color-fg-primary-default)',
532
+ background: 'var(--ids-comp-avatar-color-bg-primary-default)',
533
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-default)',
547
534
  },
548
535
  '.ids-avatar.ids-avatar-primary:hover': {
549
536
  background: 'var(--ids-comp-avatar-color-bg-primary-hovered)',
@@ -557,11 +544,11 @@ module.exports = function ComponentsPlugin() {
557
544
  background: 'var(--ids-comp-avatar-color-bg-primary-pressed)',
558
545
  borderColor: 'var(--ids-comp-avatar-color-border-primary-pressed)',
559
546
  },
560
- '.ids-avatar.ids-avatar-primary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-primary-enabled)' },
547
+ '.ids-avatar.ids-avatar-primary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-primary-default)' },
561
548
  '.ids-avatar.ids-avatar-secondary': {
562
- color: 'var(--ids-comp-avatar-color-fg-secondary-enabled)',
563
- background: 'var(--ids-comp-avatar-color-bg-secondary-enabled)',
564
- borderColor: 'var(--ids-comp-avatar-color-border-secondary-enabled)',
549
+ color: 'var(--ids-comp-avatar-color-fg-secondary-default)',
550
+ background: 'var(--ids-comp-avatar-color-bg-secondary-default)',
551
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-default)',
565
552
  },
566
553
  '.ids-avatar.ids-avatar-secondary:hover': {
567
554
  background: 'var(--ids-comp-avatar-color-bg-secondary-hovered)',
@@ -575,83 +562,11 @@ module.exports = function ComponentsPlugin() {
575
562
  background: 'var(--ids-comp-avatar-color-bg-secondary-pressed)',
576
563
  borderColor: 'var(--ids-comp-avatar-color-border-secondary-pressed)',
577
564
  },
578
- '.ids-avatar.ids-avatar-secondary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-secondary-enabled)' },
579
- '.ids-avatar.ids-avatar-brand': {
580
- color: 'var(--ids-comp-avatar-color-fg-brand-enabled)',
581
- background: 'var(--ids-comp-avatar-color-bg-brand-enabled)',
582
- borderColor: 'var(--ids-comp-avatar-color-border-brand-enabled)',
583
- },
584
- '.ids-avatar.ids-avatar-brand:hover': {
585
- background: 'var(--ids-comp-avatar-color-bg-brand-hovered)',
586
- borderColor: 'var(--ids-comp-avatar-color-border-brand-hovered)',
587
- },
588
- '.ids-avatar.ids-avatar-brand:focus': {
589
- background: 'var(--ids-comp-avatar-color-bg-brand-focused)',
590
- borderColor: 'var(--ids-comp-avatar-color-border-brand-focused)',
591
- },
592
- '.ids-avatar.ids-avatar-brand:active': {
593
- background: 'var(--ids-comp-avatar-color-bg-brand-pressed)',
594
- borderColor: 'var(--ids-comp-avatar-color-border-brand-pressed)',
595
- },
596
- '.ids-avatar.ids-avatar-brand .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-brand-enabled)' },
597
- '.ids-avatar.ids-avatar-error': {
598
- color: 'var(--ids-comp-avatar-color-fg-error-enabled)',
599
- background: 'var(--ids-comp-avatar-color-bg-error-enabled)',
600
- borderColor: 'var(--ids-comp-avatar-color-border-error-enabled)',
601
- },
602
- '.ids-avatar.ids-avatar-error:hover': {
603
- background: 'var(--ids-comp-avatar-color-bg-error-hovered)',
604
- borderColor: 'var(--ids-comp-avatar-color-border-error-hovered)',
605
- },
606
- '.ids-avatar.ids-avatar-error:focus': {
607
- background: 'var(--ids-comp-avatar-color-bg-error-focused)',
608
- borderColor: 'var(--ids-comp-avatar-color-border-error-focused)',
609
- },
610
- '.ids-avatar.ids-avatar-error:active': {
611
- background: 'var(--ids-comp-avatar-color-bg-error-pressed)',
612
- borderColor: 'var(--ids-comp-avatar-color-border-error-pressed)',
613
- },
614
- '.ids-avatar.ids-avatar-error .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-error-enabled)' },
615
- '.ids-avatar.ids-avatar-success': {
616
- color: 'var(--ids-comp-avatar-color-fg-success-enabled)',
617
- background: 'var(--ids-comp-avatar-color-bg-success-enabled)',
618
- borderColor: 'var(--ids-comp-avatar-color-border-success-enabled)',
619
- },
620
- '.ids-avatar.ids-avatar-success:hover': {
621
- background: 'var(--ids-comp-avatar-color-bg-success-hovered)',
622
- borderColor: 'var(--ids-comp-avatar-color-border-success-hovered)',
623
- },
624
- '.ids-avatar.ids-avatar-success:focus': {
625
- background: 'var(--ids-comp-avatar-color-bg-success-focused)',
626
- borderColor: 'var(--ids-comp-avatar-color-border-success-focused)',
627
- },
628
- '.ids-avatar.ids-avatar-success:active': {
629
- background: 'var(--ids-comp-avatar-color-bg-success-pressed)',
630
- borderColor: 'var(--ids-comp-avatar-color-border-success-pressed)',
631
- },
632
- '.ids-avatar.ids-avatar-success .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-success-enabled)' },
633
- '.ids-avatar.ids-avatar-warning': {
634
- color: 'var(--ids-comp-avatar-color-fg-warning-enabled)',
635
- background: 'var(--ids-comp-avatar-color-bg-warning-enabled)',
636
- borderColor: 'var(--ids-comp-avatar-color-border-warning-enabled)',
637
- },
638
- '.ids-avatar.ids-avatar-warning:hover': {
639
- background: 'var(--ids-comp-avatar-color-bg-warning-hovered)',
640
- borderColor: 'var(--ids-comp-avatar-color-border-warning-hovered)',
641
- },
642
- '.ids-avatar.ids-avatar-warning:focus': {
643
- background: 'var(--ids-comp-avatar-color-bg-warning-focused)',
644
- borderColor: 'var(--ids-comp-avatar-color-border-warning-focused)',
645
- },
646
- '.ids-avatar.ids-avatar-warning:active': {
647
- background: 'var(--ids-comp-avatar-color-bg-warning-pressed)',
648
- borderColor: 'var(--ids-comp-avatar-color-border-warning-pressed)',
649
- },
650
- '.ids-avatar.ids-avatar-warning .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-warning-enabled)' },
565
+ '.ids-avatar.ids-avatar-secondary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-secondary-default)' },
651
566
  '.ids-avatar.ids-avatar-light': {
652
- color: 'var(--ids-comp-avatar-color-fg-light-enabled)',
653
- background: 'var(--ids-comp-avatar-color-bg-light-enabled)',
654
- borderColor: 'var(--ids-comp-avatar-color-border-light-enabled)',
567
+ color: 'var(--ids-comp-avatar-color-fg-light-default)',
568
+ background: 'var(--ids-comp-avatar-color-bg-light-default)',
569
+ borderColor: 'var(--ids-comp-avatar-color-border-light-default)',
655
570
  },
656
571
  '.ids-avatar.ids-avatar-light:hover': {
657
572
  background: 'var(--ids-comp-avatar-color-bg-light-hovered)',
@@ -665,11 +580,11 @@ module.exports = function ComponentsPlugin() {
665
580
  background: 'var(--ids-comp-avatar-color-bg-light-pressed)',
666
581
  borderColor: 'var(--ids-comp-avatar-color-border-light-pressed)',
667
582
  },
668
- '.ids-avatar.ids-avatar-light .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-light-enabled)' },
583
+ '.ids-avatar.ids-avatar-light .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-light-default)' },
669
584
  '.ids-avatar.ids-avatar-dark': {
670
- color: 'var(--ids-comp-avatar-color-fg-dark-enabled)',
671
- background: 'var(--ids-comp-avatar-color-bg-dark-enabled)',
672
- borderColor: 'var(--ids-comp-avatar-color-border-dark-enabled)',
585
+ color: 'var(--ids-comp-avatar-color-fg-dark-default)',
586
+ background: 'var(--ids-comp-avatar-color-bg-dark-default)',
587
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-default)',
673
588
  },
674
589
  '.ids-avatar.ids-avatar-dark:hover': {
675
590
  background: 'var(--ids-comp-avatar-color-bg-dark-hovered)',
@@ -683,11 +598,11 @@ module.exports = function ComponentsPlugin() {
683
598
  background: 'var(--ids-comp-avatar-color-bg-dark-pressed)',
684
599
  borderColor: 'var(--ids-comp-avatar-color-border-dark-pressed)',
685
600
  },
686
- '.ids-avatar.ids-avatar-dark .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-dark-enabled)' },
601
+ '.ids-avatar.ids-avatar-dark .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-dark-default)' },
687
602
  '.ids-avatar.ids-avatar-surface': {
688
- color: 'var(--ids-comp-avatar-color-fg-surface-enabled)',
689
- background: 'var(--ids-comp-avatar-color-bg-surface-enabled)',
690
- borderColor: 'var(--ids-comp-avatar-color-border-surface-enabled)',
603
+ color: 'var(--ids-comp-avatar-color-fg-surface-default)',
604
+ background: 'var(--ids-comp-avatar-color-bg-surface-default)',
605
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-default)',
691
606
  },
692
607
  '.ids-avatar.ids-avatar-surface:hover': {
693
608
  background: 'var(--ids-comp-avatar-color-bg-surface-hovered)',
@@ -701,8 +616,15 @@ module.exports = function ComponentsPlugin() {
701
616
  background: 'var(--ids-comp-avatar-color-bg-surface-pressed)',
702
617
  borderColor: 'var(--ids-comp-avatar-color-border-surface-pressed)',
703
618
  },
704
- '.ids-avatar.ids-avatar-surface .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-surface-enabled)' },
705
- '.ids-button': { flexShrink: 0, width: 'fit-content', alignItems: 'center', display: 'inline-flex', justifyContent: 'center' },
619
+ '.ids-avatar.ids-avatar-surface .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-surface-default)' },
620
+ '.ids-button': {
621
+ flexShrink: 0,
622
+ width: 'fit-content',
623
+ alignItems: 'center',
624
+ display: 'inline-flex',
625
+ justifyContent: 'center',
626
+ borderStyle: 'solid',
627
+ },
706
628
  '.ids-button:focus': {
707
629
  outlineOffset: '2px',
708
630
  outline: 'var(--ids-comp-buttons-focused-outline-size-outline) solid var(--ids-comp-buttons-focused-outline-color-dark-focused)',
@@ -716,85 +638,85 @@ module.exports = function ComponentsPlugin() {
716
638
  justifyContent: 'center',
717
639
  },
718
640
  '.ids-button.ids-button-compact': {
719
- gap: 'var(--ids-comp-size-buttons-size-gap-compact)',
720
- height: 'var(--ids-comp-size-buttons-size-height-compact)',
721
- minWidth: 'var(--ids-comp-size-buttons-size-min-width-compact)',
722
- padding: 'var(--ids-comp-size-buttons-size-padding-y-compact) var(--ids-comp-size-buttons-size-padding-x-compact)',
723
- borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-compact)',
724
- border: 'var(--ids-comp-size-buttons-size-border-width-compact) solid',
641
+ gap: 'var(--ids-comp-buttons-size-gap-compact)',
642
+ height: 'var(--ids-comp-buttons-size-height-compact)',
643
+ minWidth: 'var(--ids-comp-buttons-size-min-width-compact)',
644
+ padding: 'var(--ids-comp-buttons-size-padding-y-compact) var(--ids-comp-buttons-size-padding-x-compact)',
645
+ borderRadius: 'var(--ids-comp-buttons-size-border-radius-compact)',
646
+ borderWidth: 'var(--ids-comp-buttons-size-border-width-compact)',
725
647
  },
726
648
  '.ids-button.ids-button-compact>.ids-button-label': {
727
- fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-compact)',
728
- fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-compact)',
729
- fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-compact)',
730
- letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-compact)',
731
- lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-compact)',
649
+ fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-compact)',
650
+ fontSize: 'var(--ids-comp-buttons-label-typography-font-size-compact)',
651
+ fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-compact)',
652
+ letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-compact)',
653
+ lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-compact)',
732
654
  },
733
655
  '.ids-button.ids-button-compact *[icon-leading],.ids-button.ids-button-compact *[icon-trailing]': {
734
- width: 'var(--ids-comp-size-buttons-size-icon-compact)',
735
- height: 'var(--ids-comp-size-buttons-size-icon-compact)',
656
+ width: 'var(--ids-comp-buttons-size-icon-compact)',
657
+ height: 'var(--ids-comp-buttons-size-icon-compact)',
736
658
  },
737
659
  '.ids-button.ids-button-comfortable': {
738
- gap: 'var(--ids-comp-size-buttons-size-gap-comfortable)',
739
- height: 'var(--ids-comp-size-buttons-size-height-comfortable)',
740
- minWidth: 'var(--ids-comp-size-buttons-size-min-width-comfortable)',
741
- padding: 'var(--ids-comp-size-buttons-size-padding-y-comfortable) var(--ids-comp-size-buttons-size-padding-x-comfortable)',
742
- borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-comfortable)',
743
- border: 'var(--ids-comp-size-buttons-size-border-width-comfortable) solid',
660
+ gap: 'var(--ids-comp-buttons-size-gap-comfortable)',
661
+ height: 'var(--ids-comp-buttons-size-height-comfortable)',
662
+ minWidth: 'var(--ids-comp-buttons-size-min-width-comfortable)',
663
+ padding: 'var(--ids-comp-buttons-size-padding-y-comfortable) var(--ids-comp-buttons-size-padding-x-comfortable)',
664
+ borderRadius: 'var(--ids-comp-buttons-size-border-radius-comfortable)',
665
+ borderWidth: 'var(--ids-comp-buttons-size-border-width-comfortable)',
744
666
  },
745
667
  '.ids-button.ids-button-comfortable>.ids-button-label': {
746
- fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-comfortable)',
747
- fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-comfortable)',
748
- fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-comfortable)',
749
- letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-comfortable)',
750
- lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-comfortable)',
668
+ fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-comfortable)',
669
+ fontSize: 'var(--ids-comp-buttons-label-typography-font-size-comfortable)',
670
+ fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-comfortable)',
671
+ letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-comfortable)',
672
+ lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-comfortable)',
751
673
  },
752
674
  '.ids-button.ids-button-comfortable *[icon-leading],.ids-button.ids-button-comfortable *[icon-trailing]': {
753
- width: 'var(--ids-comp-size-buttons-size-icon-comfortable)',
754
- height: 'var(--ids-comp-size-buttons-size-icon-comfortable)',
675
+ width: 'var(--ids-comp-buttons-size-icon-comfortable)',
676
+ height: 'var(--ids-comp-buttons-size-icon-comfortable)',
755
677
  },
756
678
  '.ids-button.ids-button-spacious': {
757
- gap: 'var(--ids-comp-size-buttons-size-gap-spacious)',
758
- height: 'var(--ids-comp-size-buttons-size-height-spacious)',
759
- minWidth: 'var(--ids-comp-size-buttons-size-min-width-spacious)',
760
- padding: 'var(--ids-comp-size-buttons-size-padding-y-spacious) var(--ids-comp-size-buttons-size-padding-x-spacious)',
761
- borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-spacious)',
762
- border: 'var(--ids-comp-size-buttons-size-border-width-spacious) solid',
679
+ gap: 'var(--ids-comp-buttons-size-gap-spacious)',
680
+ height: 'var(--ids-comp-buttons-size-height-spacious)',
681
+ minWidth: 'var(--ids-comp-buttons-size-min-width-spacious)',
682
+ padding: 'var(--ids-comp-buttons-size-padding-y-spacious) var(--ids-comp-buttons-size-padding-x-spacious)',
683
+ borderRadius: 'var(--ids-comp-buttons-size-border-radius-spacious)',
684
+ borderWidth: 'var(--ids-comp-buttons-size-border-width-spacious)',
763
685
  },
764
686
  '.ids-button.ids-button-spacious>.ids-button-label': {
765
- fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-spacious)',
766
- fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-spacious)',
767
- fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-spacious)',
768
- letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-spacious)',
769
- lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-spacious)',
687
+ fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-spacious)',
688
+ fontSize: 'var(--ids-comp-buttons-label-typography-font-size-spacious)',
689
+ fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-spacious)',
690
+ letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-spacious)',
691
+ lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-spacious)',
770
692
  },
771
693
  '.ids-button.ids-button-spacious *[icon-leading],.ids-button.ids-button-spacious *[icon-trailing]': {
772
- width: 'var(--ids-comp-size-buttons-size-icon-spacious)',
773
- height: 'var(--ids-comp-size-buttons-size-icon-spacious)',
694
+ width: 'var(--ids-comp-buttons-size-icon-spacious)',
695
+ height: 'var(--ids-comp-buttons-size-icon-spacious)',
774
696
  },
775
697
  '.ids-button.ids-button-dense': {
776
- gap: 'var(--ids-comp-size-buttons-size-gap-dense)',
777
- height: 'var(--ids-comp-size-buttons-size-height-dense)',
778
- minWidth: 'var(--ids-comp-size-buttons-size-min-width-dense)',
779
- padding: 'var(--ids-comp-size-buttons-size-padding-y-dense) var(--ids-comp-size-buttons-size-padding-x-dense)',
780
- borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-dense)',
781
- border: 'var(--ids-comp-size-buttons-size-border-width-dense) solid',
698
+ gap: 'var(--ids-comp-buttons-size-gap-dense)',
699
+ height: 'var(--ids-comp-buttons-size-height-dense)',
700
+ minWidth: 'var(--ids-comp-buttons-size-min-width-dense)',
701
+ padding: 'var(--ids-comp-buttons-size-padding-y-dense) var(--ids-comp-buttons-size-padding-x-dense)',
702
+ borderRadius: 'var(--ids-comp-buttons-size-border-radius-dense)',
703
+ borderWidth: 'var(--ids-comp-buttons-size-border-width-dense)',
782
704
  },
783
705
  '.ids-button.ids-button-dense>.ids-button-label': {
784
- fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-dense)',
785
- fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-dense)',
786
- fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-dense)',
787
- letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-dense)',
788
- lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-dense)',
706
+ fontFamily: 'var(--ids-comp-buttons-label-typography-font-family-dense)',
707
+ fontSize: 'var(--ids-comp-buttons-label-typography-font-size-dense)',
708
+ fontWeight: 'var(--ids-comp-buttons-label-typography-font-weight-dense)',
709
+ letterSpacing: 'var(--ids-comp-buttons-label-typography-letter-spacing-dense)',
710
+ lineHeight: 'var(--ids-comp-buttons-label-typography-line-height-dense)',
789
711
  },
790
712
  '.ids-button.ids-button-dense *[icon-leading],.ids-button.ids-button-dense *[icon-trailing]': {
791
- width: 'var(--ids-comp-size-buttons-size-icon-dense)',
792
- height: 'var(--ids-comp-size-buttons-size-icon-dense)',
713
+ width: 'var(--ids-comp-buttons-size-icon-dense)',
714
+ height: 'var(--ids-comp-buttons-size-icon-dense)',
793
715
  },
794
716
  '.ids-button.ids-button-filled.ids-button-primary': {
795
- color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-enabled)',
796
- background: 'var(--ids-comp-buttons-filled-color-bg-primary-enabled)',
797
- borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-enabled)',
717
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-default)',
718
+ background: 'var(--ids-comp-buttons-filled-color-bg-primary-default)',
719
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-default)',
798
720
  },
799
721
  '.ids-button.ids-button-filled.ids-button-primary:hover': {
800
722
  background: 'var(--ids-comp-buttons-filled-color-bg-primary-hovered)',
@@ -818,9 +740,9 @@ module.exports = function ComponentsPlugin() {
818
740
  borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-disabled)',
819
741
  },
820
742
  '.ids-button.ids-button-filled.ids-button-secondary': {
821
- color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-enabled)',
822
- background: 'var(--ids-comp-buttons-filled-color-bg-secondary-enabled)',
823
- borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-enabled)',
743
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-default)',
744
+ background: 'var(--ids-comp-buttons-filled-color-bg-secondary-default)',
745
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-default)',
824
746
  },
825
747
  '.ids-button.ids-button-filled.ids-button-secondary:hover': {
826
748
  background: 'var(--ids-comp-buttons-filled-color-bg-secondary-hovered)',
@@ -844,9 +766,9 @@ module.exports = function ComponentsPlugin() {
844
766
  borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-disabled)',
845
767
  },
846
768
  '.ids-button.ids-button-filled.ids-button-brand': {
847
- color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-enabled)',
848
- background: 'var(--ids-comp-buttons-filled-color-bg-brand-enabled)',
849
- borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-enabled)',
769
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-default)',
770
+ background: 'var(--ids-comp-buttons-filled-color-bg-brand-default)',
771
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-default)',
850
772
  },
851
773
  '.ids-button.ids-button-filled.ids-button-brand:hover': {
852
774
  background: 'var(--ids-comp-buttons-filled-color-bg-brand-hovered)',
@@ -870,9 +792,9 @@ module.exports = function ComponentsPlugin() {
870
792
  borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-disabled)',
871
793
  },
872
794
  '.ids-button.ids-button-filled.ids-button-error': {
873
- color: 'var(--ids-comp-buttons-filled-color-fg-label-error-enabled)',
874
- background: 'var(--ids-comp-buttons-filled-color-bg-error-enabled)',
875
- borderColor: 'var(--ids-comp-buttons-filled-color-border-error-enabled)',
795
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-error-default)',
796
+ background: 'var(--ids-comp-buttons-filled-color-bg-error-default)',
797
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-error-default)',
876
798
  },
877
799
  '.ids-button.ids-button-filled.ids-button-error:hover': {
878
800
  background: 'var(--ids-comp-buttons-filled-color-bg-error-hovered)',
@@ -890,15 +812,10 @@ module.exports = function ComponentsPlugin() {
890
812
  color: 'var(--ids-comp-buttons-filled-color-fg-label-error-pressed)',
891
813
  borderColor: 'var(--ids-comp-buttons-filled-color-border-error-pressed)',
892
814
  },
893
- '.ids-button.ids-button-filled.ids-button-error:disabled': {
894
- background: 'var(--ids-comp-buttons-filled-color-bg-error-disabled)',
895
- color: 'var(--ids-comp-buttons-filled-color-fg-label-error-disabled)',
896
- borderColor: 'var(--ids-comp-buttons-filled-color-border-error-disabled)',
897
- },
898
815
  '.ids-button.ids-button-filled.ids-button-success': {
899
- color: 'var(--ids-comp-buttons-filled-color-fg-label-success-enabled)',
900
- background: 'var(--ids-comp-buttons-filled-color-bg-success-enabled)',
901
- borderColor: 'var(--ids-comp-buttons-filled-color-border-success-enabled)',
816
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-success-default)',
817
+ background: 'var(--ids-comp-buttons-filled-color-bg-success-default)',
818
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-success-default)',
902
819
  },
903
820
  '.ids-button.ids-button-filled.ids-button-success:hover': {
904
821
  background: 'var(--ids-comp-buttons-filled-color-bg-success-hovered)',
@@ -916,15 +833,10 @@ module.exports = function ComponentsPlugin() {
916
833
  color: 'var(--ids-comp-buttons-filled-color-fg-label-success-pressed)',
917
834
  borderColor: 'var(--ids-comp-buttons-filled-color-border-success-pressed)',
918
835
  },
919
- '.ids-button.ids-button-filled.ids-button-success:disabled': {
920
- background: 'var(--ids-comp-buttons-filled-color-bg-success-disabled)',
921
- color: 'var(--ids-comp-buttons-filled-color-fg-label-success-disabled)',
922
- borderColor: 'var(--ids-comp-buttons-filled-color-border-success-disabled)',
923
- },
924
836
  '.ids-button.ids-button-filled.ids-button-warning': {
925
- color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-enabled)',
926
- background: 'var(--ids-comp-buttons-filled-color-bg-warning-enabled)',
927
- borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-enabled)',
837
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-default)',
838
+ background: 'var(--ids-comp-buttons-filled-color-bg-warning-default)',
839
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-default)',
928
840
  },
929
841
  '.ids-button.ids-button-filled.ids-button-warning:hover': {
930
842
  background: 'var(--ids-comp-buttons-filled-color-bg-warning-hovered)',
@@ -942,15 +854,10 @@ module.exports = function ComponentsPlugin() {
942
854
  color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-pressed)',
943
855
  borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-pressed)',
944
856
  },
945
- '.ids-button.ids-button-filled.ids-button-warning:disabled': {
946
- background: 'var(--ids-comp-buttons-filled-color-bg-warning-disabled)',
947
- color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-disabled)',
948
- borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-disabled)',
949
- },
950
857
  '.ids-button.ids-button-filled.ids-button-light': {
951
- color: 'var(--ids-comp-buttons-filled-color-fg-label-light-enabled)',
952
- background: 'var(--ids-comp-buttons-filled-color-bg-light-enabled)',
953
- borderColor: 'var(--ids-comp-buttons-filled-color-border-light-enabled)',
858
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-light-default)',
859
+ background: 'var(--ids-comp-buttons-filled-color-bg-light-default)',
860
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-light-default)',
954
861
  },
955
862
  '.ids-button.ids-button-filled.ids-button-light:hover': {
956
863
  background: 'var(--ids-comp-buttons-filled-color-bg-light-hovered)',
@@ -974,9 +881,9 @@ module.exports = function ComponentsPlugin() {
974
881
  borderColor: 'var(--ids-comp-buttons-filled-color-border-light-disabled)',
975
882
  },
976
883
  '.ids-button.ids-button-filled.ids-button-dark': {
977
- color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-enabled)',
978
- background: 'var(--ids-comp-buttons-filled-color-bg-dark-enabled)',
979
- borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-enabled)',
884
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-default)',
885
+ background: 'var(--ids-comp-buttons-filled-color-bg-dark-default)',
886
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-default)',
980
887
  },
981
888
  '.ids-button.ids-button-filled.ids-button-dark:hover': {
982
889
  background: 'var(--ids-comp-buttons-filled-color-bg-dark-hovered)',
@@ -1000,9 +907,9 @@ module.exports = function ComponentsPlugin() {
1000
907
  borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-disabled)',
1001
908
  },
1002
909
  '.ids-button.ids-button-filled.ids-button-surface': {
1003
- color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-enabled)',
1004
- background: 'var(--ids-comp-buttons-filled-color-bg-surface-enabled)',
1005
- borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-enabled)',
910
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-default)',
911
+ background: 'var(--ids-comp-buttons-filled-color-bg-surface-default)',
912
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-default)',
1006
913
  },
1007
914
  '.ids-button.ids-button-filled.ids-button-surface:hover': {
1008
915
  background: 'var(--ids-comp-buttons-filled-color-bg-surface-hovered)',
@@ -1026,9 +933,9 @@ module.exports = function ComponentsPlugin() {
1026
933
  borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-disabled)',
1027
934
  },
1028
935
  '.ids-button.ids-button-outlined.ids-button-primary': {
1029
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-enabled)',
1030
- background: 'var(--ids-comp-buttons-outlined-color-bg-primary-enabled)',
1031
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-enabled)',
936
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-default)',
937
+ background: 'var(--ids-comp-buttons-outlined-color-bg-primary-default)',
938
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-default)',
1032
939
  },
1033
940
  '.ids-button.ids-button-outlined.ids-button-primary:hover': {
1034
941
  background: 'var(--ids-comp-buttons-outlined-color-bg-primary-hovered)',
@@ -1052,9 +959,9 @@ module.exports = function ComponentsPlugin() {
1052
959
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-disabled)',
1053
960
  },
1054
961
  '.ids-button.ids-button-outlined.ids-button-secondary': {
1055
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-enabled)',
1056
- background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-enabled)',
1057
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-enabled)',
962
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-default)',
963
+ background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-default)',
964
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-default)',
1058
965
  },
1059
966
  '.ids-button.ids-button-outlined.ids-button-secondary:hover': {
1060
967
  background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-hovered)',
@@ -1078,9 +985,9 @@ module.exports = function ComponentsPlugin() {
1078
985
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-disabled)',
1079
986
  },
1080
987
  '.ids-button.ids-button-outlined.ids-button-brand': {
1081
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-enabled)',
1082
- background: 'var(--ids-comp-buttons-outlined-color-bg-brand-enabled)',
1083
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-enabled)',
988
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-default)',
989
+ background: 'var(--ids-comp-buttons-outlined-color-bg-brand-default)',
990
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-default)',
1084
991
  },
1085
992
  '.ids-button.ids-button-outlined.ids-button-brand:hover': {
1086
993
  background: 'var(--ids-comp-buttons-outlined-color-bg-brand-hovered)',
@@ -1104,9 +1011,9 @@ module.exports = function ComponentsPlugin() {
1104
1011
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-disabled)',
1105
1012
  },
1106
1013
  '.ids-button.ids-button-outlined.ids-button-error': {
1107
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-enabled)',
1108
- background: 'var(--ids-comp-buttons-outlined-color-bg-error-enabled)',
1109
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-enabled)',
1014
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-default)',
1015
+ background: 'var(--ids-comp-buttons-outlined-color-bg-error-default)',
1016
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-default)',
1110
1017
  },
1111
1018
  '.ids-button.ids-button-outlined.ids-button-error:hover': {
1112
1019
  background: 'var(--ids-comp-buttons-outlined-color-bg-error-hovered)',
@@ -1124,15 +1031,10 @@ module.exports = function ComponentsPlugin() {
1124
1031
  color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-pressed)',
1125
1032
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-pressed)',
1126
1033
  },
1127
- '.ids-button.ids-button-outlined.ids-button-error:disabled': {
1128
- background: 'var(--ids-comp-buttons-outlined-color-bg-error-disabled)',
1129
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-disabled)',
1130
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-disabled)',
1131
- },
1132
1034
  '.ids-button.ids-button-outlined.ids-button-success': {
1133
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-enabled)',
1134
- background: 'var(--ids-comp-buttons-outlined-color-bg-success-enabled)',
1135
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-enabled)',
1035
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-default)',
1036
+ background: 'var(--ids-comp-buttons-outlined-color-bg-success-default)',
1037
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-default)',
1136
1038
  },
1137
1039
  '.ids-button.ids-button-outlined.ids-button-success:hover': {
1138
1040
  background: 'var(--ids-comp-buttons-outlined-color-bg-success-hovered)',
@@ -1150,15 +1052,10 @@ module.exports = function ComponentsPlugin() {
1150
1052
  color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-pressed)',
1151
1053
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-pressed)',
1152
1054
  },
1153
- '.ids-button.ids-button-outlined.ids-button-success:disabled': {
1154
- background: 'var(--ids-comp-buttons-outlined-color-bg-success-disabled)',
1155
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-disabled)',
1156
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-disabled)',
1157
- },
1158
1055
  '.ids-button.ids-button-outlined.ids-button-warning': {
1159
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-enabled)',
1160
- background: 'var(--ids-comp-buttons-outlined-color-bg-warning-enabled)',
1161
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-enabled)',
1056
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-default)',
1057
+ background: 'var(--ids-comp-buttons-outlined-color-bg-warning-default)',
1058
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-default)',
1162
1059
  },
1163
1060
  '.ids-button.ids-button-outlined.ids-button-warning:hover': {
1164
1061
  background: 'var(--ids-comp-buttons-outlined-color-bg-warning-hovered)',
@@ -1176,15 +1073,10 @@ module.exports = function ComponentsPlugin() {
1176
1073
  color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed)',
1177
1074
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-pressed)',
1178
1075
  },
1179
- '.ids-button.ids-button-outlined.ids-button-warning:disabled': {
1180
- background: 'var(--ids-comp-buttons-outlined-color-bg-warning-disabled)',
1181
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-disabled)',
1182
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-disabled)',
1183
- },
1184
1076
  '.ids-button.ids-button-outlined.ids-button-light': {
1185
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-enabled)',
1186
- background: 'var(--ids-comp-buttons-outlined-color-bg-light-enabled)',
1187
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-enabled)',
1077
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-default)',
1078
+ background: 'var(--ids-comp-buttons-outlined-color-bg-light-default)',
1079
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-default)',
1188
1080
  },
1189
1081
  '.ids-button.ids-button-outlined.ids-button-light:hover': {
1190
1082
  background: 'var(--ids-comp-buttons-outlined-color-bg-light-hovered)',
@@ -1208,9 +1100,9 @@ module.exports = function ComponentsPlugin() {
1208
1100
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-disabled)',
1209
1101
  },
1210
1102
  '.ids-button.ids-button-outlined.ids-button-dark': {
1211
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-enabled)',
1212
- background: 'var(--ids-comp-buttons-outlined-color-bg-dark-enabled)',
1213
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-enabled)',
1103
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-default)',
1104
+ background: 'var(--ids-comp-buttons-outlined-color-bg-dark-default)',
1105
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-default)',
1214
1106
  },
1215
1107
  '.ids-button.ids-button-outlined.ids-button-dark:hover': {
1216
1108
  background: 'var(--ids-comp-buttons-outlined-color-bg-dark-hovered)',
@@ -1234,9 +1126,9 @@ module.exports = function ComponentsPlugin() {
1234
1126
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-disabled)',
1235
1127
  },
1236
1128
  '.ids-button.ids-button-outlined.ids-button-surface': {
1237
- color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-enabled)',
1238
- background: 'var(--ids-comp-buttons-outlined-color-bg-surface-enabled)',
1239
- borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-enabled)',
1129
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-default)',
1130
+ background: 'var(--ids-comp-buttons-outlined-color-bg-surface-default)',
1131
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-default)',
1240
1132
  },
1241
1133
  '.ids-button.ids-button-outlined.ids-button-surface:hover': {
1242
1134
  background: 'var(--ids-comp-buttons-outlined-color-bg-surface-hovered)',
@@ -1260,9 +1152,9 @@ module.exports = function ComponentsPlugin() {
1260
1152
  borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-disabled)',
1261
1153
  },
1262
1154
  '.ids-button.ids-button-text.ids-button-primary': {
1263
- color: 'var(--ids-comp-buttons-text-color-fg-label-primary-enabled)',
1264
- background: 'var(--ids-comp-buttons-text-color-bg-primary-enabled)',
1265
- borderColor: 'var(--ids-comp-buttons-text-color-border-primary-enabled)',
1155
+ color: 'var(--ids-comp-buttons-text-color-fg-label-primary-default)',
1156
+ background: 'var(--ids-comp-buttons-text-color-bg-primary-default)',
1157
+ borderColor: 'var(--ids-comp-buttons-text-color-border-primary-default)',
1266
1158
  },
1267
1159
  '.ids-button.ids-button-text.ids-button-primary:hover': {
1268
1160
  background: 'var(--ids-comp-buttons-text-color-bg-primary-hovered)',
@@ -1286,9 +1178,9 @@ module.exports = function ComponentsPlugin() {
1286
1178
  borderColor: 'var(--ids-comp-buttons-text-color-border-primary-disabled)',
1287
1179
  },
1288
1180
  '.ids-button.ids-button-text.ids-button-secondary': {
1289
- color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-enabled)',
1290
- background: 'var(--ids-comp-buttons-text-color-bg-secondary-enabled)',
1291
- borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-enabled)',
1181
+ color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-default)',
1182
+ background: 'var(--ids-comp-buttons-text-color-bg-secondary-default)',
1183
+ borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-default)',
1292
1184
  },
1293
1185
  '.ids-button.ids-button-text.ids-button-secondary:hover': {
1294
1186
  background: 'var(--ids-comp-buttons-text-color-bg-secondary-hovered)',
@@ -1312,9 +1204,9 @@ module.exports = function ComponentsPlugin() {
1312
1204
  borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-disabled)',
1313
1205
  },
1314
1206
  '.ids-button.ids-button-text.ids-button-brand': {
1315
- color: 'var(--ids-comp-buttons-text-color-fg-label-brand-enabled)',
1316
- background: 'var(--ids-comp-buttons-text-color-bg-brand-enabled)',
1317
- borderColor: 'var(--ids-comp-buttons-text-color-border-brand-enabled)',
1207
+ color: 'var(--ids-comp-buttons-text-color-fg-label-brand-default)',
1208
+ background: 'var(--ids-comp-buttons-text-color-bg-brand-default)',
1209
+ borderColor: 'var(--ids-comp-buttons-text-color-border-brand-default)',
1318
1210
  },
1319
1211
  '.ids-button.ids-button-text.ids-button-brand:hover': {
1320
1212
  background: 'var(--ids-comp-buttons-text-color-bg-brand-hovered)',
@@ -1338,9 +1230,9 @@ module.exports = function ComponentsPlugin() {
1338
1230
  borderColor: 'var(--ids-comp-buttons-text-color-border-brand-disabled)',
1339
1231
  },
1340
1232
  '.ids-button.ids-button-text.ids-button-error': {
1341
- color: 'var(--ids-comp-buttons-text-color-fg-label-error-enabled)',
1342
- background: 'var(--ids-comp-buttons-text-color-bg-error-enabled)',
1343
- borderColor: 'var(--ids-comp-buttons-text-color-border-error-enabled)',
1233
+ color: 'var(--ids-comp-buttons-text-color-fg-label-error-default)',
1234
+ background: 'var(--ids-comp-buttons-text-color-bg-error-default)',
1235
+ borderColor: 'var(--ids-comp-buttons-text-color-border-error-default)',
1344
1236
  },
1345
1237
  '.ids-button.ids-button-text.ids-button-error:hover': {
1346
1238
  background: 'var(--ids-comp-buttons-text-color-bg-error-hovered)',
@@ -1358,15 +1250,10 @@ module.exports = function ComponentsPlugin() {
1358
1250
  color: 'var(--ids-comp-buttons-text-color-fg-label-error-pressed)',
1359
1251
  borderColor: 'var(--ids-comp-buttons-text-color-border-error-pressed)',
1360
1252
  },
1361
- '.ids-button.ids-button-text.ids-button-error:disabled': {
1362
- background: 'var(--ids-comp-buttons-text-color-bg-error-disabled)',
1363
- color: 'var(--ids-comp-buttons-text-color-fg-label-error-disabled)',
1364
- borderColor: 'var(--ids-comp-buttons-text-color-border-error-disabled)',
1365
- },
1366
1253
  '.ids-button.ids-button-text.ids-button-success': {
1367
- color: 'var(--ids-comp-buttons-text-color-fg-label-success-enabled)',
1368
- background: 'var(--ids-comp-buttons-text-color-bg-success-enabled)',
1369
- borderColor: 'var(--ids-comp-buttons-text-color-border-success-enabled)',
1254
+ color: 'var(--ids-comp-buttons-text-color-fg-label-success-default)',
1255
+ background: 'var(--ids-comp-buttons-text-color-bg-success-default)',
1256
+ borderColor: 'var(--ids-comp-buttons-text-color-border-success-default)',
1370
1257
  },
1371
1258
  '.ids-button.ids-button-text.ids-button-success:hover': {
1372
1259
  background: 'var(--ids-comp-buttons-text-color-bg-success-hovered)',
@@ -1384,15 +1271,10 @@ module.exports = function ComponentsPlugin() {
1384
1271
  color: 'var(--ids-comp-buttons-text-color-fg-label-success-pressed)',
1385
1272
  borderColor: 'var(--ids-comp-buttons-text-color-border-success-pressed)',
1386
1273
  },
1387
- '.ids-button.ids-button-text.ids-button-success:disabled': {
1388
- background: 'var(--ids-comp-buttons-text-color-bg-success-disabled)',
1389
- color: 'var(--ids-comp-buttons-text-color-fg-label-success-disabled)',
1390
- borderColor: 'var(--ids-comp-buttons-text-color-border-success-disabled)',
1391
- },
1392
1274
  '.ids-button.ids-button-text.ids-button-warning': {
1393
- color: 'var(--ids-comp-buttons-text-color-fg-label-warning-enabled)',
1394
- background: 'var(--ids-comp-buttons-text-color-bg-warning-enabled)',
1395
- borderColor: 'var(--ids-comp-buttons-text-color-border-warning-enabled)',
1275
+ color: 'var(--ids-comp-buttons-text-color-fg-label-warning-default)',
1276
+ background: 'var(--ids-comp-buttons-text-color-bg-warning-default)',
1277
+ borderColor: 'var(--ids-comp-buttons-text-color-border-warning-default)',
1396
1278
  },
1397
1279
  '.ids-button.ids-button-text.ids-button-warning:hover': {
1398
1280
  background: 'var(--ids-comp-buttons-text-color-bg-warning-hovered)',
@@ -1410,15 +1292,10 @@ module.exports = function ComponentsPlugin() {
1410
1292
  color: 'var(--ids-comp-buttons-text-color-fg-label-warning-pressed)',
1411
1293
  borderColor: 'var(--ids-comp-buttons-text-color-border-warning-pressed)',
1412
1294
  },
1413
- '.ids-button.ids-button-text.ids-button-warning:disabled': {
1414
- background: 'var(--ids-comp-buttons-text-color-bg-warning-disabled)',
1415
- color: 'var(--ids-comp-buttons-text-color-fg-label-warning-disabled)',
1416
- borderColor: 'var(--ids-comp-buttons-text-color-border-warning-disabled)',
1417
- },
1418
1295
  '.ids-button.ids-button-text.ids-button-light': {
1419
- color: 'var(--ids-comp-buttons-text-color-fg-label-light-enabled)',
1420
- background: 'var(--ids-comp-buttons-text-color-bg-light-enabled)',
1421
- borderColor: 'var(--ids-comp-buttons-text-color-border-light-enabled)',
1296
+ color: 'var(--ids-comp-buttons-text-color-fg-label-light-default)',
1297
+ background: 'var(--ids-comp-buttons-text-color-bg-light-default)',
1298
+ borderColor: 'var(--ids-comp-buttons-text-color-border-light-default)',
1422
1299
  },
1423
1300
  '.ids-button.ids-button-text.ids-button-light:hover': {
1424
1301
  background: 'var(--ids-comp-buttons-text-color-bg-light-hovered)',
@@ -1442,9 +1319,9 @@ module.exports = function ComponentsPlugin() {
1442
1319
  borderColor: 'var(--ids-comp-buttons-text-color-border-light-disabled)',
1443
1320
  },
1444
1321
  '.ids-button.ids-button-text.ids-button-dark': {
1445
- color: 'var(--ids-comp-buttons-text-color-fg-label-dark-enabled)',
1446
- background: 'var(--ids-comp-buttons-text-color-bg-dark-enabled)',
1447
- borderColor: 'var(--ids-comp-buttons-text-color-border-dark-enabled)',
1322
+ color: 'var(--ids-comp-buttons-text-color-fg-label-dark-default)',
1323
+ background: 'var(--ids-comp-buttons-text-color-bg-dark-default)',
1324
+ borderColor: 'var(--ids-comp-buttons-text-color-border-dark-default)',
1448
1325
  },
1449
1326
  '.ids-button.ids-button-text.ids-button-dark:hover': {
1450
1327
  background: 'var(--ids-comp-buttons-text-color-bg-dark-hovered)',
@@ -1468,9 +1345,9 @@ module.exports = function ComponentsPlugin() {
1468
1345
  borderColor: 'var(--ids-comp-buttons-text-color-border-dark-disabled)',
1469
1346
  },
1470
1347
  '.ids-button.ids-button-text.ids-button-surface': {
1471
- color: 'var(--ids-comp-buttons-text-color-fg-label-surface-enabled)',
1472
- background: 'var(--ids-comp-buttons-text-color-bg-surface-enabled)',
1473
- borderColor: 'var(--ids-comp-buttons-text-color-border-surface-enabled)',
1348
+ color: 'var(--ids-comp-buttons-text-color-fg-label-surface-default)',
1349
+ background: 'var(--ids-comp-buttons-text-color-bg-surface-default)',
1350
+ borderColor: 'var(--ids-comp-buttons-text-color-border-surface-default)',
1474
1351
  },
1475
1352
  '.ids-button.ids-button-text.ids-button-surface:hover': {
1476
1353
  background: 'var(--ids-comp-buttons-text-color-bg-surface-hovered)',
@@ -1493,7 +1370,537 @@ module.exports = function ComponentsPlugin() {
1493
1370
  color: 'var(--ids-comp-buttons-text-color-fg-label-surface-disabled)',
1494
1371
  borderColor: 'var(--ids-comp-buttons-text-color-border-surface-disabled)',
1495
1372
  },
1496
- '.ids-card': { display: 'flex', borderStyle: 'solid' },
1373
+ '.ids-checkbox': { display: 'inline-flex', alignSelf: 'stretch', alignItems: 'flex-start' },
1374
+ '.ids-checkbox .ids-checkbox__input-wrapper': {
1375
+ position: 'relative',
1376
+ display: 'flex',
1377
+ alignItems: 'center',
1378
+ justifyContent: 'center',
1379
+ },
1380
+ '.ids-checkbox .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { position: 'absolute', zIndex: 1 },
1381
+ '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]': {
1382
+ appearance: 'none',
1383
+ WebkitAppearance: 'none',
1384
+ flexShrink: 0,
1385
+ borderStyle: 'solid',
1386
+ },
1387
+ '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus': { outlineOffset: '3px', outlineStyle: 'solid' },
1388
+ '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': { position: 'absolute' },
1389
+ '.ids-checkbox .ids-checkbox__label-wrapper': { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: '1 0 0' },
1390
+ '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container': { textAlign: 'start' },
1391
+ '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': { fontStyle: 'normal' },
1392
+ '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__message-container': { width: '100%' },
1393
+ '.ids-checkbox.ids-checkbox-compact': {
1394
+ padding: 'var(--ids-comp-checkbox-container-size-padding-y-compact) var(--ids-comp-checkbox-container-size-padding-x-compact)',
1395
+ gap: 'var(--ids-comp-checkbox-container-size-gap-compact)',
1396
+ },
1397
+ '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
1398
+ top: 'calc((var(--ids-comp-checkbox-input-size-height-compact) - var(--ids-comp-checkbox-input-size-touchtarget-height-compact))/2)',
1399
+ left: 'calc((var(--ids-comp-checkbox-input-size-width-compact) - var(--ids-comp-checkbox-input-size-touchtarget-width-compact))/2)',
1400
+ height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-compact)',
1401
+ width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-compact)',
1402
+ },
1403
+ '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]': {
1404
+ width: 'var(--ids-comp-checkbox-input-size-width-compact)',
1405
+ height: 'var(--ids-comp-checkbox-input-size-height-compact)',
1406
+ borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-compact)',
1407
+ borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-compact)',
1408
+ },
1409
+ '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
1410
+ outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-compact)',
1411
+ },
1412
+ '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon': {
1413
+ height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
1414
+ width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
1415
+ },
1416
+ '.ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper': {
1417
+ padding: 'var(--ids-comp-checkbox-label-group-size-padding-y-compact) var(--ids-comp-checkbox-label-group-size-padding-x-compact)',
1418
+ gap: 'var(--ids-comp-checkbox-label-group-size-gap-compact)',
1419
+ },
1420
+ '.ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
1421
+ fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-compact)',
1422
+ fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-compact)',
1423
+ letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-compact)',
1424
+ fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-compact)',
1425
+ lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-compact)',
1426
+ },
1427
+ '.ids-checkbox.ids-checkbox-comfortable': {
1428
+ padding:
1429
+ 'var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable)',
1430
+ gap: 'var(--ids-comp-checkbox-container-size-gap-comfortable)',
1431
+ },
1432
+ '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
1433
+ top: 'calc((var(--ids-comp-checkbox-input-size-height-comfortable) - var(--ids-comp-checkbox-input-size-touchtarget-height-comfortable))/2)',
1434
+ left: 'calc((var(--ids-comp-checkbox-input-size-width-comfortable) - var(--ids-comp-checkbox-input-size-touchtarget-width-comfortable))/2)',
1435
+ height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-comfortable)',
1436
+ width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-comfortable)',
1437
+ },
1438
+ '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]': {
1439
+ width: 'var(--ids-comp-checkbox-input-size-width-comfortable)',
1440
+ height: 'var(--ids-comp-checkbox-input-size-height-comfortable)',
1441
+ borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-comfortable)',
1442
+ borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-comfortable)',
1443
+ },
1444
+ '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
1445
+ outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-comfortable)',
1446
+ },
1447
+ '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon': {
1448
+ height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
1449
+ width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
1450
+ },
1451
+ '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper': {
1452
+ padding:
1453
+ 'var(--ids-comp-checkbox-label-group-size-padding-y-comfortable) var(--ids-comp-checkbox-label-group-size-padding-x-comfortable)',
1454
+ gap: 'var(--ids-comp-checkbox-label-group-size-gap-comfortable)',
1455
+ },
1456
+ '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
1457
+ fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-comfortable)',
1458
+ fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-comfortable)',
1459
+ letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-comfortable)',
1460
+ fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-comfortable)',
1461
+ lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-comfortable)',
1462
+ },
1463
+ '.ids-checkbox.ids-checkbox-spacious': {
1464
+ padding: 'var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious)',
1465
+ gap: 'var(--ids-comp-checkbox-container-size-gap-spacious)',
1466
+ },
1467
+ '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
1468
+ top: 'calc((var(--ids-comp-checkbox-input-size-height-spacious) - var(--ids-comp-checkbox-input-size-touchtarget-height-spacious))/2)',
1469
+ left: 'calc((var(--ids-comp-checkbox-input-size-width-spacious) - var(--ids-comp-checkbox-input-size-touchtarget-width-spacious))/2)',
1470
+ height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-spacious)',
1471
+ width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-spacious)',
1472
+ },
1473
+ '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]': {
1474
+ width: 'var(--ids-comp-checkbox-input-size-width-spacious)',
1475
+ height: 'var(--ids-comp-checkbox-input-size-height-spacious)',
1476
+ borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-spacious)',
1477
+ borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-spacious)',
1478
+ },
1479
+ '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
1480
+ outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-spacious)',
1481
+ },
1482
+ '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon': {
1483
+ height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
1484
+ width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
1485
+ },
1486
+ '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper': {
1487
+ padding:
1488
+ 'var(--ids-comp-checkbox-label-group-size-padding-y-spacious) var(--ids-comp-checkbox-label-group-size-padding-x-spacious)',
1489
+ gap: 'var(--ids-comp-checkbox-label-group-size-gap-spacious)',
1490
+ },
1491
+ '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
1492
+ fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-spacious)',
1493
+ fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-spacious)',
1494
+ letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-spacious)',
1495
+ fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-spacious)',
1496
+ lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-spacious)',
1497
+ },
1498
+ '.ids-checkbox.ids-checkbox-dense': {
1499
+ padding: 'var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense)',
1500
+ gap: 'var(--ids-comp-checkbox-container-size-gap-dense)',
1501
+ },
1502
+ '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
1503
+ top: 'calc((var(--ids-comp-checkbox-input-size-height-dense) - var(--ids-comp-checkbox-input-size-touchtarget-height-dense))/2)',
1504
+ left: 'calc((var(--ids-comp-checkbox-input-size-width-dense) - var(--ids-comp-checkbox-input-size-touchtarget-width-dense))/2)',
1505
+ height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-dense)',
1506
+ width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-dense)',
1507
+ },
1508
+ '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]': {
1509
+ width: 'var(--ids-comp-checkbox-input-size-width-dense)',
1510
+ height: 'var(--ids-comp-checkbox-input-size-height-dense)',
1511
+ borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-dense)',
1512
+ borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-dense)',
1513
+ },
1514
+ '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
1515
+ outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-dense)',
1516
+ },
1517
+ '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon': {
1518
+ height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
1519
+ width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
1520
+ },
1521
+ '.ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper': {
1522
+ padding: 'var(--ids-comp-checkbox-label-group-size-padding-y-dense) var(--ids-comp-checkbox-label-group-size-padding-x-dense)',
1523
+ gap: 'var(--ids-comp-checkbox-label-group-size-gap-dense)',
1524
+ },
1525
+ '.ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
1526
+ fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-dense)',
1527
+ fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-dense)',
1528
+ letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-dense)',
1529
+ fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-dense)',
1530
+ lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-dense)',
1531
+ },
1532
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
1533
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-default)',
1534
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
1535
+ },
1536
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
1537
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-hovered)',
1538
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)',
1539
+ },
1540
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
1541
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-pressed)',
1542
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
1543
+ },
1544
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
1545
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-focused)',
1546
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
1547
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
1548
+ },
1549
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
1550
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-disabled)',
1551
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled)',
1552
+ },
1553
+ '.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)':
1554
+ {
1555
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-default)',
1556
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-default)',
1557
+ },
1558
+ '.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':
1559
+ {
1560
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-hovered)',
1561
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
1562
+ },
1563
+ '.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':
1564
+ {
1565
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-pressed)',
1566
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
1567
+ },
1568
+ '.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':
1569
+ {
1570
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-focused)',
1571
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
1572
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
1573
+ },
1574
+ '.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':
1575
+ {
1576
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-disabled)',
1577
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-disabled)',
1578
+ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled)',
1579
+ },
1580
+ '.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':
1581
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default)' },
1582
+ '.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':
1583
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered)' },
1584
+ '.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':
1585
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
1586
+ '.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':
1587
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)' },
1588
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
1589
+ color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
1590
+ },
1591
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover': {
1592
+ color: 'var(--ids-comp-checkbox-label-color-fg-light-hovered)',
1593
+ },
1594
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
1595
+ color: 'var(--ids-comp-checkbox-label-color-fg-light-pressed)',
1596
+ },
1597
+ '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
1598
+ color: 'var(--ids-comp-checkbox-label-color-fg-light-focused)',
1599
+ },
1600
+ '.ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
1601
+ { color: 'var(--ids-comp-checkbox-label-color-fg-light-disabled)' },
1602
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
1603
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-default)',
1604
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
1605
+ },
1606
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
1607
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered)',
1608
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
1609
+ },
1610
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
1611
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed)',
1612
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
1613
+ },
1614
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
1615
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-focused)',
1616
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
1617
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
1618
+ },
1619
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
1620
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled)',
1621
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled)',
1622
+ },
1623
+ '.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)':
1624
+ {
1625
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-default)',
1626
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-default)',
1627
+ },
1628
+ '.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':
1629
+ {
1630
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-hovered)',
1631
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
1632
+ },
1633
+ '.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':
1634
+ {
1635
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-pressed)',
1636
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
1637
+ },
1638
+ '.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':
1639
+ {
1640
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-focused)',
1641
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
1642
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
1643
+ },
1644
+ '.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':
1645
+ {
1646
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-disabled)',
1647
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled)',
1648
+ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled)',
1649
+ },
1650
+ '.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':
1651
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default)' },
1652
+ '.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':
1653
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered)' },
1654
+ '.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':
1655
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
1656
+ '.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':
1657
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)' },
1658
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
1659
+ color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
1660
+ },
1661
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover': {
1662
+ color: 'var(--ids-comp-checkbox-label-color-fg-dark-hovered)',
1663
+ },
1664
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
1665
+ color: 'var(--ids-comp-checkbox-label-color-fg-dark-pressed)',
1666
+ },
1667
+ '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
1668
+ color: 'var(--ids-comp-checkbox-label-color-fg-dark-focused)',
1669
+ },
1670
+ '.ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
1671
+ { color: 'var(--ids-comp-checkbox-label-color-fg-dark-disabled)' },
1672
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
1673
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-default)',
1674
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)',
1675
+ },
1676
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
1677
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered)',
1678
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
1679
+ },
1680
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
1681
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed)',
1682
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
1683
+ },
1684
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
1685
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-focused)',
1686
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
1687
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
1688
+ },
1689
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
1690
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled)',
1691
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled)',
1692
+ },
1693
+ '.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)':
1694
+ {
1695
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-default)',
1696
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
1697
+ },
1698
+ '.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':
1699
+ {
1700
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-hovered)',
1701
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
1702
+ },
1703
+ '.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':
1704
+ {
1705
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-pressed)',
1706
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
1707
+ },
1708
+ '.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':
1709
+ {
1710
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-focused)',
1711
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
1712
+ outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
1713
+ },
1714
+ '.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':
1715
+ {
1716
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-disabled)',
1717
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled)',
1718
+ color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled)',
1719
+ },
1720
+ '.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':
1721
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default)' },
1722
+ '.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':
1723
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered)' },
1724
+ '.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':
1725
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
1726
+ '.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':
1727
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)' },
1728
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
1729
+ color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
1730
+ },
1731
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover': {
1732
+ color: 'var(--ids-comp-checkbox-label-color-fg-surface-hovered)',
1733
+ },
1734
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
1735
+ color: 'var(--ids-comp-checkbox-label-color-fg-surface-pressed)',
1736
+ },
1737
+ '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
1738
+ color: 'var(--ids-comp-checkbox-label-color-fg-surface-focused)',
1739
+ },
1740
+ '.ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
1741
+ { color: 'var(--ids-comp-checkbox-label-color-fg-surface-disabled)' },
1742
+ '.ids-checkbox.ids-checkbox-disabled': { opacity: 'var(--ids-comp-checkbox-disabled)' },
1743
+ '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { cursor: 'not-allowed' },
1744
+ '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox]': { cursor: 'not-allowed' },
1745
+ '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': {
1746
+ cursor: 'not-allowed',
1747
+ },
1748
+ '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
1749
+ cursor: 'not-allowed',
1750
+ },
1751
+ '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { cursor: 'pointer' },
1752
+ '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox]': { cursor: 'pointer' },
1753
+ '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': {
1754
+ cursor: 'pointer',
1755
+ },
1756
+ '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
1757
+ cursor: 'pointer',
1758
+ },
1759
+ '.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)':
1760
+ {
1761
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-default)',
1762
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
1763
+ },
1764
+ '.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':
1765
+ {
1766
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered)',
1767
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)',
1768
+ },
1769
+ '.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':
1770
+ {
1771
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed)',
1772
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
1773
+ },
1774
+ '.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':
1775
+ {
1776
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused)',
1777
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
1778
+ },
1779
+ '.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)':
1780
+ {
1781
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-default)',
1782
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-default)',
1783
+ },
1784
+ '.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':
1785
+ {
1786
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered)',
1787
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
1788
+ },
1789
+ '.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':
1790
+ {
1791
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed)',
1792
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
1793
+ },
1794
+ '.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':
1795
+ {
1796
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-focused)',
1797
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
1798
+ },
1799
+ '.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':
1800
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default)' },
1801
+ '.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':
1802
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered)' },
1803
+ '.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':
1804
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed)' },
1805
+ '.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':
1806
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)' },
1807
+ '.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)':
1808
+ {
1809
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default)',
1810
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
1811
+ },
1812
+ '.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':
1813
+ {
1814
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered)',
1815
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
1816
+ },
1817
+ '.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':
1818
+ {
1819
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed)',
1820
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
1821
+ },
1822
+ '.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':
1823
+ {
1824
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused)',
1825
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
1826
+ },
1827
+ '.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)':
1828
+ {
1829
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-default)',
1830
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-default)',
1831
+ },
1832
+ '.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':
1833
+ {
1834
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered)',
1835
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
1836
+ },
1837
+ '.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':
1838
+ {
1839
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed)',
1840
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
1841
+ },
1842
+ '.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':
1843
+ {
1844
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused)',
1845
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
1846
+ },
1847
+ '.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':
1848
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default)' },
1849
+ '.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':
1850
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered)' },
1851
+ '.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':
1852
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed)' },
1853
+ '.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':
1854
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)' },
1855
+ '.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)':
1856
+ {
1857
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default)',
1858
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)',
1859
+ },
1860
+ '.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':
1861
+ {
1862
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered)',
1863
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
1864
+ },
1865
+ '.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':
1866
+ {
1867
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed)',
1868
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
1869
+ },
1870
+ '.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':
1871
+ {
1872
+ borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused)',
1873
+ backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
1874
+ },
1875
+ '.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)':
1876
+ {
1877
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-default)',
1878
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
1879
+ },
1880
+ '.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':
1881
+ {
1882
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered)',
1883
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
1884
+ },
1885
+ '.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':
1886
+ {
1887
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed)',
1888
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
1889
+ },
1890
+ '.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':
1891
+ {
1892
+ borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused)',
1893
+ backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
1894
+ },
1895
+ '.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':
1896
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default)' },
1897
+ '.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':
1898
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered)' },
1899
+ '.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':
1900
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed)' },
1901
+ '.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':
1902
+ { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)' },
1903
+ '.ids-card': { display: 'flex', borderStyle: 'solid', boxSizing: 'border-box' },
1497
1904
  '.ids-card.ids-card-clickable': { pointerEvents: 'auto', cursor: 'pointer' },
1498
1905
  '.ids-card.ids-card-clickable:focus': {
1499
1906
  outlineOffset: '2px',
@@ -1558,185 +1965,181 @@ module.exports = function ComponentsPlugin() {
1558
1965
  },
1559
1966
  '.ids-card.ids-card-compact.ids-card-horizontal': {
1560
1967
  padding:
1561
- 'var(--ids-comp-size-card-container-horizontal-size-padding-y-compact) var(--ids-comp-size-card-container-horizontal-size-padding-x-compact)',
1562
- gap: 'var(--ids-comp-size-card-container-horizontal-size-gap-compact)',
1563
- borderRadius: 'var(--ids-comp-size-card-container-horizontal-size-border-radius-compact)',
1968
+ 'var(--ids-comp-card-container-horizontal-size-padding-y-compact) var(--ids-comp-card-container-horizontal-size-padding-x-compact)',
1969
+ gap: 'var(--ids-comp-card-container-horizontal-size-gap-compact)',
1970
+ borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-compact)',
1564
1971
  },
1565
1972
  '.ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined': {
1566
- borderWidth: 'var(--ids-comp-size-card-container-horizontal-size-border-width-compact)',
1973
+ borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-compact)',
1567
1974
  },
1568
1975
  '.ids-card.ids-card-compact.ids-card-vertical': {
1569
1976
  padding:
1570
- 'var(--ids-comp-size-card-container-vertical-size-padding-y-compact) var(--ids-comp-size-card-container-vertical-size-padding-x-compact)',
1571
- gap: 'var(--ids-comp-size-card-container-vertical-size-gap-compact)',
1572
- borderRadius: 'var(--ids-comp-size-card-container-vertical-size-border-radius-compact)',
1977
+ 'var(--ids-comp-card-container-vertical-size-padding-y-compact) var(--ids-comp-card-container-vertical-size-padding-x-compact)',
1978
+ gap: 'var(--ids-comp-card-container-vertical-size-gap-compact)',
1979
+ borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-compact)',
1573
1980
  },
1574
1981
  '.ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined': {
1575
- borderWidth: 'var(--ids-comp-size-card-container-vertical-size-border-width-compact)',
1982
+ borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-compact)',
1576
1983
  },
1577
- '.ids-card.ids-card-compact.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-size-card-focused-outline-outline-compact)' },
1984
+ '.ids-card.ids-card-compact.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-compact)' },
1578
1985
  '.ids-card.ids-card-compact .ids-card-header-headline': {
1579
- gap: 'var(--ids-comp-size-card-header-headline-gap-compact)',
1580
- padding: 'var(--ids-comp-size-card-header-headline-padding-y-compact) var(--ids-comp-size-card-header-headline-padding-x-compact)',
1986
+ gap: 'var(--ids-comp-card-header-headline-gap-compact)',
1987
+ padding: 'var(--ids-comp-card-header-headline-padding-y-compact) var(--ids-comp-card-header-headline-padding-x-compact)',
1581
1988
  },
1582
1989
  '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
1583
- paddingTop: 'var(--ids-comp-size-card-slot-size-padding-top-compact)',
1990
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-top-compact)',
1584
1991
  },
1585
1992
  '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
1586
- paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-bottom-compact)',
1993
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-compact)',
1587
1994
  },
1588
1995
  '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section.ids-card-section-padded': {
1589
- paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-x-compact)',
1590
- paddingRight: 'var(--ids-comp-size-card-slot-size-padding-x-compact)',
1996
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-compact)',
1997
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-x-compact)',
1591
1998
  },
1592
1999
  '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
1593
- paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-top-compact)',
2000
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-compact)',
1594
2001
  },
1595
2002
  '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
1596
- paddingRight: 'var(--ids-comp-size-card-slot-size-padding-bottom-compact)',
2003
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-compact)',
1597
2004
  },
1598
2005
  '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
1599
- paddingTop: 'var(--ids-comp-size-card-slot-size-padding-x-compact)',
1600
- paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-x-compact)',
2006
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-x-compact)',
2007
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-compact)',
1601
2008
  },
1602
2009
  '.ids-card.ids-card-comfortable.ids-card-horizontal': {
1603
2010
  padding:
1604
- 'var(--ids-comp-size-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-size-card-container-horizontal-size-padding-x-comfortable)',
1605
- gap: 'var(--ids-comp-size-card-container-horizontal-size-gap-comfortable)',
1606
- borderRadius: 'var(--ids-comp-size-card-container-horizontal-size-border-radius-comfortable)',
2011
+ 'var(--ids-comp-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-card-container-horizontal-size-padding-x-comfortable)',
2012
+ gap: 'var(--ids-comp-card-container-horizontal-size-gap-comfortable)',
2013
+ borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-comfortable)',
1607
2014
  },
1608
2015
  '.ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined': {
1609
- borderWidth: 'var(--ids-comp-size-card-container-horizontal-size-border-width-comfortable)',
2016
+ borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-comfortable)',
1610
2017
  },
1611
2018
  '.ids-card.ids-card-comfortable.ids-card-vertical': {
1612
2019
  padding:
1613
- 'var(--ids-comp-size-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-size-card-container-vertical-size-padding-x-comfortable)',
1614
- gap: 'var(--ids-comp-size-card-container-vertical-size-gap-comfortable)',
1615
- borderRadius: 'var(--ids-comp-size-card-container-vertical-size-border-radius-comfortable)',
2020
+ 'var(--ids-comp-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-card-container-vertical-size-padding-x-comfortable)',
2021
+ gap: 'var(--ids-comp-card-container-vertical-size-gap-comfortable)',
2022
+ borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-comfortable)',
1616
2023
  },
1617
2024
  '.ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined': {
1618
- borderWidth: 'var(--ids-comp-size-card-container-vertical-size-border-width-comfortable)',
2025
+ borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-comfortable)',
1619
2026
  },
1620
2027
  '.ids-card.ids-card-comfortable.ids-card-clickable:focus': {
1621
- outlineWidth: 'var(--ids-comp-size-card-focused-outline-outline-comfortable)',
2028
+ outlineWidth: 'var(--ids-comp-card-focused-outline-outline-comfortable)',
1622
2029
  },
1623
2030
  '.ids-card.ids-card-comfortable .ids-card-header-headline': {
1624
- gap: 'var(--ids-comp-size-card-header-headline-gap-comfortable)',
1625
- padding:
1626
- 'var(--ids-comp-size-card-header-headline-padding-y-comfortable) var(--ids-comp-size-card-header-headline-padding-x-comfortable)',
2031
+ gap: 'var(--ids-comp-card-header-headline-gap-comfortable)',
2032
+ padding: 'var(--ids-comp-card-header-headline-padding-y-comfortable) var(--ids-comp-card-header-headline-padding-x-comfortable)',
1627
2033
  },
1628
2034
  '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
1629
- paddingTop: 'var(--ids-comp-size-card-slot-size-padding-top-comfortable)',
2035
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-top-comfortable)',
1630
2036
  },
1631
2037
  '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
1632
- paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-bottom-comfortable)',
2038
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-comfortable)',
1633
2039
  },
1634
2040
  '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section.ids-card-section-padded': {
1635
- paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-x-comfortable)',
1636
- paddingRight: 'var(--ids-comp-size-card-slot-size-padding-x-comfortable)',
2041
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
2042
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
1637
2043
  },
1638
2044
  '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
1639
- paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-top-comfortable)',
2045
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-comfortable)',
1640
2046
  },
1641
2047
  '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
1642
- paddingRight: 'var(--ids-comp-size-card-slot-size-padding-bottom-comfortable)',
2048
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-comfortable)',
1643
2049
  },
1644
2050
  '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
1645
- paddingTop: 'var(--ids-comp-size-card-slot-size-padding-x-comfortable)',
1646
- paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-x-comfortable)',
2051
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
2052
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-comfortable)',
1647
2053
  },
1648
2054
  '.ids-card.ids-card-spacious.ids-card-horizontal': {
1649
2055
  padding:
1650
- 'var(--ids-comp-size-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-size-card-container-horizontal-size-padding-x-spacious)',
1651
- gap: 'var(--ids-comp-size-card-container-horizontal-size-gap-spacious)',
1652
- borderRadius: 'var(--ids-comp-size-card-container-horizontal-size-border-radius-spacious)',
2056
+ 'var(--ids-comp-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-card-container-horizontal-size-padding-x-spacious)',
2057
+ gap: 'var(--ids-comp-card-container-horizontal-size-gap-spacious)',
2058
+ borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-spacious)',
1653
2059
  },
1654
2060
  '.ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined': {
1655
- borderWidth: 'var(--ids-comp-size-card-container-horizontal-size-border-width-spacious)',
2061
+ borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-spacious)',
1656
2062
  },
1657
2063
  '.ids-card.ids-card-spacious.ids-card-vertical': {
1658
2064
  padding:
1659
- 'var(--ids-comp-size-card-container-vertical-size-padding-y-spacious) var(--ids-comp-size-card-container-vertical-size-padding-x-spacious)',
1660
- gap: 'var(--ids-comp-size-card-container-vertical-size-gap-spacious)',
1661
- borderRadius: 'var(--ids-comp-size-card-container-vertical-size-border-radius-spacious)',
2065
+ 'var(--ids-comp-card-container-vertical-size-padding-y-spacious) var(--ids-comp-card-container-vertical-size-padding-x-spacious)',
2066
+ gap: 'var(--ids-comp-card-container-vertical-size-gap-spacious)',
2067
+ borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-spacious)',
1662
2068
  },
1663
2069
  '.ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined': {
1664
- borderWidth: 'var(--ids-comp-size-card-container-vertical-size-border-width-spacious)',
1665
- },
1666
- '.ids-card.ids-card-spacious.ids-card-clickable:focus': {
1667
- outlineWidth: 'var(--ids-comp-size-card-focused-outline-outline-spacious)',
2070
+ borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-spacious)',
1668
2071
  },
2072
+ '.ids-card.ids-card-spacious.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-spacious)' },
1669
2073
  '.ids-card.ids-card-spacious .ids-card-header-headline': {
1670
- gap: 'var(--ids-comp-size-card-header-headline-gap-spacious)',
1671
- padding:
1672
- 'var(--ids-comp-size-card-header-headline-padding-y-spacious) var(--ids-comp-size-card-header-headline-padding-x-spacious)',
2074
+ gap: 'var(--ids-comp-card-header-headline-gap-spacious)',
2075
+ padding: 'var(--ids-comp-card-header-headline-padding-y-spacious) var(--ids-comp-card-header-headline-padding-x-spacious)',
1673
2076
  },
1674
2077
  '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
1675
- paddingTop: 'var(--ids-comp-size-card-slot-size-padding-top-spacious)',
2078
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-top-spacious)',
1676
2079
  },
1677
2080
  '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
1678
- paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-bottom-spacious)',
2081
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-spacious)',
1679
2082
  },
1680
2083
  '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section.ids-card-section-padded': {
1681
- paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-x-spacious)',
1682
- paddingRight: 'var(--ids-comp-size-card-slot-size-padding-x-spacious)',
2084
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
2085
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
1683
2086
  },
1684
2087
  '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
1685
- paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-top-spacious)',
2088
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-spacious)',
1686
2089
  },
1687
2090
  '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
1688
- paddingRight: 'var(--ids-comp-size-card-slot-size-padding-bottom-spacious)',
2091
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-spacious)',
1689
2092
  },
1690
2093
  '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
1691
- paddingTop: 'var(--ids-comp-size-card-slot-size-padding-x-spacious)',
1692
- paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-x-spacious)',
2094
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
2095
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-spacious)',
1693
2096
  },
1694
2097
  '.ids-card.ids-card-dense.ids-card-horizontal': {
1695
2098
  padding:
1696
- 'var(--ids-comp-size-card-container-horizontal-size-padding-y-dense) var(--ids-comp-size-card-container-horizontal-size-padding-x-dense)',
1697
- gap: 'var(--ids-comp-size-card-container-horizontal-size-gap-dense)',
1698
- borderRadius: 'var(--ids-comp-size-card-container-horizontal-size-border-radius-dense)',
2099
+ 'var(--ids-comp-card-container-horizontal-size-padding-y-dense) var(--ids-comp-card-container-horizontal-size-padding-x-dense)',
2100
+ gap: 'var(--ids-comp-card-container-horizontal-size-gap-dense)',
2101
+ borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-dense)',
1699
2102
  },
1700
2103
  '.ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined': {
1701
- borderWidth: 'var(--ids-comp-size-card-container-horizontal-size-border-width-dense)',
2104
+ borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-dense)',
1702
2105
  },
1703
2106
  '.ids-card.ids-card-dense.ids-card-vertical': {
1704
2107
  padding:
1705
- 'var(--ids-comp-size-card-container-vertical-size-padding-y-dense) var(--ids-comp-size-card-container-vertical-size-padding-x-dense)',
1706
- gap: 'var(--ids-comp-size-card-container-vertical-size-gap-dense)',
1707
- borderRadius: 'var(--ids-comp-size-card-container-vertical-size-border-radius-dense)',
2108
+ 'var(--ids-comp-card-container-vertical-size-padding-y-dense) var(--ids-comp-card-container-vertical-size-padding-x-dense)',
2109
+ gap: 'var(--ids-comp-card-container-vertical-size-gap-dense)',
2110
+ borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-dense)',
1708
2111
  },
1709
2112
  '.ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined': {
1710
- borderWidth: 'var(--ids-comp-size-card-container-vertical-size-border-width-dense)',
2113
+ borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-dense)',
1711
2114
  },
1712
- '.ids-card.ids-card-dense.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-size-card-focused-outline-outline-dense)' },
2115
+ '.ids-card.ids-card-dense.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-dense)' },
1713
2116
  '.ids-card.ids-card-dense .ids-card-header-headline': {
1714
- gap: 'var(--ids-comp-size-card-header-headline-gap-dense)',
1715
- padding: 'var(--ids-comp-size-card-header-headline-padding-y-dense) var(--ids-comp-size-card-header-headline-padding-x-dense)',
2117
+ gap: 'var(--ids-comp-card-header-headline-gap-dense)',
2118
+ padding: 'var(--ids-comp-card-header-headline-padding-y-dense) var(--ids-comp-card-header-headline-padding-x-dense)',
1716
2119
  },
1717
2120
  '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
1718
- paddingTop: 'var(--ids-comp-size-card-slot-size-padding-top-dense)',
2121
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-top-dense)',
1719
2122
  },
1720
2123
  '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
1721
- paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-bottom-dense)',
2124
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-bottom-dense)',
1722
2125
  },
1723
2126
  '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section.ids-card-section-padded': {
1724
- paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-x-dense)',
1725
- paddingRight: 'var(--ids-comp-size-card-slot-size-padding-x-dense)',
2127
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-x-dense)',
2128
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-x-dense)',
1726
2129
  },
1727
2130
  '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
1728
- paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-top-dense)',
2131
+ paddingLeft: 'var(--ids-comp-card-slot-size-padding-top-dense)',
1729
2132
  },
1730
2133
  '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
1731
- paddingRight: 'var(--ids-comp-size-card-slot-size-padding-bottom-dense)',
2134
+ paddingRight: 'var(--ids-comp-card-slot-size-padding-bottom-dense)',
1732
2135
  },
1733
2136
  '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
1734
- paddingTop: 'var(--ids-comp-size-card-slot-size-padding-x-dense)',
1735
- paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-x-dense)',
2137
+ paddingTop: 'var(--ids-comp-card-slot-size-padding-x-dense)',
2138
+ paddingBottom: 'var(--ids-comp-card-slot-size-padding-x-dense)',
1736
2139
  },
1737
2140
  '.ids-card.ids-card-filled.ids-card-primary': {
1738
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-enabled)',
1739
- borderColor: 'var(--ids-comp-card-filled-color-border-primary-enabled)',
2141
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-default)',
2142
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-default)',
1740
2143
  },
1741
2144
  '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:hover': {
1742
2145
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-hovered)',
@@ -1755,8 +2158,8 @@ module.exports = function ComponentsPlugin() {
1755
2158
  borderColor: 'var(--ids-comp-card-filled-color-border-primary-disabled)',
1756
2159
  },
1757
2160
  '.ids-card.ids-card-filled.ids-card-secondary': {
1758
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-enabled)',
1759
- borderColor: 'var(--ids-comp-card-filled-color-border-secondary-enabled)',
2161
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-default)',
2162
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-default)',
1760
2163
  },
1761
2164
  '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:hover': {
1762
2165
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-hovered)',
@@ -1775,8 +2178,8 @@ module.exports = function ComponentsPlugin() {
1775
2178
  borderColor: 'var(--ids-comp-card-filled-color-border-secondary-disabled)',
1776
2179
  },
1777
2180
  '.ids-card.ids-card-filled.ids-card-brand': {
1778
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-enabled)',
1779
- borderColor: 'var(--ids-comp-card-filled-color-border-brand-enabled)',
2181
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-default)',
2182
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-default)',
1780
2183
  },
1781
2184
  '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:hover': {
1782
2185
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-hovered)',
@@ -1795,8 +2198,8 @@ module.exports = function ComponentsPlugin() {
1795
2198
  borderColor: 'var(--ids-comp-card-filled-color-border-brand-disabled)',
1796
2199
  },
1797
2200
  '.ids-card.ids-card-filled.ids-card-error': {
1798
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-enabled)',
1799
- borderColor: 'var(--ids-comp-card-filled-color-border-error-enabled)',
2201
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-default)',
2202
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-default)',
1800
2203
  },
1801
2204
  '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:hover': {
1802
2205
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-hovered)',
@@ -1810,13 +2213,9 @@ module.exports = function ComponentsPlugin() {
1810
2213
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-pressed)',
1811
2214
  borderColor: 'var(--ids-comp-card-filled-color-border-error-pressed)',
1812
2215
  },
1813
- '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable.ids-card-disabled': {
1814
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-disabled)',
1815
- borderColor: 'var(--ids-comp-card-filled-color-border-error-disabled)',
1816
- },
1817
2216
  '.ids-card.ids-card-filled.ids-card-success': {
1818
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-enabled)',
1819
- borderColor: 'var(--ids-comp-card-filled-color-border-success-enabled)',
2217
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-default)',
2218
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-default)',
1820
2219
  },
1821
2220
  '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:hover': {
1822
2221
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-hovered)',
@@ -1830,13 +2229,9 @@ module.exports = function ComponentsPlugin() {
1830
2229
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-pressed)',
1831
2230
  borderColor: 'var(--ids-comp-card-filled-color-border-success-pressed)',
1832
2231
  },
1833
- '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable.ids-card-disabled': {
1834
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-disabled)',
1835
- borderColor: 'var(--ids-comp-card-filled-color-border-success-disabled)',
1836
- },
1837
2232
  '.ids-card.ids-card-filled.ids-card-warning': {
1838
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-enabled)',
1839
- borderColor: 'var(--ids-comp-card-filled-color-border-warning-enabled)',
2233
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-default)',
2234
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-default)',
1840
2235
  },
1841
2236
  '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:hover': {
1842
2237
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-hovered)',
@@ -1850,13 +2245,9 @@ module.exports = function ComponentsPlugin() {
1850
2245
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-pressed)',
1851
2246
  borderColor: 'var(--ids-comp-card-filled-color-border-warning-pressed)',
1852
2247
  },
1853
- '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable.ids-card-disabled': {
1854
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-disabled)',
1855
- borderColor: 'var(--ids-comp-card-filled-color-border-warning-disabled)',
1856
- },
1857
2248
  '.ids-card.ids-card-filled.ids-card-info': {
1858
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-enabled)',
1859
- borderColor: 'var(--ids-comp-card-filled-color-border-info-enabled)',
2249
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-default)',
2250
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-default)',
1860
2251
  },
1861
2252
  '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:hover': {
1862
2253
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-hovered)',
@@ -1870,13 +2261,9 @@ module.exports = function ComponentsPlugin() {
1870
2261
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-pressed)',
1871
2262
  borderColor: 'var(--ids-comp-card-filled-color-border-info-pressed)',
1872
2263
  },
1873
- '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable.ids-card-disabled': {
1874
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-disabled)',
1875
- borderColor: 'var(--ids-comp-card-filled-color-border-info-disabled)',
1876
- },
1877
2264
  '.ids-card.ids-card-filled.ids-card-light': {
1878
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-enabled)',
1879
- borderColor: 'var(--ids-comp-card-filled-color-border-light-enabled)',
2265
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-default)',
2266
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-default)',
1880
2267
  },
1881
2268
  '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:hover': {
1882
2269
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-hovered)',
@@ -1895,8 +2282,8 @@ module.exports = function ComponentsPlugin() {
1895
2282
  borderColor: 'var(--ids-comp-card-filled-color-border-light-disabled)',
1896
2283
  },
1897
2284
  '.ids-card.ids-card-filled.ids-card-dark': {
1898
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-enabled)',
1899
- borderColor: 'var(--ids-comp-card-filled-color-border-dark-enabled)',
2285
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-default)',
2286
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-default)',
1900
2287
  },
1901
2288
  '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:hover': {
1902
2289
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-hovered)',
@@ -1915,8 +2302,8 @@ module.exports = function ComponentsPlugin() {
1915
2302
  borderColor: 'var(--ids-comp-card-filled-color-border-dark-disabled)',
1916
2303
  },
1917
2304
  '.ids-card.ids-card-filled.ids-card-surface': {
1918
- backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-enabled)',
1919
- borderColor: 'var(--ids-comp-card-filled-color-border-surface-enabled)',
2305
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-default)',
2306
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-default)',
1920
2307
  },
1921
2308
  '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:hover': {
1922
2309
  backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-hovered)',
@@ -1935,8 +2322,8 @@ module.exports = function ComponentsPlugin() {
1935
2322
  borderColor: 'var(--ids-comp-card-filled-color-border-surface-disabled)',
1936
2323
  },
1937
2324
  '.ids-card.ids-card-outlined.ids-card-primary': {
1938
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-enabled)',
1939
- borderColor: 'var(--ids-comp-card-outlined-color-border-primary-enabled)',
2325
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-default)',
2326
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-default)',
1940
2327
  },
1941
2328
  '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:hover': {
1942
2329
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-hovered)',
@@ -1955,8 +2342,8 @@ module.exports = function ComponentsPlugin() {
1955
2342
  borderColor: 'var(--ids-comp-card-outlined-color-border-primary-disabled)',
1956
2343
  },
1957
2344
  '.ids-card.ids-card-outlined.ids-card-secondary': {
1958
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-enabled)',
1959
- borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-enabled)',
2345
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-default)',
2346
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-default)',
1960
2347
  },
1961
2348
  '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:hover': {
1962
2349
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-hovered)',
@@ -1975,8 +2362,8 @@ module.exports = function ComponentsPlugin() {
1975
2362
  borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-disabled)',
1976
2363
  },
1977
2364
  '.ids-card.ids-card-outlined.ids-card-brand': {
1978
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-enabled)',
1979
- borderColor: 'var(--ids-comp-card-outlined-color-border-brand-enabled)',
2365
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-default)',
2366
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-default)',
1980
2367
  },
1981
2368
  '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:hover': {
1982
2369
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-hovered)',
@@ -1995,8 +2382,8 @@ module.exports = function ComponentsPlugin() {
1995
2382
  borderColor: 'var(--ids-comp-card-outlined-color-border-brand-disabled)',
1996
2383
  },
1997
2384
  '.ids-card.ids-card-outlined.ids-card-error': {
1998
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-enabled)',
1999
- borderColor: 'var(--ids-comp-card-outlined-color-border-error-enabled)',
2385
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-default)',
2386
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-default)',
2000
2387
  },
2001
2388
  '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:hover': {
2002
2389
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-hovered)',
@@ -2010,13 +2397,9 @@ module.exports = function ComponentsPlugin() {
2010
2397
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-pressed)',
2011
2398
  borderColor: 'var(--ids-comp-card-outlined-color-border-error-pressed)',
2012
2399
  },
2013
- '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable.ids-card-disabled': {
2014
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-disabled)',
2015
- borderColor: 'var(--ids-comp-card-outlined-color-border-error-disabled)',
2016
- },
2017
2400
  '.ids-card.ids-card-outlined.ids-card-success': {
2018
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-enabled)',
2019
- borderColor: 'var(--ids-comp-card-outlined-color-border-success-enabled)',
2401
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-default)',
2402
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-default)',
2020
2403
  },
2021
2404
  '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:hover': {
2022
2405
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-hovered)',
@@ -2030,13 +2413,9 @@ module.exports = function ComponentsPlugin() {
2030
2413
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-pressed)',
2031
2414
  borderColor: 'var(--ids-comp-card-outlined-color-border-success-pressed)',
2032
2415
  },
2033
- '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable.ids-card-disabled': {
2034
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-disabled)',
2035
- borderColor: 'var(--ids-comp-card-outlined-color-border-success-disabled)',
2036
- },
2037
2416
  '.ids-card.ids-card-outlined.ids-card-warning': {
2038
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-enabled)',
2039
- borderColor: 'var(--ids-comp-card-outlined-color-border-warning-enabled)',
2417
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-default)',
2418
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-default)',
2040
2419
  },
2041
2420
  '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:hover': {
2042
2421
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-hovered)',
@@ -2050,13 +2429,9 @@ module.exports = function ComponentsPlugin() {
2050
2429
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-pressed)',
2051
2430
  borderColor: 'var(--ids-comp-card-outlined-color-border-warning-pressed)',
2052
2431
  },
2053
- '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable.ids-card-disabled': {
2054
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-disabled)',
2055
- borderColor: 'var(--ids-comp-card-outlined-color-border-warning-disabled)',
2056
- },
2057
2432
  '.ids-card.ids-card-outlined.ids-card-info': {
2058
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-enabled)',
2059
- borderColor: 'var(--ids-comp-card-outlined-color-border-info-enabled)',
2433
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-default)',
2434
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-default)',
2060
2435
  },
2061
2436
  '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:hover': {
2062
2437
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-hovered)',
@@ -2070,13 +2445,9 @@ module.exports = function ComponentsPlugin() {
2070
2445
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-pressed)',
2071
2446
  borderColor: 'var(--ids-comp-card-outlined-color-border-info-pressed)',
2072
2447
  },
2073
- '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable.ids-card-disabled': {
2074
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-disabled)',
2075
- borderColor: 'var(--ids-comp-card-outlined-color-border-info-disabled)',
2076
- },
2077
2448
  '.ids-card.ids-card-outlined.ids-card-light': {
2078
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-enabled)',
2079
- borderColor: 'var(--ids-comp-card-outlined-color-border-light-enabled)',
2449
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-default)',
2450
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-default)',
2080
2451
  },
2081
2452
  '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:hover': {
2082
2453
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-hovered)',
@@ -2095,8 +2466,8 @@ module.exports = function ComponentsPlugin() {
2095
2466
  borderColor: 'var(--ids-comp-card-outlined-color-border-light-disabled)',
2096
2467
  },
2097
2468
  '.ids-card.ids-card-outlined.ids-card-dark': {
2098
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-enabled)',
2099
- borderColor: 'var(--ids-comp-card-outlined-color-border-dark-enabled)',
2469
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-default)',
2470
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-default)',
2100
2471
  },
2101
2472
  '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:hover': {
2102
2473
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-hovered)',
@@ -2115,8 +2486,8 @@ module.exports = function ComponentsPlugin() {
2115
2486
  borderColor: 'var(--ids-comp-card-outlined-color-border-dark-disabled)',
2116
2487
  },
2117
2488
  '.ids-card.ids-card-outlined.ids-card-surface': {
2118
- backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-enabled)',
2119
- borderColor: 'var(--ids-comp-card-outlined-color-border-surface-enabled)',
2489
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-default)',
2490
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-default)',
2120
2491
  },
2121
2492
  '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:hover': {
2122
2493
  backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-hovered)',
@@ -2135,8 +2506,8 @@ module.exports = function ComponentsPlugin() {
2135
2506
  borderColor: 'var(--ids-comp-card-outlined-color-border-surface-disabled)',
2136
2507
  },
2137
2508
  '.ids-card.ids-card-elevated.ids-card-primary': {
2138
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-enabled)',
2139
- borderColor: 'var(--ids-comp-card-elevated-color-border-primary-enabled)',
2509
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-default)',
2510
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-default)',
2140
2511
  },
2141
2512
  '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:hover': {
2142
2513
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-hovered)',
@@ -2155,8 +2526,8 @@ module.exports = function ComponentsPlugin() {
2155
2526
  borderColor: 'var(--ids-comp-card-elevated-color-border-primary-disabled)',
2156
2527
  },
2157
2528
  '.ids-card.ids-card-elevated.ids-card-secondary': {
2158
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-enabled)',
2159
- borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-enabled)',
2529
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-default)',
2530
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-default)',
2160
2531
  },
2161
2532
  '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:hover': {
2162
2533
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-hovered)',
@@ -2175,8 +2546,8 @@ module.exports = function ComponentsPlugin() {
2175
2546
  borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-disabled)',
2176
2547
  },
2177
2548
  '.ids-card.ids-card-elevated.ids-card-brand': {
2178
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-enabled)',
2179
- borderColor: 'var(--ids-comp-card-elevated-color-border-brand-enabled)',
2549
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-default)',
2550
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-default)',
2180
2551
  },
2181
2552
  '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:hover': {
2182
2553
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-hovered)',
@@ -2195,8 +2566,8 @@ module.exports = function ComponentsPlugin() {
2195
2566
  borderColor: 'var(--ids-comp-card-elevated-color-border-brand-disabled)',
2196
2567
  },
2197
2568
  '.ids-card.ids-card-elevated.ids-card-error': {
2198
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-enabled)',
2199
- borderColor: 'var(--ids-comp-card-elevated-color-border-error-enabled)',
2569
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-default)',
2570
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-default)',
2200
2571
  },
2201
2572
  '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:hover': {
2202
2573
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-hovered)',
@@ -2210,13 +2581,9 @@ module.exports = function ComponentsPlugin() {
2210
2581
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-pressed)',
2211
2582
  borderColor: 'var(--ids-comp-card-elevated-color-border-error-pressed)',
2212
2583
  },
2213
- '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable.ids-card-disabled': {
2214
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-disabled)',
2215
- borderColor: 'var(--ids-comp-card-elevated-color-border-error-disabled)',
2216
- },
2217
2584
  '.ids-card.ids-card-elevated.ids-card-success': {
2218
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-enabled)',
2219
- borderColor: 'var(--ids-comp-card-elevated-color-border-success-enabled)',
2585
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-default)',
2586
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-default)',
2220
2587
  },
2221
2588
  '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:hover': {
2222
2589
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-hovered)',
@@ -2230,13 +2597,9 @@ module.exports = function ComponentsPlugin() {
2230
2597
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-pressed)',
2231
2598
  borderColor: 'var(--ids-comp-card-elevated-color-border-success-pressed)',
2232
2599
  },
2233
- '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable.ids-card-disabled': {
2234
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-disabled)',
2235
- borderColor: 'var(--ids-comp-card-elevated-color-border-success-disabled)',
2236
- },
2237
2600
  '.ids-card.ids-card-elevated.ids-card-warning': {
2238
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-enabled)',
2239
- borderColor: 'var(--ids-comp-card-elevated-color-border-warning-enabled)',
2601
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-default)',
2602
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-default)',
2240
2603
  },
2241
2604
  '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:hover': {
2242
2605
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-hovered)',
@@ -2250,13 +2613,9 @@ module.exports = function ComponentsPlugin() {
2250
2613
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-pressed)',
2251
2614
  borderColor: 'var(--ids-comp-card-elevated-color-border-warning-pressed)',
2252
2615
  },
2253
- '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable.ids-card-disabled': {
2254
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-disabled)',
2255
- borderColor: 'var(--ids-comp-card-elevated-color-border-warning-disabled)',
2256
- },
2257
2616
  '.ids-card.ids-card-elevated.ids-card-info': {
2258
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-enabled)',
2259
- borderColor: 'var(--ids-comp-card-elevated-color-border-info-enabled)',
2617
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-default)',
2618
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-default)',
2260
2619
  },
2261
2620
  '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:hover': {
2262
2621
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-hovered)',
@@ -2270,13 +2629,9 @@ module.exports = function ComponentsPlugin() {
2270
2629
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-pressed)',
2271
2630
  borderColor: 'var(--ids-comp-card-elevated-color-border-info-pressed)',
2272
2631
  },
2273
- '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable.ids-card-disabled': {
2274
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-disabled)',
2275
- borderColor: 'var(--ids-comp-card-elevated-color-border-info-disabled)',
2276
- },
2277
2632
  '.ids-card.ids-card-elevated.ids-card-light': {
2278
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-enabled)',
2279
- borderColor: 'var(--ids-comp-card-elevated-color-border-light-enabled)',
2633
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-default)',
2634
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-default)',
2280
2635
  },
2281
2636
  '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:hover': {
2282
2637
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-hovered)',
@@ -2295,8 +2650,8 @@ module.exports = function ComponentsPlugin() {
2295
2650
  borderColor: 'var(--ids-comp-card-elevated-color-border-light-disabled)',
2296
2651
  },
2297
2652
  '.ids-card.ids-card-elevated.ids-card-dark': {
2298
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-enabled)',
2299
- borderColor: 'var(--ids-comp-card-elevated-color-border-dark-enabled)',
2653
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-default)',
2654
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-default)',
2300
2655
  },
2301
2656
  '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:hover': {
2302
2657
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-hovered)',
@@ -2315,8 +2670,8 @@ module.exports = function ComponentsPlugin() {
2315
2670
  borderColor: 'var(--ids-comp-card-elevated-color-border-dark-disabled)',
2316
2671
  },
2317
2672
  '.ids-card.ids-card-elevated.ids-card-surface': {
2318
- backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-enabled)',
2319
- borderColor: 'var(--ids-comp-card-elevated-color-border-surface-enabled)',
2673
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-default)',
2674
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-default)',
2320
2675
  },
2321
2676
  '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:hover': {
2322
2677
  backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-hovered)',
@@ -2338,7 +2693,7 @@ module.exports = function ComponentsPlugin() {
2338
2693
  boxSizing: 'border-box',
2339
2694
  borderStyle: 'solid',
2340
2695
  borderColor: 'var(--ids-comp-dialog-container-color-border-surface-default)',
2341
- backgroundColor: 'var(--ids-comp-dialog-container-color-bg-enabled)',
2696
+ backgroundColor: 'var(--ids-comp-dialog-container-color-bg-default)',
2342
2697
  boxShadow:
2343
2698
  '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)',
2344
2699
  },
@@ -2347,9 +2702,16 @@ module.exports = function ComponentsPlugin() {
2347
2702
  opacity: 'var(--ids-comp-dialog-backdrop-opacity)',
2348
2703
  backgroundColor: 'var(--ids-comp-dialog-backdrop-background)',
2349
2704
  },
2350
- '.ids-dialog .ids-dialog-container': { display: 'grid', gridTemplateRows: 'auto 1fr auto', position: 'relative', maxHeight: '80vh' },
2705
+ '.ids-dialog .ids-dialog-container': {
2706
+ boxSizing: 'border-box',
2707
+ display: 'grid',
2708
+ gridTemplateRows: 'auto 1fr auto',
2709
+ position: 'relative',
2710
+ maxHeight: '80vh',
2711
+ },
2351
2712
  '.ids-dialog .ids-dialog-container .ids-dialog-header': { display: 'flex', alignItems: 'stretch' },
2352
2713
  '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title': { fontStyle: 'normal' },
2714
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden': { display: 'none' },
2353
2715
  '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': { fontStyle: 'normal' },
2354
2716
  '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2355
2717
  display: 'flex',
@@ -2363,7 +2725,7 @@ module.exports = function ComponentsPlugin() {
2363
2725
  alignItems: 'center',
2364
2726
  justifyContent: 'center',
2365
2727
  overflowY: 'auto',
2366
- background: 'var(--ids-comp-dialog-content-color-bg-enabled)',
2728
+ background: 'var(--ids-comp-dialog-content-color-bg-default)',
2367
2729
  },
2368
2730
  '.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow': { overflowY: 'auto', height: '100%' },
2369
2731
  '.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
@@ -2374,7 +2736,7 @@ module.exports = function ComponentsPlugin() {
2374
2736
  },
2375
2737
  '.ids-dialog .ids-dialog-container .ids-dialog-actions': {
2376
2738
  display: 'flex',
2377
- background: 'var(--ids-comp-dialog-footer-color-bg-enabled)',
2739
+ background: 'var(--ids-comp-dialog-footer-color-bg-default)',
2378
2740
  justifyContent: 'flex-end',
2379
2741
  alignItems: 'flex-start',
2380
2742
  alignContent: 'flex-start',
@@ -2382,204 +2744,310 @@ module.exports = function ComponentsPlugin() {
2382
2744
  flexWrap: 'wrap',
2383
2745
  },
2384
2746
  '.ids-dialog.ids-dialog-compact': {
2385
- borderRadius: 'var(--ids-comp-size-dialog-container-size-border-radius-compact)',
2386
- borderWidth: 'var(--ids-comp-size-dialog-container-size-border-width-compact)',
2747
+ borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-compact)',
2748
+ borderWidth: 'var(--ids-comp-dialog-container-size-border-width-compact)',
2387
2749
  },
2388
2750
  '.ids-dialog.ids-dialog-compact .ids-dialog-container': {
2389
- width: 'var(--ids-comp-size-dialog-container-size-width-compact)',
2390
- minHeight: 'var(--ids-comp-size-dialog-container-size-min-height-compact)',
2391
- padding:
2392
- 'var(--ids-comp-size-dialog-container-size-padding-y-compact) var(--ids-comp-size-dialog-container-size-padding-x-compact)',
2393
- gap: 'var(--ids-comp-size-dialog-container-size-gap-compact)',
2751
+ width: 'var(--ids-comp-dialog-container-size-width-compact)',
2752
+ minHeight: 'var(--ids-comp-dialog-container-size-min-height-compact)',
2753
+ padding: 'var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact)',
2754
+ gap: 'var(--ids-comp-dialog-container-size-gap-compact)',
2394
2755
  },
2395
2756
  '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
2396
- fontFamily: 'var(--ids-comp-size-dialog-header-title-typography-font-family-compact)',
2397
- fontSize: 'var(--ids-comp-size-dialog-header-title-typography-font-size-compact)',
2398
- fontWeight: 'var(--ids-comp-size-dialog-header-title-typography-font-weight-compact)',
2399
- letterSpacing: 'var(--ids-comp-size-dialog-header-title-typography-letter-spacing-compact)',
2400
- lineHeight: 'var(--ids-comp-size-dialog-header-title-typography-line-height-compact)',
2757
+ fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-compact)',
2758
+ fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-compact)',
2759
+ fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-compact)',
2760
+ letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-compact)',
2761
+ lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-compact)',
2401
2762
  },
2402
2763
  '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
2403
- fontFamily: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-family-compact)',
2404
- fontSize: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-size-compact)',
2405
- fontWeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-compact)',
2406
- letterSpacing: 'var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-compact)',
2407
- lineHeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-line-height-compact)',
2764
+ fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-compact)',
2765
+ fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-compact)',
2766
+ fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact)',
2767
+ letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact)',
2768
+ lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-compact)',
2408
2769
  },
2409
2770
  '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2410
- gap: 'var(--ids-comp-size-dialog-header-size-gap-compact)',
2411
- padding: 'var(--ids-comp-size-dialog-header-size-padding-y-compact) var(--ids-comp-size-dialog-header-size-padding-x-compact)',
2771
+ gap: 'var(--ids-comp-dialog-header-size-gap-compact)',
2772
+ padding: 'var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact)',
2412
2773
  },
2413
2774
  '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content': {
2414
- padding:
2415
- 'var(--ids-comp-size-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-size-dialog-content-fixed-size-padding-x-compact)',
2775
+ padding: 'var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact)',
2416
2776
  },
2417
2777
  '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
2418
2778
  padding:
2419
- 'var(--ids-comp-size-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-compact)',
2420
- borderTopWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact)',
2421
- borderBottomWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact)',
2779
+ 'var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact)',
2780
+ borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-compact)',
2781
+ borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-compact)',
2422
2782
  },
2423
2783
  '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions': {
2424
- padding: 'var(--ids-comp-size-dialog-footer-padding-y-compact) var(--ids-comp-size-dialog-footer-padding-x-compact)',
2784
+ padding: 'var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact)',
2425
2785
  },
2426
2786
  '.ids-dialog.ids-dialog-comfortable': {
2427
- borderRadius: 'var(--ids-comp-size-dialog-container-size-border-radius-comfortable)',
2428
- borderWidth: 'var(--ids-comp-size-dialog-container-size-border-width-comfortable)',
2787
+ borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-comfortable)',
2788
+ borderWidth: 'var(--ids-comp-dialog-container-size-border-width-comfortable)',
2429
2789
  },
2430
2790
  '.ids-dialog.ids-dialog-comfortable .ids-dialog-container': {
2431
- width: 'var(--ids-comp-size-dialog-container-size-width-comfortable)',
2432
- minHeight: 'var(--ids-comp-size-dialog-container-size-min-height-comfortable)',
2433
- padding:
2434
- 'var(--ids-comp-size-dialog-container-size-padding-y-comfortable) var(--ids-comp-size-dialog-container-size-padding-x-comfortable)',
2435
- gap: 'var(--ids-comp-size-dialog-container-size-gap-comfortable)',
2791
+ width: 'var(--ids-comp-dialog-container-size-width-comfortable)',
2792
+ minHeight: 'var(--ids-comp-dialog-container-size-min-height-comfortable)',
2793
+ padding: 'var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable)',
2794
+ gap: 'var(--ids-comp-dialog-container-size-gap-comfortable)',
2436
2795
  },
2437
2796
  '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
2438
- fontFamily: 'var(--ids-comp-size-dialog-header-title-typography-font-family-comfortable)',
2439
- fontSize: 'var(--ids-comp-size-dialog-header-title-typography-font-size-comfortable)',
2440
- fontWeight: 'var(--ids-comp-size-dialog-header-title-typography-font-weight-comfortable)',
2441
- letterSpacing: 'var(--ids-comp-size-dialog-header-title-typography-letter-spacing-comfortable)',
2442
- lineHeight: 'var(--ids-comp-size-dialog-header-title-typography-line-height-comfortable)',
2797
+ fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-comfortable)',
2798
+ fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-comfortable)',
2799
+ fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-comfortable)',
2800
+ letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable)',
2801
+ lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-comfortable)',
2443
2802
  },
2444
2803
  '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
2445
- fontFamily: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-family-comfortable)',
2446
- fontSize: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-size-comfortable)',
2447
- fontWeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-comfortable)',
2448
- letterSpacing: 'var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-comfortable)',
2449
- lineHeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-line-height-comfortable)',
2804
+ fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable)',
2805
+ fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable)',
2806
+ fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable)',
2807
+ letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable)',
2808
+ lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable)',
2450
2809
  },
2451
2810
  '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2452
- gap: 'var(--ids-comp-size-dialog-header-size-gap-comfortable)',
2453
- padding:
2454
- 'var(--ids-comp-size-dialog-header-size-padding-y-comfortable) var(--ids-comp-size-dialog-header-size-padding-x-comfortable)',
2811
+ gap: 'var(--ids-comp-dialog-header-size-gap-comfortable)',
2812
+ padding: 'var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable)',
2455
2813
  },
2456
2814
  '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content': {
2457
2815
  padding:
2458
- 'var(--ids-comp-size-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-fixed-size-padding-x-comfortable)',
2816
+ 'var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable)',
2459
2817
  },
2460
2818
  '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
2461
2819
  padding:
2462
- 'var(--ids-comp-size-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-comfortable)',
2463
- borderTopWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable)',
2464
- borderBottomWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable)',
2820
+ 'var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable)',
2821
+ borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)',
2822
+ borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)',
2465
2823
  },
2466
2824
  '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions': {
2467
- padding: 'var(--ids-comp-size-dialog-footer-padding-y-comfortable) var(--ids-comp-size-dialog-footer-padding-x-comfortable)',
2825
+ padding: 'var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable)',
2468
2826
  },
2469
2827
  '.ids-dialog.ids-dialog-spacious': {
2470
- borderRadius: 'var(--ids-comp-size-dialog-container-size-border-radius-spacious)',
2471
- borderWidth: 'var(--ids-comp-size-dialog-container-size-border-width-spacious)',
2828
+ borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-spacious)',
2829
+ borderWidth: 'var(--ids-comp-dialog-container-size-border-width-spacious)',
2472
2830
  },
2473
2831
  '.ids-dialog.ids-dialog-spacious .ids-dialog-container': {
2474
- width: 'var(--ids-comp-size-dialog-container-size-width-spacious)',
2475
- minHeight: 'var(--ids-comp-size-dialog-container-size-min-height-spacious)',
2476
- padding:
2477
- 'var(--ids-comp-size-dialog-container-size-padding-y-spacious) var(--ids-comp-size-dialog-container-size-padding-x-spacious)',
2478
- gap: 'var(--ids-comp-size-dialog-container-size-gap-spacious)',
2832
+ width: 'var(--ids-comp-dialog-container-size-width-spacious)',
2833
+ minHeight: 'var(--ids-comp-dialog-container-size-min-height-spacious)',
2834
+ padding: 'var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious)',
2835
+ gap: 'var(--ids-comp-dialog-container-size-gap-spacious)',
2479
2836
  },
2480
2837
  '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
2481
- fontFamily: 'var(--ids-comp-size-dialog-header-title-typography-font-family-spacious)',
2482
- fontSize: 'var(--ids-comp-size-dialog-header-title-typography-font-size-spacious)',
2483
- fontWeight: 'var(--ids-comp-size-dialog-header-title-typography-font-weight-spacious)',
2484
- letterSpacing: 'var(--ids-comp-size-dialog-header-title-typography-letter-spacing-spacious)',
2485
- lineHeight: 'var(--ids-comp-size-dialog-header-title-typography-line-height-spacious)',
2838
+ fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-spacious)',
2839
+ fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-spacious)',
2840
+ fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-spacious)',
2841
+ letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious)',
2842
+ lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-spacious)',
2486
2843
  },
2487
2844
  '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
2488
- fontFamily: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-family-spacious)',
2489
- fontSize: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-size-spacious)',
2490
- fontWeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-spacious)',
2491
- letterSpacing: 'var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-spacious)',
2492
- lineHeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-line-height-spacious)',
2845
+ fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious)',
2846
+ fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious)',
2847
+ fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious)',
2848
+ letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious)',
2849
+ lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious)',
2493
2850
  },
2494
2851
  '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2495
- gap: 'var(--ids-comp-size-dialog-header-size-gap-spacious)',
2496
- padding: 'var(--ids-comp-size-dialog-header-size-padding-y-spacious) var(--ids-comp-size-dialog-header-size-padding-x-spacious)',
2852
+ gap: 'var(--ids-comp-dialog-header-size-gap-spacious)',
2853
+ padding: 'var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious)',
2497
2854
  },
2498
2855
  '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content': {
2499
2856
  padding:
2500
- 'var(--ids-comp-size-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-size-dialog-content-fixed-size-padding-x-spacious)',
2857
+ 'var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious)',
2501
2858
  },
2502
2859
  '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
2503
2860
  padding:
2504
- 'var(--ids-comp-size-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-spacious)',
2505
- borderTopWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious)',
2506
- borderBottomWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious)',
2861
+ 'var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious)',
2862
+ borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)',
2863
+ borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)',
2507
2864
  },
2508
2865
  '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions': {
2509
- padding: 'var(--ids-comp-size-dialog-footer-padding-y-spacious) var(--ids-comp-size-dialog-footer-padding-x-spacious)',
2866
+ padding: 'var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious)',
2510
2867
  },
2511
2868
  '.ids-dialog.ids-dialog-dense': {
2512
- borderRadius: 'var(--ids-comp-size-dialog-container-size-border-radius-dense)',
2513
- borderWidth: 'var(--ids-comp-size-dialog-container-size-border-width-dense)',
2869
+ borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-dense)',
2870
+ borderWidth: 'var(--ids-comp-dialog-container-size-border-width-dense)',
2514
2871
  },
2515
2872
  '.ids-dialog.ids-dialog-dense .ids-dialog-container': {
2516
- width: 'var(--ids-comp-size-dialog-container-size-width-dense)',
2517
- minHeight: 'var(--ids-comp-size-dialog-container-size-min-height-dense)',
2518
- padding: 'var(--ids-comp-size-dialog-container-size-padding-y-dense) var(--ids-comp-size-dialog-container-size-padding-x-dense)',
2519
- gap: 'var(--ids-comp-size-dialog-container-size-gap-dense)',
2873
+ width: 'var(--ids-comp-dialog-container-size-width-dense)',
2874
+ minHeight: 'var(--ids-comp-dialog-container-size-min-height-dense)',
2875
+ padding: 'var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense)',
2876
+ gap: 'var(--ids-comp-dialog-container-size-gap-dense)',
2520
2877
  },
2521
2878
  '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
2522
- fontFamily: 'var(--ids-comp-size-dialog-header-title-typography-font-family-dense)',
2523
- fontSize: 'var(--ids-comp-size-dialog-header-title-typography-font-size-dense)',
2524
- fontWeight: 'var(--ids-comp-size-dialog-header-title-typography-font-weight-dense)',
2525
- letterSpacing: 'var(--ids-comp-size-dialog-header-title-typography-letter-spacing-dense)',
2526
- lineHeight: 'var(--ids-comp-size-dialog-header-title-typography-line-height-dense)',
2879
+ fontFamily: 'var(--ids-comp-dialog-header-title-typography-font-family-dense)',
2880
+ fontSize: 'var(--ids-comp-dialog-header-title-typography-font-size-dense)',
2881
+ fontWeight: 'var(--ids-comp-dialog-header-title-typography-font-weight-dense)',
2882
+ letterSpacing: 'var(--ids-comp-dialog-header-title-typography-letter-spacing-dense)',
2883
+ lineHeight: 'var(--ids-comp-dialog-header-title-typography-line-height-dense)',
2527
2884
  },
2528
2885
  '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
2529
- fontFamily: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-family-dense)',
2530
- fontSize: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-size-dense)',
2531
- fontWeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-dense)',
2532
- letterSpacing: 'var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-dense)',
2533
- lineHeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-line-height-dense)',
2886
+ fontFamily: 'var(--ids-comp-dialog-header-subtitle-typography-font-family-dense)',
2887
+ fontSize: 'var(--ids-comp-dialog-header-subtitle-typography-font-size-dense)',
2888
+ fontWeight: 'var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense)',
2889
+ letterSpacing: 'var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense)',
2890
+ lineHeight: 'var(--ids-comp-dialog-header-subtitle-typography-line-height-dense)',
2534
2891
  },
2535
2892
  '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2536
- gap: 'var(--ids-comp-size-dialog-header-size-gap-dense)',
2537
- padding: 'var(--ids-comp-size-dialog-header-size-padding-y-dense) var(--ids-comp-size-dialog-header-size-padding-x-dense)',
2893
+ gap: 'var(--ids-comp-dialog-header-size-gap-dense)',
2894
+ padding: 'var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense)',
2538
2895
  },
2539
2896
  '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content': {
2540
- padding:
2541
- 'var(--ids-comp-size-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-size-dialog-content-fixed-size-padding-x-dense)',
2897
+ padding: 'var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense)',
2542
2898
  },
2543
2899
  '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
2544
2900
  padding:
2545
- 'var(--ids-comp-size-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-dense)',
2546
- borderTopWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense)',
2547
- borderBottomWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense)',
2901
+ 'var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense)',
2902
+ borderTopWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-dense)',
2903
+ borderBottomWidth: 'var(--ids-comp-dialog-content-scrollable-size-border-width-dense)',
2548
2904
  },
2549
2905
  '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions': {
2550
- padding: 'var(--ids-comp-size-dialog-footer-padding-y-dense) var(--ids-comp-size-dialog-footer-padding-x-dense)',
2551
- },
2552
- '.ids-divider': {
2553
- flexShrink: [0, 0],
2906
+ padding: 'var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense)',
2907
+ },
2908
+ '.ids-divider': { flexShrink: [0, 0], display: 'flex', alignItems: 'center', justifyContent: 'center', alignSelf: 'stretch' },
2909
+ '.ids-divider.ids-divider-compact': { borderRadius: 'var(--ids-comp-divider-size-border-radius-compact)' },
2910
+ '.ids-divider.ids-divider-compact.ids-divider-horizontal': { height: 'var(--ids-comp-divider-size-height-compact)' },
2911
+ '.ids-divider.ids-divider-compact.ids-divider-vertical': { width: 'var(--ids-comp-divider-size-width-compact)' },
2912
+ '.ids-divider.ids-divider-comfortable': { borderRadius: 'var(--ids-comp-divider-size-border-radius-comfortable)' },
2913
+ '.ids-divider.ids-divider-comfortable.ids-divider-horizontal': { height: 'var(--ids-comp-divider-size-height-comfortable)' },
2914
+ '.ids-divider.ids-divider-comfortable.ids-divider-vertical': { width: 'var(--ids-comp-divider-size-width-comfortable)' },
2915
+ '.ids-divider.ids-divider-spacious': { borderRadius: 'var(--ids-comp-divider-size-border-radius-spacious)' },
2916
+ '.ids-divider.ids-divider-spacious.ids-divider-horizontal': { height: 'var(--ids-comp-divider-size-height-spacious)' },
2917
+ '.ids-divider.ids-divider-spacious.ids-divider-vertical': { width: 'var(--ids-comp-divider-size-width-spacious)' },
2918
+ '.ids-divider.ids-divider-dense': { borderRadius: 'var(--ids-comp-divider-size-border-radius-dense)' },
2919
+ '.ids-divider.ids-divider-dense.ids-divider-horizontal': { height: 'var(--ids-comp-divider-size-height-dense)' },
2920
+ '.ids-divider.ids-divider-dense.ids-divider-vertical': { width: 'var(--ids-comp-divider-size-width-dense)' },
2921
+ '.ids-divider.ids-divider-primary': { background: 'var(--ids-comp-divider-color-bg-primary-default)' },
2922
+ '.ids-divider.ids-divider-secondary': { background: 'var(--ids-comp-divider-color-bg-secondary-default)' },
2923
+ '.ids-divider.ids-divider-brand': { background: 'var(--ids-comp-divider-color-bg-brand-default)' },
2924
+ '.ids-divider.ids-divider-error': { background: 'var(--ids-comp-divider-color-bg-error-default)' },
2925
+ '.ids-divider.ids-divider-success': { background: 'var(--ids-comp-divider-color-bg-success-default)' },
2926
+ '.ids-divider.ids-divider-warning': { background: 'var(--ids-comp-divider-color-bg-warning-default)' },
2927
+ '.ids-divider.ids-divider-light': { background: 'var(--ids-comp-divider-color-bg-light-default)' },
2928
+ '.ids-divider.ids-divider-dark': { background: 'var(--ids-comp-divider-color-bg-dark-default)' },
2929
+ '.ids-divider.ids-divider-surface': { background: 'var(--ids-comp-divider-color-bg-surface-default)' },
2930
+ '.ids-message': { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', fontStyle: 'normal' },
2931
+ '.ids-message .ids-message__prefix': { display: 'flex' },
2932
+ '.ids-message .ids-message__text': { flexGrow: 1, textAlign: 'start' },
2933
+ '.ids-message.ids-message-compact': {
2934
+ gap: 'var(--ids-comp-forms-message-size-gap-compact)',
2935
+ padding: 'var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact)',
2936
+ fontFamily: 'var(--ids-comp-forms-message-typography-font-family-compact)',
2937
+ fontSize: 'var(--ids-comp-forms-message-typography-font-size-compact)',
2938
+ fontWeight: 'var(--ids-comp-forms-message-typography-font-weight-compact)',
2939
+ letterSpacing: 'var(--ids-comp-forms-message-typography-letter-spacing-compact)',
2940
+ lineHeight: 'var(--ids-comp-forms-message-typography-line-height-compact)',
2941
+ },
2942
+ '.ids-message.ids-message-compact .ids-message__prefix': {
2943
+ height: 'var(--ids-comp-forms-message-size-icon-height-compact)',
2944
+ width: 'var(--ids-comp-forms-message-size-icon-width-compact)',
2945
+ },
2946
+ '.ids-message.ids-message-compact .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
2947
+ '.ids-message.ids-message-comfortable': {
2948
+ gap: 'var(--ids-comp-forms-message-size-gap-comfortable)',
2949
+ padding: 'var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable)',
2950
+ fontFamily: 'var(--ids-comp-forms-message-typography-font-family-comfortable)',
2951
+ fontSize: 'var(--ids-comp-forms-message-typography-font-size-comfortable)',
2952
+ fontWeight: 'var(--ids-comp-forms-message-typography-font-weight-comfortable)',
2953
+ letterSpacing: 'var(--ids-comp-forms-message-typography-letter-spacing-comfortable)',
2954
+ lineHeight: 'var(--ids-comp-forms-message-typography-line-height-comfortable)',
2955
+ },
2956
+ '.ids-message.ids-message-comfortable .ids-message__prefix': {
2957
+ height: 'var(--ids-comp-forms-message-size-icon-height-comfortable)',
2958
+ width: 'var(--ids-comp-forms-message-size-icon-width-comfortable)',
2959
+ },
2960
+ '.ids-message.ids-message-comfortable .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
2961
+ '.ids-message.ids-message-spacious': {
2962
+ gap: 'var(--ids-comp-forms-message-size-gap-spacious)',
2963
+ padding: 'var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious)',
2964
+ fontFamily: 'var(--ids-comp-forms-message-typography-font-family-spacious)',
2965
+ fontSize: 'var(--ids-comp-forms-message-typography-font-size-spacious)',
2966
+ fontWeight: 'var(--ids-comp-forms-message-typography-font-weight-spacious)',
2967
+ letterSpacing: 'var(--ids-comp-forms-message-typography-letter-spacing-spacious)',
2968
+ lineHeight: 'var(--ids-comp-forms-message-typography-line-height-spacious)',
2969
+ },
2970
+ '.ids-message.ids-message-spacious .ids-message__prefix': {
2971
+ height: 'var(--ids-comp-forms-message-size-icon-height-spacious)',
2972
+ width: 'var(--ids-comp-forms-message-size-icon-width-spacious)',
2973
+ },
2974
+ '.ids-message.ids-message-spacious .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
2975
+ '.ids-message.ids-message-dense': {
2976
+ gap: 'var(--ids-comp-forms-message-size-gap-dense)',
2977
+ padding: 'var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense)',
2978
+ fontFamily: 'var(--ids-comp-forms-message-typography-font-family-dense)',
2979
+ fontSize: 'var(--ids-comp-forms-message-typography-font-size-dense)',
2980
+ fontWeight: 'var(--ids-comp-forms-message-typography-font-weight-dense)',
2981
+ letterSpacing: 'var(--ids-comp-forms-message-typography-letter-spacing-dense)',
2982
+ lineHeight: 'var(--ids-comp-forms-message-typography-line-height-dense)',
2983
+ },
2984
+ '.ids-message.ids-message-dense .ids-message__prefix': {
2985
+ height: 'var(--ids-comp-forms-message-size-icon-height-dense)',
2986
+ width: 'var(--ids-comp-forms-message-size-icon-width-dense)',
2987
+ },
2988
+ '.ids-message.ids-message-dense .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
2989
+ '.ids-message.ids-message-light .ids-message__prefix': { color: 'var(--ids-comp-forms-message-color-fg-icon-light-default)' },
2990
+ '.ids-message.ids-message-light .ids-message__text,.ids-message.ids-message-light .ids-message__suffix': {
2991
+ color: 'var(--ids-comp-forms-message-color-fg-text-light-default)',
2992
+ },
2993
+ '.ids-message.ids-message-light.ids-message-disabled .ids-message__prefix': {
2994
+ color: 'var(--ids-comp-forms-message-color-fg-icon-light-disabled)',
2995
+ },
2996
+ '.ids-message.ids-message-light.ids-message-disabled .ids-message__text,.ids-message.ids-message-light.ids-message-disabled .ids-message__suffix':
2997
+ { color: 'var(--ids-comp-forms-message-color-fg-text-light-disabled)' },
2998
+ '.ids-message.ids-message-light.ids-error-message .ids-message__prefix': {
2999
+ color: 'var(--ids-comp-forms-message-color-fg-icon-light-error-default)',
3000
+ },
3001
+ '.ids-message.ids-message-light.ids-error-message .ids-message__text,.ids-message.ids-message-light.ids-error-message .ids-message__suffix':
3002
+ { color: 'var(--ids-comp-forms-message-color-fg-text-light-error-default)' },
3003
+ '.ids-message.ids-success-message .ids-message__prefix': {
3004
+ color: 'var(--ids-comp-forms-message-color-fg-icon-surface-success-default)',
3005
+ },
3006
+ '.ids-message.ids-success-message .ids-message__text,.ids-message.ids-success-message .ids-message__suffix': {
3007
+ color: 'var(--ids-comp-forms-message-color-fg-text-surface-success-default)',
3008
+ },
3009
+ '.ids-message.ids-message-dark .ids-message__prefix': { color: 'var(--ids-comp-forms-message-color-fg-icon-dark-default)' },
3010
+ '.ids-message.ids-message-dark .ids-message__text,.ids-message.ids-message-dark .ids-message__suffix': {
3011
+ color: 'var(--ids-comp-forms-message-color-fg-text-dark-default)',
3012
+ },
3013
+ '.ids-message.ids-message-dark.ids-message-disabled .ids-message__prefix': {
3014
+ color: 'var(--ids-comp-forms-message-color-fg-icon-dark-disabled)',
3015
+ },
3016
+ '.ids-message.ids-message-dark.ids-message-disabled .ids-message__text,.ids-message.ids-message-dark.ids-message-disabled .ids-message__suffix':
3017
+ { color: 'var(--ids-comp-forms-message-color-fg-text-dark-disabled)' },
3018
+ '.ids-message.ids-message-dark.ids-error-message .ids-message__prefix': {
3019
+ color: 'var(--ids-comp-forms-message-color-fg-icon-dark-error-default)',
3020
+ },
3021
+ '.ids-message.ids-message-dark.ids-error-message .ids-message__text,.ids-message.ids-message-dark.ids-error-message .ids-message__suffix':
3022
+ { color: 'var(--ids-comp-forms-message-color-fg-text-dark-error-default)' },
3023
+ '.ids-message.ids-message-surface .ids-message__prefix': { color: 'var(--ids-comp-forms-message-color-fg-icon-surface-default)' },
3024
+ '.ids-message.ids-message-surface .ids-message__text,.ids-message.ids-message-surface .ids-message__suffix': {
3025
+ color: 'var(--ids-comp-forms-message-color-fg-text-surface-default)',
3026
+ },
3027
+ '.ids-message.ids-message-surface.ids-message-disabled .ids-message__prefix': {
3028
+ color: 'var(--ids-comp-forms-message-color-fg-icon-surface-disabled)',
3029
+ },
3030
+ '.ids-message.ids-message-surface.ids-message-disabled .ids-message__text,.ids-message.ids-message-surface.ids-message-disabled .ids-message__suffix':
3031
+ { color: 'var(--ids-comp-forms-message-color-fg-text-surface-disabled)' },
3032
+ '.ids-message.ids-message-surface.ids-error-message .ids-message__prefix': {
3033
+ color: 'var(--ids-comp-forms-message-color-fg-icon-surface-error-default)',
3034
+ },
3035
+ '.ids-message.ids-message-surface.ids-error-message .ids-message__text,.ids-message.ids-message-surface.ids-error-message .ids-message__suffix':
3036
+ { color: 'var(--ids-comp-forms-message-color-fg-text-surface-error-default)' },
3037
+ '.ids-form-field__required-marker::after': {
3038
+ content: '"*"',
3039
+ color: 'var(--ids-comp-forms-asterisk-color-fg-default)',
3040
+ marginLeft: '1px',
3041
+ marginRight: '0',
3042
+ },
3043
+ '.ids-icon-button': {
3044
+ padding: '0px',
2554
3045
  display: 'flex',
3046
+ flexShrink: 0,
2555
3047
  alignItems: 'center',
2556
3048
  justifyContent: 'center',
2557
- alignSelf: 'stretch',
2558
- width: 'var(--ids-divider-width)',
2559
- height: 'var(--ids-divider-height)',
2560
- },
2561
- '.ids-divider.ids-divider-compact': { borderRadius: 'var(--ids-comp-size-divider-size-border-radius-compact)' },
2562
- '.ids-divider.ids-divider-compact.ids-divider-horizontal': { height: 'var(--ids-comp-size-divider-size-height-compact)' },
2563
- '.ids-divider.ids-divider-compact.ids-divider-vertical': { width: 'var(--ids-comp-size-divider-size-width-compact)' },
2564
- '.ids-divider.ids-divider-comfortable': { borderRadius: 'var(--ids-comp-size-divider-size-border-radius-comfortable)' },
2565
- '.ids-divider.ids-divider-comfortable.ids-divider-horizontal': { height: 'var(--ids-comp-size-divider-size-height-comfortable)' },
2566
- '.ids-divider.ids-divider-comfortable.ids-divider-vertical': { width: 'var(--ids-comp-size-divider-size-width-comfortable)' },
2567
- '.ids-divider.ids-divider-spacious': { borderRadius: 'var(--ids-comp-size-divider-size-border-radius-spacious)' },
2568
- '.ids-divider.ids-divider-spacious.ids-divider-horizontal': { height: 'var(--ids-comp-size-divider-size-height-spacious)' },
2569
- '.ids-divider.ids-divider-spacious.ids-divider-vertical': { width: 'var(--ids-comp-size-divider-size-width-spacious)' },
2570
- '.ids-divider.ids-divider-dense': { borderRadius: 'var(--ids-comp-size-divider-size-border-radius-dense)' },
2571
- '.ids-divider.ids-divider-dense.ids-divider-horizontal': { height: 'var(--ids-comp-size-divider-size-height-dense)' },
2572
- '.ids-divider.ids-divider-dense.ids-divider-vertical': { width: 'var(--ids-comp-size-divider-size-width-dense)' },
2573
- '.ids-divider.ids-divider-primary': { background: 'var(--ids-comp-divider-color-bg-primary-enabled)' },
2574
- '.ids-divider.ids-divider-secondary': { background: 'var(--ids-comp-divider-color-bg-secondary-enabled)' },
2575
- '.ids-divider.ids-divider-brand': { background: 'var(--ids-comp-divider-color-bg-brand-enabled)' },
2576
- '.ids-divider.ids-divider-error': { background: 'var(--ids-comp-divider-color-bg-error-enabled)' },
2577
- '.ids-divider.ids-divider-success': { background: 'var(--ids-comp-divider-color-bg-success-enabled)' },
2578
- '.ids-divider.ids-divider-warning': { background: 'var(--ids-comp-divider-color-bg-warning-enabled)' },
2579
- '.ids-divider.ids-divider-light': { background: 'var(--ids-comp-divider-color-bg-light-enabled)' },
2580
- '.ids-divider.ids-divider-dark': { background: 'var(--ids-comp-divider-color-bg-dark-enabled)' },
2581
- '.ids-divider.ids-divider-surface': { background: 'var(--ids-comp-divider-color-bg-surface-enabled)' },
2582
- '.ids-icon-button': { padding: '0px', display: 'flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
3049
+ borderStyle: 'solid',
3050
+ },
2583
3051
  '.ids-icon-button:focus': {
2584
3052
  outlineOffset: '2px',
2585
3053
  outline:
@@ -2588,53 +3056,53 @@ module.exports = function ComponentsPlugin() {
2588
3056
  '.ids-icon-button:focus.ids-icon-button-light': { outlineColor: 'var(--ids-comp-icon-button-focused-outline-color-light-focused)' },
2589
3057
  '.ids-icon-button:active': { outline: 'none' },
2590
3058
  '.ids-icon-button.ids-icon-button-compact': {
2591
- padding: 'var(--ids-comp-size-icon-button-size-padding-y-compact) var(--ids-comp-size-icon-button-size-padding-x-compact)',
2592
- width: 'var(--ids-comp-size-icon-button-size-width-compact)',
2593
- height: 'var(--ids-comp-size-icon-button-size-height-compact)',
2594
- borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-compact)',
2595
- border: 'var(--ids-comp-size-icon-button-size-border-compact) solid',
3059
+ padding: 'var(--ids-comp-icon-button-size-padding-y-compact) var(--ids-comp-icon-button-size-padding-x-compact)',
3060
+ width: 'var(--ids-comp-icon-button-size-width-compact)',
3061
+ height: 'var(--ids-comp-icon-button-size-height-compact)',
3062
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-compact)',
3063
+ borderWidth: 'var(--ids-comp-icon-button-size-border-compact)',
2596
3064
  },
2597
3065
  '.ids-icon-button.ids-icon-button-compact *[icon]': {
2598
- width: 'var(--ids-comp-size-icon-button-size-icon-compact)',
2599
- height: 'var(--ids-comp-size-icon-button-size-icon-compact)',
3066
+ width: 'var(--ids-comp-icon-button-size-icon-compact)',
3067
+ height: 'var(--ids-comp-icon-button-size-icon-compact)',
2600
3068
  },
2601
3069
  '.ids-icon-button.ids-icon-button-comfortable': {
2602
- padding: 'var(--ids-comp-size-icon-button-size-padding-y-comfortable) var(--ids-comp-size-icon-button-size-padding-x-comfortable)',
2603
- width: 'var(--ids-comp-size-icon-button-size-width-comfortable)',
2604
- height: 'var(--ids-comp-size-icon-button-size-height-comfortable)',
2605
- borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-comfortable)',
2606
- border: 'var(--ids-comp-size-icon-button-size-border-comfortable) solid',
3070
+ padding: 'var(--ids-comp-icon-button-size-padding-y-comfortable) var(--ids-comp-icon-button-size-padding-x-comfortable)',
3071
+ width: 'var(--ids-comp-icon-button-size-width-comfortable)',
3072
+ height: 'var(--ids-comp-icon-button-size-height-comfortable)',
3073
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-comfortable)',
3074
+ borderWidth: 'var(--ids-comp-icon-button-size-border-comfortable)',
2607
3075
  },
2608
3076
  '.ids-icon-button.ids-icon-button-comfortable *[icon]': {
2609
- width: 'var(--ids-comp-size-icon-button-size-icon-comfortable)',
2610
- height: 'var(--ids-comp-size-icon-button-size-icon-comfortable)',
3077
+ width: 'var(--ids-comp-icon-button-size-icon-comfortable)',
3078
+ height: 'var(--ids-comp-icon-button-size-icon-comfortable)',
2611
3079
  },
2612
3080
  '.ids-icon-button.ids-icon-button-spacious': {
2613
- padding: 'var(--ids-comp-size-icon-button-size-padding-y-spacious) var(--ids-comp-size-icon-button-size-padding-x-spacious)',
2614
- width: 'var(--ids-comp-size-icon-button-size-width-spacious)',
2615
- height: 'var(--ids-comp-size-icon-button-size-height-spacious)',
2616
- borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-spacious)',
2617
- border: 'var(--ids-comp-size-icon-button-size-border-spacious) solid',
3081
+ padding: 'var(--ids-comp-icon-button-size-padding-y-spacious) var(--ids-comp-icon-button-size-padding-x-spacious)',
3082
+ width: 'var(--ids-comp-icon-button-size-width-spacious)',
3083
+ height: 'var(--ids-comp-icon-button-size-height-spacious)',
3084
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-spacious)',
3085
+ borderWidth: 'var(--ids-comp-icon-button-size-border-spacious)',
2618
3086
  },
2619
3087
  '.ids-icon-button.ids-icon-button-spacious *[icon]': {
2620
- width: 'var(--ids-comp-size-icon-button-size-icon-spacious)',
2621
- height: 'var(--ids-comp-size-icon-button-size-icon-spacious)',
3088
+ width: 'var(--ids-comp-icon-button-size-icon-spacious)',
3089
+ height: 'var(--ids-comp-icon-button-size-icon-spacious)',
2622
3090
  },
2623
3091
  '.ids-icon-button.ids-icon-button-dense': {
2624
- padding: 'var(--ids-comp-size-icon-button-size-padding-y-dense) var(--ids-comp-size-icon-button-size-padding-x-dense)',
2625
- width: 'var(--ids-comp-size-icon-button-size-width-dense)',
2626
- height: 'var(--ids-comp-size-icon-button-size-height-dense)',
2627
- borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-dense)',
2628
- border: 'var(--ids-comp-size-icon-button-size-border-dense) solid',
3092
+ padding: 'var(--ids-comp-icon-button-size-padding-y-dense) var(--ids-comp-icon-button-size-padding-x-dense)',
3093
+ width: 'var(--ids-comp-icon-button-size-width-dense)',
3094
+ height: 'var(--ids-comp-icon-button-size-height-dense)',
3095
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-dense)',
3096
+ borderWidth: 'var(--ids-comp-icon-button-size-border-dense)',
2629
3097
  },
2630
3098
  '.ids-icon-button.ids-icon-button-dense *[icon]': {
2631
- width: 'var(--ids-comp-size-icon-button-size-icon-dense)',
2632
- height: 'var(--ids-comp-size-icon-button-size-icon-dense)',
3099
+ width: 'var(--ids-comp-icon-button-size-icon-dense)',
3100
+ height: 'var(--ids-comp-icon-button-size-icon-dense)',
2633
3101
  },
2634
3102
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary': {
2635
- color: 'var(--ids-comp-icon-button-filled-color-fg-primary-enabled)',
2636
- background: 'var(--ids-comp-icon-button-filled-color-bg-primary-enabled)',
2637
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-enabled)',
3103
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-default)',
3104
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-default)',
3105
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-default)',
2638
3106
  },
2639
3107
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:hover': {
2640
3108
  background: 'var(--ids-comp-icon-button-filled-color-bg-primary-hovered)',
@@ -2656,9 +3124,9 @@ module.exports = function ComponentsPlugin() {
2656
3124
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-disabled)',
2657
3125
  },
2658
3126
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary': {
2659
- color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-enabled)',
2660
- background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-enabled)',
2661
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-enabled)',
3127
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-default)',
3128
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-default)',
3129
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-default)',
2662
3130
  },
2663
3131
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:hover': {
2664
3132
  background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-hovered)',
@@ -2680,9 +3148,9 @@ module.exports = function ComponentsPlugin() {
2680
3148
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-disabled)',
2681
3149
  },
2682
3150
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand': {
2683
- color: 'var(--ids-comp-icon-button-filled-color-fg-brand-enabled)',
2684
- background: 'var(--ids-comp-icon-button-filled-color-bg-brand-enabled)',
2685
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-enabled)',
3151
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-default)',
3152
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-default)',
3153
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-default)',
2686
3154
  },
2687
3155
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:hover': {
2688
3156
  background: 'var(--ids-comp-icon-button-filled-color-bg-brand-hovered)',
@@ -2704,9 +3172,9 @@ module.exports = function ComponentsPlugin() {
2704
3172
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-disabled)',
2705
3173
  },
2706
3174
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error': {
2707
- color: 'var(--ids-comp-icon-button-filled-color-fg-error-enabled)',
2708
- background: 'var(--ids-comp-icon-button-filled-color-bg-error-enabled)',
2709
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-enabled)',
3175
+ color: 'var(--ids-comp-icon-button-filled-color-fg-error-default)',
3176
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-default)',
3177
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-default)',
2710
3178
  },
2711
3179
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:hover': {
2712
3180
  background: 'var(--ids-comp-icon-button-filled-color-bg-error-hovered)',
@@ -2723,14 +3191,12 @@ module.exports = function ComponentsPlugin() {
2723
3191
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-pressed)',
2724
3192
  },
2725
3193
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:disabled': {
2726
- background: 'var(--ids-comp-icon-button-filled-color-bg-error-disabled)',
2727
- color: 'var(--ids-comp-icon-button-filled-color-fg-error-disabled)',
2728
3194
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-disabled)',
2729
3195
  },
2730
3196
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success': {
2731
- color: 'var(--ids-comp-icon-button-filled-color-fg-success-enabled)',
2732
- background: 'var(--ids-comp-icon-button-filled-color-bg-success-enabled)',
2733
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-enabled)',
3197
+ color: 'var(--ids-comp-icon-button-filled-color-fg-success-default)',
3198
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-default)',
3199
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-default)',
2734
3200
  },
2735
3201
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:hover': {
2736
3202
  background: 'var(--ids-comp-icon-button-filled-color-bg-success-hovered)',
@@ -2747,14 +3213,12 @@ module.exports = function ComponentsPlugin() {
2747
3213
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-pressed)',
2748
3214
  },
2749
3215
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:disabled': {
2750
- background: 'var(--ids-comp-icon-button-filled-color-bg-success-disabled)',
2751
- color: 'var(--ids-comp-icon-button-filled-color-fg-success-disabled)',
2752
3216
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-disabled)',
2753
3217
  },
2754
3218
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning': {
2755
- color: 'var(--ids-comp-icon-button-filled-color-fg-warning-enabled)',
2756
- background: 'var(--ids-comp-icon-button-filled-color-bg-warning-enabled)',
2757
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-enabled)',
3219
+ color: 'var(--ids-comp-icon-button-filled-color-fg-warning-default)',
3220
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-default)',
3221
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-default)',
2758
3222
  },
2759
3223
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:hover': {
2760
3224
  background: 'var(--ids-comp-icon-button-filled-color-bg-warning-hovered)',
@@ -2771,14 +3235,12 @@ module.exports = function ComponentsPlugin() {
2771
3235
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-pressed)',
2772
3236
  },
2773
3237
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:disabled': {
2774
- background: 'var(--ids-comp-icon-button-filled-color-bg-warning-disabled)',
2775
- color: 'var(--ids-comp-icon-button-filled-color-fg-warning-disabled)',
2776
3238
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-disabled)',
2777
3239
  },
2778
3240
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light': {
2779
- color: 'var(--ids-comp-icon-button-filled-color-fg-light-enabled)',
2780
- background: 'var(--ids-comp-icon-button-filled-color-bg-light-enabled)',
2781
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-enabled)',
3241
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-default)',
3242
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-default)',
3243
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-default)',
2782
3244
  },
2783
3245
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:hover': {
2784
3246
  background: 'var(--ids-comp-icon-button-filled-color-bg-light-hovered)',
@@ -2800,9 +3262,9 @@ module.exports = function ComponentsPlugin() {
2800
3262
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-disabled)',
2801
3263
  },
2802
3264
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark': {
2803
- color: 'var(--ids-comp-icon-button-filled-color-fg-dark-enabled)',
2804
- background: 'var(--ids-comp-icon-button-filled-color-bg-dark-enabled)',
2805
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-enabled)',
3265
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-default)',
3266
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-default)',
3267
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-default)',
2806
3268
  },
2807
3269
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:hover': {
2808
3270
  background: 'var(--ids-comp-icon-button-filled-color-bg-dark-hovered)',
@@ -2824,9 +3286,9 @@ module.exports = function ComponentsPlugin() {
2824
3286
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-disabled)',
2825
3287
  },
2826
3288
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface': {
2827
- color: 'var(--ids-comp-icon-button-filled-color-fg-surface-enabled)',
2828
- background: 'var(--ids-comp-icon-button-filled-color-bg-surface-enabled)',
2829
- borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-enabled)',
3289
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-default)',
3290
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-default)',
3291
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-default)',
2830
3292
  },
2831
3293
  '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:hover': {
2832
3294
  background: 'var(--ids-comp-icon-button-filled-color-bg-surface-hovered)',
@@ -2848,9 +3310,9 @@ module.exports = function ComponentsPlugin() {
2848
3310
  borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-disabled)',
2849
3311
  },
2850
3312
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary': {
2851
- color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-enabled)',
2852
- background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-enabled)',
2853
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-enabled)',
3313
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-default)',
3314
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-default)',
3315
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-default)',
2854
3316
  },
2855
3317
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:hover': {
2856
3318
  background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-hovered)',
@@ -2872,9 +3334,9 @@ module.exports = function ComponentsPlugin() {
2872
3334
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-disabled)',
2873
3335
  },
2874
3336
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary': {
2875
- color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-enabled)',
2876
- background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-enabled)',
2877
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-enabled)',
3337
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-default)',
3338
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-default)',
3339
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-default)',
2878
3340
  },
2879
3341
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:hover': {
2880
3342
  background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-hovered)',
@@ -2896,9 +3358,9 @@ module.exports = function ComponentsPlugin() {
2896
3358
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-disabled)',
2897
3359
  },
2898
3360
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand': {
2899
- color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-enabled)',
2900
- background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-enabled)',
2901
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-enabled)',
3361
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-default)',
3362
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-default)',
3363
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-default)',
2902
3364
  },
2903
3365
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:hover': {
2904
3366
  background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-hovered)',
@@ -2920,9 +3382,9 @@ module.exports = function ComponentsPlugin() {
2920
3382
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-disabled)',
2921
3383
  },
2922
3384
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error': {
2923
- color: 'var(--ids-comp-icon-button-outlined-color-fg-error-enabled)',
2924
- background: 'var(--ids-comp-icon-button-outlined-color-bg-error-enabled)',
2925
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-enabled)',
3385
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-error-default)',
3386
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-default)',
3387
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-default)',
2926
3388
  },
2927
3389
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:hover': {
2928
3390
  background: 'var(--ids-comp-icon-button-outlined-color-bg-error-hovered)',
@@ -2939,14 +3401,12 @@ module.exports = function ComponentsPlugin() {
2939
3401
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-pressed)',
2940
3402
  },
2941
3403
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:disabled': {
2942
- background: 'var(--ids-comp-icon-button-outlined-color-bg-error-disabled)',
2943
- color: 'var(--ids-comp-icon-button-outlined-color-fg-error-disabled)',
2944
3404
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-disabled)',
2945
3405
  },
2946
3406
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success': {
2947
- color: 'var(--ids-comp-icon-button-outlined-color-fg-success-enabled)',
2948
- background: 'var(--ids-comp-icon-button-outlined-color-bg-success-enabled)',
2949
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-enabled)',
3407
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-success-default)',
3408
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-default)',
3409
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-default)',
2950
3410
  },
2951
3411
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:hover': {
2952
3412
  background: 'var(--ids-comp-icon-button-outlined-color-bg-success-hovered)',
@@ -2963,14 +3423,12 @@ module.exports = function ComponentsPlugin() {
2963
3423
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-pressed)',
2964
3424
  },
2965
3425
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:disabled': {
2966
- background: 'var(--ids-comp-icon-button-outlined-color-bg-success-disabled)',
2967
- color: 'var(--ids-comp-icon-button-outlined-color-fg-success-disabled)',
2968
3426
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-disabled)',
2969
3427
  },
2970
3428
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning': {
2971
- color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-enabled)',
2972
- background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-enabled)',
2973
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-enabled)',
3429
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-default)',
3430
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-default)',
3431
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-default)',
2974
3432
  },
2975
3433
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:hover': {
2976
3434
  background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-hovered)',
@@ -2987,14 +3445,12 @@ module.exports = function ComponentsPlugin() {
2987
3445
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-pressed)',
2988
3446
  },
2989
3447
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:disabled': {
2990
- background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-disabled)',
2991
- color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-disabled)',
2992
3448
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-disabled)',
2993
3449
  },
2994
3450
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light': {
2995
- color: 'var(--ids-comp-icon-button-outlined-color-fg-light-enabled)',
2996
- background: 'var(--ids-comp-icon-button-outlined-color-bg-light-enabled)',
2997
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-enabled)',
3451
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-default)',
3452
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-default)',
3453
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-default)',
2998
3454
  },
2999
3455
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:hover': {
3000
3456
  background: 'var(--ids-comp-icon-button-outlined-color-bg-light-hovered)',
@@ -3016,9 +3472,9 @@ module.exports = function ComponentsPlugin() {
3016
3472
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-disabled)',
3017
3473
  },
3018
3474
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark': {
3019
- color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-enabled)',
3020
- background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-enabled)',
3021
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-enabled)',
3475
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-default)',
3476
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-default)',
3477
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-default)',
3022
3478
  },
3023
3479
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:hover': {
3024
3480
  background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-hovered)',
@@ -3040,9 +3496,9 @@ module.exports = function ComponentsPlugin() {
3040
3496
  borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-disabled)',
3041
3497
  },
3042
3498
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface': {
3043
- color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-enabled)',
3044
- background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-enabled)',
3045
- borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-enabled)',
3499
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-default)',
3500
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-default)',
3501
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-default)',
3046
3502
  },
3047
3503
  '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:hover': {
3048
3504
  background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-hovered)',
@@ -3065,8 +3521,8 @@ module.exports = function ComponentsPlugin() {
3065
3521
  },
3066
3522
  '.ids-icon-button.ids-icon-button-standard': { border: 'none' },
3067
3523
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary': {
3068
- color: 'var(--ids-comp-icon-button-standard-color-fg-primary-enabled)',
3069
- background: 'var(--ids-comp-icon-button-standard-color-bg-primary-enabled)',
3524
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-default)',
3525
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-default)',
3070
3526
  },
3071
3527
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:hover': {
3072
3528
  background: 'var(--ids-comp-icon-button-standard-color-bg-primary-hovered)',
@@ -3085,8 +3541,8 @@ module.exports = function ComponentsPlugin() {
3085
3541
  color: 'var(--ids-comp-icon-button-standard-color-fg-primary-disabled)',
3086
3542
  },
3087
3543
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary': {
3088
- color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-enabled)',
3089
- background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-enabled)',
3544
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-default)',
3545
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-default)',
3090
3546
  },
3091
3547
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:hover': {
3092
3548
  background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-hovered)',
@@ -3105,8 +3561,8 @@ module.exports = function ComponentsPlugin() {
3105
3561
  color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-disabled)',
3106
3562
  },
3107
3563
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand': {
3108
- color: 'var(--ids-comp-icon-button-standard-color-fg-brand-enabled)',
3109
- background: 'var(--ids-comp-icon-button-standard-color-bg-brand-enabled)',
3564
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-default)',
3565
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-default)',
3110
3566
  },
3111
3567
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:hover': {
3112
3568
  background: 'var(--ids-comp-icon-button-standard-color-bg-brand-hovered)',
@@ -3125,8 +3581,8 @@ module.exports = function ComponentsPlugin() {
3125
3581
  color: 'var(--ids-comp-icon-button-standard-color-fg-brand-disabled)',
3126
3582
  },
3127
3583
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error': {
3128
- color: 'var(--ids-comp-icon-button-standard-color-fg-error-enabled)',
3129
- background: 'var(--ids-comp-icon-button-standard-color-bg-error-enabled)',
3584
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-default)',
3585
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-default)',
3130
3586
  },
3131
3587
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:hover': {
3132
3588
  background: 'var(--ids-comp-icon-button-standard-color-bg-error-hovered)',
@@ -3140,13 +3596,9 @@ module.exports = function ComponentsPlugin() {
3140
3596
  background: 'var(--ids-comp-icon-button-standard-color-bg-error-pressed)',
3141
3597
  color: 'var(--ids-comp-icon-button-standard-color-fg-error-pressed)',
3142
3598
  },
3143
- '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:disabled': {
3144
- background: 'var(--ids-comp-icon-button-standard-color-bg-error-disabled)',
3145
- color: 'var(--ids-comp-icon-button-standard-color-fg-error-disabled)',
3146
- },
3147
3599
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success': {
3148
- color: 'var(--ids-comp-icon-button-standard-color-fg-success-enabled)',
3149
- background: 'var(--ids-comp-icon-button-standard-color-bg-success-enabled)',
3600
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-default)',
3601
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-default)',
3150
3602
  },
3151
3603
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:hover': {
3152
3604
  background: 'var(--ids-comp-icon-button-standard-color-bg-success-hovered)',
@@ -3160,13 +3612,9 @@ module.exports = function ComponentsPlugin() {
3160
3612
  background: 'var(--ids-comp-icon-button-standard-color-bg-success-pressed)',
3161
3613
  color: 'var(--ids-comp-icon-button-standard-color-fg-success-pressed)',
3162
3614
  },
3163
- '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:disabled': {
3164
- background: 'var(--ids-comp-icon-button-standard-color-bg-success-disabled)',
3165
- color: 'var(--ids-comp-icon-button-standard-color-fg-success-disabled)',
3166
- },
3167
3615
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning': {
3168
- color: 'var(--ids-comp-icon-button-standard-color-fg-warning-enabled)',
3169
- background: 'var(--ids-comp-icon-button-standard-color-bg-warning-enabled)',
3616
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-default)',
3617
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-default)',
3170
3618
  },
3171
3619
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:hover': {
3172
3620
  background: 'var(--ids-comp-icon-button-standard-color-bg-warning-hovered)',
@@ -3180,13 +3628,9 @@ module.exports = function ComponentsPlugin() {
3180
3628
  background: 'var(--ids-comp-icon-button-standard-color-bg-warning-pressed)',
3181
3629
  color: 'var(--ids-comp-icon-button-standard-color-fg-warning-pressed)',
3182
3630
  },
3183
- '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:disabled': {
3184
- background: 'var(--ids-comp-icon-button-standard-color-bg-warning-disabled)',
3185
- color: 'var(--ids-comp-icon-button-standard-color-fg-warning-disabled)',
3186
- },
3187
3631
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light': {
3188
- color: 'var(--ids-comp-icon-button-standard-color-fg-light-enabled)',
3189
- background: 'var(--ids-comp-icon-button-standard-color-bg-light-enabled)',
3632
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-default)',
3633
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-default)',
3190
3634
  },
3191
3635
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:hover': {
3192
3636
  background: 'var(--ids-comp-icon-button-standard-color-bg-light-hovered)',
@@ -3205,8 +3649,8 @@ module.exports = function ComponentsPlugin() {
3205
3649
  color: 'var(--ids-comp-icon-button-standard-color-fg-light-disabled)',
3206
3650
  },
3207
3651
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark': {
3208
- color: 'var(--ids-comp-icon-button-standard-color-fg-dark-enabled)',
3209
- background: 'var(--ids-comp-icon-button-standard-color-bg-dark-enabled)',
3652
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-default)',
3653
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-default)',
3210
3654
  },
3211
3655
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:hover': {
3212
3656
  background: 'var(--ids-comp-icon-button-standard-color-bg-dark-hovered)',
@@ -3225,8 +3669,8 @@ module.exports = function ComponentsPlugin() {
3225
3669
  color: 'var(--ids-comp-icon-button-standard-color-fg-dark-disabled)',
3226
3670
  },
3227
3671
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface': {
3228
- color: 'var(--ids-comp-icon-button-standard-color-fg-surface-enabled)',
3229
- background: 'var(--ids-comp-icon-button-standard-color-bg-surface-enabled)',
3672
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-default)',
3673
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-default)',
3230
3674
  },
3231
3675
  '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:hover': {
3232
3676
  background: 'var(--ids-comp-icon-button-standard-color-bg-surface-hovered)',
@@ -3244,7 +3688,15 @@ module.exports = function ComponentsPlugin() {
3244
3688
  background: 'var(--ids-comp-icon-button-standard-color-bg-surface-disabled)',
3245
3689
  color: 'var(--ids-comp-icon-button-standard-color-fg-surface-disabled)',
3246
3690
  },
3247
- '.ids-tag': { flexShrink: 0, width: 'fit-content', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' },
3691
+ '.ids-tag': {
3692
+ flexShrink: 0,
3693
+ width: 'fit-content',
3694
+ display: 'inline-flex',
3695
+ alignItems: 'center',
3696
+ justifyContent: 'center',
3697
+ borderStyle: 'solid',
3698
+ boxSizing: 'border-box',
3699
+ },
3248
3700
  '.ids-tag:focus': {
3249
3701
  outlineOffset: '2px',
3250
3702
  outline: 'var(--ids-comp-tag-focused-outline-size-outline) solid var(--ids-comp-tag-focused-outline-color-dark-focused)',
@@ -3258,81 +3710,81 @@ module.exports = function ComponentsPlugin() {
3258
3710
  justifyContent: 'center',
3259
3711
  },
3260
3712
  '.ids-tag.ids-tag-compact': {
3261
- gap: 'var(--ids-comp-size-tag-size-gap-compact)',
3262
- height: 'var(--ids-comp-size-tag-size-height-compact)',
3263
- padding: 'var(--ids-comp-size-tag-size-padding-y-compact) var(--ids-comp-size-tag-size-padding-x-compact)',
3264
- borderRadius: 'var(--ids-comp-size-tag-size-border-radius-compact)',
3265
- border: 'var(--ids-comp-size-tag-size-border-compact) solid',
3713
+ gap: 'var(--ids-comp-tag-size-gap-compact)',
3714
+ height: 'var(--ids-comp-tag-size-height-compact)',
3715
+ padding: 'var(--ids-comp-tag-size-padding-y-compact) var(--ids-comp-tag-size-padding-x-compact)',
3716
+ borderRadius: 'var(--ids-comp-tag-size-border-radius-compact)',
3717
+ border: 'var(--ids-comp-tag-size-border-width-compact)',
3266
3718
  },
3267
3719
  '.ids-tag.ids-tag-compact>.ids-tag-label': {
3268
- fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-compact)',
3269
- fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-compact)',
3270
- fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-compact)',
3271
- letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-compact)',
3272
- lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-compact)',
3720
+ fontFamily: 'var(--ids-comp-tag-label-typography-font-family-compact)',
3721
+ fontSize: 'var(--ids-comp-tag-label-typography-font-size-compact)',
3722
+ fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-compact)',
3723
+ letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-compact)',
3724
+ lineHeight: 'var(--ids-comp-tag-label-typography-line-height-compact)',
3273
3725
  },
3274
3726
  '.ids-tag.ids-tag-compact *[icon-leading],.ids-tag.ids-tag-compact *[icon-trailing]': {
3275
- width: 'var(--ids-comp-size-tag-size-icon-compact)',
3276
- height: 'var(--ids-comp-size-tag-size-icon-compact)',
3727
+ width: 'var(--ids-comp-tag-size-icon-compact)',
3728
+ height: 'var(--ids-comp-tag-size-icon-compact)',
3277
3729
  },
3278
3730
  '.ids-tag.ids-tag-comfortable': {
3279
- gap: 'var(--ids-comp-size-tag-size-gap-comfortable)',
3280
- height: 'var(--ids-comp-size-tag-size-height-comfortable)',
3281
- padding: 'var(--ids-comp-size-tag-size-padding-y-comfortable) var(--ids-comp-size-tag-size-padding-x-comfortable)',
3282
- borderRadius: 'var(--ids-comp-size-tag-size-border-radius-comfortable)',
3283
- border: 'var(--ids-comp-size-tag-size-border-comfortable) solid',
3731
+ gap: 'var(--ids-comp-tag-size-gap-comfortable)',
3732
+ height: 'var(--ids-comp-tag-size-height-comfortable)',
3733
+ padding: 'var(--ids-comp-tag-size-padding-y-comfortable) var(--ids-comp-tag-size-padding-x-comfortable)',
3734
+ borderRadius: 'var(--ids-comp-tag-size-border-radius-comfortable)',
3735
+ border: 'var(--ids-comp-tag-size-border-width-comfortable)',
3284
3736
  },
3285
3737
  '.ids-tag.ids-tag-comfortable>.ids-tag-label': {
3286
- fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-comfortable)',
3287
- fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-comfortable)',
3288
- fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-comfortable)',
3289
- letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-comfortable)',
3290
- lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-comfortable)',
3738
+ fontFamily: 'var(--ids-comp-tag-label-typography-font-family-comfortable)',
3739
+ fontSize: 'var(--ids-comp-tag-label-typography-font-size-comfortable)',
3740
+ fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-comfortable)',
3741
+ letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-comfortable)',
3742
+ lineHeight: 'var(--ids-comp-tag-label-typography-line-height-comfortable)',
3291
3743
  },
3292
3744
  '.ids-tag.ids-tag-comfortable *[icon-leading],.ids-tag.ids-tag-comfortable *[icon-trailing]': {
3293
- width: 'var(--ids-comp-size-tag-size-icon-comfortable)',
3294
- height: 'var(--ids-comp-size-tag-size-icon-comfortable)',
3745
+ width: 'var(--ids-comp-tag-size-icon-comfortable)',
3746
+ height: 'var(--ids-comp-tag-size-icon-comfortable)',
3295
3747
  },
3296
3748
  '.ids-tag.ids-tag-spacious': {
3297
- gap: 'var(--ids-comp-size-tag-size-gap-spacious)',
3298
- height: 'var(--ids-comp-size-tag-size-height-spacious)',
3299
- padding: 'var(--ids-comp-size-tag-size-padding-y-spacious) var(--ids-comp-size-tag-size-padding-x-spacious)',
3300
- borderRadius: 'var(--ids-comp-size-tag-size-border-radius-spacious)',
3301
- border: 'var(--ids-comp-size-tag-size-border-spacious) solid',
3749
+ gap: 'var(--ids-comp-tag-size-gap-spacious)',
3750
+ height: 'var(--ids-comp-tag-size-height-spacious)',
3751
+ padding: 'var(--ids-comp-tag-size-padding-y-spacious) var(--ids-comp-tag-size-padding-x-spacious)',
3752
+ borderRadius: 'var(--ids-comp-tag-size-border-radius-spacious)',
3753
+ border: 'var(--ids-comp-tag-size-border-width-spacious)',
3302
3754
  },
3303
3755
  '.ids-tag.ids-tag-spacious>.ids-tag-label': {
3304
- fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-spacious)',
3305
- fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-spacious)',
3306
- fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-spacious)',
3307
- letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-spacious)',
3308
- lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-spacious)',
3756
+ fontFamily: 'var(--ids-comp-tag-label-typography-font-family-spacious)',
3757
+ fontSize: 'var(--ids-comp-tag-label-typography-font-size-spacious)',
3758
+ fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-spacious)',
3759
+ letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-spacious)',
3760
+ lineHeight: 'var(--ids-comp-tag-label-typography-line-height-spacious)',
3309
3761
  },
3310
3762
  '.ids-tag.ids-tag-spacious *[icon-leading],.ids-tag.ids-tag-spacious *[icon-trailing]': {
3311
- width: 'var(--ids-comp-size-tag-size-icon-spacious)',
3312
- height: 'var(--ids-comp-size-tag-size-icon-spacious)',
3763
+ width: 'var(--ids-comp-tag-size-icon-spacious)',
3764
+ height: 'var(--ids-comp-tag-size-icon-spacious)',
3313
3765
  },
3314
3766
  '.ids-tag.ids-tag-dense': {
3315
- gap: 'var(--ids-comp-size-tag-size-gap-dense)',
3316
- height: 'var(--ids-comp-size-tag-size-height-dense)',
3317
- padding: 'var(--ids-comp-size-tag-size-padding-y-dense) var(--ids-comp-size-tag-size-padding-x-dense)',
3318
- borderRadius: 'var(--ids-comp-size-tag-size-border-radius-dense)',
3319
- border: 'var(--ids-comp-size-tag-size-border-dense) solid',
3767
+ gap: 'var(--ids-comp-tag-size-gap-dense)',
3768
+ height: 'var(--ids-comp-tag-size-height-dense)',
3769
+ padding: 'var(--ids-comp-tag-size-padding-y-dense) var(--ids-comp-tag-size-padding-x-dense)',
3770
+ borderRadius: 'var(--ids-comp-tag-size-border-radius-dense)',
3771
+ border: 'var(--ids-comp-tag-size-border-width-dense)',
3320
3772
  },
3321
3773
  '.ids-tag.ids-tag-dense>.ids-tag-label': {
3322
- fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-dense)',
3323
- fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-dense)',
3324
- fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-dense)',
3325
- letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-dense)',
3326
- lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-dense)',
3774
+ fontFamily: 'var(--ids-comp-tag-label-typography-font-family-dense)',
3775
+ fontSize: 'var(--ids-comp-tag-label-typography-font-size-dense)',
3776
+ fontWeight: 'var(--ids-comp-tag-label-typography-font-weight-dense)',
3777
+ letterSpacing: 'var(--ids-comp-tag-label-typography-letter-spacing-dense)',
3778
+ lineHeight: 'var(--ids-comp-tag-label-typography-line-height-dense)',
3327
3779
  },
3328
3780
  '.ids-tag.ids-tag-dense *[icon-leading],.ids-tag.ids-tag-dense *[icon-trailing]': {
3329
- width: 'var(--ids-comp-size-tag-size-icon-dense)',
3330
- height: 'var(--ids-comp-size-tag-size-icon-dense)',
3781
+ width: 'var(--ids-comp-tag-size-icon-dense)',
3782
+ height: 'var(--ids-comp-tag-size-icon-dense)',
3331
3783
  },
3332
3784
  '.ids-tag.ids-tag-filled.ids-tag-primary': {
3333
- color: 'var(--ids-comp-tag-filled-color-fg-label-primary-enabled)',
3334
- background: 'var(--ids-comp-tag-filled-color-bg-primary-enabled)',
3335
- borderColor: 'var(--ids-comp-tag-filled-color-border-primary-enabled)',
3785
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-default)',
3786
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-default)',
3787
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-default)',
3336
3788
  },
3337
3789
  '.ids-tag.ids-tag-filled.ids-tag-primary:hover': {
3338
3790
  color: 'var(--ids-comp-tag-filled-color-fg-label-primary-hovered)',
@@ -3349,15 +3801,10 @@ module.exports = function ComponentsPlugin() {
3349
3801
  background: 'var(--ids-comp-tag-filled-color-bg-primary-pressed)',
3350
3802
  borderColor: 'var(--ids-comp-tag-filled-color-border-primary-pressed)',
3351
3803
  },
3352
- '.ids-tag.ids-tag-filled.ids-tag-primary:disabled': {
3353
- color: 'var(--ids-comp-tag-filled-color-fg-label-primary-disabled)',
3354
- background: 'var(--ids-comp-tag-filled-color-bg-primary-disabled)',
3355
- borderColor: 'var(--ids-comp-tag-filled-color-border-primary-disabled)',
3356
- },
3357
3804
  '.ids-tag.ids-tag-filled.ids-tag-secondary': {
3358
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-enabled)',
3359
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-enabled)',
3360
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-enabled)',
3805
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-default)',
3806
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-default)',
3807
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-default)',
3361
3808
  },
3362
3809
  '.ids-tag.ids-tag-filled.ids-tag-secondary:hover': {
3363
3810
  color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-hovered)',
@@ -3374,15 +3821,10 @@ module.exports = function ComponentsPlugin() {
3374
3821
  background: 'var(--ids-comp-tag-filled-color-bg-secondary-pressed)',
3375
3822
  borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-pressed)',
3376
3823
  },
3377
- '.ids-tag.ids-tag-filled.ids-tag-secondary:disabled': {
3378
- color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-disabled)',
3379
- background: 'var(--ids-comp-tag-filled-color-bg-secondary-disabled)',
3380
- borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-disabled)',
3381
- },
3382
3824
  '.ids-tag.ids-tag-filled.ids-tag-brand': {
3383
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-enabled)',
3384
- background: 'var(--ids-comp-tag-filled-color-bg-brand-enabled)',
3385
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-enabled)',
3825
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-default)',
3826
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-default)',
3827
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-default)',
3386
3828
  },
3387
3829
  '.ids-tag.ids-tag-filled.ids-tag-brand:hover': {
3388
3830
  color: 'var(--ids-comp-tag-filled-color-fg-label-brand-hovered)',
@@ -3399,15 +3841,10 @@ module.exports = function ComponentsPlugin() {
3399
3841
  background: 'var(--ids-comp-tag-filled-color-bg-brand-pressed)',
3400
3842
  borderColor: 'var(--ids-comp-tag-filled-color-border-brand-pressed)',
3401
3843
  },
3402
- '.ids-tag.ids-tag-filled.ids-tag-brand:disabled': {
3403
- color: 'var(--ids-comp-tag-filled-color-fg-label-brand-disabled)',
3404
- background: 'var(--ids-comp-tag-filled-color-bg-brand-disabled)',
3405
- borderColor: 'var(--ids-comp-tag-filled-color-border-brand-disabled)',
3406
- },
3407
3844
  '.ids-tag.ids-tag-filled.ids-tag-error': {
3408
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-enabled)',
3409
- background: 'var(--ids-comp-tag-filled-color-bg-error-enabled)',
3410
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-enabled)',
3845
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-default)',
3846
+ background: 'var(--ids-comp-tag-filled-color-bg-error-default)',
3847
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-default)',
3411
3848
  },
3412
3849
  '.ids-tag.ids-tag-filled.ids-tag-error:hover': {
3413
3850
  color: 'var(--ids-comp-tag-filled-color-fg-label-error-hovered)',
@@ -3424,15 +3861,10 @@ module.exports = function ComponentsPlugin() {
3424
3861
  background: 'var(--ids-comp-tag-filled-color-bg-error-pressed)',
3425
3862
  borderColor: 'var(--ids-comp-tag-filled-color-border-error-pressed)',
3426
3863
  },
3427
- '.ids-tag.ids-tag-filled.ids-tag-error:disabled': {
3428
- color: 'var(--ids-comp-tag-filled-color-fg-label-error-disabled)',
3429
- background: 'var(--ids-comp-tag-filled-color-bg-error-disabled)',
3430
- borderColor: 'var(--ids-comp-tag-filled-color-border-error-disabled)',
3431
- },
3432
3864
  '.ids-tag.ids-tag-filled.ids-tag-success': {
3433
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-enabled)',
3434
- background: 'var(--ids-comp-tag-filled-color-bg-success-enabled)',
3435
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-enabled)',
3865
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-default)',
3866
+ background: 'var(--ids-comp-tag-filled-color-bg-success-default)',
3867
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-default)',
3436
3868
  },
3437
3869
  '.ids-tag.ids-tag-filled.ids-tag-success:hover': {
3438
3870
  color: 'var(--ids-comp-tag-filled-color-fg-label-success-hovered)',
@@ -3449,15 +3881,10 @@ module.exports = function ComponentsPlugin() {
3449
3881
  background: 'var(--ids-comp-tag-filled-color-bg-success-pressed)',
3450
3882
  borderColor: 'var(--ids-comp-tag-filled-color-border-success-pressed)',
3451
3883
  },
3452
- '.ids-tag.ids-tag-filled.ids-tag-success:disabled': {
3453
- color: 'var(--ids-comp-tag-filled-color-fg-label-success-disabled)',
3454
- background: 'var(--ids-comp-tag-filled-color-bg-success-disabled)',
3455
- borderColor: 'var(--ids-comp-tag-filled-color-border-success-disabled)',
3456
- },
3457
3884
  '.ids-tag.ids-tag-filled.ids-tag-warning': {
3458
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-enabled)',
3459
- background: 'var(--ids-comp-tag-filled-color-bg-warning-enabled)',
3460
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-enabled)',
3885
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-default)',
3886
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-default)',
3887
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-default)',
3461
3888
  },
3462
3889
  '.ids-tag.ids-tag-filled.ids-tag-warning:hover': {
3463
3890
  color: 'var(--ids-comp-tag-filled-color-fg-label-warning-hovered)',
@@ -3474,15 +3901,10 @@ module.exports = function ComponentsPlugin() {
3474
3901
  background: 'var(--ids-comp-tag-filled-color-bg-warning-pressed)',
3475
3902
  borderColor: 'var(--ids-comp-tag-filled-color-border-warning-pressed)',
3476
3903
  },
3477
- '.ids-tag.ids-tag-filled.ids-tag-warning:disabled': {
3478
- color: 'var(--ids-comp-tag-filled-color-fg-label-warning-disabled)',
3479
- background: 'var(--ids-comp-tag-filled-color-bg-warning-disabled)',
3480
- borderColor: 'var(--ids-comp-tag-filled-color-border-warning-disabled)',
3481
- },
3482
3904
  '.ids-tag.ids-tag-filled.ids-tag-light': {
3483
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-enabled)',
3484
- background: 'var(--ids-comp-tag-filled-color-bg-light-enabled)',
3485
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-enabled)',
3905
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-default)',
3906
+ background: 'var(--ids-comp-tag-filled-color-bg-light-default)',
3907
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-default)',
3486
3908
  },
3487
3909
  '.ids-tag.ids-tag-filled.ids-tag-light:hover': {
3488
3910
  color: 'var(--ids-comp-tag-filled-color-fg-label-light-hovered)',
@@ -3499,15 +3921,10 @@ module.exports = function ComponentsPlugin() {
3499
3921
  background: 'var(--ids-comp-tag-filled-color-bg-light-pressed)',
3500
3922
  borderColor: 'var(--ids-comp-tag-filled-color-border-light-pressed)',
3501
3923
  },
3502
- '.ids-tag.ids-tag-filled.ids-tag-light:disabled': {
3503
- color: 'var(--ids-comp-tag-filled-color-fg-label-light-disabled)',
3504
- background: 'var(--ids-comp-tag-filled-color-bg-light-disabled)',
3505
- borderColor: 'var(--ids-comp-tag-filled-color-border-light-disabled)',
3506
- },
3507
3924
  '.ids-tag.ids-tag-filled.ids-tag-dark': {
3508
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-enabled)',
3509
- background: 'var(--ids-comp-tag-filled-color-bg-dark-enabled)',
3510
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-enabled)',
3925
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-default)',
3926
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-default)',
3927
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-default)',
3511
3928
  },
3512
3929
  '.ids-tag.ids-tag-filled.ids-tag-dark:hover': {
3513
3930
  color: 'var(--ids-comp-tag-filled-color-fg-label-dark-hovered)',
@@ -3524,15 +3941,10 @@ module.exports = function ComponentsPlugin() {
3524
3941
  background: 'var(--ids-comp-tag-filled-color-bg-dark-pressed)',
3525
3942
  borderColor: 'var(--ids-comp-tag-filled-color-border-dark-pressed)',
3526
3943
  },
3527
- '.ids-tag.ids-tag-filled.ids-tag-dark:disabled': {
3528
- color: 'var(--ids-comp-tag-filled-color-fg-label-dark-disabled)',
3529
- background: 'var(--ids-comp-tag-filled-color-bg-dark-disabled)',
3530
- borderColor: 'var(--ids-comp-tag-filled-color-border-dark-disabled)',
3531
- },
3532
3944
  '.ids-tag.ids-tag-filled.ids-tag-surface': {
3533
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-enabled)',
3534
- background: 'var(--ids-comp-tag-filled-color-bg-surface-enabled)',
3535
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-enabled)',
3945
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-default)',
3946
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-default)',
3947
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-default)',
3536
3948
  },
3537
3949
  '.ids-tag.ids-tag-filled.ids-tag-surface:hover': {
3538
3950
  color: 'var(--ids-comp-tag-filled-color-fg-label-surface-hovered)',
@@ -3549,15 +3961,10 @@ module.exports = function ComponentsPlugin() {
3549
3961
  background: 'var(--ids-comp-tag-filled-color-bg-surface-pressed)',
3550
3962
  borderColor: 'var(--ids-comp-tag-filled-color-border-surface-pressed)',
3551
3963
  },
3552
- '.ids-tag.ids-tag-filled.ids-tag-surface:disabled': {
3553
- color: 'var(--ids-comp-tag-filled-color-fg-label-surface-disabled)',
3554
- background: 'var(--ids-comp-tag-filled-color-bg-surface-disabled)',
3555
- borderColor: 'var(--ids-comp-tag-filled-color-border-surface-disabled)',
3556
- },
3557
3964
  '.ids-tag.ids-tag-outlined.ids-tag-primary': {
3558
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-enabled)',
3559
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-enabled)',
3560
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-enabled)',
3965
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-default)',
3966
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-default)',
3967
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-default)',
3561
3968
  },
3562
3969
  '.ids-tag.ids-tag-outlined.ids-tag-primary:hover': {
3563
3970
  color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-hovered)',
@@ -3574,15 +3981,10 @@ module.exports = function ComponentsPlugin() {
3574
3981
  background: 'var(--ids-comp-tag-outlined-color-bg-primary-pressed)',
3575
3982
  borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-pressed)',
3576
3983
  },
3577
- '.ids-tag.ids-tag-outlined.ids-tag-primary:disabled': {
3578
- color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-disabled)',
3579
- background: 'var(--ids-comp-tag-outlined-color-bg-primary-disabled)',
3580
- borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-disabled)',
3581
- },
3582
3984
  '.ids-tag.ids-tag-outlined.ids-tag-secondary': {
3583
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-enabled)',
3584
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-enabled)',
3585
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-enabled)',
3985
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-default)',
3986
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-default)',
3987
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-default)',
3586
3988
  },
3587
3989
  '.ids-tag.ids-tag-outlined.ids-tag-secondary:hover': {
3588
3990
  color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered)',
@@ -3599,15 +4001,10 @@ module.exports = function ComponentsPlugin() {
3599
4001
  background: 'var(--ids-comp-tag-outlined-color-bg-secondary-pressed)',
3600
4002
  borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-pressed)',
3601
4003
  },
3602
- '.ids-tag.ids-tag-outlined.ids-tag-secondary:disabled': {
3603
- color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-disabled)',
3604
- background: 'var(--ids-comp-tag-outlined-color-bg-secondary-disabled)',
3605
- borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-disabled)',
3606
- },
3607
4004
  '.ids-tag.ids-tag-outlined.ids-tag-brand': {
3608
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-enabled)',
3609
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-enabled)',
3610
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-enabled)',
4005
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-default)',
4006
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-default)',
4007
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-default)',
3611
4008
  },
3612
4009
  '.ids-tag.ids-tag-outlined.ids-tag-brand:hover': {
3613
4010
  color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-hovered)',
@@ -3624,15 +4021,10 @@ module.exports = function ComponentsPlugin() {
3624
4021
  background: 'var(--ids-comp-tag-outlined-color-bg-brand-pressed)',
3625
4022
  borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-pressed)',
3626
4023
  },
3627
- '.ids-tag.ids-tag-outlined.ids-tag-brand:disabled': {
3628
- color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-disabled)',
3629
- background: 'var(--ids-comp-tag-outlined-color-bg-brand-disabled)',
3630
- borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-disabled)',
3631
- },
3632
4024
  '.ids-tag.ids-tag-outlined.ids-tag-error': {
3633
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-enabled)',
3634
- background: 'var(--ids-comp-tag-outlined-color-bg-error-enabled)',
3635
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-enabled)',
4025
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-default)',
4026
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-default)',
4027
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-default)',
3636
4028
  },
3637
4029
  '.ids-tag.ids-tag-outlined.ids-tag-error:hover': {
3638
4030
  color: 'var(--ids-comp-tag-outlined-color-fg-label-error-hovered)',
@@ -3649,15 +4041,10 @@ module.exports = function ComponentsPlugin() {
3649
4041
  background: 'var(--ids-comp-tag-outlined-color-bg-error-pressed)',
3650
4042
  borderColor: 'var(--ids-comp-tag-outlined-color-border-error-pressed)',
3651
4043
  },
3652
- '.ids-tag.ids-tag-outlined.ids-tag-error:disabled': {
3653
- color: 'var(--ids-comp-tag-outlined-color-fg-label-error-disabled)',
3654
- background: 'var(--ids-comp-tag-outlined-color-bg-error-disabled)',
3655
- borderColor: 'var(--ids-comp-tag-outlined-color-border-error-disabled)',
3656
- },
3657
4044
  '.ids-tag.ids-tag-outlined.ids-tag-success': {
3658
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-enabled)',
3659
- background: 'var(--ids-comp-tag-outlined-color-bg-success-enabled)',
3660
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-enabled)',
4045
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-default)',
4046
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-default)',
4047
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-default)',
3661
4048
  },
3662
4049
  '.ids-tag.ids-tag-outlined.ids-tag-success:hover': {
3663
4050
  color: 'var(--ids-comp-tag-outlined-color-fg-label-success-hovered)',
@@ -3674,15 +4061,10 @@ module.exports = function ComponentsPlugin() {
3674
4061
  background: 'var(--ids-comp-tag-outlined-color-bg-success-pressed)',
3675
4062
  borderColor: 'var(--ids-comp-tag-outlined-color-border-success-pressed)',
3676
4063
  },
3677
- '.ids-tag.ids-tag-outlined.ids-tag-success:disabled': {
3678
- color: 'var(--ids-comp-tag-outlined-color-fg-label-success-disabled)',
3679
- background: 'var(--ids-comp-tag-outlined-color-bg-success-disabled)',
3680
- borderColor: 'var(--ids-comp-tag-outlined-color-border-success-disabled)',
3681
- },
3682
4064
  '.ids-tag.ids-tag-outlined.ids-tag-warning': {
3683
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-enabled)',
3684
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-enabled)',
3685
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-enabled)',
4065
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-default)',
4066
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-default)',
4067
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-default)',
3686
4068
  },
3687
4069
  '.ids-tag.ids-tag-outlined.ids-tag-warning:hover': {
3688
4070
  color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-hovered)',
@@ -3699,15 +4081,10 @@ module.exports = function ComponentsPlugin() {
3699
4081
  background: 'var(--ids-comp-tag-outlined-color-bg-warning-pressed)',
3700
4082
  borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-pressed)',
3701
4083
  },
3702
- '.ids-tag.ids-tag-outlined.ids-tag-warning:disabled': {
3703
- color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-disabled)',
3704
- background: 'var(--ids-comp-tag-outlined-color-bg-warning-disabled)',
3705
- borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-disabled)',
3706
- },
3707
4084
  '.ids-tag.ids-tag-outlined.ids-tag-light': {
3708
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-enabled)',
3709
- background: 'var(--ids-comp-tag-outlined-color-bg-light-enabled)',
3710
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-enabled)',
4085
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-default)',
4086
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-default)',
4087
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-default)',
3711
4088
  },
3712
4089
  '.ids-tag.ids-tag-outlined.ids-tag-light:hover': {
3713
4090
  color: 'var(--ids-comp-tag-outlined-color-fg-label-light-hovered)',
@@ -3724,15 +4101,10 @@ module.exports = function ComponentsPlugin() {
3724
4101
  background: 'var(--ids-comp-tag-outlined-color-bg-light-pressed)',
3725
4102
  borderColor: 'var(--ids-comp-tag-outlined-color-border-light-pressed)',
3726
4103
  },
3727
- '.ids-tag.ids-tag-outlined.ids-tag-light:disabled': {
3728
- color: 'var(--ids-comp-tag-outlined-color-fg-label-light-disabled)',
3729
- background: 'var(--ids-comp-tag-outlined-color-bg-light-disabled)',
3730
- borderColor: 'var(--ids-comp-tag-outlined-color-border-light-disabled)',
3731
- },
3732
4104
  '.ids-tag.ids-tag-outlined.ids-tag-dark': {
3733
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-enabled)',
3734
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-enabled)',
3735
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-enabled)',
4105
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-default)',
4106
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-default)',
4107
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-default)',
3736
4108
  },
3737
4109
  '.ids-tag.ids-tag-outlined.ids-tag-dark:hover': {
3738
4110
  color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-hovered)',
@@ -3749,15 +4121,10 @@ module.exports = function ComponentsPlugin() {
3749
4121
  background: 'var(--ids-comp-tag-outlined-color-bg-dark-pressed)',
3750
4122
  borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-pressed)',
3751
4123
  },
3752
- '.ids-tag.ids-tag-outlined.ids-tag-dark:disabled': {
3753
- color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-disabled)',
3754
- background: 'var(--ids-comp-tag-outlined-color-bg-dark-disabled)',
3755
- borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-disabled)',
3756
- },
3757
4124
  '.ids-tag.ids-tag-outlined.ids-tag-surface': {
3758
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-enabled)',
3759
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-enabled)',
3760
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-enabled)',
4125
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-default)',
4126
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-default)',
4127
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-default)',
3761
4128
  },
3762
4129
  '.ids-tag.ids-tag-outlined.ids-tag-surface:hover': {
3763
4130
  color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-hovered)',
@@ -3774,236 +4141,6 @@ module.exports = function ComponentsPlugin() {
3774
4141
  background: 'var(--ids-comp-tag-outlined-color-bg-surface-pressed)',
3775
4142
  borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-pressed)',
3776
4143
  },
3777
- '.ids-tag.ids-tag-outlined.ids-tag-surface:disabled': {
3778
- color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-disabled)',
3779
- background: 'var(--ids-comp-tag-outlined-color-bg-surface-disabled)',
3780
- borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-disabled)',
3781
- },
3782
- '.ids-tag.ids-tag-text.ids-tag-primary': {
3783
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-enabled)',
3784
- background: 'var(--ids-comp-tag-text-color-bg-primary-enabled)',
3785
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-enabled)',
3786
- },
3787
- '.ids-tag.ids-tag-text.ids-tag-primary:hover': {
3788
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-hovered)',
3789
- background: 'var(--ids-comp-tag-text-color-bg-primary-hovered)',
3790
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-hovered)',
3791
- },
3792
- '.ids-tag.ids-tag-text.ids-tag-primary:focus': {
3793
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-focused)',
3794
- background: 'var(--ids-comp-tag-text-color-bg-primary-focused)',
3795
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-focused)',
3796
- },
3797
- '.ids-tag.ids-tag-text.ids-tag-primary:active': {
3798
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-pressed)',
3799
- background: 'var(--ids-comp-tag-text-color-bg-primary-pressed)',
3800
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-pressed)',
3801
- },
3802
- '.ids-tag.ids-tag-text.ids-tag-primary:disabled': {
3803
- color: 'var(--ids-comp-tag-text-color-fg-label-primary-disabled)',
3804
- background: 'var(--ids-comp-tag-text-color-bg-primary-disabled)',
3805
- borderColor: 'var(--ids-comp-tag-text-color-border-primary-disabled)',
3806
- },
3807
- '.ids-tag.ids-tag-text.ids-tag-secondary': {
3808
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-enabled)',
3809
- background: 'var(--ids-comp-tag-text-color-bg-secondary-enabled)',
3810
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-enabled)',
3811
- },
3812
- '.ids-tag.ids-tag-text.ids-tag-secondary:hover': {
3813
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-hovered)',
3814
- background: 'var(--ids-comp-tag-text-color-bg-secondary-hovered)',
3815
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-hovered)',
3816
- },
3817
- '.ids-tag.ids-tag-text.ids-tag-secondary:focus': {
3818
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-focused)',
3819
- background: 'var(--ids-comp-tag-text-color-bg-secondary-focused)',
3820
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-focused)',
3821
- },
3822
- '.ids-tag.ids-tag-text.ids-tag-secondary:active': {
3823
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-pressed)',
3824
- background: 'var(--ids-comp-tag-text-color-bg-secondary-pressed)',
3825
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-pressed)',
3826
- },
3827
- '.ids-tag.ids-tag-text.ids-tag-secondary:disabled': {
3828
- color: 'var(--ids-comp-tag-text-color-fg-label-secondary-disabled)',
3829
- background: 'var(--ids-comp-tag-text-color-bg-secondary-disabled)',
3830
- borderColor: 'var(--ids-comp-tag-text-color-border-secondary-disabled)',
3831
- },
3832
- '.ids-tag.ids-tag-text.ids-tag-brand': {
3833
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-enabled)',
3834
- background: 'var(--ids-comp-tag-text-color-bg-brand-enabled)',
3835
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-enabled)',
3836
- },
3837
- '.ids-tag.ids-tag-text.ids-tag-brand:hover': {
3838
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-hovered)',
3839
- background: 'var(--ids-comp-tag-text-color-bg-brand-hovered)',
3840
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-hovered)',
3841
- },
3842
- '.ids-tag.ids-tag-text.ids-tag-brand:focus': {
3843
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-focused)',
3844
- background: 'var(--ids-comp-tag-text-color-bg-brand-focused)',
3845
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-focused)',
3846
- },
3847
- '.ids-tag.ids-tag-text.ids-tag-brand:active': {
3848
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-pressed)',
3849
- background: 'var(--ids-comp-tag-text-color-bg-brand-pressed)',
3850
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-pressed)',
3851
- },
3852
- '.ids-tag.ids-tag-text.ids-tag-brand:disabled': {
3853
- color: 'var(--ids-comp-tag-text-color-fg-label-brand-disabled)',
3854
- background: 'var(--ids-comp-tag-text-color-bg-brand-disabled)',
3855
- borderColor: 'var(--ids-comp-tag-text-color-border-brand-disabled)',
3856
- },
3857
- '.ids-tag.ids-tag-text.ids-tag-error': {
3858
- color: 'var(--ids-comp-tag-text-color-fg-label-error-enabled)',
3859
- background: 'var(--ids-comp-tag-text-color-bg-error-enabled)',
3860
- borderColor: 'var(--ids-comp-tag-text-color-border-error-enabled)',
3861
- },
3862
- '.ids-tag.ids-tag-text.ids-tag-error:hover': {
3863
- color: 'var(--ids-comp-tag-text-color-fg-label-error-hovered)',
3864
- background: 'var(--ids-comp-tag-text-color-bg-error-hovered)',
3865
- borderColor: 'var(--ids-comp-tag-text-color-border-error-hovered)',
3866
- },
3867
- '.ids-tag.ids-tag-text.ids-tag-error:focus': {
3868
- color: 'var(--ids-comp-tag-text-color-fg-label-error-focused)',
3869
- background: 'var(--ids-comp-tag-text-color-bg-error-focused)',
3870
- borderColor: 'var(--ids-comp-tag-text-color-border-error-focused)',
3871
- },
3872
- '.ids-tag.ids-tag-text.ids-tag-error:active': {
3873
- color: 'var(--ids-comp-tag-text-color-fg-label-error-pressed)',
3874
- background: 'var(--ids-comp-tag-text-color-bg-error-pressed)',
3875
- borderColor: 'var(--ids-comp-tag-text-color-border-error-pressed)',
3876
- },
3877
- '.ids-tag.ids-tag-text.ids-tag-error:disabled': {
3878
- color: 'var(--ids-comp-tag-text-color-fg-label-error-disabled)',
3879
- background: 'var(--ids-comp-tag-text-color-bg-error-disabled)',
3880
- borderColor: 'var(--ids-comp-tag-text-color-border-error-disabled)',
3881
- },
3882
- '.ids-tag.ids-tag-text.ids-tag-success': {
3883
- color: 'var(--ids-comp-tag-text-color-fg-label-success-enabled)',
3884
- background: 'var(--ids-comp-tag-text-color-bg-success-enabled)',
3885
- borderColor: 'var(--ids-comp-tag-text-color-border-success-enabled)',
3886
- },
3887
- '.ids-tag.ids-tag-text.ids-tag-success:hover': {
3888
- color: 'var(--ids-comp-tag-text-color-fg-label-success-hovered)',
3889
- background: 'var(--ids-comp-tag-text-color-bg-success-hovered)',
3890
- borderColor: 'var(--ids-comp-tag-text-color-border-success-hovered)',
3891
- },
3892
- '.ids-tag.ids-tag-text.ids-tag-success:focus': {
3893
- color: 'var(--ids-comp-tag-text-color-fg-label-success-focused)',
3894
- background: 'var(--ids-comp-tag-text-color-bg-success-focused)',
3895
- borderColor: 'var(--ids-comp-tag-text-color-border-success-focused)',
3896
- },
3897
- '.ids-tag.ids-tag-text.ids-tag-success:active': {
3898
- color: 'var(--ids-comp-tag-text-color-fg-label-success-pressed)',
3899
- background: 'var(--ids-comp-tag-text-color-bg-success-pressed)',
3900
- borderColor: 'var(--ids-comp-tag-text-color-border-success-pressed)',
3901
- },
3902
- '.ids-tag.ids-tag-text.ids-tag-success:disabled': {
3903
- color: 'var(--ids-comp-tag-text-color-fg-label-success-disabled)',
3904
- background: 'var(--ids-comp-tag-text-color-bg-success-disabled)',
3905
- borderColor: 'var(--ids-comp-tag-text-color-border-success-disabled)',
3906
- },
3907
- '.ids-tag.ids-tag-text.ids-tag-warning': {
3908
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-enabled)',
3909
- background: 'var(--ids-comp-tag-text-color-bg-warning-enabled)',
3910
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-enabled)',
3911
- },
3912
- '.ids-tag.ids-tag-text.ids-tag-warning:hover': {
3913
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-hovered)',
3914
- background: 'var(--ids-comp-tag-text-color-bg-warning-hovered)',
3915
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-hovered)',
3916
- },
3917
- '.ids-tag.ids-tag-text.ids-tag-warning:focus': {
3918
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-focused)',
3919
- background: 'var(--ids-comp-tag-text-color-bg-warning-focused)',
3920
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-focused)',
3921
- },
3922
- '.ids-tag.ids-tag-text.ids-tag-warning:active': {
3923
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-pressed)',
3924
- background: 'var(--ids-comp-tag-text-color-bg-warning-pressed)',
3925
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-pressed)',
3926
- },
3927
- '.ids-tag.ids-tag-text.ids-tag-warning:disabled': {
3928
- color: 'var(--ids-comp-tag-text-color-fg-label-warning-disabled)',
3929
- background: 'var(--ids-comp-tag-text-color-bg-warning-disabled)',
3930
- borderColor: 'var(--ids-comp-tag-text-color-border-warning-disabled)',
3931
- },
3932
- '.ids-tag.ids-tag-text.ids-tag-light': {
3933
- color: 'var(--ids-comp-tag-text-color-fg-label-light-enabled)',
3934
- background: 'var(--ids-comp-tag-text-color-bg-light-enabled)',
3935
- borderColor: 'var(--ids-comp-tag-text-color-border-light-enabled)',
3936
- },
3937
- '.ids-tag.ids-tag-text.ids-tag-light:hover': {
3938
- color: 'var(--ids-comp-tag-text-color-fg-label-light-hovered)',
3939
- background: 'var(--ids-comp-tag-text-color-bg-light-hovered)',
3940
- borderColor: 'var(--ids-comp-tag-text-color-border-light-hovered)',
3941
- },
3942
- '.ids-tag.ids-tag-text.ids-tag-light:focus': {
3943
- color: 'var(--ids-comp-tag-text-color-fg-label-light-focused)',
3944
- background: 'var(--ids-comp-tag-text-color-bg-light-focused)',
3945
- borderColor: 'var(--ids-comp-tag-text-color-border-light-focused)',
3946
- },
3947
- '.ids-tag.ids-tag-text.ids-tag-light:active': {
3948
- color: 'var(--ids-comp-tag-text-color-fg-label-light-pressed)',
3949
- background: 'var(--ids-comp-tag-text-color-bg-light-pressed)',
3950
- borderColor: 'var(--ids-comp-tag-text-color-border-light-pressed)',
3951
- },
3952
- '.ids-tag.ids-tag-text.ids-tag-light:disabled': {
3953
- color: 'var(--ids-comp-tag-text-color-fg-label-light-disabled)',
3954
- background: 'var(--ids-comp-tag-text-color-bg-light-disabled)',
3955
- borderColor: 'var(--ids-comp-tag-text-color-border-light-disabled)',
3956
- },
3957
- '.ids-tag.ids-tag-text.ids-tag-dark': {
3958
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-enabled)',
3959
- background: 'var(--ids-comp-tag-text-color-bg-dark-enabled)',
3960
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-enabled)',
3961
- },
3962
- '.ids-tag.ids-tag-text.ids-tag-dark:hover': {
3963
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-hovered)',
3964
- background: 'var(--ids-comp-tag-text-color-bg-dark-hovered)',
3965
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-hovered)',
3966
- },
3967
- '.ids-tag.ids-tag-text.ids-tag-dark:focus': {
3968
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-focused)',
3969
- background: 'var(--ids-comp-tag-text-color-bg-dark-focused)',
3970
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-focused)',
3971
- },
3972
- '.ids-tag.ids-tag-text.ids-tag-dark:active': {
3973
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-pressed)',
3974
- background: 'var(--ids-comp-tag-text-color-bg-dark-pressed)',
3975
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-pressed)',
3976
- },
3977
- '.ids-tag.ids-tag-text.ids-tag-dark:disabled': {
3978
- color: 'var(--ids-comp-tag-text-color-fg-label-dark-disabled)',
3979
- background: 'var(--ids-comp-tag-text-color-bg-dark-disabled)',
3980
- borderColor: 'var(--ids-comp-tag-text-color-border-dark-disabled)',
3981
- },
3982
- '.ids-tag.ids-tag-text.ids-tag-surface': {
3983
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-enabled)',
3984
- background: 'var(--ids-comp-tag-text-color-bg-surface-enabled)',
3985
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-enabled)',
3986
- },
3987
- '.ids-tag.ids-tag-text.ids-tag-surface:hover': {
3988
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-hovered)',
3989
- background: 'var(--ids-comp-tag-text-color-bg-surface-hovered)',
3990
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-hovered)',
3991
- },
3992
- '.ids-tag.ids-tag-text.ids-tag-surface:focus': {
3993
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-focused)',
3994
- background: 'var(--ids-comp-tag-text-color-bg-surface-focused)',
3995
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-focused)',
3996
- },
3997
- '.ids-tag.ids-tag-text.ids-tag-surface:active': {
3998
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-pressed)',
3999
- background: 'var(--ids-comp-tag-text-color-bg-surface-pressed)',
4000
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-pressed)',
4001
- },
4002
- '.ids-tag.ids-tag-text.ids-tag-surface:disabled': {
4003
- color: 'var(--ids-comp-tag-text-color-fg-label-surface-disabled)',
4004
- background: 'var(--ids-comp-tag-text-color-bg-surface-disabled)',
4005
- borderColor: 'var(--ids-comp-tag-text-color-border-surface-disabled)',
4006
- },
4007
4144
  };
4008
4145
 
4009
4146
  addComponents(cssObj);