@ptsecurity/mosaic 17.1.0 → 17.2.0

package/loader-overlay/_loader-overlay-theme.scss

@@ -2,32 +2,32 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-loader-overlay-theme($theme) {
-    $loader-overlay: map.get(map.get($theme, components), loader-overlay);
+    $loader-overlay: map-get(map-get($theme, components), loader-overlay);
 
     .mc-loader-overlay {
-        background: map.get($loader-overlay, background);
+        background: mc-css-variable(loader-overlay-background, map-get($loader-overlay, background));
     }
 
     .mc-loader-overlay-text {
-        color: map.get($loader-overlay, text);
+        color: mc-css-variable(loader-overlay-text, map-get($loader-overlay, text));
     }
 
     .mc-loader-overlay-caption {
-        color: map.get($loader-overlay, caption);
+        color: mc-css-variable(loader-overlay-caption, map-get($loader-overlay, caption));
     }
 }
 
 @mixin mc-loader-overlay-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-loader-overlay-text {
-        @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-text));
+        @include mc-typography-css-variables(loader-overlay, text);
     }
 
     .mc-loader-overlay-caption {
-        @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-caption));
+        @include mc-typography-css-variables(loader-overlay, caption);
     }
 }
 

package/loader-overlay/loader-overlay.scss

@@ -3,6 +3,7 @@
 
 @use '../core/styles/tokens';
 @use '../core/styles/variables';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -41,34 +42,28 @@ $tokens: meta.module-variables(tokens) !default;
         justify-content: unset;
 
         & .mc-loader-overlay__container {
-            margin-top: var(
-                --mc-loader-overlay-size-fixed-top-padding,
-                map.get($tokens, loader-overlay-size-fixed-top-padding)
-            );
+            margin-top: mc-css-variable(loader-overlay-size-fixed-top-padding);
         }
     }
 
     &.mc-loader-overlay_center:not(.mc-loader-overlay_empty) .mc-loader-overlay__container {
         transform: translateY(
-            var(
-                --mc-loader-overlay-size-center-optical-compensation,
-                map.get($tokens, loader-overlay-size-center-optical-compensation)
-            ));
+            mc-css-variable(loader-overlay-size-center-optical-compensation));
     }
 }
 
 .mc-loader-overlay-text {
-    margin-top: map.get($tokens, size-s);
+    margin-top: mc-css-variable(size-s);
 
-    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+    max-width: mc-css-variable(loader-overlay-size-text-max-width);
 
     text-align: center;
 }
 
 .mc-loader-overlay-caption {
-    margin-top: map.get($tokens, size-3xs);
+    margin-top: mc-css-variable(size-3xs);
 
-    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+    max-width: mc-css-variable(loader-overlay-size-text-max-width);
 
     text-align: center;
 }

package/markdown/_markdown-theme.scss

@@ -2,138 +2,156 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-markdown-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
     $markdown: map.get(map.get($theme, components), markdown);
