@i-cell/ids-styles 0.0.15-beta.1 → 0.0.15-beta.11

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 (31) hide show
  1. package/dist/button/button.css +396 -11
  2. package/dist/button/button.min.css +1 -1
  3. package/dist/button/button.plugin.js +351 -10
  4. package/dist/components.css +966 -402
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +925 -388
  7. package/dist/divider/divider.css +8 -0
  8. package/dist/divider/divider.min.css +1 -1
  9. package/dist/divider/divider.plugin.js +32 -8
  10. package/dist/form-elements/fieldset/fieldset.css +138 -0
  11. package/dist/form-elements/fieldset/fieldset.min.css +1 -0
  12. package/dist/form-elements/fieldset/fieldset.plugin.js +134 -0
  13. package/dist/form-elements/form-field/form-field.css +127 -193
  14. package/dist/form-elements/form-field/form-field.min.css +1 -1
  15. package/dist/form-elements/form-field/form-field.plugin.js +166 -191
  16. package/dist/icon/icon.css +94 -0
  17. package/dist/icon/icon.min.css +1 -0
  18. package/dist/icon/icon.plugin.js +80 -0
  19. package/dist/menu-item/menu-item.css +185 -0
  20. package/dist/menu-item/menu-item.min.css +1 -0
  21. package/dist/menu-item/menu-item.plugin.js +176 -0
  22. package/dist/select/select.css +3 -0
  23. package/dist/select/select.min.css +1 -1
  24. package/dist/select/select.plugin.js +1 -0
  25. package/dist/switch/switch.css +12 -12
  26. package/dist/switch/switch.min.css +1 -1
  27. package/dist/switch/switch.plugin.js +12 -12
  28. package/package.json +1 -1
  29. package/dist/action-item/action-item.css +0 -185
  30. package/dist/action-item/action-item.min.css +0 -1
  31. package/dist/action-item/action-item.plugin.js +0 -176
package/dist/button/button.css CHANGED
@@ -22,12 +22,11 @@
22
22
  .ids-button:disabled {
23
23
  cursor: not-allowed;
24
24
  }
25
- .ids-button *[icon-leading],
26
- .ids-button *[icon-trailing] {
27
- gap: 10px;
25
+ .ids-button .ids-icon {
28
26
  display: flex;
29
27
  align-items: center;
30
28
  justify-content: center;
29
+ flex-shrink: 0;
31
30
  }
32
31
  .ids-button.ids-button-compact {
33
32
  gap: var(--ids-comp-buttons-size-gap-compact);
@@ -44,8 +43,10 @@
44
43
  letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-compact);
45
44
  line-height: var(--ids-comp-buttons-label-typography-line-height-compact);
46
45
  }
47
- .ids-button.ids-button-compact *[icon-leading],
48
- .ids-button.ids-button-compact *[icon-trailing] {
46
+ .ids-button.ids-button-compact > .ids-icon {
47
+ font-size: var(--ids-comp-buttons-icon-typography-font-size-compact);
48
+ font-weight: var(--ids-comp-buttons-icon-typography-font-weight-compact);
49
+ line-height: var(--ids-comp-buttons-icon-typography-line-height-compact);
49
50
  width: var(--ids-comp-buttons-size-icon-compact);
50
51
  height: var(--ids-comp-buttons-size-icon-compact);
51
52
  }
@@ -64,8 +65,10 @@
64
65
  letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-comfortable);
65
66
  line-height: var(--ids-comp-buttons-label-typography-line-height-comfortable);
66
67
  }
67
- .ids-button.ids-button-comfortable *[icon-leading],
68
- .ids-button.ids-button-comfortable *[icon-trailing] {
68
+ .ids-button.ids-button-comfortable > .ids-icon {
69
+ font-size: var(--ids-comp-buttons-icon-typography-font-size-comfortable);
70
+ font-weight: var(--ids-comp-buttons-icon-typography-font-weight-comfortable);
71
+ line-height: var(--ids-comp-buttons-icon-typography-line-height-comfortable);
69
72
  width: var(--ids-comp-buttons-size-icon-comfortable);
70
73
  height: var(--ids-comp-buttons-size-icon-comfortable);
71
74
  }
@@ -84,8 +87,10 @@
84
87
  letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-spacious);
85
88
  line-height: var(--ids-comp-buttons-label-typography-line-height-spacious);
86
89
  }
87
- .ids-button.ids-button-spacious *[icon-leading],
88
- .ids-button.ids-button-spacious *[icon-trailing] {
90
+ .ids-button.ids-button-spacious > .ids-icon {
91
+ font-size: var(--ids-comp-buttons-icon-typography-font-size-spacious);
92
+ font-weight: var(--ids-comp-buttons-icon-typography-font-weight-spacious);
93
+ line-height: var(--ids-comp-buttons-icon-typography-line-height-spacious);
89
94
  width: var(--ids-comp-buttons-size-icon-spacious);
90
95
  height: var(--ids-comp-buttons-size-icon-spacious);
91
96
  }
@@ -104,8 +109,10 @@
104
109
  letter-spacing: var(--ids-comp-buttons-label-typography-letter-spacing-dense);
105
110
  line-height: var(--ids-comp-buttons-label-typography-line-height-dense);
106
111
  }
107
- .ids-button.ids-button-dense *[icon-leading],
108
- .ids-button.ids-button-dense *[icon-trailing] {
112
+ .ids-button.ids-button-dense > .ids-icon {
113
+ font-size: var(--ids-comp-buttons-icon-typography-font-size-dense);
114
+ font-weight: var(--ids-comp-buttons-icon-typography-font-weight-dense);
115
+ line-height: var(--ids-comp-buttons-icon-typography-line-height-dense);
109
116
  width: var(--ids-comp-buttons-size-icon-dense);
110
117
  height: var(--ids-comp-buttons-size-icon-dense);
111
118
  }
@@ -114,655 +121,1033 @@
114
121
  background: var(--ids-comp-buttons-filled-color-bg-primary-default);
115
122
  border-color: var(--ids-comp-buttons-filled-color-border-primary-default);
116
123
  }
124
+ .ids-button.ids-button-filled.ids-button-primary > .ids-icon {
125
+ color: var(--ids-comp-buttons-filled-color-fg-icon-primary-default);
126
+ }
117
127
  .ids-button.ids-button-filled.ids-button-primary:hover {
118
128
  background: var(--ids-comp-buttons-filled-color-bg-primary-hovered);
119
129
  color: var(--ids-comp-buttons-filled-color-fg-label-primary-hovered);
120
130
  border-color: var(--ids-comp-buttons-filled-color-border-primary-hovered);
121
131
  }
132
+ .ids-button.ids-button-filled.ids-button-primary:hover > .ids-icon {
133
+ color: var(--ids-comp-buttons-filled-color-fg-icon-primary-hovered);
134
+ }
122
135
  .ids-button.ids-button-filled.ids-button-primary:focus {
123
136
  outline-offset: 2px;
124
137
  background: var(--ids-comp-buttons-filled-color-bg-primary-focused);
125
138
  color: var(--ids-comp-buttons-filled-color-fg-label-primary-focused);
126
139
  border-color: var(--ids-comp-buttons-filled-color-border-primary-focused);
127
140
  }
141
+ .ids-button.ids-button-filled.ids-button-primary:focus > .ids-icon {
142
+ color: var(--ids-comp-buttons-filled-color-fg-icon-primary-focused);
143
+ }
128
144
  .ids-button.ids-button-filled.ids-button-primary:active {
129
145
  background: var(--ids-comp-buttons-filled-color-bg-primary-pressed);
130
146
  color: var(--ids-comp-buttons-filled-color-fg-label-primary-pressed);
131
147
  border-color: var(--ids-comp-buttons-filled-color-border-primary-pressed);
132
148
  }
149
+ .ids-button.ids-button-filled.ids-button-primary:active > .ids-icon {
150
+ color: var(--ids-comp-buttons-filled-color-fg-icon-primary-pressed);
151
+ }
133
152
  .ids-button.ids-button-filled.ids-button-primary:disabled {
134
153
  background: var(--ids-comp-buttons-filled-color-bg-primary-disabled);
135
154
  color: var(--ids-comp-buttons-filled-color-fg-label-primary-disabled);
136
155
  border-color: var(--ids-comp-buttons-filled-color-border-primary-disabled);
137
156
  }
157
+ .ids-button.ids-button-filled.ids-button-primary:disabled > .ids-icon {
158
+ color: var(--ids-comp-buttons-filled-color-fg-icon-primary-disabled);
159
+ }
138
160
  .ids-button.ids-button-filled.ids-button-secondary {
139
161
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-default);
140
162
  background: var(--ids-comp-buttons-filled-color-bg-secondary-default);
