@salutejs/plasma-b2c 1.623.0-next-sbcom.0 → 1.623.0

package/dist/styled-components/cjs/components/TextField/TextField.clear.config.js

@@ -191,7 +191,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -283,7 +283,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -367,7 +367,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -451,7 +451,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -535,7 +535,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/TextField/TextField.config.js

@@ -177,7 +177,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -270,7 +270,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -356,7 +356,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -442,7 +442,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -528,7 +528,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/TextFieldGroup/TextFieldGroup.config.js

@@ -45,7 +45,7 @@ const config = {
                 ${_styledcomponents.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
                 ${_styledcomponents.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
 
-                ${_styledcomponents.textFieldGroupTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldGroupTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -101,7 +101,7 @@ const config = {
                 ${_styledcomponents.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_styledcomponents.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
 
-                ${_styledcomponents.textFieldGroupTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldGroupTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -157,7 +157,7 @@ const config = {
                 ${_styledcomponents.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${_styledcomponents.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
 
-                ${_styledcomponents.textFieldGroupTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldGroupTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -213,7 +213,7 @@ const config = {
                 ${_styledcomponents.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldGroupTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldGroupTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/es/components/Accordion/Accordion.config.js

@@ -57,7 +57,7 @@ export const config = {
                 ${accordionTokens.accordionItemTextColor}: var(--text-primary);
                 ${accordionTokens.accordionItemIconColor}: var(--text-primary);
                 ${accordionTokens.accordionItemFocus}: var(--surface-accent);
-                ${accordionTokens.accordionItemBorderRadius}: 0rem !important;
+                ${accordionTokens.accordionItemViewBorderRadius}: 0rem;
                 ${accordionTokens.accordionBackground}: var(--surface-clear);
                 ${accordionTokens.accordionItemBorder}: none;
                 ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary);

package/dist/styled-components/es/components/Autocomplete/Autocomplete.config.js

@@ -213,7 +213,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -288,7 +288,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -363,7 +363,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -438,7 +438,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/es/components/Badge/Badge.clear.config.js

@@ -0,0 +1,55 @@
+import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { pilled, sizeL, sizeM, sizeS, sizeXS } from './Badge.config.common';
+export const config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: css`
+                ${badgeTokens.color}: var(--text-primary);
+            `,
+            accent: css`
+                ${badgeTokens.color}: var(--text-accent);
+            `,
+            positive: css`
+                ${badgeTokens.color}: var(--text-positive);
+            `,
+            warning: css`
+                ${badgeTokens.color}: var(--text-warning);
+            `,
+            negative: css`
+                ${badgeTokens.color}: var(--text-negative);
+            `,
+            dark: css`
+                ${badgeTokens.color}: var(--on-light-text-primary);
+            `,
+            light: css`
+                ${badgeTokens.color}: var(--on-dark-text-primary);
+            `
+        },
+        size: {
+            l: css`
+                ${sizeL}
+            `,
+            m: css`
+                ${sizeM}
+            `,
+            s: css`
+                ${sizeS}
+            `,
+            xs: css`
+                ${sizeXS}
+            `
+        },
+        pilled: {
+            true: css`
+                ${pilled}
+            `
+        },
+        truncate: {
+            true: css``
+        }
+    }
+};

package/dist/styled-components/es/components/Badge/Badge.config.common.js

@@ -0,0 +1,80 @@
+import { badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
+export const sizeL = `
+    ${badgeTokens.borderRadius}: 0.5rem;
+    ${badgeTokens.height}: 1.75rem;
+    ${badgeTokens.padding}: 0 0.6875rem;
+    ${badgeTokens.paddingIconOnly}: 0 0.375rem;
+
+    ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
+    ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
+    ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
+    ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
+    ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+    ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+
+    ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
+    ${badgeTokens.leftContentMarginRight}: 0.25rem;
+
+    ${badgeTokens.rightContentMarginLeft}: 0.25rem;
+    ${badgeTokens.rightContentMarginRight}: -0.0625rem;
+`;
+export const sizeM = `
+    ${badgeTokens.borderRadius}: 0.375rem;
+    ${badgeTokens.height}: 1.5rem;
+    ${badgeTokens.padding}: 0 0.5625rem;
+    ${badgeTokens.paddingIconOnly}: 0 0.375rem;
+
+    ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
+    ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
+    ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
+    ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
+    ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+    ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+
+    ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
+    ${badgeTokens.leftContentMarginRight}: 0.1875rem;
+
+    ${badgeTokens.rightContentMarginLeft}: 0.1875rem;
+    ${badgeTokens.rightContentMarginRight}: -0.0625rem;
+`;
+export const sizeS = `
+    ${badgeTokens.borderRadius}: 0.375rem;
+    ${badgeTokens.height}: 1.25rem;
+    ${badgeTokens.padding}: 0 0.4375rem;
+    ${badgeTokens.paddingIconOnly}: 0 0.25rem;
+
+    ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
+    ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
+    ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
+    ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
+    ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
+    ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
+
+    ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
+    ${badgeTokens.leftContentMarginRight}: 0.125rem;
+
+    ${badgeTokens.rightContentMarginLeft}: 0.125rem;
+    ${badgeTokens.rightContentMarginRight}: -0.0625rem;
+`;
+export const sizeXS = `
+    ${badgeTokens.borderRadius}: 0.25rem;
+    ${badgeTokens.height}: 1rem;
+    ${badgeTokens.padding}: 0 0.25rem;
+    ${badgeTokens.paddingIconOnly}: 0 0.188rem;
+
+    ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
+    ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
+    ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
+    ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
+    ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
+    ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
+
+    ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
+    ${badgeTokens.leftContentMarginRight}: 0.125rem;
+
+    ${badgeTokens.rightContentMarginLeft}: 0.125rem;
+    ${badgeTokens.rightContentMarginRight}: -0.0625rem;
+`;
+export const pilled = `
+    ${badgeTokens.pilledBorderRadius}: 1000px;
+`;

package/dist/styled-components/es/components/Badge/Badge.config.js

@@ -1,4 +1,5 @@
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { pilled, sizeL, sizeM, sizeS, sizeXS } from './Badge.config.common';
 export const config = {
     defaults: {
         view: 'default',
@@ -72,85 +73,21 @@ export const config = {
         },
         size: {
             l: css`
-                ${badgeTokens.borderRadius}: 0.5rem;
-                ${badgeTokens.height}: 1.75rem;
-                ${badgeTokens.padding}: 0 0.6875rem;
-                ${badgeTokens.paddingIconOnly}: 0 0.375rem;
-
-                ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
-                ${badgeTokens.leftContentMarginRight}: 0.25rem;
-
-                ${badgeTokens.rightContentMarginLeft}: 0.25rem;
-                ${badgeTokens.rightContentMarginRight}: -0.0625rem;
+                ${sizeL}
             `,
             m: css`
-                ${badgeTokens.borderRadius}: 0.375rem;
-                ${badgeTokens.height}: 1.5rem;
-                ${badgeTokens.padding}: 0 0.5625rem;
-                ${badgeTokens.paddingIconOnly}: 0 0.375rem;
-
-                ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
-
-                ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
-                ${badgeTokens.leftContentMarginRight}: 0.1875rem;
-
-                ${badgeTokens.rightContentMarginLeft}: 0.1875rem;
-                ${badgeTokens.rightContentMarginRight}: -0.0625rem;
+                ${sizeM}
             `,
             s: css`
-                ${badgeTokens.borderRadius}: 0.375rem;
-                ${badgeTokens.height}: 1.25rem;
-                ${badgeTokens.padding}: 0 0.4375rem;
-                ${badgeTokens.paddingIconOnly}: 0 0.25rem;
-
-                ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
-
-                ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
-                ${badgeTokens.leftContentMarginRight}: 0.125rem;
-
-                ${badgeTokens.rightContentMarginLeft}: 0.125rem;
-                ${badgeTokens.rightContentMarginRight}: -0.0625rem;
+                ${sizeS}
             `,
             xs: css`
-                ${badgeTokens.borderRadius}: 0.25rem;
-                ${badgeTokens.height}: 1rem;
-                ${badgeTokens.padding}: 0 0.25rem;
-                ${badgeTokens.paddingIconOnly}: 0 0.188rem;
-
-                ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
-
-                ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
-                ${badgeTokens.leftContentMarginRight}: 0.125rem;
-
-                ${badgeTokens.rightContentMarginLeft}: 0.125rem;
-                ${badgeTokens.rightContentMarginRight}: -0.0625rem;
+                ${sizeXS}
             `
         },
         pilled: {
             true: css`
-                ${badgeTokens.pilledBorderRadius}: 1.25rem;
+                ${pilled}
             `
         },
         transparent: {

package/dist/styled-components/es/components/Badge/Badge.js

@@ -1,6 +1,17 @@
-import { badgeConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import { badgeConfig, component, mergeConfig, createConditionalComponent } from '@salutejs/plasma-new-hope/styled-components';
 import { config } from './Badge.config';
+import { config as clearConfig } from './Badge.clear.config';
+import { config as transparentConfig } from './Badge.transparent.config';
 const mergedConfig = mergeConfig(badgeConfig, config);
+export const BadgeDefault = component(mergedConfig);
+const mergedConfigClear = mergeConfig(badgeConfig, clearConfig);
+export const BadgeClear = component(mergedConfigClear);
+const mergedConfigTransparent = mergeConfig(badgeConfig, transparentConfig);
+export const BadgeTransparent = component(mergedConfigTransparent);
 /**
  * Компонент Badge.
- */ export const Badge = component(mergedConfig);
+ */ export const Badge = createConditionalComponent({
+    default: BadgeDefault,
+    clear: BadgeClear,
+    transparent: BadgeTransparent
+});

package/dist/styled-components/es/components/Badge/Badge.transparent.config.js

@@ -0,0 +1,65 @@
+import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { pilled, sizeL, sizeM, sizeS, sizeXS } from './Badge.config.common';
+export const config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: css`
+                ${badgeTokens.color}: var(--text-primary);
+                ${badgeTokens.background}: var(--surface-transparent-secondary);
+            `,
+            accent: css`
+                ${badgeTokens.color}: var(--text-accent);
+                ${badgeTokens.background}: var(--surface-transparent-accent);
+            `,
+            positive: css`
+                ${badgeTokens.color}: var(--text-positive);
+                ${badgeTokens.background}: var(--surface-transparent-positive);
+            `,
+            warning: css`
+                ${badgeTokens.color}: var(--text-warning);
+                ${badgeTokens.background}: var(--surface-transparent-warning);
+            `,
+            negative: css`
+                ${badgeTokens.color}: var(--text-negative);
+                ${badgeTokens.background}: var(--surface-transparent-negative);
+            `,
+            dark: css`
+                ${badgeTokens.color}: var(--on-dark-text-primary);
+                ${badgeTokens.background}: var(--on-light-surface-transparent-deep);
+            `,
+            light: css`
+                ${badgeTokens.color}: var(--on-dark-text-primary);
+                ${badgeTokens.background}: var(--on-dark-surface-transparent-card);
+            `
+        },
+        size: {
+            l: css`
+                ${sizeL}
+            `,
+            m: css`
+                ${sizeM}
+            `,
+            s: css`
+                ${sizeS}
+            `,
+            xs: css`
+                ${sizeXS}
+            `
+        },
+        pilled: {
+            true: css`
+                ${pilled}
+            `
+        },
+        transparent: {
+            true: css``
+        },
+        truncate: {
+            true: css``
+        }
+    }
+};

package/dist/styled-components/es/components/Combobox/Combobox.config.js

@@ -265,7 +265,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -386,7 +386,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -507,7 +507,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -628,7 +628,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/es/components/LinkButton/LinkButton.config.js

@@ -7,78 +7,71 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${linkButtonTokens.linkButtonColor}: var(--text-primary);
                 ${linkButtonTokens.linkButtonIconColor}: var(--text-primary);
                 ${linkButtonTokens.linkButtonTextColor}: var(--text-primary);
                 ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover);
-                ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active);
+                ${linkButtonTokens.linkButtonIconColorHover}: var(--text-primary-hover);
+                ${linkButtonTokens.linkButtonIconColorActive}: var(--text-primary-active);
                 ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover);
                 ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active);
             `,
             accent: css`
-                ${linkButtonTokens.linkButtonColor}: var(--text-accent);
                 ${linkButtonTokens.linkButtonIconColor}: var(--text-accent);
                 ${linkButtonTokens.linkButtonTextColor}: var(--text-accent);
                 ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear);
-                ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover);
-                ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active);
+                ${linkButtonTokens.linkButtonIconColorHover}: var(--text-accent-hover);
+                ${linkButtonTokens.linkButtonIconColorActive}: var(--text-accent-active);
                 ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover);
                 ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active);
             `,
             secondary: css`
-                ${linkButtonTokens.linkButtonColor}: var(--text-secondary);
                 ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary);
                 ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary);
                 ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover);
