@ozen-ui/kit 0.38.0 → 0.40.0

package/__inner__/esm/components/IconButton/IconButton.js

@@ -34,7 +34,7 @@ export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
         name: 'IconButton',
     });
     if (process.env.NODE_ENV !== 'production') {
-        deprecate('Компонент «%s» устарел. Для замены используйте компонент «%s».', 'IconButton', 'IconButtonNext');
+        deprecate('Компонент «IconButton» устарел. Для замены используйте компонент «IconButtonNext».');
     }
     var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var isInteractionPrevented = disabled || loading;

package/__inner__/esm/components/IconButtonNext/IconButton.css

@@ -71,6 +71,7 @@
     --icon-button-bg-color: var(--color-background-action);
     --icon-button-bg-color-hover: var(--color-background-action-hover);
     --icon-button-bg-color-active: var(--color-background-action-pressed);
+    --icon-button-bg-color-focus: var(--color-background-action-hover);
     --icon-button-font-color: var(--color-content-action-on);
     --icon-button-font-color-hover: var(--color-content-action-on);
     --icon-button-font-color-active: var(--color-content-action-on);
@@ -83,6 +84,7 @@
     --icon-button-bg-color-active: var(
       --color-content-action-secondary-pressed
     );
+    --icon-button-bg-color-focus: var(--color-content-action-secondary-hover);
     --icon-button-font-color: var(--color-content-action-on);
     --icon-button-font-color-hover: var(--color-content-action-on);
     --icon-button-font-color-active: var(--color-content-action-on);
@@ -93,6 +95,7 @@
     --icon-button-bg-color: var(--color-background-tertiary);
     --icon-button-bg-color-hover: var(--color-background-tertiary-hover);
     --icon-button-bg-color-active: var(--color-background-tertiary-pressed);
+    --icon-button-bg-color-focus: var(--color-background-tertiary-hover);
     --icon-button-font-color: var(--color-content-primary);
     --icon-button-font-color-hover: var(--color-content-primary);
     --icon-button-font-color-active: var(--color-content-primary);
@@ -103,6 +106,7 @@
     --icon-button-bg-color: var(--color-background-error);
     --icon-button-bg-color-hover: var(--color-background-error-hover);
     --icon-button-bg-color-active: var(--color-background-error-pressed);
+    --icon-button-bg-color-focus: var(--color-background-error-hover);
     --icon-button-font-color: var(--color-content-action-on);
     --icon-button-font-color-hover: var(--color-content-action-on);
     --icon-button-font-color-active: var(--color-content-action-on);
@@ -115,6 +119,7 @@
     --icon-button-bg-color: var(--color-background-action-light);
     --icon-button-bg-color-hover: var(--color-background-action-light-hover);
     --icon-button-bg-color-active: var(--color-background-action-light-pressed);
+    --icon-button-bg-color-focus: var(--color-background-action-light-hover);
     --icon-button-font-color: var(--color-content-action);
     --icon-button-font-color-hover: var(--color-content-action);
     --icon-button-font-color-active: var(--color-content-action);
@@ -125,6 +130,7 @@
     --icon-button-bg-color: var(--color-background-secondary);
     --icon-button-bg-color-hover: var(--color-background-secondary-hover);
     --icon-button-bg-color-active: var(--color-background-secondary-pressed);
+    --icon-button-bg-color-focus: var(--color-background-secondary-hover);
     --icon-button-font-color: var(--color-content-primary);
     --icon-button-font-color-hover: var(--color-content-primary);
     --icon-button-font-color-active: var(--color-content-primary);
@@ -135,6 +141,7 @@
     --icon-button-bg-color: var(--color-background-primary);
     --icon-button-bg-color-hover: var(--color-background-primary-hover);
     --icon-button-bg-color-active: var(--color-background-primary-pressed);
+    --icon-button-bg-color-focus: var(--color-background-primary-hover);
     --icon-button-font-color: var(--color-content-secondary);
     --icon-button-font-color-hover: var(--color-content-secondary);
     --icon-button-font-color-active: var(--color-content-secondary);
