@koobiq/components 18.1.0 → 18.2.1

package/markdown/markdown-tokens.scss

@@ -3,7 +3,7 @@
 .kbq-markdown {
     --kbq-markdown-h1-size-max-width: var(--kbq-markdown-size-max-width);
     --kbq-markdown-h1-size-margin-top: 0;
-    --kbq-markdown-h1-size-margin-bottom: var(--kbq-size-l);
+    --kbq-markdown-h1-size-margin-bottom: var(--kbq-size-m);
     --kbq-markdown-h1-font-default-font-size: var(--kbq-md-typography-md-h1-font-size);
     --kbq-markdown-h1-font-default-line-height: var(--kbq-md-typography-md-h1-line-height);
     --kbq-markdown-h1-font-default-letter-spacing: var(--kbq-md-typography-md-h1-letter-spacing);
@@ -12,7 +12,7 @@
     --kbq-markdown-h1-font-default-text-transform: var(--kbq-md-typography-md-h1-text-transform);
     --kbq-markdown-h1-font-default-font-feature-settings: var(--kbq-md-typography-md-h1-font-feature-settings);
     --kbq-markdown-h2-size-max-width: var(--kbq-markdown-size-max-width);
-    --kbq-markdown-h2-size-margin-top: var(--kbq-size-xxl);
+    --kbq-markdown-h2-size-margin-top: var(--kbq-size-3xl);
     --kbq-markdown-h2-size-margin-bottom: var(--kbq-size-m);
     --kbq-markdown-h2-font-default-font-size: var(--kbq-md-typography-md-h2-font-size);
     --kbq-markdown-h2-font-default-line-height: var(--kbq-md-typography-md-h2-line-height);
@@ -22,7 +22,7 @@
     --kbq-markdown-h2-font-default-text-transform: var(--kbq-md-typography-md-h2-text-transform);
     --kbq-markdown-h2-font-default-font-feature-settings: var(--kbq-md-typography-md-h2-font-feature-settings);
     --kbq-markdown-h3-size-max-width: var(--kbq-markdown-size-max-width);
-    --kbq-markdown-h3-size-margin-top: var(--kbq-size-xxl);
+    --kbq-markdown-h3-size-margin-top: 28px;
     --kbq-markdown-h3-size-margin-bottom: var(--kbq-size-m);
     --kbq-markdown-h3-font-default-font-size: var(--kbq-md-typography-md-h3-font-size);
     --kbq-markdown-h3-font-default-line-height: var(--kbq-md-typography-md-h3-line-height);
@@ -43,7 +43,7 @@
     --kbq-markdown-h4-font-default-font-feature-settings: var(--kbq-md-typography-md-h4-font-feature-settings);
     --kbq-markdown-h5-size-max-width: var(--kbq-markdown-size-max-width);
     --kbq-markdown-h5-size-margin-top: var(--kbq-size-xxl);
-    --kbq-markdown-h5-size-margin-bottom: var(--kbq-size-s);
+    --kbq-markdown-h5-size-margin-bottom: var(--kbq-size-m);
     --kbq-markdown-h5-font-default-font-size: var(--kbq-md-typography-md-h5-font-size);
     --kbq-markdown-h5-font-default-line-height: var(--kbq-md-typography-md-h5-line-height);
     --kbq-markdown-h5-font-default-letter-spacing: var(--kbq-md-typography-md-h5-letter-spacing);
@@ -53,7 +53,7 @@
     --kbq-markdown-h5-font-default-font-feature-settings: var(--kbq-md-typography-md-h5-font-feature-settings);
     --kbq-markdown-h6-size-max-width: var(--kbq-markdown-size-max-width);
     --kbq-markdown-h6-size-margin-top: var(--kbq-size-xxl);
-    --kbq-markdown-h6-size-margin-bottom: var(--kbq-size-s);
+    --kbq-markdown-h6-size-margin-bottom: var(--kbq-size-m);
     --kbq-markdown-h6-font-default-font-size: var(--kbq-md-typography-md-h6-font-size);
     --kbq-markdown-h6-font-default-line-height: var(--kbq-md-typography-md-h6-line-height);
     --kbq-markdown-h6-font-default-letter-spacing: var(--kbq-md-typography-md-h6-letter-spacing);
@@ -77,7 +77,7 @@
     --kbq-markdown-list-size-margin-top-after-paragraph: -var(--kbq-size-s);
     --kbq-markdown-list-size-ol-number-padding-right: var(--kbq-size-xxs);
     --kbq-markdown-list-size-ul-padding: 0 0 0 var(--kbq-size-xxl);
-    --kbq-markdown-list-size-item-margin-bottom: var(--kbq-size-xxs);
+    --kbq-markdown-list-size-item-margin-bottom: var(--kbq-size-s);
     --kbq-markdown-list-font-default-font-size: var(--kbq-md-typography-md-body-font-size);
     --kbq-markdown-list-font-default-line-height: var(--kbq-md-typography-md-body-line-height);
     --kbq-markdown-list-font-default-letter-spacing: var(--kbq-md-typography-md-body-letter-spacing);
@@ -86,9 +86,9 @@
     --kbq-markdown-list-font-default-text-transform: var(--kbq-md-typography-md-body-text-transform);
     --kbq-markdown-list-font-default-font-feature-settings: var(--kbq-md-typography-md-body-font-feature-settings);
     --kbq-markdown-blockquote-size-max-width: var(--kbq-markdown-size-max-width);
-    --kbq-markdown-blockquote-size-margin-top: var(--kbq-size-m);
-    --kbq-markdown-blockquote-size-margin-bottom: var(--kbq-size-m);
-    --kbq-markdown-blockquote-size-padding: var(--kbq-size-3xs) var(--kbq-size-m);
+    --kbq-markdown-blockquote-size-margin-top: var(--kbq-size-xl);
+    --kbq-markdown-blockquote-size-margin-bottom: var(--kbq-size-xxl);
+    --kbq-markdown-blockquote-size-padding: var(--kbq-size-m) var(--kbq-size-l);
     --kbq-markdown-blockquote-size-line-width: var(--kbq-size-xxs);
     --kbq-markdown-blockquote-size-border-radius: 0;
     --kbq-markdown-blockquote-size-border-width: 0;
@@ -102,10 +102,10 @@
         --kbq-md-typography-md-body-font-feature-settings
     );
     --kbq-markdown-code-size-max-width: var(--kbq-markdown-size-max-width);