-                ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active);
+                ${linkButtonTokens.linkButtonIconColorHover}: var(--text-secondary-hover);
+                ${linkButtonTokens.linkButtonIconColorActive}: var(--text-secondary-active);
                 ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover);
                 ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active);
             `,
             positive: css`
-                ${linkButtonTokens.linkButtonColor}: var(--text-positive);
                 ${linkButtonTokens.linkButtonIconColor}: var(--text-positive);
                 ${linkButtonTokens.linkButtonTextColor}: var(--text-positive);
                 ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover);
-                ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active);
+                ${linkButtonTokens.linkButtonIconColorHover}: var(--text-positive-hover);
+                ${linkButtonTokens.linkButtonIconColorActive}: var(--text-positive-active);
                 ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover);
                 ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active);
             `,
             warning: css`
-                ${linkButtonTokens.linkButtonColor}: var(--text-warning);
                 ${linkButtonTokens.linkButtonIconColor}: var(--text-warning);
                 ${linkButtonTokens.linkButtonTextColor}: var(--text-warning);
                 ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover);
-                ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active);
+                ${linkButtonTokens.linkButtonIconColorHover}: var(--text-warning-hover);
+                ${linkButtonTokens.linkButtonIconColorActive}: var(--text-warning-active);
                 ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover);
                 ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active);
             `,
             negative: css`
