@i-cell/ids-styles 0.0.40 → 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 +116 -44
  2. package/dist/button/button.min.css +1 -1
  3. package/dist/button/button.plugin.js +116 -44
  4. package/dist/components.css +136 -64
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +136 -64
  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 +2 -2
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,6 +289,14 @@
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:is(:disabled, .ids-button-disabled) {
293
+ color: var(--ids-comp-button-filled-color-fg-label-error-disabled);
294
+ background: var(--ids-comp-button-filled-color-bg-error-disabled);
295
+ border-color: var(--ids-comp-button-filled-color-border-error-disabled);
296
+ }
297
+ .ids-button.ids-button-filled.ids-button-error:is(:disabled, .ids-button-disabled) > .ids-icon {
298
+ color: var(--ids-comp-button-filled-color-fg-icon-error-disabled);
299
+ }
292
300
  .ids-button.ids-button-filled.ids-button-success {
293
301
  color: var(--ids-comp-button-filled-color-fg-label-success-default);
294
302
  background: var(--ids-comp-button-filled-color-bg-success-default);
@@ -322,6 +330,14 @@
322
330
  .ids-button.ids-button-filled.ids-button-success:active > .ids-icon {
323
331
  color: var(--ids-comp-button-filled-color-fg-icon-success-pressed);
324
332
  }
333
+ .ids-button.ids-button-filled.ids-button-success:is(:disabled, .ids-button-disabled) {
334
+ color: var(--ids-comp-button-filled-color-fg-label-success-disabled);
335
+ background: var(--ids-comp-button-filled-color-bg-success-disabled);
336
+ border-color: var(--ids-comp-button-filled-color-border-success-disabled);
337
+ }
338
+ .ids-button.ids-button-filled.ids-button-success:is(:disabled, .ids-button-disabled) > .ids-icon {
339
+ color: var(--ids-comp-button-filled-color-fg-icon-success-disabled);
340
+ }
325
341
  .ids-button.ids-button-filled.ids-button-warning {
326
342
  color: var(--ids-comp-button-filled-color-fg-label-warning-default);
327
343
  background: var(--ids-comp-button-filled-color-bg-warning-default);
@@ -355,6 +371,14 @@
355
371
  .ids-button.ids-button-filled.ids-button-warning:active > .ids-icon {
356
372
  color: var(--ids-comp-button-filled-color-fg-icon-warning-pressed);
357
373
  }
374
+ .ids-button.ids-button-filled.ids-button-warning:is(:disabled, .ids-button-disabled) {
375
+ color: var(--ids-comp-button-filled-color-fg-label-warning-disabled);
376
+ background: var(--ids-comp-button-filled-color-bg-warning-disabled);
377
+ border-color: var(--ids-comp-button-filled-color-border-warning-disabled);
378
+ }
379
+ .ids-button.ids-button-filled.ids-button-warning:is(:disabled, .ids-button-disabled) > .ids-icon {
380
+ color: var(--ids-comp-button-filled-color-fg-icon-warning-disabled);
381
+ }
358
382
  .ids-button.ids-button-filled.ids-button-light {
359
383
  color: var(--ids-comp-button-filled-color-fg-label-light-default);
360
384
  background: var(--ids-comp-button-filled-color-bg-light-default);
@@ -388,12 +412,12 @@
388
412
  .ids-button.ids-button-filled.ids-button-light:active > .ids-icon {
389
413
  color: var(--ids-comp-button-filled-color-fg-icon-light-pressed);
390
414
  }
391
- .ids-button.ids-button-filled.ids-button-light:disabled {
415
+ .ids-button.ids-button-filled.ids-button-light:is(:disabled, .ids-button-disabled) {
392
416
  color: var(--ids-comp-button-filled-color-fg-label-light-disabled);
393
417
  background: var(--ids-comp-button-filled-color-bg-light-disabled);
394
418
  border-color: var(--ids-comp-button-filled-color-border-light-disabled);
395
419
  }
396
- .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 {
397
421
  color: var(--ids-comp-button-filled-color-fg-icon-light-disabled);
398
422
  }
399
423
  .ids-button.ids-button-filled.ids-button-light-fixed {
@@ -429,12 +453,12 @@
429
453
  .ids-button.ids-button-filled.ids-button-light-fixed:active > .ids-icon {
430
454
  color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-pressed);
431
455
  }
432
- .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) {
433
457
  color: var(--ids-comp-button-filled-color-fg-label-light-fixed-disabled);
434
458
  background: var(--ids-comp-button-filled-color-bg-light-fixed-disabled);
435
459
  border-color: var(--ids-comp-button-filled-color-border-light-fixed-disabled);
436
460
  }
437
- .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 {
438
462
  color: var(--ids-comp-button-filled-color-fg-icon-light-fixed-disabled);
439
463
  }
440
464
  .ids-button.ids-button-filled.ids-button-dark {
@@ -470,12 +494,12 @@
470
494
  .ids-button.ids-button-filled.ids-button-dark:active > .ids-icon {
471
495
  color: var(--ids-comp-button-filled-color-fg-icon-dark-pressed);
472
496
  }
473
- .ids-button.ids-button-filled.ids-button-dark:disabled {
497
+ .ids-button.ids-button-filled.ids-button-dark:is(:disabled, .ids-button-disabled) {
474
498
  color: var(--ids-comp-button-filled-color-fg-label-dark-disabled);
475
499
  background: var(--ids-comp-button-filled-color-bg-dark-disabled);
476
500
  border-color: var(--ids-comp-button-filled-color-border-dark-disabled);
477
501
  }
478
- .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 {
479
503
  color: var(--ids-comp-button-filled-color-fg-icon-dark-disabled);
480
504
  }
481
505
  .ids-button.ids-button-filled.ids-button-surface {
@@ -511,12 +535,12 @@
511
535
  .ids-button.ids-button-filled.ids-button-surface:active > .ids-icon {
512
536
  color: var(--ids-comp-button-filled-color-fg-icon-surface-pressed);
513
537
  }
514
- .ids-button.ids-button-filled.ids-button-surface:disabled {
538
+ .ids-button.ids-button-filled.ids-button-surface:is(:disabled, .ids-button-disabled) {
515
539
  color: var(--ids-comp-button-filled-color-fg-label-surface-disabled);
516
540
  background: var(--ids-comp-button-filled-color-bg-surface-disabled);
517
541
  border-color: var(--ids-comp-button-filled-color-border-surface-disabled);
518
542
  }
519
- .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 {
520
544
  color: var(--ids-comp-button-filled-color-fg-icon-surface-disabled);
521
545
  }
522
546
  .ids-button.ids-button-outlined.ids-button-primary {
@@ -552,12 +576,12 @@
552
576
  .ids-button.ids-button-outlined.ids-button-primary:active > .ids-icon {
553
577
  color: var(--ids-comp-button-outlined-color-fg-icon-primary-pressed);
554
578
  }
555
- .ids-button.ids-button-outlined.ids-button-primary:disabled {
579
+ .ids-button.ids-button-outlined.ids-button-primary:is(:disabled, .ids-button-disabled) {
556
580
  color: var(--ids-comp-button-outlined-color-fg-label-primary-disabled);
557
581
  background: var(--ids-comp-button-outlined-color-bg-primary-disabled);
558
582
  border-color: var(--ids-comp-button-outlined-color-border-primary-disabled);
559
583
  }
560
- .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 {
561
585
  color: var(--ids-comp-button-outlined-color-fg-icon-primary-disabled);
562
586
  }
563
587
  .ids-button.ids-button-outlined.ids-button-secondary {
@@ -593,12 +617,12 @@
593
617
  .ids-button.ids-button-outlined.ids-button-secondary:active > .ids-icon {
594
618
  color: var(--ids-comp-button-outlined-color-fg-icon-secondary-pressed);
595
619
  }
596
- .ids-button.ids-button-outlined.ids-button-secondary:disabled {
620
+ .ids-button.ids-button-outlined.ids-button-secondary:is(:disabled, .ids-button-disabled) {
597
621
  color: var(--ids-comp-button-outlined-color-fg-label-secondary-disabled);
598
622
  background: var(--ids-comp-button-outlined-color-bg-secondary-disabled);
599
623
  border-color: var(--ids-comp-button-outlined-color-border-secondary-disabled);
600
624
  }
601
- .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 {
602
626
  color: var(--ids-comp-button-outlined-color-fg-icon-secondary-disabled);
603
627
  }
604
628
  .ids-button.ids-button-outlined.ids-button-brand {
@@ -634,12 +658,12 @@
634
658
  .ids-button.ids-button-outlined.ids-button-brand:active > .ids-icon {
635
659
  color: var(--ids-comp-button-outlined-color-fg-icon-brand-pressed);
636
660
  }
637
- .ids-button.ids-button-outlined.ids-button-brand:disabled {
661
+ .ids-button.ids-button-outlined.ids-button-brand:is(:disabled, .ids-button-disabled) {
638
662
  color: var(--ids-comp-button-outlined-color-fg-label-brand-disabled);
639
663
  background: var(--ids-comp-button-outlined-color-bg-brand-disabled);
640
664
  border-color: var(--ids-comp-button-outlined-color-border-brand-disabled);
641
665
  }
642
- .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 {
643
667
  color: var(--ids-comp-button-outlined-color-fg-icon-brand-disabled);
644
668
  }
645
669
  .ids-button.ids-button-outlined.ids-button-error {
@@ -675,6 +699,14 @@
675
699
  .ids-button.ids-button-outlined.ids-button-error:active > .ids-icon {
676
700
  color: var(--ids-comp-button-outlined-color-fg-icon-error-pressed);
677
701
  }
702
+ .ids-button.ids-button-outlined.ids-button-error:is(:disabled, .ids-button-disabled) {
703
+ color: var(--ids-comp-button-outlined-color-fg-label-error-disabled);
704
+ background: var(--ids-comp-button-outlined-color-bg-error-disabled);
705
+ border-color: var(--ids-comp-button-outlined-color-border-error-disabled);
706
+ }
707
+ .ids-button.ids-button-outlined.ids-button-error:is(:disabled, .ids-button-disabled) > .ids-icon {
708
+ color: var(--ids-comp-button-outlined-color-fg-icon-error-disabled);
709
+ }
678
710
  .ids-button.ids-button-outlined.ids-button-success {
679
711
  color: var(--ids-comp-button-outlined-color-fg-label-success-default);
680
712
  background: var(--ids-comp-button-outlined-color-bg-success-default);
@@ -708,6 +740,14 @@
708
740
  .ids-button.ids-button-outlined.ids-button-success:active > .ids-icon {
709
741
  color: var(--ids-comp-button-outlined-color-fg-icon-success-pressed);
710
742
  }
743
+ .ids-button.ids-button-outlined.ids-button-success:is(:disabled, .ids-button-disabled) {
744
+ color: var(--ids-comp-button-outlined-color-fg-label-success-disabled);
745
+ background: var(--ids-comp-button-outlined-color-bg-success-disabled);
746
+ border-color: var(--ids-comp-button-outlined-color-border-success-disabled);
747
+ }
748
+ .ids-button.ids-button-outlined.ids-button-success:is(:disabled, .ids-button-disabled) > .ids-icon {
749
+ color: var(--ids-comp-button-outlined-color-fg-icon-success-disabled);
750
+ }
711
751
  .ids-button.ids-button-outlined.ids-button-warning {
712
752
  color: var(--ids-comp-button-outlined-color-fg-label-warning-default);
713
753
  background: var(--ids-comp-button-outlined-color-bg-warning-default);
@@ -741,6 +781,14 @@
741
781
  .ids-button.ids-button-outlined.ids-button-warning:active > .ids-icon {
742
782
  color: var(--ids-comp-button-outlined-color-fg-icon-warning-pressed);
743
783
  }
784
+ .ids-button.ids-button-outlined.ids-button-warning:is(:disabled, .ids-button-disabled) {
785
+ color: var(--ids-comp-button-outlined-color-fg-label-warning-disabled);
786
+ background: var(--ids-comp-button-outlined-color-bg-warning-disabled);
787
+ border-color: var(--ids-comp-button-outlined-color-border-warning-disabled);
788
+ }
789
+ .ids-button.ids-button-outlined.ids-button-warning:is(:disabled, .ids-button-disabled) > .ids-icon {
790
+ color: var(--ids-comp-button-outlined-color-fg-icon-warning-disabled);
791
+ }
744
792
  .ids-button.ids-button-outlined.ids-button-light {
745
793
  color: var(--ids-comp-button-outlined-color-fg-label-light-default);
746
794
  background: var(--ids-comp-button-outlined-color-bg-light-default);
@@ -774,12 +822,12 @@
774
822
  .ids-button.ids-button-outlined.ids-button-light:active > .ids-icon {
775
823
  color: var(--ids-comp-button-outlined-color-fg-icon-light-pressed);
776
824
  }
777
- .ids-button.ids-button-outlined.ids-button-light:disabled {
825
+ .ids-button.ids-button-outlined.ids-button-light:is(:disabled, .ids-button-disabled) {
778
826
  color: var(--ids-comp-button-outlined-color-fg-label-light-disabled);
779
827
  background: var(--ids-comp-button-outlined-color-bg-light-disabled);
780
828
  border-color: var(--ids-comp-button-outlined-color-border-light-disabled);
781
829
  }
782
- .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 {
783
831
  color: var(--ids-comp-button-outlined-color-fg-icon-light-disabled);
784
832
  }
785
833
  .ids-button.ids-button-outlined.ids-button-light-fixed {
@@ -815,12 +863,12 @@
815
863
  .ids-button.ids-button-outlined.ids-button-light-fixed:active > .ids-icon {
816
864
  color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-pressed);
817
865
  }
818
- .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) {
819
867
  color: var(--ids-comp-button-outlined-color-fg-label-light-fixed-disabled);
820
868
  background: var(--ids-comp-button-outlined-color-bg-light-fixed-disabled);
821
869
  border-color: var(--ids-comp-button-outlined-color-border-light-fixed-disabled);
822
870
  }
823
- .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 {
824
872
  color: var(--ids-comp-button-outlined-color-fg-icon-light-fixed-disabled);
825
873
  }
826
874
  .ids-button.ids-button-outlined.ids-button-dark {
@@ -856,12 +904,12 @@
856
904
  .ids-button.ids-button-outlined.ids-button-dark:active > .ids-icon {
857
905
  color: var(--ids-comp-button-outlined-color-fg-icon-dark-pressed);
858
906
  }
859
- .ids-button.ids-button-outlined.ids-button-dark:disabled {
907
+ .ids-button.ids-button-outlined.ids-button-dark:is(:disabled, .ids-button-disabled) {
860
908
  color: var(--ids-comp-button-outlined-color-fg-label-dark-disabled);
861
909
  background: var(--ids-comp-button-outlined-color-bg-dark-disabled);
862
910
  border-color: var(--ids-comp-button-outlined-color-border-dark-disabled);
863
911
  }
864
- .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 {
865
913
  color: var(--ids-comp-button-outlined-color-fg-icon-dark-disabled);
866
914
  }
867
915
  .ids-button.ids-button-outlined.ids-button-surface {
@@ -897,12 +945,12 @@
897
945
  .ids-button.ids-button-outlined.ids-button-surface:active > .ids-icon {
898
946
  color: var(--ids-comp-button-outlined-color-fg-icon-surface-pressed);
899
947
  }
900
- .ids-button.ids-button-outlined.ids-button-surface:disabled {
948
+ .ids-button.ids-button-outlined.ids-button-surface:is(:disabled, .ids-button-disabled) {
901
949
  color: var(--ids-comp-button-outlined-color-fg-label-surface-disabled);
902
950
  background: var(--ids-comp-button-outlined-color-bg-surface-disabled);
903
951
  border-color: var(--ids-comp-button-outlined-color-border-surface-disabled);
904
952
  }
905
- .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 {
906
954
  color: var(--ids-comp-button-outlined-color-fg-icon-surface-disabled);
907
955
  }
908
956
  .ids-button.ids-button-text.ids-button-primary {
@@ -938,12 +986,12 @@
938
986
  .ids-button.ids-button-text.ids-button-primary:active > .ids-icon {
939
987
  color: var(--ids-comp-button-text-color-fg-icon-primary-pressed);
940
988
  }
941
- .ids-button.ids-button-text.ids-button-primary:disabled {
989
+ .ids-button.ids-button-text.ids-button-primary:is(:disabled, .ids-button-disabled) {
942
990
  color: var(--ids-comp-button-text-color-fg-label-primary-disabled);
943
991
  background: var(--ids-comp-button-text-color-bg-primary-disabled);
944
992
  border-color: var(--ids-comp-button-text-color-border-primary-default);
945
993
  }
946
- .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 {
947
995
  color: var(--ids-comp-button-text-color-fg-icon-primary-disabled);
948
996
  }
949
997
  .ids-button.ids-button-text.ids-button-secondary {
@@ -979,12 +1027,12 @@
979
1027
  .ids-button.ids-button-text.ids-button-secondary:active > .ids-icon {
980
1028
  color: var(--ids-comp-button-text-color-fg-icon-secondary-pressed);
981
1029
  }
982
- .ids-button.ids-button-text.ids-button-secondary:disabled {
1030
+ .ids-button.ids-button-text.ids-button-secondary:is(:disabled, .ids-button-disabled) {
983
1031
  color: var(--ids-comp-button-text-color-fg-label-secondary-disabled);
984
1032
  background: var(--ids-comp-button-text-color-bg-secondary-disabled);
985
1033
  border-color: var(--ids-comp-button-text-color-border-secondary-default);
986
1034
  }
987
- .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 {
988
1036
  color: var(--ids-comp-button-text-color-fg-icon-secondary-disabled);
989
1037
  }
990
1038
  .ids-button.ids-button-text.ids-button-brand {
@@ -1020,12 +1068,12 @@
1020
1068
  .ids-button.ids-button-text.ids-button-brand:active > .ids-icon {
1021
1069
  color: var(--ids-comp-button-text-color-fg-icon-brand-pressed);
1022
1070
  }
1023
- .ids-button.ids-button-text.ids-button-brand:disabled {
1071
+ .ids-button.ids-button-text.ids-button-brand:is(:disabled, .ids-button-disabled) {
1024
1072
  color: var(--ids-comp-button-text-color-fg-label-brand-disabled);
1025
1073
  background: var(--ids-comp-button-text-color-bg-brand-disabled);
1026
1074
  border-color: var(--ids-comp-button-text-color-border-brand-default);
1027
1075
  }
1028
- .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 {
1029
1077
  color: var(--ids-comp-button-text-color-fg-icon-brand-disabled);
1030
1078
  }
1031
1079
  .ids-button.ids-button-text.ids-button-error {
@@ -1061,6 +1109,14 @@
1061
1109
  .ids-button.ids-button-text.ids-button-error:active > .ids-icon {
1062
1110
  color: var(--ids-comp-button-text-color-fg-icon-error-pressed);
1063
1111
  }
1112
+ .ids-button.ids-button-text.ids-button-error:is(:disabled, .ids-button-disabled) {
1113
+ color: var(--ids-comp-button-text-color-fg-label-error-disabled);
1114
+ background: var(--ids-comp-button-text-color-bg-error-disabled);
1115
+ border-color: var(--ids-comp-button-text-color-border-error-default);
1116
+ }
1117
+ .ids-button.ids-button-text.ids-button-error:is(:disabled, .ids-button-disabled) > .ids-icon {
1118
+ color: var(--ids-comp-button-text-color-fg-icon-error-disabled);
1119
+ }
1064
1120
  .ids-button.ids-button-text.ids-button-success {
1065
1121
  color: var(--ids-comp-button-text-color-fg-label-success-default);
1066
1122
  background: var(--ids-comp-button-text-color-bg-success-default);
@@ -1094,6 +1150,14 @@
1094
1150
  .ids-button.ids-button-text.ids-button-success:active > .ids-icon {
1095
1151
  color: var(--ids-comp-button-text-color-fg-icon-success-pressed);
1096
1152
  }
1153
+ .ids-button.ids-button-text.ids-button-success:is(:disabled, .ids-button-disabled) {
1154
+ color: var(--ids-comp-button-text-color-fg-label-success-disabled);
1155
+ background: var(--ids-comp-button-text-color-bg-success-disabled);
1156
+ border-color: var(--ids-comp-button-text-color-border-success-default);
1157
+ }
1158
+ .ids-button.ids-button-text.ids-button-success:is(:disabled, .ids-button-disabled) > .ids-icon {
1159
+ color: var(--ids-comp-button-text-color-fg-icon-success-disabled);
1160
+ }
1097
1161
  .ids-button.ids-button-text.ids-button-warning {
1098
1162
  color: var(--ids-comp-button-text-color-fg-label-warning-default);
1099
1163
  background: var(--ids-comp-button-text-color-bg-warning-default);
@@ -1127,6 +1191,14 @@
1127
1191
  .ids-button.ids-button-text.ids-button-warning:active > .ids-icon {
1128
1192
  color: var(--ids-comp-button-text-color-fg-icon-warning-pressed);
1129
1193
  }
1194
+ .ids-button.ids-button-text.ids-button-warning:is(:disabled, .ids-button-disabled) {
1195
+ color: var(--ids-comp-button-text-color-fg-label-warning-disabled);
1196
+ background: var(--ids-comp-button-text-color-bg-warning-disabled);
1197
+ border-color: var(--ids-comp-button-text-color-border-warning-default);
1198
+ }
1199
+ .ids-button.ids-button-text.ids-button-warning:is(:disabled, .ids-button-disabled) > .ids-icon {
1200
+ color: var(--ids-comp-button-text-color-fg-icon-warning-disabled);
1201
+ }
1130
1202
  .ids-button.ids-button-text.ids-button-light {
1131
1203
  color: var(--ids-comp-button-text-color-fg-label-light-default);
1132
1204
  background: var(--ids-comp-button-text-color-bg-light-default);
@@ -1160,12 +1232,12 @@
1160
1232
  .ids-button.ids-button-text.ids-button-light:active > .ids-icon {
1161
1233
  color: var(--ids-comp-button-text-color-fg-icon-light-pressed);
1162
1234
  }
1163
- .ids-button.ids-button-text.ids-button-light:disabled {
1235
+ .ids-button.ids-button-text.ids-button-light:is(:disabled, .ids-button-disabled) {
1164
1236
  color: var(--ids-comp-button-text-color-fg-label-light-disabled);
1165
1237
  background: var(--ids-comp-button-text-color-bg-light-disabled);
1166
1238
  border-color: var(--ids-comp-button-text-color-border-light-default);
1167
1239
  }
1168
- .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 {
1169
1241
  color: var(--ids-comp-button-text-color-fg-icon-light-disabled);
1170
1242
  }
1171
1243
  .ids-button.ids-button-text.ids-button-light-fixed {
@@ -1201,12 +1273,12 @@
1201
1273
  .ids-button.ids-button-text.ids-button-light-fixed:active > .ids-icon {
1202
1274
  color: var(--ids-comp-button-text-color-fg-icon-light-fixed-pressed);
1203
1275
  }
1204
- .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) {
1205
1277
  color: var(--ids-comp-button-text-color-fg-label-light-fixed-disabled);
1206
1278
  background: var(--ids-comp-button-text-color-bg-light-fixed-disabled);
1207
1279
  border-color: var(--ids-comp-button-text-color-border-light-fixed-default);
1208
1280
  }
1209
- .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 {
1210
1282
  color: var(--ids-comp-button-text-color-fg-icon-light-fixed-disabled);
1211
1283
  }
1212
1284
  .ids-button.ids-button-text.ids-button-dark {
@@ -1242,12 +1314,12 @@
1242
1314
  .ids-button.ids-button-text.ids-button-dark:active > .ids-icon {
1243
1315
  color: var(--ids-comp-button-text-color-fg-icon-dark-pressed);
1244
1316
  }
1245
- .ids-button.ids-button-text.ids-button-dark:disabled {
1317
+ .ids-button.ids-button-text.ids-button-dark:is(:disabled, .ids-button-disabled) {
1246
1318
  color: var(--ids-comp-button-text-color-fg-label-dark-disabled);
1247
1319
  background: var(--ids-comp-button-text-color-bg-dark-disabled);
1248
1320
  border-color: var(--ids-comp-button-text-color-border-dark-default);
1249
1321
  }
1250
- .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 {
1251
1323
  color: var(--ids-comp-button-text-color-fg-icon-dark-disabled);
1252
1324
  }
1253
1325
  .ids-button.ids-button-text.ids-button-surface {
@@ -1283,11 +1355,11 @@
1283
1355
  .ids-button.ids-button-text.ids-button-surface:active > .ids-icon {
1284
1356
  color: var(--ids-comp-button-text-color-fg-icon-surface-pressed);
1285
1357
  }
1286
- .ids-button.ids-button-text.ids-button-surface:disabled {
1358
+ .ids-button.ids-button-text.ids-button-surface:is(:disabled, .ids-button-disabled) {
1287
1359
  color: var(--ids-comp-button-text-color-fg-label-surface-disabled);
1288
1360
  background: var(--ids-comp-button-text-color-bg-surface-disabled);
1289
1361
  border-color: var(--ids-comp-button-text-color-border-surface-default);
1290
1362
  }
1291
- .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 {
1292
1364
  color: var(--ids-comp-button-text-color-fg-icon-surface-disabled);
1293
1365
  }