@ptsecurity/mosaic 17.1.0 → 17.2.1

package/popover/_popover-theme.scss

@@ -1,83 +1,85 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-popover-theme($theme) {
     $foreground: map.get($theme, foreground);
 
-    $popover: map.get(map.get($theme, components), popover);
+    $popover: map.get($theme, components, popover);
 
     $header: map.get($popover, header);
     $footer: map.get($popover, footer);
 
     .mc-popover {
-        border-color: map.get($popover, border);
+        border-color: mc-css-variable(popover-border, map-get($popover, border));
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     }
 
     .mc-popover__header {
-        color: map.get($header, text);
-        background: map.get($header, background);
-        border-bottom-color: map.get($header, border);
+        color: mc-css-variable(popover-header-text, map-get($header, text));
+        background: mc-css-variable(popover-header-background, map-get($header, background));
+        border-bottom-color: mc-css-variable(popover-header-border, map-get($header, border));
     }
 
     .mc-popover__container,
     .mc-popover__content {
-        color: map.get($popover, text);
-        background-color: map.get($popover, background);
+        color: mc-css-variable(popover-text, map-get($popover, text));
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
     }
 
     .mc-popover__footer {
-        border-top-color: map.get($footer, border);
-        background-color: map.get($footer, background);
+        border-top-color: mc-css-variable(popover-footer-border, map-get($footer, border));
+        background-color: mc-css-variable(popover-footer-background, map-get($footer, background));
     }
 
     .mc-popover .mc-popover__arrow {
-        border-color: map.get($popover, border);
+        border-color: mc-css-variable(popover-border, map-get($popover, border));
     }
 
     .mc-popover_placement-top .mc-popover__arrow,
     .mc-popover_placement-top-left .mc-popover__arrow,
     .mc-popover_placement-top-right .mc-popover__arrow {
-        background-color: map.get($popover, background);
-        border-top-color: map.get($popover, border);
-        border-left-color: map.get($popover, border);
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-top-color: mc-css-variable(popover-border, map-get($popover, border));
+        border-left-color: mc-css-variable(popover-border, map-get($popover, border));
     }
 
     .mc-popover_placement-top .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-top-left .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-top-right .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-top-color: map.get($footer, border);
-        border-left-color: map.get($footer, border);
+        background-color: mc-css-variable(popover-footer-background, map-get($footer, background));
+        border-top-color: mc-css-variable(popover-footer-border, map-get($footer, border));
+        border-left-color: mc-css-variable(popover-footer-border, map-get($footer, border));
     }
 
     .mc-popover_placement-right .mc-popover__arrow,
     .mc-popover_placement-right-top .mc-popover__arrow,
     .mc-popover_placement-right-bottom .mc-popover__arrow {
-        background-color: map.get($popover, background);
-        border-top-color: map.get($popover, background);
-        border-right-color: map.get($popover, background);
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-top-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-right-color: mc-css-variable(popover-background, map-get($popover, background));
     }
 
     .mc-popover_placement-right-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-top-color: map.get($footer, border);
-        border-right-color: map.get($footer, border);
+        background-color: mc-css-variable(popover-footer-background, map-get($footer, background));
+        border-top-color: mc-css-variable(popover-footer-border, map-get($footer, border));
+        border-right-color: mc-css-variable(popover-footer-border, map-get($footer, border));
     }
 
     .mc-popover_placement-left .mc-popover__arrow,
     .mc-popover_placement-left-top .mc-popover__arrow,
     .mc-popover_placement-left-bottom .mc-popover__arrow {
-        background-color: map.get($popover, background);
-        border-bottom-color: map.get($popover, background);
-        border-left-color: map.get($popover, background);
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-bottom-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-left-color: mc-css-variable(popover-background, map-get($popover, background));
     }
 
     .mc-popover_placement-left-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-bottom-color: map.get($footer, border);
-        border-left-color: map.get($footer, border);
+        background-color: mc-css-variable(popover-footer-background, map-get($footer, background));
+        border-bottom-color: mc-css-variable(popover-footer-border, map-get($footer, border));
+        border-left-color: mc-css-variable(popover-footer-border, map-get($footer, border));
     }
 
     .mc-popover_placement-bottom .mc-popover__arrow,
@@ -86,24 +88,22 @@
     .mc-popover_placement-bottom .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-bottom-left .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-bottom-right .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: map.get($popover, background);
