@ptsecurity/mosaic 17.1.0 → 17.2.0

package/modal/modal.scss

@@ -7,6 +7,9 @@
 
 @use './modal-confirm';
 
+@use '../core/styles/common/tokens' as *;
+
+
 $tokens: meta.module-variables(tokens) !default;
 
 .mc-modal {
@@ -14,7 +17,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     position: relative;
 
-    top: var(--mc-modal-size-top, map.get($tokens, modal-size-top));
+    top: mc-css-variable(modal-size-top);
 
     width: auto;
 
@@ -31,15 +34,15 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.mc-modal_small {
-        width: var(--mc-modal-size-small, map.get($tokens, modal-size-small));
+        width: mc-css-variable(modal-size-small);
     }
 
     &.mc-modal_medium {
-        width: var(--mc-modal-size-medium, map.get($tokens, modal-size-medium));
+        width: mc-css-variable(modal-size-medium);
     }
 
     &.mc-modal_large {
-        width: var(--mc-modal-size-large, map.get($tokens, modal-size-large));
+        width: mc-css-variable(modal-size-large);
     }
 
     & .mc-modal-close {
@@ -49,8 +52,8 @@ $tokens: meta.module-variables(tokens) !default;
         top: 0;
         right: 0;
 
-        width: var(--mc-modal-size-close-width, map.get($tokens, modal-size-close-width));
-        height: var(--mc-modal-size-close-width, map.get($tokens, modal-size-close-width));
+        width: mc-css-variable(modal-size-close-width);
+        height: mc-css-variable(modal-size-close-width);
     }
 }
 
@@ -82,7 +85,7 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-modal-content {
     position: relative;
 
-    border-radius: var(--mc-modal-size-border-radius, map.get($tokens, modal-size-border-radius));
+    border-radius: mc-css-variable(modal-size-border-radius);
 
     background-clip: padding-box;
     background-color: white;
@@ -92,11 +95,11 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     align-items: center;
 
-    min-height: var(--mc-modal-header-size-height, map.get($tokens, modal-header-size-height));
+    min-height: mc-css-variable(modal-header-size-height);
 
-    border-radius: var(--mc-modal-header-size-border-radius, map.get($tokens, modal-header-size-border-radius));
+    border-radius: mc-css-variable(modal-header-size-border-radius);
 
-    padding: var(--mc-modal-header-size-padding, map.get($tokens, modal-header-size-padding));
+    padding: mc-css-variable(modal-header-size-padding);
 
     &.mc-modal-header_closable {
         $size-s: map.get($tokens, size-s);
@@ -109,9 +112,9 @@ $tokens: meta.module-variables(tokens) !default;
     display: block;
     overflow-y: auto;
 
-    max-height: var(--mc-modal-body-size-max-height, map.get($tokens, modal-body-size-max-height));
+    max-height: mc-css-variable(modal-body-size-max-height);
 
-    padding: var(--mc-modal-body-size-padding, map.get($tokens, modal-body-size-padding));
+    padding: mc-css-variable(modal-body-size-padding);
 
     word-wrap: break-word;
 }
@@ -121,11 +124,11 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
     justify-content: flex-end;
 
-    height: var(--mc-modal-footer-size-height, map.get($tokens, modal-footer-size-height));
+    height: mc-css-variable(modal-footer-size-height);
 
-    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);
 
