npm - @salutejs/sdds-scan - Versions diffs - 0.357.0-next-sbcom.0 → 0.358.0-dev.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (758) hide show

package/dist/styled-components/es/components/Notification/Notification.config.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyS, bodySBold, surfaceTransparentCard, textInfo, textNegative, textPositive, textPrimary, textSecondary, textTertiary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,10 +8,10 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${notificationTokens.titleColor}: var(--text-primary);
-                ${notificationTokens.contentLeftIconColor}: var(--text-primary);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textPrimary};
+                ${notificationTokens.contentLeftIconColor}: ${textPrimary};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
@@ -39,32 +40,32 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
                 ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem;
             `,
             negative: css`
-                ${notificationTokens.titleColor}: var(--text-negative);
-                ${notificationTokens.contentLeftIconColor}: var(--text-negative);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textNegative};
+                ${notificationTokens.contentLeftIconColor}: ${textNegative};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
@@ -93,32 +94,32 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
                 ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem;
             `,
             positive: css`
-                ${notificationTokens.titleColor}: var(--text-positive);
-                ${notificationTokens.contentLeftIconColor}: var(--text-positive);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textPositive};
+                ${notificationTokens.contentLeftIconColor}: ${textPositive};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
@@ -147,32 +148,32 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
                 ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem;
             `,
             warning: css`
-                ${notificationTokens.titleColor}: var(--text-warning);
-                ${notificationTokens.contentLeftIconColor}: var(--text-warning);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textWarning};
+                ${notificationTokens.contentLeftIconColor}: ${textWarning};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
@@ -201,32 +202,32 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
                 ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem;
             `,
             info: css`
-                ${notificationTokens.titleColor}: var(--text-info);
-                ${notificationTokens.contentLeftIconColor}: var(--text-info);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textInfo};
+                ${notificationTokens.contentLeftIconColor}: ${textInfo};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
@@ -255,22 +256,22 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;

package/dist/styled-components/es/components/NumberFormat/NumberFormat.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { composeNumberFormat } from '@salutejs/plasma-new-hope/styled-components';
+import { TextField } from '../TextField/TextField';
+export const NumberFormat = composeNumberFormat(TextField);

package/dist/styled-components/es/components/NumberFormat/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { numberFormatter } from '@salutejs/plasma-new-hope/styled-components';
2	+ export { NumberFormat } from './NumberFormat';

package/dist/styled-components/es/components/NumberInput/NumberInput.config.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyMBold, bodyS, bodySBold, inverseSurfaceTransparentSecondary, inverseTextPrimary, inverseTextPrimaryActive, inverseTextPrimaryHover, inverseTextTertiary, onDarkSurfaceTransparentSecondary, onDarkTextPrimary, onDarkTextPrimaryActive, onDarkTextPrimaryHover, onDarkTextTertiary, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceTransparentNegative, surfaceTransparentPrimary, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, textAccent, textNegative, textPrimary, textPrimaryActive, textPrimaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -9,26 +10,26 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.caretColor}: var(--text-accent);
-                ${tokens.errorColor}: var(--text-negative);
-                ${tokens.backgroundErrorColor}: var(--surface-transparent-negative);
-                ${tokens.color}: var(--text-primary);
-                ${tokens.colorSolid}: var(--inverse-text-primary);
-                ${tokens.additionalTextColor}: var(--text-tertiary);
-                ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary);
-                ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary);
-                ${tokens.backgroundColorSolid}: var(--surface-solid-default);
-                ${tokens.iconButtonColor}: var(--inverse-text-primary);
-                ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default);
-                ${tokens.iconButtonColorHover}: var(--inverse-text-primary);
-                ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover);
-                ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${tokens.iconButtonColorActive}: var(--inverse-text-primary);
-                ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active);
-                ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${tokens.caretColor}: ${textAccent};
+                ${tokens.errorColor}: ${textNegative};
+                ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative};
+                ${tokens.color}: ${textPrimary};
+                ${tokens.colorSolid}: ${inverseTextPrimary};
+                ${tokens.additionalTextColor}: ${textTertiary};
+                ${tokens.additionalTextColorSolid}: ${inverseTextTertiary};
+                ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary};
+                ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary};
+                ${tokens.backgroundColorSolid}: ${surfaceSolidDefault};
+                ${tokens.iconButtonColor}: ${inverseTextPrimary};
+                ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault};
+                ${tokens.iconButtonColorHover}: ${inverseTextPrimary};
+                ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover};
+                ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${tokens.iconButtonColorActive}: ${inverseTextPrimary};
+                ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive};
+                ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive};
                 ${tokens.actionButtonDisabledOpacity}: 0.4;
