@salutejs/sdds-cs 0.361.0-next-sbcom.0 → 0.362.0-dev.0

package/dist/emotion/es/components/Carousel/Carousel.config.js

@@ -1,3 +1,4 @@
+import { surfaceAccent, surfaceSolidPrimary, surfaceSolidPrimaryActive, surfaceSolidPrimaryHover, textAccent, textAccentActive, textAccentMinor, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,14 +8,14 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.paginationDotBackground}: var(--surface-accent);
-                ${tokens.paginationDotActiveBackground}: var(--text-primary);
-                ${tokens.controlIconButtonColor}: var(--text-accent);
-                ${tokens.controlIconButtonBackgroundColor}: var(--surface-solid-primary);
-                ${tokens.controlIconButtonColorHover}: var(--text-accent-minor);
-                ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-solid-primary-hover);
-                ${tokens.controlIconButtonColorActive}: var(--text-accent-active);
-                ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${tokens.paginationDotBackground}: ${surfaceAccent};
+                ${tokens.paginationDotActiveBackground}: ${textPrimary};
+                ${tokens.controlIconButtonColor}: ${textAccent};
+                ${tokens.controlIconButtonBackgroundColor}: ${surfaceSolidPrimary};
+                ${tokens.controlIconButtonColorHover}: ${textAccentMinor};
+                ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceSolidPrimaryHover};
+                ${tokens.controlIconButtonColorActive}: ${textAccentActive};
+                ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceSolidPrimaryActive};
             `
         },
         size: {

package/dist/emotion/es/components/Cell/Cell.config.js

@@ -1,12 +1,13 @@
+import { bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, cellTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     variations: {
         view: {
             default: css`
-                ${cellTokens.cellColor}: var(--text-primary);
-                ${cellTokens.cellLabelColor}: var(--text-secondary);
-                ${cellTokens.cellTitleColor}: var(--text-primary);
-                ${cellTokens.cellSubtitleColor}: var(--text-secondary);
+                ${cellTokens.cellColor}: ${textPrimary};
+                ${cellTokens.cellLabelColor}: ${textSecondary};
+                ${cellTokens.cellTitleColor}: ${textPrimary};
+                ${cellTokens.cellSubtitleColor}: ${textSecondary};
                 ${cellTokens.cellBackgroundColor}: transparent;
             `
         },
@@ -22,26 +23,26 @@ export const config = {
                 ${cellTokens.cellTextboxGap}: 0.125rem;
                 ${cellTokens.cellGap}: 0.375rem;
 
-                ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily};
+                ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize};
+                ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle};
+                ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight};
+                ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing};
+                ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight};
 
-                ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily};
+                ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize};
+                ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle};
+                ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight};
+                ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing};
+                ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight};
 
-                ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily};
+                ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize};
+                ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle};
+                ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight};
+                ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight};
             `,
             xs: css`
                 ${cellTokens.cellWidth}: 15rem;
@@ -54,26 +55,26 @@ export const config = {
                 ${cellTokens.cellTextboxGap}: 0.125rem;
                 ${cellTokens.cellGap}: 0.25rem;
 
-                ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily};
+                ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize};
+                ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle};
+                ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight};
+                ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing};
+                ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight};
 
-                ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily};
+                ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize};
+                ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle};
+                ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight};
+                ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight};
 
-                ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily};
+                ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize};
+                ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle};
+                ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight};
+                ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight};
             `
         }
     }

package/dist/emotion/es/components/Checkbox/Checkbox.config.js

