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

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

@@ -1,3 +1,4 @@
+import { bodyM, bodyS, bodyXS, outlineAccent, outlineNegative, outlineNegativeHover, outlineSolidPrimary, outlineSolidPrimaryHover, surfaceAccent, surfaceClear, surfaceSolidCard, surfaceSolidCardActive, surfaceSolidCardBrightness, surfaceSolidCardHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceSolidPrimary, surfaceSolidPrimaryActive, surfaceSolidPrimaryHover, textAccent, textNegative, textNegativeHover, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, textAreaTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,114 +9,114 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${textAreaTokens.borderColor}: var(--outline-solid-primary);
-                ${textAreaTokens.borderColorHover}: var(--outline-solid-primary-hover);
-                ${textAreaTokens.borderColorFocus}: var(--outline-accent);
-                ${textAreaTokens.backgroundColor}: var(--surface-solid-card);
-                ${textAreaTokens.backgroundColorHover}: var(--surface-solid-card-hover);
-                ${textAreaTokens.backgroundColorActive}: var(--surface-solid-card-active);
-                ${textAreaTokens.backgroundColorFocus}: var(--surface-solid-card);
-
-                ${textAreaTokens.inputColor}: var(--text-primary);
-                ${textAreaTokens.inputColorFocus}: var(--text-primary);
-                ${textAreaTokens.inputCaretColor}: var(--text-accent);
-
-                ${textAreaTokens.placeholderColor}: var(--text-secondary);
-                ${textAreaTokens.placeholderColorFocus}: var(--text-secondary);
-
-                ${textAreaTokens.leftHelperColor}: var(--text-secondary);
-                ${textAreaTokens.rightHelperColor}: var(--text-secondary);
-
-                ${textAreaTokens.rightContentColor}: var(--text-accent);
-
-                ${textAreaTokens.indicatorColor}: var(--text-negative);
-                ${textAreaTokens.optionalColor}: var(--text-secondary);
-
-                ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-solid-default);
-                ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-solid-default-active);
-                ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-solid-primary);
-                ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-solid-primary-active);
-                ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-solid-primary-hover);
-
-                ${textAreaTokens.dividerColor}: var(--outline-solid-primary);
-                ${textAreaTokens.dividerColorHover}: var(--text-secondary);
-                ${textAreaTokens.dividerColorFocus}: var(--surface-accent);
-                ${textAreaTokens.titleCaptionColor}: var(--text-secondary);
-                ${textAreaTokens.hintIconColor}: var(--text-secondary);
+                ${textAreaTokens.borderColor}: ${outlineSolidPrimary};
+                ${textAreaTokens.borderColorHover}: ${outlineSolidPrimaryHover};
+                ${textAreaTokens.borderColorFocus}: ${outlineAccent};
+                ${textAreaTokens.backgroundColor}: ${surfaceSolidCard};
+                ${textAreaTokens.backgroundColorHover}: ${surfaceSolidCardHover};
+                ${textAreaTokens.backgroundColorActive}: ${surfaceSolidCardActive};
+                ${textAreaTokens.backgroundColorFocus}: ${surfaceSolidCard};
+
+                ${textAreaTokens.inputColor}: ${textPrimary};
+                ${textAreaTokens.inputColorFocus}: ${textPrimary};
+                ${textAreaTokens.inputCaretColor}: ${textAccent};
+
+                ${textAreaTokens.placeholderColor}: ${textSecondary};
+                ${textAreaTokens.placeholderColorFocus}: ${textSecondary};
+
+                ${textAreaTokens.leftHelperColor}: ${textSecondary};
+                ${textAreaTokens.rightHelperColor}: ${textSecondary};
+
+                ${textAreaTokens.rightContentColor}: ${textAccent};
+
+                ${textAreaTokens.indicatorColor}: ${textNegative};
+                ${textAreaTokens.optionalColor}: ${textSecondary};
+
+                ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceSolidDefault};
+                ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceSolidDefaultActive};
+                ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceSolidPrimary};
+                ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceSolidPrimaryActive};
+                ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceSolidPrimaryHover};
+
+                ${textAreaTokens.dividerColor}: ${outlineSolidPrimary};
+                ${textAreaTokens.dividerColorHover}: ${textSecondary};
+                ${textAreaTokens.dividerColorFocus}: ${surfaceAccent};
+                ${textAreaTokens.titleCaptionColor}: ${textSecondary};
+                ${textAreaTokens.hintIconColor}: ${textSecondary};
             `,
             /**
              * @deprecated
              * использовать `default`
              */ primary: css`
