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

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

@@ -1,3 +1,4 @@
+import { bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, onDarkTextPrimary, onLightTextAccentMinor, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceClear, surfaceSolidPrimary, surfaceSolidPrimaryActive, surfaceSolidPrimaryHover, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textNegative, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, attachTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -9,135 +10,135 @@ export const config = {
     variations: {
         view: {
             accent: css`
-                ${attachTokens.buttonColor}: var(--on-dark-text-primary);
-                ${attachTokens.buttonValueColor}: var(--on-light-text-accent-minor);
-                ${attachTokens.buttonBackgroundColor}: var(--surface-accent);
+                ${attachTokens.buttonColor}: ${onDarkTextPrimary};
+                ${attachTokens.buttonValueColor}: ${onLightTextAccentMinor};
+                ${attachTokens.buttonBackgroundColor}: ${surfaceAccent};
                 ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor});
-                ${attachTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${attachTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${attachTokens.buttonColorHover}: ${onDarkTextPrimary};
+                ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover};
+                ${attachTokens.buttonColorActive}: ${onDarkTextPrimary};
+                ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive};
 
                 ${attachTokens.buttonDisabledOpacity}: 0.4;
-                ${attachTokens.buttonFocusColor}: var(--surface-accent);
+                ${attachTokens.buttonFocusColor}: ${surfaceAccent};
 
-                ${attachTokens.cellColor}: var(--text-primary);
-                ${attachTokens.cellLabelColor}: var(--text-secondary);
-                ${attachTokens.cellTitleColor}: var(--text-primary);
-                ${attachTokens.cellSubtitleColor}: var(--text-secondary);
+                ${attachTokens.cellColor}: ${textPrimary};
+                ${attachTokens.cellLabelColor}: ${textSecondary};
+                ${attachTokens.cellTitleColor}: ${textPrimary};
+                ${attachTokens.cellSubtitleColor}: ${textSecondary};
                 ${attachTokens.cellBackgroundColor}: transparent;
 
-                ${attachTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent);
+                ${attachTokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent};
                 ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor});
-                ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary);
-                ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary);
-                ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+                ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary};
+                ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover};
+                ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary};
+                ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive};
 
                 ${attachTokens.iconButtonDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${attachTokens.iconButtonFocusColor}: ${surfaceAccent};
 
-                ${attachTokens.iconButtonCancelColor}: var(--text-secondary);
-                ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear);
+                ${attachTokens.iconButtonCancelColor}: ${textSecondary};
+                ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear};
                 ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor});
-                ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover);
-                ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear);
-                ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active);
-                ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear);
+                ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover};
+                ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear};
+                ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive};
+                ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear};
 
                 ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
+                ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent};
             `,
             secondary: css`
-                ${attachTokens.buttonColor}: var(--text-accent);
-                ${attachTokens.buttonValueColor}: var(--text-secondary);
-                ${attachTokens.buttonBackgroundColor}: var(--surface-solid-primary);
+                ${attachTokens.buttonColor}: ${textAccent};
+                ${attachTokens.buttonValueColor}: ${textSecondary};
+                ${attachTokens.buttonBackgroundColor}: ${surfaceSolidPrimary};
                 ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor});
-                ${attachTokens.buttonColorHover}: var(--text-accent-minor);
-                ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-primary-hover);
-                ${attachTokens.buttonColorActive}: var(--text-accent-active);
-                ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${attachTokens.buttonColorHover}: ${textAccentMinor};
+                ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidPrimaryHover};
+                ${attachTokens.buttonColorActive}: ${textAccentActive};
+                ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidPrimaryActive};
 
                 ${attachTokens.buttonDisabledOpacity}: 0.4;
-                ${attachTokens.buttonFocusColor}: var(--surface-accent);
+                ${attachTokens.buttonFocusColor}: ${surfaceAccent};
 
-                ${attachTokens.cellColor}: var(--text-primary);
-                ${attachTokens.cellLabelColor}: var(--text-secondary);
-                ${attachTokens.cellTitleColor}: var(--text-primary);
-                ${attachTokens.cellSubtitleColor}: var(--text-secondary);
+                ${attachTokens.cellColor}: ${textPrimary};
+                ${attachTokens.cellLabelColor}: ${textSecondary};
+                ${attachTokens.cellTitleColor}: ${textPrimary};
+                ${attachTokens.cellSubtitleColor}: ${textSecondary};
                 ${attachTokens.cellBackgroundColor}: transparent;
 
-                ${attachTokens.iconButtonColor}: var(--text-accent);
-                ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-primary);
+                ${attachTokens.iconButtonColor}: ${textAccent};
+                ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidPrimary};
                 ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor});
-                ${attachTokens.iconButtonColorHover}: var(--text-accent-minor);
-                ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-primary-hover);
-                ${attachTokens.iconButtonColorActive}: var(--text-accent-minor);
-                ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${attachTokens.iconButtonColorHover}: ${textAccentMinor};
+                ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidPrimaryHover};
+                ${attachTokens.iconButtonColorActive}: ${textAccentMinor};
+                ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidPrimaryActive};
 
                 ${attachTokens.iconButtonDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${attachTokens.iconButtonFocusColor}: ${surfaceAccent};
 
-                ${attachTokens.iconButtonCancelColor}: var(--text-secondary);
-                ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear);
+                ${attachTokens.iconButtonCancelColor}: ${textSecondary};
+                ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear};
                 ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor});
-                ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover);
-                ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear);
-                ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active);
-                ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear);
+                ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover};
+                ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear};
+                ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive};
+                ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear};
 
                 ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
+                ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent};
             `,
             clear: css`
-                ${attachTokens.buttonColor}: var(--text-accent);
-                ${attachTokens.buttonValueColor}: var(--text-accent-minor);
-                ${attachTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${attachTokens.buttonLoadingBackgroundColor}: var(--surface-transparent-accent);
-                ${attachTokens.buttonColorHover}: var(--text-accent-minor);
-                ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-accent);
-                ${attachTokens.buttonColorActive}: var(--text-accent-active);
-                ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear);
+                ${attachTokens.buttonColor}: ${textAccent};
+                ${attachTokens.buttonValueColor}: ${textAccentMinor};
+                ${attachTokens.buttonBackgroundColor}: ${surfaceClear};
+                ${attachTokens.buttonLoadingBackgroundColor}: ${surfaceTransparentAccent};
+                ${attachTokens.buttonColorHover}: ${textAccentMinor};
+                ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentAccent};
+                ${attachTokens.buttonColorActive}: ${textAccentActive};
+                ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear};
 
                 ${attachTokens.buttonDisabledOpacity}: 0.4;
-                ${attachTokens.buttonFocusColor}: var(--surface-accent);
+                ${attachTokens.buttonFocusColor}: ${surfaceAccent};
 
-                ${attachTokens.cellColor}: var(--text-primary);
-                ${attachTokens.cellLabelColor}: var(--text-secondary);
-                ${attachTokens.cellTitleColor}: var(--text-primary);
-                ${attachTokens.cellSubtitleColor}: var(--text-secondary);
+                ${attachTokens.cellColor}: ${textPrimary};
+                ${attachTokens.cellLabelColor}: ${textSecondary};
+                ${attachTokens.cellTitleColor}: ${textPrimary};
+                ${attachTokens.cellSubtitleColor}: ${textSecondary};
                 ${attachTokens.cellBackgroundColor}: transparent;
 
-                ${attachTokens.iconButtonColor}: var(--text-accent);
-                ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear);
-                ${attachTokens.iconButtonLoadingBackgroundColor}: var(--surface-transparent-accent);
-                ${attachTokens.iconButtonColorHover}: var(--text-accent-minor);
-                ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-accent);
-                ${attachTokens.iconButtonColorActive}: var(--text-accent-active);
-                ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear);
+                ${attachTokens.iconButtonColor}: ${textAccent};
+                ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear};
+                ${attachTokens.iconButtonLoadingBackgroundColor}: ${surfaceTransparentAccent};
+                ${attachTokens.iconButtonColorHover}: ${textAccentMinor};
+                ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentAccent};
+                ${attachTokens.iconButtonColorActive}: ${textAccentActive};
+                ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear};
 
                 ${attachTokens.iconButtonDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${attachTokens.iconButtonFocusColor}: ${surfaceAccent};
 
-                ${attachTokens.iconButtonCancelColor}: var(--text-secondary);
-                ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear);
+                ${attachTokens.iconButtonCancelColor}: ${textSecondary};
+                ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear};
                 ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor});
-                ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover);
-                ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear);
-                ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active);
-                ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear);
+                ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover};
+                ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear};
+                ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive};
+                ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear};
 
                 ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
+                ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent};
             `
         },
         helperTextView: {
             default: css`
-                ${attachTokens.helperTextColor}: var(--text-secondary);
+                ${attachTokens.helperTextColor}: ${textSecondary};
             `,
             negative: css`
-                ${attachTokens.helperTextColor}: var(--text-negative);
+                ${attachTokens.helperTextColor}: ${textNegative};
             `
         },
         size: {
@@ -151,12 +152,12 @@ export const config = {
                 ${attachTokens.buttonWidth}: 11.25rem;
                 ${attachTokens.buttonPadding}: 1rem;
                 ${attachTokens.buttonRadius}: 0.625rem;
-                ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily};
+                ${attachTokens.buttonFontSize}: ${bodyM.fontSize};
+                ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle};
+                ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight};
+                ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing};
+                ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight};
 
                 ${attachTokens.buttonSpinnerSize}: 1.375rem;
                 ${attachTokens.buttonSpinnerColor}: inherit;