@@ -145,6 +152,7 @@
     --icon-button-bg-color: var(--color-background-error-light);
     --icon-button-bg-color-hover: var(--color-background-error-light-hover);
     --icon-button-bg-color-active: var(--color-background-error-light-pressed);
+    --icon-button-bg-color-focus: var(--color-background-error-light-hover);
     --icon-button-font-color: var(--color-content-error);
     --icon-button-font-color-hover: var(--color-content-error);
     --icon-button-font-color-active: var(--color-content-error);
@@ -157,6 +165,7 @@
     --icon-button-bg-color: transparent;
     --icon-button-bg-color-hover: var(--color-background-action-light-hover);
     --icon-button-bg-color-active: var(--color-background-action-light-pressed);
+    --icon-button-bg-color-focus: var(--color-background-action-light-hover);
     --icon-button-font-color: var(--color-content-action);
     --icon-button-font-color-hover: var(--color-content-action);
     --icon-button-font-color-active: var(--color-content-action);
@@ -167,6 +176,7 @@
     --icon-button-bg-color: transparent;
     --icon-button-bg-color-hover: var(--color-background-secondary-hover);
     --icon-button-bg-color-active: var(--color-background-secondary-pressed);
+    --icon-button-bg-color-focus: var(--color-background-secondary-hover);
     --icon-button-font-color: var(--color-content-primary);
     --icon-button-font-color-hover: var(--color-content-primary);
     --icon-button-font-color-active: var(--color-content-primary);
@@ -177,6 +187,7 @@
     --icon-button-bg-color: transparent;
     --icon-button-bg-color-hover: var(--color-background-primary-hover);
     --icon-button-bg-color-active: var(--color-background-primary-pressed);
+    --icon-button-bg-color-focus: var(--color-background-primary-hover);
     --icon-button-font-color: var(--color-content-secondary);
     --icon-button-font-color-hover: var(--color-content-secondary);
     --icon-button-font-color-active: var(--color-content-secondary);
@@ -187,6 +198,7 @@
     --icon-button-bg-color: transparent;
     --icon-button-bg-color-hover: var(--color-background-error-light-hover);
     --icon-button-bg-color-active: var(--color-background-error-light-pressed);
+    --icon-button-bg-color-focus: var(--color-background-error-light-hover);
     --icon-button-font-color: var(--color-content-error);
     --icon-button-font-color-hover: var(--color-content-error);
     --icon-button-font-color-active: var(--color-content-error);
@@ -269,7 +281,7 @@
     border-radius: 50%;
   }
 
-  /** disabled */
+  /** disabled & loading */
 
   .IconButtonNext_variant_contained.IconButtonNext_disabled,
   .IconButtonNext_variant_contained.IconButtonNext_loading,
@@ -321,6 +333,7 @@
     /* the bug in outline property before chrome version 94 – doesn't repeat radius of an element */
     box-shadow: var(--shadow-outline-focused);
     color: var(--icon-button-font-color-focus);
