@salutejs/sdds-insol-next 0.359.0 → 0.359.1-dev.0

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

@@ -0,0 +1,701 @@
+import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, outlineNegative, outlineNegativeActive, outlineNegativeHover, outlinePositive, outlinePositiveActive, outlinePositiveHover, outlineSolidSecondary, outlineTransparentPrimary, outlineTransparentPrimaryHover, outlineWarning, outlineWarningActive, outlineWarningHover, surfaceAccent, surfaceAccentGradient, surfaceNegative, surfaceSolidCard, surfaceSolidCardBrightness, surfaceSolidDefault, surfaceSolidSecondary, surfaceSolidTertiary, textAccent, textNegative, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_insol_next';
+export const config = {
+    defaults: {
+        view: 'default',
+        size: 'l',
+        sliderView: 'default'
+    },
+    variations: {
+        view: {
+            default: css`
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
+                ${tokens.textFieldCaretColor}: ${textAccent};
+                ${tokens.textFieldFocusColor}: ${textAccent};
+
+                ${tokens.textFieldErrorColor}: ${textNegative};
+                ${tokens.textFieldBackgroundErrorColor}: ${surfaceSolidCard};
+
+                ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorHover}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
+
+                ${tokens.textFieldBorderColor}: ${outlineTransparentPrimary};
+                ${tokens.textFieldBorderColorHover}: ${outlineTransparentPrimaryHover};
+                ${tokens.textFieldBorderColorFocus}: ${outlineSolidSecondary};
+
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.optionalColor}: ${textTertiary};
+
+                ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.hintIconColor}: ${textSecondary};
+
+                ${tokens.textFieldTextBeforeColor}: ${textTertiary};
+                ${tokens.textFieldTextAfterColor}: ${textTertiary};
+
+                ${tokens.textFieldContentSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};
+
+                ${tokens.textFieldContentRightSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive};
+
+                ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary};
+
+                ${tokens.sliderThumbBackground}: ${surfaceAccent};
+                ${tokens.sliderThumbBorderColor}: ${surfaceSolidCard};
+                ${tokens.sliderThumbFocusBorderColor}: ${surfaceSolidCard};
+
+                ${tokens.scaleValueColor}: ${textSecondary};
+                ${tokens.scaleTickDotColor}: ${surfaceSolidTertiary};
+            `,
+            positive: css`
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
+                ${tokens.textFieldCaretColor}: ${textAccent};
+                ${tokens.textFieldFocusColor}: ${textAccent};
+
+                ${tokens.textFieldErrorColor}: ${textNegative};
+                ${tokens.textFieldBackgroundErrorColor}: ${surfaceSolidCard};
+
+                ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorHover}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
+
+                ${tokens.textFieldBorderColor}: ${outlinePositive};
+                ${tokens.textFieldBorderColorHover}: ${outlinePositiveHover};
+                ${tokens.textFieldBorderColorFocus}: ${outlinePositiveActive};
+
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.optionalColor}: ${textTertiary};
+
+                ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.hintIconColor}: ${textSecondary};
+
+                ${tokens.textFieldTextBeforeColor}: ${textTertiary};
+                ${tokens.textFieldTextAfterColor}: ${textTertiary};
+
+                ${tokens.textFieldContentSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};
+
+                ${tokens.textFieldContentRightSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive};
+
+                ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary};
+
+                ${tokens.sliderThumbBackground}: ${surfaceAccent};
+                ${tokens.sliderThumbBorderColor}: ${surfaceSolidCard};
+                ${tokens.sliderThumbFocusBorderColor}: ${surfaceSolidCard};
+
+                ${tokens.scaleValueColor}: ${textSecondary};
+                ${tokens.scaleTickDotColor}: ${surfaceSolidTertiary};
+            `,
+            warning: css`
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
+                ${tokens.textFieldCaretColor}: ${textAccent};
+                ${tokens.textFieldFocusColor}: ${textAccent};
+
+                ${tokens.textFieldErrorColor}: ${textNegative};
+                ${tokens.textFieldBackgroundErrorColor}: ${surfaceSolidCard};
+
+                ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorHover}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
+
+                ${tokens.textFieldBorderColor}: ${outlineWarning};
+                ${tokens.textFieldBorderColorHover}: ${outlineWarningHover};
+                ${tokens.textFieldBorderColorFocus}: ${outlineWarningActive};
+
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.optionalColor}: ${textTertiary};
+
+                ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.hintIconColor}: ${textSecondary};
+
+                ${tokens.textFieldTextBeforeColor}: ${textTertiary};
+                ${tokens.textFieldTextAfterColor}: ${textTertiary};
+
+                ${tokens.textFieldContentSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};
+
+                ${tokens.textFieldContentRightSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive};
+
+                ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary};
+
+                ${tokens.sliderThumbBackground}: ${surfaceAccent};
+                ${tokens.sliderThumbBorderColor}: ${surfaceSolidCard};
+                ${tokens.sliderThumbFocusBorderColor}: ${surfaceSolidCard};
+
+                ${tokens.scaleValueColor}: ${textSecondary};
+                ${tokens.scaleTickDotColor}: ${surfaceSolidTertiary};
+            `,
+            negative: css`
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
+                ${tokens.textFieldCaretColor}: ${textAccent};
+                ${tokens.textFieldFocusColor}: ${textAccent};
+
+                ${tokens.textFieldErrorColor}: ${textNegative};
+                ${tokens.textFieldBackgroundErrorColor}: ${surfaceSolidCard};
+
+                ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorHover}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
+
+                ${tokens.textFieldBorderColor}: ${outlineNegative};
+                ${tokens.textFieldBorderColorHover}: ${outlineNegativeHover};
+                ${tokens.textFieldBorderColorFocus}: ${outlineNegativeActive};
+
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.optionalColor}: ${textTertiary};
+
+                ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.hintIconColor}: ${textSecondary};
+
+                ${tokens.textFieldTextBeforeColor}: ${textTertiary};
+                ${tokens.textFieldTextAfterColor}: ${textTertiary};
+
+                ${tokens.textFieldContentSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};
+
+                ${tokens.textFieldContentRightSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive};
+
+                ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary};
+
+                ${tokens.sliderThumbBackground}: ${surfaceAccent};
+                ${tokens.sliderThumbBorderColor}: ${surfaceSolidCard};
+                ${tokens.sliderThumbFocusBorderColor}: ${surfaceSolidCard};
+
+                ${tokens.scaleValueColor}: ${textSecondary};
+                ${tokens.scaleTickDotColor}: ${surfaceSolidTertiary};
+            `
+        },
+        sliderView: {
+            default: css`
+                ${tokens.sliderProgressBackground}: ${surfaceSolidDefault};
+                ${tokens.scaleTickDotFilledColor}: ${surfaceSolidDefault};
+            `,
+            accent: css`
+                ${tokens.sliderProgressBackground}: ${surfaceAccent};
+                ${tokens.scaleTickDotFilledColor}: ${surfaceAccent};
+            `,
+            gradient: css`
+                ${tokens.sliderProgressBackground}: ${surfaceAccentGradient};
+                ${tokens.scaleTickDotFilledColor}: ${surfaceAccentGradient};
+            `
+        },
+        size: {
+            xl: css`
+                ${tokens.textFieldHeight}: 4rem;
+                ${tokens.textFieldBorderRadius}: 1rem;
+                ${tokens.textFieldBorderWidth}: 0.0625rem;
+                ${tokens.textFieldPadding}: 1.25rem;
+
+                ${tokens.textFieldLeftContentMargin}: -0.125rem 0.625rem -0.125rem 0rem;
+                ${tokens.textFieldRightContentMargin}: -0.125rem 0rem -0.125rem 0.75rem;
+                ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
+                ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
+
+                ${tokens.textFieldFontFamily}: ${bodyL.fontFamily};
+                ${tokens.textFieldFontStyle}: ${bodyL.fontStyle};
+                ${tokens.textFieldFontSize}: ${bodyL.fontSize};
+                ${tokens.textFieldFontWeight}: ${bodyL.fontWeight};
+                ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.textFieldLineHeight}: ${bodyL.lineHeight};
+
+                ${tokens.labelOffset}: 0.75rem;
+                ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0;
+                ${tokens.contentLabelInnerPadding}: 1.8125rem 0 0.8125rem 0;
+
+                ${tokens.labelFontFamily}: ${bodyL.fontFamily};
+                ${tokens.labelFontStyle}: ${bodyL.fontStyle};
+                ${tokens.labelFontSize}: ${bodyL.fontSize};
+                ${tokens.labelFontWeight}: ${bodyL.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyL.lineHeight};
+
+                ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.indicatorSize}: 0.5rem;
+                ${tokens.indicatorSizeOuter}: 0.375rem;
+                ${tokens.indicatorPlacement}: 0 0 0 0;
+                ${tokens.indicatorOuterPlacement}: 0.5rem auto auto -0.75rem;
+                ${tokens.indicatorPlacementRight}: 0 0 auto auto;
+                ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto;
+
+                ${tokens.hintMargin}: -0.688rem -0.5rem;
+                ${tokens.hintTargetSize}: 2.375rem;
+                ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto;
+
+                ${tokens.sliderContainerOffset}: 0.25rem;
+
+                ${tokens.sliderTrackHeight}: 0.25rem;
+                ${tokens.sliderTrackBorderRadius}: 0.125rem;
+
+                ${tokens.sliderThumbWidth}: 1.5rem;
+                ${tokens.sliderThumbHeight}: 1rem;
+                ${tokens.sliderThumbBorderWidth}: 0.09375rem 0.1875rem;
+                ${tokens.sliderThumbBorderRadius}: 0.6875rem / 0.59375rem;
+                ${tokens.sliderThumbInnerContent}: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3'%3E%3Crect width='12' height='3' rx='1.5' fill='%23FFFFFF'/%3E%3C/svg%3E");
+
+                ${tokens.scaleWrapperOffset}: 0.25rem;
+                ${tokens.scaleWrapperPaddingTop}: 0.25rem;
+
+                ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.scaleValueFontSize}: ${bodyXS.fontSize};
+                ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight};
+                ${tokens.scaleTickSize}: 0.5rem;
+            `,
+            l: css`
+                ${tokens.textFieldHeight}: 3.5rem;
+                ${tokens.textFieldBorderRadius}: 0.875rem;
+                ${tokens.textFieldBorderWidth}: 0.0625rem;
+                ${tokens.textFieldPadding}: 1rem 1.125rem 1rem 1.125rem;
+
+                ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem;
+                ${tokens.textFieldRightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem;
+                ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
+                ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
+
+                ${tokens.textFieldFontFamily}: ${bodyL.fontFamily};
+                ${tokens.textFieldFontStyle}: ${bodyL.fontStyle};
+                ${tokens.textFieldFontSize}: ${bodyL.fontSize};
+                ${tokens.textFieldFontWeight}: ${bodyL.fontWeight};
+                ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.textFieldLineHeight}: ${bodyL.lineHeight};
+
+                ${tokens.labelOffset}: 0.75rem;
+                ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0;
+                ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0;
+
+                ${tokens.labelFontFamily}: ${bodyL.fontFamily};
+                ${tokens.labelFontStyle}: ${bodyL.fontStyle};
+                ${tokens.labelFontSize}: ${bodyL.fontSize};
+                ${tokens.labelFontWeight}: ${bodyL.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyL.lineHeight};
+
+                ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.indicatorSize}: 0.5rem;
+                ${tokens.indicatorSizeOuter}: 0.375rem;
+                ${tokens.indicatorPlacement}: 0 0 0 0;
+                ${tokens.indicatorOuterPlacement}: 0.375rem auto auto -0.75rem;
+                ${tokens.indicatorPlacementRight}: 0 0 auto auto;
+                ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto;
+
+                ${tokens.hintMargin}: -0.688rem -0.5rem;
+                ${tokens.hintTargetSize}: 2.375rem;
+                ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
+
+                ${tokens.sliderContainerOffset}: 0.25rem;
+
+                ${tokens.sliderTrackHeight}: 0.25rem;
+                ${tokens.sliderTrackBorderRadius}: 0.125rem;
+
+                ${tokens.sliderThumbWidth}: 1.5rem;
+                ${tokens.sliderThumbHeight}: 1rem;
+                ${tokens.sliderThumbBorderWidth}: 0.09375rem 0.1875rem;
+                ${tokens.sliderThumbBorderRadius}: 0.6875rem / 0.59375rem;
+                ${tokens.sliderThumbInnerContent}: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3'%3E%3Crect width='12' height='3' rx='1.5' fill='%23FFFFFF'/%3E%3C/svg%3E");
+
+                ${tokens.scaleWrapperOffset}: 0.25rem;
+                ${tokens.scaleWrapperPaddingTop}: 0.25rem;
+
+                ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.scaleValueFontSize}: ${bodyXS.fontSize};
+                ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight};
+                ${tokens.scaleTickSize}: 0.5rem;
+            `,
+            m: css`
+                ${tokens.textFieldHeight}: 3rem;
+                ${tokens.textFieldBorderRadius}: 0.75rem;
+                ${tokens.textFieldBorderWidth}: 0.0625rem;
+                ${tokens.textFieldPadding}: 0.75rem 0.875rem 0.75rem 0.875rem;
+
+                ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem 0rem;
+                ${tokens.textFieldRightContentMargin}: -0.125rem 0rem -0.125rem 0.625rem;
+                ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
+                ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
+
+                ${tokens.textFieldFontFamily}: ${bodyM.fontFamily};
+                ${tokens.textFieldFontStyle}: ${bodyM.fontStyle};
+                ${tokens.textFieldFontSize}: ${bodyM.fontSize};
+                ${tokens.textFieldFontWeight}: ${bodyM.fontWeight};
+                ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.textFieldLineHeight}: ${bodyM.lineHeight};
+
+                ${tokens.labelOffset}: 0.625rem;
+                ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0;
+                ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0;
+
+                ${tokens.labelFontFamily}: ${bodyM.fontFamily};
+                ${tokens.labelFontStyle}: ${bodyM.fontStyle};
+                ${tokens.labelFontSize}: ${bodyM.fontSize};
+                ${tokens.labelFontWeight}: ${bodyM.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyM.lineHeight};
+
+                ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.indicatorSize}: 0.5rem;
+                ${tokens.indicatorSizeOuter}: 0.375rem;
+                ${tokens.indicatorPlacement}: 0 0 0 0;
+                ${tokens.indicatorOuterPlacement}: 0.25rem auto auto -0.75rem;
+                ${tokens.indicatorPlacementRight}: 0 0 auto auto;
+                ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.625rem auto auto;
+
+                ${tokens.hintMargin}: -0.688rem -0.5rem;
+                ${tokens.hintTargetSize}: 2.375rem;
+                ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
+
+                ${tokens.sliderContainerOffset}: 0.25rem;
+
+                ${tokens.sliderTrackHeight}: 0.25rem;
+                ${tokens.sliderTrackBorderRadius}: 0.125rem;
+
+                ${tokens.sliderThumbWidth}: 1.5rem;
+                ${tokens.sliderThumbHeight}: 1rem;
+                ${tokens.sliderThumbBorderWidth}: 0.09375rem 0.1875rem;
+                ${tokens.sliderThumbBorderRadius}: 0.6875rem / 0.59375rem;
+                ${tokens.sliderThumbInnerContent}: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3'%3E%3Crect width='12' height='3' rx='1.5' fill='%23FFFFFF'/%3E%3C/svg%3E");
+
+                ${tokens.scaleWrapperOffset}: 0.25rem;
+                ${tokens.scaleWrapperPaddingTop}: 0.25rem;
+
+                ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.scaleValueFontSize}: ${bodyXS.fontSize};
+                ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight};
+                ${tokens.scaleTickSize}: 0.5rem;
+            `,
+            s: css`
+                ${tokens.textFieldHeight}: 2.5rem;
+                ${tokens.textFieldBorderRadius}: 0.625rem;
+                ${tokens.textFieldBorderWidth}: 0.0625rem;
+                ${tokens.textFieldPadding}: 0.5rem 0.75rem;
+
+                ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem 0rem;
+                ${tokens.textFieldRightContentMargin}: -0.1875rem 0rem -0.1875rem 0.5rem;
+                ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
+                ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
+
+                ${tokens.textFieldFontFamily}: ${bodyS.fontFamily};
+                ${tokens.textFieldFontStyle}: ${bodyS.fontStyle};
+                ${tokens.textFieldFontSize}: ${bodyS.fontSize};
+                ${tokens.textFieldFontWeight}: ${bodyS.fontWeight};
+                ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.textFieldLineHeight}: ${bodyS.lineHeight};
+
+                ${tokens.labelOffset}: 0.5rem;
+                ${tokens.labelInnerPadding}: 0.3125rem 0 0 0;
+                ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
+
+                ${tokens.labelFontFamily}: ${bodyS.fontFamily};
+                ${tokens.labelFontStyle}: ${bodyS.fontStyle};
+                ${tokens.labelFontSize}: ${bodyS.fontSize};
+                ${tokens.labelFontWeight}: ${bodyS.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyS.lineHeight};
+
+                ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.indicatorSize}: 0.375rem;
+                ${tokens.indicatorSizeOuter}: 0.375rem;
+                ${tokens.indicatorPlacement}: 0 0 0 0;
+                ${tokens.indicatorOuterPlacement}: 0.25rem auto auto -0.6875rem;
+                ${tokens.indicatorPlacementRight}: 0 0 auto auto;
+                ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.625rem auto auto;
+
+                ${tokens.hintMargin}: -0.688rem -0.5rem;
+                ${tokens.hintTargetSize}: 2.375rem;
+                ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.1875rem auto auto;
+
+                ${tokens.sliderContainerOffset}: 0.25rem;
+
+                ${tokens.sliderTrackHeight}: 0.25rem;
+                ${tokens.sliderTrackBorderRadius}: 0.125rem;
+
+                ${tokens.sliderThumbWidth}: 1.5rem;
+                ${tokens.sliderThumbHeight}: 1rem;
+                ${tokens.sliderThumbBorderWidth}: 0.09375rem 0.1875rem;
+                ${tokens.sliderThumbBorderRadius}: 0.6875rem / 0.59375rem;
+                ${tokens.sliderThumbInnerContent}: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3'%3E%3Crect width='12' height='3' rx='1.5' fill='%23FFFFFF'/%3E%3C/svg%3E");
+
+                ${tokens.scaleWrapperOffset}: 0.25rem;
+                ${tokens.scaleWrapperPaddingTop}: 0.25rem;
+
+                ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.scaleValueFontSize}: ${bodyXS.fontSize};
+                ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight};
+                ${tokens.scaleTickSize}: 0.5rem;
+            `,
+            xs: css`
+                ${tokens.textFieldHeight}: 2rem;
+                ${tokens.textFieldBorderRadius}: 0.5rem;
+                ${tokens.textFieldBorderWidth}: 0.0625rem;
+                ${tokens.textFieldPadding}: 0.5rem 0.625rem 0.5rem 0.625rem;
+
+                ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.375rem -0.0625rem 0rem;
+                ${tokens.textFieldRightContentMargin}: -0.0625rem 0rem -0.0625rem 0.625rem;
+                ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
+                ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
+
+                ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.textFieldFontSize}: ${bodyXS.fontSize};
+                ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.labelOffset}: 0.375rem;
+                ${tokens.labelInnerPadding}: 0.3125rem 0 0 0;
+                ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
+
+                ${tokens.labelFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.labelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.indicatorSize}: 0.375rem;
+                ${tokens.indicatorSizeOuter}: 0.375rem;
+                ${tokens.indicatorPlacement}: 0 0 0 0;
+                ${tokens.indicatorOuterPlacement}: 0.25rem auto auto -0.625rem;
+                ${tokens.indicatorPlacementRight}: 0 0 auto auto;
+                ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.625rem auto auto;
+
+                ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem;
+                ${tokens.hintTargetSize}: 2.375rem;
+                ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto;
+
+                ${tokens.sliderContainerOffset}: 0.25rem;
+
+                ${tokens.sliderTrackHeight}: 0.25rem;
+                ${tokens.sliderTrackBorderRadius}: 0.125rem;
+
+                ${tokens.sliderThumbWidth}: 1.5rem;
+                ${tokens.sliderThumbHeight}: 1rem;
+                ${tokens.sliderThumbBorderWidth}: 0.09375rem 0.1875rem;
+                ${tokens.sliderThumbBorderRadius}: 0.6875rem / 0.59375rem;
+                ${tokens.sliderThumbInnerContent}: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3'%3E%3Crect width='12' height='3' rx='1.5' fill='%23FFFFFF'/%3E%3C/svg%3E");
+
+                ${tokens.scaleWrapperOffset}: 0.25rem;
+                ${tokens.scaleWrapperPaddingTop}: 0.25rem;
+
+                ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.scaleValueFontSize}: ${bodyXS.fontSize};
+                ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight};
+                ${tokens.scaleTickSize}: 0.5rem;
+            `
+        },
+        hintView: {
+            default: css`
+                ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness};
+                ${tokens.hintTooltipBoxShadow}: 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.hintTooltipColor}: ${textPrimary};
+                ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness};
+            `
+        },
+        hintSize: {
+            m: css`
+                ${tokens.hintTooltipPaddingTop}: 0.6875rem;
+                ${tokens.hintTooltipPaddingRight}: 0.875rem;
+                ${tokens.hintTooltipPaddingBottom}: 0.6875rem;
+                ${tokens.hintTooltipPaddingLeft}: 0.875rem;
+
+                ${tokens.hintTooltipMinHeight}: 2.5rem;
+                ${tokens.hintTooltipBorderRadius}: 0.625rem;
+
+                ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily};
+                ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle};
+                ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize};
+                ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight};
+                ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight};
+
+                ${tokens.hintTooltipContentLeftMargin}: 0.375rem;
+
+                ${tokens.hintTooltipArrowMaskWidth}: 1.25rem;
+                ${tokens.hintTooltipArrowMaskHeight}: 1.25rem;
+                ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");
+                ${tokens.hintTooltipArrowHeight}: 0.5rem;
+                ${tokens.hintTooltipArrowEdgeMargin}: 0.625rem;
+            `,
+            s: css`
+                ${tokens.hintTooltipPaddingTop}: 0.5rem;
+                ${tokens.hintTooltipPaddingRight}: 0.75rem;
+                ${tokens.hintTooltipPaddingBottom}: 0.5rem;
+                ${tokens.hintTooltipPaddingLeft}: 0.75rem;
+
+                ${tokens.hintTooltipMinHeight}: 2rem;
+                ${tokens.hintTooltipBorderRadius}: 0.5rem;
+
+                ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.hintTooltipContentLeftMargin}: 0.25rem;
+
+                ${tokens.hintTooltipArrowMaskWidth}: 1rem;
+                ${tokens.hintTooltipArrowMaskHeight}: 1rem;
+                ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
+                ${tokens.hintTooltipArrowHeight}: 0.375rem;
+                ${tokens.hintTooltipArrowEdgeMargin}: 0.5625rem;
+            `
+        },
+        disabled: {
+            true: css`
+                ${tokens.disabledOpacity}: 0.4;
+                ${tokens.disabledBackgroundOpacity}: 1;
+                ${tokens.disabledInnerContentOpacity}: 0.4;
+            `
+        },
+        readOnly: {
+            true: css`
+                ${tokens.labelColorReadOnly}: ${textPrimary};
+                ${tokens.titleCaptionColorReadOnly}: ${textSecondary};
+
+                ${tokens.textFieldColorReadOnly}: ${textPrimary};
+                ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceSolidSecondary};
+                ${tokens.textFieldBorderColorReadOnly}: transparent;
+                ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary};
+
+                ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4;
+                ${tokens.textFieldReadOnlyOpacity}: 1;
+            `
+        }
+    }
+};