141
163
  border-color: var(--ids-comp-buttons-filled-color-border-secondary-default);
142
164
  }
165
+ .ids-button.ids-button-filled.ids-button-secondary > .ids-icon {
166
+ color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-default);
167
+ }
143
168
  .ids-button.ids-button-filled.ids-button-secondary:hover {
144
169
  background: var(--ids-comp-buttons-filled-color-bg-secondary-hovered);
145
170
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-hovered);
146
171
  border-color: var(--ids-comp-buttons-filled-color-border-secondary-hovered);
147
172
  }
173
+ .ids-button.ids-button-filled.ids-button-secondary:hover > .ids-icon {
174
+ color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-hovered);
175
+ }
148
176
  .ids-button.ids-button-filled.ids-button-secondary:focus {
149
177
  outline-offset: 2px;
150
178
  background: var(--ids-comp-buttons-filled-color-bg-secondary-focused);
151
179
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-focused);
152
180
  border-color: var(--ids-comp-buttons-filled-color-border-secondary-focused);
153
181
  }
182
+ .ids-button.ids-button-filled.ids-button-secondary:focus > .ids-icon {
183
+ color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-focused);
184
+ }
154
185
  .ids-button.ids-button-filled.ids-button-secondary:active {
155
186
  background: var(--ids-comp-buttons-filled-color-bg-secondary-pressed);
156
187
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-pressed);
157
188
  border-color: var(--ids-comp-buttons-filled-color-border-secondary-pressed);
158
189
  }
190
+ .ids-button.ids-button-filled.ids-button-secondary:active > .ids-icon {
191
+ color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-pressed);
192
+ }
159
193
  .ids-button.ids-button-filled.ids-button-secondary:disabled {
160
194
  background: var(--ids-comp-buttons-filled-color-bg-secondary-disabled);
161
195
  color: var(--ids-comp-buttons-filled-color-fg-label-secondary-disabled);
162
196
  border-color: var(--ids-comp-buttons-filled-color-border-secondary-disabled);
163
197
  }
198
+ .ids-button.ids-button-filled.ids-button-secondary:disabled > .ids-icon {
199
+ color: var(--ids-comp-buttons-filled-color-fg-icon-secondary-disabled);
200
+ }
164
201
  .ids-button.ids-button-filled.ids-button-brand {
165
202
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-default);
166
203
  background: var(--ids-comp-buttons-filled-color-bg-brand-default);
167
204
  border-color: var(--ids-comp-buttons-filled-color-border-brand-default);
168
205
  }
206
+ .ids-button.ids-button-filled.ids-button-brand > .ids-icon {
207
+ color: var(--ids-comp-buttons-filled-color-fg-icon-brand-default);
208
+ }
169
209
  .ids-button.ids-button-filled.ids-button-brand:hover {
170
210
  background: var(--ids-comp-buttons-filled-color-bg-brand-hovered);
171
211
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-hovered);
172
212
  border-color: var(--ids-comp-buttons-filled-color-border-brand-hovered);
173
213
  }
214
+ .ids-button.ids-button-filled.ids-button-brand:hover > .ids-icon {
215
+ color: var(--ids-comp-buttons-filled-color-fg-icon-brand-hovered);
216
+ }
174
217
  .ids-button.ids-button-filled.ids-button-brand:focus {
175
218
  outline-offset: 2px;
176
219
  background: var(--ids-comp-buttons-filled-color-bg-brand-focused);
177
220
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-focused);
178
221
  border-color: var(--ids-comp-buttons-filled-color-border-brand-focused);
179
222
  }
223
+ .ids-button.ids-button-filled.ids-button-brand:focus > .ids-icon {
224
+ color: var(--ids-comp-buttons-filled-color-fg-icon-brand-focused);
225
+ }
180
226
  .ids-button.ids-button-filled.ids-button-brand:active {
181
227
  background: var(--ids-comp-buttons-filled-color-bg-brand-pressed);
182
228
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-pressed);
183
229
  border-color: var(--ids-comp-buttons-filled-color-border-brand-pressed);
184
230
  }
231
+ .ids-button.ids-button-filled.ids-button-brand:active > .ids-icon {
232
+ color: var(--ids-comp-buttons-filled-color-fg-icon-brand-pressed);
233
+ }
185
234
  .ids-button.ids-button-filled.ids-button-brand:disabled {
186
235
  background: var(--ids-comp-buttons-filled-color-bg-brand-disabled);
187
236
  color: var(--ids-comp-buttons-filled-color-fg-label-brand-disabled);
188
237
  border-color: var(--ids-comp-buttons-filled-color-border-brand-disabled);
189
238
  }
239
+ .ids-button.ids-button-filled.ids-button-brand:disabled > .ids-icon {
240
+ color: var(--ids-comp-buttons-filled-color-fg-icon-brand-disabled);
241
+ }
190
242
  .ids-button.ids-button-filled.ids-button-error {
191
243
  color: var(--ids-comp-buttons-filled-color-fg-label-error-default);
192
244
  background: var(--ids-comp-buttons-filled-color-bg-error-default);
193
245
  border-color: var(--ids-comp-buttons-filled-color-border-error-default);
194
246
  }
247
+ .ids-button.ids-button-filled.ids-button-error > .ids-icon {
248
+ color: var(--ids-comp-buttons-filled-color-fg-icon-error-default);
249
+ }
195
250
  .ids-button.ids-button-filled.ids-button-error:hover {
196
251
  background: var(--ids-comp-buttons-filled-color-bg-error-hovered);
197
252
  color: var(--ids-comp-buttons-filled-color-fg-label-error-hovered);
198
253
  border-color: var(--ids-comp-buttons-filled-color-border-error-hovered);
199
254
  }
255
+ .ids-button.ids-button-filled.ids-button-error:hover > .ids-icon {
256
+ color: var(--ids-comp-buttons-filled-color-fg-icon-error-hovered);
257
+ }
200
258
  .ids-button.ids-button-filled.ids-button-error:focus {
201
259
  outline-offset: 2px;
202
260
  background: var(--ids-comp-buttons-filled-color-bg-error-focused);
203
261
  color: var(--ids-comp-buttons-filled-color-fg-label-error-focused);
204
262
  border-color: var(--ids-comp-buttons-filled-color-border-error-focused);
205
263
  }
264
+ .ids-button.ids-button-filled.ids-button-error:focus > .ids-icon {
265
+ color: var(--ids-comp-buttons-filled-color-fg-icon-error-focused);
266
+ }
206
267
  .ids-button.ids-button-filled.ids-button-error:active {
207
268
  background: var(--ids-comp-buttons-filled-color-bg-error-pressed);
208
269
  color: var(--ids-comp-buttons-filled-color-fg-label-error-pressed);
209
270
  border-color: var(--ids-comp-buttons-filled-color-border-error-pressed);
210
271
  }
272
+ .ids-button.ids-button-filled.ids-button-error:active > .ids-icon {
273
+ color: var(--ids-comp-buttons-filled-color-fg-icon-error-pressed);
274
+ }
211
275
  .ids-button.ids-button-filled.ids-button-success {
212
276
  color: var(--ids-comp-buttons-filled-color-fg-label-success-default);
213
277
  background: var(--ids-comp-buttons-filled-color-bg-success-default);
214
278
  border-color: var(--ids-comp-buttons-filled-color-border-success-default);
215
279
  }
280
+ .ids-button.ids-button-filled.ids-button-success > .ids-icon {
281
+ color: var(--ids-comp-buttons-filled-color-fg-icon-success-default);
282
+ }
216
283
  .ids-button.ids-button-filled.ids-button-success:hover {
217
284
  background: var(--ids-comp-buttons-filled-color-bg-success-hovered);
218
285
  color: var(--ids-comp-buttons-filled-color-fg-label-success-hovered);
219
286
  border-color: var(--ids-comp-buttons-filled-color-border-success-hovered);
220
287
  }
288
+ .ids-button.ids-button-filled.ids-button-success:hover > .ids-icon {
289
+ color: var(--ids-comp-buttons-filled-color-fg-icon-success-hovered);
290
+ }
221
291
  .ids-button.ids-button-filled.ids-button-success:focus {
222
292
  outline-offset: 2px;
223
293
  background: var(--ids-comp-buttons-filled-color-bg-success-focused);
224
294
  color: var(--ids-comp-buttons-filled-color-fg-label-success-focused);
225
295
  border-color: var(--ids-comp-buttons-filled-color-border-success-focused);
226
296
  }
297
+ .ids-button.ids-button-filled.ids-button-success:focus > .ids-icon {
298
+ color: var(--ids-comp-buttons-filled-color-fg-icon-success-focused);
299
+ }
227
300
  .ids-button.ids-button-filled.ids-button-success:active {
228
301
  background: var(--ids-comp-buttons-filled-color-bg-success-pressed);
229
302
  color: var(--ids-comp-buttons-filled-color-fg-label-success-pressed);
230
303
  border-color: var(--ids-comp-buttons-filled-color-border-success-pressed);
231
304
  }