-    padding: var(--mc-modal-footer-size-padding, map.get($tokens, modal-footer-size-padding));
+    padding: mc-css-variable(modal-footer-size-padding);
 
     button + button {
         margin-left: 16px;

package/navbar/_navbar-theme.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-navbar-theme($theme) {
     $background: map.get($theme, background);
@@ -11,51 +13,51 @@
 
     .mc-navbar,
     .mc-vertical-navbar .mc-vertical-navbar__container {
-        background-color: map.get($navbar, background);
+        background-color: mc-css-variable(navbar-background, map-get($navbar, background));
     }
 
     .mc-navbar-brand.mc-hovered:not(.mc-collapsed) {
-        background-color: map.get($navbar-item, state-hover);
+        background-color: mc-css-variable(navbar-item-state-hover, map-get($navbar-item, state-hover));
     }
 
     .mc-navbar-brand.mc-vertical.mc-collapsed {
         & .mc-navbar-logo:hover {
-            background-color: map.get($navbar-item, state-hover);
+            background-color: mc-css-variable(navbar-item-state-hover, map-get($navbar-item, state-hover));
         }
     }
 
     .mc-navbar-title {
-        color: map.get($navbar-item, color);
+        color: mc-css-variable(navbar-item-color, map-get($navbar-item, color));
     }
 
     .mc-navbar-item,
     .mc-navbar-brand,
     .mc-navbar-toggle {
-        color: map.get($navbar-item, color);
+        color: mc-css-variable(navbar-item-color, map-get($navbar-item, color));
 
         & > .mc-icon {
-            color: map.get($navbar-item, icon-color);
+            color: mc-css-variable(navbar-item-icon-color, map-get($navbar-item, icon-color));
         }
 
         & .mc-navbar-item__arrow-icon {
-            color: map.get($navbar-item, color);
+            color: mc-css-variable(navbar-item-color, map-get($navbar-item, color));
         }
 
         &.mc-active {
-            background: map.get($navbar-item, state-selected);
+            background: mc-css-variable(navbar-item-state-selected, map-get($navbar-item, state-selected));
         }
 
         &:hover:not(.mc-navbar-item_has-nested) {
             cursor: pointer;
 
             & .mc-navbar-item__overlay {
-                background-color: map.get($navbar-item, state-hover);
+                background-color: mc-css-variable(navbar-item-state-hover, map-get($navbar-item, state-hover));
             }
         }
 
         &:active:not(.mc-navbar-item_has-nested) {
             & .mc-navbar-item__overlay {
-                background: map.get($navbar-item, state-active);
+                background: mc-css-variable(navbar-item-state-active, map-get($navbar-item, state-active));
             }
         }
 
@@ -65,7 +67,8 @@
 
             .mc-navbar-item__title,
             .mc-icon {
-                opacity: map.get($navbar-item, state-disabled-opacity);
+                opacity: mc-css-variable(
+                    navbar-item-state-disabled-opacity, map-get($navbar-item, state-disabled-opacity));
             }
         }
     }
@@ -76,14 +79,14 @@
         /* stylelint-disable no-descending-specificity */
         &.cdk-keyboard-focused .mc-navbar-item__overlay {
             box-shadow:
-                inset 0 0 0 2px map.get(map.get($theme, states), focused-color),
-                inset 0 0 0 3px map.get($background, background);
+                inset 0 0 0 2px mc-css-variable(states-focused-color, map-get($theme, states, focused-color)),
+                inset 0 0 0 3px mc-css-variable(background-background, map-get($background, background));
         }
         /* stylelint-enable no-descending-specificity */
     }
 
     .mc-navbar-divider {
-        background-color: map.get($navbar, divider-background);
+        background-color: mc-css-variable(navbar-divider-background, map-get($navbar, divider-background));
     }
 }
 
