@salutejs/sdds-bizcom 0.359.0-next-sbcom.0 → 0.360.0-dev.0

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

@@ -1,4 +1,5 @@
 import { css, chipTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, bodyXXS, inverseTextPrimary, inverseTextSecondary, inverseTextSecondaryHover, onDarkTextPrimary, onDarkTextSecondary, onDarkTextSecondaryHover, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceNegative, surfaceNegativeActive, surfaceNegativeHover, surfacePositive, surfacePositiveActive, surfacePositiveHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, surfaceWarning, surfaceWarningActive, surfaceWarningHover, textAccent, textPrimary, textSecondary, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_bizcom';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,94 +9,94 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${chipTokens.color}: var(--inverse-text-primary);
-                ${chipTokens.background}: var(--surface-solid-default);
-                ${chipTokens.colorHover}: var(--inverse-text-primary);
-                ${chipTokens.backgroundHover}: var(--surface-solid-default-hover);
-                ${chipTokens.colorActive}: var(--inverse-text-primary);
-                ${chipTokens.backgroundActive}: var(--surface-solid-default-active);
-                ${chipTokens.backgroundReadOnly}: var(--surface-solid-default);
-                ${chipTokens.colorReadOnly}: var(--inverse-text-primary);
-                ${chipTokens.backgroundReadOnlyHover}: var(--surface-solid-default);
-                ${chipTokens.colorReadOnlyHover}: var(--inverse-text-primary);
-                ${chipTokens.closeIconColor}: var(--inverse-text-secondary);
-                ${chipTokens.closeIconColorHover}: var(--inverse-text-secondary-hover);
-                ${chipTokens.leftContentColor}: var(--inverse-text-primary);
+                ${chipTokens.color}: ${inverseTextPrimary};
+                ${chipTokens.background}: ${surfaceSolidDefault};
+                ${chipTokens.colorHover}: ${inverseTextPrimary};
+                ${chipTokens.backgroundHover}: ${surfaceSolidDefaultHover};
+                ${chipTokens.colorActive}: ${inverseTextPrimary};
+                ${chipTokens.backgroundActive}: ${surfaceSolidDefaultActive};
+                ${chipTokens.backgroundReadOnly}: ${surfaceSolidDefault};
+                ${chipTokens.colorReadOnly}: ${inverseTextPrimary};
+                ${chipTokens.backgroundReadOnlyHover}: ${surfaceSolidDefault};
+                ${chipTokens.colorReadOnlyHover}: ${inverseTextPrimary};
+                ${chipTokens.closeIconColor}: ${inverseTextSecondary};
+                ${chipTokens.closeIconColorHover}: ${inverseTextSecondaryHover};
+                ${chipTokens.leftContentColor}: ${inverseTextPrimary};
             `,
             secondary: css`
-                ${chipTokens.color}: var(--text-primary);
-                ${chipTokens.background}: var(--surface-transparent-secondary);
-                ${chipTokens.colorHover}: var(--text-primary);
-                ${chipTokens.backgroundHover}: var(--surface-transparent-secondary-hover);
-                ${chipTokens.colorActive}: var(--text-primary);
-                ${chipTokens.backgroundActive}: var(--surface-transparent-secondary-active);
-                ${chipTokens.backgroundReadOnly}: var(--surface-transparent-secondary);
-                ${chipTokens.colorReadOnly}: var(--text-primary);
-                ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-secondary);
-                ${chipTokens.colorReadOnlyHover}: var(--text-primary);
-                ${chipTokens.closeIconColor}: var(--text-secondary);
-                ${chipTokens.closeIconColorHover}: var(--text-secondary-hover);
-                ${chipTokens.leftContentColor}: var(--text-primary);
+                ${chipTokens.color}: ${textPrimary};
+                ${chipTokens.background}: ${surfaceTransparentSecondary};
+                ${chipTokens.colorHover}: ${textPrimary};
+                ${chipTokens.backgroundHover}: ${surfaceTransparentSecondaryHover};
+                ${chipTokens.colorActive}: ${textPrimary};
+                ${chipTokens.backgroundActive}: ${surfaceTransparentSecondaryActive};
+                ${chipTokens.backgroundReadOnly}: ${surfaceTransparentSecondary};
+                ${chipTokens.colorReadOnly}: ${textPrimary};
+                ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentSecondary};
+                ${chipTokens.colorReadOnlyHover}: ${textPrimary};
+                ${chipTokens.closeIconColor}: ${textSecondary};
+                ${chipTokens.closeIconColorHover}: ${textSecondaryHover};
+                ${chipTokens.leftContentColor}: ${textPrimary};
             `,
             accent: css`