305
+ .ids-button.ids-button-filled.ids-button-success:active > .ids-icon {
306
+ color: var(--ids-comp-buttons-filled-color-fg-icon-success-pressed);
307
+ }
232
308
  .ids-button.ids-button-filled.ids-button-warning {
233
309
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-default);
234
310
  background: var(--ids-comp-buttons-filled-color-bg-warning-default);
235
311
  border-color: var(--ids-comp-buttons-filled-color-border-warning-default);
236
312
  }
313
+ .ids-button.ids-button-filled.ids-button-warning > .ids-icon {
314
+ color: var(--ids-comp-buttons-filled-color-fg-icon-warning-default);
315
+ }
237
316
  .ids-button.ids-button-filled.ids-button-warning:hover {
238
317
  background: var(--ids-comp-buttons-filled-color-bg-warning-hovered);
239
318
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-hovered);
240
319
  border-color: var(--ids-comp-buttons-filled-color-border-warning-hovered);
241
320
  }
321
+ .ids-button.ids-button-filled.ids-button-warning:hover > .ids-icon {
322
+ color: var(--ids-comp-buttons-filled-color-fg-icon-warning-hovered);
323
+ }
242
324
  .ids-button.ids-button-filled.ids-button-warning:focus {
243
325
  outline-offset: 2px;
244
326
  background: var(--ids-comp-buttons-filled-color-bg-warning-focused);
245
327
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-focused);
246
328
  border-color: var(--ids-comp-buttons-filled-color-border-warning-focused);
247
329
  }
330
+ .ids-button.ids-button-filled.ids-button-warning:focus > .ids-icon {
331
+ color: var(--ids-comp-buttons-filled-color-fg-icon-warning-focused);
332
+ }
248
333
  .ids-button.ids-button-filled.ids-button-warning:active {
249
334
  background: var(--ids-comp-buttons-filled-color-bg-warning-pressed);
250
335
  color: var(--ids-comp-buttons-filled-color-fg-label-warning-pressed);
251
336
  border-color: var(--ids-comp-buttons-filled-color-border-warning-pressed);
252
337
  }
338
+ .ids-button.ids-button-filled.ids-button-warning:active > .ids-icon {
339
+ color: var(--ids-comp-buttons-filled-color-fg-icon-warning-pressed);
340
+ }
253
341
  .ids-button.ids-button-filled.ids-button-light {
254
342
  color: var(--ids-comp-buttons-filled-color-fg-label-light-default);
255
343
  background: var(--ids-comp-buttons-filled-color-bg-light-default);
256
344
  border-color: var(--ids-comp-buttons-filled-color-border-light-default);
257
345
  }
346
+ .ids-button.ids-button-filled.ids-button-light > .ids-icon {
347
+ color: var(--ids-comp-buttons-filled-color-fg-icon-light-default);
348
+ }
258
349
  .ids-button.ids-button-filled.ids-button-light:hover {
259
350
  background: var(--ids-comp-buttons-filled-color-bg-light-hovered);
260
351
  color: var(--ids-comp-buttons-filled-color-fg-label-light-hovered);
261
352
  border-color: var(--ids-comp-buttons-filled-color-border-light-hovered);
262
353
  }
354
+ .ids-button.ids-button-filled.ids-button-light:hover > .ids-icon {
355
+ color: var(--ids-comp-buttons-filled-color-fg-icon-light-hovered);
356
+ }
263
357
  .ids-button.ids-button-filled.ids-button-light:focus {
264
358
  outline-offset: 2px;
265
359
  background: var(--ids-comp-buttons-filled-color-bg-light-focused);
266
360
  color: var(--ids-comp-buttons-filled-color-fg-label-light-focused);
267
361
  border-color: var(--ids-comp-buttons-filled-color-border-light-focused);
268
362
  }
363
+ .ids-button.ids-button-filled.ids-button-light:focus > .ids-icon {
364
+ color: var(--ids-comp-buttons-filled-color-fg-icon-light-focused);
365
+ }
269
366
  .ids-button.ids-button-filled.ids-button-light:active {
270
367
  background: var(--ids-comp-buttons-filled-color-bg-light-pressed);
271
368
  color: var(--ids-comp-buttons-filled-color-fg-label-light-pressed);
272
369
  border-color: var(--ids-comp-buttons-filled-color-border-light-pressed);
273
370
  }
371
+ .ids-button.ids-button-filled.ids-button-light:active > .ids-icon {
372
+ color: var(--ids-comp-buttons-filled-color-fg-icon-light-pressed);
373
+ }
274
374
  .ids-button.ids-button-filled.ids-button-light:disabled {
275
375
  background: var(--ids-comp-buttons-filled-color-bg-light-disabled);
276
376
  color: var(--ids-comp-buttons-filled-color-fg-label-light-disabled);
277
377
  border-color: var(--ids-comp-buttons-filled-color-border-light-disabled);
278
378
  }
379
+ .ids-button.ids-button-filled.ids-button-light:disabled > .ids-icon {
380
+ color: var(--ids-comp-buttons-filled-color-fg-icon-light-disabled);
381
+ }
279
382
  .ids-button.ids-button-filled.ids-button-dark {
280
383
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-default);
281
384
  background: var(--ids-comp-buttons-filled-color-bg-dark-default);
282
385
  border-color: var(--ids-comp-buttons-filled-color-border-dark-default);
283
386
  }
387
+ .ids-button.ids-button-filled.ids-button-dark > .ids-icon {
388
+ color: var(--ids-comp-buttons-filled-color-fg-icon-dark-default);
389
+ }
284
390
  .ids-button.ids-button-filled.ids-button-dark:hover {
285
391
  background: var(--ids-comp-buttons-filled-color-bg-dark-hovered);
286
392
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-hovered);
287
393
  border-color: var(--ids-comp-buttons-filled-color-border-dark-hovered);
288
394
  }
395
+ .ids-button.ids-button-filled.ids-button-dark:hover > .ids-icon {
396
+ color: var(--ids-comp-buttons-filled-color-fg-icon-dark-hovered);
397
+ }
289
398
  .ids-button.ids-button-filled.ids-button-dark:focus {
290
399
  outline-offset: 2px;
291
400
  background: var(--ids-comp-buttons-filled-color-bg-dark-focused);
292
401
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-focused);
293
402
  border-color: var(--ids-comp-buttons-filled-color-border-dark-focused);
294
403
  }
404
+ .ids-button.ids-button-filled.ids-button-dark:focus > .ids-icon {
405
+ color: var(--ids-comp-buttons-filled-color-fg-icon-dark-focused);
406
+ }
295
407
  .ids-button.ids-button-filled.ids-button-dark:active {
296
408
  background: var(--ids-comp-buttons-filled-color-bg-dark-pressed);
297
409
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-pressed);
298
410
  border-color: var(--ids-comp-buttons-filled-color-border-dark-pressed);
299
411
  }
412
+ .ids-button.ids-button-filled.ids-button-dark:active > .ids-icon {
413
+ color: var(--ids-comp-buttons-filled-color-fg-icon-dark-pressed);
414
+ }
300
415
  .ids-button.ids-button-filled.ids-button-dark:disabled {
301
416
  background: var(--ids-comp-buttons-filled-color-bg-dark-disabled);
302
417
  color: var(--ids-comp-buttons-filled-color-fg-label-dark-disabled);
303
418
  border-color: var(--ids-comp-buttons-filled-color-border-dark-disabled);
304
419
  }
420
+ .ids-button.ids-button-filled.ids-button-dark:disabled > .ids-icon {
421
+ color: var(--ids-comp-buttons-filled-color-fg-icon-dark-disabled);
422
+ }
305
423
  .ids-button.ids-button-filled.ids-button-surface {
306
424
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-default);
307
425
  background: var(--ids-comp-buttons-filled-color-bg-surface-default);
308
426
  border-color: var(--ids-comp-buttons-filled-color-border-surface-default);
309
427
  }
428
+ .ids-button.ids-button-filled.ids-button-surface > .ids-icon {
429
+ color: var(--ids-comp-buttons-filled-color-fg-icon-surface-default);
430
+ }
310
431
  .ids-button.ids-button-filled.ids-button-surface:hover {
311
432
  background: var(--ids-comp-buttons-filled-color-bg-surface-hovered);
312
433
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-hovered);
313
434
  border-color: var(--ids-comp-buttons-filled-color-border-surface-hovered);
314
435
  }
