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

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

@@ -1,4 +1,5 @@
 import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyMBold, bodyS, bodySBold, inverseTextPrimary, inverseTextPrimaryActive, inverseTextPrimaryHover, inverseTextSecondary, inverseTextSecondaryHover, surfaceAccent, surfaceClear, surfaceSolidCard, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceSolidSecondary, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, textPrimary, textPrimaryActive, textPrimaryHover, textSecondary, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'clear',
@@ -8,129 +9,129 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${paginationTokens.buttonColor}: var(--inverse-text-primary);
-                ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover);
-                ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active);
-                ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary);
-                ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default);
-                ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
-                ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary);
-                ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary);
-                ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover);
-                ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover);
+                ${paginationTokens.buttonColor}: ${inverseTextPrimary};
+                ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover};
+                ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive};
+                ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary};
+                ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault};
+                ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive};
+                ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary};
+                ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary};
+                ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover};
+                ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover};
 
                 ${paginationTokens.buttonDisabledOpacity}: 0.4;
 
-                ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary);
+                ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary};
                 ${paginationTokens.inputBorderColor}:transparent;
                 ${paginationTokens.selectBackgroundColor}: color-mix(
                     in srgb,
-                    var(--inverse-text-primary),
-                    var(--surface-solid-default) 85%
+                    ${inverseTextPrimary},
+                    ${surfaceSolidDefault} 85%
                 );
 
-                ${paginationTokens.paginationColor}: var(--text-primary);
-                ${paginationTokens.paginationHelperTextColor}: var(--text-secondary);
-                ${paginationTokens.buttonFocusColor}: var(--surface-accent);
+                ${paginationTokens.paginationColor}: ${textPrimary};
+                ${paginationTokens.paginationHelperTextColor}: ${textSecondary};
+                ${paginationTokens.buttonFocusColor}: ${surfaceAccent};
             `,
             secondary: css`
-                ${paginationTokens.buttonColor}: var(--text-primary);
-                ${paginationTokens.buttonColorHover}: var(--text-primary-hover);
-                ${paginationTokens.buttonColorActive}: var(--text-primary-active);
-                ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary);
-                ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
-                ${paginationTokens.buttonHoverColor}: var(--text-primary);
-                ${paginationTokens.buttonActiveColor}: var(--text-primary);
-                ${paginationTokens.buttonArrowColor}: var(--text-secondary);
-                ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover);
-                ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover);
+                ${paginationTokens.buttonColor}: ${textPrimary};
+                ${paginationTokens.buttonColorHover}: ${textPrimaryHover};
+                ${paginationTokens.buttonColorActive}: ${textPrimaryActive};
+                ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary};
+                ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
+                ${paginationTokens.buttonHoverColor}: ${textPrimary};
+                ${paginationTokens.buttonActiveColor}: ${textPrimary};
+                ${paginationTokens.buttonArrowColor}: ${textSecondary};
+                ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover};
+                ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover};
 
                 ${paginationTokens.buttonDisabledOpacity}: 0.4;
 
-                ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary);
-                ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary);
+                ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary};
+                ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary};
                 ${paginationTokens.inputBorderColor}: transparent;
 
-                ${paginationTokens.paginationColor}: var(--text-primary);
-                ${paginationTokens.paginationHelperTextColor}: var(--text-secondary);
-                ${paginationTokens.buttonFocusColor}: var(--surface-accent);
+                ${paginationTokens.paginationColor}: ${textPrimary};
+                ${paginationTokens.paginationHelperTextColor}: ${textSecondary};
+                ${paginationTokens.buttonFocusColor}: ${surfaceAccent};
             `,
             clear: css`
