@salutejs/sdds-scan 0.357.0-next-sbcom.0 → 0.358.0-dev.0

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

@@ -1,4 +1,5 @@
 import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyS, bodyXS, onDarkTextPrimary, textAccent, textNegative, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'accent',
@@ -16,18 +17,18 @@ export const config = {
                 ${checkboxTokens.contentTopOffset}: 0;
                 ${checkboxTokens.contentLeftOffset}: 0.5rem;
                 ${checkboxTokens.descriptionMarginTop}: 0.125rem;
-                ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily};
+                ${checkboxTokens.labelFontSize}: ${bodyS.fontSize};
+                ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle};
+                ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight};
+                ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing};
+                ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight};
+                ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily};
+                ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize};
+                ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle};
+                ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight};
+                ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight};
             `,
             m: css`
                 ${checkboxTokens.margin}: 0;
@@ -38,36 +39,36 @@ export const config = {
                 ${checkboxTokens.contentTopOffset}: 0.125rem;
                 ${checkboxTokens.contentLeftOffset}: 0.75rem;
                 ${checkboxTokens.descriptionMarginTop}: 0.125rem;
-                ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
-                ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
-                ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily};
+                ${checkboxTokens.labelFontSize}: ${bodyM.fontSize};
+                ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle};
+                ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight};
+                ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing};
+                ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight};
+                ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily};
+                ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize};
+                ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle};
+                ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight};
+                ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing};
+                ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight};
             `
         },
         view: {
             accent: css`
-                ${checkboxTokens.fillColor}: var(--text-accent);
-                ${checkboxTokens.iconColor}: var(--on-dark-text-primary);
-                ${checkboxTokens.labelColor}: var(--text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textAccent};
+                ${checkboxTokens.iconColor}: ${onDarkTextPrimary};
+                ${checkboxTokens.labelColor}: ${textPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-secondary);
+                ${checkboxTokens.triggerBorderColor}: ${textSecondary};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `,
             negative: css`
-                ${checkboxTokens.fillColor}: var(--text-negative);
-                ${checkboxTokens.iconColor}: var(--on-dark-text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textNegative};
+                ${checkboxTokens.iconColor}: ${onDarkTextPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-negative);
+                ${checkboxTokens.triggerBorderColor}: ${textNegative};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `
         },
@@ -78,7 +79,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${checkboxTokens.focusColor}: var(--text-accent);
+                ${checkboxTokens.focusColor}: ${textAccent};
             `
         }
     }

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, 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_scan';
 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;
@@ -195,7 +196,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, inverseTextPrimary, onDarkTextPrimary, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 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;
@@ -106,6 +116,10 @@ export const config = {
             wide: css`
                 ${tokens.chipGroupItemsGap}: 0.5rem;
             `
+        },
+        shape: {
+            segmented: css``,
+            default: css``
         }
     }
 };