436
+ .ids-button.ids-button-filled.ids-button-surface:hover > .ids-icon {
437
+ color: var(--ids-comp-buttons-filled-color-fg-icon-surface-hovered);
438
+ }
315
439
  .ids-button.ids-button-filled.ids-button-surface:focus {
316
440
  outline-offset: 2px;
317
441
  background: var(--ids-comp-buttons-filled-color-bg-surface-focused);
318
442
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-focused);
319
443
  border-color: var(--ids-comp-buttons-filled-color-border-surface-focused);
320
444
  }
445
+ .ids-button.ids-button-filled.ids-button-surface:focus > .ids-icon {
446
+ color: var(--ids-comp-buttons-filled-color-fg-icon-surface-focused);
447
+ }
321
448
  .ids-button.ids-button-filled.ids-button-surface:active {
322
449
  background: var(--ids-comp-buttons-filled-color-bg-surface-pressed);
323
450
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-pressed);
324
451
  border-color: var(--ids-comp-buttons-filled-color-border-surface-pressed);
325
452
  }
453
+ .ids-button.ids-button-filled.ids-button-surface:active > .ids-icon {
454
+ color: var(--ids-comp-buttons-filled-color-fg-icon-surface-pressed);
455
+ }
326
456
  .ids-button.ids-button-filled.ids-button-surface:disabled {
327
457
  background: var(--ids-comp-buttons-filled-color-bg-surface-disabled);
328
458
  color: var(--ids-comp-buttons-filled-color-fg-label-surface-disabled);
329
459
  border-color: var(--ids-comp-buttons-filled-color-border-surface-disabled);
330
460
  }
461
+ .ids-button.ids-button-filled.ids-button-surface:disabled > .ids-icon {
462
+ color: var(--ids-comp-buttons-filled-color-fg-icon-surface-disabled);
463
+ }
331
464
  .ids-button.ids-button-outlined.ids-button-primary {
332
465
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-default);
333
466
  background: var(--ids-comp-buttons-outlined-color-bg-primary-default);
334
467
  border-color: var(--ids-comp-buttons-outlined-color-border-primary-default);
335
468
  }
469
+ .ids-button.ids-button-outlined.ids-button-primary > .ids-icon {
470
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-default);
471
+ }
336
472
  .ids-button.ids-button-outlined.ids-button-primary:hover {
337
473
  background: var(--ids-comp-buttons-outlined-color-bg-primary-hovered);
338
474
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-hovered);
339
475
  border-color: var(--ids-comp-buttons-outlined-color-border-primary-hovered);
340
476
  }
477
+ .ids-button.ids-button-outlined.ids-button-primary:hover > .ids-icon {
478
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-hovered);
479
+ }
341
480
  .ids-button.ids-button-outlined.ids-button-primary:focus {
342
481
  outline-offset: 2px;
343
482
  background: var(--ids-comp-buttons-outlined-color-bg-primary-focused);
344
483
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-focused);
345
484
  border-color: var(--ids-comp-buttons-outlined-color-border-primary-focused);
346
485
  }
486
+ .ids-button.ids-button-outlined.ids-button-primary:focus > .ids-icon {
487
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-focused);
488
+ }
347
489
  .ids-button.ids-button-outlined.ids-button-primary:active {
348
490
  background: var(--ids-comp-buttons-outlined-color-bg-primary-pressed);
349
491
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-pressed);
350
492
  border-color: var(--ids-comp-buttons-outlined-color-border-primary-pressed);
351
493
  }
494
+ .ids-button.ids-button-outlined.ids-button-primary:active > .ids-icon {
495
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-pressed);
496
+ }
352
497
  .ids-button.ids-button-outlined.ids-button-primary:disabled {
353
498
  background: var(--ids-comp-buttons-outlined-color-bg-primary-disabled);
354
499
  color: var(--ids-comp-buttons-outlined-color-fg-label-primary-disabled);
355
500
  border-color: var(--ids-comp-buttons-outlined-color-border-primary-disabled);
356
501
  }
502
+ .ids-button.ids-button-outlined.ids-button-primary:disabled > .ids-icon {
503
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-primary-disabled);
504
+ }
357
505
  .ids-button.ids-button-outlined.ids-button-secondary {
358
506
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-default);
359
507
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-default);
360
508
  border-color: var(--ids-comp-buttons-outlined-color-border-secondary-default);
361
509
  }
510
+ .ids-button.ids-button-outlined.ids-button-secondary > .ids-icon {
511
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-default);
512
+ }
362
513
  .ids-button.ids-button-outlined.ids-button-secondary:hover {
363
514
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-hovered);
364
515
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-hovered);
365
516
  border-color: var(--ids-comp-buttons-outlined-color-border-secondary-hovered);
366
517
  }
518
+ .ids-button.ids-button-outlined.ids-button-secondary:hover > .ids-icon {
519
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-hovered);
520
+ }
367
521
  .ids-button.ids-button-outlined.ids-button-secondary:focus {
368
522
  outline-offset: 2px;
369
523
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-focused);
370
524
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-focused);
371
525
  border-color: var(--ids-comp-buttons-outlined-color-border-secondary-focused);
372
526
  }
527
+ .ids-button.ids-button-outlined.ids-button-secondary:focus > .ids-icon {
528
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-focused);
529
+ }
373
530
  .ids-button.ids-button-outlined.ids-button-secondary:active {
374
531
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-pressed);
375
532
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-pressed);
376
533
  border-color: var(--ids-comp-buttons-outlined-color-border-secondary-pressed);
377
534
  }
535
+ .ids-button.ids-button-outlined.ids-button-secondary:active > .ids-icon {
536
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-pressed);
537
+ }
378
538
  .ids-button.ids-button-outlined.ids-button-secondary:disabled {
379
539
  background: var(--ids-comp-buttons-outlined-color-bg-secondary-disabled);
380
540
  color: var(--ids-comp-buttons-outlined-color-fg-label-secondary-disabled);
381
541
  border-color: var(--ids-comp-buttons-outlined-color-border-secondary-disabled);
382
542
  }
543
+ .ids-button.ids-button-outlined.ids-button-secondary:disabled > .ids-icon {
544
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-secondary-disabled);
545
+ }
383
546
  .ids-button.ids-button-outlined.ids-button-brand {
384
547
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-default);
385
548
  background: var(--ids-comp-buttons-outlined-color-bg-brand-default);
386
549
  border-color: var(--ids-comp-buttons-outlined-color-border-brand-default);
387
550
  }
551
+ .ids-button.ids-button-outlined.ids-button-brand > .ids-icon {
552
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-default);
553
+ }
388
554
  .ids-button.ids-button-outlined.ids-button-brand:hover {
389
555
  background: var(--ids-comp-buttons-outlined-color-bg-brand-hovered);
390
556
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-hovered);
391
557
  border-color: var(--ids-comp-buttons-outlined-color-border-brand-hovered);
392
558
  }
559
+ .ids-button.ids-button-outlined.ids-button-brand:hover > .ids-icon {
560
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-hovered);
561
+ }
393
562
  .ids-button.ids-button-outlined.ids-button-brand:focus {
394
563
  outline-offset: 2px;
395
564
  background: var(--ids-comp-buttons-outlined-color-bg-brand-focused);
396
565
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-focused);
397
566
  border-color: var(--ids-comp-buttons-outlined-color-border-brand-focused);
398
567
  }
568
+ .ids-button.ids-button-outlined.ids-button-brand:focus > .ids-icon {
569
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-focused);
570
+ }
399
571
  .ids-button.ids-button-outlined.ids-button-brand:active {
400
572
  background: var(--ids-comp-buttons-outlined-color-bg-brand-pressed);
401
573
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-pressed);
402
574
  border-color: var(--ids-comp-buttons-outlined-color-border-brand-pressed);
403
575
  }
576
+ .ids-button.ids-button-outlined.ids-button-brand:active > .ids-icon {
577
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-pressed);
578
+ }
404
579
  .ids-button.ids-button-outlined.ids-button-brand:disabled {
405
580
  background: var(--ids-comp-buttons-outlined-color-bg-brand-disabled);
406
581
  color: var(--ids-comp-buttons-outlined-color-fg-label-brand-disabled);
407
582
  border-color: var(--ids-comp-buttons-outlined-color-border-brand-disabled);
408
583
  }
584
+ .ids-button.ids-button-outlined.ids-button-brand:disabled > .ids-icon {
585
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-brand-disabled);
586
+ }
409
587
  .ids-button.ids-button-outlined.ids-button-error {
410
588
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-default);
411
589
  background: var(--ids-comp-buttons-outlined-color-bg-error-default);
412
590
  border-color: var(--ids-comp-buttons-outlined-color-border-error-default);
413
591
  }
592
+ .ids-button.ids-button-outlined.ids-button-error > .ids-icon {
593
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-error-default);
594
+ }
414
595
  .ids-button.ids-button-outlined.ids-button-error:hover {
415
596
  background: var(--ids-comp-buttons-outlined-color-bg-error-hovered);
416
597
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-hovered);
417
598
  border-color: var(--ids-comp-buttons-outlined-color-border-error-hovered);