@@ -175,37 +176,37 @@ export const config = {
                 ${attachTokens.cellTextboxGap}: 0.125rem;
                 ${attachTokens.cellGap}: 0.375rem;
 
-                ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
-
-                ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily};
+                ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize};
+                ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle};
+                ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight};
+                ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing};
+                ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight};
+
+                ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily};
+                ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize};
+                ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle};
+                ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight};
+                ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing};
+                ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight};
+
+                ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily};
+                ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize};
+                ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle};
+                ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight};
+                ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight};
 
                 ${attachTokens.iconButtonHeight}: 2.5rem;
                 ${attachTokens.iconButtonWidth}: 2.5rem;
                 ${attachTokens.iconButtonPadding}: 1rem;
                 ${attachTokens.iconButtonRadius}: 0.625rem;
-                ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily};
+                ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize};
+                ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle};
+                ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight};
+                ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing};
+                ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight};
 
                 ${attachTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${attachTokens.iconButtonSpinnerColor}: inherit;
@@ -214,12 +215,12 @@ export const config = {
                 ${attachTokens.iconButtonCancelWidth}: 2rem;
                 ${attachTokens.iconButtonCancelPadding}: 0.75rem;
                 ${attachTokens.iconButtonCancelRadius}: 0.5rem;
-                ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily};
+                ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize};
+                ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle};
+                ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight};
+                ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing};
+                ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight};
 
                 ${attachTokens.iconButtonCancelSpinnerSize}: 1rem;
                 ${attachTokens.iconButtonCancelSpinnerColor}: inherit;