@@ -1,3 +1,4 @@
+import { bodyM, bodyS, onDarkTextPrimary, outlineAccent, outlineSolidPrimary, surfaceSolidTertiary, textAccent, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, checkboxTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -16,41 +17,41 @@ export const config = {
                 ${checkboxTokens.contentTopOffset}: 0rem;
                 ${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.triggerBorderColor}: var(--outline-accent);
+                ${checkboxTokens.fillColor}: ${textAccent};
+                ${checkboxTokens.iconColor}: ${onDarkTextPrimary};
+                ${checkboxTokens.labelColor}: ${textPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
+                ${checkboxTokens.triggerBorderColor}: ${outlineAccent};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `
         },
         disabled: {
             true: css`
-                ${checkboxTokens.triggerBorderColor}: var(--outline-solid-primary);
-                ${checkboxTokens.fillColor}: var(--surface-solid-tertiary);
-                ${checkboxTokens.labelColor}: var(--text-secondary);
+                ${checkboxTokens.triggerBorderColor}: ${outlineSolidPrimary};
+                ${checkboxTokens.fillColor}: ${surfaceSolidTertiary};
+                ${checkboxTokens.labelColor}: ${textSecondary};
             `
         },
         focused: {
             true: css`
-                ${checkboxTokens.focusColor}: var(--text-accent);
+                ${checkboxTokens.focusColor}: ${textAccent};
             `
         }
     }

package/dist/emotion/es/components/Chip/Chip.config.js

@@ -1,3 +1,4 @@
+import { bodyM, bodyS, onDarkTextPrimary, onDarkTextPrimaryHover, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceSolidCard, surfaceSolidPrimary, surfaceSolidSecondary, textAccent, textAccentMinor, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, chipTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,50 +9,50 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${chipTokens.color}: var(--text-primary);
-                ${chipTokens.background}: var(--surface-solid-card);
-                ${chipTokens.colorHover}: var(--text-primary);
-                ${chipTokens.backgroundHover}: var(--surface-solid-card);
-                ${chipTokens.colorActive}: var(--text-primary);
-                ${chipTokens.backgroundActive}: var(--surface-solid-card);
-                ${chipTokens.backgroundReadOnly}: var(--surface-solid-card);
-                ${chipTokens.colorReadOnly}: var(--text-primary);
-                ${chipTokens.backgroundReadOnlyHover}: var(--surface-solid-card);
-                ${chipTokens.colorReadOnlyHover}: var(--text-primary);
-                ${chipTokens.closeIconColor}: var(--text-accent);
-                ${chipTokens.closeIconColorHover}: var(--text-accent-minor);
-                ${chipTokens.leftContentColor}: var(--text-accent);
+                ${chipTokens.color}: ${textPrimary};
+                ${chipTokens.background}: ${surfaceSolidCard};
+                ${chipTokens.colorHover}: ${textPrimary};
+                ${chipTokens.backgroundHover}: ${surfaceSolidCard};
+                ${chipTokens.colorActive}: ${textPrimary};
+                ${chipTokens.backgroundActive}: ${surfaceSolidCard};
+                ${chipTokens.backgroundReadOnly}: ${surfaceSolidCard};
+                ${chipTokens.colorReadOnly}: ${textPrimary};
+                ${chipTokens.backgroundReadOnlyHover}: ${surfaceSolidCard};
+                ${chipTokens.colorReadOnlyHover}: ${textPrimary};
+                ${chipTokens.closeIconColor}: ${textAccent};
+                ${chipTokens.closeIconColorHover}: ${textAccentMinor};
+                ${chipTokens.leftContentColor}: ${textAccent};
             `,
             secondary: css`
-                ${chipTokens.color}: var(--text-primary);
-                ${chipTokens.background}: var(--surface-solid-secondary);
-                ${chipTokens.colorHover}: var(--text-primary);
-                ${chipTokens.backgroundHover}: var(--surface-solid-secondary);
-                ${chipTokens.colorActive}: var(--text-primary);
-                ${chipTokens.backgroundActive}: var(--surface-solid-secondary);
-                ${chipTokens.backgroundReadOnly}: var(--surface-solid-primary);
-                ${chipTokens.colorReadOnly}: var(--text-primary);
-                ${chipTokens.backgroundReadOnlyHover}: var(--surface-solid-primary);
-                ${chipTokens.colorReadOnlyHover}: var(--text-primary);
-                ${chipTokens.closeIconColor}: var(--text-accent);
-                ${chipTokens.closeIconColorHover}: var(--text-accent-minor);
-                ${chipTokens.leftContentColor}: var(--text-accent);
+                ${chipTokens.color}: ${textPrimary};
+                ${chipTokens.background}: ${surfaceSolidSecondary};
+                ${chipTokens.colorHover}: ${textPrimary};
+                ${chipTokens.backgroundHover}: ${surfaceSolidSecondary};
+                ${chipTokens.colorActive}: ${textPrimary};
+                ${chipTokens.backgroundActive}: ${surfaceSolidSecondary};
+                ${chipTokens.backgroundReadOnly}: ${surfaceSolidPrimary};
+                ${chipTokens.colorReadOnly}: ${textPrimary};
+                ${chipTokens.backgroundReadOnlyHover}: ${surfaceSolidPrimary};
+                ${chipTokens.colorReadOnlyHover}: ${textPrimary};
+                ${chipTokens.closeIconColor}: ${textAccent};
+                ${chipTokens.closeIconColorHover}: ${textAccentMinor};
+                ${chipTokens.leftContentColor}: ${textAccent};
             `,
             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.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}: var(--on-dark-text-primary);
-                ${chipTokens.closeIconColorHover}: var(--on-dark-text-primary-hover);
-                ${chipTokens.leftContentColor}: var(--on-dark-text-primary);
+                ${chipTokens.closeIconColor}: ${onDarkTextPrimary};
+                ${chipTokens.closeIconColorHover}: ${onDarkTextPrimaryHover};
+                ${chipTokens.leftContentColor}: ${onDarkTextPrimary};
             `
         },
         size: {
@@ -62,12 +63,12 @@ export const config = {
                 ${chipTokens.height}: 2.5rem;
                 ${chipTokens.padding}: 0 1rem;
 
-                ${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.25rem;
                 ${chipTokens.leftContentMarginRight}: 0.25rem;
@@ -84,12 +85,12 @@ export const config = {
                 ${chipTokens.height}: 1.5rem;
                 ${chipTokens.padding}: 0.125rem 0.5rem;
 
-                ${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;
                 ${chipTokens.leftContentMarginRight}: 0.25rem;
@@ -102,7 +103,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${chipTokens.focusColor}: var(--text-accent);
+                ${chipTokens.focusColor}: ${textAccent};
             `
         }
     }

