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

package/dist/emotion/es/components/TextField/TextField.clear.config.js

@@ -1,3 +1,4 @@
+import { bodyM, bodyS, bodyXS, outlineSolidPrimary, outlineSolidSecondary, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCardBrightness, surfaceSolidPrimary, textAccent, textAccentActive, textAccentMinor, textNegative, textNegativeActive, textNegativeHover, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,71 +9,71 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.color}: var(--text-primary);
+                ${tokens.color}: ${textPrimary};
 
-                ${tokens.placeholderColor}: var(--text-secondary);
-                ${tokens.placeholderColorFocus}: var(--text-tertiary);
+                ${tokens.placeholderColor}: ${textSecondary};
+                ${tokens.placeholderColorFocus}: ${textTertiary};
 
                 ${tokens.backgroundColor}: transparent;
                 ${tokens.backgroundColorHover}: transparent;
                 ${tokens.backgroundColorFocus}: transparent;
-                ${tokens.caretColor}: var(--text-accent);
-                ${tokens.textBeforeColor}: var(--text-tertiary);
-                ${tokens.textAfterColor}: var(--text-tertiary);
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-secondary);
-                ${tokens.rightHelperColor}: var(--text-secondary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-
-                ${tokens.contentSlotColor}: var(--text-secondary);
-                ${tokens.contentSlotColorHover}: var(--text-secondary-hover);
-                ${tokens.contentSlotColorActive}: var(--text-secondary-active);
-                ${tokens.contentSlotRightColor}: var(--text-accent);
-                ${tokens.contentSlotRightColorHover}: var(--text-accent-minor);
-                ${tokens.contentSlotRightColorActive}: var(--text-accent-active);
-
-                ${tokens.dividerColor}: var(--outline-solid-primary);
-                ${tokens.dividerColorHover}: var(--text-secondary);
-                ${tokens.dividerColorFocus}: var(--surface-accent);
-
-                ${tokens.focusColor}: var(--text-accent);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.caretColor}: ${textAccent};
+                ${tokens.textBeforeColor}: ${textTertiary};
+                ${tokens.textAfterColor}: ${textTertiary};
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textSecondary};
+                ${tokens.rightHelperColor}: ${textSecondary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+
+                ${tokens.contentSlotColor}: ${textSecondary};
+                ${tokens.contentSlotColorHover}: ${textSecondaryHover};
+                ${tokens.contentSlotColorActive}: ${textSecondaryActive};
+                ${tokens.contentSlotRightColor}: ${textAccent};
+                ${tokens.contentSlotRightColorHover}: ${textAccentMinor};
+                ${tokens.contentSlotRightColorActive}: ${textAccentActive};
+
+                ${tokens.dividerColor}: ${outlineSolidPrimary};
+                ${tokens.dividerColorHover}: ${textSecondary};
+                ${tokens.dividerColorFocus}: ${surfaceAccent};
+
+                ${tokens.focusColor}: ${textAccent};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `,
             negative: css`
-                ${tokens.color}: var(--text-negative);
+                ${tokens.color}: ${textNegative};
 
-                ${tokens.placeholderColor}: var(--text-negative);
-                ${tokens.placeholderColorFocus}: var(--text-negative);
+                ${tokens.placeholderColor}: ${textNegative};
+                ${tokens.placeholderColorFocus}: ${textNegative};
 
                 ${tokens.backgroundColor}: transparent;
                 ${tokens.backgroundColorHover}: transparent;
                 ${tokens.backgroundColorFocus}: transparent;
-                ${tokens.caretColor}: var(--text-accent);
-                ${tokens.textBeforeColor}: var(--text-secondary);
-                ${tokens.textAfterColor}: var(--text-secondary);
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-negative);
-                ${tokens.rightHelperColor}: var(--text-negative);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-
-                ${tokens.contentSlotColor}: var(--text-negative);
-                ${tokens.contentSlotColorHover}: var(--text-negative-hover);
-                ${tokens.contentSlotColorActive}: var(--text-negative-active);
-
-                ${tokens.contentSlotRightColor}: var(--text-secondary);
-                ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover);
-                ${tokens.contentSlotRightColorActive}: var(--text-secondary-active);
-
-                ${tokens.dividerColor}: var(--surface-negative);
-                ${tokens.dividerColorHover}: var(--surface-negative);
-                ${tokens.dividerColorFocus}: var(--surface-accent);
-
-                ${tokens.focusColor}: var(--text-negative);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.caretColor}: ${textAccent};
+                ${tokens.textBeforeColor}: ${textSecondary};
+                ${tokens.textAfterColor}: ${textSecondary};
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textNegative};
+                ${tokens.rightHelperColor}: ${textNegative};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+
+                ${tokens.contentSlotColor}: ${textNegative};
+                ${tokens.contentSlotColorHover}: ${textNegativeHover};
+                ${tokens.contentSlotColorActive}: ${textNegativeActive};
+
+                ${tokens.contentSlotRightColor}: ${textSecondary};
+                ${tokens.contentSlotRightColorHover}: ${textSecondaryHover};
+                ${tokens.contentSlotRightColorActive}: ${textSecondaryActive};
+
+                ${tokens.dividerColor}: ${surfaceNegative};
+                ${tokens.dividerColorHover}: ${surfaceNegative};
+                ${tokens.dividerColorFocus}: ${surfaceAccent};
+
+                ${tokens.focusColor}: ${textNegative};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `
         },
         size: {
@@ -85,48 +86,48 @@ export const config = {
                 ${tokens.leftContentMargin}: -0.1875rem 0.25rem -0.1875rem 0;
                 ${tokens.rightContentMargin}: -0.1875rem 0 -0.1875rem 0.75rem;
 
-                ${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.labelOffset}: 0.5rem;
-                ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.labelFontFamily}: ${bodyS.fontFamily};
+                ${tokens.labelFontSize}: ${bodyS.fontSize};
+                ${tokens.labelFontStyle}: ${bodyS.fontStyle};
+                ${tokens.labelFontWeight}: ${bodyS.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.hintMargin}: -0.688rem -0.5rem;
                 ${tokens.hintTargetSize}: 2.375rem;
                 ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.1063rem auto auto;
 
                 ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
-                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-
-                ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
-                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
+                ${tokens.leftHelperFontFamily}: ${bodyS.fontFamily};
+                ${tokens.leftHelperFontSize}: ${bodyS.fontSize};
+                ${tokens.leftHelperFontStyle}: ${bodyS.fontStyle};
+                ${tokens.leftHelperFontWeight}: ${bodyS.fontWeight};
+                ${tokens.leftHelperLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.leftHelperLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.rightHelperOffset}: 0.25rem 0 0 0.25rem;
-                ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.rightHelperFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.rightHelperFontFamily}: ${bodyS.fontFamily};
+                ${tokens.rightHelperFontSize}: ${bodyS.fontSize};
+                ${tokens.rightHelperFontStyle}: ${bodyS.fontStyle};
+                ${tokens.rightHelperFontWeight}: ${bodyS.fontWeight};
+                ${tokens.rightHelperLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.rightHelperLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.labelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -141,12 +142,12 @@ export const config = {
                 ${tokens.chipClearContentMarginLeft}: 0.375rem;
                 ${tokens.chipClearContentMarginRight}: 0rem;
                 ${tokens.chipCloseIconSize}: 1rem;
-                ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.chipFontFamily}: ${bodyS.fontFamily};
+                ${tokens.chipFontSize}: ${bodyS.fontSize};
+                ${tokens.chipFontStyle}: ${bodyS.fontStyle};
+                ${tokens.chipFontWeight}: ${bodyS.fontWeight};
+                ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.chipLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.indicatorSizeInner}: 0.375rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -161,10 +162,10 @@ export const config = {
         },
         hintView: {
             default: css`
