@i-cell/ids-styles 0.0.41 → 0.0.42

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 +62 -62
  2. package/dist/button/button.min.css +1 -1
  3. package/dist/button/button.plugin.js +62 -62
  4. package/dist/components.css +82 -82
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +82 -82
  7. package/dist/icon-button/icon-button.css +20 -20
  8. package/dist/icon-button/icon-button.min.css +1 -1
  9. package/dist/icon-button/icon-button.plugin.js +20 -20
  10. package/package.json +1 -1
package/dist/button/button.css CHANGED
@@ -24,10 +24,10 @@
24
24
  .ids-button:active {
25
25
  outline-style: none;
26
26
  }
27
- .ids-button:not(:disabled) {
27
+ .ids-button:not(:is(:disabled, .ids-button-disabled)) {
28
28
  cursor: pointer;
29
29
  }
30
- .ids-button:disabled {
30
+ .ids-button:is(:disabled, .ids-button-disabled) {
31
31
  cursor: not-allowed;
32
32
  }
33
33
  .ids-button > .ids-icon {
@@ -166,12 +166,12 @@
166
166
  .ids-button.ids-button-filled.ids-button-primary:active > .ids-icon {
167
167
  color: var(--ids-comp-button-filled-color-fg-icon-primary-pressed);
168
168
  }
169
- .ids-button.ids-button-filled.ids-button-primary:disabled {
169
+ .ids-button.ids-button-filled.ids-button-primary:is(:disabled, .ids-button-disabled) {
170
170
  color: var(--ids-comp-button-filled-color-fg-label-primary-disabled);
171
171
  background: var(--ids-comp-button-filled-color-bg-primary-disabled);
172
172
  border-color: var(--ids-comp-button-filled-color-border-primary-disabled);
173
173
  }
174
- .ids-button.ids-button-filled.ids-button-primary:disabled > .ids-icon {
174
+ .ids-button.ids-button-filled.ids-button-primary:is(:disabled, .ids-button-disabled) > .ids-icon {
175
175
  color: var(--ids-comp-button-filled-color-fg-icon-primary-disabled);
176
176
  }
177
177
  .ids-button.ids-button-filled.ids-button-secondary {
@@ -207,12 +207,12 @@
207
207
  .ids-button.ids-button-filled.ids-button-secondary:active > .ids-icon {
208
208
  color: var(--ids-comp-button-filled-color-fg-icon-secondary-pressed);
209
209
  }
210
- .ids-button.ids-button-filled.ids-button-secondary:disabled {
210
+ .ids-button.ids-button-filled.ids-button-secondary:is(:disabled, .ids-button-disabled) {
211
211
  color: var(--ids-comp-button-filled-color-fg-label-secondary-disabled);
212
212
  background: var(--ids-comp-button-filled-color-bg-secondary-disabled);
213
213
  border-color: var(--ids-comp-button-filled-color-border-secondary-disabled);
214
214
  }
215
- .ids-button.ids-button-filled.ids-button-secondary:disabled > .ids-icon {
215
+ .ids-button.ids-button-filled.ids-button-secondary:is(:disabled, .ids-button-disabled) > .ids-icon {
216
216
  color: var(--ids-comp-button-filled-color-fg-icon-secondary-disabled);
217
217
  }
218
218
  .ids-button.ids-button-filled.ids-button-brand {
@@ -248,12 +248,12 @@
248
248
  .ids-button.ids-button-filled.ids-button-brand:active > .ids-icon {
249
249
  color: var(--ids-comp-button-filled-color-fg-icon-brand-pressed);
250
250
  }
251
- .ids-button.ids-button-filled.ids-button-brand:disabled {
251
+ .ids-button.ids-button-filled.ids-button-brand:is(:disabled, .ids-button-disabled) {
252
252
  color: var(--ids-comp-button-filled-color-fg-label-brand-disabled);
253
253
  background: var(--ids-comp-button-filled-color-bg-brand-disabled);
254
254
  border-color: var(--ids-comp-button-filled-color-border-brand-disabled);
255
255
  }
256
- .ids-button.ids-button-filled.ids-button-brand:disabled > .ids-icon {
256
+ .ids-button.ids-button-filled.ids-button-brand:is(:disabled, .ids-button-disabled) > .ids-icon {
257
257
  color: var(--ids-comp-button-filled-color-fg-icon-brand-disabled);
258
258
  }
259
259
  .ids-button.ids-button-filled.ids-button-error {
@@ -289,12 +289,12 @@
289
289
  .ids-button.ids-button-filled.ids-button-error:active > .ids-icon {
290
290
  color: var(--ids-comp-button-filled-color-fg-icon-error-pressed);
291
291
  }
292
- .ids-button.ids-button-filled.ids-button-error:disabled {
292
+ .ids-button.ids-button-filled.ids-button-error:is(:disabled, .ids-button-disabled) {
293
293
  color: var(--ids-comp-button-filled-color-fg-label-error-disabled);
294
294
  background: var(--ids-comp-button-filled-color-bg-error-disabled);
295
295
  border-color: var(--ids-comp-button-filled-color-border-error-disabled);
296
296
  }
297
- .ids-button.ids-button-filled.ids-button-error:disabled > .ids-icon {
297
+ .ids-button.ids-button-filled.ids-button-error:is(:disabled, .ids-button-disabled) > .ids-icon {
298
298
  color: var(--ids-comp-button-filled-color-fg-icon-error-disabled);
299
299
  }
300
300
  .ids-button.ids-button-filled.ids-button-success {
@@ -330,12 +330,12 @@
330
330
  .ids-button.ids-button-filled.ids-button-success:active > .ids-icon {
331
331
  color: var(--ids-comp-button-filled-color-fg-icon-success-pressed);
332
332
  }
333
- .ids-button.ids-button-filled.ids-button-success:disabled {
333
+ .ids-button.ids-button-filled.ids-button-success:is(:disabled, .ids-button-disabled) {
334
334
  color: var(--ids-comp-button-filled-color-fg-label-success-disabled);
335
335
  background: var(--ids-comp-button-filled-color-bg-success-disabled);
336
336
  border-color: var(--ids-comp-button-filled-color-border-success-disabled);
337
337
  }
338
- .ids-button.ids-button-filled.ids-button-success:disabled > .ids-icon {
338
+ .ids-button.ids-button-filled.ids-button-success:is(:disabled, .ids-button-disabled) > .ids-icon {
339
339
  color: var(--ids-comp-button-filled-color-fg-icon-success-disabled);
340
340
  }
341
341
  .ids-button.ids-button-filled.ids-button-warning {
@@ -371,12 +371,12 @@
371
371
  .ids-button.ids-button-filled.ids-button-warning:active > .ids-icon {
372
372
  color: var(--ids-comp-button-filled-color-fg-icon-warning-pressed);
373
373
  }
374
- .ids-button.ids-button-filled.ids-button-warning:disabled {
374
+ .ids-button.ids-button-filled.ids-button-warning:is(:disabled, .ids-button-disabled) {
375
375
  color: var(--ids-comp-button-filled-color-fg-label-warning-disabled);
376
376
  background: var(--ids-comp-button-filled-color-bg-warning-disabled);
377
377
  border-color: var(--ids-comp-button-filled-color-border-warning-disabled);
378
378
  }
379
- .ids-button.ids-button-filled.ids-button-warning:disabled > .ids-icon {
379
+ .ids-button.ids-button-filled.ids-button-warning:is(:disabled, .ids-button-disabled) > .ids-icon {
380
380
  color: var(--ids-comp-button-filled-color-fg-icon-warning-disabled);
381
381
  }
382
382
  .ids-button.ids-button-filled.ids-button-light {
@@ -412,12 +412,12 @@
412
412
  .ids-button.ids-button-filled.ids-button-light:active > .ids-icon {
413
413
  color: var(--ids-comp-button-filled-color-fg-icon-light-pressed);
414
414
  }
415
- .ids-button.ids-button-filled.ids-button-light:disabled {
415
+ .ids-button.ids-button-filled.ids-button-light:is(:disabled, .ids-button-disabled) {
416
416
  color: var(--ids-comp-button-filled-color-fg-label-light-disabled);
417
417
  background: var(--ids-comp-button-filled-color-bg-light-disabled);
418
418
  border-color: var(--ids-comp-button-filled-color-border-light-disabled);
419
419
  }
420
- .ids-button.ids-button-filled.ids-button-light:disabled > .ids-icon {
420
+ .ids-button.ids-button-filled.ids-button-light:is(:disabled, .ids-button-disabled) > .ids-icon {
421
421
  color: var(--ids-comp-button-filled-color-fg-icon-light-disabled);
422
422
  }
423
423
  .ids-button.ids-button-filled.ids-button-light-fixed {
@@ -453,12 +453,12 @@
453
453
  .ids-button.ids-button-filled.ids-button-light-fixed:active > .ids-icon {
454
454
  color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-pressed);
455
455
  }
456
- .ids-button.ids-button-filled.ids-button-light-fixed:disabled {
456
+ .ids-button.ids-button-filled.ids-button-light-fixed:is(:disabled, .ids-button-disabled) {
457
457
  color: var(--ids-comp-button-filled-color-fg-label-light-fixed-disabled);
458
458
  background: var(--ids-comp-button-filled-color-bg-light-fixed-disabled);
459
459
  border-color: var(--ids-comp-button-filled-color-border-light-fixed-disabled);
460
460
  }
461
- .ids-button.ids-button-filled.ids-button-light-fixed:disabled > .ids-icon {
461
+ .ids-button.ids-button-filled.ids-button-light-fixed:is(:disabled, .ids-button-disabled) > .ids-icon {
462
462
  color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-disabled);
463
463
  }
464
464
  .ids-button.ids-button-filled.ids-button-dark {
@@ -494,12 +494,12 @@
494
494
  .ids-button.ids-button-filled.ids-button-dark:active > .ids-icon {
495
495
  color: var(--ids-comp-button-filled-color-fg-icon-dark-pressed);
496
496
  }
497
- .ids-button.ids-button-filled.ids-button-dark:disabled {
497
+ .ids-button.ids-button-filled.ids-button-dark:is(:disabled, .ids-button-disabled) {
498
498
  color: var(--ids-comp-button-filled-color-fg-label-dark-disabled);
499
499
  background: var(--ids-comp-button-filled-color-bg-dark-disabled);
500
500
  border-color: var(--ids-comp-button-filled-color-border-dark-disabled);
501
501
  }
502
- .ids-button.ids-button-filled.ids-button-dark:disabled > .ids-icon {
502
+ .ids-button.ids-button-filled.ids-button-dark:is(:disabled, .ids-button-disabled) > .ids-icon {
503
503
  color: var(--ids-comp-button-filled-color-fg-icon-dark-disabled);
504
504
  }
505
505
  .ids-button.ids-button-filled.ids-button-surface {
@@ -535,12 +535,12 @@
535
535
  .ids-button.ids-button-filled.ids-button-surface:active > .ids-icon {
536
536
  color: var(--ids-comp-button-filled-color-fg-icon-surface-pressed);
537
537
  }
538
- .ids-button.ids-button-filled.ids-button-surface:disabled {
538
+ .ids-button.ids-button-filled.ids-button-surface:is(:disabled, .ids-button-disabled) {
539
539
  color: var(--ids-comp-button-filled-color-fg-label-surface-disabled);
540
540
  background: var(--ids-comp-button-filled-color-bg-surface-disabled);
541
541
  border-color: var(--ids-comp-button-filled-color-border-surface-disabled);
542
542
  }
543
- .ids-button.ids-button-filled.ids-button-surface:disabled > .ids-icon {
543
+ .ids-button.ids-button-filled.ids-button-surface:is(:disabled, .ids-button-disabled) > .ids-icon {
544
544
  color: var(--ids-comp-button-filled-color-fg-icon-surface-disabled);
545
545
  }
546
546
  .ids-button.ids-button-outlined.ids-button-primary {
@@ -576,12 +576,12 @@
576
576
  .ids-button.ids-button-outlined.ids-button-primary:active > .ids-icon {
577
577
  color: var(--ids-comp-button-outlined-color-fg-icon-primary-pressed);
578
578
  }
579
- .ids-button.ids-button-outlined.ids-button-primary:disabled {
579
+ .ids-button.ids-button-outlined.ids-button-primary:is(:disabled, .ids-button-disabled) {
580
580
  color: var(--ids-comp-button-outlined-color-fg-label-primary-disabled);
581
581
  background: var(--ids-comp-button-outlined-color-bg-primary-disabled);
582
582
  border-color: var(--ids-comp-button-outlined-color-border-primary-disabled);
583
583
  }
584
- .ids-button.ids-button-outlined.ids-button-primary:disabled > .ids-icon {
584
+ .ids-button.ids-button-outlined.ids-button-primary:is(:disabled, .ids-button-disabled) > .ids-icon {
585
585
  color: var(--ids-comp-button-outlined-color-fg-icon-primary-disabled);
586
586
  }
587
587
  .ids-button.ids-button-outlined.ids-button-secondary {
@@ -617,12 +617,12 @@
617
617
  .ids-button.ids-button-outlined.ids-button-secondary:active > .ids-icon {
618
618
  color: var(--ids-comp-button-outlined-color-fg-icon-secondary-pressed);
619
619
  }
620
- .ids-button.ids-button-outlined.ids-button-secondary:disabled {
620
+ .ids-button.ids-button-outlined.ids-button-secondary:is(:disabled, .ids-button-disabled) {
621
621
  color: var(--ids-comp-button-outlined-color-fg-label-secondary-disabled);
622
622
  background: var(--ids-comp-button-outlined-color-bg-secondary-disabled);
623
623
  border-color: var(--ids-comp-button-outlined-color-border-secondary-disabled);
624
624
  }
625
- .ids-button.ids-button-outlined.ids-button-secondary:disabled > .ids-icon {
625
+ .ids-button.ids-button-outlined.ids-button-secondary:is(:disabled, .ids-button-disabled) > .ids-icon {
626
626
  color: var(--ids-comp-button-outlined-color-fg-icon-secondary-disabled);
627
627
  }
628
628
  .ids-button.ids-button-outlined.ids-button-brand {
@@ -658,12 +658,12 @@
658
658
  .ids-button.ids-button-outlined.ids-button-brand:active > .ids-icon {
659
659
  color: var(--ids-comp-button-outlined-color-fg-icon-brand-pressed);
660
660
  }
661
- .ids-button.ids-button-outlined.ids-button-brand:disabled {
661
+ .ids-button.ids-button-outlined.ids-button-brand:is(:disabled, .ids-button-disabled) {
662
662
  color: var(--ids-comp-button-outlined-color-fg-label-brand-disabled);
663
663
  background: var(--ids-comp-button-outlined-color-bg-brand-disabled);
664
664
  border-color: var(--ids-comp-button-outlined-color-border-brand-disabled);
665
665
  }
666
- .ids-button.ids-button-outlined.ids-button-brand:disabled > .ids-icon {
666
+ .ids-button.ids-button-outlined.ids-button-brand:is(:disabled, .ids-button-disabled) > .ids-icon {
667
667
  color: var(--ids-comp-button-outlined-color-fg-icon-brand-disabled);
668
668
  }
669
669
  .ids-button.ids-button-outlined.ids-button-error {
@@ -699,12 +699,12 @@
699
699
  .ids-button.ids-button-outlined.ids-button-error:active > .ids-icon {
700
700
  color: var(--ids-comp-button-outlined-color-fg-icon-error-pressed);
701
701
  }
702
- .ids-button.ids-button-outlined.ids-button-error:disabled {
702
+ .ids-button.ids-button-outlined.ids-button-error:is(:disabled, .ids-button-disabled) {
703
703
  color: var(--ids-comp-button-outlined-color-fg-label-error-disabled);
704
704
  background: var(--ids-comp-button-outlined-color-bg-error-disabled);
705
705
  border-color: var(--ids-comp-button-outlined-color-border-error-disabled);
706
706
  }
707
- .ids-button.ids-button-outlined.ids-button-error:disabled > .ids-icon {
707
+ .ids-button.ids-button-outlined.ids-button-error:is(:disabled, .ids-button-disabled) > .ids-icon {
708
708
  color: var(--ids-comp-button-outlined-color-fg-icon-error-disabled);
709
709
  }
710
710
  .ids-button.ids-button-outlined.ids-button-success {
@@ -740,12 +740,12 @@
740
740
  .ids-button.ids-button-outlined.ids-button-success:active > .ids-icon {
741
741
  color: var(--ids-comp-button-outlined-color-fg-icon-success-pressed);
742
742
  }
743
- .ids-button.ids-button-outlined.ids-button-success:disabled {
743
+ .ids-button.ids-button-outlined.ids-button-success:is(:disabled, .ids-button-disabled) {
744
744
  color: var(--ids-comp-button-outlined-color-fg-label-success-disabled);
745
745
  background: var(--ids-comp-button-outlined-color-bg-success-disabled);
746
746
  border-color: var(--ids-comp-button-outlined-color-border-success-disabled);
747
747
  }
748
- .ids-button.ids-button-outlined.ids-button-success:disabled > .ids-icon {
748
+ .ids-button.ids-button-outlined.ids-button-success:is(:disabled, .ids-button-disabled) > .ids-icon {
749
749
  color: var(--ids-comp-button-outlined-color-fg-icon-success-disabled);
750
750
  }
751
751
  .ids-button.ids-button-outlined.ids-button-warning {
@@ -781,12 +781,12 @@
781
781
  .ids-button.ids-button-outlined.ids-button-warning:active > .ids-icon {
782
782
  color: var(--ids-comp-button-outlined-color-fg-icon-warning-pressed);
783
783
  }
784
- .ids-button.ids-button-outlined.ids-button-warning:disabled {
784
+ .ids-button.ids-button-outlined.ids-button-warning:is(:disabled, .ids-button-disabled) {
785
785
  color: var(--ids-comp-button-outlined-color-fg-label-warning-disabled);
786
786
  background: var(--ids-comp-button-outlined-color-bg-warning-disabled);
787
787
  border-color: var(--ids-comp-button-outlined-color-border-warning-disabled);
788
788
  }
789
- .ids-button.ids-button-outlined.ids-button-warning:disabled > .ids-icon {
789
+ .ids-button.ids-button-outlined.ids-button-warning:is(:disabled, .ids-button-disabled) > .ids-icon {
790
790
  color: var(--ids-comp-button-outlined-color-fg-icon-warning-disabled);
791
791
  }
792
792
  .ids-button.ids-button-outlined.ids-button-light {
@@ -822,12 +822,12 @@
822
822
  .ids-button.ids-button-outlined.ids-button-light:active > .ids-icon {
823
823
  color: var(--ids-comp-button-outlined-color-fg-icon-light-pressed);
824
824
  }
825
- .ids-button.ids-button-outlined.ids-button-light:disabled {
825
+ .ids-button.ids-button-outlined.ids-button-light:is(:disabled, .ids-button-disabled) {
826
826
  color: var(--ids-comp-button-outlined-color-fg-label-light-disabled);
827
827
  background: var(--ids-comp-button-outlined-color-bg-light-disabled);
828
828
  border-color: var(--ids-comp-button-outlined-color-border-light-disabled);
829
829
  }
830
- .ids-button.ids-button-outlined.ids-button-light:disabled > .ids-icon {
830
+ .ids-button.ids-button-outlined.ids-button-light:is(:disabled, .ids-button-disabled) > .ids-icon {
831
831
  color: var(--ids-comp-button-outlined-color-fg-icon-light-disabled);
832
832
  }
833
833
  .ids-button.ids-button-outlined.ids-button-light-fixed {
@@ -863,12 +863,12 @@
863
863
  .ids-button.ids-button-outlined.ids-button-light-fixed:active > .ids-icon {
864
864
  color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-pressed);
865
865
  }
866
- .ids-button.ids-button-outlined.ids-button-light-fixed:disabled {
866
+ .ids-button.ids-button-outlined.ids-button-light-fixed:is(:disabled, .ids-button-disabled) {
867
867
  color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-disabled);
868
868
  background: var(--ids-comp-button-outlined-color-bg-light-fixed-disabled);
869
869
  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-disabled);
870
870
  }
871
- .ids-button.ids-button-outlined.ids-button-light-fixed:disabled > .ids-icon {
871
+ .ids-button.ids-button-outlined.ids-button-light-fixed:is(:disabled, .ids-button-disabled) > .ids-icon {
872
872
  color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-disabled);
873
873
  }
874
874
  .ids-button.ids-button-outlined.ids-button-dark {
@@ -904,12 +904,12 @@
904
904
  .ids-button.ids-button-outlined.ids-button-dark:active > .ids-icon {
905
905
  color: var(--ids-comp-button-outlined-color-fg-icon-dark-pressed);
906
906
  }
907
- .ids-button.ids-button-outlined.ids-button-dark:disabled {
907
+ .ids-button.ids-button-outlined.ids-button-dark:is(:disabled, .ids-button-disabled) {
908
908
  color: var(--ids-comp-button-outlined-color-fg-label-dark-disabled);
909
909
  background: var(--ids-comp-button-outlined-color-bg-dark-disabled);
910
910
  border-color: var(--ids-comp-button-outlined-color-border-dark-disabled);
911
911
  }
912
- .ids-button.ids-button-outlined.ids-button-dark:disabled > .ids-icon {
912
+ .ids-button.ids-button-outlined.ids-button-dark:is(:disabled, .ids-button-disabled) > .ids-icon {
913
913
  color: var(--ids-comp-button-outlined-color-fg-icon-dark-disabled);
914
914
  }
915
915
  .ids-button.ids-button-outlined.ids-button-surface {
@@ -945,12 +945,12 @@
945
945
  .ids-button.ids-button-outlined.ids-button-surface:active > .ids-icon {
946
946
  color: var(--ids-comp-button-outlined-color-fg-icon-surface-pressed);
947
947
  }
948
- .ids-button.ids-button-outlined.ids-button-surface:disabled {
948
+ .ids-button.ids-button-outlined.ids-button-surface:is(:disabled, .ids-button-disabled) {
949
949
  color: var(--ids-comp-button-outlined-color-fg-label-surface-disabled);
950
950
  background: var(--ids-comp-button-outlined-color-bg-surface-disabled);
951
951
  border-color: var(--ids-comp-button-outlined-color-border-surface-disabled);
952
952
  }
953
- .ids-button.ids-button-outlined.ids-button-surface:disabled > .ids-icon {
953
+ .ids-button.ids-button-outlined.ids-button-surface:is(:disabled, .ids-button-disabled) > .ids-icon {
954
954
  color: var(--ids-comp-button-outlined-color-fg-icon-surface-disabled);
955
955
  }
956
956
  .ids-button.ids-button-text.ids-button-primary {
@@ -986,12 +986,12 @@
986
986
  .ids-button.ids-button-text.ids-button-primary:active > .ids-icon {
987
987
  color: var(--ids-comp-button-text-color-fg-icon-primary-pressed);
988
988
  }
989
- .ids-button.ids-button-text.ids-button-primary:disabled {
989
+ .ids-button.ids-button-text.ids-button-primary:is(:disabled, .ids-button-disabled) {
990
990
  color: var(--ids-comp-button-text-color-fg-label-primary-disabled);
991
991
  background: var(--ids-comp-button-text-color-bg-primary-disabled);
992
992
  border-color: var(--ids-comp-button-text-color-border-primary-default);
993
993
  }
994
- .ids-button.ids-button-text.ids-button-primary:disabled > .ids-icon {
994
+ .ids-button.ids-button-text.ids-button-primary:is(:disabled, .ids-button-disabled) > .ids-icon {
995
995
  color: var(--ids-comp-button-text-color-fg-icon-primary-disabled);
996
996
  }
997
997
  .ids-button.ids-button-text.ids-button-secondary {
@@ -1027,12 +1027,12 @@
1027
1027
  .ids-button.ids-button-text.ids-button-secondary:active > .ids-icon {
1028
1028
  color: var(--ids-comp-button-text-color-fg-icon-secondary-pressed);
1029
1029
  }
1030
- .ids-button.ids-button-text.ids-button-secondary:disabled {
1030
+ .ids-button.ids-button-text.ids-button-secondary:is(:disabled, .ids-button-disabled) {
1031
1031
  color: var(--ids-comp-button-text-color-fg-label-secondary-disabled);
1032
1032
  background: var(--ids-comp-button-text-color-bg-secondary-disabled);
1033
1033
  border-color: var(--ids-comp-button-text-color-border-secondary-default);
1034
1034
  }
1035
- .ids-button.ids-button-text.ids-button-secondary:disabled > .ids-icon {
1035
+ .ids-button.ids-button-text.ids-button-secondary:is(:disabled, .ids-button-disabled) > .ids-icon {
1036
1036
  color: var(--ids-comp-button-text-color-fg-icon-secondary-disabled);
1037
1037
  }
1038
1038
  .ids-button.ids-button-text.ids-button-brand {
@@ -1068,12 +1068,12 @@
1068
1068
  .ids-button.ids-button-text.ids-button-brand:active > .ids-icon {
1069
1069
  color: var(--ids-comp-button-text-color-fg-icon-brand-pressed);
1070
1070
  }
1071
- .ids-button.ids-button-text.ids-button-brand:disabled {
1071
+ .ids-button.ids-button-text.ids-button-brand:is(:disabled, .ids-button-disabled) {
1072
1072
  color: var(--ids-comp-button-text-color-fg-label-brand-disabled);
1073
1073
  background: var(--ids-comp-button-text-color-bg-brand-disabled);
1074
1074
  border-color: var(--ids-comp-button-text-color-border-brand-default);
1075
1075
  }
1076
- .ids-button.ids-button-text.ids-button-brand:disabled > .ids-icon {
1076
+ .ids-button.ids-button-text.ids-button-brand:is(:disabled, .ids-button-disabled) > .ids-icon {
1077
1077
  color: var(--ids-comp-button-text-color-fg-icon-brand-disabled);
1078
1078
  }
1079
1079
  .ids-button.ids-button-text.ids-button-error {
@@ -1109,12 +1109,12 @@
1109
1109
  .ids-button.ids-button-text.ids-button-error:active > .ids-icon {
1110
1110
  color: var(--ids-comp-button-text-color-fg-icon-error-pressed);
1111
1111
  }
1112
- .ids-button.ids-button-text.ids-button-error:disabled {
1112
+ .ids-button.ids-button-text.ids-button-error:is(:disabled, .ids-button-disabled) {
1113
1113
  color: var(--ids-comp-button-text-color-fg-label-error-disabled);
1114
1114
  background: var(--ids-comp-button-text-color-bg-error-disabled);
1115
1115
  border-color: var(--ids-comp-button-text-color-border-error-default);
1116
1116
  }
1117
- .ids-button.ids-button-text.ids-button-error:disabled > .ids-icon {
1117
+ .ids-button.ids-button-text.ids-button-error:is(:disabled, .ids-button-disabled) > .ids-icon {
1118
1118
  color: var(--ids-comp-button-text-color-fg-icon-error-disabled);
1119
1119
  }
1120
1120
  .ids-button.ids-button-text.ids-button-success {
@@ -1150,12 +1150,12 @@
1150
1150
  .ids-button.ids-button-text.ids-button-success:active > .ids-icon {
1151
1151
  color: var(--ids-comp-button-text-color-fg-icon-success-pressed);
1152
1152
  }
1153
- .ids-button.ids-button-text.ids-button-success:disabled {
1153
+ .ids-button.ids-button-text.ids-button-success:is(:disabled, .ids-button-disabled) {
1154
1154
  color: var(--ids-comp-button-text-color-fg-label-success-disabled);
1155
1155
  background: var(--ids-comp-button-text-color-bg-success-disabled);
1156
1156
  border-color: var(--ids-comp-button-text-color-border-success-default);
1157
1157
  }
1158
- .ids-button.ids-button-text.ids-button-success:disabled > .ids-icon {
1158
+ .ids-button.ids-button-text.ids-button-success:is(:disabled, .ids-button-disabled) > .ids-icon {
1159
1159
  color: var(--ids-comp-button-text-color-fg-icon-success-disabled);
1160
1160
  }
1161
1161
  .ids-button.ids-button-text.ids-button-warning {
@@ -1191,12 +1191,12 @@
1191
1191
  .ids-button.ids-button-text.ids-button-warning:active > .ids-icon {
1192
1192
  color: var(--ids-comp-button-text-color-fg-icon-warning-pressed);
1193
1193
  }
1194
- .ids-button.ids-button-text.ids-button-warning:disabled {
1194
+ .ids-button.ids-button-text.ids-button-warning:is(:disabled, .ids-button-disabled) {
1195
1195
  color: var(--ids-comp-button-text-color-fg-label-warning-disabled);
1196
1196
  background: var(--ids-comp-button-text-color-bg-warning-disabled);
1197
1197
  border-color: var(--ids-comp-button-text-color-border-warning-default);
1198
1198
  }
1199
- .ids-button.ids-button-text.ids-button-warning:disabled > .ids-icon {
1199
+ .ids-button.ids-button-text.ids-button-warning:is(:disabled, .ids-button-disabled) > .ids-icon {
1200
1200
  color: var(--ids-comp-button-text-color-fg-icon-warning-disabled);
1201
1201
  }
1202
1202
  .ids-button.ids-button-text.ids-button-light {
@@ -1232,12 +1232,12 @@
1232
1232
  .ids-button.ids-button-text.ids-button-light:active > .ids-icon {
1233
1233
  color: var(--ids-comp-button-text-color-fg-icon-light-pressed);
1234
1234
  }
1235
- .ids-button.ids-button-text.ids-button-light:disabled {
1235
+ .ids-button.ids-button-text.ids-button-light:is(:disabled, .ids-button-disabled) {
1236
1236
  color: var(--ids-comp-button-text-color-fg-label-light-disabled);
1237
1237
  background: var(--ids-comp-button-text-color-bg-light-disabled);
1238
1238
  border-color: var(--ids-comp-button-text-color-border-light-default);
1239
1239
  }
1240
- .ids-button.ids-button-text.ids-button-light:disabled > .ids-icon {
1240
+ .ids-button.ids-button-text.ids-button-light:is(:disabled, .ids-button-disabled) > .ids-icon {
1241
1241
  color: var(--ids-comp-button-text-color-fg-icon-light-disabled);
1242
1242
  }
1243
1243
  .ids-button.ids-button-text.ids-button-light-fixed {
@@ -1273,12 +1273,12 @@
1273
1273
  .ids-button.ids-button-text.ids-button-light-fixed:active > .ids-icon {
1274
1274
  color: var(--ids-comp-button-text-color-fg-icon-light-fixed-pressed);
1275
1275
  }
1276
- .ids-button.ids-button-text.ids-button-light-fixed:disabled {
1276
+ .ids-button.ids-button-text.ids-button-light-fixed:is(:disabled, .ids-button-disabled) {
1277
1277
  color: var(--ids-comp-button-text-color-fg-label-light-fixed-disabled);
1278
1278
  background: var(--ids-comp-button-text-color-bg-light-fixed-disabled);
1279
1279
  border-color: var(--ids-comp-button-text-color-border-light-fixed-default);
1280
1280
  }
1281
- .ids-button.ids-button-text.ids-button-light-fixed:disabled > .ids-icon {
1281
+ .ids-button.ids-button-text.ids-button-light-fixed:is(:disabled, .ids-button-disabled) > .ids-icon {
1282
1282
  color: var(--ids-comp-button-text-color-fg-icon-light-fixed-disabled);
1283
1283
  }
1284
1284
  .ids-button.ids-button-text.ids-button-dark {
@@ -1314,12 +1314,12 @@
1314
1314
  .ids-button.ids-button-text.ids-button-dark:active > .ids-icon {
1315
1315
  color: var(--ids-comp-button-text-color-fg-icon-dark-pressed);
1316
1316
  }
1317
- .ids-button.ids-button-text.ids-button-dark:disabled {
1317
+ .ids-button.ids-button-text.ids-button-dark:is(:disabled, .ids-button-disabled) {
1318
1318
  color: var(--ids-comp-button-text-color-fg-label-dark-disabled);
1319
1319
  background: var(--ids-comp-button-text-color-bg-dark-disabled);
1320
1320
  border-color: var(--ids-comp-button-text-color-border-dark-default);
1321
1321
  }
1322
- .ids-button.ids-button-text.ids-button-dark:disabled > .ids-icon {
1322
+ .ids-button.ids-button-text.ids-button-dark:is(:disabled, .ids-button-disabled) > .ids-icon {
1323
1323
  color: var(--ids-comp-button-text-color-fg-icon-dark-disabled);
1324
1324
  }
1325
1325
  .ids-button.ids-button-text.ids-button-surface {
@@ -1355,11 +1355,11 @@
1355
1355
  .ids-button.ids-button-text.ids-button-surface:active > .ids-icon {
1356
1356
  color: var(--ids-comp-button-text-color-fg-icon-surface-pressed);
1357
1357
  }
1358
- .ids-button.ids-button-text.ids-button-surface:disabled {
1358
+ .ids-button.ids-button-text.ids-button-surface:is(:disabled, .ids-button-disabled) {
1359
1359
  color: var(--ids-comp-button-text-color-fg-label-surface-disabled);
1360
1360
  background: var(--ids-comp-button-text-color-bg-surface-disabled);
1361
1361
  border-color: var(--ids-comp-button-text-color-border-surface-default);
1362
1362
  }
1363
- .ids-button.ids-button-text.ids-button-surface:disabled > .ids-icon {
1363
+ .ids-button.ids-button-text.ids-button-surface:is(:disabled, .ids-button-disabled) > .ids-icon {
1364
1364
  color: var(--ids-comp-button-text-color-fg-icon-surface-disabled);
1365
1365
  }