package/dist/emotion/es/components/ChipGroup/ChipGroup.config.js

@@ -1,3 +1,4 @@
+import { bodyM, inverseTextPrimary, onDarkTextPrimary, surfaceAccent, surfaceSolidDefault, surfaceSolidPrimary, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,31 +8,31 @@ 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);
-                ${tokens.chipColorActive}: var(--inverse-text-primary);
-                ${tokens.chipBackgroundActive}: var(--surface-solid-default);
+                ${tokens.chipFocusColor}: ${surfaceAccent};
+                ${tokens.chipColor}: ${inverseTextPrimary};
+                ${tokens.chipBackground}: ${surfaceSolidDefault};
+                ${tokens.chipColorHover}: ${inverseTextPrimary};
+                ${tokens.chipBackgroundHover}: ${surfaceSolidDefault};
+                ${tokens.chipColorActive}: ${inverseTextPrimary};
+                ${tokens.chipBackgroundActive}: ${surfaceSolidDefault};
             `,
             secondary: css`
-                ${tokens.chipFocusColor}: var(--surface-accent);
-                ${tokens.chipColor}: var(--text-primary);
-                ${tokens.chipBackground}: var(--surface-solid-primary);
-                ${tokens.chipColorHover}: var(--text-primary);
-                ${tokens.chipBackgroundHover}: var(--surface-solid-primary);
-                ${tokens.chipColorActive}: var(--text-primary);
-                ${tokens.chipBackgroundActive}: var(--surface-solid-primary);
+                ${tokens.chipFocusColor}: ${surfaceAccent};
+                ${tokens.chipColor}: ${textPrimary};
+                ${tokens.chipBackground}: ${surfaceSolidPrimary};
+                ${tokens.chipColorHover}: ${textPrimary};
+                ${tokens.chipBackgroundHover}: ${surfaceSolidPrimary};
+                ${tokens.chipColorActive}: ${textPrimary};
+                ${tokens.chipBackgroundActive}: ${surfaceSolidPrimary};
             `,
             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);
-                ${tokens.chipColorActive}: var(--on-dark-text-primary);
-                ${tokens.chipBackgroundActive}: var(--surface-accent);
+                ${tokens.chipFocusColor}: ${surfaceAccent};
+                ${tokens.chipColor}: ${onDarkTextPrimary};
+                ${tokens.chipBackground}: ${surfaceAccent};
+                ${tokens.chipColorHover}: ${onDarkTextPrimary};
+                ${tokens.chipBackgroundHover}: ${surfaceAccent};
+                ${tokens.chipColorActive}: ${onDarkTextPrimary};
+                ${tokens.chipBackgroundActive}: ${surfaceAccent};
             `
         },
         size: {
@@ -41,12 +42,12 @@ export const config = {
                 ${tokens.chipHeight}: 2.5rem;
                 ${tokens.chipPadding}: 0 1rem;
 
-                ${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.25rem;
                 ${tokens.chipLeftContentMarginRight}: 0.25rem;