@i-cell/ids-styles 0.0.15-beta.4 → 0.0.15-beta.6

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