-                ${chipTokens.color}: var(--on-dark-text-primary);
-                ${chipTokens.background}: var(--surface-accent);
-                ${chipTokens.colorHover}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundHover}: var(--surface-accent-hover);
-                ${chipTokens.colorActive}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundActive}: var(--surface-accent-active);
-                ${chipTokens.backgroundReadOnly}: var(--surface-accent);
-                ${chipTokens.colorReadOnly}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundReadOnlyHover}: var(--surface-accent);
-                ${chipTokens.colorReadOnlyHover}: var(--on-dark-text-primary);
-                ${chipTokens.closeIconColor}: var(--on-dark-text-secondary);
-                ${chipTokens.closeIconColorHover}: var(--on-dark-text-secondary-hover);
-                ${chipTokens.leftContentColor}: var(--on-dark-text-primary);
+                ${chipTokens.color}: ${onDarkTextPrimary};
+                ${chipTokens.background}: ${surfaceAccent};
+                ${chipTokens.colorHover}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundHover}: ${surfaceAccentHover};
+                ${chipTokens.colorActive}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundActive}: ${surfaceAccentActive};
+                ${chipTokens.backgroundReadOnly}: ${surfaceAccent};
+                ${chipTokens.colorReadOnly}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundReadOnlyHover}: ${surfaceAccent};
+                ${chipTokens.colorReadOnlyHover}: ${onDarkTextPrimary};
+                ${chipTokens.closeIconColor}: ${onDarkTextSecondary};
+                ${chipTokens.closeIconColorHover}: ${onDarkTextSecondaryHover};
+                ${chipTokens.leftContentColor}: ${onDarkTextPrimary};
             `,
             positive: css`
-                ${chipTokens.color}: var(--on-dark-text-primary);
-                ${chipTokens.background}: var(--surface-positive);
-                ${chipTokens.colorHover}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundHover}: var(--surface-positive-hover);
-                ${chipTokens.colorActive}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundActive}: var(--surface-positive-active);
-                ${chipTokens.backgroundReadOnly}: var(--surface-positive);
-                ${chipTokens.colorReadOnly}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundReadOnlyHover}: var(--surface-positive);
-                ${chipTokens.colorReadOnlyHover}: var(--on-dark-text-primary);
-                ${chipTokens.closeIconColor}: var(--on-dark-text-secondary);
-                ${chipTokens.closeIconColorHover}: var(--on-dark-text-secondary-hover);
-                ${chipTokens.leftContentColor}: var(--on-dark-text-primary);
+                ${chipTokens.color}: ${onDarkTextPrimary};
+                ${chipTokens.background}: ${surfacePositive};
+                ${chipTokens.colorHover}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundHover}: ${surfacePositiveHover};
+                ${chipTokens.colorActive}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundActive}: ${surfacePositiveActive};
+                ${chipTokens.backgroundReadOnly}: ${surfacePositive};
+                ${chipTokens.colorReadOnly}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundReadOnlyHover}: ${surfacePositive};
+                ${chipTokens.colorReadOnlyHover}: ${onDarkTextPrimary};
+                ${chipTokens.closeIconColor}: ${onDarkTextSecondary};
+                ${chipTokens.closeIconColorHover}: ${onDarkTextSecondaryHover};
+                ${chipTokens.leftContentColor}: ${onDarkTextPrimary};
             `,
             warning: css`
-                ${chipTokens.color}: var(--on-dark-text-primary);
-                ${chipTokens.background}: var(--surface-warning);
-                ${chipTokens.colorHover}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundHover}: var(--surface-warning-hover);
-                ${chipTokens.colorActive}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundActive}: var(--surface-warning-active);
-                ${chipTokens.backgroundReadOnly}: var(--surface-warning);
-                ${chipTokens.colorReadOnly}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundReadOnlyHover}: var(--surface-warning);
-                ${chipTokens.colorReadOnlyHover}: var(--on-dark-text-primary);
-                ${chipTokens.closeIconColor}: var(--on-dark-text-secondary);
-                ${chipTokens.closeIconColorHover}: var(--on-dark-text-secondary-hover);
-                ${chipTokens.leftContentColor}: var(--on-dark-text-primary);
+                ${chipTokens.color}: ${onDarkTextPrimary};
+                ${chipTokens.background}: ${surfaceWarning};
+                ${chipTokens.colorHover}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundHover}: ${surfaceWarningHover};
+                ${chipTokens.colorActive}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundActive}: ${surfaceWarningActive};
+                ${chipTokens.backgroundReadOnly}: ${surfaceWarning};
+                ${chipTokens.colorReadOnly}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundReadOnlyHover}: ${surfaceWarning};
+                ${chipTokens.colorReadOnlyHover}: ${onDarkTextPrimary};
+                ${chipTokens.closeIconColor}: ${onDarkTextSecondary};
+                ${chipTokens.closeIconColorHover}: ${onDarkTextSecondaryHover};
+                ${chipTokens.leftContentColor}: ${onDarkTextPrimary};
             `,
             negative: css`