-    $tokens: map.get($theme, tokens);
 
     .mc-markdown {
-        color: map.get($foreground, text);
-        background: map.get($background, background);;
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
+        background: mc-css-variable(background-background, map-get($background, background));
 
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {
             .mc-markdown__h#{$i} {
-                color: map.get($markdown, h#{$i}-color);
+                color: mc-css-variable(markdown-h#{$i}-color, map-get($markdown, h#{$i}-color));
             }
         }
 
         .mc-markdown__p {
-            color: map.get($markdown, p-color);
+            color: mc-css-variable(markdown-p-color, map-get($markdown, p-color));
         }
 
         .mc-markdown__ul,
         .mc-markdown__ol {
-            color: map.get($markdown, list-color);
+            color: mc-css-variable(markdown-list-color, map-get($markdown, list-color));
         }
 
         .mc-markdown__blockquote {
-            color: map.get($markdown, blockquote-text);
-            background: map.get($markdown, blockquote-background);
-            border-color: map.get($markdown, blockquote-border);
-            border-left-color: map.get($markdown, blockquote-line);
+            color: mc-css-variable(markdown-blockquote-text, map-get($markdown, blockquote-text));
+            background: mc-css-variable(markdown-blockquote-background, map-get($markdown, blockquote-background));
+            border-color: mc-css-variable(markdown-blockquote-border, map-get($markdown, blockquote-border));
+            border-left-color: mc-css-variable(markdown-blockquote-line, map-get($markdown, blockquote-line));
         }
 
         .mc-markdown__pre,
         .mc-markdown__p > .mc-markdown__code {
-            color: map.get($markdown, code-text);
-            background-color: map.get($markdown, code-background);
-            border-color: map.get($markdown, code-border);
+            color: mc-css-variable(markdown-code-text, map-get($markdown, code-text));
+            background-color: mc-css-variable(markdown-code-background, map-get($markdown, code-background));
+            border-color: mc-css-variable(markdown-code-border, map-get($markdown, code-border));
         }
 
         .mc-markdown__a {
-            color: map.get($markdown, link-text);
-            border-bottom-color: map.get($markdown, link-border-bottom);
+            color: mc-css-variable(markdown-link-text, map-get($markdown, link-text));
+            border-bottom-color: mc-css-variable(markdown-link-border-bottom, map-get($markdown, link-border-bottom));
 
             &:visited {
-                color: map.get($markdown, link-state-visited-text);
-                border-bottom-color: map.get($markdown, link-state-visited-border-bottom);
+                color: mc-css-variable(markdown-link-state-visited-text, map-get($markdown, link-state-visited-text));
+                border-bottom-color: mc-css-variable(
+                    markdown-link-state-visited-border-bottom, map-get($markdown, link-state-visited-border-bottom));
             }
 
             &:hover {
-                color: map.get($markdown, link-state-hover-text);
+                color: mc-css-variable(markdown-link-state-hover-text, map-get($markdown, link-state-hover-text));
                 transition: color 0ms;
-                border-bottom-color: map.get($markdown, link-state-hover-border-bottom);
+                border-bottom-color: mc-css-variable(
+                    markdown-link-state-hover-border-bottom, map-get($markdown, link-state-hover-border-bottom));
             }
 
             &:active {
-                color: map.get($markdown, link-state-active-text);
+                color: mc-css-variable(markdown-link-state-active-text, map-get($markdown, link-state-active-text));
             }
 
             &:focus {
                 outline:
-                    map.get($markdown, link-state-focused-outline)
+                    mc-css-variable(markdown-link-state-focused-outline, map-get($markdown, link-state-focused-outline))
                     solid
-                    map.get($tokens, markdown-link-size-state-focused-outline-width);
+                    mc-css-variable(markdown-link-size-state-focused-outline-width);
 
-                outline-offset: map.get($tokens, markdown-link-size-state-focused-outline-offset);
+                outline-offset: mc-css-variable(markdown-link-size-state-focused-outline-offset);
             }
         }
 
         .mc-markdown__img + em {
-            color: map.get($markdown, image-caption-text);
+            color: mc-css-variable(markdown-image-caption-text, map-get($markdown, image-caption-text));
         }
 
         .mc-markdown__hr {
-            border-bottom-color: map.get($markdown, hr-color);
+            border-bottom-color: mc-css-variable(markdown-hr-color, map-get($markdown, hr-color));
         }
 
         .mc-markdown__table > .mc-markdown__thead {
-            color: map.get($markdown, table-header);
-            border-bottom-color: map.get($markdown, table-border);
+            color: mc-css-variable(markdown-table-header, map-get($markdown, table-header));
+            border-bottom-color: mc-css-variable(markdown-table-border, map-get($markdown, table-border));
         }
 
         .mc-markdown__table > .mc-markdown__tbody {
-            color: map.get($markdown, table-body);
+            color: mc-css-variable(markdown-table-body, map-get($markdown, table-body));
         }
     }
 }
 
 @mixin mc-markdown-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-markdown {
-        // h1, h2, h3, h4, h5, h6
-        @for $i from 1 through 6 {
-            .mc-markdown__h#{$i} {
-                @include mc-typography-level-to-styles($config, map.get($tokens, markdown-h#{$i}-font-default));
-            }
+        .mc-markdown__h1 {
+            @include mc-typography-css-variables(markdown-h1, default);
+        }
+
+        .mc-markdown__h2 {
+            @include mc-typography-css-variables(markdown-h2, default);
+        }
+
+        .mc-markdown__h3 {
+            @include mc-typography-css-variables(markdown-h3, default);
+        }
+
+        .mc-markdown__h4 {
+            @include mc-typography-css-variables(markdown-h4, default);
+        }
+
+        .mc-markdown__h5 {
+            @include mc-typography-css-variables(markdown-h5, default);
+        }
+
+        .mc-markdown__h6 {
+            @include mc-typography-css-variables(markdown-h6, default);
         }
 
         .mc-markdown__p {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-p-font-default));
+            @include mc-typography-css-variables(markdown-p, default);
         }
 
         .mc-markdown__ul,
         .mc-markdown__ol {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-list-font-default));