@@ -36,26 +37,26 @@ export const config = {
                 ${tokens.loaderSpinnerColorSolid}: inherit;
             `,
             secondary: css`
-                ${tokens.caretColor}: var(--text-accent);
-                ${tokens.errorColor}: var(--text-negative);
-                ${tokens.backgroundErrorColor}: var(--surface-transparent-negative);
-                ${tokens.color}: var(--text-primary);
-                ${tokens.colorSolid}: var(--text-primary);
-                ${tokens.additionalTextColor}: var(--text-tertiary);
-                ${tokens.additionalTextColorSolid}: var(--text-tertiary);
-                ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary);
-                ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary);
-                ${tokens.iconButtonColor}: var(--text-primary);
-                ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary);
-                ${tokens.iconButtonColorHover}: var(--text-primary);
-                ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover);
-                ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${tokens.iconButtonColorActive}: var(--text-primary);
-                ${tokens.iconButtonColorSolidActive}: var(--text-primary-active);
-                ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${tokens.caretColor}: ${textAccent};
+                ${tokens.errorColor}: ${textNegative};
+                ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative};
+                ${tokens.color}: ${textPrimary};
+                ${tokens.colorSolid}: ${textPrimary};
+                ${tokens.additionalTextColor}: ${textTertiary};
+                ${tokens.additionalTextColorSolid}: ${textTertiary};
+                ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary};
+                ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary};
+                ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary};
+                ${tokens.iconButtonColor}: ${textPrimary};
+                ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary};
+                ${tokens.iconButtonColorHover}: ${textPrimary};
+                ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover};
+                ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${tokens.iconButtonColorActive}: ${textPrimary};
+                ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive};
+                ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
                 ${tokens.actionButtonDisabledOpacity}: 0.4;
@@ -63,27 +64,27 @@ export const config = {
                 ${tokens.loaderSpinnerColorSolid}: inherit;
             `,
             accent: css`
-                ${tokens.caretColor}: var(--text-accent);
-                ${tokens.caretColorSolid}: var(--inverse-text-primary);
-                ${tokens.errorColor}: var(--text-negative);
-                ${tokens.backgroundErrorColor}: var(--surface-transparent-negative);
-                ${tokens.color}: var(--text-primary);
-                ${tokens.colorSolid}: var(--on-dark-text-primary);
-                ${tokens.additionalTextColor}: var(--text-tertiary);
-                ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary);
-                ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary);
-                ${tokens.backgroundColorSolid}: var(--surface-accent);
-                ${tokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${tokens.iconButtonBackgroundColor}: var(--surface-accent);
-                ${tokens.iconButtonColorHover}: var(--inverse-text-primary);
-                ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover);
-                ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${tokens.iconButtonColorActive}: var(--inverse-text-primary);
-                ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active);
-                ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+                ${tokens.caretColor}: ${textAccent};
+                ${tokens.caretColorSolid}: ${inverseTextPrimary};
+                ${tokens.errorColor}: ${textNegative};
+                ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative};
+                ${tokens.color}: ${textPrimary};
+                ${tokens.colorSolid}: ${onDarkTextPrimary};
+                ${tokens.additionalTextColor}: ${textTertiary};
+                ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary};
+                ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary};
+                ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary};
+                ${tokens.backgroundColorSolid}: ${surfaceAccent};
+                ${tokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${tokens.iconButtonBackgroundColor}: ${surfaceAccent};
+                ${tokens.iconButtonColorHover}: ${inverseTextPrimary};
+                ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover};
+                ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover};
+                ${tokens.iconButtonColorActive}: ${inverseTextPrimary};
+                ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive};
+                ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive};
                 ${tokens.actionButtonDisabledOpacity}: 0.4;