-                ${textAreaTokens.borderColor}: var(--outline-solid-primary);
-                ${textAreaTokens.borderColorHover}: var(--outline-solid-primary-hover);
-                ${textAreaTokens.borderColorFocus}: var(--outline-accent);
-                ${textAreaTokens.backgroundColor}: var(--surface-solid-card);
-                ${textAreaTokens.backgroundColorHover}: var(--surface-solid-card-hover);
-                ${textAreaTokens.backgroundColorActive}: var(--surface-solid-card-active);
-                ${textAreaTokens.backgroundColorFocus}: var(--surface-solid-card);
-                ${textAreaTokens.inputColor}: var(--text-primary);
-                ${textAreaTokens.inputColorFocus}: var(--text-primary);
-                ${textAreaTokens.inputCaretColor}: var(--text-accent);
-                ${textAreaTokens.placeholderColor}: var(--text-secondary);
-                ${textAreaTokens.placeholderColorFocus}: var(--text-secondary);
-
-                ${textAreaTokens.leftHelperColor}: var(--text-secondary);
-                ${textAreaTokens.rightHelperColor}: var(--text-secondary);
-                ${textAreaTokens.indicatorColor}: var(--text-negative);
-                ${textAreaTokens.optionalColor}: var(--text-secondary);
-                ${textAreaTokens.rightContentColor}: var(--text-accent);
-
-                ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-solid-default);
-                ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-solid-default-active);
-                ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-solid-primary);
-                ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-solid-primary-active);
-                ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-solid-primary-hover);
-
-                ${textAreaTokens.dividerColor}: var(--outline-solid-primary);
-                ${textAreaTokens.dividerColorHover}: var(--text-secondary);
-                ${textAreaTokens.dividerColorFocus}: var(--surface-accent);
-                ${textAreaTokens.titleCaptionColor}: var(--text-secondary);
-                ${textAreaTokens.hintIconColor}: var(--text-secondary);
+                ${textAreaTokens.borderColor}: ${outlineSolidPrimary};
+                ${textAreaTokens.borderColorHover}: ${outlineSolidPrimaryHover};
+                ${textAreaTokens.borderColorFocus}: ${outlineAccent};
+                ${textAreaTokens.backgroundColor}: ${surfaceSolidCard};
+                ${textAreaTokens.backgroundColorHover}: ${surfaceSolidCardHover};
+                ${textAreaTokens.backgroundColorActive}: ${surfaceSolidCardActive};
+                ${textAreaTokens.backgroundColorFocus}: ${surfaceSolidCard};
+                ${textAreaTokens.inputColor}: ${textPrimary};
+                ${textAreaTokens.inputColorFocus}: ${textPrimary};
+                ${textAreaTokens.inputCaretColor}: ${textAccent};
+                ${textAreaTokens.placeholderColor}: ${textSecondary};
+                ${textAreaTokens.placeholderColorFocus}: ${textSecondary};
+
+                ${textAreaTokens.leftHelperColor}: ${textSecondary};
+                ${textAreaTokens.rightHelperColor}: ${textSecondary};
+                ${textAreaTokens.indicatorColor}: ${textNegative};
+                ${textAreaTokens.optionalColor}: ${textSecondary};
+                ${textAreaTokens.rightContentColor}: ${textAccent};
+
+                ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceSolidDefault};
+                ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceSolidDefaultActive};
+                ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceSolidPrimary};
+                ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceSolidPrimaryActive};
+                ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceSolidPrimaryHover};
+
+                ${textAreaTokens.dividerColor}: ${outlineSolidPrimary};
+                ${textAreaTokens.dividerColorHover}: ${textSecondary};
+                ${textAreaTokens.dividerColorFocus}: ${surfaceAccent};
+                ${textAreaTokens.titleCaptionColor}: ${textSecondary};
+                ${textAreaTokens.hintIconColor}: ${textSecondary};
             `,
             negative: css`