-                ${chipTokens.color}: var(--on-dark-text-primary);
-                ${chipTokens.background}: var(--surface-negative);
-                ${chipTokens.colorHover}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundHover}: var(--surface-negative-hover);
-                ${chipTokens.colorActive}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundActive}: var(--surface-negative-active);
-                ${chipTokens.backgroundReadOnly}: var(--surface-negative);
-                ${chipTokens.colorReadOnly}: var(--on-dark-text-primary);
-                ${chipTokens.backgroundReadOnlyHover}: var(--surface-negative);
-                ${chipTokens.colorReadOnlyHover}: var(--on-dark-text-primary);
-                ${chipTokens.closeIconColor}: var(--on-dark-text-secondary);
-                ${chipTokens.closeIconColorHover}: var(--on-dark-text-secondary-hover);
-                ${chipTokens.leftContentColor}: var(--on-dark-text-primary);
+                ${chipTokens.color}: ${onDarkTextPrimary};
+                ${chipTokens.background}: ${surfaceNegative};
+                ${chipTokens.colorHover}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundHover}: ${surfaceNegativeHover};
+                ${chipTokens.colorActive}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundActive}: ${surfaceNegativeActive};
+                ${chipTokens.backgroundReadOnly}: ${surfaceNegative};
+                ${chipTokens.colorReadOnly}: ${onDarkTextPrimary};
+                ${chipTokens.backgroundReadOnlyHover}: ${surfaceNegative};
+                ${chipTokens.colorReadOnlyHover}: ${onDarkTextPrimary};
+                ${chipTokens.closeIconColor}: ${onDarkTextSecondary};
+                ${chipTokens.closeIconColorHover}: ${onDarkTextSecondaryHover};
+                ${chipTokens.leftContentColor}: ${onDarkTextPrimary};
             `
         },
         size: {
@@ -106,12 +107,12 @@ export const config = {
                 ${chipTokens.height}: 3rem;
                 ${chipTokens.padding}: 0 1rem;
 
-                ${chipTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${chipTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${chipTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${chipTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${chipTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${chipTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${chipTokens.fontFamily}: ${bodyL.fontFamily};
+                ${chipTokens.fontSize}: ${bodyL.fontSize};
+                ${chipTokens.fontStyle}: ${bodyL.fontStyle};
+                ${chipTokens.fontWeight}: ${bodyL.fontWeight};
+                ${chipTokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${chipTokens.lineHeight}: ${bodyL.lineHeight};
 
                 ${chipTokens.leftContentMarginLeft}: -0.125rem;
                 ${chipTokens.leftContentMarginRight}: 0.5rem;
@@ -128,12 +129,12 @@ export const config = {
                 ${chipTokens.height}: 2.5rem;
                 ${chipTokens.padding}: 0 0.875rem;
 
-                ${chipTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${chipTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${chipTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${chipTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${chipTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${chipTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${chipTokens.fontFamily}: ${bodyM.fontFamily};
+                ${chipTokens.fontSize}: ${bodyM.fontSize};
+                ${chipTokens.fontStyle}: ${bodyM.fontStyle};
+                ${chipTokens.fontWeight}: ${bodyM.fontWeight};
+                ${chipTokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${chipTokens.lineHeight}: ${bodyM.lineHeight};
 
                 ${chipTokens.leftContentMarginLeft}: -0.125rem;
                 ${chipTokens.leftContentMarginRight}: 0.375rem;
@@ -150,12 +151,12 @@ export const config = {
                 ${chipTokens.height}: 2rem;
                 ${chipTokens.padding}: 0 0.875rem;
 
-                ${chipTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${chipTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${chipTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${chipTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${chipTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${chipTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${chipTokens.fontFamily}: ${bodyS.fontFamily};
+                ${chipTokens.fontSize}: ${bodyS.fontSize};
+                ${chipTokens.fontStyle}: ${bodyS.fontStyle};
+                ${chipTokens.fontWeight}: ${bodyS.fontWeight};
+                ${chipTokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${chipTokens.lineHeight}: ${bodyS.lineHeight};
 
                 ${chipTokens.leftContentMarginLeft}: -0.125rem;
                 ${chipTokens.leftContentMarginRight}: 0.25rem;
@@ -172,12 +173,12 @@ export const config = {
                 ${chipTokens.height}: 1.5rem;
                 ${chipTokens.padding}: 0 0.625rem;
 
-                ${chipTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${chipTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${chipTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${chipTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${chipTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${chipTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${chipTokens.fontFamily}: ${bodyXS.fontFamily};
+                ${chipTokens.fontSize}: ${bodyXS.fontSize};
+                ${chipTokens.fontStyle}: ${bodyXS.fontStyle};
+                ${chipTokens.fontWeight}: ${bodyXS.fontWeight};
+                ${chipTokens.letterSpacing}: ${bodyXS.letterSpacing};
+                ${chipTokens.lineHeight}: ${bodyXS.lineHeight};
 
                 ${chipTokens.leftContentMarginLeft}: -0.125rem;
                 ${chipTokens.leftContentMarginRight}: 0.25rem;
@@ -194,12 +195,12 @@ export const config = {
                 ${chipTokens.height}: 1.25rem;
                 ${chipTokens.padding}: 0 0.5rem;
 
-                ${chipTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${chipTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${chipTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${chipTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${chipTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${chipTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${chipTokens.fontFamily}: ${bodyXXS.fontFamily};
+                ${chipTokens.fontSize}: ${bodyXXS.fontSize};
+                ${chipTokens.fontStyle}: ${bodyXXS.fontStyle};
+                ${chipTokens.fontWeight}: ${bodyXXS.fontWeight};
+                ${chipTokens.letterSpacing}: ${bodyXXS.letterSpacing};
+                ${chipTokens.lineHeight}: ${bodyXXS.lineHeight};
 
                 ${chipTokens.leftContentMarginLeft}: -0.125rem;
                 ${chipTokens.leftContentMarginRight}: 0.125rem;
@@ -217,7 +218,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${chipTokens.focusColor}: var(--text-accent);
+                ${chipTokens.focusColor}: ${textAccent};
             `
         },
         pilled: {

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

@@ -1,4 +1,5 @@
 import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, inverseTextPrimary, onDarkTextPrimary, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_bizcom';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,46 +8,49 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.chipFocusColor}: var(--surface-accent);
-                ${tokens.chipColor}: var(--inverse-text-primary);
-                ${tokens.chipBackground}: var(--surface-solid-default);
-                ${tokens.chipColorHover}: var(--inverse-text-primary);
-                ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover);
-                ${tokens.chipColorActive}: var(--inverse-text-primary);
-                ${tokens.chipBackgroundActive}: var(--surface-solid-default-active);
+                ${tokens.chipFocusColor}: ${surfaceAccent};
+                ${tokens.chipColor}: ${inverseTextPrimary};
+                ${tokens.chipBackground}: ${surfaceSolidDefault};
+                ${tokens.chipColorHover}: ${inverseTextPrimary};
+                ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover};
+                ${tokens.chipColorActive}: ${inverseTextPrimary};
+                ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive};
             `,
             secondary: css`