-                ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness);
+                ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness};
                 ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08));
-                ${tokens.tooltipColor}: var(--text-primary);
-                ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness);
+                ${tokens.tooltipColor}: ${textPrimary};
+                ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness};
             `
         },
         hintSize: {
@@ -177,12 +178,12 @@ export const config = {
                 ${tokens.tooltipMinHeight}: 2.5rem;
                 ${tokens.tooltipBorderRadius}: 0.625rem;
 
-                ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily};
+                ${tokens.tooltipTextFontSize}: ${bodyS.fontSize};
+                ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle};
+                ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight};
+                ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.tooltipContentLeftMargin}: 0.375rem;
 
@@ -201,12 +202,12 @@ export const config = {
                 ${tokens.tooltipMinHeight}: 2rem;
                 ${tokens.tooltipBorderRadius}: 0.5rem;
 
-                ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.tooltipContentLeftMargin}: 0.25rem;
 
@@ -220,23 +221,23 @@ export const config = {
         disabled: {
             true: css`
                 ${tokens.disabledOpacity}: 1;
-                ${tokens.dividerColor}: var(--surface-solid-primary);
-                ${tokens.dividerColorHover}: var(--surface-solid-primary);
-                ${tokens.dividerColorFocus}: var(--surface-solid-primary);
-                ${tokens.color}: var(--text-secondary);
+                ${tokens.dividerColor}: ${surfaceSolidPrimary};
+                ${tokens.dividerColorHover}: ${surfaceSolidPrimary};
+                ${tokens.dividerColorFocus}: ${surfaceSolidPrimary};
+                ${tokens.color}: ${textSecondary};
             `
         },
         readOnly: {
             true: css`
                 ${tokens.readOnlyOpacity}: 1;
-                ${tokens.colorReadOnly}: var(--text-primary);
-                ${tokens.backgroundColorReadOnly}: var(--surface-clear);
-                ${tokens.placeholderColorReadOnly}: var(--text-secondary);
-                ${tokens.leftHelperColorReadOnly}: var(--text-secondary);
-                ${tokens.rightHelperColorReadOnly}: var(--text-secondary);
-                ${tokens.titleCaptionColorReadOnly}: var(--text-secondary);
-                ${tokens.labelColorReadOnly}: var(--text-primary);
-                ${tokens.dividerColorReadOnly}: var(--outline-solid-secondary);
+                ${tokens.colorReadOnly}: ${textPrimary};
+                ${tokens.backgroundColorReadOnly}: ${surfaceClear};
+                ${tokens.placeholderColorReadOnly}: ${textSecondary};
+                ${tokens.leftHelperColorReadOnly}: ${textSecondary};
+                ${tokens.rightHelperColorReadOnly}: ${textSecondary};
+                ${tokens.titleCaptionColorReadOnly}: ${textSecondary};
+                ${tokens.labelColorReadOnly}: ${textPrimary};
+                ${tokens.dividerColorReadOnly}: ${outlineSolidSecondary};
                 ${tokens.contentSlotRightOpacityReadOnly}: 0.4;
             `
         }