418
599
  }
600
+ .ids-button.ids-button-outlined.ids-button-error:hover > .ids-icon {
601
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-error-hovered);
602
+ }
419
603
  .ids-button.ids-button-outlined.ids-button-error:focus {
420
604
  outline-offset: 2px;
421
605
  background: var(--ids-comp-buttons-outlined-color-bg-error-focused);
422
606
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-focused);
423
607
  border-color: var(--ids-comp-buttons-outlined-color-border-error-focused);
424
608
  }
609
+ .ids-button.ids-button-outlined.ids-button-error:focus > .ids-icon {
610
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-error-focused);
611
+ }
425
612
  .ids-button.ids-button-outlined.ids-button-error:active {
426
613
  background: var(--ids-comp-buttons-outlined-color-bg-error-pressed);
427
614
  color: var(--ids-comp-buttons-outlined-color-fg-label-error-pressed);
428
615
  border-color: var(--ids-comp-buttons-outlined-color-border-error-pressed);
429
616
  }
617
+ .ids-button.ids-button-outlined.ids-button-error:active > .ids-icon {
618
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-error-pressed);
619
+ }
430
620
  .ids-button.ids-button-outlined.ids-button-success {
431
621
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-default);
432
622
  background: var(--ids-comp-buttons-outlined-color-bg-success-default);
433
623
  border-color: var(--ids-comp-buttons-outlined-color-border-success-default);
434
624
  }
625
+ .ids-button.ids-button-outlined.ids-button-success > .ids-icon {
626
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-success-default);
627
+ }
435
628
  .ids-button.ids-button-outlined.ids-button-success:hover {
436
629
  background: var(--ids-comp-buttons-outlined-color-bg-success-hovered);
437
630
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-hovered);
438
631
  border-color: var(--ids-comp-buttons-outlined-color-border-success-hovered);
439
632
  }
633
+ .ids-button.ids-button-outlined.ids-button-success:hover > .ids-icon {
634
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-success-hovered);
635
+ }
440
636
  .ids-button.ids-button-outlined.ids-button-success:focus {
441
637
  outline-offset: 2px;
442
638
  background: var(--ids-comp-buttons-outlined-color-bg-success-focused);
443
639
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-focused);
444
640
  border-color: var(--ids-comp-buttons-outlined-color-border-success-focused);
445
641
  }
642
+ .ids-button.ids-button-outlined.ids-button-success:focus > .ids-icon {
643
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-success-focused);
644
+ }
446
645
  .ids-button.ids-button-outlined.ids-button-success:active {
447
646
  background: var(--ids-comp-buttons-outlined-color-bg-success-pressed);
448
647
  color: var(--ids-comp-buttons-outlined-color-fg-label-success-pressed);
449
648
  border-color: var(--ids-comp-buttons-outlined-color-border-success-pressed);
450
649
  }
650
+ .ids-button.ids-button-outlined.ids-button-success:active > .ids-icon {
651
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-success-pressed);
652
+ }
451
653
  .ids-button.ids-button-outlined.ids-button-warning {
452
654
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-default);
453
655
  background: var(--ids-comp-buttons-outlined-color-bg-warning-default);
454
656
  border-color: var(--ids-comp-buttons-outlined-color-border-warning-default);
455
657
  }
658
+ .ids-button.ids-button-outlined.ids-button-warning > .ids-icon {
659
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-warning-default);
660
+ }
456
661
  .ids-button.ids-button-outlined.ids-button-warning:hover {
457
662
  background: var(--ids-comp-buttons-outlined-color-bg-warning-hovered);
458
663
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-hovered);
459
664
  border-color: var(--ids-comp-buttons-outlined-color-border-warning-hovered);
460
665
  }
666
+ .ids-button.ids-button-outlined.ids-button-warning:hover > .ids-icon {
667
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-warning-hovered);
668
+ }
461
669
  .ids-button.ids-button-outlined.ids-button-warning:focus {
462
670
  outline-offset: 2px;
463
671
  background: var(--ids-comp-buttons-outlined-color-bg-warning-focused);
464
672
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-focused);
465
673
  border-color: var(--ids-comp-buttons-outlined-color-border-warning-focused);
466
674
  }
675
+ .ids-button.ids-button-outlined.ids-button-warning:focus > .ids-icon {
676
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-warning-focused);
677
+ }
467
678
  .ids-button.ids-button-outlined.ids-button-warning:active {
468
679
  background: var(--ids-comp-buttons-outlined-color-bg-warning-pressed);
469
680
  color: var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed);
470
681
  border-color: var(--ids-comp-buttons-outlined-color-border-warning-pressed);
471
682
  }
683
+ .ids-button.ids-button-outlined.ids-button-warning:active > .ids-icon {
684
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-warning-pressed);
685
+ }
472
686
  .ids-button.ids-button-outlined.ids-button-light {
473
687
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-default);
474
688
  background: var(--ids-comp-buttons-outlined-color-bg-light-default);
475
689
  border-color: var(--ids-comp-buttons-outlined-color-border-light-default);
476
690
  }
691
+ .ids-button.ids-button-outlined.ids-button-light > .ids-icon {
692
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-light-default);
693
+ }
477
694
  .ids-button.ids-button-outlined.ids-button-light:hover {
478
695
  background: var(--ids-comp-buttons-outlined-color-bg-light-hovered);
479
696
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-hovered);
480
697
  border-color: var(--ids-comp-buttons-outlined-color-border-light-hovered);
481
698
  }
699
+ .ids-button.ids-button-outlined.ids-button-light:hover > .ids-icon {
700
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-light-hovered);
701
+ }
482
702
  .ids-button.ids-button-outlined.ids-button-light:focus {
483
703
  outline-offset: 2px;
484
704
  background: var(--ids-comp-buttons-outlined-color-bg-light-focused);
485
705
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-focused);
486
706
  border-color: var(--ids-comp-buttons-outlined-color-border-light-focused);
487
707
  }
708
+ .ids-button.ids-button-outlined.ids-button-light:focus > .ids-icon {
709
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-light-focused);
710
+ }
488
711
  .ids-button.ids-button-outlined.ids-button-light:active {
489
712
  background: var(--ids-comp-buttons-outlined-color-bg-light-pressed);
490
713
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-pressed);
491
714
  border-color: var(--ids-comp-buttons-outlined-color-border-light-pressed);
492
715
  }
716
+ .ids-button.ids-button-outlined.ids-button-light:active > .ids-icon {
717
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-light-pressed);
718
+ }
493
719
  .ids-button.ids-button-outlined.ids-button-light:disabled {
494
720
  background: var(--ids-comp-buttons-outlined-color-bg-light-disabled);
495
721
  color: var(--ids-comp-buttons-outlined-color-fg-label-light-disabled);
496
722
  border-color: var(--ids-comp-buttons-outlined-color-border-light-disabled);
497
723
  }
724
+ .ids-button.ids-button-outlined.ids-button-light:disabled > .ids-icon {
725
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-light-disabled);
726
+ }
498
727
  .ids-button.ids-button-outlined.ids-button-dark {
499
728
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-default);
500
729
  background: var(--ids-comp-buttons-outlined-color-bg-dark-default);
501
730
  border-color: var(--ids-comp-buttons-outlined-color-border-dark-default);
502
731
  }
732
+ .ids-button.ids-button-outlined.ids-button-dark > .ids-icon {
733
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-default);
734
+ }
503
735
  .ids-button.ids-button-outlined.ids-button-dark:hover {
504
736
  background: var(--ids-comp-buttons-outlined-color-bg-dark-hovered);
505
737
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-hovered);
506
738
  border-color: var(--ids-comp-buttons-outlined-color-border-dark-hovered);
507
739
  }
740
+ .ids-button.ids-button-outlined.ids-button-dark:hover > .ids-icon {
741
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-hovered);
742
+ }
508
743
  .ids-button.ids-button-outlined.ids-button-dark:focus {
509
744
  outline-offset: 2px;
510
745
  background: var(--ids-comp-buttons-outlined-color-bg-dark-focused);
511
746
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-focused);
512
747
  border-color: var(--ids-comp-buttons-outlined-color-border-dark-focused);
513
748
  }
749
+ .ids-button.ids-button-outlined.ids-button-dark:focus > .ids-icon {
750
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-focused);
751
+ }
514
752
  .ids-button.ids-button-outlined.ids-button-dark:active {
515
753
  background: var(--ids-comp-buttons-outlined-color-bg-dark-pressed);
516
754
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-pressed);
517
755
  border-color: var(--ids-comp-buttons-outlined-color-border-dark-pressed);