-                ${paginationTokens.buttonColor}: var(--text-primary);
-                ${paginationTokens.buttonColorHover}: var(--text-primary-hover);
-                ${paginationTokens.buttonColorActive}: var(--text-primary-active);
-                ${paginationTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear);
-                ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear);
-                ${paginationTokens.buttonHoverColor}: var(--text-primary);
-                ${paginationTokens.buttonActiveColor}: var(--text-primary);
-                ${paginationTokens.buttonArrowColor}: var(--text-secondary);
-                ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover);
-                ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover);
+                ${paginationTokens.buttonColor}: ${textPrimary};
+                ${paginationTokens.buttonColorHover}: ${textPrimaryHover};
+                ${paginationTokens.buttonColorActive}: ${textPrimaryActive};
+                ${paginationTokens.buttonBackgroundColor}: ${surfaceClear};
+                ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear};
+                ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear};
+                ${paginationTokens.buttonHoverColor}: ${textPrimary};
+                ${paginationTokens.buttonActiveColor}: ${textPrimary};
+                ${paginationTokens.buttonArrowColor}: ${textSecondary};
+                ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover};
+                ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover};
 
                 ${paginationTokens.buttonDisabledOpacity}: 0.4;
 
-                ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary);
-                ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card);
+                ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary};
+                ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard};
                 ${paginationTokens.inputBorderColor}: transparent;
 
-                ${paginationTokens.paginationColor}: var(--text-primary);
-                ${paginationTokens.paginationHelperTextColor}: var(--text-secondary);
-                ${paginationTokens.buttonFocusColor}: var(--surface-accent);
+                ${paginationTokens.paginationColor}: ${textPrimary};
+                ${paginationTokens.paginationHelperTextColor}: ${textSecondary};
+                ${paginationTokens.buttonFocusColor}: ${surfaceAccent};
             `
         },
         viewCurrentPage: {
             default: css`
-                ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary);
-                ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default);
-                ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary);
+                ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary};
+                ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault};
+                ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary};
                 ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(
                     in srgb,
-                    var(--inverse-text-primary),
-                    var(--surface-solid-default) 85%
+                    ${inverseTextPrimary},
+                    ${surfaceSolidDefault} 85%
                 );
-                ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary);
+                ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary};
                 ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(
                     in srgb,
-                    var(--inverse-text-primary),
-                    var(--surface-solid-default) 80%
+                    ${inverseTextPrimary},
+                    ${surfaceSolidDefault} 80%
                 );
             `,
             secondary: css`
-                ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary);
-                ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary);
-                ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary);
+                ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary};
+                ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary};
+                ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary};
                 ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(
                     in srgb,
-                    var(--inverse-text-primary),
-                    var(--surface-transparent-secondary) 85%
+                    ${inverseTextPrimary},
+                    ${surfaceTransparentSecondary} 85%
                 );
-                ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary);
+                ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary};
                 ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(
                     in srgb,
-                    var(--inverse-text-primary),
-                    var(--surface-transparent-secondary) 80%
+                    ${inverseTextPrimary},
+                    ${surfaceTransparentSecondary} 80%
                 );
             `,
             clear: css`
-                ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary);
-                ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear);
-                ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary);
-                ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%);
-                ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary);
-                ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%);
+                ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary};
+                ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear};
+                ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary};
+                ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%);
+                ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary};
+                ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%);
             `
         },
         size: {
             m: css`
-                ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size);
-                ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily};
+                ${paginationTokens.paginationFontSize}: ${bodyM.fontSize};
+                ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle};
+                ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight};
+                ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing};
+                ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight};
 
                 ${paginationTokens.buttonHeight}: 3rem;
                 ${paginationTokens.buttonWidth}: 3rem;
@@ -166,12 +167,12 @@ export const config = {
                 ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem;
             `,
             s: css`
-                ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size);
-                ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily};
+                ${paginationTokens.paginationFontSize}: ${bodyS.fontSize};
+                ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle};
+                ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight};
+                ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing};
+                ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight};
 
                 ${paginationTokens.buttonHeight}: 2.5rem;
                 ${paginationTokens.buttonWidth}: 2.5rem;

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

@@ -1,4 +1,5 @@
 import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default'