-    --kbq-markdown-code-size-multiline-margin-top: var(--kbq-size-m);
+    --kbq-markdown-code-size-multiline-margin-top: var(--kbq-size-s);
     --kbq-markdown-code-size-multiline-margin-bottom: var(--kbq-size-xxl);
     --kbq-markdown-code-size-inline-padding: 0 var(--kbq-size-xxs);
-    --kbq-markdown-code-size-multiline-padding: var(--kbq-size-m) var(--kbq-size-l);
+    --kbq-markdown-code-size-multiline-padding: 14px var(--kbq-size-xl);
     --kbq-markdown-code-size-border-radius: var(--kbq-size-border-radius);
     --kbq-markdown-code-size-border-width: var(--kbq-size-border-width);
     --kbq-markdown-code-font-default-font-size: var(--kbq-md-typography-md-body-mono-font-size);
@@ -126,8 +126,8 @@
     --kbq-markdown-link-font-default-text-transform: var(--kbq-md-typography-md-body-text-transform);
     --kbq-markdown-link-font-default-font-feature-settings: var(--kbq-md-typography-md-body-font-feature-settings);
     --kbq-markdown-image-size-max-width: var(--kbq-markdown-size-max-width);
-    --kbq-markdown-image-size-margin-top: var(--kbq-size-m);
-    --kbq-markdown-image-size-margin-bottom: var(--kbq-size-m);
+    --kbq-markdown-image-size-margin-top: var(--kbq-size-s);
+    --kbq-markdown-image-size-margin-bottom: var(--kbq-size-s);
     --kbq-markdown-image-size-caption-margin-top: -var(--kbq-size-s);
     --kbq-markdown-image-size-caption-margin-bottom: var(--kbq-size-xxl);
     --kbq-markdown-image-font-caption-font-size: var(--kbq-md-typography-md-caption-font-size);
@@ -138,10 +138,10 @@
     --kbq-markdown-image-font-caption-text-transform: var(--kbq-md-typography-md-caption-text-transform);
     --kbq-markdown-image-font-caption-font-feature-settings: var(--kbq-md-typography-md-caption-font-feature-settings);
     --kbq-markdown-hr-size-width: 1px;
-    --kbq-markdown-hr-size-margin-vertical: var(--kbq-size-xxl);
+    --kbq-markdown-hr-size-margin-vertical: var(--kbq-size-l);
     --kbq-markdown-table-size-border-width: var(--kbq-size-border-width);
     --kbq-markdown-table-size-padding: var(--kbq-size-s);
