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

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

@@ -1,4 +1,5 @@
 import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, inverseTextPrimary, inverseTextPrimaryActive, inverseTextPrimaryHover, onDarkSurfaceSolidDefault, onDarkTextPrimary, onDarkTextPrimaryActive, onDarkTextPrimaryHover, onLightSurfaceSolidDefault, onLightSurfaceTransparentDeep, onLightTextPrimary, onLightTextPrimaryActive, onLightTextPrimaryHover, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceClear, surfaceNegative, surfaceNegativeActive, surfaceNegativeHover, surfacePositive, surfacePositiveActive, surfacePositiveHover, surfaceSolidDefault, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, surfaceWarning, surfaceWarningActive, surfaceWarningHover, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,74 +9,74 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
+                ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover);
-                ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active);
+                ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover};
+                ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive};
             `,
             accent: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive};
             `,
             secondary: css`
-                ${iconButtonTokens.iconButtonColor}: var(--text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary);
+                ${iconButtonTokens.iconButtonColor}: ${textPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
             `,
             clear: css`
-                ${iconButtonTokens.iconButtonColor}: var(--text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear);
+                ${iconButtonTokens.iconButtonColor}: ${textPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
             `,
             positive: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive};
             `,
             warning: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive};
             `,
             negative: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive};
             `,
             dark: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover);
-                ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active);
+                ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover};
+                ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive};
             `,
             black: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover);
-                ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active);
+                ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover};
+                ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive};
             `,
             white: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default);
+                ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover);
-                ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active);
+                ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover};
+                ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive};
             `
         },
         size: {
@@ -84,12 +85,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonWidth}: 3rem;
                 ${iconButtonTokens.iconButtonPadding}: 1.25rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.75rem;
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -99,12 +100,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonWidth}: 2.5rem;
                 ${iconButtonTokens.iconButtonPadding}: 1rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.625rem;
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -114,12 +115,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonWidth}: 2rem;
                 ${iconButtonTokens.iconButtonPadding}: 0.75rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.5rem;
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -132,7 +133,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent};
             `
         }
     }

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

@@ -1,4 +1,5 @@
 import { css, indicatorTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { onDarkSurfaceSolidDefault, onLightSurfaceSolidDefault, surfaceAccent, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceSolidTertiary, surfaceWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         size: 's',
@@ -7,28 +8,28 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.color}: var(--surface-solid-default);
+                ${tokens.color}: ${surfaceSolidDefault};
             `,
             accent: css`
-                ${tokens.color}: var(--surface-accent);
+                ${tokens.color}: ${surfaceAccent};
             `,
             inactive: css`
-                ${tokens.color}: var(--surface-solid-tertiary);
+                ${tokens.color}: ${surfaceSolidTertiary};
             `,
             positive: css`
-                ${tokens.color}: var(--surface-positive);
+                ${tokens.color}: ${surfacePositive};
             `,
             warning: css`
-                ${tokens.color}: var(--surface-warning);
+                ${tokens.color}: ${surfaceWarning};
             `,
             negative: css`
-                ${tokens.color}: var(--surface-negative);
+                ${tokens.color}: ${surfaceNegative};
             `,
             black: css`
-                ${tokens.color}: var(--on-light-surface-solid-default);
+                ${tokens.color}: ${onLightSurfaceSolidDefault};
             `,
             white: css`
-                ${tokens.color}: var(--on-dark-surface-solid-default);
+                ${tokens.color}: ${onDarkSurfaceSolidDefault};
             `
         },
         size: {

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

@@ -1,4 +1,5 @@
 import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, surfaceNegative, surfaceSolidCardBrightness, textNegative, textPositive, textPrimary, textSecondary, textTertiary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,50 +8,50 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-secondary);