+    background-color: var(--icon-button-bg-color-focus);
   }
 
   .IconButtonNext:focus:not(:focus-visible) {

package/__inner__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDark.css

@@ -3,7 +3,7 @@
   --color-content-secondary: #aeb1c4;
   --color-content-primary: #fff;
   --color-content-tertiary: #7e8194;
-  --color-content-disabled: #7e8194;
+  --color-content-disabled: #636574;
   --color-content-ghost-disabled: rgb(255 255 255 / 40%);
   --color-content-action: #023dff;
   --color-content-action-hover: #0534d0;
@@ -145,28 +145,28 @@
   --color-accent-tertiary-pressed: #43475b;
   --color-accent-disabled: #2f3240;
   --color-accent-main-inverse: #c7c8ce;
-  --color-additional-a1: #0b6abe;
-  --color-additional-a2: #1899e9;
-  --color-additional-a3: #b3f1ff;
-  --color-additional-b1: #b5215f;
-  --color-additional-b2: #e62d73;
-  --color-additional-b3: #ffb5cd;
-  --color-additional-c1: #e64920;
-  --color-additional-c2: #f46c1b;
-  --color-additional-c3: #ffe2a8;
-  --color-additional-d1: #ff8e00;
-  --color-additional-d2: #ffc100;
-  --color-additional-d3: #fff9a2;
-  --color-additional-e1: #771db4;
-  --color-additional-e2: #a02be5;
-  --color-additional-e3: #e9b7fe;
-  --color-additional-f1: #107c60;
-  --color-additional-f2: #17ae87;
-  --color-additional-f3: #abeada;
-  --color-additional-g1: #b88f27;
-  --color-additional-g2: #e0b548;
-  --color-additional-g3: #f4d37d;
-  --color-additional-h1: #747e89;
-  --color-additional-h2: #bdc4cb;
-  --color-additional-h3: #e1e4e7;
+  --color-additional-a1: #866c47;
+  --color-additional-a2: #d4aa6b;
+  --color-additional-a3: #eeddc4;
+  --color-additional-b1: #763986;
+  --color-additional-b2: #ba55d3;
+  --color-additional-b3: #e3bbed;
+  --color-additional-c1: #638125;
+  --color-additional-c2: #9acd32;
+  --color-additional-c3: #d7ebad;
+  --color-additional-d1: #23867f;
+  --color-additional-d2: #30d5c8;
+  --color-additional-d3: #aceee9;
+  --color-additional-e1: #9f5237;
+  --color-additional-e2: #ff7f50;
+  --color-additional-e3: #ffccb9;
+  --color-additional-f1: #1966a0;
+  --color-additional-f2: #1fa1ff;
+  --color-additional-f3: #a5d9ff;
+  --color-additional-g1: #9a4270;
+  --color-additional-g2: #f664af;
+  --color-additional-g3: #fbc1df;
+  --color-additional-h1: #9f891a;
+  --color-additional-h2: #ffda1f;
+  --color-additional-h3: #fff0a5;
 }

package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css

@@ -47,7 +47,7 @@
   --color-background-tertiary: #d7d8e1;
   --color-background-tertiary-hover: #c2c5d3;
   --color-background-tertiary-pressed: #aeb1c4;
-  --color-background-disabled: #d7d8e1;
+  --color-background-disabled: #ebecf0;
   --color-background-action: #023dff;
   --color-background-action-hover: #0534d0;
   --color-background-action-pressed: #082ba0;
@@ -55,9 +55,9 @@
   --color-background-action-light: #d9e2ff;
   --color-background-action-light-hover: #ccd8ff;
   --color-background-action-light-pressed: #9ab1ff;
-  --color-background-accent-action-light: #0534d0;
-  --color-background-accent-action-light-hover: #082ba0;
-  --color-background-accent-action-light-pressed: #0a2171;
+  --color-background-accent-action-light: #082ba0;
+  --color-background-accent-action-light-hover: #0a2171;
+  --color-background-accent-action-light-pressed: #0d1841;
   --color-background-action-secondary: #2c2c33;
   --color-background-action-secondary-hover: #1e1d22;
   --color-background-action-secondary-pressed: #17161a;
@@ -116,7 +116,7 @@
   --color-border-secondary: #d7d8e1;
   --color-border-secondary-hover: #c2c5d3;
   --color-border-secondary-pressed: #aeb1c4;
-  --color-border-disabled: #c2c5d3;
+  --color-border-disabled: #d7d8e1;
   --color-border-ghost-disabled: rgb(255 255 255 / 40%);
   --color-border-focused: #9ab1ff;
   --color-border-action: #023dff;
@@ -144,29 +144,29 @@
   --color-accent-tertiary-hover: #393c4d;
   --color-accent-tertiary-pressed: #43475b;
   --color-accent-disabled: #2f3240;
