@ozen-ui/kit 0.38.0 → 0.39.0

package/__inner__/cjs/components/List/List.css

@@ -29,7 +29,7 @@
     }
 
   .List_size_2xs {
-      --list-gutter: var(--space-xs);
+      --list-gutter: var(--spacing-3xs);
       --list-item-min-height: 32px;
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 16px;
@@ -40,7 +40,7 @@
     }
 
   .List_size_xs {
-      --list-gutter: var(--space-xs);
+      --list-gutter: var(--spacing-3xs);
       --list-item-min-height: 40px;
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 24px;
@@ -51,7 +51,7 @@
     }
 
   .List_size_s {
-      --list-gutter: var(--space-xs);
+      --list-gutter: var(--spacing-3xs);
       --list-item-min-height: 48px;
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 32px;
@@ -62,7 +62,7 @@
     }
 
   .List_size_m {
-      --list-gutter: var(--space-s);
+      --list-gutter: var(--spacing-2xs);
       --list-item-min-height: 56px;
       --list-item-icon-min-width: 24px;
       --list-item-avatar-min-width: 40px;
@@ -73,7 +73,7 @@
     }
 
   .List_size_l {
-      --list-gutter: var(--space-s);
+      --list-gutter: var(--spacing-2xs);
       --list-item-min-height: 64px;
       --list-item-icon-min-width: 24px;
       --list-item-avatar-min-width: 48px;

package/__inner__/cjs/components/Modal/Modal.css

@@ -20,7 +20,7 @@
     inline-size: 400px;
     box-sizing: border-box;
     border: 2px solid black;
-    padding: var(--space-2xl);
+    padding: var(--spacing-l);
   }
 
   .Modal_hidden {

package/__inner__/cjs/components/SectionMessage/SectionMessage.css

@@ -44,7 +44,7 @@
     }
 .SectionMessage_size_xs {
       --section-message-padding: 12px;
-      --section-message-column-gap: var(--space-s);
+      --section-message-column-gap: var(--spacing-2xs);
       --section-message-icon-padding: 0;
 
       font: var(--typography-text-xs-font);
@@ -60,7 +60,7 @@
       }
 .SectionMessage_size_s {
       --section-message-padding: 14px 16px;
-      --section-message-column-gap: var(--space-m);
+      --section-message-column-gap: var(--spacing-xs);
 
       font: var(--typography-text-s-font);
 
@@ -75,7 +75,7 @@
       }
 .SectionMessage_size_m {
       --section-message-padding: 16px 20px;
-      --section-message-column-gap: var(--space-m);
+      --section-message-column-gap: var(--spacing-xs);
       --section-message-icon-padding: 0;
 
       font: var(--typography-text-m-font);
@@ -91,7 +91,7 @@
       }
 .SectionMessage_size_l {
       --section-message-padding: 18px 24px;
-      --section-message-column-gap: var(--space-l);
+      --section-message-column-gap: var(--spacing-s);
 
       font: var(--typography-text-l-font);
 
@@ -114,7 +114,7 @@
     align-items: center;
   }
 .SectionMessage-Action {
-    margin-block-start: var(--space-s);
+    margin-block-start: var(--spacing-2xs);
   }
 .SectionMessage-Button.Button {
     color: var(--section-message-button-color);

package/__inner__/cjs/components/Segment/components/SegmentItem.css

@@ -4,15 +4,17 @@
   --segment-item-border-radius: var(--border-radius-xs);
   --segment-item-text-color: var(--color-content-primary);
   --segment-item-text-color-hover: var(--color-content-secondary);
-  --segment-item-gap: var(--space-s);
+  --segment-item-gap: var(--spacing-2xs);
   gap: var(--segment-item-gap);
   padding: var(--segment-item-padding-vertical)
     var(--segment-item-padding-horizontal);
   background-color: var(--segment-item-background-color);
   border-radius: var(--segment-item-border-radius);
   color: var(--segment-item-text-color);
-  transition: background-color var(--transition-default),
-    color var(--transition-default), box-shadow var(--transition-default);
+  transition:
+    background-color var(--transition-default),
+    color var(--transition-default),
+    box-shadow var(--transition-default);
   display: flex;
   align-items: center;
   position: relative;

package/__inner__/cjs/components/Slider/Slider.css

@@ -16,7 +16,7 @@
     --slider-inner-rail-background-color: var(--color-border-disabled);
   }
 .Slider_hasMarks .Slider-Container {
-      margin-block-end: var(--space-xl);
+      margin-block-end: var(--spacing-m);
     }
 .Slider-Container {
     position: relative;

package/__inner__/cjs/components/Snackbar/components/Snackbar/Snackbar.css

@@ -6,8 +6,8 @@
   display: flex;
   flex-direction: column;
   z-index: var(--z-index-snackbar);
-  margin: var(--space-m);
-  gap: var(--space-s);
+  margin: var(--spacing-xs);
+  gap: var(--spacing-2xs);
 
   /* workaround for a removed scroll bar on the body */
   border-inline-end: var(--removed-body-scroll-bar-size) solid transparent;

package/__inner__/cjs/components/Tabs/components/Tab/Tab.css

@@ -14,7 +14,7 @@
   white-space: nowrap;
   background: transparent;
   transition: var(--transition-default);
-  gap: var(--space-s);
+  gap: var(--spacing-2xs);
   border: none;
 }
 .Tab:focus {

package/__inner__/cjs/components/Tag/Tag.css

@@ -4,7 +4,7 @@
   align-items: center;
   border-radius: var(--border-radius-xs);
   padding: var(--tag-padding);
-  gap: var(--space-xs);
+  gap: var(--spacing-3xs);
   outline: none;
   border: none;
   text-decoration: none;

package/__inner__/cjs/components/Textarea/Textarea.css

@@ -83,7 +83,7 @@
 
   .Textarea-Counter {
     float: right;
-    margin-inline-start: var(--space-l);
+    margin-inline-start: var(--spacing-s);
     color: var(--color-content-secondary);
   }
 

package/__inner__/cjs/components/Tooltip/Tooltip.css

@@ -3,7 +3,7 @@
   max-inline-size: 300px;
 }
 .Tooltip_size_xs {
-      padding: var(--space-s) var(--space-m);
+      padding: var(--spacing-2xs) var(--spacing-xs);
 
       font: var(--typography-text-xs-font);
 
@@ -12,7 +12,7 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Tooltip_size_s {
-      padding: var(--space-m) var(--space-l);
+      padding: var(--spacing-xs) var(--spacing-s);
 
       font: var(--typography-text-s-font);
 

package/__inner__/cjs/components/Typography/Typography.css

@@ -125,7 +125,7 @@
       text-transform: var(--typography-heading-4xl-text_transform, none);
     }
 .Typography_variant_heading-4xl.Typography_defaultMargin {
-        margin-block-end: var(--space-4xl);
+        margin-block-end: var(--spacing-2xl);
       }
 .Typography_variant_heading-3xl {
       font: var(--typography-heading-3xl-font);
@@ -133,7 +133,7 @@
       text-transform: var(--typography-heading-3xl-text_transform, none);
     }
 .Typography_variant_heading-3xl.Typography_defaultMargin {
-        margin-block-end: var(--space-4xl);
+        margin-block-end: var(--spacing-2xl);
       }
 .Typography_variant_heading-2xl {
       font: var(--typography-heading-2xl-font);
@@ -141,7 +141,7 @@
       text-transform: var(--typography-heading-2xl-text_transform, none);
     }
 .Typography_variant_heading-2xl.Typography_defaultMargin {
-        margin-block-end: var(--space-3xl);
+        margin-block-end: var(--spacing-xl);
       }
 .Typography_variant_heading-xl {
       font: var(--typography-heading-xl-font);
@@ -149,7 +149,7 @@
       text-transform: var(--typography-heading-xl-text_transform, none);
     }
 .Typography_variant_heading-xl.Typography_defaultMargin {
-        margin-block-end: var(--space-2xl);
+        margin-block-end: var(--spacing-l);
       }
 .Typography_variant_text-4xl {
       font: var(--typography-text-4xl-font);
@@ -157,7 +157,7 @@
       text-transform: var(--typography-text-4xl-text_transform, none);
     }
 .Typography_variant_text-4xl.Typography_defaultMargin {
-        margin-block-end: var(--space-4xl);
+        margin-block-end: var(--spacing-2xl);
       }
 .Typography_variant_text-4xl_1 {
       font: var(--typography-text-4xl_1-font);
@@ -165,7 +165,7 @@
       text-transform: var(--typography-text-4xl_1-text_transform, none);
     }
 .Typography_variant_text-4xl_1.Typography_defaultMargin {
-        margin-block-end: var(--space-4xl);
+        margin-block-end: var(--spacing-2xl);
       }
 .Typography_variant_text-3xl {
       font: var(--typography-text-3xl-font);
@@ -173,7 +173,7 @@
       text-transform: var(--typography-text-3xl-text_transform, none);
     }
 .Typography_variant_text-3xl.Typography_defaultMargin {
-        margin-block-end: var(--space-4xl);
+        margin-block-end: var(--spacing-2xl);
       }
 .Typography_variant_text-3xl_1 {
       font: var(--typography-text-3xl_1-font);
@@ -181,7 +181,7 @@
       text-transform: var(--typography-text-3xl_1-text_transform, none);
     }
 .Typography_variant_text-3xl_1.Typography_defaultMargin {
-        margin-block-end: var(--space-4xl);
+        margin-block-end: var(--spacing-2xl);
       }
 .Typography_variant_text-2xl {
       font: var(--typography-text-2xl-font);
@@ -189,7 +189,7 @@
       text-transform: var(--typography-text-2xl-text_transform, none);
     }
 .Typography_variant_text-2xl.Typography_defaultMargin {
-        margin-block-end: var(--space-3xl);
+        margin-block-end: var(--spacing-xl);
       }
 .Typography_variant_text-2xl_1 {
       font: var(--typography-text-2xl_1-font);
@@ -197,7 +197,7 @@
       text-transform: var(--typography-text-2xl_1-text_transform, none);
     }
 .Typography_variant_text-2xl_1.Typography_defaultMargin {
-        margin-block-end: var(--space-3xl);
+        margin-block-end: var(--spacing-xl);
       }
 .Typography_variant_text-xl {
       font: var(--typography-text-xl-font);
@@ -205,7 +205,7 @@
       text-transform: var(--typography-text-xl-text_transform, none);
     }
 .Typography_variant_text-xl.Typography_defaultMargin {
-        margin-block-end: var(--space-2xl);
+        margin-block-end: var(--spacing-l);
       }
 .Typography_variant_text-xl_1 {
       font: var(--typography-text-xl_1-font);
@@ -213,7 +213,7 @@
       text-transform: var(--typography-text-xl_1-text_transform, none);
     }
 .Typography_variant_text-xl_1.Typography_defaultMargin {
-        margin-block-end: var(--space-2xl);
+        margin-block-end: var(--spacing-l);
       }
 .Typography_variant_text-l {
       font: var(--typography-text-l-font);
@@ -221,7 +221,7 @@
       text-transform: var(--typography-text-l-text_transform, none);
     }
 .Typography_variant_text-l.Typography_defaultMargin {
-        margin-block-end: var(--space-xl);
+        margin-block-end: var(--spacing-m);
       }
 .Typography_variant_text-l_1 {
       font: var(--typography-text-l_1-font);
@@ -229,7 +229,7 @@
       text-transform: var(--typography-text-l_1-text_transform, none);
     }
 .Typography_variant_text-l_1.Typography_defaultMargin {
-        margin-block-end: var(--space-xl);
+        margin-block-end: var(--spacing-m);
       }
 .Typography_variant_text-m {
       font: var(--typography-text-m-font);
@@ -237,7 +237,7 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .Typography_variant_text-m.Typography_defaultMargin {
-        margin-block-end: var(--space-xl);
+        margin-block-end: var(--spacing-m);
       }
 .Typography_variant_text-m_1 {
       font: var(--typography-text-m_1-font);
@@ -245,7 +245,7 @@
       text-transform: var(--typography-text-m_1-text_transform, none);
     }
 .Typography_variant_text-m_1.Typography_defaultMargin {
-        margin-block-end: var(--space-xl);
+        margin-block-end: var(--spacing-m);
       }
 .Typography_variant_text-s {
       font: var(--typography-text-s-font);
@@ -253,7 +253,7 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .Typography_variant_text-s.Typography_defaultMargin {
-        margin-block-end: var(--space-m);
+        margin-block-end: var(--spacing-xs);
       }
 .Typography_variant_text-s_1 {
       font: var(--typography-text-s_1-font);
@@ -261,7 +261,7 @@
       text-transform: var(--typography-text-s_1-text_transform, none);
     }
 .Typography_variant_text-s_1.Typography_defaultMargin {
-        margin-block-end: var(--space-m);
+        margin-block-end: var(--spacing-xs);
       }
 .Typography_variant_text-xs {
       font: var(--typography-text-xs-font);
@@ -269,7 +269,7 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Typography_variant_text-xs.Typography_defaultMargin {
-        margin-block-end: var(--space-s);
+        margin-block-end: var(--spacing-2xs);
       }
 .Typography_variant_text-xs_1 {
       font: var(--typography-text-xs_1-font);
@@ -277,7 +277,7 @@
       text-transform: var(--typography-text-xs_1-text_transform, none);
     }
 .Typography_variant_text-xs_1.Typography_defaultMargin {
-        margin-block-end: var(--space-s);
+        margin-block-end: var(--spacing-2xs);
       }
 .Typography_variant_text-2xs {
       font: var(--typography-text-2xs-font);
@@ -285,7 +285,7 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .Typography_variant_text-2xs.Typography_defaultMargin {
-        margin-block-end: var(--space-xs);
+        margin-block-end: var(--spacing-3xs);
       }
 .Typography_variant_text-2xs_1 {
       font: var(--typography-text-2xs_1-font);
@@ -293,7 +293,7 @@
       text-transform: var(--typography-text-2xs_1-text_transform, none);
     }
 .Typography_variant_text-2xs_1.Typography_defaultMargin {
-        margin-block-end: var(--space-xs);
+        margin-block-end: var(--spacing-3xs);
       }
 .Typography_variant_text-3xs {
       font: var(--typography-text-3xs-font);
@@ -301,7 +301,7 @@
       text-transform: var(--typography-text-3xs-text_transform, none);
     }
 .Typography_variant_text-3xs.Typography_defaultMargin {
-        margin-block-end: var(--space-xs);
+        margin-block-end: var(--spacing-3xs);
       }
 .Typography_variant_text-3xs_1 {
       font: var(--typography-text-3xs_1-font);
@@ -309,7 +309,7 @@
       text-transform: var(--typography-text-3xs_1-text_transform, none);
     }
 .Typography_variant_text-3xs_1.Typography_defaultMargin {
-        margin-block-end: var(--space-xs);
+        margin-block-end: var(--spacing-3xs);
       }
 .Typography_variant_caption-3xs {
       font: var(--typography-caption-3xs-font);
@@ -317,7 +317,7 @@
       text-transform: var(--typography-caption-3xs-text_transform, none);
     }
 .Typography_variant_caption-3xs.Typography_defaultMargin {
-        margin-block-end: var(--space-xs);
+        margin-block-end: var(--spacing-3xs);
       }
 .Typography_variant_caption-3xs_1 {
       font: var(--typography-caption-3xs_1-font);
@@ -325,7 +325,7 @@
       text-transform: var(--typography-caption-3xs_1-text_transform, none);
     }
 .Typography_variant_caption-3xs_1.Typography_defaultMargin {
-        margin-block-end: var(--space-xs);
+        margin-block-end: var(--spacing-3xs);
       }
 .Typography_link {
     color: var(--color-content-action);

package/__inner__/esm/components/Accordion/Accordion.css

@@ -10,9 +10,10 @@
   overflow: hidden;
 }
 .Accordion_size_s {
-      --accordion-summary-padding: var(--space-l);
-      --accordion-details-padding: var(--space-m) var(--space-l) var(--space-l);
-      --accordion-column-gap: var(--space-m);
+      --accordion-summary-padding: var(--spacing-s);
+      --accordion-details-padding: var(--spacing-xs) var(--spacing-s)
+        var(--spacing-s);
+      --accordion-column-gap: var(--spacing-xs);
     }
 .Accordion_size_s .AccordionSummary {
         font: var(--typography-text-s_1-font);
@@ -20,9 +21,9 @@
         text-transform: var(--typography-text-s_1-text_transform, none);
       }
 .Accordion_size_m {
-      --accordion-column-gap: var(--space-m);
-      --accordion-summary-padding: var(--space-l);
-      --accordion-details-padding: var(--space-l);
+      --accordion-column-gap: var(--spacing-xs);
+      --accordion-summary-padding: var(--spacing-s);
+      --accordion-details-padding: var(--spacing-s);
     }
 .Accordion_size_m .AccordionSummary {
         font: var(--typography-text-m_1-font);
@@ -30,10 +31,10 @@
         text-transform: var(--typography-text-m_1-text_transform, none);
       }
 .Accordion_size_l {
-      --accordion-column-gap: var(--space-l);
-      --accordion-summary-padding: var(--space-xl);
-      --accordion-details-padding: var(--space-l) var(--space-xl)
-        var(--space-xl);
+      --accordion-column-gap: var(--spacing-s);
+      --accordion-summary-padding: var(--spacing-m);
+      --accordion-details-padding: var(--spacing-s) var(--spacing-m)
+        var(--spacing-m);
     }
 .Accordion_size_l .AccordionSummary {
         font: var(--typography-text-l_1-font);
@@ -41,10 +42,10 @@
         text-transform: var(--typography-text-l_1-text_transform, none);
       }
 .Accordion_size_xl {
-      --accordion-column-gap: var(--space-xl);
-      --accordion-summary-padding: var(--space-2xl);
-      --accordion-details-padding: var(--space-l) var(--space-2xl)
-        var(--space-2xl);
+      --accordion-column-gap: var(--spacing-m);
+      --accordion-summary-padding: var(--spacing-l);
+      --accordion-details-padding: var(--spacing-s) var(--spacing-l)
+        var(--spacing-l);
     }
 .Accordion_size_xl .AccordionSummary {
         font: var(--typography-text-xl_1-font);
@@ -53,13 +54,13 @@
       }
 .Accordion_compressed.Accordion_size_s,
   .Accordion_compressed.Accordion_size_m {
-    --accordion-summary-padding: var(--space-s) var(--space-l);
+    --accordion-summary-padding: var(--spacing-2xs) var(--spacing-s);
   }
 .Accordion_compressed.Accordion_size_l {
-    --accordion-summary-padding: var(--space-m) var(--space-l);
+    --accordion-summary-padding: var(--spacing-xs) var(--spacing-s);
   }
 .Accordion_compressed.Accordion_size_xl {
-    --accordion-summary-padding: var(--space-l) var(--space-2xl);
+    --accordion-summary-padding: var(--spacing-s) var(--spacing-l);
   }
 .Accordion_variant_corner-primary {
       --accordion-background-color: var(--color-background-main);

package/__inner__/esm/components/Alert/Alert.css

@@ -2,8 +2,8 @@
 .Alert {
   position: relative;
   display: flex;
-  -moz-column-gap: var(--space-s);
-       column-gap: var(--space-s);
+  -moz-column-gap: var(--spacing-2xs);
+       column-gap: var(--spacing-2xs);
   align-items: flex-start;
   inline-size: 100%;
   overflow: auto;
@@ -65,11 +65,11 @@
     text-transform: var(--typography-text-s_1-text_transform, none);
   }
 .Alert-Body {
-    margin-block-start: var(--space-xs);
+    margin-block-start: var(--spacing-3xs);
     color: var(--alert-body-text-color);
   }
 .Alert-Action {
-    margin-block-start: var(--space-s);
+    margin-block-start: var(--spacing-2xs);
   }
 .IconButton.Alert-CloseButton {
   color: var(--alert-close-button-color);

package/__inner__/esm/components/Breadcrumbs/Breadcrumbs.css

@@ -12,7 +12,3 @@
   display: flex;
   align-items: center;
 }
-
-.Button.BreadcrumbItem {
-  color: var(--color-content-secondary);
-}

package/__inner__/esm/components/Breadcrumbs/components/BreadcrumbItem.js

@@ -2,13 +2,13 @@ import { __assign, __rest } from "tslib";
 import React from 'react';
 import { cn } from '../../../utils/classname';
 import { polymorphicComponentWithRef } from '../../../utils/polymorphicComponentWithRef';
-import { Button } from '../../Button';
+import { Button } from '../../ButtonNext';
 import { useBreadcrumbsContext } from '../BreadcrumbsContext';
 import { BREADCRUMB_ITEM_DEFAULT_TAG } from '../constants';
 export var cnBreadcrumbItem = cn('BreadcrumbItem');
 export var BreadcrumbItem = polymorphicComponentWithRef(function (_a, ref) {
     var _b = _a.as, as = _b === void 0 ? BREADCRUMB_ITEM_DEFAULT_TAG : _b, disabled = _a.disabled, IconLeftProp = _a.iconLeft, IconRightProp = _a.iconRight, children = _a.children, className = _a.className, other = __rest(_a, ["as", "disabled", "iconLeft", "iconRight", "children", "className"]);
     var size = useBreadcrumbsContext().size;
-    return (React.createElement(Button, __assign({}, other, { className: cnBreadcrumbItem({}, [className]), as: as, variant: "function", disabled: disabled, size: size, iconLeft: IconLeftProp, iconRight: IconRightProp, ref: ref }), children));
+    return (React.createElement(Button, __assign({}, other, { className: cnBreadcrumbItem({}, [className]), as: as, variant: "function", color: "tertiary", disabled: disabled, size: size, iconLeft: IconLeftProp, iconRight: IconRightProp, ref: ref }), children));
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';

package/__inner__/esm/components/Button/Button.js

@@ -32,7 +32,7 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
         name: 'Button',
     });
     if (process.env.NODE_ENV !== 'production') {
-        deprecate('Компонент «%s» устарел. Для замены используйте компонент «%s».', 'Button', 'ButtonNext');
+        deprecate('Компонент «Button» устарел. Для замены используйте компонент «ButtonNext».');
     }
     var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, labelProps = props.labelProps, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
     var iconSize = getIconSizeToFormElement(size);

package/__inner__/esm/components/Card/Card.css

@@ -14,15 +14,15 @@
   }
 
   .Card_size_s {
-      --card-padding: var(--space-l);
+      --card-padding: var(--spacing-s);
     }
 
   .Card_size_m {
-      --card-padding: var(--space-xl);
+      --card-padding: var(--spacing-m);
     }
 
   .Card_size_l {
-      --card-padding: var(--space-2xl);
+      --card-padding: var(--spacing-l);
     }
 
   .Card_interactive {

package/__inner__/esm/components/Chip/Chip.css

@@ -10,8 +10,8 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
 
       --chip-min-width: 64px;
-      --chip-height: var(--space-xl);
-      --chip-padding-x: var(--space-m);
+      --chip-height: var(--spacing-m);
+      --chip-padding-x: var(--spacing-xs);
     }
 .Chip_size_s {
       font: var(--typography-text-s-font);
@@ -19,8 +19,8 @@
       text-transform: var(--typography-text-s-text_transform, none);
 
       --chip-min-width: 72px;
-      --chip-height: var(--space-2xl);
-      --chip-padding-x: var(--space-l);
+      --chip-height: var(--spacing-l);
+      --chip-padding-x: var(--spacing-s);
     }
 .Chip_size_m {
       font: var(--typography-text-m-font);
@@ -28,7 +28,7 @@
       text-transform: var(--typography-text-m-text_transform, none);
 
       --chip-min-width: 80px;
-      --chip-height: var(--space-3xl);
+      --chip-height: var(--spacing-xl);
       --chip-padding-x: 20px;
     }
 .Chip_size_l {
@@ -37,8 +37,8 @@
       text-transform: var(--typography-text-l-text_transform, none);
 
       --chip-min-width: 88px;
-      --chip-height: var(--space-4xl);
-      --chip-padding-x: var(--space-xl);
+      --chip-height: var(--spacing-2xl);
+      --chip-padding-x: var(--spacing-m);
     }
 .Chip_color_primary {
       --chip-bg-color: var(--color-background-action-light);
@@ -59,8 +59,9 @@
     color: var(--chip-text-color);
     padding: 0 var(--chip-padding-x);
     border-radius: var(--chip-border-radius);
-    gap: var(--space-s);
-    transition: border-color var(--transition-default),
+    gap: var(--spacing-2xs);
+    transition:
+      border-color var(--transition-default),
       color var(--transition-default),
       background-color var(--transition-default),
       box-shadow var(--transition-default);