@@ -91,25 +92,25 @@ export const config = {
                 ${tokens.loaderSpinnerColorSolid}: inherit;
             `,
             clear: css`
-                ${tokens.caretColor}: var(--text-accent);
-                ${tokens.caretColorSolid}: var(--text-accent);
-                ${tokens.errorColor}: var(--text-negative);
-                ${tokens.backgroundErrorColor}: var(--surface-transparent-negative);
-                ${tokens.color}: var(--text-primary);
-                ${tokens.colorSolid}: var(--text-primary);
-                ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover);
-                ${tokens.additionalTextColor}: var(--text-tertiary);
-                ${tokens.additionalTextColorSolid}: var(--text-tertiary);
-                ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary);
+                ${tokens.caretColor}: ${textAccent};
+                ${tokens.caretColorSolid}: ${textAccent};
+                ${tokens.errorColor}: ${textNegative};
+                ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative};
+                ${tokens.color}: ${textPrimary};
+                ${tokens.colorSolid}: ${textPrimary};
+                ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover};
+                ${tokens.additionalTextColor}: ${textTertiary};
+                ${tokens.additionalTextColorSolid}: ${textTertiary};
+                ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary};
+                ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary};
                 ${tokens.backgroundColorSolid}: transparent;
-                ${tokens.iconButtonColor}: var(--text-primary);
+                ${tokens.iconButtonColor}: ${textPrimary};
                 ${tokens.iconButtonBackgroundColor}: transparent;
-                ${tokens.iconButtonColorHover}: var(--text-primary-hover);
+                ${tokens.iconButtonColorHover}: ${textPrimaryHover};
                 ${tokens.iconButtonBackgroundColorHover}: transparent;
-                ${tokens.iconButtonColorActive}: var(--text-primary-active);
+                ${tokens.iconButtonColorActive}: ${textPrimaryActive};
                 ${tokens.iconButtonBackgroundColorActive}: transparent;
                 ${tokens.actionButtonDisabledOpacity}: 0.4;
@@ -124,12 +125,12 @@ export const config = {
                 ${tokens.iconButtonHeight}: 3rem;
                 ${tokens.iconButtonWidth}: 3rem;
                 ${tokens.iconButtonPadding}: 1.25rem;
-                ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily};
+                ${tokens.iconButtonFontSize}: ${bodyM.fontSize};
+                ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle};
+                ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight};
+                ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight};
                 ${tokens.iconButtonRadius}: 0.75rem;
                 ${tokens.iconButtonSegmentationRadius}: 0.25rem;
@@ -139,12 +140,12 @@ export const config = {
                 ${tokens.textWrapperHeight}: 3rem;
                 ${tokens.textWrapperPadding}: 0.875rem 1rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.fontFamily}: ${bodyM.fontFamily};
+                ${tokens.fontSize}: ${bodyM.fontSize};
+                ${tokens.fontStyle}: ${bodyM.fontStyle};
+                ${tokens.fontWeight}: ${bodyM.fontWeight};
+                ${tokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.lineHeight}: ${bodyM.lineHeight};
                 ${tokens.textBeforeMarginRight}: 0.25rem;
                 ${tokens.textAfterMarginLeft}: 0.25rem;
@@ -156,12 +157,12 @@ export const config = {
                 ${tokens.iconButtonHeight}: 2.5rem;
                 ${tokens.iconButtonWidth}: 2.5rem;
                 ${tokens.iconButtonPadding}: 1rem;
-                ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily};
+                ${tokens.iconButtonFontSize}: ${bodyS.fontSize};
+                ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle};
+                ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight};
+                ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight};
                 ${tokens.iconButtonRadius}: 0.625rem;
                 ${tokens.iconButtonSegmentationRadius}: 0.25rem;
@@ -171,12 +172,12 @@ export const config = {
                 ${tokens.textWrapperHeight}: 2.5rem;
                 ${tokens.textWrapperPadding}: 0.688rem 0.875rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.fontFamily}: ${bodyS.fontFamily};
+                ${tokens.fontSize}: ${bodyS.fontSize};
+                ${tokens.fontStyle}: ${bodyS.fontStyle};
+                ${tokens.fontWeight}: ${bodyS.fontWeight};
+                ${tokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyS.lineHeight};
                 ${tokens.textBeforeMarginRight}: 0.25rem;
                 ${tokens.textAfterMarginLeft}: 0.25rem;
@@ -192,8 +193,8 @@ export const config = {
         },
         inputBackgroundType: {
             fill: css`
-                ${tokens.backgroundColor}: var(--surface-transparent-primary);
-                ${tokens.backgroundColorHover}: var(--surface-transparent-primary);
+                ${tokens.backgroundColor}: ${surfaceTransparentPrimary};
+                ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary};
             `,
             clear: css`
                 ${tokens.backgroundColor}: transparent;