518
756
  }
757
+ .ids-button.ids-button-outlined.ids-button-dark:active > .ids-icon {
758
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-pressed);
759
+ }
519
760
  .ids-button.ids-button-outlined.ids-button-dark:disabled {
520
761
  background: var(--ids-comp-buttons-outlined-color-bg-dark-disabled);
521
762
  color: var(--ids-comp-buttons-outlined-color-fg-label-dark-disabled);
522
763
  border-color: var(--ids-comp-buttons-outlined-color-border-dark-disabled);
523
764
  }
765
+ .ids-button.ids-button-outlined.ids-button-dark:disabled > .ids-icon {
766
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-dark-disabled);
767
+ }
524
768
  .ids-button.ids-button-outlined.ids-button-surface {
525
769
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-default);
526
770
  background: var(--ids-comp-buttons-outlined-color-bg-surface-default);
527
771
  border-color: var(--ids-comp-buttons-outlined-color-border-surface-default);
528
772
  }
773
+ .ids-button.ids-button-outlined.ids-button-surface > .ids-icon {
774
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-default);
775
+ }
529
776
  .ids-button.ids-button-outlined.ids-button-surface:hover {
530
777
  background: var(--ids-comp-buttons-outlined-color-bg-surface-hovered);
531
778
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-hovered);
532
779
  border-color: var(--ids-comp-buttons-outlined-color-border-surface-hovered);
533
780
  }
781
+ .ids-button.ids-button-outlined.ids-button-surface:hover > .ids-icon {
782
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-hovered);
783
+ }
534
784
  .ids-button.ids-button-outlined.ids-button-surface:focus {
535
785
  outline-offset: 2px;
536
786
  background: var(--ids-comp-buttons-outlined-color-bg-surface-focused);
537
787
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-focused);
538
788
  border-color: var(--ids-comp-buttons-outlined-color-border-surface-focused);
539
789
  }
790
+ .ids-button.ids-button-outlined.ids-button-surface:focus > .ids-icon {
791
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-focused);
792
+ }
540
793
  .ids-button.ids-button-outlined.ids-button-surface:active {
541
794
  background: var(--ids-comp-buttons-outlined-color-bg-surface-pressed);
542
795
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-pressed);
543
796
  border-color: var(--ids-comp-buttons-outlined-color-border-surface-pressed);
544
797
  }
798
+ .ids-button.ids-button-outlined.ids-button-surface:active > .ids-icon {
799
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-pressed);
800
+ }
545
801
  .ids-button.ids-button-outlined.ids-button-surface:disabled {
546
802
  background: var(--ids-comp-buttons-outlined-color-bg-surface-disabled);
547
803
  color: var(--ids-comp-buttons-outlined-color-fg-label-surface-disabled);
548
804
  border-color: var(--ids-comp-buttons-outlined-color-border-surface-disabled);
549
805
  }
806
+ .ids-button.ids-button-outlined.ids-button-surface:disabled > .ids-icon {
807
+ color: var(--ids-comp-buttons-outlined-color-fg-icon-surface-disabled);
808
+ }
550
809
  .ids-button.ids-button-text.ids-button-primary {
551
810
  color: var(--ids-comp-buttons-text-color-fg-label-primary-default);
552
811
  background: var(--ids-comp-buttons-text-color-bg-primary-default);
553
812
  border-color: var(--ids-comp-buttons-text-color-border-primary-default);
554
813
  }
814
+ .ids-button.ids-button-text.ids-button-primary > .ids-icon {
815
+ color: var(--ids-comp-buttons-text-color-fg-icon-primary-default);
816
+ }
555
817
  .ids-button.ids-button-text.ids-button-primary:hover {
556
818
  background: var(--ids-comp-buttons-text-color-bg-primary-hovered);
557
819
  color: var(--ids-comp-buttons-text-color-fg-label-primary-hovered);
558
820
  border-color: var(--ids-comp-buttons-text-color-border-primary-hovered);
559
821
  }
822
+ .ids-button.ids-button-text.ids-button-primary:hover > .ids-icon {
823
+ color: var(--ids-comp-buttons-text-color-fg-icon-primary-hovered);
824
+ }
560
825
  .ids-button.ids-button-text.ids-button-primary:focus {
561
826
  outline-offset: 2px;
562
827
  background: var(--ids-comp-buttons-text-color-bg-primary-focused);
563
828
  color: var(--ids-comp-buttons-text-color-fg-label-primary-focused);
564
829
  border-color: var(--ids-comp-buttons-text-color-border-primary-focused);
565
830
  }
831
+ .ids-button.ids-button-text.ids-button-primary:focus > .ids-icon {
832
+ color: var(--ids-comp-buttons-text-color-fg-icon-primary-focused);
833
+ }
566
834
  .ids-button.ids-button-text.ids-button-primary:active {
567
835
  background: var(--ids-comp-buttons-text-color-bg-primary-pressed);
568
836
  color: var(--ids-comp-buttons-text-color-fg-label-primary-pressed);
569
837
  border-color: var(--ids-comp-buttons-text-color-border-primary-pressed);
570
838
  }
839
+ .ids-button.ids-button-text.ids-button-primary:active > .ids-icon {
840
+ color: var(--ids-comp-buttons-text-color-fg-icon-primary-pressed);
841
+ }
571
842
  .ids-button.ids-button-text.ids-button-primary:disabled {
572
843
  background: var(--ids-comp-buttons-text-color-bg-primary-disabled);
573
844
  color: var(--ids-comp-buttons-text-color-fg-label-primary-disabled);
574
845
  border-color: var(--ids-comp-buttons-text-color-border-primary-disabled);
575
846
  }
847
+ .ids-button.ids-button-text.ids-button-primary:disabled > .ids-icon {
848
+ color: var(--ids-comp-buttons-text-color-fg-icon-primary-disabled);
849
+ }
576
850
  .ids-button.ids-button-text.ids-button-secondary {
577
851
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-default);
578
852
  background: var(--ids-comp-buttons-text-color-bg-secondary-default);
579
853
  border-color: var(--ids-comp-buttons-text-color-border-secondary-default);
580
854
  }
855
+ .ids-button.ids-button-text.ids-button-secondary > .ids-icon {
856
+ color: var(--ids-comp-buttons-text-color-fg-icon-secondary-default);
857
+ }
581
858
  .ids-button.ids-button-text.ids-button-secondary:hover {
582
859
  background: var(--ids-comp-buttons-text-color-bg-secondary-hovered);
583
860
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-hovered);
584
861
  border-color: var(--ids-comp-buttons-text-color-border-secondary-hovered);
585
862
  }
863
+ .ids-button.ids-button-text.ids-button-secondary:hover > .ids-icon {
864
+ color: var(--ids-comp-buttons-text-color-fg-icon-secondary-hovered);
865
+ }
586
866
  .ids-button.ids-button-text.ids-button-secondary:focus {
587
867
  outline-offset: 2px;
588
868
  background: var(--ids-comp-buttons-text-color-bg-secondary-focused);
589
869
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-focused);
590
870
  border-color: var(--ids-comp-buttons-text-color-border-secondary-focused);
591
871
  }
872
+ .ids-button.ids-button-text.ids-button-secondary:focus > .ids-icon {
873
+ color: var(--ids-comp-buttons-text-color-fg-icon-secondary-focused);
874
+ }
592
875
  .ids-button.ids-button-text.ids-button-secondary:active {
593
876
  background: var(--ids-comp-buttons-text-color-bg-secondary-pressed);
594
877
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-pressed);
595
878
  border-color: var(--ids-comp-buttons-text-color-border-secondary-pressed);
596
879
  }
880
+ .ids-button.ids-button-text.ids-button-secondary:active > .ids-icon {
881
+ color: var(--ids-comp-buttons-text-color-fg-icon-secondary-pressed);
882
+ }
597
883
  .ids-button.ids-button-text.ids-button-secondary:disabled {
598
884
  background: var(--ids-comp-buttons-text-color-bg-secondary-disabled);
599
885
  color: var(--ids-comp-buttons-text-color-fg-label-secondary-disabled);
600
886
  border-color: var(--ids-comp-buttons-text-color-border-secondary-disabled);
601
887
  }
888
+ .ids-button.ids-button-text.ids-button-secondary:disabled > .ids-icon {
889
+ color: var(--ids-comp-buttons-text-color-fg-icon-secondary-disabled);
890
+ }
602
891
  .ids-button.ids-button-text.ids-button-brand {
603
892
  color: var(--ids-comp-buttons-text-color-fg-label-brand-default);
604
893
  background: var(--ids-comp-buttons-text-color-bg-brand-default);
605
894
  border-color: var(--ids-comp-buttons-text-color-border-brand-default);
606
895
  }