-    --kbq-markdown-table-size-margin-bottom: var(--kbq-size-m);
+    --kbq-markdown-table-size-margin-bottom: var(--kbq-size-l);
     --kbq-markdown-table-font-header-font-size: var(--kbq-md-typography-md-table-header-font-size);
     --kbq-markdown-table-font-header-line-height: var(--kbq-md-typography-md-table-header-line-height);
     --kbq-markdown-table-font-header-letter-spacing: var(--kbq-md-typography-md-table-header-letter-spacing);
@@ -179,7 +179,7 @@
     --kbq-markdown-list-color: var(--kbq-foreground-contrast);
     --kbq-markdown-blockquote-text: var(--kbq-foreground-contrast);
     --kbq-markdown-blockquote-line: var(--kbq-foreground-border);
-    --kbq-markdown-blockquote-background: transparent;
+    --kbq-markdown-blockquote-background: var(--kbq-background-contrast-fade);
     --kbq-markdown-blockquote-border: transparent;
     --kbq-markdown-code-text: var(--kbq-foreground-contrast);
     --kbq-markdown-code-background: var(--kbq-background-background-less-contrast);
@@ -210,7 +210,7 @@
     --kbq-markdown-list-color: var(--kbq-foreground-contrast);
     --kbq-markdown-blockquote-text: var(--kbq-foreground-contrast);
     --kbq-markdown-blockquote-line: var(--kbq-foreground-border);
-    --kbq-markdown-blockquote-background: transparent;
+    --kbq-markdown-blockquote-background: var(--kbq-background-contrast-fade);
     --kbq-markdown-blockquote-border: transparent;
     --kbq-markdown-code-text: var(--kbq-foreground-contrast);
     --kbq-markdown-code-background: var(--kbq-background-background-less-contrast);

package/markdown/markdown.scss

@@ -14,8 +14,8 @@
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
         .kbq-markdown__h#{$i} {
