@ptsecurity/mosaic 17.0.0 → 17.2.0

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,26 +136,22 @@ $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 {
@@ -176,15 +161,12 @@ $tokens: meta.module-variables(tokens) !default;
         padding: map.get($tokens, size-xxs) map.get($tokens, 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 {