@@ -6,14 +7,14 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${popoverTokens.boxShadow}: var(--shadow-down-hard-m);
+                ${popoverTokens.boxShadow}: ${shadowDownHardM};
 
                 ${popoverTokens.arrowMaskWidth}: 1rem;
                 ${popoverTokens.arrowMaskHeight}: 1rem;
                 ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
                 ${popoverTokens.arrowHeight}: 0.375rem;
                 ${popoverTokens.arrowEdgeMargin}: 0.5625rem;
-                ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary);
+                ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary};
             `
         }
     }

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

@@ -1,4 +1,5 @@
 import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, surfaceAccent, surfaceAccentGradient, surfaceInfo, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceTransparentSecondary, surfaceTransparentTertiary, surfaceWarning, textNegative, textPositive, textPrimary, textSecondary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,95 +9,95 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             secondary: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-transparent-tertiary);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceTransparentTertiary};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             // deprecated
             primary: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             accent: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             accentGradient: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             info: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-info);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             // deprecated
             success: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-positive);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textPositive};
             `,
             positive: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-positive);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textPositive};
             `,
             warning: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-warning);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textWarning};
             `,
             // deprecated
             error: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-negative);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textNegative};
             `,
             negative: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-negative);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textNegative};
             `
         },
         size: {
@@ -105,27 +106,27 @@ export const config = {
                 ${progressTokens.labelWrapperGap}: 0.375rem;
                 ${progressTokens.labelWrapperMarginRight}: 1.5rem;
 
-                ${progressTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${progressTokens.labelFontSize}: var(--plasma-typo-body-l-font-size);
-                ${progressTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${progressTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${progressTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${progressTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${progressTokens.labelFontFamily}: ${bodyL.fontFamily};
+                ${progressTokens.labelFontSize}: ${bodyL.fontSize};
+                ${progressTokens.labelFontStyle}: ${bodyL.fontStyle};
+                ${progressTokens.labelFontWeight}: ${bodyL.fontWeight};
+                ${progressTokens.labelLetterSpacing}: ${bodyL.letterSpacing};
+                ${progressTokens.labelLineHeight}: ${bodyL.lineHeight};
 
-                ${progressTokens.valueFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${progressTokens.valueFontSize}: var(--plasma-typo-body-l-font-size);
-                ${progressTokens.valueFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${progressTokens.valueFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${progressTokens.valueLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${progressTokens.valueLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${progressTokens.valueFontFamily}: ${bodyL.fontFamily};
+                ${progressTokens.valueFontSize}: ${bodyL.fontSize};
+                ${progressTokens.valueFontStyle}: ${bodyL.fontStyle};
+                ${progressTokens.valueFontWeight}: ${bodyL.fontWeight};
+                ${progressTokens.valueLetterSpacing}: ${bodyL.letterSpacing};
+                ${progressTokens.valueLineHeight}: ${bodyL.lineHeight};
                 ${progressTokens.valueMarginLeft}: 1.5rem;
 
-                ${progressTokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${progressTokens.captionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${progressTokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${progressTokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${progressTokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${progressTokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${progressTokens.captionFontFamily}: ${bodyXS.fontFamily};
+                ${progressTokens.captionFontSize}: ${bodyXS.fontSize};
+                ${progressTokens.captionFontStyle}: ${bodyXS.fontStyle};
+                ${progressTokens.captionFontWeight}: ${bodyXS.fontWeight};
+                ${progressTokens.captionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${progressTokens.captionLineHeight}: ${bodyXS.lineHeight};
                 ${progressTokens.captionMarginTop}: 0.5rem;
             `,
             m: css`
@@ -133,27 +134,27 @@ export const config = {
                 ${progressTokens.labelWrapperGap}: 0.375rem;
                 ${progressTokens.labelWrapperMarginRight}: 1.25rem;
 
-                ${progressTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${progressTokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
-                ${progressTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${progressTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${progressTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${progressTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${progressTokens.labelFontFamily}: ${bodyM.fontFamily};
+                ${progressTokens.labelFontSize}: ${bodyM.fontSize};
+                ${progressTokens.labelFontStyle}: ${bodyM.fontStyle};
+                ${progressTokens.labelFontWeight}: ${bodyM.fontWeight};
+                ${progressTokens.labelLetterSpacing}: ${bodyM.letterSpacing};
+                ${progressTokens.labelLineHeight}: ${bodyM.lineHeight};
 
-                ${progressTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${progressTokens.valueFontSize}: var(--plasma-typo-body-m-font-size);
-                ${progressTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${progressTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${progressTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${progressTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${progressTokens.valueFontFamily}: ${bodyM.fontFamily};
+                ${progressTokens.valueFontSize}: ${bodyM.fontSize};
+                ${progressTokens.valueFontStyle}: ${bodyM.fontStyle};
+                ${progressTokens.valueFontWeight}: ${bodyM.fontWeight};
+                ${progressTokens.valueLetterSpacing}: ${bodyM.letterSpacing};
+                ${progressTokens.valueLineHeight}: ${bodyM.lineHeight};
                 ${progressTokens.valueMarginLeft}: 1.25rem;
 
-                ${progressTokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${progressTokens.captionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${progressTokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${progressTokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${progressTokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${progressTokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${progressTokens.captionFontFamily}: ${bodyXS.fontFamily};
+                ${progressTokens.captionFontSize}: ${bodyXS.fontSize};
+                ${progressTokens.captionFontStyle}: ${bodyXS.fontStyle};
+                ${progressTokens.captionFontWeight}: ${bodyXS.fontWeight};
+                ${progressTokens.captionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${progressTokens.captionLineHeight}: ${bodyXS.lineHeight};
                 ${progressTokens.captionMarginTop}: 0.5rem;
             `,
             s: css`
@@ -161,27 +162,27 @@ export const config = {
                 ${progressTokens.labelWrapperGap}: 0.375rem;
                 ${progressTokens.labelWrapperMarginRight}: 1rem;
 
-                ${progressTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${progressTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${progressTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${progressTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${progressTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${progressTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${progressTokens.labelFontFamily}: ${bodyS.fontFamily};
+                ${progressTokens.labelFontSize}: ${bodyS.fontSize};
+                ${progressTokens.labelFontStyle}: ${bodyS.fontStyle};
+                ${progressTokens.labelFontWeight}: ${bodyS.fontWeight};
+                ${progressTokens.labelLetterSpacing}: ${bodyS.letterSpacing};
+                ${progressTokens.labelLineHeight}: ${bodyS.lineHeight};
 
-                ${progressTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${progressTokens.valueFontSize}: var(--plasma-typo-body-s-font-size);
-                ${progressTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${progressTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${progressTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${progressTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${progressTokens.valueFontFamily}: ${bodyS.fontFamily};
+                ${progressTokens.valueFontSize}: ${bodyS.fontSize};
+                ${progressTokens.valueFontStyle}: ${bodyS.fontStyle};
+                ${progressTokens.valueFontWeight}: ${bodyS.fontWeight};
+                ${progressTokens.valueLetterSpacing}: ${bodyS.letterSpacing};
+                ${progressTokens.valueLineHeight}: ${bodyS.lineHeight};
                 ${progressTokens.valueMarginLeft}: 1rem;
 
-                ${progressTokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${progressTokens.captionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${progressTokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${progressTokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${progressTokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${progressTokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${progressTokens.captionFontFamily}: ${bodyXS.fontFamily};
+                ${progressTokens.captionFontSize}: ${bodyXS.fontSize};
+                ${progressTokens.captionFontStyle}: ${bodyXS.fontStyle};
+                ${progressTokens.captionFontWeight}: ${bodyXS.fontWeight};
+                ${progressTokens.captionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${progressTokens.captionLineHeight}: ${bodyXS.lineHeight};
                 ${progressTokens.captionMarginTop}: 0.5rem;
             `
         },