-            margin-top: kbq-css-variable(markdown-h#{$i}-size-margin-top);
-            margin-bottom: kbq-css-variable(markdown-h#{$i}-size-margin-bottom);
+            margin-top: var(--kbq-markdown-h#{$i}-size-margin-top);
+            margin-bottom: var(--kbq-markdown-h#{$i}-size-margin-bottom);
 
             @for $i from 1 through 6 {
                 & + .kbq-markdown__h#{$i} {
@@ -37,24 +37,24 @@
     }
 
     .kbq-markdown__p {
-        margin-top: kbq-css-variable(markdown-p-size-margin-top);
-        margin-bottom: kbq-css-variable(markdown-p-size-margin-bottom);
+        margin-top: var(--kbq-markdown-p-size-margin-top);
+        margin-bottom: var(--kbq-markdown-p-size-margin-bottom);
     }
 
     .kbq-markdown__ul,
     .kbq-markdown__ol {
-        margin-top: kbq-css-variable(markdown-list-size-margin-top);
-        margin-bottom: kbq-css-variable(markdown-list-size-margin-bottom);
+        margin-top: var(--kbq-markdown-list-size-margin-top);
+        margin-bottom: var(--kbq-markdown-list-size-margin-bottom);
 
         > li {
-            margin-bottom: kbq-css-variable(markdown-list-size-item-margin-bottom);
+            margin-bottom: var(--kbq-markdown-list-size-item-margin-bottom);
         }
     }
 
     .kbq-markdown__ul {
         position: relative;
         list-style: none;
-        padding: kbq-css-variable(markdown-list-size-ul-padding);
+        padding: var(--kbq-markdown-list-size-ul-padding);
     }
 
     .kbq-markdown__ul > li:before {
@@ -75,7 +75,7 @@
             &:before {
                 content: counter(li) '.';
                 counter-increment: li;
-                padding-right: kbq-css-variable(markdown-list-size-ol-number-padding-right);
+                padding-right: var(--kbq-markdown-list-size-ol-number-padding-right);
             }
 
             > * {
@@ -86,20 +86,20 @@
 
     .kbq-markdown__p + .kbq-markdown__ul,
     .kbq-markdown__p + .kbq-markdown__ol {
-        margin-top: kbq-css-variable(markdown-list-size-margin-top-after-paragraph);
+        margin-top: var(--kbq-markdown-list-size-margin-top-after-paragraph);
     }
 
     .kbq-markdown__blockquote {
-        margin-top: kbq-css-variable(markdown-blockquote-size-margin-top);
+        margin-top: var(--kbq-markdown-blockquote-size-margin-top);
         margin-left: 0;
-        margin-bottom: kbq-css-variable(markdown-blockquote-size-margin-bottom);
+        margin-bottom: var(--kbq-markdown-blockquote-size-margin-bottom);
         margin-right: 0;
 
-        border-left-width: kbq-css-variable(markdown-blockquote-size-line-width);
+        border-left-width: var(--kbq-markdown-blockquote-size-line-width);
 
         border-left-style: solid;
 
-        padding: kbq-css-variable(markdown-blockquote-size-padding);
+        padding: var(--kbq-markdown-blockquote-size-padding);
     }
 
     .kbq-markdown__blockquote > .kbq-markdown__p {
@@ -111,32 +111,32 @@
         position: relative;
         overflow-x: auto;
 
-        margin-top: kbq-css-variable(markdown-code-size-multiline-margin-top);
-        margin-bottom: kbq-css-variable(markdown-code-size-multiline-margin-bottom);
+        margin-top: var(--kbq-markdown-code-size-multiline-margin-top);
+        margin-bottom: var(--kbq-markdown-code-size-multiline-margin-bottom);
 
-        padding: kbq-css-variable(markdown-code-size-multiline-padding);
+        padding: var(--kbq-markdown-code-size-multiline-padding);
     }
 
     .kbq-markdown__pre,
     .kbq-markdown__p > .kbq-markdown__code {
-        border-radius: kbq-css-variable(markdown-code-size-border-radius);
-        border-width: kbq-css-variable(markdown-code-size-border-width);
+        border-radius: var(--kbq-markdown-code-size-border-radius);
+        border-width: var(--kbq-markdown-code-size-border-width);
         border-style: solid;
     }
 
     .kbq-markdown__p > .kbq-markdown__code {
-        padding: kbq-css-variable(markdown-code-size-inline-padding);
+        padding: var(--kbq-markdown-code-size-inline-padding);
     }
 
     .kbq-markdown__img {
         max-width: 100%;
-        margin-top: kbq-css-variable(markdown-image-size-margin-top);
-        margin-bottom: kbq-css-variable(markdown-image-size-margin-bottom);
+        margin-top: var(--kbq-markdown-image-size-margin-top);
+        margin-bottom: var(--kbq-markdown-image-size-margin-bottom);
 
         + em {
             display: block;
-            margin-top: kbq-css-variable(markdown-image-size-caption-margin-top);
-            margin-bottom: kbq-css-variable(markdown-image-size-caption-margin-bottom);
+            margin-top: var(--kbq-markdown-image-size-caption-margin-top);
+            margin-bottom: var(--kbq-markdown-image-size-caption-margin-bottom);
         }
     }
 
@@ -145,8 +145,8 @@
         border-left: none;
         border-right: none;
         border-bottom-style: solid;
-        border-bottom-width: kbq-css-variable(markdown-hr-size-width);
-        margin: kbq-css-variable(markdown-hr-size-margin-vertical) 0;
+        border-bottom-width: var(--kbq-markdown-hr-size-width);
+        margin: var(--kbq-markdown-hr-size-margin-vertical) 0;
     }
 
     .kbq-markdown__table {
@@ -154,7 +154,7 @@
         overflow-x: auto;
         display: table;
         border-collapse: collapse;
-        margin-bottom: kbq-css-variable(markdown-table-size-margin-bottom);
+        margin-bottom: var(--kbq-markdown-table-size-margin-bottom);
 
         td {
             vertical-align: top;
@@ -162,14 +162,14 @@
 
         th,
         td {
-            padding: kbq-css-variable(markdown-table-size-padding);
+            padding: var(--kbq-markdown-table-size-padding);
             font-weight: 400;
         }
     }
 
     .kbq-markdown__table > .kbq-markdown__thead {
         border-bottom-style: solid;
-        border-bottom-width: kbq-css-variable(markdown-table-size-border-width);
+        border-bottom-width: var(--kbq-markdown-table-size-border-width);
 
         text-align: left;
 

package/modal/_modal-confirm.scss

@@ -8,6 +8,6 @@
     .kbq-confirm-footer {
         display: flex;
 
-        gap: kbq-css-variable(modal-size-footer-content-gap-horizontal);
+        gap: var(--kbq-modal-size-footer-content-gap-horizontal);
     }
 }

package/modal/_modal-theme.scss

@@ -1,40 +1,37 @@
-@use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-modal-theme() {
     .kbq-modal {
-        background: kbq-css-variable(modal-container-background);
-        box-shadow: kbq-css-variable(modal-container-box-shadow);
+        background: var(--kbq-modal-container-background);
+        box-shadow: var(--kbq-modal-container-box-shadow);
 
         .kbq-modal-header {
             & .kbq-modal-title {
-                color: kbq-css-variable(modal-header-text-color);
+                color: var(--kbq-modal-header-text-color);
             }
 
             & .kbq-modal-close {
-                color: kbq-css-variable(modal-close-button-color);
+                color: var(--kbq-modal-close-button-color);
             }
         }
 
         .kbq-modal-content {
-            color: kbq-css-variable(modal-content-text-color);
+            color: var(--kbq-modal-content-text-color);
         }
 
-        // FIXME: default token doesn't exist
         .kbq-modal-header.kbq-modal-body_top-overflow {
-            box-shadow: kbq-css-variable(modal-body-top-shadow);
+            box-shadow: var(--kbq-shadow-overflow-normal-bottom);
         }
-        // FIXME: default token doesn't exist
+
         .kbq-modal-footer.kbq-modal-body_bottom-overflow {
-            box-shadow: kbq-css-variable(modal-body-bottom-shadow);
+            box-shadow: var(--kbq-shadow-overflow-normal-top);
         }
     }
 
     .kbq-modal-mask {
-        background-color: kbq-css-variable(modal-overlay-background);
+        background-color: var(--kbq-modal-overlay-background);
     }
 }
 

package/modal/modal.scss

@@ -14,7 +14,7 @@
 
     top: 48px;
 
-    border-radius: kbq-css-variable(modal-size-border-radius);
+    border-radius: var(--kbq-modal-size-border-radius);
 
     width: auto;
 
@@ -31,15 +31,15 @@
     }
 
     &.kbq-modal_small {
-        width: kbq-css-variable(modal-size-small-width);
+        width: var(--kbq-modal-size-small-width);
     }
 
     &.kbq-modal_medium {
-        width: kbq-css-variable(modal-size-medium-width);
+        width: var(--kbq-modal-size-medium-width);
     }
 
     &.kbq-modal_large {
-        width: kbq-css-variable(modal-size-large-width);
+        width: var(--kbq-modal-size-large-width);
     }
 
     // todo реализуем когда будем делать 2.0, пока нет возможности отслеживать наличие/отсутствие футера
@@ -75,7 +75,7 @@
 .kbq-modal-content {
     position: relative;
 
-    border-radius: kbq-css-variable(modal-size-border-radius);
+    border-radius: var(--kbq-modal-size-border-radius);
 
     background-clip: padding-box;
 }
@@ -85,11 +85,11 @@
     align-items: center;
     justify-content: space-between;
 
-    padding: kbq-css-variable(modal-size-header-padding-vertical) kbq-css-variable(modal-size-header-padding-right)
-        kbq-css-variable(modal-size-header-padding-vertical) kbq-css-variable(modal-size-header-padding-left);
+    padding: var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-right)
+        var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-left);
 
     & + .kbq-modal-body {
-        padding-top: kbq-css-variable(modal-size-content-padding-top);
+        padding-top: var(--kbq-modal-size-content-padding-top);
     }
 }
 
@@ -106,9 +106,8 @@
 
     max-height: calc(100vh - 260px);
 
-    padding: kbq-css-variable(modal-size-content-padding-top-without-header)
-        kbq-css-variable(modal-size-content-padding-horizontal) kbq-css-variable(modal-size-content-padding-bottom)
-        kbq-css-variable(modal-size-content-padding-horizontal);
+    padding: var(--kbq-modal-size-content-padding-top-without-header) var(--kbq-modal-size-content-padding-horizontal)
+        var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);
 
     word-wrap: break-word;
 
@@ -122,9 +121,9 @@
     display: flex;
     align-items: center;
 
-    padding: kbq-css-variable(modal-size-footer-padding-vertical) kbq-css-variable(modal-size-footer-padding-horizontal);
+    padding: var(--kbq-modal-size-footer-padding-vertical) var(--kbq-modal-size-footer-padding-horizontal);
 
-    gap: kbq-css-variable(modal-size-footer-content-gap-horizontal);
+    gap: var(--kbq-modal-size-footer-content-gap-horizontal);
 }
 
 .kbq-modal-mask {

package/navbar/_navbar-item_horizontal.scss

@@ -15,18 +15,18 @@
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
-    min-height: kbq-css-variable(size-3xl);
-    min-width: kbq-css-variable(size-3xl);
+    min-height: var(--kbq-size-3xl);
+    min-width: var(--kbq-size-3xl);
 
-    margin: kbq-css-variable(size-s);
+    margin: var(--kbq-size-s);
 
     justify-content: center;
 
     &:before {
-        top: calc(-1 * #{kbq-css-variable(size-s)});
-        left: calc(-1 * #{kbq-css-variable(size-s)});
-        right: calc(-1 * #{kbq-css-variable(size-s)});
-        bottom: calc(-1 * #{kbq-css-variable(size-s)});
+        top: calc(-1 * #{var(--kbq-size-s)});
+        left: calc(-1 * #{var(--kbq-size-s)});
+        right: calc(-1 * #{var(--kbq-size-s)});
+        bottom: calc(-1 * #{var(--kbq-size-s)});
     }
 
     &:after {
@@ -37,19 +37,19 @@
     }
 
     & .kbq-navbar-item__title {
-        padding-left: kbq-css-variable(size-xxs);
-        padding-right: kbq-css-variable(size-xxs);
+        padding-left: var(--kbq-size-xxs);
+        padding-right: var(--kbq-size-xxs);
     }
 
     & .kbq-navbar-item__arrow-icon {
-        padding-left: kbq-css-variable(size-xxs);
+        padding-left: var(--kbq-size-xxs);
     }
 
     &.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed) {
         margin-left: 0;
         margin-right: 0;
-        padding-right: kbq-css-variable(size-m);
-        padding-left: kbq-css-variable(size-m);
+        padding-right: var(--kbq-size-m);
+        padding-left: var(--kbq-size-m);
 
         &:before {
             left: 0;
@@ -59,24 +59,24 @@
         & > .kbq-icon {
             align-self: center;
 
-            padding-right: kbq-css-variable(size-xxs);
+            padding-right: var(--kbq-size-xxs);
         }
     }
 
     &.kbq-navbar-bento {
         justify-content: center;
 
-        margin-right: kbq-css-variable(size-xxs);
+        margin-right: var(--kbq-size-xxs);
 
         &:before {
-            right: calc(-1 * #{kbq-css-variable(size-xxs)});
+            right: calc(-1 * #{var(--kbq-size-xxs)});
         }
     }
 
     &.kbq-navbar-item_collapsed {
         justify-content: center;
 
-        padding: kbq-css-variable(size-s);
+        padding: var(--kbq-size-s);
 
         & .kbq-navbar-item__container {
             display: none;
@@ -93,12 +93,12 @@
     }
 
     &.kbq-navbar-item_has-nested {
-        margin-left: kbq-css-variable(size-m);
-        margin-right: kbq-css-variable(size-m);
+        margin-left: var(--kbq-size-m);
+        margin-right: var(--kbq-size-m);
 
         &:before {
-            left: calc(-1 * #{kbq-css-variable(size-m)});
-            right: calc(-1 * #{kbq-css-variable(size-m)});
+            left: calc(-1 * #{var(--kbq-size-m)});
+            right: calc(-1 * #{var(--kbq-size-m)});
         }
     }
 }

package/navbar/_navbar-item_vertical.scss

@@ -6,24 +6,24 @@
 
 .kbq-navbar-item.kbq-vertical {
     & .kbq-navbar-item__container {
-        gap: kbq-css-variable(size-m);
+        gap: var(--kbq-size-m);
     }
 
     &.kbq-expanded {
-        height: kbq-css-variable(size-5xl);
+        height: var(--kbq-size-5xl);
 
         align-items: center;
 
-        padding-right: kbq-css-variable(size-xl);
-        padding-left: kbq-css-variable(size-xl);
+        padding-right: var(--kbq-size-xl);
+        padding-left: var(--kbq-size-xl);
 
-        gap: kbq-css-variable(size-m);
+        gap: var(--kbq-size-m);
 
         &:after {
-            top: kbq-css-variable(size-xxs);
-            right: kbq-css-variable(size-s);
-            bottom: kbq-css-variable(size-xxs);
-            left: kbq-css-variable(size-s);
+            top: var(--kbq-size-xxs);
+            right: var(--kbq-size-s);
+            bottom: var(--kbq-size-xxs);
+            left: var(--kbq-size-s);
         }
 
         &.kbq-navbar-bento {
@@ -34,44 +34,44 @@
             justify-content: center;
             align-items: center;
 
-            top: kbq-css-variable(size-xxs);
-            right: kbq-css-variable(size-xxs);
+            top: var(--kbq-size-xxs);
+            right: var(--kbq-size-xxs);
 
             z-index: 1;
 
-            padding: kbq-css-variable(size-s);
+            padding: var(--kbq-size-s);
 
-            height: kbq-css-variable(size-5xl);
-            width: kbq-css-variable(size-5xl);
+            height: var(--kbq-size-5xl);
+            width: var(--kbq-size-5xl);
 
             &:after {
-                top: kbq-css-variable(size-s);
-                right: kbq-css-variable(size-s);
-                bottom: kbq-css-variable(size-s);
-                left: kbq-css-variable(size-s);
+                top: var(--kbq-size-s);
+                right: var(--kbq-size-s);
+                bottom: var(--kbq-size-s);
+                left: var(--kbq-size-s);
             }
         }
 
         &.kbq-navbar-item_has-nested {
             align-items: center;
 
-            padding: 0 kbq-css-variable(size-m);
+            padding: 0 var(--kbq-size-m);
         }
     }
 
     &.kbq-collapsed {
-        height: kbq-css-variable(size-5xl);
-        width: kbq-css-variable(size-5xl);
+        height: var(--kbq-size-5xl);
+        width: var(--kbq-size-5xl);
 
-        padding: kbq-css-variable(size-l);
+        padding: var(--kbq-size-l);
 
         justify-content: center;
 
         &:after {
-            top: kbq-css-variable(size-s);
-            right: kbq-css-variable(size-s);
-            bottom: kbq-css-variable(size-s);
-            left: kbq-css-variable(size-s);
+            top: var(--kbq-size-s);
+            right: var(--kbq-size-s);
+            bottom: var(--kbq-size-s);
+            left: var(--kbq-size-s);
         }
 
         & .kbq-badge {
@@ -79,8 +79,8 @@
 
             z-index: 1;
 
-            top: kbq-css-variable(size-xs);
-            right: kbq-css-variable(size-xs);
+            top: var(--kbq-size-xs);
+            right: var(--kbq-size-xs);
         }
 
         & .kbq-navbar-item__container {

package/navbar/_navbar-theme.scss

@@ -4,31 +4,31 @@
     &:not(.kbq-navbar-item_has-nested) {
         &:after {
             display: block;
-            background: kbq-css-variable(navbar-item-#{$state-name}-content-background);
+            background: var(--kbq-navbar-item-#{$state-name}-content-background);
         }
     }
 
     .kbq-navbar-title {
-        color: kbq-css-variable(navbar-item-#{$state-name}-content-text);
+        color: var(--kbq-navbar-item-#{$state-name}-content-text);
     }
 
     & > .kbq-icon {
-        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-left) !important;
+        color: var(--kbq-navbar-item-#{$state-name}-content-icon-left) !important;
     }
 
     .kbq-navbar-item__arrow-icon {
-        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-right) !important;
+        color: var(--kbq-navbar-item-#{$state-name}-content-icon-right) !important;
     }
 }
 
 @mixin kbq-navbar-theme() {
     .kbq-navbar,
     .kbq-vertical-navbar .kbq-vertical-navbar__container {
-        background-color: kbq-css-variable(navbar-background);
+        background-color: var(--kbq-navbar-background);
     }
 
     .kbq-vertical-navbar .kbq-vertical-navbar__container {
-        border-right: 1px solid kbq-css-variable(navbar-border);
+        border-right: 1px solid var(--kbq-navbar-border);
     }
 
     .kbq-navbar-item,
@@ -47,7 +47,7 @@
 
             &:after {
                 display: block;
-                box-shadow: inset 0 0 0 2px kbq-css-variable(states-line-focus-theme);
+                box-shadow: inset 0 0 0 2px var(--kbq-states-line-focus-theme);
             }
         }
 
@@ -81,7 +81,7 @@
     }
 
     .kbq-navbar-divider {
-        background: kbq-css-variable(line-contrast-less);
+        background: var(--kbq-line-contrast-less);
     }
 }