@ptsecurity/mosaic 13.9.0 → 13.10.0

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 (183) hide show
  1. package/_theming.scss +80 -58
  2. package/_visual.scss +75 -58
  3. package/core/formatters/date/formatter.d.ts +6 -2
  4. package/design-tokens/legacy-2017/tokens/components/form-field.json5 +2 -2
  5. package/design-tokens/legacy-2017/tokens/components/popover.json5 +1 -0
  6. package/design-tokens/legacy-2017/tokens/components/radio.json5 +1 -0
  7. package/design-tokens/legacy-2017/tokens/properties/typography.json5 +42 -33
  8. package/design-tokens/legacy-2017/tokens.d.ts +44 -35
  9. package/design-tokens/pt-2022/tokens/components/form-field.json5 +3 -3
  10. package/design-tokens/pt-2022/tokens/components/link.json5 +2 -2
  11. package/design-tokens/pt-2022/tokens/components/popover.json5 +7 -6
  12. package/design-tokens/pt-2022/tokens/properties/colors.json5 +6 -6
  13. package/design-tokens/pt-2022/tokens/properties/typography.json5 +33 -24
  14. package/design-tokens/pt-2022/tokens.d.ts +66 -58
  15. package/esm2020/autocomplete/autocomplete.component.mjs +2 -2
  16. package/esm2020/button/button.component.mjs +2 -2
  17. package/esm2020/button-toggle/button-toggle.component.mjs +2 -2
  18. package/esm2020/card/card.component.mjs +2 -2
  19. package/esm2020/checkbox/checkbox.mjs +2 -2
  20. package/esm2020/core/formatters/date/formatter.mjs +7 -3
  21. package/esm2020/core/option/action.mjs +2 -2
  22. package/esm2020/core/option/optgroup.mjs +2 -2
  23. package/esm2020/core/option/option.mjs +2 -2
  24. package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +2 -2
  25. package/esm2020/datepicker/calendar-body.component.mjs +2 -2
  26. package/esm2020/datepicker/calendar.component.mjs +2 -2
  27. package/esm2020/datepicker/datepicker-toggle.component.mjs +2 -2
  28. package/esm2020/datepicker/datepicker.component.mjs +3 -3
  29. package/esm2020/design-tokens/legacy-2017/tokens.mjs +45 -36
  30. package/esm2020/design-tokens/pt-2022/tokens.mjs +67 -59
  31. package/esm2020/divider/divider.component.mjs +2 -2
  32. package/esm2020/dl/dl.component.mjs +2 -2
  33. package/esm2020/dropdown/dropdown-item.component.mjs +2 -2
  34. package/esm2020/dropdown/dropdown.component.mjs +3 -3
  35. package/esm2020/form-field/form-field.mjs +2 -2
  36. package/esm2020/list/list-selection.component.mjs +229 -219
  37. package/esm2020/list/list.component.mjs +2 -2
  38. package/esm2020/loader-overlay/loader-overlay.component.mjs +7 -3
  39. package/esm2020/modal/modal.component.mjs +2 -2
  40. package/esm2020/navbar/navbar.component.mjs +2 -2
  41. package/esm2020/navbar/vertical-navbar.component.mjs +3 -3
  42. package/esm2020/popover/popover-confirm.component.mjs +3 -3
  43. package/esm2020/popover/popover.component.mjs +3 -3
  44. package/esm2020/progress-bar/progress-bar.component.mjs +2 -2
  45. package/esm2020/progress-spinner/progress-spinner.component.mjs +2 -2
  46. package/esm2020/radio/radio.component.mjs +2 -2
  47. package/esm2020/select/select.component.mjs +3 -3
  48. package/esm2020/sidepanel/sidepanel-container.component.mjs +3 -3
  49. package/esm2020/tabs/tab-group.component.mjs +2 -2
  50. package/esm2020/tabs/tab-header.component.mjs +2 -2
  51. package/esm2020/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
  52. package/esm2020/tags/tag-list.component.mjs +2 -2
  53. package/esm2020/tags/tag.component.mjs +2 -2
  54. package/esm2020/toast/toast-container.component.mjs +2 -2
  55. package/esm2020/toast/toast.component.mjs +14 -11
  56. package/esm2020/toggle/toggle.component.mjs +3 -3
  57. package/esm2020/tooltip/tooltip.component.mjs +3 -3
  58. package/esm2020/tree/toggle.mjs +2 -2
  59. package/esm2020/tree/tree-option.component.mjs +7 -3
  60. package/esm2020/tree/tree-selection.component.mjs +7 -1
  61. package/esm2020/tree-select/tree-select.component.mjs +3 -3
  62. package/fesm2015/ptsecurity-mosaic-autocomplete.mjs +2 -2
  63. package/fesm2015/ptsecurity-mosaic-autocomplete.mjs.map +1 -1
  64. package/fesm2015/ptsecurity-mosaic-button-toggle.mjs +2 -2
  65. package/fesm2015/ptsecurity-mosaic-button-toggle.mjs.map +1 -1
  66. package/fesm2015/ptsecurity-mosaic-button.mjs +2 -2
  67. package/fesm2015/ptsecurity-mosaic-button.mjs.map +1 -1
  68. package/fesm2015/ptsecurity-mosaic-card.mjs +2 -2
  69. package/fesm2015/ptsecurity-mosaic-card.mjs.map +1 -1
  70. package/fesm2015/ptsecurity-mosaic-checkbox.mjs +2 -2
  71. package/fesm2015/ptsecurity-mosaic-checkbox.mjs.map +1 -1
  72. package/fesm2015/ptsecurity-mosaic-core.mjs +14 -10
  73. package/fesm2015/ptsecurity-mosaic-core.mjs.map +1 -1
  74. package/fesm2015/ptsecurity-mosaic-datepicker.mjs +8 -8
  75. package/fesm2015/ptsecurity-mosaic-datepicker.mjs.map +1 -1
  76. package/fesm2015/ptsecurity-mosaic-design-tokens.mjs +120 -94
  77. package/fesm2015/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
  78. package/fesm2015/ptsecurity-mosaic-divider.mjs +2 -2
  79. package/fesm2015/ptsecurity-mosaic-divider.mjs.map +1 -1
  80. package/fesm2015/ptsecurity-mosaic-dl.mjs +2 -2
  81. package/fesm2015/ptsecurity-mosaic-dl.mjs.map +1 -1
  82. package/fesm2015/ptsecurity-mosaic-dropdown.mjs +4 -4
  83. package/fesm2015/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  84. package/fesm2015/ptsecurity-mosaic-form-field.mjs +2 -2
  85. package/fesm2015/ptsecurity-mosaic-form-field.mjs.map +1 -1
  86. package/fesm2015/ptsecurity-mosaic-list.mjs +239 -229
  87. package/fesm2015/ptsecurity-mosaic-list.mjs.map +1 -1
  88. package/fesm2015/ptsecurity-mosaic-loader-overlay.mjs +6 -2
  89. package/fesm2015/ptsecurity-mosaic-loader-overlay.mjs.map +1 -1
  90. package/fesm2015/ptsecurity-mosaic-modal.mjs +2 -2
  91. package/fesm2015/ptsecurity-mosaic-modal.mjs.map +1 -1
  92. package/fesm2015/ptsecurity-mosaic-navbar.mjs +4 -4
  93. package/fesm2015/ptsecurity-mosaic-navbar.mjs.map +1 -1
  94. package/fesm2015/ptsecurity-mosaic-popover.mjs +4 -4
  95. package/fesm2015/ptsecurity-mosaic-popover.mjs.map +1 -1
  96. package/fesm2015/ptsecurity-mosaic-progress-bar.mjs +2 -2
  97. package/fesm2015/ptsecurity-mosaic-progress-bar.mjs.map +1 -1
  98. package/fesm2015/ptsecurity-mosaic-progress-spinner.mjs +2 -2
  99. package/fesm2015/ptsecurity-mosaic-progress-spinner.mjs.map +1 -1
  100. package/fesm2015/ptsecurity-mosaic-radio.mjs +2 -2
  101. package/fesm2015/ptsecurity-mosaic-radio.mjs.map +1 -1
  102. package/fesm2015/ptsecurity-mosaic-select.mjs +2 -2
  103. package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
  104. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs +2 -2
  105. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  106. package/fesm2015/ptsecurity-mosaic-tabs.mjs +6 -6
  107. package/fesm2015/ptsecurity-mosaic-tabs.mjs.map +1 -1
  108. package/fesm2015/ptsecurity-mosaic-tags.mjs +4 -4
  109. package/fesm2015/ptsecurity-mosaic-tags.mjs.map +1 -1
  110. package/fesm2015/ptsecurity-mosaic-toast.mjs +16 -11
  111. package/fesm2015/ptsecurity-mosaic-toast.mjs.map +1 -1
  112. package/fesm2015/ptsecurity-mosaic-toggle.mjs +2 -2
  113. package/fesm2015/ptsecurity-mosaic-toggle.mjs.map +1 -1
  114. package/fesm2015/ptsecurity-mosaic-tooltip.mjs +2 -2
  115. package/fesm2015/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  116. package/fesm2015/ptsecurity-mosaic-tree-select.mjs +2 -2
  117. package/fesm2015/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  118. package/fesm2015/ptsecurity-mosaic-tree.mjs +14 -4
  119. package/fesm2015/ptsecurity-mosaic-tree.mjs.map +1 -1
  120. package/fesm2020/ptsecurity-mosaic-autocomplete.mjs +2 -2
  121. package/fesm2020/ptsecurity-mosaic-autocomplete.mjs.map +1 -1
  122. package/fesm2020/ptsecurity-mosaic-button-toggle.mjs +2 -2
  123. package/fesm2020/ptsecurity-mosaic-button-toggle.mjs.map +1 -1
  124. package/fesm2020/ptsecurity-mosaic-button.mjs +2 -2
  125. package/fesm2020/ptsecurity-mosaic-button.mjs.map +1 -1
  126. package/fesm2020/ptsecurity-mosaic-card.mjs +2 -2
  127. package/fesm2020/ptsecurity-mosaic-card.mjs.map +1 -1
  128. package/fesm2020/ptsecurity-mosaic-checkbox.mjs +2 -2
  129. package/fesm2020/ptsecurity-mosaic-checkbox.mjs.map +1 -1
  130. package/fesm2020/ptsecurity-mosaic-core.mjs +14 -10
  131. package/fesm2020/ptsecurity-mosaic-core.mjs.map +1 -1
  132. package/fesm2020/ptsecurity-mosaic-datepicker.mjs +8 -8
  133. package/fesm2020/ptsecurity-mosaic-datepicker.mjs.map +1 -1
  134. package/fesm2020/ptsecurity-mosaic-design-tokens.mjs +120 -94
  135. package/fesm2020/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
  136. package/fesm2020/ptsecurity-mosaic-divider.mjs +2 -2
  137. package/fesm2020/ptsecurity-mosaic-divider.mjs.map +1 -1
  138. package/fesm2020/ptsecurity-mosaic-dl.mjs +2 -2
  139. package/fesm2020/ptsecurity-mosaic-dl.mjs.map +1 -1
  140. package/fesm2020/ptsecurity-mosaic-dropdown.mjs +4 -4
  141. package/fesm2020/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  142. package/fesm2020/ptsecurity-mosaic-form-field.mjs +2 -2
  143. package/fesm2020/ptsecurity-mosaic-form-field.mjs.map +1 -1
  144. package/fesm2020/ptsecurity-mosaic-list.mjs +234 -224
  145. package/fesm2020/ptsecurity-mosaic-list.mjs.map +1 -1
  146. package/fesm2020/ptsecurity-mosaic-loader-overlay.mjs +6 -2
  147. package/fesm2020/ptsecurity-mosaic-loader-overlay.mjs.map +1 -1
  148. package/fesm2020/ptsecurity-mosaic-modal.mjs +2 -2
  149. package/fesm2020/ptsecurity-mosaic-modal.mjs.map +1 -1
  150. package/fesm2020/ptsecurity-mosaic-navbar.mjs +4 -4
  151. package/fesm2020/ptsecurity-mosaic-navbar.mjs.map +1 -1
  152. package/fesm2020/ptsecurity-mosaic-popover.mjs +4 -4
  153. package/fesm2020/ptsecurity-mosaic-popover.mjs.map +1 -1
  154. package/fesm2020/ptsecurity-mosaic-progress-bar.mjs +2 -2
  155. package/fesm2020/ptsecurity-mosaic-progress-bar.mjs.map +1 -1
  156. package/fesm2020/ptsecurity-mosaic-progress-spinner.mjs +2 -2
  157. package/fesm2020/ptsecurity-mosaic-progress-spinner.mjs.map +1 -1
  158. package/fesm2020/ptsecurity-mosaic-radio.mjs +2 -2
  159. package/fesm2020/ptsecurity-mosaic-radio.mjs.map +1 -1
  160. package/fesm2020/ptsecurity-mosaic-select.mjs +2 -2
  161. package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
  162. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs +2 -2
  163. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  164. package/fesm2020/ptsecurity-mosaic-tabs.mjs +6 -6
  165. package/fesm2020/ptsecurity-mosaic-tabs.mjs.map +1 -1
  166. package/fesm2020/ptsecurity-mosaic-tags.mjs +4 -4
  167. package/fesm2020/ptsecurity-mosaic-tags.mjs.map +1 -1
  168. package/fesm2020/ptsecurity-mosaic-toast.mjs +14 -11
  169. package/fesm2020/ptsecurity-mosaic-toast.mjs.map +1 -1
  170. package/fesm2020/ptsecurity-mosaic-toggle.mjs +2 -2
  171. package/fesm2020/ptsecurity-mosaic-toggle.mjs.map +1 -1
  172. package/fesm2020/ptsecurity-mosaic-tooltip.mjs +2 -2
  173. package/fesm2020/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  174. package/fesm2020/ptsecurity-mosaic-tree-select.mjs +2 -2
  175. package/fesm2020/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  176. package/fesm2020/ptsecurity-mosaic-tree.mjs +14 -4
  177. package/fesm2020/ptsecurity-mosaic-tree.mjs.map +1 -1
  178. package/list/list-selection.component.d.ts +53 -52
  179. package/loader-overlay/loader-overlay.component.d.ts +1 -0
  180. package/package.json +4 -4
  181. package/prebuilt-themes/dark-theme.css +1 -1
  182. package/prebuilt-themes/default-theme.css +1 -1
  183. package/tree/tree-option.component.d.ts +1 -0