896
+ .ids-button.ids-button-text.ids-button-brand > .ids-icon {
897
+ color: var(--ids-comp-buttons-text-color-fg-icon-brand-default);
898
+ }
607
899
  .ids-button.ids-button-text.ids-button-brand:hover {
608
900
  background: var(--ids-comp-buttons-text-color-bg-brand-hovered);
609
901
  color: var(--ids-comp-buttons-text-color-fg-label-brand-hovered);
610
902
  border-color: var(--ids-comp-buttons-text-color-border-brand-hovered);
611
903
  }
904
+ .ids-button.ids-button-text.ids-button-brand:hover > .ids-icon {
905
+ color: var(--ids-comp-buttons-text-color-fg-icon-brand-hovered);
906
+ }
612
907
  .ids-button.ids-button-text.ids-button-brand:focus {
613
908
  outline-offset: 2px;
614
909
  background: var(--ids-comp-buttons-text-color-bg-brand-focused);
615
910
  color: var(--ids-comp-buttons-text-color-fg-label-brand-focused);
616
911
  border-color: var(--ids-comp-buttons-text-color-border-brand-focused);
617
912
  }
913
+ .ids-button.ids-button-text.ids-button-brand:focus > .ids-icon {
914
+ color: var(--ids-comp-buttons-text-color-fg-icon-brand-focused);
915
+ }
618
916
  .ids-button.ids-button-text.ids-button-brand:active {
619
917
  background: var(--ids-comp-buttons-text-color-bg-brand-pressed);
620
918
  color: var(--ids-comp-buttons-text-color-fg-label-brand-pressed);
621
919
  border-color: var(--ids-comp-buttons-text-color-border-brand-pressed);
622
920
  }
921
+ .ids-button.ids-button-text.ids-button-brand:active > .ids-icon {
922
+ color: var(--ids-comp-buttons-text-color-fg-icon-brand-pressed);
923
+ }
623
924
  .ids-button.ids-button-text.ids-button-brand:disabled {
624
925
  background: var(--ids-comp-buttons-text-color-bg-brand-disabled);
625
926
  color: var(--ids-comp-buttons-text-color-fg-label-brand-disabled);
626
927
  border-color: var(--ids-comp-buttons-text-color-border-brand-disabled);
627
928
  }
929
+ .ids-button.ids-button-text.ids-button-brand:disabled > .ids-icon {
930
+ color: var(--ids-comp-buttons-text-color-fg-icon-brand-disabled);
931
+ }
628
932
  .ids-button.ids-button-text.ids-button-error {
629
933
  color: var(--ids-comp-buttons-text-color-fg-label-error-default);
630
934
  background: var(--ids-comp-buttons-text-color-bg-error-default);
631
935
  border-color: var(--ids-comp-buttons-text-color-border-error-default);
632
936
  }
937
+ .ids-button.ids-button-text.ids-button-error > .ids-icon {
938
+ color: var(--ids-comp-buttons-text-color-fg-icon-error-default);
939
+ }
633
940
  .ids-button.ids-button-text.ids-button-error:hover {
634
941
  background: var(--ids-comp-buttons-text-color-bg-error-hovered);
635
942
  color: var(--ids-comp-buttons-text-color-fg-label-error-hovered);
636
943
  border-color: var(--ids-comp-buttons-text-color-border-error-hovered);
637
944
  }
945
+ .ids-button.ids-button-text.ids-button-error:hover > .ids-icon {
946
+ color: var(--ids-comp-buttons-text-color-fg-icon-error-hovered);
947
+ }
638
948
  .ids-button.ids-button-text.ids-button-error:focus {
639
949
  outline-offset: 2px;
640
950
  background: var(--ids-comp-buttons-text-color-bg-error-focused);
641
951
  color: var(--ids-comp-buttons-text-color-fg-label-error-focused);
642
952
  border-color: var(--ids-comp-buttons-text-color-border-error-focused);
643
953
  }
954
+ .ids-button.ids-button-text.ids-button-error:focus > .ids-icon {
955
+ color: var(--ids-comp-buttons-text-color-fg-icon-error-focused);
956
+ }
644
957
  .ids-button.ids-button-text.ids-button-error:active {
645
958
  background: var(--ids-comp-buttons-text-color-bg-error-pressed);
646
959
  color: var(--ids-comp-buttons-text-color-fg-label-error-pressed);
647
960
  border-color: var(--ids-comp-buttons-text-color-border-error-pressed);
648
961
  }
962
+ .ids-button.ids-button-text.ids-button-error:active > .ids-icon {
963
+ color: var(--ids-comp-buttons-text-color-fg-icon-error-pressed);
964
+ }
649
965
  .ids-button.ids-button-text.ids-button-success {
650
966
  color: var(--ids-comp-buttons-text-color-fg-label-success-default);
651
967
  background: var(--ids-comp-buttons-text-color-bg-success-default);
652
968
  border-color: var(--ids-comp-buttons-text-color-border-success-default);
653
969
  }
970
+ .ids-button.ids-button-text.ids-button-success > .ids-icon {
971
+ color: var(--ids-comp-buttons-text-color-fg-icon-success-default);
972
+ }
654
973
  .ids-button.ids-button-text.ids-button-success:hover {
655
974
  background: var(--ids-comp-buttons-text-color-bg-success-hovered);
656
975
  color: var(--ids-comp-buttons-text-color-fg-label-success-hovered);
657
976
  border-color: var(--ids-comp-buttons-text-color-border-success-hovered);
658
977
  }
978
+ .ids-button.ids-button-text.ids-button-success:hover > .ids-icon {
979
+ color: var(--ids-comp-buttons-text-color-fg-icon-success-hovered);
980
+ }
659
981
  .ids-button.ids-button-text.ids-button-success:focus {
660
982
  outline-offset: 2px;
661
983
  background: var(--ids-comp-buttons-text-color-bg-success-focused);
662
984
  color: var(--ids-comp-buttons-text-color-fg-label-success-focused);
663
985
  border-color: var(--ids-comp-buttons-text-color-border-success-focused);
664
986
  }
987
+ .ids-button.ids-button-text.ids-button-success:focus > .ids-icon {
988
+ color: var(--ids-comp-buttons-text-color-fg-icon-success-focused);
989
+ }
665
990
  .ids-button.ids-button-text.ids-button-success:active {
666
991
  background: var(--ids-comp-buttons-text-color-bg-success-pressed);
667
992
  color: var(--ids-comp-buttons-text-color-fg-label-success-pressed);
668
993
  border-color: var(--ids-comp-buttons-text-color-border-success-pressed);
669
994
  }
995
+ .ids-button.ids-button-text.ids-button-success:active > .ids-icon {
996
+ color: var(--ids-comp-buttons-text-color-fg-icon-success-pressed);
997
+ }
670
998
  .ids-button.ids-button-text.ids-button-warning {
671
999
  color: var(--ids-comp-buttons-text-color-fg-label-warning-default);
672
1000
  background: var(--ids-comp-buttons-text-color-bg-warning-default);
673
1001
  border-color: var(--ids-comp-buttons-text-color-border-warning-default);
674
1002
  }
1003
+ .ids-button.ids-button-text.ids-button-warning > .ids-icon {
1004
+ color: var(--ids-comp-buttons-text-color-fg-icon-warning-default);
1005
+ }
675
1006
  .ids-button.ids-button-text.ids-button-warning:hover {
676
1007
  background: var(--ids-comp-buttons-text-color-bg-warning-hovered);
677
1008
  color: var(--ids-comp-buttons-text-color-fg-label-warning-hovered);
678
1009
  border-color: var(--ids-comp-buttons-text-color-border-warning-hovered);
679
1010
  }
1011
+ .ids-button.ids-button-text.ids-button-warning:hover > .ids-icon {
1012
+ color: var(--ids-comp-buttons-text-color-fg-icon-warning-hovered);
1013
+ }
680
1014
  .ids-button.ids-button-text.ids-button-warning:focus {
681
1015
  outline-offset: 2px;
682
1016
  background: var(--ids-comp-buttons-text-color-bg-warning-focused);
683
1017
  color: var(--ids-comp-buttons-text-color-fg-label-warning-focused);
684
1018
  border-color: var(--ids-comp-buttons-text-color-border-warning-focused);
685
1019
  }
1020
+ .ids-button.ids-button-text.ids-button-warning:focus > .ids-icon {
1021
+ color: var(--ids-comp-buttons-text-color-fg-icon-warning-focused);
1022
+ }
686
1023
  .ids-button.ids-button-text.ids-button-warning:active {
687
1024
  background: var(--ids-comp-buttons-text-color-bg-warning-pressed);
688
1025
  color: var(--ids-comp-buttons-text-color-fg-label-warning-pressed);
689
1026
  border-color: var(--ids-comp-buttons-text-color-border-warning-pressed);
690
1027
  }