-  --color-accent-main-inverse: #d9dade;
-  --color-additional-a1: #0b6abe;
-  --color-additional-a2: #1899e9;
-  --color-additional-a3: #b3f1ff;
-  --color-additional-b1: #b5215f;
-  --color-additional-b2: #e62d73;
-  --color-additional-b3: #ffb5cd;
-  --color-additional-c1: #e64920;
-  --color-additional-c2: #f46c1b;
-  --color-additional-c3: #ffe2a8;
-  --color-additional-d1: #ff8e00;
-  --color-additional-d2: #ffc100;
-  --color-additional-d3: #fff9a2;
-  --color-additional-e1: #771db4;
-  --color-additional-e2: #a02be5;
-  --color-additional-e3: #e9b7fe;
-  --color-additional-f1: #107c60;
-  --color-additional-f2: #17ae87;
-  --color-additional-f3: #abeada;
-  --color-additional-g1: #b88f27;
-  --color-additional-g2: #e0b548;
-  --color-additional-g3: #f4d37d;
-  --color-additional-h1: #747e89;
-  --color-additional-h2: #bdc4cb;
-  --color-additional-h3: #e1e4e7;
+  --color-accent-main-inverse: #c7c8ce;
+  --color-additional-a1: #866c47;
+  --color-additional-a2: #d4aa6b;
+  --color-additional-a3: #eeddc4;
+  --color-additional-b1: #763986;
+  --color-additional-b2: #ba55d3;
+  --color-additional-b3: #e3bbed;
+  --color-additional-c1: #638125;
+  --color-additional-c2: #9acd32;
+  --color-additional-c3: #d7ebad;
+  --color-additional-d1: #23867f;
+  --color-additional-d2: #30d5c8;
+  --color-additional-d3: #aceee9;
+  --color-additional-e1: #9f5237;
+  --color-additional-e2: #ff7f50;
+  --color-additional-e3: #ffccb9;
+  --color-additional-f1: #1966a0;
+  --color-additional-f2: #1fa1ff;
+  --color-additional-f3: #a5d9ff;
+  --color-additional-g1: #9a4270;
+  --color-additional-g2: #f664af;
+  --color-additional-g3: #fbc1df;
+  --color-additional-h1: #9f891a;
+  --color-additional-h2: #ffda1f;
+  --color-additional-h3: #fff0a5;
 }

package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDark.css

@@ -3,7 +3,7 @@
   --color-content-secondary: #aeb1c4;
   --color-content-primary: #fff;
   --color-content-tertiary: #7e8194;
-  --color-content-disabled: #7e8194;
+  --color-content-disabled: #636574;
   --color-content-ghost-disabled: rgb(255 255 255 / 40%);
   --color-content-action: #0b0;
   --color-content-action-hover: #039904;
@@ -145,28 +145,28 @@
   --color-accent-tertiary-pressed: #43475b;
   --color-accent-disabled: #2f3240;
   --color-accent-main-inverse: #c7c8ce;
-  --color-additional-a1: #0b6abe;
-  --color-additional-a2: #1899e9;
-  --color-additional-a3: #b3f1ff;
-  --color-additional-b1: #b5215f;
-  --color-additional-b2: #e62d73;
-  --color-additional-b3: #ffb5cd;
-  --color-additional-c1: #e64920;
-  --color-additional-c2: #f46c1b;
-  --color-additional-c3: #ffe2a8;
-  --color-additional-d1: #ff8e00;
-  --color-additional-d2: #ffc100;
-  --color-additional-d3: #fff9a2;
-  --color-additional-e1: #771db4;
-  --color-additional-e2: #a02be5;
-  --color-additional-e3: #e9b7fe;
-  --color-additional-f1: #107c60;
-  --color-additional-f2: #17ae87;
-  --color-additional-f3: #abeada;
-  --color-additional-g1: #b88f27;
-  --color-additional-g2: #e0b548;
-  --color-additional-g3: #f4d37d;
-  --color-additional-h1: #747e89;
-  --color-additional-h2: #bdc4cb;
-  --color-additional-h3: #e1e4e7;
+  --color-additional-a1: #866c47;
+  --color-additional-a2: #d4aa6b;
+  --color-additional-a3: #eeddc4;
+  --color-additional-b1: #763986;
+  --color-additional-b2: #ba55d3;
+  --color-additional-b3: #e3bbed;
+  --color-additional-c1: #638125;
+  --color-additional-c2: #9acd32;
+  --color-additional-c3: #d7ebad;
+  --color-additional-d1: #23867f;
+  --color-additional-d2: #30d5c8;
+  --color-additional-d3: #aceee9;
+  --color-additional-e1: #9f5237;
+  --color-additional-e2: #ff7f50;
+  --color-additional-e3: #ffccb9;
+  --color-additional-f1: #1966a0;
+  --color-additional-f2: #1fa1ff;
+  --color-additional-f3: #a5d9ff;
+  --color-additional-g1: #9a4270;
+  --color-additional-g2: #f664af;
+  --color-additional-g3: #fbc1df;
+  --color-additional-h1: #9f891a;
+  --color-additional-h2: #ffda1f;
+  --color-additional-h3: #fff0a5;
 }