-                ${tokens.rightHelperColor}: var(--text-secondary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textSecondary};
+                ${tokens.rightHelperColor}: ${textSecondary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `,
             positive: css`
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-positive);
-                ${tokens.rightHelperColor}: var(--text-secondary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textPositive};
+                ${tokens.rightHelperColor}: ${textSecondary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `,
             warning: css`
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-warning);
-                ${tokens.rightHelperColor}: var(--text-secondary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textWarning};
+                ${tokens.rightHelperColor}: ${textSecondary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `,
             negative: css`
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-negative);
-                ${tokens.rightHelperColor}: var(--text-secondary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textNegative};
+                ${tokens.rightHelperColor}: ${textSecondary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `
         },
         size: {
             l: css`
-                ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size);
-                ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.labelFontFamily}: ${bodyL.fontFamily};
+                ${tokens.labelFontSize}: ${bodyL.fontSize};
+                ${tokens.labelFontStyle}: ${bodyL.fontStyle};
+                ${tokens.labelFontWeight}: ${bodyL.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyL.lineHeight};
 
                 ${tokens.indicatorWrapperGap}: 0.25rem;
                 ${tokens.labelWrapperOffset}: 0.75rem;
@@ -62,29 +63,29 @@ export const config = {
                 ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.375rem;
-                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.helpersPadding}: 0.25rem 0 0 0;
                 ${tokens.helpersGap}: 0.25rem;
 
-                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.leftHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.rightHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.indicatorSizeInner}: 0.5rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -94,12 +95,12 @@ export const config = {
                 ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0;
             `,
             m: css`
-                ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.labelFontFamily}: ${bodyM.fontFamily};
+                ${tokens.labelFontSize}: ${bodyM.fontSize};
+                ${tokens.labelFontStyle}: ${bodyM.fontStyle};
+                ${tokens.labelFontWeight}: ${bodyM.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.indicatorWrapperGap}: 0.25rem;
                 ${tokens.labelWrapperOffset}: 0.625rem;
@@ -111,29 +112,29 @@ export const config = {
                 ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.313rem;
-                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.helpersPadding}: 0.25rem 0 0 0;
                 ${tokens.helpersGap}: 0.25rem;
 
-                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.leftHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.rightHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.indicatorSizeInner}: 0.5rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -143,12 +144,12 @@ export const config = {
                 ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0;
             `,
             s: css`
-                ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.labelFontFamily}: ${bodyS.fontFamily};
+                ${tokens.labelFontSize}: ${bodyS.fontSize};
+                ${tokens.labelFontStyle}: ${bodyS.fontStyle};
+                ${tokens.labelFontWeight}: ${bodyS.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.indicatorWrapperGap}: 0.25rem;
                 ${tokens.labelWrapperOffset}: 0.5rem;
@@ -160,29 +161,29 @@ export const config = {
                 ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.188rem;
-                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.helpersPadding}: 0.25rem 0 0 0;
                 ${tokens.helpersGap}: 0.25rem;
 
-                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.leftHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.rightHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.indicatorSizeInner}: 0.5rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -192,12 +193,12 @@ export const config = {
                 ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0;
             `,
             xs: css`
-                ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.labelFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.indicatorWrapperGap}: 0.25rem;
                 ${tokens.labelWrapperOffset}: 0.375rem;
@@ -209,29 +210,29 @@ export const config = {
                 ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0;
-                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.helpersPadding}: 0.25rem 0 0 0;
                 ${tokens.helpersGap}: 0.25rem;
 
-                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.leftHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.rightHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.indicatorSizeInner}: 0.375rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -243,10 +244,10 @@ export const config = {
         },
         hintView: {
             default: css`
-                ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness);
+                ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness};
                 ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08));
-                ${tokens.tooltipColor}: var(--text-primary);
-                ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness);
+                ${tokens.tooltipColor}: ${textPrimary};
+                ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness};
             `
         },
         hintSize: {
@@ -259,12 +260,12 @@ export const config = {
                 ${tokens.tooltipMinHeight}: 2.5rem;
                 ${tokens.tooltipBorderRadius}: 0.625rem;
 
-                ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily};
+                ${tokens.tooltipTextFontSize}: ${bodyS.fontSize};
+                ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle};
+                ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight};
+                ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.tooltipContentLeftMargin}: 0.375rem;
 
@@ -283,12 +284,12 @@ export const config = {
                 ${tokens.tooltipMinHeight}: 2rem;
                 ${tokens.tooltipBorderRadius}: 0.5rem;
 
-                ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.tooltipContentLeftMargin}: 0.25rem;