@i-cell/ids-styles 0.0.1 → 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 +78 -62
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +189 -0
  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 +174 -0
  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 +90 -0
  10. package/dist/avatar/avatar.css +92 -173
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +198 -0
  13. package/dist/button/button.css +241 -278
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +762 -0
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +798 -0
  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 +1895 -1574
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +4148 -0
  25. package/dist/dialog/dialog.css +163 -110
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +225 -0
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +31 -0
  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 +173 -196
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +657 -0
  40. package/dist/tag/tag.css +166 -465
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +462 -0
  43. package/package.json +16 -4
package/dist/icon-button/icon-button.plugin.js ADDED
@@ -0,0 +1,657 @@
1
+ // Tailwind CSS plugin for the icon-button component in the i-Cell Design System
2
+ module.exports = function IconButtonPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-icon-button': {
6
+ padding: '0px',
7
+ display: 'flex',
8
+ flexShrink: 0,
9
+ alignItems: 'center',
10
+ justifyContent: 'center',
11
+ borderStyle: 'solid',
12
+ },
13
+ '.ids-icon-button:focus': {
14
+ outlineOffset: '2px',
15
+ outline:
16
+ 'var(--ids-comp-icon-button-focused-outline-size-outline) solid var(--ids-comp-icon-button-focused-outline-color-dark-focused)',
17
+ },
18
+ '.ids-icon-button:focus.ids-icon-button-light': { outlineColor: 'var(--ids-comp-icon-button-focused-outline-color-light-focused)' },
19
+ '.ids-icon-button:active': { outline: 'none' },
20
+ '.ids-icon-button.ids-icon-button-compact': {
21
+ padding: 'var(--ids-comp-icon-button-size-padding-y-compact) var(--ids-comp-icon-button-size-padding-x-compact)',
22
+ width: 'var(--ids-comp-icon-button-size-width-compact)',
23
+ height: 'var(--ids-comp-icon-button-size-height-compact)',
24
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-compact)',
25
+ borderWidth: 'var(--ids-comp-icon-button-size-border-compact)',
26
+ },
27
+ '.ids-icon-button.ids-icon-button-compact *[icon]': {
28
+ width: 'var(--ids-comp-icon-button-size-icon-compact)',
29
+ height: 'var(--ids-comp-icon-button-size-icon-compact)',
30
+ },
31
+ '.ids-icon-button.ids-icon-button-comfortable': {
32
+ padding: 'var(--ids-comp-icon-button-size-padding-y-comfortable) var(--ids-comp-icon-button-size-padding-x-comfortable)',
33
+ width: 'var(--ids-comp-icon-button-size-width-comfortable)',
34
+ height: 'var(--ids-comp-icon-button-size-height-comfortable)',
35
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-comfortable)',
36
+ borderWidth: 'var(--ids-comp-icon-button-size-border-comfortable)',
37
+ },
38
+ '.ids-icon-button.ids-icon-button-comfortable *[icon]': {
39
+ width: 'var(--ids-comp-icon-button-size-icon-comfortable)',
40
+ height: 'var(--ids-comp-icon-button-size-icon-comfortable)',
41
+ },
42
+ '.ids-icon-button.ids-icon-button-spacious': {
43
+ padding: 'var(--ids-comp-icon-button-size-padding-y-spacious) var(--ids-comp-icon-button-size-padding-x-spacious)',
44
+ width: 'var(--ids-comp-icon-button-size-width-spacious)',
45
+ height: 'var(--ids-comp-icon-button-size-height-spacious)',
46
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-spacious)',
47
+ borderWidth: 'var(--ids-comp-icon-button-size-border-spacious)',
48
+ },
49
+ '.ids-icon-button.ids-icon-button-spacious *[icon]': {
50
+ width: 'var(--ids-comp-icon-button-size-icon-spacious)',
51
+ height: 'var(--ids-comp-icon-button-size-icon-spacious)',
52
+ },
53
+ '.ids-icon-button.ids-icon-button-dense': {
54
+ padding: 'var(--ids-comp-icon-button-size-padding-y-dense) var(--ids-comp-icon-button-size-padding-x-dense)',
55
+ width: 'var(--ids-comp-icon-button-size-width-dense)',
56
+ height: 'var(--ids-comp-icon-button-size-height-dense)',
57
+ borderRadius: 'var(--ids-comp-icon-button-size-border-radius-dense)',
58
+ borderWidth: 'var(--ids-comp-icon-button-size-border-dense)',
59
+ },
60
+ '.ids-icon-button.ids-icon-button-dense *[icon]': {
61
+ width: 'var(--ids-comp-icon-button-size-icon-dense)',
62
+ height: 'var(--ids-comp-icon-button-size-icon-dense)',
63
+ },
64
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary': {
65
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-default)',
66
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-default)',
67
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-default)',
68
+ },
69
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:hover': {
70
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-hovered)',
71
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-hovered)',
72
+ },
73
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:focus': {
74
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-focused)',
75
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-focused)',
76
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-focused)',
77
+ },
78
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:active': {
79
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-pressed)',
80
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-pressed)',
81
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-pressed)',
82
+ },
83
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:disabled': {
84
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-disabled)',
85
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-disabled)',
86
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-disabled)',
87
+ },
88
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary': {
89
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-default)',
90
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-default)',
91
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-default)',
92
+ },
93
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:hover': {
94
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-hovered)',
95
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-hovered)',
96
+ },
97
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:focus': {
98
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-focused)',
99
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-focused)',
100
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-focused)',
101
+ },
102
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:active': {
103
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-pressed)',
104
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-pressed)',
105
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-pressed)',
106
+ },
107
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:disabled': {
108
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-disabled)',
109
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-disabled)',
110
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-disabled)',
111
+ },
112
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand': {
113
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-default)',
114
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-default)',
115
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-default)',
116
+ },
117
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:hover': {
118
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-hovered)',
119
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-hovered)',
120
+ },
121
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:focus': {
122
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-focused)',
123
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-focused)',
124
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-focused)',
125
+ },
126
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:active': {
127
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-pressed)',
128
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-pressed)',
129
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-pressed)',
130
+ },
131
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:disabled': {
132
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-disabled)',
133
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-disabled)',
134
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-disabled)',
135
+ },
136
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error': {
137
+ color: 'var(--ids-comp-icon-button-filled-color-fg-error-default)',
138
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-default)',
139
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-default)',
140
+ },
141
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:hover': {
142
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-hovered)',
143
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-hovered)',
144
+ },
145
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:focus': {
146
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-focused)',
147
+ color: 'var(--ids-comp-icon-button-filled-color-fg-error-focused)',
148
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-focused)',
149
+ },
150
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:active': {
151
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-pressed)',
152
+ color: 'var(--ids-comp-icon-button-filled-color-fg-error-pressed)',
153
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-pressed)',
154
+ },
155
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:disabled': {
156
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-disabled)',
157
+ },
158
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success': {
159
+ color: 'var(--ids-comp-icon-button-filled-color-fg-success-default)',
160
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-default)',
161
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-default)',
162
+ },
163
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:hover': {
164
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-hovered)',
165
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-hovered)',
166
+ },
167
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:focus': {
168
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-focused)',
169
+ color: 'var(--ids-comp-icon-button-filled-color-fg-success-focused)',
170
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-focused)',
171
+ },
172
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:active': {
173
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-pressed)',
174
+ color: 'var(--ids-comp-icon-button-filled-color-fg-success-pressed)',
175
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-pressed)',
176
+ },
177
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:disabled': {
178
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-disabled)',
179
+ },
180
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning': {
181
+ color: 'var(--ids-comp-icon-button-filled-color-fg-warning-default)',
182
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-default)',
183
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-default)',
184
+ },
185
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:hover': {
186
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-hovered)',
187
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-hovered)',
188
+ },
189
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:focus': {
190
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-focused)',
191
+ color: 'var(--ids-comp-icon-button-filled-color-fg-warning-focused)',
192
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-focused)',
193
+ },
194
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:active': {
195
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-pressed)',
196
+ color: 'var(--ids-comp-icon-button-filled-color-fg-warning-pressed)',
197
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-pressed)',
198
+ },
199
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:disabled': {
200
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-disabled)',
201
+ },
202
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light': {
203
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-default)',
204
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-default)',
205
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-default)',
206
+ },
207
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:hover': {
208
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-hovered)',
209
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-hovered)',
210
+ },
211
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:focus': {
212
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-focused)',
213
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-focused)',
214
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-focused)',
215
+ },
216
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:active': {
217
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-pressed)',
218
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-pressed)',
219
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-pressed)',
220
+ },
221
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:disabled': {
222
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-disabled)',
223
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-disabled)',
224
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-disabled)',
225
+ },
226
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark': {
227
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-default)',
228
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-default)',
229
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-default)',
230
+ },
231
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:hover': {
232
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-hovered)',
233
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-hovered)',
234
+ },
235
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:focus': {
236
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-focused)',
237
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-focused)',
238
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-focused)',
239
+ },
240
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:active': {
241
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-pressed)',
242
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-pressed)',
243
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-pressed)',
244
+ },
245
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:disabled': {
246
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-disabled)',
247
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-disabled)',
248
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-disabled)',
249
+ },
250
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface': {
251
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-default)',
252
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-default)',
253
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-default)',
254
+ },
255
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:hover': {
256
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-hovered)',
257
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-hovered)',
258
+ },
259
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:focus': {
260
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-focused)',
261
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-focused)',
262
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-focused)',
263
+ },
264
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:active': {
265
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-pressed)',
266
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-pressed)',
267
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-pressed)',
268
+ },
269
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:disabled': {
270
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-disabled)',
271
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-disabled)',
272
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-disabled)',
273
+ },
274
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary': {
275
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-default)',
276
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-default)',
277
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-default)',
278
+ },
279
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:hover': {
280
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-hovered)',
281
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-hovered)',
282
+ },
283
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:focus': {
284
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-focused)',
285
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-focused)',
286
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-focused)',
287
+ },
288
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:active': {
289
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-pressed)',
290
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-pressed)',
291
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-pressed)',
292
+ },
293
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:disabled': {
294
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-disabled)',
295
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-disabled)',
296
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-disabled)',
297
+ },
298
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary': {
299
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-default)',
300
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-default)',
301
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-default)',
302
+ },
303
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:hover': {
304
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-hovered)',
305
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-hovered)',
306
+ },
307
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:focus': {
308
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-focused)',
309
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-focused)',
310
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-focused)',
311
+ },
312
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:active': {
313
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-pressed)',
314
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-pressed)',
315
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-pressed)',
316
+ },
317
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:disabled': {
318
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-disabled)',
319
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-disabled)',
320
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-disabled)',
321
+ },
322
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand': {
323
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-default)',
324
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-default)',
325
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-default)',
326
+ },
327
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:hover': {
328
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-hovered)',
329
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-hovered)',
330
+ },
331
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:focus': {
332
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-focused)',
333
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-focused)',
334
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-focused)',
335
+ },
336
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:active': {
337
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-pressed)',
338
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-pressed)',
339
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-pressed)',
340
+ },
341
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:disabled': {
342
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-disabled)',
343
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-disabled)',
344
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-disabled)',
345
+ },
346
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error': {
347
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-error-default)',
348
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-default)',
349
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-default)',
350
+ },
351
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:hover': {
352
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-hovered)',
353
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-hovered)',
354
+ },
355
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:focus': {
356
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-focused)',
357
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-error-focused)',
358
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-focused)',
359
+ },
360
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:active': {
361
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-pressed)',
362
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-error-pressed)',
363
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-pressed)',
364
+ },
365
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:disabled': {
366
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-disabled)',
367
+ },
368
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success': {
369
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-success-default)',
370
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-default)',
371
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-default)',
372
+ },
373
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:hover': {
374
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-hovered)',
375
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-hovered)',
376
+ },
377
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:focus': {
378
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-focused)',
379
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-success-focused)',
380
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-focused)',
381
+ },
382
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:active': {
383
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-pressed)',
384
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-success-pressed)',
385
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-pressed)',
386
+ },
387
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:disabled': {
388
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-disabled)',
389
+ },
390
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning': {
391
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-default)',
392
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-default)',
393
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-default)',
394
+ },
395
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:hover': {
396
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-hovered)',
397
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-hovered)',
398
+ },
399
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:focus': {
400
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-focused)',
401
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-focused)',
402
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-focused)',
403
+ },
404
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:active': {
405
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-pressed)',
406
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-pressed)',
407
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-pressed)',
408
+ },
409
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:disabled': {
410
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-disabled)',
411
+ },
412
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light': {
413
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-default)',
414
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-default)',
415
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-default)',
416
+ },
417
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:hover': {
418
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-hovered)',
419
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-hovered)',
420
+ },
421
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:focus': {
422
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-focused)',
423
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-focused)',
424
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-focused)',
425
+ },
426
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:active': {
427
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-pressed)',
428
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-pressed)',
429
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-pressed)',
430
+ },
431
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:disabled': {
432
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-disabled)',
433
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-disabled)',
434
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-disabled)',
435
+ },
436
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark': {
437
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-default)',
438
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-default)',
439
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-default)',
440
+ },
441
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:hover': {
442
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-hovered)',
443
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-hovered)',
444
+ },
445
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:focus': {
446
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-focused)',
447
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-focused)',
448
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-focused)',
449
+ },
450
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:active': {
451
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-pressed)',
452
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-pressed)',
453
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-pressed)',
454
+ },
455
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:disabled': {
456
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-disabled)',
457
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-disabled)',
458
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-disabled)',
459
+ },
460
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface': {
461
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-default)',
462
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-default)',
463
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-default)',
464
+ },
465
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:hover': {
466
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-hovered)',
467
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-hovered)',
468
+ },
469
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:focus': {
470
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-focused)',
471
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-focused)',
472
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-focused)',
473
+ },
474
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:active': {
475
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-pressed)',
476
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-pressed)',
477
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-pressed)',
478
+ },
479
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:disabled': {
480
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-disabled)',
481
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-disabled)',
482
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-disabled)',
483
+ },
484
+ '.ids-icon-button.ids-icon-button-standard': { border: 'none' },
485
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary': {
486
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-default)',
487
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-default)',
488
+ },
489
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:hover': {
490
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-hovered)',
491
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-hovered)',
492
+ },
493
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:focus': {
494
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-focused)',
495
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-focused)',
496
+ },
497
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:active': {
498
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-pressed)',
499
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-pressed)',
500
+ },
501
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:disabled': {
502
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-disabled)',
503
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-disabled)',
504
+ },
505
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary': {
506
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-default)',
507
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-default)',
508
+ },
509
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:hover': {
510
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-hovered)',
511
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-hovered)',
512
+ },
513
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:focus': {
514
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-focused)',
515
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-focused)',
516
+ },
517
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:active': {
518
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-pressed)',
519
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-pressed)',
520
+ },
521
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:disabled': {
522
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-disabled)',
523
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-disabled)',
524
+ },
525
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand': {
526
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-default)',
527
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-default)',
528
+ },
529
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:hover': {
530
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-hovered)',
531
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-hovered)',
532
+ },
533
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:focus': {
534
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-focused)',
535
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-focused)',
536
+ },
537
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:active': {
538
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-pressed)',
539
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-pressed)',
540
+ },
541
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:disabled': {
542
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-disabled)',
543
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-disabled)',
544
+ },
545
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error': {
546
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-default)',
547
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-default)',
548
+ },
549
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:hover': {
550
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-hovered)',
551
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-hovered)',
552
+ },
553
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:focus': {
554
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-focused)',
555
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-focused)',
556
+ },
557
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:active': {
558
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-pressed)',
559
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-pressed)',
560
+ },
561
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success': {
562
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-default)',
563
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-default)',
564
+ },
565
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:hover': {
566
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-hovered)',
567
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-hovered)',
568
+ },
569
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:focus': {
570
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-focused)',
571
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-focused)',
572
+ },
573
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:active': {
574
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-pressed)',
575
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-pressed)',
576
+ },
577
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning': {
578
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-default)',
579
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-default)',
580
+ },
581
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:hover': {
582
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-hovered)',
583
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-hovered)',
584
+ },
585
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:focus': {
586
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-focused)',
587
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-focused)',
588
+ },
589
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:active': {
590
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-pressed)',
591
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-pressed)',
592
+ },
593
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light': {
594
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-default)',
595
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-default)',
596
+ },
597
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:hover': {
598
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-hovered)',
599
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-hovered)',
600
+ },
601
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:focus': {
602
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-focused)',
603
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-focused)',
604
+ },
605
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:active': {
606
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-pressed)',
607
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-pressed)',
608
+ },
609
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:disabled': {
610
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-disabled)',
611
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-disabled)',
612
+ },
613
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark': {
614
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-default)',
615
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-default)',
616
+ },
617
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:hover': {
618
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-hovered)',
619
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-hovered)',
620
+ },
621
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:focus': {
622
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-focused)',
623
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-focused)',
624
+ },
625
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:active': {
626
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-pressed)',
627
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-pressed)',
628
+ },
629
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:disabled': {
630
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-disabled)',
631
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-disabled)',
632
+ },
633
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface': {
634
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-default)',
635
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-default)',
636
+ },
637
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:hover': {
638
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-hovered)',
639
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-hovered)',
640
+ },
641
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:focus': {
642
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-focused)',
643
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-focused)',
644
+ },
645
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:active': {
646
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-pressed)',
647
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-pressed)',
648
+ },
649
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:disabled': {
650
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-disabled)',
651
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-disabled)',
652
+ },
653
+ };
654
+
655
+ addComponents(cssObj);
656
+ };
657
+ };