package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDefault.css

@@ -116,7 +116,7 @@
   --color-border-secondary: #d7d8e1;
   --color-border-secondary-hover: #c2c5d3;
   --color-border-secondary-pressed: #aeb1c4;
-  --color-border-disabled: #d7d8e1;
+  --color-border-disabled: #c2c5d3;
   --color-border-ghost-disabled: rgb(255 255 255 / 40%);
   --color-border-focused: #99e499;
   --color-border-action: #0b0;
@@ -145,28 +145,28 @@
   --color-accent-tertiary-pressed: #43475b;
   --color-accent-disabled: #2f3240;
   --color-accent-main-inverse: #c7c8ce;
-  --color-additional-a1: #0b6abe;
-  --color-additional-a2: #1899e9;
-  --color-additional-a3: #b3f1ff;
-  --color-additional-b1: #b5215f;
-  --color-additional-b2: #e62d73;
-  --color-additional-b3: #ffb5cd;
-  --color-additional-c1: #e64920;
-  --color-additional-c2: #f46c1b;
-  --color-additional-c3: #ffe2a8;
-  --color-additional-d1: #ff8e00;
-  --color-additional-d2: #ffc100;
-  --color-additional-d3: #fff9a2;
-  --color-additional-e1: #771db4;
-  --color-additional-e2: #a02be5;
-  --color-additional-e3: #e9b7fe;
-  --color-additional-f1: #107c60;
-  --color-additional-f2: #17ae87;
-  --color-additional-f3: #abeada;
-  --color-additional-g1: #b88f27;
-  --color-additional-g2: #e0b548;
-  --color-additional-g3: #f4d37d;
-  --color-additional-h1: #747e89;
-  --color-additional-h2: #bdc4cb;
-  --color-additional-h3: #e1e4e7;
+  --color-additional-a1: #866c47;
+  --color-additional-a2: #d4aa6b;
+  --color-additional-a3: #eeddc4;
+  --color-additional-b1: #763986;
+  --color-additional-b2: #ba55d3;
+  --color-additional-b3: #e3bbed;
+  --color-additional-c1: #638125;
+  --color-additional-c2: #9acd32;
+  --color-additional-c3: #d7ebad;
+  --color-additional-d1: #23867f;
+  --color-additional-d2: #30d5c8;
+  --color-additional-d3: #aceee9;
+  --color-additional-e1: #9f5237;
+  --color-additional-e2: #ff7f50;
+  --color-additional-e3: #ffccb9;
+  --color-additional-f1: #1966a0;
+  --color-additional-f2: #1fa1ff;
+  --color-additional-f3: #a5d9ff;
+  --color-additional-g1: #9a4270;
+  --color-additional-g2: #f664af;
+  --color-additional-g3: #fbc1df;
+  --color-additional-h1: #9f891a;
+  --color-additional-h2: #ffda1f;
+  --color-additional-h3: #fff0a5;
 }

package/__inner__/esm/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);