@ptsecurity/mosaic 17.1.0 → 17.2.1

package/tree-select/_tree-select-theme.scss

@@ -4,6 +4,8 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/popup' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-tree-select-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -12,36 +14,34 @@
     $list: map-get(map-get($theme, components), list);
 
     .mc-tree-select {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
 
         &.ng-invalid {
-            color: mc-color($error);
+            color: mc-css-variable(error-default, mc-color($error));
         }
 
         &.mc-disabled {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
     }
 
     .mc-tree-select__placeholder {
-        color: map.get($foreground, text-disabled);
+        color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
     }
 
     .mc-tree-select__panel {
         @include popup-params($theme);
 
         & .mc-tree-select__footer {
-            background: map.get($list, footer-background);
-            border-top-color: map.get($list, footer-divider);
+            background: mc-css-variable(list-footer-background, map-get($list, footer-background));
+            border-top-color: mc-css-variable(list-footer-divider, map-get($list, footer-divider));
         }
     }
 }
 
 @mixin mc-tree-select-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-tree-select,
     .mc-tree-select__panel {
-        @include mc-typography-level-to-styles($config, map.get($tokens, select-panel-font-default));
+        @include mc-typography-css-variables(select-panel, default);
     }
 }

package/tree-select/tree-select.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -32,24 +33,15 @@ $tokens: meta.module-variables(tokens) !default;
     box-sizing: border-box;
     position: relative;
 
-    height: var(--mc-form-field-size-height, map.get($tokens, form-field-size-height));
+    height: mc-css-variable(form-field-size-height);
 
     cursor: pointer;
 
-    padding-left: calc(
-        var(--mc-select-size-left-padding, #{map.get($tokens, select-size-left-padding)}) -
-        var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
-    padding-right: calc(
-        var(--mc-select-size-right-padding, #{map.get($tokens, select-size-right-padding)}) -
-        var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
+    padding-left: mc-css-variable(select-size-left-padding);
+    padding-right: mc-css-variable(select-size-right-padding);
 
     &.mc-tree-select__trigger_multiple {
-        padding-left: calc(
-            var(--mc-select-size-left-padding-multiple, #{map.get($tokens, select-size-left-padding-multiple)}) -
-            var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-        );
+        padding-left: mc-css-variable(select-size-left-padding-multiple);
 
         & .mc-tree-select__placeholder {
             margin-left: 8px;
@@ -90,10 +82,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     overflow: hidden;
 
-    max-height: calc(
-        var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) -
-        (var(--mc-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
-    );
+    max-height: mc-css-variable(form-field-size-height, 28px);
 
     & .mc-tag {
         margin-right: 4px;
@@ -147,44 +136,37 @@ $tokens: meta.module-variables(tokens) !default;
 
 .mc-tree-select__panel {
     min-width: 100%; // prevents some animcion twitching and test inconsistencies in IE11
-    max-width: var(--mc-select-panel-size-max-width, map.get($tokens, select-panel-size-max-width));
+    max-width: mc-css-variable(select-panel-size-max-width);
 
     border: {
-        width: var(--mc-select-panel-size-border-width, map.get($tokens, select-panel-size-border-width));
+        width: mc-css-variable(select-panel-size-border-width);
         style: solid;
     }
 
-    border-bottom-left-radius: var(
-        --mc-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
-    border-bottom-right-radius: var(
-        --mc-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
+    border-bottom-left-radius: mc-css-variable(select-panel-size-border-radius);
+    border-bottom-right-radius: mc-css-variable(select-panel-size-border-radius);
 
     // Override optgroup and option to scale based on font-size of the trigger.
     .mc-optgroup-label,
     .mc-tree-select-option {
         font-size: inherit;
-        line-height: var(--mc-option-size-height, map.get($tokens, option-size-height));
-        height: var(--mc-option-size-height, map.get($tokens, option-size-height));
+        line-height: mc-css-variable(option-size-height);
+        height: mc-css-variable(option-size-height);
     }
 
     & .mc-tree-select__footer {
         display: flex;
         align-items: center;
         box-sizing: border-box;
-        padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+        padding: mc-css-variable(size-xxs) mc-css-variable(size-m);
         border-top-width: 1px;
         border-top-style: solid;
-        min-height: var(
-            --mc-list-size-footer-min-height,
-            map.get($tokens, list-size-footer-min-height)
-        );
+        min-height: mc-css-variable(list-size-footer-min-height);
     }
 }
 
 .mc-tree-select__content {
-    max-height: var(--mc-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
+    max-height: mc-css-variable(select-panel-size-max-height);
 
     overflow: auto;
 
@@ -208,13 +190,13 @@ $tokens: meta.module-variables(tokens) !default;
     position: relative;
 
     max-width: 100%;
-    height: var(--mc-option-size-height, map.get($tokens, option-size-height));
+    height: mc-css-variable(option-size-height);
 
     cursor: default;
     outline: none;
 
-    padding-left: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-    padding-right: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+    padding-left: mc-css-variable(option-size-horizontal-padding);
+    padding-right: mc-css-variable(option-size-horizontal-padding);
 }
 
 .mc-select__search-container {