@ptsecurity/mosaic 15.3.2 → 15.4.1

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 (94) hide show
  1. package/_theming.scss +675 -42
  2. package/_visual.scss +132 -42
  3. package/button/button.component.d.ts +1 -0
  4. package/button-toggle/_button-toggle-theme.scss +92 -0
  5. package/button-toggle/button-toggle.component.d.ts +6 -2
  6. package/button-toggle/button-toggle.module.d.ts +2 -1
  7. package/button-toggle/button-toggle.scss +109 -81
  8. package/core/styles/_mosaic-theme.scss +6 -0
  9. package/core/styles/theming/_components-theming.scss +92 -0
  10. package/core/utils/data-size/config.d.ts +20 -0
  11. package/core/utils/data-size/data-size.pipe.d.ts +13 -0
  12. package/core/utils/data-size/index.d.ts +3 -0
  13. package/core/utils/data-size/size.d.ts +16 -0
  14. package/core/utils/public-api.d.ts +1 -0
  15. package/ellipsis-center/ellipsis-center.directive.d.ts +27 -0
  16. package/ellipsis-center/index.d.ts +1 -0
  17. package/ellipsis-center/public-api.d.ts +1 -0
  18. package/esm2020/button/button.component.mjs +9 -7
  19. package/esm2020/button-toggle/button-toggle.component.mjs +28 -9
  20. package/esm2020/button-toggle/button-toggle.module.mjs +5 -4
  21. package/esm2020/core/utils/data-size/config.mjs +22 -0
  22. package/esm2020/core/utils/data-size/data-size.pipe.mjs +32 -0
  23. package/esm2020/core/utils/data-size/index.mjs +4 -0
  24. package/esm2020/core/utils/data-size/size.mjs +50 -0
  25. package/esm2020/core/utils/public-api.mjs +2 -1
  26. package/esm2020/core/version.mjs +2 -2
  27. package/esm2020/ellipsis-center/ellipsis-center.directive.mjs +106 -0
  28. package/esm2020/ellipsis-center/index.mjs +2 -0
  29. package/esm2020/ellipsis-center/ptsecurity-mosaic-ellipsis-center.mjs +5 -0
  30. package/esm2020/ellipsis-center/public-api.mjs +2 -0
  31. package/esm2020/file-upload/file-drop.mjs +43 -0
  32. package/esm2020/file-upload/file-upload.mjs +4 -0
  33. package/esm2020/file-upload/file-upload.module.mjs +66 -0
  34. package/esm2020/file-upload/index.mjs +2 -0
  35. package/esm2020/file-upload/multiple-file-upload.component.mjs +161 -0
  36. package/esm2020/file-upload/ptsecurity-mosaic-file-upload.mjs +5 -0
  37. package/esm2020/file-upload/public-api.mjs +6 -0
  38. package/esm2020/file-upload/single-file-upload.component.mjs +130 -0
  39. package/esm2020/select/select.component.mjs +5 -5
  40. package/esm2020/timezone/timezone-select.component.mjs +2 -2
  41. package/esm2020/tree-select/tree-select.component.mjs +8 -5
  42. package/fesm2015/ptsecurity-mosaic-button-toggle.mjs +31 -11
  43. package/fesm2015/ptsecurity-mosaic-button-toggle.mjs.map +1 -1
  44. package/fesm2015/ptsecurity-mosaic-button.mjs +9 -7
  45. package/fesm2015/ptsecurity-mosaic-button.mjs.map +1 -1
  46. package/fesm2015/ptsecurity-mosaic-core.mjs +101 -2
  47. package/fesm2015/ptsecurity-mosaic-core.mjs.map +1 -1
  48. package/fesm2015/ptsecurity-mosaic-ellipsis-center.mjs +113 -0
  49. package/fesm2015/ptsecurity-mosaic-ellipsis-center.mjs.map +1 -0
  50. package/fesm2015/ptsecurity-mosaic-file-upload.mjs +392 -0
  51. package/fesm2015/ptsecurity-mosaic-file-upload.mjs.map +1 -0
  52. package/fesm2015/ptsecurity-mosaic-select.mjs +4 -4
  53. package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
  54. package/fesm2015/ptsecurity-mosaic-timezone.mjs +2 -2
  55. package/fesm2015/ptsecurity-mosaic-timezone.mjs.map +1 -1
  56. package/fesm2015/ptsecurity-mosaic-tree-select.mjs +7 -4
  57. package/fesm2015/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  58. package/fesm2020/ptsecurity-mosaic-button-toggle.mjs +31 -11
  59. package/fesm2020/ptsecurity-mosaic-button-toggle.mjs.map +1 -1
  60. package/fesm2020/ptsecurity-mosaic-button.mjs +9 -7
  61. package/fesm2020/ptsecurity-mosaic-button.mjs.map +1 -1
  62. package/fesm2020/ptsecurity-mosaic-core.mjs +101 -2
  63. package/fesm2020/ptsecurity-mosaic-core.mjs.map +1 -1
  64. package/fesm2020/ptsecurity-mosaic-ellipsis-center.mjs +111 -0
  65. package/fesm2020/ptsecurity-mosaic-ellipsis-center.mjs.map +1 -0
  66. package/fesm2020/ptsecurity-mosaic-file-upload.mjs +388 -0
  67. package/fesm2020/ptsecurity-mosaic-file-upload.mjs.map +1 -0
  68. package/fesm2020/ptsecurity-mosaic-select.mjs +4 -4
  69. package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
  70. package/fesm2020/ptsecurity-mosaic-timezone.mjs +2 -2
  71. package/fesm2020/ptsecurity-mosaic-timezone.mjs.map +1 -1
  72. package/fesm2020/ptsecurity-mosaic-tree-select.mjs +7 -4
  73. package/fesm2020/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  74. package/file-upload/README.md +0 -0
  75. package/file-upload/_file-upload-theme.scss +174 -0
  76. package/file-upload/file-drop.d.ts +11 -0
  77. package/file-upload/file-upload.d.ts +22 -0
  78. package/file-upload/file-upload.module.d.ts +18 -0
  79. package/file-upload/file-upload.scss +46 -0
  80. package/file-upload/index.d.ts +1 -0
  81. package/file-upload/multiple-file-upload.component.d.ts +51 -0
  82. package/file-upload/multiple-file-upload.component.scss +148 -0
  83. package/file-upload/public-api.d.ts +5 -0
  84. package/file-upload/single-file-upload.component.d.ts +34 -0
  85. package/file-upload/single-file-upload.component.scss +60 -0
  86. package/package.json +18 -2
  87. package/prebuilt-themes/dark-theme.css +1 -1
  88. package/prebuilt-themes/default-theme.css +1 -1
  89. package/select/_select-theme.scss +6 -0
  90. package/select/select.component.d.ts +1 -1
  91. package/select/select.scss +13 -0
  92. package/tree-select/_tree-select-theme.scss +6 -0
  93. package/tree-select/tree-select.component.d.ts +2 -2
  94. package/tree-select/tree-select.scss +13 -0
package/_theming.scss CHANGED
@@ -155,7 +155,7 @@ $light-color-scheme-states-focused-color-error: #db3c55;
155
155
  $light-color-scheme-states-selected-color: #e7f1ff;
156
156
  $light-color-scheme-states-pressed-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
157
157
  $light-color-scheme-states-disabled-opacity: 0.3;
158
- $dark-color-scheme-primary-default: #0059b8;
158
+ $dark-color-scheme-primary-default: #0374eb;
159
159
  $dark-color-scheme-secondary-default: #515e69;
160
160
  $dark-color-scheme-error-default: #b9023a;
161
161
  $dark-color-scheme-info-default: #0c6579;
@@ -219,7 +219,7 @@ $palette-blue-40: #eff6ff;
219
219
  $palette-blue-60: #e7f1ff;
220
220
  $palette-blue-100: #c8dfff;
221
221
  $palette-blue-200: #a2c7fe;
222
- $palette-blue-300: #5697ff;
222
+ $palette-blue-300: #7fb1ff;
223
223
  $palette-blue-400: #4187ff;
224
224
  $palette-blue-500: #0374eb;
225
225
  $palette-blue-560: #0059b8;