-                ${textAreaTokens.borderColor}: var(--text-negative);
-                ${textAreaTokens.borderColorHover}: var(--text-negative-hover);
-                ${textAreaTokens.borderColorFocus}: var(--outline-accent);
-                ${textAreaTokens.backgroundColor}: var(--surface-solid-card);
-                ${textAreaTokens.backgroundColorHover}: var(--surface-solid-card-hover);
-                ${textAreaTokens.backgroundColorActive}: var(--surface-solid-card-active);
-                ${textAreaTokens.backgroundColorFocus}: var(--surface-solid-card);
-
-                ${textAreaTokens.inputColor}: var(--text-primary);
-                ${textAreaTokens.inputColorFocus}: var(--text-primary);
-                ${textAreaTokens.inputCaretColor}: var(--text-negative);
-
-                ${textAreaTokens.placeholderColor}: var(--text-secondary);
-                ${textAreaTokens.placeholderColorFocus}: var(--text-secondary);
-
-                ${textAreaTokens.leftHelperColor}: var(--text-negative);
-                ${textAreaTokens.rightHelperColor}: var(--text-secondary);
-
-                ${textAreaTokens.rightContentColor}: var(--text-accent);
-
-                ${textAreaTokens.indicatorColor}: var(--text-negative);
-                ${textAreaTokens.optionalColor}: var(--text-secondary);
-
-                ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-solid-default);
-                ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-solid-default-active);
-                ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-solid-primary);
-                ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-solid-primary-active);
-                ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-solid-primary-hover);
-
-                ${textAreaTokens.dividerColor}: var(--outline-negative);
-                ${textAreaTokens.dividerColorHover}: var(--outline-negative-hover);
+                ${textAreaTokens.borderColor}: ${textNegative};
+                ${textAreaTokens.borderColorHover}: ${textNegativeHover};
+                ${textAreaTokens.borderColorFocus}: ${outlineAccent};
+                ${textAreaTokens.backgroundColor}: ${surfaceSolidCard};
+                ${textAreaTokens.backgroundColorHover}: ${surfaceSolidCardHover};
+                ${textAreaTokens.backgroundColorActive}: ${surfaceSolidCardActive};
+                ${textAreaTokens.backgroundColorFocus}: ${surfaceSolidCard};
+
+                ${textAreaTokens.inputColor}: ${textPrimary};
+                ${textAreaTokens.inputColorFocus}: ${textPrimary};
+                ${textAreaTokens.inputCaretColor}: ${textNegative};
+
+                ${textAreaTokens.placeholderColor}: ${textSecondary};
+                ${textAreaTokens.placeholderColorFocus}: ${textSecondary};
+
+                ${textAreaTokens.leftHelperColor}: ${textNegative};
+                ${textAreaTokens.rightHelperColor}: ${textSecondary};
+
+                ${textAreaTokens.rightContentColor}: ${textAccent};
+
+                ${textAreaTokens.indicatorColor}: ${textNegative};
+                ${textAreaTokens.optionalColor}: ${textSecondary};
+
+                ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceSolidDefault};
+                ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceSolidDefaultActive};
+                ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceSolidPrimary};
+                ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceSolidPrimaryActive};
+                ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceSolidPrimaryHover};
+
+                ${textAreaTokens.dividerColor}: ${outlineNegative};
+                ${textAreaTokens.dividerColorHover}: ${outlineNegativeHover};
                 ${textAreaTokens.dividerColorFocus}: var(--outline-negative-focus);
