@ptsecurity/mosaic 17.1.0 → 17.2.1

package/modal/_modal-theme.scss

@@ -2,55 +2,56 @@
 @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);
     $background: map.get($theme, background);
 
-    $modal: map.get(map.get($theme, components), modal);
-    $popup: map.get(map.get($theme, components), popup);
-    $tokens: map.get($theme, tokens);
+    $modal: map.get($theme, components, modal);
+    $popup: map.get($theme, components, popup);
 
     .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);
     }
 }

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);
     }
 }
 
@@ -70,8 +73,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .mc-modal-title {
-    margin-top: map.get($tokens, size-s);
-    margin-bottom: map.get($tokens, size-s);
+    margin-top: mc-css-variable(size-s);
+    margin-bottom: mc-css-variable(size-s);
 
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -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,61 +1,63 @@
 @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);
     $primary: map.get($theme, primary);
 
-    $navbar: map.get(map.get($theme, components), navbar);
-    $navbar-item: map.get(map.get($theme, components), navbar-item);
+    $navbar: map.get($theme, components, navbar);
+    $navbar-item: map.get($theme, components, navbar-item);
 
     .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,22 +100,20 @@ 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 {
-        @include mc-typography-level-to-styles($config, extra-small-text);
+        @include mc-typography-level-to-styles_css-variables(typography, extra-small-text);
     }
 
     .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);
+                @include mc-typography-level-to-styles_css-variables(typography, subheading);
 
                 white-space: unset;
             }

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 {
@@ -81,13 +82,13 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.mc-navbar-item_has-nested {
-        padding-left: map.get($tokens, size-s);
-        padding-right: map.get($tokens, size-s);
+        padding-left: mc-css-variable(size-s);
+        padding-right: mc-css-variable(size-s);
     }
 }
 
 .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.1",
     "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.1",
+        "@ptsecurity/mosaic-moment-adapter": "^17.2.1",
+        "@ptsecurity/mosaic-luxon-adapter": "^17.2.1",
         "@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": {
@@ -57,29 +57,29 @@
         "./package.json": {
             "default": "./package.json"
         },
+        "./card": {
+            "types": "./card/index.d.ts",
+            "esm2022": "./esm2022/card/ptsecurity-mosaic-card.mjs",
+            "esm": "./esm2022/card/ptsecurity-mosaic-card.mjs",
+            "default": "./fesm2022/ptsecurity-mosaic-card.mjs"
+        },
         "./autocomplete": {
             "types": "./autocomplete/index.d.ts",
             "esm2022": "./esm2022/autocomplete/ptsecurity-mosaic-autocomplete.mjs",
             "esm": "./esm2022/autocomplete/ptsecurity-mosaic-autocomplete.mjs",
             "default": "./fesm2022/ptsecurity-mosaic-autocomplete.mjs"
         },
-        "./button": {
-            "types": "./button/index.d.ts",
-            "esm2022": "./esm2022/button/ptsecurity-mosaic-button.mjs",
-            "esm": "./esm2022/button/ptsecurity-mosaic-button.mjs",
-            "default": "./fesm2022/ptsecurity-mosaic-button.mjs"
-        },
         "./button-toggle": {
             "types": "./button-toggle/index.d.ts",
             "esm2022": "./esm2022/button-toggle/ptsecurity-mosaic-button-toggle.mjs",
             "esm": "./esm2022/button-toggle/ptsecurity-mosaic-button-toggle.mjs",
             "default": "./fesm2022/ptsecurity-mosaic-button-toggle.mjs"
         },
-        "./card": {
-            "types": "./card/index.d.ts",
-            "esm2022": "./esm2022/card/ptsecurity-mosaic-card.mjs",
-            "esm": "./esm2022/card/ptsecurity-mosaic-card.mjs",
-            "default": "./fesm2022/ptsecurity-mosaic-card.mjs"
+        "./button": {
+            "types": "./button/index.d.ts",
+            "esm2022": "./esm2022/button/ptsecurity-mosaic-button.mjs",
+            "esm": "./esm2022/button/ptsecurity-mosaic-button.mjs",
+            "default": "./fesm2022/ptsecurity-mosaic-button.mjs"
         },
         "./checkbox": {
             "types": "./checkbox/index.d.ts",