-        border-right-color: map.get($popover, background);
-        border-bottom-color: map.get($popover, background);
+        background-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-right-color: mc-css-variable(popover-background, map-get($popover, background));
+        border-bottom-color: mc-css-variable(popover-background, map-get($popover, background));
     }
 }
 
 @mixin mc-popover-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-popover__header {
-        @include mc-typography-level-to-styles($config, map.get($tokens, popover-header-font-default));
+        @include mc-typography-css-variables(popover-header, default);
     }
 
     .mc-popover__content {
-        @include mc-typography-level-to-styles($config, map.get($tokens, popover-font-default));
+        @include mc-typography-css-variables(popover, default);
     }
 
     .mc-popover__footer {
-        @include mc-typography-level-to-styles($config, map.get($tokens, popover-footer-font-default));
+        @include mc-typography-css-variables(popover-footer, default);
     }
 }

package/popover/popover.scss

@@ -5,6 +5,7 @@
 @use '../core/pop-up/pop-up';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -12,8 +13,8 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-popover {
     position: relative;
 
-    border-radius: var(--mc-popover-size-border-radius, map.get($tokens, popover-size-border-radius));
-    border-width: var(--mc-popover-size-border-width, map.get($tokens, popover-size-border-width));
+    border-radius: mc-css-variable(popover-size-border-radius);
+    border-width: mc-css-variable(popover-size-border-width);
     border-style: solid;
 
     box-sizing: border-box;
@@ -24,15 +25,15 @@ $tokens: meta.module-variables(tokens) !default;
     white-space: pre-line;
 
     &.mc-popover_small {
-        max-width: var(--mc-popover-size-small-width, map.get($tokens, popover-size-small-width));
+        max-width: mc-css-variable(popover-size-small-width);
     }
 
     &.mc-popover_medium {
-        max-width: var(--mc-popover-size-medium-width, map.get($tokens, popover-size-medium-width));
+        max-width: mc-css-variable(popover-size-medium-width);
     }
 
     &.mc-popover_large {
-        max-width: var(--mc-popover-size-large-width, map.get($tokens, popover-size-large-width));
+        max-width: mc-css-variable(popover-size-large-width);
     }
 
     $popover-distance: calc(var(--mc-popover-size-trigger-margin, #{map.get($tokens, popover-size-trigger-margin)}));
@@ -44,8 +45,8 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     flex-direction: column;
 
-    max-height: var(--mc-popover-size-max-height, map.get($tokens, popover-size-max-height));
-    border-radius: var(--mc-popover-size-border-radius, map.get($tokens, popover-size-border-radius));
+    max-height: mc-css-variable(popover-size-max-height);
+    border-radius: mc-css-variable(popover-size-border-radius);
     overflow: hidden;
 }
 
@@ -53,9 +54,9 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     align-items: center;
 
-    height: var(--mc-popover-header-size-height, map.get($tokens, popover-header-size-height));
+    height: mc-css-variable(popover-header-size-height);
 
-    padding: var(--mc-popover-header-size-padding, map.get($tokens, popover-header-size-padding));
+    padding: mc-css-variable(popover-header-size-padding);
 
     border-bottom-width: 1px;
     border-bottom-style: solid;
@@ -64,7 +65,7 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-popover__content {
     overflow: hidden;
 
-    padding: var(--mc-popover-size-padding, map.get($tokens, popover-size-padding));
+    padding: mc-css-variable(popover-size-padding);
 
     &.mc-popover__content_padding_bottom {
         padding-bottom: calc(
@@ -77,9 +78,9 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-popover__footer {
     box-sizing: border-box;
 
-    height: var(--mc-popover-footer-size-height, map.get($tokens, popover-footer-size-height));
+    height: mc-css-variable(popover-footer-size-height);
 
-    padding: var(--mc-popover-footer-size-padding, map.get($tokens, popover-footer-size-padding));
+    padding: mc-css-variable(popover-footer-size-padding);
 
     border-top-width: 1px;
     border-top-style: solid;
@@ -90,8 +91,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     z-index: -1;
 
-    width: var(--mc-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size)});
-    height: var(--mc-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size)});
+    width: mc-css-variable(popover-size-arrow-size);
+    height: mc-css-variable(popover-size-arrow-size);
 
     border: solid 1px;