-                ${tokens.chipFocusColor}: var(--surface-accent);
-                ${tokens.chipColor}: var(--text-primary);
-                ${tokens.chipBackground}: var(--surface-transparent-secondary);
-                ${tokens.chipColorHover}: var(--text-primary);
-                ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover);
-                ${tokens.chipColorActive}: var(--text-primary);
-                ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active);
+                ${tokens.chipFocusColor}: ${surfaceAccent};
+                ${tokens.chipColor}: ${textPrimary};
+                ${tokens.chipBackground}: ${surfaceTransparentSecondary};
+                ${tokens.chipColorHover}: ${textPrimary};
+                ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover};
+                ${tokens.chipColorActive}: ${textPrimary};
+                ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive};
             `,
             accent: css`
-                ${tokens.chipFocusColor}: var(--surface-accent);
-                ${tokens.chipColor}: var(--on-dark-text-primary);
-                ${tokens.chipBackground}: var(--surface-accent);
-                ${tokens.chipColorHover}: var(--on-dark-text-primary);
-                ${tokens.chipBackgroundHover}: var(--surface-accent-hover);
-                ${tokens.chipColorActive}: var(--on-dark-text-primary);
-                ${tokens.chipBackgroundActive}: var(--surface-accent-active);
+                ${tokens.chipFocusColor}: ${surfaceAccent};
+                ${tokens.chipColor}: ${onDarkTextPrimary};
+                ${tokens.chipBackground}: ${surfaceAccent};
+                ${tokens.chipColorHover}: ${onDarkTextPrimary};
+                ${tokens.chipBackgroundHover}: ${surfaceAccentHover};
+                ${tokens.chipColorActive}: ${onDarkTextPrimary};
+                ${tokens.chipBackgroundActive}: ${surfaceAccentActive};
             `
         },
         size: {
             l: css`
                 ${tokens.chipBorderRadius}: 0.75rem;