package/_theming.scss CHANGED
@@ -131,26 +131,26 @@ $dark-color-scheme-error-default: #b9023a;
131
131
  $dark-color-scheme-info-default: #0c6579;
132
132
  $dark-color-scheme-success-default: #016b37;
133
133
  $dark-color-scheme-warning-default: #7e5406;
134
- $dark-color-scheme-foreground-text: #f2f5f9;
134
+ $dark-color-scheme-foreground-text: #d7dee4;
135
135
  $dark-color-scheme-foreground-text-less-contrast: #8c99a5;
136
136
  $dark-color-scheme-foreground-text-disabled: #6d7a86;
137
137
  $dark-color-scheme-foreground-text-error: #ea5868;
138
138
  $dark-color-scheme-foreground-text-success: #319d5c;
139
- $dark-color-scheme-foreground-divider: #333f4a;
139
+ $dark-color-scheme-foreground-divider: mix(#515e69, transparent, 50%);
140
140
  $dark-color-scheme-foreground-border: #515e69;
141
141
  $dark-color-scheme-foreground-icon: #8c99a5;
142
142
  $dark-color-scheme-background-background: #19252f;
143
143
  $dark-color-scheme-background-background-disabled: #333f4a;
144
144
  $dark-color-scheme-background-background-less-contrast: #27333e;
145
145
  $dark-color-scheme-background-background-under: #151e25;
146
- $dark-color-scheme-background-overlay-hover: rgba(black, 0.05);
147
- $dark-color-scheme-background-overlay-active: rgba(black, 0.1);
146
+ $dark-color-scheme-background-overlay-hover: rgba(white, 0.05);
147
+ $dark-color-scheme-background-overlay-active: rgba(white, 0.1);
148
148
  $dark-color-scheme-background-overlay-disabled: rgba(black, 0.2);
149
149
  $dark-color-scheme-states-focused-color: #4187ff;
150
150
  $dark-color-scheme-states-focused-color-error: #b9023a;
151
- $dark-color-scheme-states-selected-color: #023c7f;
151
+ $dark-color-scheme-states-selected-color: rgba(3, 116, 235, 0.3);
152
152
  $dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
153
- $dark-color-scheme-states-disabled-opacity: 0.3;
153
+ $dark-color-scheme-states-disabled-opacity: 0.45;
154
154
  $font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
155
155
  $font-family-base: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
156
156
  $font-family-monospace: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
@@ -647,7 +647,7 @@ $datepicker-toggle-size-height: 30px;
647
647
  $datepicker-body-light-color-scheme-states-selected-color: #0374eb;
648
648
  $datepicker-body-light-color-scheme-states-selected-background: #e7f1ff;
649
649
  $datepicker-body-dark-color-scheme-states-selected-color: #4187ff;
650
- $datepicker-body-dark-color-scheme-states-selected-background: #023c7f;
650
+ $datepicker-body-dark-color-scheme-states-selected-background: rgba(3, 116, 235, 0.3);
651
651
  $datepicker-body-size-label-paddings: 8px 28px 12px 12px;
652
652
  $datepicker-body-size-cell-min-size: 32px;
653
653
  $datepicker-body-size-cell-margin: 5%;
@@ -667,13 +667,13 @@ $datepicker-calendar-font-default: body;
667
667
  $datepicker-calendar-font-header: caption;
668
668
  $datepicker-input-size-width: 130px;
669
669
  $divider-light-color-scheme-color: #d7dee4;
670
- $divider-dark-color-scheme-color: #333f4a;
670
+ $divider-dark-color-scheme-color: mix(#515e69, transparent, 50%);
671
671
  $divider-size-width: 1px;
672
672
  $divider-size-inset-margin: 80px;
673
673
  $description-list-light-color-scheme-dt: #6d7a86;
674
674
  $description-list-light-color-scheme-dd: #19252f;
675
675
  $description-list-dark-color-scheme-dt: #8c99a5;
676
- $description-list-dark-color-scheme-dd: #f2f5f9;
676
+ $description-list-dark-color-scheme-dd: #d7dee4;
677
677
  $description-list-size-grid-template-columns: repeat(4, 1fr);
678
678
  $description-list-size-dt-grid-column: 1;
679
679
  $description-list-size-dd-grid-column: 2 / span 3;
@@ -706,12 +706,12 @@ $form-field-light-color-scheme-border: #bdc7d1;
706
706
  $form-field-light-color-scheme-background: white;
707
707
  $form-field-light-color-scheme-states-hover-border: #8c99a5;
708
708
  $form-field-light-color-scheme-states-invalid-border: #db3c55;
709
- $form-field-light-color-scheme-states-invalid-background: transparent;
709
+ $form-field-light-color-scheme-states-invalid-background: #fff3f3;
710
710
  $form-field-dark-color-scheme-border: #515e69;
711
711
  $form-field-dark-color-scheme-background: transparent;
712
- $form-field-dark-color-scheme-states-hover-border: #515e69;
712
+ $form-field-dark-color-scheme-states-hover-border: #6d7a86;
713
713
  $form-field-dark-color-scheme-states-invalid-border: #b9023a;
714
- $form-field-dark-color-scheme-states-invalid-background: transparent;
714
+ $form-field-dark-color-scheme-states-invalid-background: mix(#41000b, transparent, 30%);
715
715
  $form-field-size-height: 32px;
716
716
  $form-field-size-border-width: 1px;
717
717
  $form-field-size-border-radius: 4px;
@@ -725,10 +725,10 @@ $form-field-password-hint-light-color-scheme-states-invalid-icon-color: #ee6f79;
725
725
  $form-field-password-hint-light-color-scheme-states-invalid-text-color: #19252f;
726
726
  $form-field-password-hint-light-color-scheme-states-valid-text-color: #016b37;
727
727
  $form-field-password-hint-light-color-scheme-states-valid-icon-color: #4ba96c;
728
- $form-field-password-hint-dark-color-scheme-text-color: #f2f5f9;
728
+ $form-field-password-hint-dark-color-scheme-text-color: #d7dee4;
729
729
  $form-field-password-hint-dark-color-scheme-icon-color: #8c99a5;
730
730
  $form-field-password-hint-dark-color-scheme-states-invalid-icon-color: #ee6f79;
731
- $form-field-password-hint-dark-color-scheme-states-invalid-text-color: #f2f5f9;
731
+ $form-field-password-hint-dark-color-scheme-states-invalid-text-color: #d7dee4;
732
732
  $form-field-password-hint-dark-color-scheme-states-valid-text-color: #319d5c;
733
733
  $form-field-password-hint-dark-color-scheme-states-valid-icon-color: #4ba96c;
734
734
  $form-field-password-hint-size-margin-top: 8px;
@@ -737,7 +737,7 @@ $form-field-password-hint-font-default: caption;
737
737
  $forms-light-color-scheme-label: #6d7a86;
738
738
  $forms-light-color-scheme-legend: #19252f;
739
739
  $forms-dark-color-scheme-label: #8c99a5;
740
- $forms-dark-color-scheme-legend: #f2f5f9;
740
+ $forms-dark-color-scheme-legend: #d7dee4;
741
741
  $forms-size-horizontal-row-margin-bottom: 20px;
742
742
  $forms-size-horizontal-label-padding-top: 6px;
743
743
  $forms-size-horizontal-label-padding-bottom: 0;
@@ -805,7 +805,7 @@ $input-size-width: 100%;
805
805
  $input-font-default: body;
806
806
  $input-font-monospace: body-mono;
807
807
  $link-light-color-scheme-text: #0374eb;
808
- $link-light-color-scheme-border-bottom: rgba(#8c99a5, 0.32);
808
+ $link-light-color-scheme-border-bottom: rgba(#0374eb, 0.32);
809
809
  $link-light-color-scheme-state-visited-text: #864775;
810
810
  $link-light-color-scheme-state-visited-border-bottom: rgba(#864775, 0.32);
811
811
  $link-light-color-scheme-state-hover-text: #0059b8;
@@ -813,7 +813,7 @@ $link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
813
813
  $link-light-color-scheme-state-active: #014b9d;
814
814
  $link-light-color-scheme-state-focused-outline: #0374eb;
815
815
  $link-dark-color-scheme-text: #5697ff;
816
- $link-dark-color-scheme-border-bottom: rgba(#6d7a86, 0.32);
816
+ $link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
817
817
  $link-dark-color-scheme-state-visited-text: #bb78a7;
818
818
  $link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
819
819
  $link-dark-color-scheme-state-hover-text: #4187ff;
@@ -832,7 +832,7 @@ $loader-overlay-light-color-scheme-background: mix(white, transparent, 90%);
832
832
  $loader-overlay-light-color-scheme-text: #19252f;
833
833
  $loader-overlay-light-color-scheme-caption: #6d7a86;
834
834
  $loader-overlay-dark-color-scheme-background: mix(#19252f, transparent, 90%);
835
- $loader-overlay-dark-color-scheme-text: #f2f5f9;
835
+ $loader-overlay-dark-color-scheme-text: #d7dee4;
836
836
  $loader-overlay-dark-color-scheme-caption: #8c99a5;
837
837
  $loader-overlay-size-text-max-width: 480px;
838
838
  $loader-overlay-size-fixed-top-padding: 72px;
@@ -855,7 +855,7 @@ $modal-size-close-width: 56px;
855
855
  $modal-size-border-radius: 4px;
856
856
  $modal-size-border-width: 1px;
857
857
  $modal-header-light-color-scheme-border: #d7dee4;
858
- $modal-header-dark-color-scheme-border: #333f4a;
858
+ $modal-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);
859
859
  $modal-header-size-border-radius: 4px 4px 0 0;
860
860
  $modal-header-size-height: 56px;
861
861
  $modal-header-size-padding: 0 16px;
@@ -864,7 +864,7 @@ $modal-body-size-max-height: calc(100vh - 260px);
864
864
  $modal-body-size-padding: 16px 24px 24px;
865
865
  $modal-body-font-default: body;
866
866
  $modal-footer-light-color-scheme-border: #f2f5f9;
867
- $modal-footer-dark-color-scheme-border: #333f4a;
867
+ $modal-footer-dark-color-scheme-border: mix(#515e69, transparent, 50%);
868
868
  $modal-footer-size-border-radius: 0 0 4px 4px;
869
869
  $modal-footer-size-height: 64px;
870
870
  $modal-footer-size-padding: 0 16px;
@@ -910,12 +910,13 @@ $popover-light-color-scheme-text: #19252f;
910
910
  $popover-light-color-scheme-shadow: 0 3px 8px 0 rgba(39, 51, 62, 0.2);
911
911
  $popover-light-color-scheme-border: #d7dee4;
912
912
  $popover-dark-color-scheme-background: #333f4a;
913
- $popover-dark-color-scheme-text: #f2f5f9;
913
+ $popover-dark-color-scheme-text: #d7dee4;
914
914
  $popover-dark-color-scheme-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
915
915
  $popover-dark-color-scheme-border: #333f4a;
916
916
  $popover-size-max-height: 480px;
917
917
  $popover-size-padding: 16px;
918
918
  $popover-size-border-radius: 4px;
919
+ $popover-size-border-width: 1px;
919
920
  $popover-size-arrow-size: 12px;
920
921
  $popover-size-trigger-margin: 9px;
921
922
  $popover-size-small-width: 200px;
@@ -926,7 +927,7 @@ $popover-header-light-color-scheme-border: #d7dee4;
926
927
  $popover-header-light-color-scheme-text: #19252f;
927
928
  $popover-header-light-color-scheme-background: white;
928
929
  $popover-header-dark-color-scheme-border: #434f5a;
929
- $popover-header-dark-color-scheme-text: #f2f5f9;
930
+ $popover-header-dark-color-scheme-text: #d7dee4;
930
931
  $popover-header-dark-color-scheme-background: #333f4a;
931
932
  $popover-header-size-height: 40px;
932
933
  $popover-header-size-padding: 0 16px;
@@ -986,13 +987,13 @@ $sidepanel-light-color-scheme-border: #bdc7d1;
986
987
  $sidepanel-dark-color-scheme-border: #19252f;
987
988
  $sidepanel-font-default: body;
988
989
  $sidepanel-header-light-color-scheme-border: #d7dee4;
989
- $sidepanel-header-dark-color-scheme-border: #333f4a;
990
+ $sidepanel-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);
990
991
  $sidepanel-header-size-height: 56px;
991
992
  $sidepanel-header-size-padding: 0 16px;
992
993
  $sidepanel-header-size-close-padding: 0 0 0 8px;
993
994
  $sidepanel-header-font-default: title;
994
995
  $sidepanel-footer-light-color-scheme-border: #f2f5f9;
995
- $sidepanel-footer-dark-color-scheme-border: #333f4a;
996
+ $sidepanel-footer-dark-color-scheme-border: mix(#515e69, transparent, 50%);
996
997
  $sidepanel-footer-size-height: 64px;
997
998
  $sidepanel-footer-size-padding: 0 16px;
998
999
  $sidepanel-footer-font-default: body;
@@ -1014,9 +1015,9 @@ $tabs-light-color-scheme-state-disabled-text: #8c99a5;
1014
1015
  $tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
1015
1016
  $tabs-dark-color-scheme-border: #333f4a;
1016
1017
  $tabs-dark-color-scheme-state-normal-icon: #8c99a5;
1017
- $tabs-dark-color-scheme-state-normal-text: #f2f5f9;
1018
+ $tabs-dark-color-scheme-state-normal-text: #d7dee4;
1018
1019
  $tabs-dark-color-scheme-state-hover-icon: #6d7a86;
1019
- $tabs-dark-color-scheme-state-hover-text: #f2f5f9;
1020
+ $tabs-dark-color-scheme-state-hover-text: #d7dee4;
1020
1021
  $tabs-dark-color-scheme-state-active-marker-color: #0059b8;
1021
1022
  $tabs-dark-color-scheme-state-empty-icon: mix(#8c99a5, transparent, 30%);
1022
1023
  $tabs-dark-color-scheme-state-empty-text: #6d7a86;
@@ -1035,9 +1036,9 @@ $vertical-tabs-light-color-scheme-state-selected-background: #e7f1ff;
1035
1036
  $vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
1036
1037
  $vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%);
1037
1038
  $vertical-tabs-dark-color-scheme-state-normal-background: transparent;
1038
- $vertical-tabs-dark-color-scheme-state-selected-background: #023c7f;
1039
- $vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
1040
- $vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#023c7f, $lightness:-1%);
1039
+ $vertical-tabs-dark-color-scheme-state-selected-background: rgba(3, 116, 235, 0.3);
1040
+ $vertical-tabs-dark-color-scheme-state-hover-background: rgba(white, 0.05);
1041
+ $vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(rgba(3, 116, 235, 0.3), $lightness:-1%);
1041
1042
  $tags-light-color-scheme-primary-background: #e7f1ff;
1042
1043
  $tags-light-color-scheme-primary-border: transparent;
1043
1044
  $tags-light-color-scheme-primary-text: #0374eb;
@@ -1121,7 +1122,7 @@ $toast-light-color-scheme-icon-success: #4ba96c;
1121
1122
  $toast-light-color-scheme-icon-warning: #e19f12;
1122
1123
  $toast-dark-color-scheme-background: #333f4a;
1123
1124
  $toast-dark-color-scheme-border: rgba(25, 37, 47, 0.1);
1124
- $toast-dark-color-scheme-text: #f2f5f9;
1125
+ $toast-dark-color-scheme-text: #d7dee4;
1125
1126
  $toast-dark-color-scheme-text-caption: #8c99a5;
1126
1127
  $toast-dark-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
1127
1128
  $toast-dark-color-scheme-icon-info: #18a5c5;
@@ -1173,7 +1174,7 @@ $toggle-small-size-width: 24px;
1173
1174
  $toggle-small-size-border-radius: 8px;
1174
1175
  $toggle-small-font-default: caption;
1175
1176
  $tooltip-light-color-scheme-background: #333f4a;
1176
- $tooltip-light-color-scheme-text: #f2f5f9;
1177
+ $tooltip-light-color-scheme-text: #d7dee4;
1177
1178
  $tooltip-light-color-scheme-border: transparent;
1178
1179
  $tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
1179
1180
  $tooltip-light-color-scheme-warning-background: #fff4dd;
@@ -1184,7 +1185,7 @@ $tooltip-dark-color-scheme-text: #19252f;
1184
1185
  $tooltip-dark-color-scheme-border: transparent;
1185
1186
  $tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
1186
1187
  $tooltip-dark-color-scheme-warning-background: #7e5406;
1187
- $tooltip-dark-color-scheme-warning-text: #f2f5f9;
1188
+ $tooltip-dark-color-scheme-warning-text: #d7dee4;
1188
1189
  $tooltip-dark-color-scheme-warning-border: #7e5406;
1189
1190
  $tooltip-size-max-width: 300px;
1190
1191
  $tooltip-size-border-width: 1px;
@@ -1198,7 +1199,7 @@ $extended-tooltip-light-color-scheme-text: #19252f;
1198
1199
  $extended-tooltip-light-color-scheme-border: #d7dee4;
1199
1200
  $extended-tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
1200
1201
  $extended-tooltip-dark-color-scheme-background: #333f4a;
1201
- $extended-tooltip-dark-color-scheme-text: #f2f5f9;
1202
+ $extended-tooltip-dark-color-scheme-text: #d7dee4;
1202
1203
  $extended-tooltip-dark-color-scheme-border: #333f4a;
1203
1204
  $extended-tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
1204
1205
  $extended-tooltip-size-border-radius: 4px;
@@ -1211,7 +1212,7 @@ $extended-tooltip-header-light-color-scheme-border: #d7dee4;
1211
1212
  $extended-tooltip-header-light-color-scheme-text: #19252f;
1212
1213
  $extended-tooltip-header-light-color-scheme-background: white;
1213
1214
  $extended-tooltip-header-dark-color-scheme-border: #434f5a;
1214
- $extended-tooltip-header-dark-color-scheme-text: #f2f5f9;
1215
+ $extended-tooltip-header-dark-color-scheme-text: #d7dee4;
1215
1216
  $extended-tooltip-header-dark-color-scheme-background: #333f4a;
1216
1217
  $extended-tooltip-header-size-height: 40px;
1217
1218
  $extended-tooltip-header-size-padding: 8px 16px;
@@ -1853,63 +1854,63 @@ $typography-display-1-line-height: 76px;
1853
1854
  $typography-display-1-letter-spacing: normal;
1854
1855
  $typography-display-1-font-weight: normal;
1855
1856
  $typography-display-1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1856
- $typography-display-1-text-transform: null;
1857
- $typography-display-1-font-feature-settings: null;
1857
+ $typography-display-1-text-transform: initial;
1858
+ $typography-display-1-font-feature-settings: initial;
1858
1859
  $typography-display-2-font-size: 45px;
1859
1860
  $typography-display-2-line-height: 56px;
1860
1861
  $typography-display-2-letter-spacing: normal;
1861
1862
  $typography-display-2-font-weight: normal;
1862
1863
  $typography-display-2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1863
- $typography-display-2-text-transform: null;
1864
- $typography-display-2-font-feature-settings: null;
1864
+ $typography-display-2-text-transform: initial;
1865
+ $typography-display-2-font-feature-settings: initial;
1865
1866
  $typography-display-3-font-size: 34px;
1866
1867
  $typography-display-3-line-height: 44px;
1867
1868
  $typography-display-3-letter-spacing: normal;
1868
1869
  $typography-display-3-font-weight: normal;
1869
1870
  $typography-display-3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1870
- $typography-display-3-text-transform: null;
1871
- $typography-display-3-font-feature-settings: null;
1871
+ $typography-display-3-text-transform: initial;
1872
+ $typography-display-3-font-feature-settings: initial;
1872
1873
  $typography-headline-font-size: 24px;
1873
1874
  $typography-headline-line-height: 32px;
1874
1875
  $typography-headline-letter-spacing: normal;
1875
1876
  $typography-headline-font-weight: normal;
1876
1877
  $typography-headline-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1877
- $typography-headline-text-transform: null;
1878
- $typography-headline-font-feature-settings: null;
1878
+ $typography-headline-text-transform: initial;
1879
+ $typography-headline-font-feature-settings: initial;
1879
1880
  $typography-title-font-size: 20px;
1880
1881
  $typography-title-line-height: 28px;
1881
1882
  $typography-title-letter-spacing: normal;
1882
1883
  $typography-title-font-weight: 600;
1883
1884
  $typography-title-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1884
- $typography-title-text-transform: null;
1885
- $typography-title-font-feature-settings: null;
1885
+ $typography-title-text-transform: initial;
1886
+ $typography-title-font-feature-settings: initial;
1886
1887
  $typography-subheading-font-size: 15px;
1887
1888
  $typography-subheading-line-height: 20px;
1888
1889
  $typography-subheading-letter-spacing: -0.009em;
1889
1890
  $typography-subheading-font-weight: 600;
1890
1891
  $typography-subheading-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1891
- $typography-subheading-text-transform: null;
1892
+ $typography-subheading-text-transform: initial;
1892
1893
  $typography-subheading-font-feature-settings: "ss01" on, "ss04" on;
1893
1894
  $typography-body-font-size: 15px;
1894
1895
  $typography-body-line-height: 20px;
1895
1896
  $typography-body-letter-spacing: -0.009em;
1896
1897
  $typography-body-font-weight: normal;
1897
1898
  $typography-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1898
- $typography-body-text-transform: null;
1899
+ $typography-body-text-transform: initial;
1899
1900
  $typography-body-font-feature-settings: "ss01" on, "ss04" on;
1900
1901
  $typography-body-tabular-font-size: 15px;
1901
1902
  $typography-body-tabular-line-height: 20px;
1902
1903
  $typography-body-tabular-letter-spacing: -0.009em;
1903
1904
  $typography-body-tabular-font-weight: normal;
1904
1905
  $typography-body-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1905
- $typography-body-tabular-text-transform: null;
1906
+ $typography-body-tabular-text-transform: initial;
1906
1907
  $typography-body-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
1907
1908
  $typography-body-strong-font-size: 15px;
1908
1909
  $typography-body-strong-line-height: 20px;
1909
1910
  $typography-body-strong-letter-spacing: -0.009em;
1910
1911
  $typography-body-strong-font-weight: 500;
1911
1912
  $typography-body-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1912
- $typography-body-strong-text-transform: null;
1913
+ $typography-body-strong-text-transform: initial;
1913
1914
  $typography-body-strong-font-feature-settings: "ss01" on, "ss04" on;
1914
1915
  $typography-body-caps-font-size: 15px;
1915
1916
  $typography-body-caps-line-height: 20px;
@@ -1923,22 +1924,29 @@ $typography-body-mono-line-height: 20px;
1923
1924
  $typography-body-mono-letter-spacing: normal;
1924
1925
  $typography-body-mono-font-weight: normal;
1925
1926
  $typography-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
1926
- $typography-body-mono-text-transform: null;
1927
- $typography-body-mono-font-feature-settings: null;
1927
+ $typography-body-mono-text-transform: initial;
1928
+ $typography-body-mono-font-feature-settings: initial;
1928
1929
  $typography-caption-font-size: 13px;
1929
1930
  $typography-caption-line-height: 16px;
1930
1931
  $typography-caption-letter-spacing: -0.0025em;
1931
1932
  $typography-caption-font-weight: normal;
1932
1933
  $typography-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1933
- $typography-caption-text-transform: null;
1934
+ $typography-caption-text-transform: initial;
1934
1935
  $typography-caption-font-feature-settings: "ss01" on, "ss04" on;
1935
1936
  $typography-caption-tabular-font-size: 13px;
1936
1937
  $typography-caption-tabular-line-height: 16px;
1937
1938
  $typography-caption-tabular-letter-spacing: -0.0025em;
1938
1939
  $typography-caption-tabular-font-weight: normal;
1939
1940
  $typography-caption-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1940
- $typography-caption-tabular-text-transform: null;
1941
+ $typography-caption-tabular-text-transform: initial;
1941
1942
  $typography-caption-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
1943
+ $typography-caption-strong-font-size: 13px;
1944
+ $typography-caption-strong-line-height: 16px;
1945
+ $typography-caption-strong-letter-spacing: -0.0025em;
1946
+ $typography-caption-strong-font-weight: 500;
1947
+ $typography-caption-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1948
+ $typography-caption-strong-text-transform: initial;
1949
+ $typography-caption-strong-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
1942
1950
  $typography-caption-caps-font-size: 13px;
1943
1951
  $typography-caption-caps-line-height: 16px;
1944
1952
  $typography-caption-caps-letter-spacing: 1.5px;
@@ -1951,21 +1959,21 @@ $typography-caption-mono-line-height: 16px;
1951
1959
  $typography-caption-mono-letter-spacing: normal;
1952
1960
  $typography-caption-mono-font-weight: normal;
1953
1961
  $typography-caption-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
1954
- $typography-caption-mono-text-transform: null;
1955
- $typography-caption-mono-font-feature-settings: null;
1962
+ $typography-caption-mono-text-transform: initial;
1963
+ $typography-caption-mono-font-feature-settings: initial;
1956
1964
  $typography-small-text-font-size: 13px;
1957
1965
  $typography-small-text-line-height: 16px;
1958
1966
  $typography-small-text-letter-spacing: -0.0025em;
1959
1967
  $typography-small-text-font-weight: normal;
1960
1968
  $typography-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1961
- $typography-small-text-text-transform: null;
1969
+ $typography-small-text-text-transform: initial;
1962
1970
  $typography-small-text-font-feature-settings: "ss01" on, "ss04" on;
1963
1971
  $typography-extra-small-text-font-size: 11px;
1964
1972
  $typography-extra-small-text-line-height: 16px;
1965
1973
  $typography-extra-small-text-letter-spacing: 0.005em;
1966
1974
  $typography-extra-small-text-font-weight: normal;
1967
1975
  $typography-extra-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
1968
- $typography-extra-small-text-text-transform: null;
1976
+ $typography-extra-small-text-text-transform: initial;
1969
1977
  $typography-extra-small-text-font-feature-settings: "ss01" on, "ss04" on;
1970
1978
  $typography-extra-small-text-caps-font-size: 11px;
1971
1979
  $typography-extra-small-text-caps-line-height: 16px;
@@ -1979,8 +1987,8 @@ $typography-extra-small-text-mono-line-height: 16px;
1979
1987
  $typography-extra-small-text-mono-letter-spacing: 0px;
1980
1988
  $typography-extra-small-text-mono-font-weight: normal;
1981
1989
  $typography-extra-small-text-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
1982
- $typography-extra-small-text-mono-text-transform: null;
1983
- $typography-extra-small-text-mono-font-feature-settings: null;
1990
+ $typography-extra-small-text-mono-text-transform: initial;
1991
+ $typography-extra-small-text-mono-font-feature-settings: initial;
1984
1992
 
1985
1993
  $mosaic: (
1986
1994
  'typography': (
@@ -2101,6 +2109,15 @@ $mosaic: (
2101
2109
  'text-transform': $typography-caption-tabular-text-transform,
2102
2110
  'font-feature-settings': $typography-caption-tabular-font-feature-settings
2103
2111
  ),
2112
+ 'caption-strong': (
2113
+ 'font-size': $typography-caption-strong-font-size,
2114
+ 'line-height': $typography-caption-strong-line-height,
2115
+ 'letter-spacing': $typography-caption-strong-letter-spacing,
2116
+ 'font-weight': $typography-caption-strong-font-weight,
2117
+ 'font-family': $typography-caption-strong-font-family,
2118
+ 'text-transform': $typography-caption-strong-text-transform,
2119
+ 'font-feature-settings': $typography-caption-strong-font-feature-settings
2120
+ ),
2104
2121
  'caption-caps': (
2105
2122
  'font-size': $typography-caption-caps-font-size,
2106
2123
  'line-height': $typography-caption-caps-line-height,
@@ -4050,6 +4067,10 @@ $fonts: (
4050
4067
  @include mc-typography-level-to-styles($config, small-text);
4051
4068
  }
4052
4069
 
4070
+ .mc-caption_strong {
4071
+ @include mc-typography-level-to-styles($config, caption-strong);
4072
+ }
4073
+
4053
4074
  .mc-extra-small-text {
4054
4075
  @include mc-typography-level-to-styles($config, extra-small-text);
4055
4076
  }
@@ -4080,6 +4101,7 @@ $fonts: (
4080
4101
 
4081
4102
  caption: map-get($typography, caption),
4082
4103
  caption-caps: map-get($typography, caption-caps),
4104
+ caption-strong: map-get($typography, caption-strong),
4083
4105
  caption-mono: map-get($typography, caption-mono),
4084
4106
  caption-tabular: map-get($typography, caption-tabular),
4085
4107