@ptsecurity/mosaic 17.0.0 → 17.2.0

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);
     }
 }

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>;
 }