+                ${tokens.chipDefaultRadius}: 0.75rem;
+                ${tokens.chipSegmentedRadius}: 0.375rem;
+                ${tokens.chipSideRadius}: 0.75rem;
                 ${tokens.chipWidth}: auto;
                 ${tokens.chipHeight}: 3rem;
                 ${tokens.chipPadding}: 0 1rem;
 
-                ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size);
-                ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.chipFontFamily}: ${bodyL.fontFamily};
+                ${tokens.chipFontSize}: ${bodyL.fontSize};
+                ${tokens.chipFontStyle}: ${bodyL.fontStyle};
+                ${tokens.chipFontWeight}: ${bodyL.fontWeight};
+                ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.chipLineHeight}: ${bodyL.lineHeight};
 
                 ${tokens.chipLeftContentMarginLeft}: -0.125rem;
                 ${tokens.chipLeftContentMarginRight}: 0.5rem;
@@ -58,16 +62,19 @@ export const config = {
             `,
             m: css`
                 ${tokens.chipBorderRadius}: 0.625rem;
+                ${tokens.chipDefaultRadius}: 0.625rem;
+                ${tokens.chipSegmentedRadius}: 0.25rem;
+                ${tokens.chipSideRadius}: 0.625rem;
                 ${tokens.chipWidth}: auto;
                 ${tokens.chipHeight}: 2.5rem;
                 ${tokens.chipPadding}: 0 0.875rem;
 
-                ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.chipFontFamily}: ${bodyM.fontFamily};
+                ${tokens.chipFontSize}: ${bodyM.fontSize};
+                ${tokens.chipFontStyle}: ${bodyM.fontStyle};
+                ${tokens.chipFontWeight}: ${bodyM.fontWeight};
+                ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.chipLineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.chipLeftContentMarginLeft}: -0.125rem;
                 ${tokens.chipLeftContentMarginRight}: 0.375rem;
@@ -79,16 +86,19 @@ export const config = {
             `,
             s: css`
                 ${tokens.chipBorderRadius}: 0.5rem;
+                ${tokens.chipDefaultRadius}: 0.5rem;
+                ${tokens.chipSegmentedRadius}: 0.25rem;
+                ${tokens.chipSideRadius}: 0.5rem;
                 ${tokens.chipWidth}: auto;
                 ${tokens.chipHeight}: 2rem;
                 ${tokens.chipPadding}: 0 0.875rem;
 
-                ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.chipFontFamily}: ${bodyS.fontFamily};
+                ${tokens.chipFontSize}: ${bodyS.fontSize};
+                ${tokens.chipFontStyle}: ${bodyS.fontStyle};
+                ${tokens.chipFontWeight}: ${bodyS.fontWeight};
+                ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.chipLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.chipLeftContentMarginLeft}: -0.125rem;
                 ${tokens.chipLeftContentMarginRight}: 0.25rem;
@@ -100,16 +110,19 @@ export const config = {
             `,
             xs: css`
                 ${tokens.chipBorderRadius}: 0.375rem;
+                ${tokens.chipDefaultRadius}: 0.375rem;
+                ${tokens.chipSegmentedRadius}: 0.125rem;
+                ${tokens.chipSideRadius}: 0.375rem;
                 ${tokens.chipWidth}: auto;
                 ${tokens.chipHeight}: 1.5rem;
                 ${tokens.chipPadding}: 0 0.625rem;
 
-                ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.chipFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.chipFontSize}: ${bodyXS.fontSize};
+                ${tokens.chipFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.chipFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.chipLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.chipLeftContentMarginLeft}: -0.125rem;
                 ${tokens.chipLeftContentMarginRight}: 0.25rem;