-                ${linkButtonTokens.linkButtonColor}: var(--text-negative);
                 ${linkButtonTokens.linkButtonIconColor}: var(--text-negative);
                 ${linkButtonTokens.linkButtonTextColor}: var(--text-negative);
                 ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover);
-                ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active);
+                ${linkButtonTokens.linkButtonIconColorHover}: var(--text-negative-hover);
+                ${linkButtonTokens.linkButtonIconColorActive}: var(--text-negative-active);
                 ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover);
                 ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active);
             `,
             info: css`
-                ${linkButtonTokens.linkButtonColor}: var(--text-info);
                 ${linkButtonTokens.linkButtonIconColor}: var(--text-info);
                 ${linkButtonTokens.linkButtonTextColor}: var(--text-info);
                 ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear);
-                ${linkButtonTokens.linkButtonColorHover}: var(--text-info-hover);
-                ${linkButtonTokens.linkButtonColorActive}: var(--text-info-active);
+                ${linkButtonTokens.linkButtonIconColorHover}: var(--text-info-hover);
+                ${linkButtonTokens.linkButtonIconColorActive}: var(--text-info-active);
                 ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
                 ${linkButtonTokens.linkButtonTextColorHover}: var(--text-info-hover);
                 ${linkButtonTokens.linkButtonTextColorActive}: var(--text-info-active);

package/dist/styled-components/es/components/Scrollbar/Scrollbar.config.js

@@ -2,7 +2,9 @@ export const config = {
     view: {
         default: {
             trackColor: 'var(--surface-transparent-primary)',
-            thumbColor: 'var(--surface-transparent-tertiary)'
+            thumbColor: 'var(--surface-transparent-tertiary)',
+            thumbHoverColor: 'var(--surface-transparent-tertiary-hover)',
+            thumbActiveColor: 'var(--surface-transparent-tertiary-active)'
         }
     },
     size: {