+            @include mc-typography-css-variables(markdown-list, default);
         }
 
         .mc-markdown__blockquote > .mc-markdown__p {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-blockquote-font-default));
+            @include mc-typography-css-variables(markdown-blockquote, default);
         }
 
         .mc-markdown__code {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-code-font-default));
+            @include mc-typography-css-variables(markdown-code, default);
         }
 
         .mc-markdown__a {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-link-font-default));
+            @include mc-typography-css-variables(markdown-link, default);
         }
 
         .mc-markdown__img + em {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-image-font-caption));
+            @include mc-typography-css-variables(markdown-image, caption);
         }
 
         .mc-markdown__table > .mc-markdown__thead {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-header));
+            @include mc-typography-css-variables(markdown-table, header);
         }
 
         .mc-markdown__table > .mc-markdown__tbody {
-            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-body));
+            @include mc-typography-css-variables(markdown-table, body);
         }
     }
 }

package/markdown/markdown.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -20,11 +21,12 @@ $tokens: meta.module-variables(tokens) !default;
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
         .mc-markdown__h#{$i} {
-            max-width: var(--mc-markdown-h#{$i}-size-max-width, map.get($tokens, markdown-h#{$i}-size-max-width));
-            margin-top: var(--mc-markdown-h#{$i}-size-margin-top, map.get($tokens, markdown-h#{$i}-size-margin-top));
-            margin-bottom: var(
-                --mc-markdown-h#{$i}-size-margin-bottom, map.get($tokens, markdown-h#{$i}-size-margin-bottom)
-            );
+            max-width: mc-css-variable(
+                mc-markdown-h#{$i}-size-max-width, map.get($tokens, markdown-h#{$i}-size-max-width));
+            margin-top: mc-css-variable(
+                mc-markdown-h#{$i}-size-margin-top, map.get($tokens, markdown-h#{$i}-size-margin-top));
+            margin-bottom: mc-css-variable(
+                mc-markdown-h#{$i}-size-margin-bottom, map.get($tokens, markdown-h#{$i}-size-margin-bottom));
         }
     }
 
@@ -40,29 +42,26 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .mc-markdown__p {
-        max-width: var(--mc-markdown-p-size-max-width, map.get($tokens, markdown-p-size-max-width));
-        margin-top: var(--mc-markdown-p-size-margin-top, map.get($tokens, markdown-p-size-margin-top));
-        margin-bottom: var(--mc-markdown-p-size-margin-bottom, map.get($tokens, markdown-p-size-margin-bottom));
+        max-width: mc-css-variable(markdown-p-size-max-width);
+        margin-top: mc-css-variable(markdown-p-size-margin-top);
+        margin-bottom: mc-css-variable(markdown-p-size-margin-bottom);
     }
 
     .mc-markdown__ul,
     .mc-markdown__ol {
-        max-width: var(--mc-markdown-list-size-max-width, map.get($tokens, markdown-list-size-max-width));
-        margin-top: var(--mc-markdown-list-size-margin-top, map.get($tokens, markdown-list-size-margin-top));
-        margin-bottom: var(--mc-markdown-list-size-margin-bottom, map.get($tokens, markdown-list-size-margin-bottom));
+        max-width: mc-css-variable(markdown-list-size-max-width);
+        margin-top: mc-css-variable(markdown-list-size-margin-top);
+        margin-bottom: mc-css-variable(markdown-list-size-margin-bottom);
 
         > li {
-            margin-bottom: var(
-                --mc-markdown-list-size-item-margin-bottom,
-                map.get($tokens, markdown-list-size-item-margin-bottom)
-            );
+            margin-bottom: mc-css-variable(markdown-list-size-item-margin-bottom);
         }
     }
 
     .mc-markdown__ul {
         position: relative;
         list-style: none;
-        padding: var(--mc-markdown-list-size-ul-padding, map.get($tokens, markdown-list-size-ul-padding));
+        padding: mc-css-variable(markdown-list-size-ul-padding);
     }
 
     .mc-markdown__ul > li:before {
@@ -84,10 +83,7 @@ $tokens: meta.module-variables(tokens) !default;
             &:before {
                 content:counter(li) ".";
                 counter-increment: li;
-                padding-right: var(
-                    --mc-markdown-list-size-ol-number-padding-right,
-                    map.get($tokens, markdown-list-size-ol-number-padding-right)
-                );
+                padding-right: mc-css-variable(markdown-list-size-ol-number-padding-right);
             }
 
             > * {
@@ -98,33 +94,20 @@ $tokens: meta.module-variables(tokens) !default;
 
     .mc-markdown__p + .mc-markdown__ul,
     .mc-markdown__p + .mc-markdown__ol {
-        margin-top: var(
-            --mc-markdown-list-size-margin-top-after-paragraph,
-            map.get($tokens, markdown-list-size-margin-top-after-paragraph)
-        );
+        margin-top: mc-css-variable(markdown-list-size-margin-top-after-paragraph);
     }
 
     .mc-markdown__blockquote {
-        max-width: var(
-            --mc-markdown-blockquote-size-max-width, map.get($tokens, markdown-blockquote-size-max-width)
-        );
-        margin-top: var(
-            --mc-markdown-blockquote-size-margin-top, map.get($tokens, markdown-blockquote-size-margin-top)
-        );
+        max-width: mc-css-variable(markdown-blockquote-size-max-width);
+        margin-top: mc-css-variable(markdown-blockquote-size-margin-top);
 
-        margin-bottom: var(
-            --mc-markdown-blockquote-size-margin-bottom, map.get($tokens, markdown-blockquote-size-margin-bottom)
-        );
+        margin-bottom: mc-css-variable(markdown-blockquote-size-margin-bottom);
 
-        border-left-width: var(
-            --mc-markdown-blockquote-size-line-width, map.get($tokens, markdown-blockquote-size-line-width)
-        );
+        border-left-width: mc-css-variable(markdown-blockquote-size-line-width);
 
         border-left-style: solid;
 
-        padding: var(
-            --mc-markdown-blockquote-size-padding, map.get($tokens, markdown-blockquote-size-padding)
-        );
+        padding: mc-css-variable(markdown-blockquote-size-padding);
 
         margin-left: 0;
         margin-right: 0;
@@ -139,53 +122,33 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
         overflow-x: auto;
 
-        margin-top: var(
-            --mc-markdown-code-size-multiline-margin-top,
-            map.get($tokens, markdown-code-size-multiline-margin-top)
-        );
-        margin-bottom: var(
-            --mc-markdown-code-size-multiline-margin-bottom,
-            map.get($tokens, markdown-code-size-multiline-margin-bottom)
-        );
+        margin-top: mc-css-variable(markdown-code-size-multiline-margin-top);
+        margin-bottom: mc-css-variable(markdown-code-size-multiline-margin-bottom);
 
-        padding: var(
-            --mc-markdown-code-size-multiline-padding,
-            map.get($tokens, markdown-code-size-multiline-padding)
-        );
+        padding: mc-css-variable(markdown-code-size-multiline-padding);
     }
 
     .mc-markdown__pre,
     .mc-markdown__p > .mc-markdown__code {
-        border-radius: var(
-            --mc-markdown-code-size-border-radius, map.get($tokens, markdown-code-size-border-radius)
-        );
-        border-width: var(
-            --mc-markdown-code-size-border-width, map.get($tokens, markdown-code-size-border-width)
-        );
+        border-radius: mc-css-variable(markdown-code-size-border-radius);
+        border-width: mc-css-variable(markdown-code-size-border-width);
         border-style: solid;
     }
 
     .mc-markdown__p > .mc-markdown__code {
-        max-width: var(--mc-markdown-code-size-max-width, map.get($tokens, markdown-code-size-max-width));
-        padding: var(--mc-markdown-code-size-inline-padding, map.get($tokens, markdown-code-size-inline-padding));
+        max-width: mc-css-variable(markdown-code-size-max-width);
+        padding: mc-css-variable(markdown-code-size-inline-padding);
     }
 
     .mc-markdown__img {
-        max-width: var(--mc-markdown-image-size-max-width, map.get($tokens, markdown-image-size-max-width));
-        margin-top: var(--mc-markdown-image-size-margin-top, map.get($tokens, markdown-image-size-margin-top));
-        margin-bottom: var(
-            --mc-markdown-image-size-margin-bottom, map.get($tokens, markdown-image-size-margin-bottom)
-        );
+        max-width: mc-css-variable(markdown-image-size-max-width);
+        margin-top: mc-css-variable(markdown-image-size-margin-top);
+        margin-bottom: mc-css-variable(markdown-image-size-margin-bottom);
 
         + em {
             display: block;
-            margin-top: var(
-                --mc-markdown-image-size-caption-margin-top, map.get($tokens, markdown-image-size-caption-margin-top)
-            );
-            margin-bottom: var(
-                --mc-markdown-image-size-caption-margin-bottom,
-                map.get($tokens, markdown-image-size-caption-margin-bottom)
-            );
+            margin-top: mc-css-variable(markdown-image-size-caption-margin-top);
+            margin-bottom: mc-css-variable(markdown-image-size-caption-margin-bottom);
         }
     }
 
@@ -194,10 +157,8 @@ $tokens: meta.module-variables(tokens) !default;
         border-left: none;
         border-right: none;
         border-bottom-style: solid;
-        border-bottom-width: var(--mc-markdown-hr-size-width, map.get($tokens, markdown-hr-size-width));
-        margin: var(
-            --mc-markdown-hr-size-margin-vertical, map.get($tokens, markdown-hr-size-margin-vertical)
-        ) 0;
+        border-bottom-width: mc-css-variable(markdown-hr-size-width);
+        margin: mc-css-variable(markdown-hr-size-margin-vertical) 0;
     }
 
     .mc-markdown__table {
@@ -205,23 +166,21 @@ $tokens: meta.module-variables(tokens) !default;
         overflow-x: auto;
         display: table;
         border-collapse: collapse;
-        margin-bottom: var(--mc-markdown-table-size-margin-bottom, map.get($tokens, markdown-table-size-margin-bottom));
+        margin-bottom: mc-css-variable(markdown-table-size-margin-bottom);
 
         td {
             vertical-align: top;
         }
 
         th, td {
-            padding: var(--mc-markdown-table-size-padding, map.get($tokens, markdown-table-size-padding));
+            padding: mc-css-variable(markdown-table-size-padding);
             font-weight: 400;
         }
     }
 
     .mc-markdown__table > .mc-markdown__thead {
         border-bottom-style: solid;
-        border-bottom-width: var(
-            --mc-markdown-table-size-border-width, map.get($tokens, markdown-table-size-border-width)
-        );
+        border-bottom-width: mc-css-variable(markdown-table-size-border-width);
 
         text-align: left;
 

package/modal/_modal-confirm.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -16,7 +17,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .mc-modal-body {
-        padding: var(--mc-modal-confirm-size-padding, map.get($tokens, modal-confirm-size-padding));
+        padding: mc-css-variable(modal-confirm-size-padding);
     }
 
     // TODO
@@ -43,7 +44,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .mc-confirm-btns {
-        border-radius: var(--mc-modal-footer-size-border-radius, map.get($tokens, modal-footer-size-border-radius));
+        border-radius: mc-css-variable(modal-footer-size-border-radius);
         text-align: right;
 
         button + button, button:only-child {

package/modal/_modal-theme.scss

@@ -2,6 +2,8 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-modal-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -9,48 +11,47 @@
 
     $modal: map.get(map.get($theme, components), modal);
     $popup: map.get(map.get($theme, components), popup);
-    $tokens: map.get($theme, tokens);
 
     .mc-modal {
         .mc-modal-content {
             // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
-            background-color: map.get($background, background);
+            background-color: mc-css-variable(background-background, map-get($background, background));
 
-            box-shadow: map.get($modal, shadow);
+            box-shadow: mc-css-variable(modal-shadow, map-get($modal, shadow));
         }
 
         .mc-modal-title {
-            color: map.get($foreground, text);
+            color: mc-css-variable(foreground-text, map-get($foreground, text));
         }
 
         .mc-modal-header {
-            border-bottom-width: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width));
+            border-bottom-width: mc-css-variable(modal-size-border-width);
             border-bottom-style: solid;
-            border-bottom-color: map.get($modal, header-border);
+            border-bottom-color: mc-css-variable(modal-header-border, map-get($modal, header-border));
         }
 
         .mc-modal-header.mc-modal-body_top-overflow {
-            box-shadow: map.get($modal, body-top-shadow);
+            box-shadow: mc-css-variable(modal-body-top-shadow, map-get($modal, body-top-shadow));
         }
 
         .mc-modal-footer.mc-modal-body_bottom-overflow {
-            box-shadow: map.get($modal, body-bottom-shadow);
+            box-shadow: mc-css-variable(modal-body-bottom-shadow, map-get($modal, body-bottom-shadow));
         }
 
         .mc-modal-footer {
-            border-top-width: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width));
+            border-top-width: mc-css-variable(modal-size-border-width);
             border-top-style: solid;
-            border-top-color: map.get($modal, footer-border);
+            border-top-color: mc-css-variable(modal-footer-border, map-get($modal, footer-border));
 
-            background-color: map.get($popup, footer-background);
+            background-color: mc-css-variable(popup-footer-background, map-get($popup, footer-background));
         }
 
         .mc-modal-close {
-            border: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width)) solid transparent;
+            border: mc-css-variable(modal-size-border-width) solid transparent;
 
             &:hover {
                 .mc-button-overlay {
-                    background: map.get($background, overlay-hover);
+                    background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
                 }
 
                 .mc-icon {
@@ -61,28 +62,26 @@
     }
 
     .mc-modal-mask {
-        background-color: map.get($modal, background-mask);
+        background-color: mc-css-variable(modal-background-mask, map-get($modal, background-mask));
     }
 
     .mc-confirm {
         .mc-confirm-btns {
-            border-top-width: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width));
+            border-top-width: mc-css-variable(modal-size-border-width);
             border-top-style: solid;
-            border-top-color: map.get($modal, footer-border);
+            border-top-color: mc-css-variable(modal-footer-border, map-get($modal, footer-border));
 
-            background-color: map.get($popup, footer-background);
+            background-color: mc-css-variable(popup-footer-background, map-get($popup, footer-background));
         }
     }
 }
 
 @mixin mc-modal-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-modal-title {
-        @include mc-typography-level-to-styles($config, map.get($tokens, modal-header-font-default));
+        @include mc-typography-css-variables(modal-header, default);
     }
 
     .mc-modal-body {
-        @include mc-typography-level-to-styles($config, map.get($tokens, modal-body-font-default));
+        @include mc-typography-css-variables(modal-body, default);
     }
 }