1028
+ .ids-button.ids-button-text.ids-button-warning:active > .ids-icon {
1029
+ color: var(--ids-comp-buttons-text-color-fg-icon-warning-pressed);
1030
+ }
691
1031
  .ids-button.ids-button-text.ids-button-light {
692
1032
  color: var(--ids-comp-buttons-text-color-fg-label-light-default);
693
1033
  background: var(--ids-comp-buttons-text-color-bg-light-default);
694
1034
  border-color: var(--ids-comp-buttons-text-color-border-light-default);
695
1035
  }
1036
+ .ids-button.ids-button-text.ids-button-light > .ids-icon {
1037
+ color: var(--ids-comp-buttons-text-color-fg-icon-light-default);
1038
+ }
696
1039
  .ids-button.ids-button-text.ids-button-light:hover {
697
1040
  background: var(--ids-comp-buttons-text-color-bg-light-hovered);
698
1041
  color: var(--ids-comp-buttons-text-color-fg-label-light-hovered);
699
1042
  border-color: var(--ids-comp-buttons-text-color-border-light-hovered);
700
1043
  }
1044
+ .ids-button.ids-button-text.ids-button-light:hover > .ids-icon {
1045
+ color: var(--ids-comp-buttons-text-color-fg-icon-light-hovered);
1046
+ }
701
1047
  .ids-button.ids-button-text.ids-button-light:focus {
702
1048
  outline-offset: 2px;
703
1049
  background: var(--ids-comp-buttons-text-color-bg-light-focused);
704
1050
  color: var(--ids-comp-buttons-text-color-fg-label-light-focused);
705
1051
  border-color: var(--ids-comp-buttons-text-color-border-light-focused);
706
1052
  }
1053
+ .ids-button.ids-button-text.ids-button-light:focus > .ids-icon {
1054
+ color: var(--ids-comp-buttons-text-color-fg-icon-light-focused);
1055
+ }
707
1056
  .ids-button.ids-button-text.ids-button-light:active {
708
1057
  background: var(--ids-comp-buttons-text-color-bg-light-pressed);
709
1058
  color: var(--ids-comp-buttons-text-color-fg-label-light-pressed);
710
1059
  border-color: var(--ids-comp-buttons-text-color-border-light-pressed);
711
1060
  }
1061
+ .ids-button.ids-button-text.ids-button-light:active > .ids-icon {
1062
+ color: var(--ids-comp-buttons-text-color-fg-icon-light-pressed);
1063
+ }
712
1064
  .ids-button.ids-button-text.ids-button-light:disabled {
713
1065
  background: var(--ids-comp-buttons-text-color-bg-light-disabled);
714
1066
  color: var(--ids-comp-buttons-text-color-fg-label-light-disabled);
715
1067
  border-color: var(--ids-comp-buttons-text-color-border-light-disabled);
716
1068
  }
1069
+ .ids-button.ids-button-text.ids-button-light:disabled > .ids-icon {
1070
+ color: var(--ids-comp-buttons-text-color-fg-icon-light-disabled);
1071
+ }
717
1072
  .ids-button.ids-button-text.ids-button-dark {
718
1073
  color: var(--ids-comp-buttons-text-color-fg-label-dark-default);
719
1074
  background: var(--ids-comp-buttons-text-color-bg-dark-default);
720
1075
  border-color: var(--ids-comp-buttons-text-color-border-dark-default);
721
1076
  }
1077
+ .ids-button.ids-button-text.ids-button-dark > .ids-icon {
1078
+ color: var(--ids-comp-buttons-text-color-fg-icon-dark-default);
1079
+ }
722
1080
  .ids-button.ids-button-text.ids-button-dark:hover {
723
1081
  background: var(--ids-comp-buttons-text-color-bg-dark-hovered);
724
1082
  color: var(--ids-comp-buttons-text-color-fg-label-dark-hovered);
725
1083
  border-color: var(--ids-comp-buttons-text-color-border-dark-hovered);
726
1084
  }
1085
+ .ids-button.ids-button-text.ids-button-dark:hover > .ids-icon {
1086
+ color: var(--ids-comp-buttons-text-color-fg-icon-dark-hovered);
1087
+ }
727
1088
  .ids-button.ids-button-text.ids-button-dark:focus {
728
1089
  outline-offset: 2px;
729
1090
  background: var(--ids-comp-buttons-text-color-bg-dark-focused);
730
1091
  color: var(--ids-comp-buttons-text-color-fg-label-dark-focused);
731
1092
  border-color: var(--ids-comp-buttons-text-color-border-dark-focused);
732
1093
  }
1094
+ .ids-button.ids-button-text.ids-button-dark:focus > .ids-icon {
1095
+ color: var(--ids-comp-buttons-text-color-fg-icon-dark-focused);
1096
+ }
733
1097
  .ids-button.ids-button-text.ids-button-dark:active {
734
1098
  background: var(--ids-comp-buttons-text-color-bg-dark-pressed);
735
1099
  color: var(--ids-comp-buttons-text-color-fg-label-dark-pressed);
736
1100
  border-color: var(--ids-comp-buttons-text-color-border-dark-pressed);
737
1101
  }
1102
+ .ids-button.ids-button-text.ids-button-dark:active > .ids-icon {
1103
+ color: var(--ids-comp-buttons-text-color-fg-icon-dark-pressed);
1104
+ }
738
1105
  .ids-button.ids-button-text.ids-button-dark:disabled {
739
1106
  background: var(--ids-comp-buttons-text-color-bg-dark-disabled);
740
1107
  color: var(--ids-comp-buttons-text-color-fg-label-dark-disabled);
741
1108
  border-color: var(--ids-comp-buttons-text-color-border-dark-disabled);
742
1109
  }
1110
+ .ids-button.ids-button-text.ids-button-dark:disabled > .ids-icon {
1111
+ color: var(--ids-comp-buttons-text-color-fg-icon-dark-disabled);
1112
+ }
743
1113
  .ids-button.ids-button-text.ids-button-surface {
744
1114
  color: var(--ids-comp-buttons-text-color-fg-label-surface-default);
745
1115
  background: var(--ids-comp-buttons-text-color-bg-surface-default);
746
1116
  border-color: var(--ids-comp-buttons-text-color-border-surface-default);
747
1117
  }
1118
+ .ids-button.ids-button-text.ids-button-surface > .ids-icon {
1119
+ color: var(--ids-comp-buttons-text-color-fg-icon-surface-default);
1120
+ }
748
1121
  .ids-button.ids-button-text.ids-button-surface:hover {
749
1122
  background: var(--ids-comp-buttons-text-color-bg-surface-hovered);
750
1123
  color: var(--ids-comp-buttons-text-color-fg-label-surface-hovered);
751
1124
  border-color: var(--ids-comp-buttons-text-color-border-surface-hovered);
752
1125
  }
1126
+ .ids-button.ids-button-text.ids-button-surface:hover > .ids-icon {
1127
+ color: var(--ids-comp-buttons-text-color-fg-icon-surface-hovered);
1128
+ }
753
1129
  .ids-button.ids-button-text.ids-button-surface:focus {
754
1130
  outline-offset: 2px;
755
1131
  background: var(--ids-comp-buttons-text-color-bg-surface-focused);
756
1132
  color: var(--ids-comp-buttons-text-color-fg-label-surface-focused);
757
1133
  border-color: var(--ids-comp-buttons-text-color-border-surface-focused);
758
1134
  }
1135
+ .ids-button.ids-button-text.ids-button-surface:focus > .ids-icon {
1136
+ color: var(--ids-comp-buttons-text-color-fg-icon-surface-focused);
1137
+ }
759
1138
  .ids-button.ids-button-text.ids-button-surface:active {
760
1139
  background: var(--ids-comp-buttons-text-color-bg-surface-pressed);
761
1140
  color: var(--ids-comp-buttons-text-color-fg-label-surface-pressed);
762
1141
  border-color: var(--ids-comp-buttons-text-color-border-surface-pressed);
763
1142
  }
1143
+ .ids-button.ids-button-text.ids-button-surface:active > .ids-icon {
1144
+ color: var(--ids-comp-buttons-text-color-fg-icon-surface-pressed);
1145
+ }
764
1146
  .ids-button.ids-button-text.ids-button-surface:disabled {
765
1147
  background: var(--ids-comp-buttons-text-color-bg-surface-disabled);
766
1148
  color: var(--ids-comp-buttons-text-color-fg-label-surface-disabled);
767
1149
  border-color: var(--ids-comp-buttons-text-color-border-surface-disabled);
1150
+ }
1151
+ .ids-button.ids-button-text.ids-button-surface:disabled > .ids-icon {
1152
+ color: var(--ids-comp-buttons-text-color-fg-icon-surface-disabled);
768
1153
  }