@@ -127,6 +140,10 @@ export const config = {
             wide: css`
                 ${tokens.chipGroupItemsGap}: 0.5rem;
             `
+        },
+        shape: {
+            segmented: css``,
+            default: css``
         }
     }
 };

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

@@ -1,4 +1,5 @@
 import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodyXS, surfaceAccent, surfaceTransparentNegative, surfaceTransparentPrimary, surfaceTransparentPrimaryHover, surfaceTransparentSecondary, textNegative, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_bizcom';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,21 +9,48 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.caretColor}: var(--surface-accent);
+                ${tokens.caretColor}: ${surfaceAccent};
 
-                ${tokens.captionColor}: var(--text-secondary);
-                ${tokens.captionColorError}: var(--text-negative);
+                ${tokens.captionColor}: ${textSecondary};
+                ${tokens.captionColorError}: ${textNegative};
 
-                ${tokens.codeColor}: var(--text-primary);
-                ${tokens.codeColorError}: var(--text-negative);
+                ${tokens.codeColor}: ${textPrimary};
+                ${tokens.codeColorError}: ${textNegative};
 
-                ${tokens.backgroundColor}: var(--surface-transparent-primary);
-                ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover);
-                ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${tokens.backgroundErrorColor}: var(--surface-transparent-negative);
+                ${tokens.backgroundColor}: ${surfaceTransparentPrimary};
+                ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover};
+                ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary};
+                ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative};
             `
         },
         size: {
+            xl: css`
+                ${tokens.captionGap}: 0.875rem;
+                ${tokens.codeItemsGap}: 0.125rem;
+
+                ${tokens.separatorWidth}: 0.25rem;
+
+                ${tokens.codeItemWidth}: 3rem;
+                ${tokens.codeItemHeight}: 4rem;
+
+                ${tokens.fontFamily}: ${bodyL.fontFamily};
+                ${tokens.fontSize}: ${bodyL.fontSize};
+                ${tokens.fontStyle}: ${bodyL.fontStyle};
+                ${tokens.fontWeight}: ${bodyLBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.lineHeight}: ${bodyL.lineHeight};
+
+                ${tokens.captionFontFamily}: ${bodyS.fontFamily};
+                ${tokens.captionFontSize}: ${bodyS.fontSize};
+                ${tokens.captionFontStyle}: ${bodyS.fontStyle};
+                ${tokens.captionFontWeight}: ${bodyS.fontWeight};
+                ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.captionLineHeight}: ${bodyS.lineHeight};
+
+                ${tokens.borderRadius}: 1rem;
+                ${tokens.borderRadiusSegmented}: 0.5rem;
+                ${tokens.segmentedSideBorderRadius}: 1rem;
+            `,
             l: css`
                 ${tokens.captionGap}: 0.875rem;
                 ${tokens.codeItemsGap}: 0.125rem;
@@ -32,19 +60,19 @@ export const config = {
                 ${tokens.codeItemWidth}: 2.75rem;
                 ${tokens.codeItemHeight}: 3.5rem;
 
-                ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.fontFamily}: ${bodyL.fontFamily};
+                ${tokens.fontSize}: ${bodyL.fontSize};
+                ${tokens.fontStyle}: ${bodyL.fontStyle};
+                ${tokens.fontWeight}: ${bodyLBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.lineHeight}: ${bodyL.lineHeight};
 
-                ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.captionFontFamily}: ${bodyS.fontFamily};
+                ${tokens.captionFontSize}: ${bodyS.fontSize};
+                ${tokens.captionFontStyle}: ${bodyS.fontStyle};
+                ${tokens.captionFontWeight}: ${bodyS.fontWeight};
+                ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.captionLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.borderRadius}: 0.875rem;
                 ${tokens.borderRadiusSegmented}: 0.375rem;
@@ -59,19 +87,19 @@ export const config = {
                 ${tokens.codeItemWidth}: 2.375rem;
                 ${tokens.codeItemHeight}: 3rem;
 
-                ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height);
-
-                ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.fontFamily}: ${bodyM.fontFamily};
+                ${tokens.fontSize}: ${bodyM.fontSize};
+                ${tokens.fontStyle}: ${bodyM.fontStyle};
+                ${tokens.fontWeight}: ${bodyMBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.lineHeight}: ${bodyM.lineHeight};
+
+                ${tokens.captionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.captionFontSize}: ${bodyXS.fontSize};
+                ${tokens.captionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.captionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.captionLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.borderRadius}: 0.75rem;
                 ${tokens.borderRadiusSegmented}: 0.25rem;