@@ -97,10 +100,8 @@ button {
 }
 
 @mixin mc-navbar-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-navbar-title {
-        @include mc-typography-level-to-styles($config, map.get($tokens, navbar-font-title));
+        @include mc-typography-css-variables(navbar, title);
     }
 
     .mc-navbar-subtitle {
@@ -109,7 +110,7 @@ button {
 
     .mc-navbar-brand {
         .mc-navbar-title {
-            @include mc-typography-level-to-styles($config, map.get($tokens, navbar-brand-font-title));
+            @include mc-typography-css-variables(navbar-brand, title);
 
             &.mc-navbar-title_small {
                 @include mc-typography-level-to-styles($config, subheading);

package/navbar/navbar-brand.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -26,12 +27,12 @@ a.mc-navbar-brand {
 }
 
 .mc-navbar-brand.mc-horizontal {
-    height: var(--mc-navbar-item-size-height, map.get($tokens, navbar-item-size-height));
+    height: mc-css-variable(navbar-item-size-height);
 
-    padding-right: var(--mc-navbar-brand-size-margin-right, map.get($tokens, navbar-brand-size-margin-right));
+    padding-right: mc-css-variable(navbar-brand-size-margin-right);
 
     & .mc-navbar-title {
-        padding-left: var(--mc-navbar-brand-size-padding, map.get($tokens, navbar-brand-size-padding));
+        padding-left: mc-css-variable(navbar-brand-size-padding);
         padding-right: 0;
     }
 }
@@ -42,18 +43,15 @@ a.mc-navbar-brand {
         justify-content: center;
         align-items: center;
 
-        min-height: var(--mc-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
-        min-width: var(
-            --mc-vertical-navbar-size-states-collapsed-width,
-            map.get($tokens, vertical-navbar-size-states-collapsed-width)
-        );
+        min-height: mc-css-variable(navbar-item-size-height-vertical);
+        min-width: mc-css-variable(vertical-navbar-size-states-collapsed-width);
     }
 
     & .mc-navbar-title {
         display: flex;
         align-items: center;
 
-        height: var(--mc-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+        height: mc-css-variable(navbar-item-size-height-vertical);
 
         padding-left: 0;
     }

package/navbar/navbar-item.component.d.ts

@@ -142,13 +142,13 @@ export declare class McNavbarItem extends McTooltipTrigger {
     get showVerticalDropDownAngle(): boolean;
     get showHorizontalDropDownAngle(): boolean;
     get hasCroppedText(): boolean;
-    constructor(rectangleElement: McNavbarRectangleElement, navbarFocusableItem: McNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, dropdownTrigger: McDropdownTrigger, bento: McNavbarBento);
+    constructor(rectangleElement: McNavbarRectangleElement, navbarFocusableItem: McNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, focusMonitor: FocusMonitor, scrollStrategy: any, direction: Directionality, dropdownTrigger: McDropdownTrigger, bento: McNavbarBento);
     ngAfterContentInit(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
     private updateCollapsedState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarItem, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarItem, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarItem, "mc-navbar-item, [mc-navbar-item]", ["mcNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "mcTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "subTitle", "icon"], ["[mc-icon]", "mc-navbar-title, [mc-navbar-title]", "mc-navbar-subtitle, [mc-navbar-subtitle]", "*"], false, never>;
 }
 export declare class McNavbarToggle extends McTooltipTrigger implements OnDestroy {
@@ -160,12 +160,12 @@ export declare class McNavbarToggle extends McTooltipTrigger implements OnDestro
     set content(content: string | TemplateRef<any>);
     get disabled(): boolean;
     protected modifier: TooltipModifier;
-    constructor(navbar: McVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, document: any);
+    constructor(navbar: McVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, document: any);
     onKeydown($event: KeyboardEvent): void;
     ngOnDestroy(): void;
     toggle: () => void;
     private getWindow;
     private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarToggle, [null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarToggle, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarToggle, "mc-navbar-toggle", never, { "content": { "alias": "mcCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[mc-icon]", "mc-navbar-title"], false, never>;
 }

package/navbar/navbar-item.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -23,8 +24,8 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     align-items: center;
 
-    padding-left: var(--mc-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
-    padding-right: var(--mc-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
+    padding-left: mc-css-variable(navbar-item-size-padding);
+    padding-right: mc-css-variable(navbar-item-size-padding);
 
     .mc-badge {
         position: absolute;
@@ -56,7 +57,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-navbar-item.mc-horizontal {
-    height: var(--mc-navbar-item-size-height, map.get($tokens, navbar-item-size-height));
+    height: mc-css-variable(navbar-item-size-height);
 
     & .mc-icon {
         min-width: 16px;
@@ -64,11 +65,11 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .mc-navbar-item__title + .mc-icon {
-        margin-left: var(--mc-navbar-size-right-icon-margin, map.get($tokens, navbar-size-right-icon-margin))
+        margin-left: mc-css-variable(navbar-size-right-icon-margin)
     }
 
     & .mc-icon + .mc-navbar-item__container {
-        margin-left: var(--mc-navbar-size-icon-margin, map.get($tokens, navbar-size-icon-margin))
+        margin-left: mc-css-variable(navbar-size-icon-margin)
     }
 
     &.mc-navbar-item_collapsed .mc-navbar-item__container {
@@ -87,7 +88,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-navbar-item.mc-vertical {
-    height: var(--mc-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+    height: mc-css-variable(navbar-item-size-height-vertical);
 
     /* stylelint-disable no-descending-specificity */
     & > .mc-icon {
@@ -102,7 +103,7 @@ $tokens: meta.module-variables(tokens) !default;
     & .mc-navbar-item__title,
     & .mc-icon + .mc-navbar-item__title,
     & .mc-navbar-item__title + .mc-icon {
-        padding-left: var(--mc-vertical-navbar-size-icon-margin, map.get($tokens, vertical-navbar-size-icon-margin));
+        padding-left: mc-css-variable(vertical-navbar-size-icon-margin);
     }
 
     &.mc-navbar-item_has-nested {

package/navbar/vertical-navbar.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -9,10 +10,7 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-vertical-navbar {
     position: relative;
 
-    min-width: var(
-        --mc-vertical-navbar-size-states-collapsed-width,
-        map.get($tokens, vertical-navbar-size-states-collapsed-width)
-    );
+    min-width: mc-css-variable(vertical-navbar-size-states-collapsed-width);
     height: 100%;
 
     & .mc-navbar-container {
@@ -30,17 +28,11 @@ $tokens: meta.module-variables(tokens) !default;
         height: 100%;
 
         &.mc-collapsed {
-            width: var(
-                --mc-vertical-navbar-size-states-collapsed-width,
-                map.get($tokens, vertical-navbar-size-states-collapsed-width)
-            );
+            width: mc-css-variable(vertical-navbar-size-states-collapsed-width);
         }
 
         &.mc-expanded {
-            width: var(
-                --mc-vertical-navbar-size-states-expanded-width,
-                map.get($tokens, vertical-navbar-size-states-expanded-width)
-            );
+            width: mc-css-variable(vertical-navbar-size-states-expanded-width);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ptsecurity/mosaic",
-    "version": "17.1.0",
+    "version": "17.2.0",
     "description": "Mosaic",
     "repository": {
         "type": "git",
@@ -19,14 +19,14 @@
     "peerDependencies": {
         "@angular/cdk": "^17.2.0",
         "@angular/forms": "^17.2.0",
-        "@ptsecurity/cdk": "^17.1.0",
-        "@ptsecurity/mosaic-moment-adapter": "^17.1.0",
-        "@ptsecurity/mosaic-luxon-adapter": "^17.1.0",
+        "@ptsecurity/cdk": "^17.2.0",
+        "@ptsecurity/mosaic-moment-adapter": "^17.2.0",
+        "@ptsecurity/mosaic-luxon-adapter": "^17.2.0",
         "@mosaic-design/date-formatter": "^2.1.5",
         "@ptsecurity/mosaic-icons": "^7.0.8",
-        "@mosaic-design/tokens-builder": "^2.2.1",
-        "@mosaic-design/tokens-fe-2022": "^2.2.1",
-        "@mosaic-design/tokens-legacy-2017": "^2.2.1",
+        "@mosaic-design/tokens-builder": "^3.0.0",
+        "@mosaic-design/tokens-fe-2022": "^3.0.0",
+        "@mosaic-design/tokens-legacy-2017": "^3.0.0",
         "marked": "^4.0.18"
     },
     "dependencies": {

package/popover/_popover-theme.scss

@@ -1,6 +1,8 @@
 @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);
@@ -11,73 +13,73 @@
     $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;