@@ -518,13 +518,13 @@ $badge-dark-color-scheme-solid-error-border: #b9023a;
518
518
  $badge-dark-color-scheme-solid-error-color: white;
519
519
  $badge-dark-color-scheme-solid-transparent-background: transparent;
520
520
  $badge-dark-color-scheme-solid-transparent-border: #515e69;
521
- $badge-dark-color-scheme-solid-transparent-color: white;
521
+ $badge-dark-color-scheme-solid-transparent-color: #d7dee4;
522
522
  $badge-dark-color-scheme-solid-light-background: #7f8c98;
523
523
  $badge-dark-color-scheme-solid-light-border: #7f8c98;
524
- $badge-dark-color-scheme-solid-light-color: white;
524
+ $badge-dark-color-scheme-solid-light-color: #d7dee4;
525
525
  $badge-dark-color-scheme-solid-secondary-background: #515e69;
526
526
  $badge-dark-color-scheme-solid-secondary-border: #515e69;
527
- $badge-dark-color-scheme-solid-secondary-color: white;
527
+ $badge-dark-color-scheme-solid-secondary-color: #d7dee4;
528
528
  $badge-size-default-height: 24px;
529
529
  $badge-size-default-min-width: 10px;
530
530
  $badge-size-default-padding: 0 8px;
@@ -541,9 +541,41 @@ $badge-font-default-mono: caption-mono;
541
541
  $badge-font-mini-default: extra-small-text;
542
542
  $badge-font-mini-caps: extra-small-text-caps;
543
543
  $badge-font-mini-mono: extra-small-text-mono;
544
- $button-toggle-size-border-size: 1px;
545
- $button-toggle-size-border-radius: 4px;
546
- $button-toggle-size-border-siblings-radius: 0;
544
+ $button-toggle-group-light-color-scheme-background: #d7dee4;
545
+ $button-toggle-group-light-color-scheme-border: #d7dee4;
546
+ $button-toggle-group-light-color-scheme-states-disabled-opacity: 0.3;
547
+ $button-toggle-group-dark-color-scheme-background: #515e69;
548
+ $button-toggle-group-dark-color-scheme-border: #515e69;
549
+ $button-toggle-group-dark-color-scheme-states-disabled-opacity: 0.45;
550
+ $button-toggle-group-size-height: 32px;
551
+ $button-toggle-group-size-border-width: 1px;
552
+ $button-toggle-group-size-border-radius: 4px;
553
+ $button-toggle-group-size-padding: 1px;
554
+ $button-toggle-light-color-scheme-color: #19252f;
555
+ $button-toggle-light-color-scheme-icon: #8c99a5;
556
+ $button-toggle-light-color-scheme-states-disabled-opacity: 0.3;
557
+ $button-toggle-light-color-scheme-states-hover-background: rgba(black, 0.05);
558
+ $button-toggle-light-color-scheme-states-hover-icon: #6d7a86;
559
+ $button-toggle-light-color-scheme-states-active-background: rgba(black, 0.1);
560
+ $button-toggle-light-color-scheme-states-active-icon: #434f5a;
561
+ $button-toggle-light-color-scheme-states-pressed-background: white;
562
+ $button-toggle-light-color-scheme-states-pressed-icon: #434f5a;
563
+ $button-toggle-dark-color-scheme-color: #f2f5f9;
564
+ $button-toggle-dark-color-scheme-icon: #8c99a5;
565
+ $button-toggle-dark-color-scheme-states-disabled-opacity: 0.45;
566
+ $button-toggle-dark-color-scheme-states-hover-background: rgba(white, 0.05);
567
+ $button-toggle-dark-color-scheme-states-hover-icon: #6d7a86;
568
+ $button-toggle-dark-color-scheme-states-active-background: rgba(white, 0.1);
569
+ $button-toggle-dark-color-scheme-states-active-icon: #bdc7d1;
570
+ $button-toggle-dark-color-scheme-states-pressed-background: #19252f;
571
+ $button-toggle-dark-color-scheme-states-pressed-icon: #bdc7d1;
572
+ $button-toggle-size-border-width: 1px;
573
+ $button-toggle-size-border-radius: 2px;
574
+ $button-toggle-size-horizontal-padding: 12px;
575
+ $button-toggle-size-min-width: 40px;
576
+ $button-toggle-size-left-icon-padding: 6px;
577
+ $button-toggle-font-default: body;
578
+ $icon-button-toggle-size-width: 64px;
547
579
  $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
548
580
  $button-light-color-scheme-primary-color: white;
549
581
  $button-light-color-scheme-primary-border: #0374eb;
@@ -552,7 +584,7 @@ $button-light-color-scheme-primary-icon: white;
552
584
  $button-light-color-scheme-primary-states-active-border: #0059b8;
553
585
  $button-light-color-scheme-primary-states-active-background: #0059b8;
554
586
  $button-light-color-scheme-primary-transparent-color: #0374eb;
555
- $button-light-color-scheme-primary-transparent-icon: #5697ff;
587
+ $button-light-color-scheme-primary-transparent-icon: #4187ff;
556
588
  $button-light-color-scheme-primary-transparent-states-hover-color: #0059b8;
557
589
  $button-light-color-scheme-primary-transparent-states-hover-icon: #0374eb;
558
590
  $button-light-color-scheme-primary-transparent-states-active-color: #014b9d;
@@ -572,12 +604,12 @@ $button-light-color-scheme-error-states-active-background: #bdc7d1;
572
604
  $button-dark-color-scheme-active-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
573
605
  $button-dark-color-scheme-primary-color: white;
574
606
  $button-dark-color-scheme-primary-border: #0059b8;
575
- $button-dark-color-scheme-primary-background: #0059b8;
607
+ $button-dark-color-scheme-primary-background: #0374eb;
576
608
  $button-dark-color-scheme-primary-icon: white;