-                ${textAreaTokens.titleCaptionColor}: var(--text-secondary);
-                ${textAreaTokens.hintIconColor}: var(--text-secondary);
+                ${textAreaTokens.titleCaptionColor}: ${textSecondary};
+                ${textAreaTokens.hintIconColor}: ${textSecondary};
             `
         },
         size: {
@@ -144,27 +145,27 @@ export const config = {
 
                 ${textAreaTokens.labelMarginBottom}: 0.5rem;
 
-                ${textAreaTokens.labelOuterFontSize}: var(--plasma-typo-body-s-font-size);
-                ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-s-font-size);
-                ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${textAreaTokens.labelOuterFontSize}: ${bodyS.fontSize};
+                ${textAreaTokens.labelInnerFontFamily}: ${bodyS.fontFamily};
+                ${textAreaTokens.labelInnerFontSize}: ${bodyS.fontSize};
+                ${textAreaTokens.labelInnerFontStyle}: ${bodyS.fontStyle};
+                ${textAreaTokens.labelInnerFontWeight}: ${bodyS.fontWeight};
+                ${textAreaTokens.labelInnerLetterSpacing}: ${bodyS.letterSpacing};
+                ${textAreaTokens.labelInnerLineHeight}: ${bodyS.lineHeight};
                 ${textAreaTokens.labelInnerTop}: 0.375rem;
                 ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
-                ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-m-font-size);
-                ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-m-line-height);
-                ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-s-font-size);
-                ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${textAreaTokens.inputFontFamily}: ${bodyM.fontFamily};
+                ${textAreaTokens.inputFontSize}: ${bodyM.fontSize};
+                ${textAreaTokens.inputFontStyle}: ${bodyM.fontStyle};
+                ${textAreaTokens.inputFontWeight}: ${bodyM.fontWeight};
+                ${textAreaTokens.inputLetterSpacing}: ${bodyM.letterSpacing};
+                ${textAreaTokens.inputLineHeight}: ${bodyM.lineHeight};
+                ${textAreaTokens.helpersFontFamily}: ${bodyS.fontFamily};
+                ${textAreaTokens.helpersFontSize}: ${bodyS.fontSize};
+                ${textAreaTokens.helpersFontStyle}: ${bodyS.fontStyle};
+                ${textAreaTokens.helpersFontWeight}: ${bodyS.fontWeight};
+                ${textAreaTokens.helpersLetterSpacing}: ${bodyS.letterSpacing};
+                ${textAreaTokens.helpersLineHeight}: ${bodyS.lineHeight};
 
                 ${textAreaTokens.indicatorSizeInner}: 0.375rem;
                 ${textAreaTokens.indicatorSizeOuter}: 0.375rem;
@@ -182,21 +183,21 @@ export const config = {
                 ${textAreaTokens.hintInnerLabelPlacementOffset}: -0.751rem -2rem auto auto;
 
                 ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
-                ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
             `
         },
         hintView: {
             // TODO: заменить тень на токен https://github.com/salute-developers/plasma/issues/1131
             default: css`
-                ${textAreaTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness);
+                ${textAreaTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness};
                 ${textAreaTokens.tooltipBoxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
-                ${textAreaTokens.tooltipColor}: var(--text-primary);
-                ${textAreaTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness);
+                ${textAreaTokens.tooltipColor}: ${textPrimary};
+                ${textAreaTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness};
             `
         },
         hintSize: {
@@ -211,12 +212,12 @@ export const config = {
                 ${textAreaTokens.tooltipMinHeight}: 2.5rem;
                 ${textAreaTokens.tooltipBorderRadius}: 0.625rem;
 
-                ${textAreaTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${textAreaTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size);
-                ${textAreaTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${textAreaTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${textAreaTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${textAreaTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${textAreaTokens.tooltipTextFontFamily}: ${bodyS.fontFamily};
+                ${textAreaTokens.tooltipTextFontSize}: ${bodyS.fontSize};
+                ${textAreaTokens.tooltipTextFontStyle}: ${bodyS.fontStyle};
+                ${textAreaTokens.tooltipTextFontWeight}: ${bodyS.fontWeight};
+                ${textAreaTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${textAreaTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight};
 
                 ${textAreaTokens.tooltipContentLeftMargin}: 0.375rem;
 
@@ -236,12 +237,12 @@ export const config = {
                 ${textAreaTokens.tooltipMinHeight}: 2rem;
                 ${textAreaTokens.tooltipBorderRadius}: 0.5rem;
 
-                ${textAreaTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${textAreaTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${textAreaTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${textAreaTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${textAreaTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${textAreaTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily};
+                ${textAreaTokens.tooltipTextFontSize}: ${bodyXS.fontSize};
+                ${textAreaTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle};
+                ${textAreaTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight};
+                ${textAreaTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing};
+                ${textAreaTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight};
 
                 ${textAreaTokens.tooltipContentLeftMargin}: 0.25rem;
 
@@ -257,32 +258,32 @@ export const config = {
         disabled: {
             true: css`
                 ${textAreaTokens.disabledOpacity}: 1;
-                ${textAreaTokens.backgroundColor}: var(--surface-solid-primary);
-                ${textAreaTokens.borderColor}: var(--surface-solid-primary);
-                ${textAreaTokens.borderColorHover}: var(--surface-solid-primary);
-                ${textAreaTokens.borderColorFocus}: var(--surface-solid-primary);
-                ${textAreaTokens.inputColor}: var(--text-secondary);
-                ${textAreaTokens.inputColorFocus}: var(--text-secondary);
-                ${textAreaTokens.placeholderColorFocus}: var(--text-secondary);
-                ${textAreaTokens.labelOuterColor}: var(--text-primary);
-                ${textAreaTokens.inputColorDisabled}: var(--text-secondary);
+                ${textAreaTokens.backgroundColor}: ${surfaceSolidPrimary};
+                ${textAreaTokens.borderColor}: ${surfaceSolidPrimary};
+                ${textAreaTokens.borderColorHover}: ${surfaceSolidPrimary};
+                ${textAreaTokens.borderColorFocus}: ${surfaceSolidPrimary};
+                ${textAreaTokens.inputColor}: ${textSecondary};
+                ${textAreaTokens.inputColorFocus}: ${textSecondary};
+                ${textAreaTokens.placeholderColorFocus}: ${textSecondary};
+                ${textAreaTokens.labelOuterColor}: ${textPrimary};
+                ${textAreaTokens.inputColorDisabled}: ${textSecondary};
             `
         },
         readOnly: {
             true: css`
                 ${textAreaTokens.readOnlyOpacity}: 0.1;
-                ${textAreaTokens.labelOuterColor}: var(--text-secondary);
-                ${textAreaTokens.inputColorReadOnly}: var(--text-primary);
+                ${textAreaTokens.labelOuterColor}: ${textSecondary};
+                ${textAreaTokens.inputColorReadOnly}: ${textPrimary};
                 ${textAreaTokens.dividerColorReadOnly}: var(--surface-transparent-primary);
                 ${textAreaTokens.contentSlotRightOpacityReadOnly}: 0.4;
-                ${textAreaTokens.backgroundColor}: var(--surface-clear);
-                ${textAreaTokens.borderColor}: var(--surface-clear);
-                ${textAreaTokens.borderColorHover}: var(--surface-clear);
-                ${textAreaTokens.borderColorFocus}: var(--surface-clear);
-                ${textAreaTokens.inputColor}: var(--text-primary);
-                ${textAreaTokens.inputColorFocus}: var(--text-primary);
-                ${textAreaTokens.placeholderColorFocus}: var(--text-secondary);
-                ${textAreaTokens.labelOuterColor}: var(--text-secondary);
+                ${textAreaTokens.backgroundColor}: ${surfaceClear};
+                ${textAreaTokens.borderColor}: ${surfaceClear};
+                ${textAreaTokens.borderColorHover}: ${surfaceClear};
+                ${textAreaTokens.borderColorFocus}: ${surfaceClear};
+                ${textAreaTokens.inputColor}: ${textPrimary};
+                ${textAreaTokens.inputColorFocus}: ${textPrimary};
+                ${textAreaTokens.placeholderColorFocus}: ${textSecondary};
+                ${textAreaTokens.labelOuterColor}: ${textSecondary};
             `
         }
     }