577
609
  $button-dark-color-scheme-primary-states-active-border: darken(#014b9d, 5);
578
610
  $button-dark-color-scheme-primary-states-active-background: darken(#014b9d, 5);
579
- $button-dark-color-scheme-primary-transparent-color: #5697ff;
580
- $button-dark-color-scheme-primary-transparent-icon: #5697ff;
611
+ $button-dark-color-scheme-primary-transparent-color: #7fb1ff;
612
+ $button-dark-color-scheme-primary-transparent-icon: #7fb1ff;
581
613
  $button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
582
614
  $button-dark-color-scheme-primary-transparent-states-hover-icon: #0374eb;
583
615
  $button-dark-color-scheme-primary-transparent-states-active-color: #023c7f;
@@ -653,12 +685,12 @@ $checkbox-light-color-scheme-error-states-checked-focused-outline: 1px solid whi
653
685
  $checkbox-dark-color-scheme-default-border: #515e69;
654
686
  $checkbox-dark-color-scheme-default-color: white;
655
687
  $checkbox-dark-color-scheme-default-background: transparent;
656
- $checkbox-dark-color-scheme-default-states-checked-border: #0059b8;
657
- $checkbox-dark-color-scheme-default-states-checked-background: #0059b8;
688
+ $checkbox-dark-color-scheme-default-states-checked-border: #0374eb;
689
+ $checkbox-dark-color-scheme-default-states-checked-background: #0374eb;
658
690
  $checkbox-dark-color-scheme-default-states-focused-border: #4187ff;
659
691
  $checkbox-dark-color-scheme-default-states-focused-shadow: 0 0 0 1px #4187ff;
660
692
  $checkbox-dark-color-scheme-default-states-checked-focused-border: #4187ff;
661
- $checkbox-dark-color-scheme-default-states-checked-focused-background: #0059b8;
693
+ $checkbox-dark-color-scheme-default-states-checked-focused-background: #0374eb;
662
694
  $checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #4187ff;
663
695
  $checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
664
696
  $checkbox-dark-color-scheme-error-border: #b9023a;
@@ -839,7 +871,7 @@ $code-block-dark-color-scheme-hljs-link-color: null;
839
871
  $code-block-dark-color-scheme-hljs-literal-background: null;
840
872
  $code-block-dark-color-scheme-hljs-literal-color: #c692b5;
841
873
  $code-block-dark-color-scheme-hljs-meta-background: null;
842
- $code-block-dark-color-scheme-hljs-meta-color: #5697ff;
874
+ $code-block-dark-color-scheme-hljs-meta-color: #7fb1ff;
843
875
  $code-block-dark-color-scheme-hljs-meta-keyword-background: null;
844
876
  $code-block-dark-color-scheme-hljs-meta-keyword-color: null;
845
877
  $code-block-dark-color-scheme-hljs-meta-string-background: null;
@@ -847,7 +879,7 @@ $code-block-dark-color-scheme-hljs-meta-string-color: #4ba96c;
847
879
  $code-block-dark-color-scheme-hljs-meta-prompt-background: null;
848
880
  $code-block-dark-color-scheme-hljs-meta-prompt-color: null;
849
881
  $code-block-dark-color-scheme-hljs-name-background: null;
850
- $code-block-dark-color-scheme-hljs-name-color: #5697ff;
882
+ $code-block-dark-color-scheme-hljs-name-color: #7fb1ff;
851
883
  $code-block-dark-color-scheme-hljs-number-background: null;
852
884
  $code-block-dark-color-scheme-hljs-number-color: #c692b5;
853
885
  $code-block-dark-color-scheme-hljs-operator-background: null;
@@ -873,7 +905,7 @@ $code-block-dark-color-scheme-hljs-selector-id-color: null;
873
905
  $code-block-dark-color-scheme-hljs-selector-pseudo-background: null;
874
906
  $code-block-dark-color-scheme-hljs-selector-pseudo-color: null;
875
907
  $code-block-dark-color-scheme-hljs-selector-tag-background: null;
876
- $code-block-dark-color-scheme-hljs-selector-tag-color: #5697ff;
908
+ $code-block-dark-color-scheme-hljs-selector-tag-color: #7fb1ff;
877
909
  $code-block-dark-color-scheme-hljs-string-background: null;
878
910
  $code-block-dark-color-scheme-hljs-string-color: #4ba96c;
879
911
  $code-block-dark-color-scheme-hljs-strong-background: null;
@@ -881,7 +913,7 @@ $code-block-dark-color-scheme-hljs-strong-color: null;
881
913
  $code-block-dark-color-scheme-hljs-subst-background: null;
882
914
  $code-block-dark-color-scheme-hljs-subst-color: null;
883
915
  $code-block-dark-color-scheme-hljs-symbol-background: null;
884
- $code-block-dark-color-scheme-hljs-symbol-color: #5697ff;
916
+ $code-block-dark-color-scheme-hljs-symbol-color: #7fb1ff;
885
917
  $code-block-dark-color-scheme-hljs-tag-background: null;
886
918
  $code-block-dark-color-scheme-hljs-tag-color: null;
887
919
  $code-block-dark-color-scheme-hljs-template-tag-background: null;
@@ -889,7 +921,7 @@ $code-block-dark-color-scheme-hljs-template-tag-color: null;
889
921
  $code-block-dark-color-scheme-hljs-template-variable-background: null;
890
922
  $code-block-dark-color-scheme-hljs-template-variable-color: null;
891
923
  $code-block-dark-color-scheme-hljs-title-background: null;
892
- $code-block-dark-color-scheme-hljs-title-color: #5697ff;
924
+ $code-block-dark-color-scheme-hljs-title-color: #7fb1ff;
893
925
  $code-block-dark-color-scheme-hljs-title-class-background: null;
894
926
  $code-block-dark-color-scheme-hljs-title-class-color: null;
895
927
  $code-block-dark-color-scheme-hljs-title-class-inherited-background: null;
@@ -1094,6 +1126,61 @@ $dropdown-panel-size-max-width: 640px;
1094
1126
  $dropdown-panel-size-padding: 4px 0;
1095
1127
  $dropdown-panel-size-border-width: 1px;
1096
1128
  $dropdown-panel-size-border-radius: 4px;
1129
+ $file-upload-light-color-scheme-single-default-background: white;
1130
+ $file-upload-light-color-scheme-single-default-border: #bdc7d1;
1131
+ $file-upload-light-color-scheme-single-states-error-background: #fff3f3;
1132
+ $file-upload-light-color-scheme-single-states-error-border: #db3c55;
1133
+ $file-upload-light-color-scheme-single-states-progress-background: #f2f5f9;
1134
+ $file-upload-light-color-scheme-single-states-progress-border: #d7dee4;
1135
+ $file-upload-light-color-scheme-single-states-drag-n-drop-background: #e7f1ff;
1136
+ $file-upload-light-color-scheme-single-states-drag-n-drop-border: #0374eb;
1137
+ $file-upload-light-color-scheme-single-states-disable-background: #f2f5f9;
1138
+ $file-upload-light-color-scheme-single-states-disable-border: #d7dee4;
1139
+ $file-upload-light-color-scheme-multiple-default-background: white;
1140
+ $file-upload-light-color-scheme-multiple-default-border: #bdc7d1;
1141
+ $file-upload-light-color-scheme-multiple-states-error-background: white;
1142
+ $file-upload-light-color-scheme-multiple-states-error-border: #bdc7d1;
1143
+ $file-upload-light-color-scheme-multiple-states-progress-background: white;
1144
+ $file-upload-light-color-scheme-multiple-states-progress-border: #bdc7d1;
1145
+ $file-upload-light-color-scheme-multiple-states-drag-n-drop-background: #e7f1ff;
1146
+ $file-upload-light-color-scheme-multiple-states-drag-n-drop-border: #0374eb;
1147
+ $file-upload-light-color-scheme-multiple-states-disable-background: #f2f5f9;
1148
+ $file-upload-light-color-scheme-multiple-states-disable-border: #d7dee4;
1149
+ $file-upload-dark-color-scheme-single-default-background: #19252f;
1150
+ $file-upload-dark-color-scheme-single-default-border: #515e69;
1151
+ $file-upload-dark-color-scheme-single-states-error-background: #500013;
1152
+ $file-upload-dark-color-scheme-single-states-error-border: #b9023a;
1153
+ $file-upload-dark-color-scheme-single-states-progress-background: #333f4a;
1154
+ $file-upload-dark-color-scheme-single-states-progress-border: mix(#515e69, transparent, 50%);
1155
+ $file-upload-dark-color-scheme-single-states-drag-n-drop-background: rgba(3, 116, 235, 0.3);
1156
+ $file-upload-dark-color-scheme-single-states-drag-n-drop-border: #4187ff;
1157
+ $file-upload-dark-color-scheme-single-states-disable-background: #333f4a;
1158
+ $file-upload-dark-color-scheme-single-states-disable-border: mix(#515e69, transparent, 50%);
1159
+ $file-upload-dark-color-scheme-multiple-default-background: #19252f;
1160
+ $file-upload-dark-color-scheme-multiple-default-border: #515e69;
1161
+ $file-upload-dark-color-scheme-multiple-states-error-background: #19252f;
1162
+ $file-upload-dark-color-scheme-multiple-states-error-border: #515e69;
1163
+ $file-upload-dark-color-scheme-multiple-states-progress-background: #19252f;
1164
+ $file-upload-dark-color-scheme-multiple-states-progress-border: #515e69;
1165
+ $file-upload-dark-color-scheme-multiple-states-drag-n-drop-background: rgba(3, 116, 235, 0.3);
1166
+ $file-upload-dark-color-scheme-multiple-states-drag-n-drop-border: #4187ff;
1167
+ $file-upload-dark-color-scheme-multiple-states-disable-background: #333f4a;
1168
+ $file-upload-dark-color-scheme-multiple-states-disable-border: mix(#515e69, transparent, 50%);
1169
+ $file-upload-size-single-height: 48px;
1170
+ $file-upload-size-single-vertical-padding: 12px;
1171
+ $file-upload-size-single-border-width: 1px;
1172
+ $file-upload-size-single-border-radius: 4px;
1173
+ $file-upload-size-single-border-style: dashed;
1174
+ $file-upload-size-multiple-border-width: 1px;
1175
+ $file-upload-size-multiple-border-radius: 4px;
1176
+ $file-upload-size-multiple-border-style: dashed;
1177
+ $file-upload-size-multiple-uploaded-item-horizontal-padding: 8px;
1178
+ $file-upload-size-multiple-uploaded-item-vertical-padding: 8px;
1179
+ $file-upload-font-single: body;
1180
+ $file-upload-font-multiple-header: headline;
1181
+ $file-upload-font-multiple-caption: body;
1182
+ $file-upload-font-multiple-uploaded-header: caption;
1183
+ $file-upload-font-multiple-uploaded-item: body;
1097
1184
  $form-field-light-color-scheme-border: #bdc7d1;
1098
1185
  $form-field-light-color-scheme-background: white;
1099
1186
  $form-field-light-color-scheme-states-autofill-background: #ebf8fd;
@@ -1150,10 +1237,10 @@ $icon-light-color-scheme-secondary-default: #8c99a5;
1150
1237
  $icon-light-color-scheme-secondary-states-hover: #6d7a86;
1151
1238
  $icon-light-color-scheme-secondary-states-active: #434f5a;
1152
1239
  $icon-light-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
1153
- $icon-light-color-scheme-primary-default: #5697ff;
1240
+ $icon-light-color-scheme-primary-default: #4187ff;
1154
1241
  $icon-light-color-scheme-primary-states-hover: #0374eb;
1155
1242
  $icon-light-color-scheme-primary-states-active: #014b9d;
1156
- $icon-light-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
1243
+ $icon-light-color-scheme-primary-states-disabled: mix(#4187ff, transparent, 30%);
1157
1244
  $icon-light-color-scheme-info-default: #18a5c5;
1158
1245
  $icon-light-color-scheme-info-states-hover: #218ca8;
1159
1246
  $icon-light-color-scheme-info-states-active: #0c5567;
@@ -1174,10 +1261,10 @@ $icon-dark-color-scheme-secondary-default: #8c99a5;
1174
1261
  $icon-dark-color-scheme-secondary-states-hover: #6d7a86;
1175
1262
  $icon-dark-color-scheme-secondary-states-active: #bdc7d1;
1176
1263
  $icon-dark-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
1177
- $icon-dark-color-scheme-primary-default: #5697ff;
1264
+ $icon-dark-color-scheme-primary-default: #7fb1ff;
1178
1265
  $icon-dark-color-scheme-primary-states-hover: #0374eb;
1179
1266
  $icon-dark-color-scheme-primary-states-active: #a2c7fe;
1180
- $icon-dark-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
1267
+ $icon-dark-color-scheme-primary-states-disabled: mix(#7fb1ff, transparent, 30%);
1181
1268
  $icon-dark-color-scheme-info-default: #18a5c5;
1182
1269
  $icon-dark-color-scheme-info-states-hover: #218ca8;
1183
1270
  $icon-dark-color-scheme-info-states-active: #6ed3f2;
@@ -1206,8 +1293,8 @@ $link-light-color-scheme-state-hover-text: #0059b8;
1206
1293
  $link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
1207
1294
  $link-light-color-scheme-state-active: #014b9d;
1208
1295
  $link-light-color-scheme-state-focused-outline: #0374eb;
1209
- $link-dark-color-scheme-text: #5697ff;
1210
- $link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
1296
+ $link-dark-color-scheme-text: #7fb1ff;
1297
+ $link-dark-color-scheme-border-bottom: rgba(#7fb1ff, 0.32);;
1211
1298
  $link-dark-color-scheme-state-visited-text: #bb78a7;
1212
1299
  $link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
1213
1300
  $link-dark-color-scheme-state-hover-text: #4187ff;
@@ -1220,9 +1307,14 @@ $link-size-default-icon-margin: 4px;
1220
1307
  $link-size-caption-icon-margin: 2px;
1221
1308
  $link-font-default: body;
1222
1309
  $link-font-caption: caption;
1310
+ $list-light-color-scheme-footer-background: white;
1311
+ $list-light-color-scheme-footer-divider: #d7dee4;
1312
+ $list-dark-color-scheme-footer-background: #19252f;
1313
+ $list-dark-color-scheme-footer-divider: mix(#515e69, transparent, 50%);
1223
1314
  $list-size-horizontal-padding: 12px;
1224
1315
  $list-size-icon-right-margin: 8px;
1225
1316
  $list-size-item-height: 32px;
1317
+ $list-size-footer-min-height: 48px;
1226
1318
  $list-font-item: body;
1227
1319
  $loader-overlay-light-color-scheme-background: mix(white, transparent, 90%);
1228
1320
  $loader-overlay-light-color-scheme-text: #19252f;
@@ -1325,8 +1417,8 @@ $markdown-link-light-color-scheme-state-hover-text: #0059b8;
1325
1417
  $markdown-link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
1326
1418
  $markdown-link-light-color-scheme-state-active: #014b9d;
1327
1419
  $markdown-link-light-color-scheme-state-focused-outline: #0374eb;
1328
- $markdown-link-dark-color-scheme-text: #5697ff;
1329
- $markdown-link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
1420
+ $markdown-link-dark-color-scheme-text: #7fb1ff;
1421
+ $markdown-link-dark-color-scheme-border-bottom: rgba(#7fb1ff, 0.32);;
1330
1422
  $markdown-link-dark-color-scheme-state-visited-text: #bb78a7;
1331
1423
  $markdown-link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
1332
1424
  $markdown-link-dark-color-scheme-state-hover-text: #4187ff;
@@ -1491,8 +1583,8 @@ $radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px white;
1491
1583
  $radio-dark-color-scheme-outer-circle-border: #515e69;
1492
1584
  $radio-dark-color-scheme-inner-circle-border: transparent;
1493
1585
  $radio-dark-color-scheme-cap-color: white;
1494
- $radio-dark-color-scheme-states-checked-outer-circle-border: #0059b8;
1495
- $radio-dark-color-scheme-states-checked-inner-circle-border: #0059b8;
1586
+ $radio-dark-color-scheme-states-checked-outer-circle-border: #0374eb;
1587
+ $radio-dark-color-scheme-states-checked-inner-circle-border: #0374eb;
1496
1588
  $radio-dark-color-scheme-states-focused-outer-circle-border: #4187ff;
1497
1589
  $radio-dark-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #4187ff;
1498
1590
  $radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px #19252f;
@@ -1537,8 +1629,6 @@ $select-panel-size-vertical-padding: 4px;
1537
1629
  $select-panel-size-border-width: 1px;
1538
1630
  $select-panel-size-border-radius: 4px;
1539
1631
  $select-panel-font-default: body;
1540
- $sidepanel-light-color-scheme-border: #bdc7d1;
1541
- $sidepanel-dark-color-scheme-border: #19252f;
1542
1632
  $sidepanel-size-small: 400px;
1543
1633
  $sidepanel-size-medium: 640px;
1544
1634
  $sidepanel-size-large: 960px;
@@ -1574,7 +1664,7 @@ $tabs-dark-color-scheme-state-normal-icon: #8c99a5;
1574
1664
  $tabs-dark-color-scheme-state-normal-text: #d7dee4;
1575
1665
  $tabs-dark-color-scheme-state-hover-icon: #6d7a86;
1576
1666
  $tabs-dark-color-scheme-state-hover-text: #d7dee4;
1577
- $tabs-dark-color-scheme-state-active-marker-color: #0059b8;
1667
+ $tabs-dark-color-scheme-state-active-marker-color: #0374eb;
1578
1668
  $tabs-dark-color-scheme-state-empty-icon: mix(#8c99a5, transparent, 30%);
1579
1669
  $tabs-dark-color-scheme-state-empty-text: #6d7a86;
1580
1670
  $tabs-dark-color-scheme-state-disabled-icon: mix(#8c99a5, transparent, 30%);
@@ -1598,7 +1688,7 @@ $vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(r
1598
1688
  $tags-light-color-scheme-primary-background: #e7f1ff;
1599
1689
  $tags-light-color-scheme-primary-border: transparent;
1600
1690
  $tags-light-color-scheme-primary-text: #0374eb;
1601
- $tags-light-color-scheme-primary-icon: #5697ff;
1691
+ $tags-light-color-scheme-primary-icon: #4187ff;
1602
1692
  $tags-light-color-scheme-primary-states-hover-icon: #0374eb;
1603
1693
  $tags-light-color-scheme-primary-states-focused: #0374eb;
1604
1694
  $tags-light-color-scheme-primary-states-disabled-text: mix(#0374eb, transparent, 50%);
@@ -1625,11 +1715,11 @@ $tags-light-color-scheme-error-states-disabled-border: transparent;
1625
1715
  $tags-dark-color-scheme-primary-background: #014b9d;
1626
1716
  $tags-dark-color-scheme-primary-border: transparent;
1627
1717
  $tags-dark-color-scheme-primary-text: #a2c7fe;
1628
- $tags-dark-color-scheme-primary-icon: #5697ff;
1718
+ $tags-dark-color-scheme-primary-icon: #7fb1ff;
1629
1719
  $tags-dark-color-scheme-primary-states-hover-icon: #0374eb;
1630
1720
  $tags-dark-color-scheme-primary-states-focused: #4187ff;
1631
- $tags-dark-color-scheme-primary-states-disabled-text: mix(#5697ff, transparent, 50%);
1632
- $tags-dark-color-scheme-primary-states-disabled-background: mix(#5697ff, transparent, 10%);
1721
+ $tags-dark-color-scheme-primary-states-disabled-text: mix(#7fb1ff, transparent, 50%);
1722
+ $tags-dark-color-scheme-primary-states-disabled-background: mix(#7fb1ff, transparent, 10%);
1633
1723
  $tags-dark-color-scheme-primary-states-disabled-border: transparent;
1634
1724
  $tags-dark-color-scheme-secondary-background: #333f4a;
1635
1725
  $tags-dark-color-scheme-secondary-border: transparent;
@@ -1727,8 +1817,8 @@ $toggle-dark-color-scheme-background: #19252f;
1727
1817
  $toggle-dark-color-scheme-circle-border: #515e69;
1728
1818
  $toggle-dark-color-scheme-circle-background: #6d7a86;
1729
1819
  $toggle-dark-color-scheme-states-focused-shadow: inset 0 0 0 1px #19252f, 0 0 0 2px #4187ff;
1730
- $toggle-dark-color-scheme-primary-checked-border-color: #0059b8;
1731
- $toggle-dark-color-scheme-primary-checked-background: #0059b8;
1820
+ $toggle-dark-color-scheme-primary-checked-border-color: #0374eb;
1821
+ $toggle-dark-color-scheme-primary-checked-background: #0374eb;
1732
1822
  $toggle-dark-color-scheme-error-checked-border-color: #b9023a;
1733
1823
  $toggle-dark-color-scheme-error-checked-background: #b9023a;
1734
1824
  $toggle-size-height: 16px;
@@ -1795,7 +1885,7 @@ $light-color-scheme-primary-palette: (
1795
1885
  60: #e7f1ff,
1796
1886
  100: #c8dfff,
1797
1887
  200: #a2c7fe,
1798
- 300: #5697ff,
1888
+ 300: #7fb1ff,
1799
1889
  400: #4187ff,
1800
1890
  500: #0374eb,
1801
1891
  560: #0059b8,
@@ -1993,7 +2083,7 @@ $dark-color-scheme-primary-palette: (
1993
2083
  60: #e7f1ff,
1994
2084
  100: #c8dfff,
1995
2085
  200: #a2c7fe,
1996
- 300: #5697ff,
2086
+ 300: #7fb1ff,
1997
2087
  400: #4187ff,
1998
2088
  500: #0374eb,
1999
2089
  560: #0059b8,
@@ -2191,7 +2281,7 @@ $color-blue-palette: (
2191
2281
  60: #e7f1ff,
2192
2282
  100: #c8dfff,
2193
2283
  200: #a2c7fe,
2194
- 300: #5697ff,
2284
+ 300: #7fb1ff,
2195
2285
  400: #4187ff,
2196
2286
  500: #0374eb,
2197
2287
  560: #0059b8,
@@ -3540,6 +3630,39 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
3540
3630
  )
3541
3631
  );
3542
3632
 
3633
+ $button-toggle: (
3634
+ button-toggle-group: (
3635
+ background: $button-toggle-group-light-color-scheme-background,
3636
+ border: $button-toggle-group-light-color-scheme-border,
3637
+ states: (
3638
+ disabled: (
3639
+ opacity: $button-toggle-group-light-color-scheme-states-disabled-opacity
3640
+ )
3641
+ )
3642
+ ),
3643
+ button-toggle: (
3644
+ color: $button-toggle-light-color-scheme-color,
3645
+ icon: $button-toggle-light-color-scheme-icon,
3646
+ states: (
3647
+ disabled: (
3648
+ opacity: $button-toggle-light-color-scheme-states-disabled-opacity
3649
+ ),
3650
+ hover: (
3651
+ background: $button-toggle-light-color-scheme-states-hover-background,
3652
+ icon: $button-toggle-light-color-scheme-states-hover-icon
3653
+ ),
3654
+ active: (
3655
+ background: $button-toggle-light-color-scheme-states-active-background,
3656
+ icon: $button-toggle-light-color-scheme-states-active-icon
3657
+ ),
3658
+ pressed: (
3659
+ background: $button-toggle-light-color-scheme-states-pressed-background,
3660
+ icon: $button-toggle-light-color-scheme-states-pressed-icon
3661
+ )
3662
+ )
3663
+ )
3664
+ );
3665
+
3543
3666
  $card: (
3544
3667
  error: (
3545
3668
  vertical-line: $card-light-color-scheme-error-vertical-line,
@@ -3777,6 +3900,57 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
3777
3900
  )
3778
3901
  );
3779
3902
 
3903
+ $file-upload: (
3904
+ single: (
3905
+ default: (
3906
+ background: $file-upload-light-color-scheme-single-default-background,
3907
+ border: $file-upload-light-color-scheme-single-default-border,
3908
+ ),
3909
+ states: (
3910
+ error: (
3911
+ background: $file-upload-light-color-scheme-single-states-error-background,
3912
+ border: $file-upload-light-color-scheme-single-states-error-border,
3913
+ ),
3914
+ progress: (
3915
+ background: $file-upload-light-color-scheme-single-states-progress-background,
3916
+ border: $file-upload-light-color-scheme-single-states-progress-border,
3917
+ ),
3918
+ drag-n-drop: (
3919
+ background: $file-upload-light-color-scheme-single-states-drag-n-drop-background,
3920
+ border: $file-upload-light-color-scheme-single-states-drag-n-drop-border,
3921
+ ),
3922
+ disabled: (
3923
+ background: $file-upload-light-color-scheme-single-states-disable-background,
3924
+ border: $file-upload-light-color-scheme-single-states-disable-border,
3925
+ )
3926
+ )
3927
+ ),
3928
+ multiple: (
3929
+ default: (
3930
+ background: $file-upload-light-color-scheme-multiple-default-background,
3931
+ border: $file-upload-light-color-scheme-multiple-default-border,
3932
+ ),
3933
+ states: (
3934
+ error: (
3935
+ background: $file-upload-light-color-scheme-multiple-states-error-background,
3936
+ border: $file-upload-light-color-scheme-multiple-states-error-border,
3937
+ ),
3938
+ progress: (
3939
+ background: $file-upload-light-color-scheme-multiple-states-progress-background,
3940
+ border: $file-upload-light-color-scheme-multiple-states-progress-border,
3941
+ ),
3942
+ drag-n-drop: (
3943
+ background: $file-upload-light-color-scheme-multiple-states-drag-n-drop-background,
3944
+ border: $file-upload-light-color-scheme-multiple-states-drag-n-drop-border,
3945
+ ),
3946
+ disabled: (
3947
+ background: $file-upload-light-color-scheme-multiple-states-disable-background,
3948
+ border: $file-upload-light-color-scheme-multiple-states-disable-border,
3949
+ )
3950
+ )
3951
+ )
3952
+ );
3953
+
3780
3954
  $form-field: (
3781
3955
  border: $form-field-light-color-scheme-border,
3782
3956
  background: $form-field-light-color-scheme-background,
@@ -3822,6 +3996,11 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
3822
3996
  state-focused-outline: $link-light-color-scheme-state-focused-outline
3823
3997
  );
3824
3998
 
3999
+ $list: (
4000
+ footer-background: $list-light-color-scheme-footer-background,
4001
+ footer-divider: $list-light-color-scheme-footer-divider,
4002
+ );
4003
+
3825
4004
  $loader-overlay: (
3826
4005
  background: $loader-overlay-light-color-scheme-background,
3827
4006
 
@@ -4079,6 +4258,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
4079
4258
  popup: $popup,
4080
4259
  badge: $badge,
4081
4260
  button: $button,
4261
+ button-toggle: $button-toggle,
4082
4262
  card: $card,
4083
4263
  checkbox: $checkbox,
4084
4264
  code-block: $code-block,
@@ -4086,11 +4266,13 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
4086
4266
  divider: $divider,
4087
4267
  dl: $dl,
4088
4268
  icon: $icon,
4269
+ file-upload: $file-upload,
4089
4270
  form-field: $form-field,
4090
4271
  form-field-password-hint: $form-field-password-hint,
4091
4272
  form-field-hint: $form-field-hint,
4092
4273
  forms: $forms,
4093
4274
  link: $link,
4275
+ list: $list,
4094
4276
  loader-overlay: $loader-overlay,
4095
4277
  markdown: $markdown,
4096
4278
  modal: $modal,
@@ -4261,6 +4443,40 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
4261
4443
  )
4262
4444
  );
4263
4445
 
4446
+ $button-toggle: (
4447
+ button-toggle-group: (
4448
+ background: $button-toggle-group-dark-color-scheme-background,
4449
+ border: $button-toggle-group-dark-color-scheme-border,
4450
+ states: (
4451
+ disabled: (
4452
+ opacity: $button-toggle-group-dark-color-scheme-states-disabled-opacity
4453
+ )
4454
+ )
4455
+ ),
4456
+ button-toggle: (
4457
+ color: $button-toggle-dark-color-scheme-color,
4458
+ icon: $button-toggle-dark-color-scheme-icon,
4459
+ states: (
4460
+ disabled: (
4461
+ opacity: $button-toggle-dark-color-scheme-states-disabled-opacity
4462
+ ),
4463
+ hover: (
4464
+ background: $button-toggle-dark-color-scheme-states-hover-background,
4465
+ icon: $button-toggle-dark-color-scheme-states-hover-icon
4466
+ ),
4467
+ active: (
4468
+ background: $button-toggle-dark-color-scheme-states-active-background,
4469
+ icon: $button-toggle-dark-color-scheme-states-active-icon
4470
+ ),
4471
+ pressed: (
4472
+ background: $button-toggle-dark-color-scheme-states-pressed-background,
4473
+ icon: $button-toggle-dark-color-scheme-states-pressed-icon
4474
+ )
4475
+ )
4476
+ )
4477
+ );
4478
+
4479
+
4264
4480
  $card: (
4265
4481
  error: (
4266
4482
  vertical-line: $card-dark-color-scheme-error-vertical-line,
@@ -4496,6 +4712,57 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
4496
4712
  )
4497
4713
  );
4498
4714
 
4715
+ $file-upload: (
4716
+ single: (
4717
+ default: (
4718
+ background: $file-upload-dark-color-scheme-single-default-background,
4719
+ border: $file-upload-dark-color-scheme-single-default-border,
4720
+ ),
4721
+ states: (
4722
+ error: (
4723
+ background: $file-upload-dark-color-scheme-single-states-error-background,
4724
+ border: $file-upload-dark-color-scheme-single-states-error-border,
4725
+ ),
4726
+ progress: (
4727
+ background: $file-upload-dark-color-scheme-single-states-progress-background,
4728
+ border: $file-upload-dark-color-scheme-single-states-progress-border,
4729
+ ),
4730
+ drag-n-drop: (
4731
+ background: $file-upload-dark-color-scheme-single-states-drag-n-drop-background,
4732
+ border: $file-upload-dark-color-scheme-single-states-drag-n-drop-border,
4733
+ ),
4734
+ disabled: (
4735
+ background: $file-upload-dark-color-scheme-single-states-disable-background,
4736
+ border: $file-upload-dark-color-scheme-single-states-disable-border,
4737
+ ),
4738
+ ),
4739
+ ),
4740
+ multiple: (
4741
+ default: (
4742
+ background: $file-upload-dark-color-scheme-multiple-default-background,
4743
+ border: $file-upload-dark-color-scheme-multiple-default-border,
4744
+ ),
4745
+ states: (
4746
+ error: (
4747
+ background: $file-upload-dark-color-scheme-multiple-states-error-background,
4748
+ border: $file-upload-dark-color-scheme-multiple-states-error-border,
4749
+ ),
4750
+ progress: (
4751
+ background: $file-upload-dark-color-scheme-multiple-states-progress-background,
4752
+ border: $file-upload-dark-color-scheme-multiple-states-progress-border,
4753
+ ),
4754
+ drag-n-drop: (
4755
+ background: $file-upload-dark-color-scheme-multiple-states-drag-n-drop-background,
4756
+ border: $file-upload-dark-color-scheme-multiple-states-drag-n-drop-border,
4757
+ ),
4758
+ disabled: (
4759
+ background: $file-upload-dark-color-scheme-multiple-states-disable-background,
4760
+ border: $file-upload-dark-color-scheme-multiple-states-disable-border,
4761
+ ),
4762
+ ),
4763
+ )
4764
+ );
4765
+
4499
4766
  $form-field: (
4500
4767
  border: $form-field-dark-color-scheme-border,
4501
4768
  background: $form-field-dark-color-scheme-background,
@@ -4541,6 +4808,11 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
4541
4808
  state-focused-outline: $link-dark-color-scheme-state-focused-outline
4542
4809
  );
4543
4810
 
4811
+ $list: (
4812
+ footer-background: $list-dark-color-scheme-footer-background,
4813
+ footer-divider: $list-dark-color-scheme-footer-divider,
4814
+ );
4815
+
4544
4816
  $loader-overlay: (
4545
4817
  background: $loader-overlay-dark-color-scheme-background,
4546
4818
 
@@ -4798,6 +5070,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
4798
5070
  popup: $popup,
4799
5071
  badge: $badge,
4800
5072
  button: $button,
5073
+ button-toggle: $button-toggle,
4801
5074
  card: $card,
4802
5075
  checkbox: $checkbox,
4803
5076
  code-block: $code-block,
@@ -4805,11 +5078,13 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
4805
5078
  divider: $divider,
4806
5079
  dl: $dl,
4807
5080
  icon: $icon,
5081
+ file-upload: $file-upload,
4808
5082
  form-field: $form-field,
4809
5083
  form-field-password-hint: $form-field-password-hint,
4810
5084
  form-field-hint: $form-field-hint,
4811
5085
  forms: $forms,
4812
5086
  link: $link,
5087
+ list: $list,
4813
5088
  loader-overlay: $loader-overlay,
4814
5089
  markdown: $markdown,
4815
5090
  modal: $modal,
@@ -4980,6 +5255,39 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
4980
5255
  )
4981
5256
  );
4982
5257
 
5258
+ $button-toggle: (
5259
+ button-toggle-group: (
5260
+ background: map-get($tokens, 'button-toggle-group-#{$scheme}-background'),
5261
+ border: map-get($tokens, 'button-toggle-group-#{$scheme}-border'),
5262
+ states: (
5263
+ disabled: (
5264
+ opacity: map-get($tokens, 'button-toggle-group-#{$scheme}-states-disabled-opacity')
5265
+ )
5266
+ ),
5267
+ ),
5268
+ button-toggle: (
5269
+ color: map-get($tokens, 'button-toggle-#{$scheme}-color'),
5270
+ icon: map-get($tokens, 'button-toggle-#{$scheme}-icon'),
5271
+ states: (
5272
+ disabled: (
5273
+ opacity: map-get($tokens, 'button-toggle-#{$scheme}-states-disabled-opacity')
5274
+ ),
5275
+ hover: (
5276
+ background: map-get($tokens, 'button-toggle-#{$scheme}-states-hover-background'),
5277
+ icon: map-get($tokens, 'button-toggle-#{$scheme}-states-hover-icon')
5278
+ ),
5279
+ active: (
5280
+ background: map-get($tokens, 'button-toggle-#{$scheme}-states-active-background'),
5281
+ icon: map-get($tokens, 'button-toggle-#{$scheme}-states-active-icon')
5282
+ ),
5283
+ pressed: (
5284
+ background: map-get($tokens, 'button-toggle-#{$scheme}-states-pressed-background'),
5285
+ icon: map-get($tokens, 'button-toggle-#{$scheme}-states-pressed-icon')
5286
+ )
5287
+ )
5288
+ )
5289
+ );
5290
+
4983
5291
  $card: (
4984
5292
  error: (
4985
5293
  vertical-line: map-get($tokens, 'card-#{$scheme}-error-vertical-line'),
@@ -5185,6 +5493,57 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
5185
5493
  dd: map-get($tokens, 'description-list-#{$scheme}-dd')
5186
5494
  );
5187
5495
 
5496
+ $file-upload: (
5497
+ single: (
5498
+ default: (
5499
+ background: map-get($tokens, 'file-upload-#{$scheme}-single-default-background'),
5500
+ border: map-get($tokens, 'file-upload-#{$scheme}-single-default-border'),
5501
+ ),
5502
+ states: (
5503
+ error: (
5504
+ background: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-background'),
5505
+ border: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-border')
5506
+ ),
5507
+ progress: (
5508
+ background: map-get($tokens, 'file-upload-#{$scheme}-single-states-progress-background'),
5509
+ border: map-get($tokens, 'file-upload-#{$scheme}-single-states-progress-border')
5510
+ ),
5511
+ drag-n-drop: (
5512
+ background: map-get($tokens, 'file-upload-#{$scheme}-single-states-drag-n-drop-background'),
5513
+ border: map-get($tokens, 'file-upload-#{$scheme}-single-states-drag-n-drop-border')
5514
+ ),
5515
+ disabled: (
5516
+ background: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-background'),
5517
+ border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-border')
5518
+ )
5519
+ )
5520
+ ),
5521
+ multiple: (
5522
+ default: (
5523
+ background: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-background'),
5524
+ border: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-border'),
5525
+ ),
5526
+ states: (
5527
+ error: (
5528
+ background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-error-background'),
5529
+ border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-error-border')
5530
+ ),
5531
+ progress: (
5532
+ background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-progress-background'),
5533
+ border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-progress-border')
5534
+ ),
5535
+ drag-n-drop: (
5536
+ background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-drag-n-drop-background'),
5537
+ border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-drag-n-drop-border')
5538
+ ),
5539
+ disabled: (
5540
+ background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-background'),
5541
+ border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-border')
5542
+ )
5543
+ )
5544
+ )
5545
+ );
5546
+
5188
5547
  $form-field: (
5189
5548
  border: map-get($tokens, 'form-field-#{$scheme}-border'),
5190
5549
  background: map-get($tokens, 'form-field-#{$scheme}-background'),
@@ -5269,6 +5628,11 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
5269
5628
  state-focused-outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
5270
5629
  );
5271
5630
 
5631
+ $list: (
5632
+ footer-background: map-get($tokens, 'list-#{$scheme}-footer-background'),
5633
+ footer-divider: map-get($tokens, 'list-#{$scheme}-footer-divider'),
5634
+ );
5635
+
5272
5636
  $loader-overlay: (
5273
5637
  background: map-get($tokens, 'loader-overlay-#{$scheme}-background'),
5274
5638
 
@@ -5526,18 +5890,21 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
5526
5890
  popup: $popup,
5527
5891
  badge: $badge,
5528
5892
  button: $button,
5893
+ button-toggle: $button-toggle,
5529
5894
  card: $card,
5530
5895
  checkbox: $checkbox,
5531
5896
  code-block: $code-block,
5532
5897
  datepicker: $datepicker,
5533
5898
  divider: $divider,
5534
5899
  dl: $dl,
5900
+ file-upload: $file-upload,
5535
5901
  form-field: $form-field,
5536
5902
  form-field-password-hint: $form-field-password-hint,
5537
5903
  form-field-hint: $form-field-hint,
5538
5904
  forms: $forms,
5539
5905
  icon: $icon,
5540
5906
  link: $link,
5907
+ list: $list,
5541
5908
  loader-overlay: $loader-overlay,
5542
5909
  modal: $modal,
5543
5910
  markdown: $markdown,
@@ -6758,6 +7125,93 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
6758
7125
  }
6759
7126
 
6760
7127
 
7128
+
7129
+
7130
+
7131
+
7132
+ @mixin mc-button-toggle-color($state) {
7133
+ & .mc-button-overlay {
7134
+ background: map-get($state, background);
7135
+ }
7136
+
7137
+ & .mc-icon {
7138
+ color: map-get($state, icon);
7139
+ }
7140
+ }
7141
+
7142
+ @mixin mc-button-toggle-theme($theme) {
7143
+ $primary: map-get($theme, primary);
7144
+
7145
+ $button-toggle-group: map-get(map-get(map-get($theme, components), button-toggle), button-toggle-group);
7146
+ $button-toggle: map-get(map-get(map-get($theme, components), button-toggle), button-toggle);
7147
+ $states: map-get($button-toggle, states);
7148
+
7149
+ .mc-button-toggle-group {
7150
+ background: map-get($button-toggle-group, background);
7151
+ border-color: map-get($button-toggle-group, border);
7152
+
7153
+ .mc-button-toggle {
7154
+ > .mc-button,
7155
+ > .mc-icon-button {
7156
+ color: map-get($button-toggle, color);
7157
+ border-color: map-get($button-toggle-group, border);
7158
+
7159
+ & .mc-icon {
7160
+ color: map-get($button-toggle, icon);
7161
+ }
7162
+
7163
+ .mc-button-overlay {
7164
+ background-color: unset;
7165
+ }
7166
+
7167
+ &:hover:not([disabled], .mc-active) {
7168
+ @include mc-button-toggle-color(map-get($states, hover));
7169
+ }
7170
+
7171
+ &:active:not([disabled], .mc-active) {
7172
+ @include mc-button-toggle-color(map-get($states, active));
7173
+ }
7174
+
7175
+ &.mc-active {
7176
+ $state: map-get($states, pressed);
7177
+
7178
+ background: map-get($state, background);
7179
+ border-color: map-get($state, background);
7180
+
7181
+ & .mc-icon {
7182
+ color: map-get($state, icon);
7183
+ }
7184
+ }
7185
+
7186
+ &.mc-disabled,
7187
+ &[disabled] {
7188
+ opacity: map-get(map-get($states, disabled), opacity);
7189
+ }
7190
+
7191
+ &.cdk-keyboard-focused {
7192
+ box-shadow: unset;
7193
+ }
7194
+ }
7195
+
7196
+ &.cdk-keyboard-focused {
7197
+ box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
7198
+ }
7199
+ }
7200
+ }
7201
+ }
7202
+
7203
+ @mixin mc-button-toggle-typography($config) {
7204
+ .mc-button-toggle {
7205
+ @include mc-typography-level-to-styles($config, $button-toggle-font-default);
7206
+
7207
+ > .mc-button,
7208
+ > .mc-icon-button {
7209
+ @include mc-typography-level-to-styles($config, $button-toggle-font-default);
7210
+ }
7211
+ }
7212
+ }
7213
+
7214
+
6761
7215
  @mixin card-type($card) {
6762
7216
  box-shadow:
6763
7217
  inset -1px 0 0 0 map-get($card, shadow),
@@ -8660,6 +9114,7 @@ button {
8660
9114
  $error: map-get($theme, error);
8661
9115
 
8662
9116
  $popup: map-get(map-get($theme, components), popup);
9117
+ $list: map-get(map-get($theme, components), list);
8663
9118
 
8664
9119
  .mc-select {
8665
9120
  color: map-get($foreground, text);
@@ -8679,6 +9134,11 @@ button {
8679
9134
 
8680
9135
  .mc-select__panel {
8681
9136
  @include popup-params($theme);
9137
+
9138
+ & .mc-select__footer {
9139
+ background: map-get($list, footer-background);
9140
+ border-top-color: map-get($list, footer-divider);
9141
+ }
8682
9142
  }
8683
9143
 
8684
9144
  .mc-select__search-container {
@@ -9587,6 +10047,7 @@ button {
9587
10047
  $foreground: map-get($theme, foreground);
9588
10048
 
9589
10049
  $error: map-get($theme, error);
10050
+ $list: map-get(map-get($theme, components), list);
9590
10051
 
9591
10052
  .mc-tree-select {
9592
10053
  color: map-get($foreground, text);
@@ -9606,6 +10067,11 @@ button {
9606
10067
 
9607
10068
  .mc-tree-select__panel {
9608
10069
  @include popup-params($theme);
10070
+
10071
+ & .mc-tree-select__footer {
10072
+ background: map-get($list, footer-background);
10073
+ border-top-color: map-get($list, footer-divider);
10074
+ }
9609
10075
  }
9610
10076
  }
9611
10077
 
@@ -9947,6 +10413,169 @@ button {
9947
10413
 
9948
10414
 
9949
10415
 
10416
+
10417
+
10418
+ @mixin mc-file-upload-text-color($states) {
10419
+ &, .mc-icon, .mc-link {
10420
+ color: map-get($states, border);
10421
+ }
10422
+ }
10423
+
10424
+ @mixin mc-file-upload-color($states) {
10425
+ background-color: map-get($states, background);
10426
+ border-color: map-get($states, border) !important;
10427
+ }
10428
+
10429
+ @mixin mc-file-upload-theme($theme) {
10430
+ $file-upload: map-get(map-get($theme, components), file-upload);
10431
+ $single: map-get($file-upload, single);
10432
+ $single-states: map-get($single, states);
10433
+ $multiple: map-get($file-upload, multiple);
10434
+ $multiple-states: map-get($multiple, states);
10435
+ $foreground: map-get($theme, foreground);
10436
+
10437
+ .mc-file-upload {
10438
+ .mc-focused, .mc-link.mc-focused {
10439
+ border: 2px solid map-get(map-get($theme, states), focused-color);
10440
+ }
10441
+ }
10442
+
10443
+ .mc-single-file-upload {
10444
+ .mc-file-upload {
10445
+ @include mc-file-upload-color(map-get($single, default));
10446
+
10447
+ &.dragover {
10448
+ @include mc-file-upload-color(map-get($single-states, drag-n-drop));
10449
+ }
10450
+
10451
+ &.mc-error:not(.disabled) {
10452
+ &:not(.dragover) {
10453
+ @include mc-file-upload-color(map-get($single-states, error));
10454
+ }
10455
+
10456
+ *, .mc-icon {
10457
+ color: map-get($foreground, text-error);
10458
+ }
10459
+ }
10460
+
10461
+ &.disabled {
10462
+ @include mc-file-upload-color(map-get($single-states, disabled));
10463
+
10464
+ @include mc-file-upload-text-color(map-get($single-states, disabled));
10465
+ }
10466
+ }
10467
+ }
10468
+
10469
+ .mc-multiple-file-upload {
10470
+ .mc-file-upload {
10471
+ @include mc-file-upload-color(map-get($multiple, default));
10472
+
10473
+ .btn-upload {
10474
+ .dropzone {
10475
+ border-top-color: map-get(map-get($multiple, default), border);
10476
+ }
10477
+ }
10478
+
10479
+ .mc-file-multiple-uploaded__header {
10480
+ border-bottom-color: map-get(map-get($multiple, default), border);
10481
+
10482
+ &-inner {
10483
+ color: map-get($foreground, text-less-contrast);
10484
+ }
10485
+ }
10486
+
10487
+ &.dragover {
10488
+ @include mc-file-upload-color(map-get($multiple-states, drag-n-drop));
10489
+
10490
+ .mc-file-multiple-uploaded__header {
10491
+ border-bottom-color: map-get(map-get($multiple-states, drag-n-drop), background) !important;
10492
+ }
10493
+
10494
+ &.selected {
10495
+ .dropzone {
10496
+ border-top-color: map-get(map-get($multiple-states, drag-n-drop), border);
10497
+ }
10498
+ }
10499
+ }
10500
+
10501
+ &.disabled {
10502
+ @include mc-file-upload-color(map-get($multiple-states, disabled));
10503
+
10504
+ @include mc-file-upload-text-color(map-get($multiple-states, disabled));
10505
+
10506
+ &.selected {
10507
+ .dropzone {
10508
+ border-top-color: map-get(map-get($multiple-states, disabled), border);
10509
+ }
10510
+ }
10511
+ }
10512
+
10513
+ &:not(.disabled) {
10514
+ .mc-file-upload__row.error {
10515
+ *, .mc-icon {
10516
+ color: map-get($foreground, text-error);
10517
+ }
10518
+ }
10519
+ }
10520
+
10521
+ .multiple__uploaded-item {
10522
+ .mc-list-text {
10523
+ padding-right: 0;
10524
+ }
10525
+ }
10526
+ }
10527
+ }
10528
+
10529
+ .mc-single-file-upload, .mc-multiple-file-upload {
10530
+ .mc-file-upload__hint:not(.mc-error) {
10531
+ color: map-get($foreground, text-less-contrast);
10532
+ }
10533
+ }
10534
+ }
10535
+
10536
+
10537
+ @mixin mc-file-upload-typography($config) {
10538
+ .mc-single-file-upload {
10539
+ @include mc-typography-level-to-styles($config, $file-upload-font-single);
10540
+ }
10541
+
10542
+ .mc-multiple-file-upload {
10543
+ .multiple__header {
10544
+ @include mc-typography-level-to-styles($config, $file-upload-font-multiple-header);
10545
+ }
10546
+
10547
+ .multiple__caption {
10548
+ &, .mc-link {
10549
+ @include mc-typography-level-to-styles($config, $file-upload-font-multiple-caption);
10550
+ }
10551
+ }
10552
+
10553
+ .mc-file-multiple-uploaded__header {
10554
+ @include mc-typography-level-to-styles($config, $file-upload-font-multiple-uploaded-header);
10555
+ }
10556
+
10557
+ .multiple__uploaded-item {
10558
+ @include mc-typography-level-to-styles($config, $file-upload-font-multiple-uploaded-item);
10559
+ }
10560
+
10561
+
10562
+ .mc-file-upload {
10563
+ .mc-list-item,
10564
+ .mc-list-option {
10565
+ @include mc-typography-level-to-styles($config, $file-upload-font-multiple-uploaded-item);
10566
+ }
10567
+ }
10568
+ }
10569
+
10570
+ .mc-single-file-upload, .mc-multiple-file-upload {
10571
+ .mc-file-upload__hint {
10572
+ @include mc-typography-level-to-styles($config, $form-field-hint-font-default);
10573
+ }
10574
+ }
10575
+ }
10576
+
10577
+
10578
+
9950
10579
  @mixin mosaic-theme($theme) {
9951
10580
  @include mc-core-theme($theme);
9952
10581
 
@@ -9954,6 +10583,7 @@ button {
9954
10583
  @include mc-autocomplete-theme($theme);
9955
10584
  @include mc-badge-theme($theme);
9956
10585
  @include mc-button-theme($theme);
10586
+ @include mc-button-toggle-theme($theme);
9957
10587
  @include mc-card-theme($theme);
9958
10588
  @include mc-checkbox-theme($theme);
9959
10589
  @include mc-code-block-theme($theme);
@@ -9994,6 +10624,7 @@ button {
9994
10624
  @include mc-tree-select-theme($theme);
9995
10625
  @include mc-tree-theme($theme);
9996
10626
  @include mc-table-theme($theme);
10627
+ @include mc-file-upload-theme($theme);
9997
10628
  }
9998
10629
 
9999
10630
  @mixin mosaic-typography($config: null, $md-config: null) {
@@ -10011,6 +10642,7 @@ button {
10011
10642
  @include mc-alert-typography($config);
10012
10643
  @include mc-badge-typography($config);
10013
10644
  @include mc-button-typography($config);
10645
+ @include mc-button-toggle-typography($config);
10014
10646
  @include mc-checkbox-typography($config);
10015
10647
  @include mc-code-block-typography($config);
10016
10648
  @include mc-datepicker-typography($config);
@@ -10040,6 +10672,7 @@ button {
10040
10672
  @include mc-tree-select-typography($config);
10041
10673
  @include mc-tree-typography($config);
10042
10674
  @include mc-table-typography($config);
10675
+ @include mc-file-upload-typography($config);
10043
10676
 
10044
10677
  @include mc-markdown-typography($md-config);
10045
10678
  }