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

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

@@ -1,3 +1,4 @@
+import { bodyL, bodyM, bodyS, bodySBold, bodyXS, bodyXSBold, onDarkTextPrimary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -15,12 +16,12 @@ export const config = {
         },
         size: {
             l: css`
-                ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.fontFamily}: ${bodyL.fontFamily};
+                ${tokens.fontSize}: ${bodyL.fontSize};
+                ${tokens.fontStyle}: ${bodyL.fontStyle};
+                ${tokens.fontWeight}: ${bodyL.fontWeight};
+                ${tokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.lineHeight}: ${bodyL.lineHeight};
 
                 ${tokens.headerRowHeight}: 3.125rem;
                 ${tokens.rowHeight}: 3.125rem;
@@ -30,9 +31,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerSize}: 1.25rem;
                 ${tokens.checkboxTriggerBorderRadius}: 0.375rem;
-                ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
-                ${tokens.checkboxFillColor}: var(--text-accent);
-                ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary);
+                ${tokens.checkboxTriggerBorderColor}: ${textSecondary};
+                ${tokens.checkboxFillColor}: ${textAccent};
+                ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary};
 
                 ${tokens.editableCellIconGap}: 0.5rem;
                 ${tokens.editableCellIconButtonWidth}: 3rem;
@@ -47,12 +48,12 @@ export const config = {
                 ${tokens.filterDividerMargin}: 0.375rem 0.75rem;
 
                 ${tokens.buttonHeight}: 2.5rem;
-                ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.buttonFontFamily}: ${bodyS.fontFamily};
+                ${tokens.buttonFontSize}: ${bodyS.fontSize};
+                ${tokens.buttonFontStyle}: ${bodyS.fontStyle};
+                ${tokens.buttonFontWeight}: ${bodySBold.fontWeight};
+                ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.buttonLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.selectPadding}: 0.125rem;
                 ${tokens.selectBorderRadius}: 0.875rem;
@@ -62,12 +63,12 @@ export const config = {
                 ${tokens.selectItemIconMargin}: 0 0.375rem 0 0;
                 ${tokens.selectItemIconSize}: 1.5rem;
                 ${tokens.selectCellPadding}: 0;
-                ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily};
+                ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize};
+                ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle};
+                ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight};
+                ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight};
                 ${tokens.selectCheckboxTriggerSize}: 1.25rem;
                 ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem;
                 ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem;
@@ -75,20 +76,20 @@ export const config = {
                 ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem;
                 ${tokens.selectControlPanelGap}: 0.5rem;
 
-                ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily};
+                ${tokens.linkButtonFontSize}: ${bodyS.fontSize};
+                ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle};
+                ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight};
+                ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight};
             `,
             m: css`
-                ${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.headerRowHeight}: 2.75rem;
                 ${tokens.rowHeight}: 2.75rem;
@@ -98,9 +99,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerSize}: 1.25rem;
                 ${tokens.checkboxTriggerBorderRadius}: 0.375rem;
-                ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
-                ${tokens.checkboxFillColor}: var(--text-accent);
-                ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary);
+                ${tokens.checkboxTriggerBorderColor}: ${textSecondary};
+                ${tokens.checkboxFillColor}: ${textAccent};
+                ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary};
 
                 ${tokens.editableCellIconGap}: 0.375rem;
                 ${tokens.editableCellIconButtonWidth}: 2.5rem;
@@ -115,12 +116,12 @@ export const config = {
                 ${tokens.filterDividerMargin}: 0.375rem 0.75rem;
 
                 ${tokens.buttonHeight}: 2rem;
-                ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.buttonFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.buttonFontSize}: ${bodyXS.fontSize};
+                ${tokens.buttonFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight};
+                ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.buttonLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.selectPadding}: 0.125rem;
                 ${tokens.selectBorderRadius}: 0.75rem;
@@ -130,12 +131,12 @@ export const config = {
                 ${tokens.selectItemIconMargin}: 0 0.375rem 0 0;
                 ${tokens.selectItemIconSize}: 1.5rem;
                 ${tokens.selectCellPadding}: 0;
-                ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily};
+                ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize};
+                ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle};
+                ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight};
+                ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight};
                 ${tokens.selectCheckboxTriggerSize}: 1.25rem;
                 ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem;
                 ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem;
@@ -143,20 +144,20 @@ export const config = {
                 ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem;
                 ${tokens.selectControlPanelGap}: 0.625rem;
 
-                ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.linkButtonFontSize}: ${bodyXS.fontSize};
+                ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight};
+                ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight};
             `,
             s: css`
-                ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.fontFamily}: ${bodyS.fontFamily};
+                ${tokens.fontSize}: ${bodyS.fontSize};
+                ${tokens.fontStyle}: ${bodyS.fontStyle};
+                ${tokens.fontWeight}: ${bodyS.fontWeight};
+                ${tokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.headerRowHeight}: 2.125rem;
                 ${tokens.rowHeight}: 2.125rem;
@@ -166,9 +167,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderCheckedColor}: transparent;
                 ${tokens.checkboxTriggerSize}: 0.875rem;
                 ${tokens.checkboxTriggerBorderRadius}: 0.25rem;
-                ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
-                ${tokens.checkboxFillColor}: var(--text-accent);
-                ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary);
+                ${tokens.checkboxTriggerBorderColor}: ${textSecondary};
+                ${tokens.checkboxFillColor}: ${textAccent};
+                ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary};
 
                 ${tokens.editableCellIconGap}: 0.25rem;
                 ${tokens.editableCellIconButtonWidth}: 2rem;
@@ -183,12 +184,12 @@ export const config = {
                 ${tokens.filterDividerMargin}: 0.25rem 0.5rem;
 
                 ${tokens.buttonHeight}: 1.5rem;
-                ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.buttonFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.buttonFontSize}: ${bodyXS.fontSize};
+                ${tokens.buttonFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight};
+                ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.buttonLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.selectPadding}: 0.125rem;
                 ${tokens.selectBorderRadius}: 0.625rem;
@@ -198,12 +199,12 @@ export const config = {
                 ${tokens.selectItemIconMargin}: 0 0.25rem 0 0;
                 ${tokens.selectItemIconSize}: 1rem;
                 ${tokens.selectCellPadding}: 0;
-                ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize};
+                ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight};
                 ${tokens.selectCheckboxTriggerSize}: 0.875rem;
                 ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem;
                 ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem;
@@ -211,12 +212,12 @@ export const config = {
                 ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem;
                 ${tokens.selectControlPanelGap}: 0.25rem;
 
-                ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.linkButtonFontSize}: ${bodyXS.fontSize};
+                ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight};
+                ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight};
             `
         }
     }

package/dist/emotion/es/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -1,3 +1,4 @@
+import { bodyM, bodyMBold, inverseTextPrimary, onDarkTextSecondary, surfaceAccent, surfaceSolidDefault, surfaceSolidDefaultHover, textAccent, textAccentActive, textAccentMinor, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, tabsTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,109 +8,109 @@ export const config = {
     variations: {
         view: {
             clear: css`
-                ${tabsTokens.itemColor}: var(--text-secondary);
-                ${tabsTokens.itemValueColor}: var(--text-tertiary);
+                ${tabsTokens.itemColor}: ${textSecondary};
+                ${tabsTokens.itemValueColor}: ${textTertiary};
                 ${tabsTokens.itemBackgroundColor}: transparent;
-                ${tabsTokens.itemColorHover}: var(--text-secondary-hover);
-                ${tabsTokens.itemValueColorHover}: var(--text-secondary);
-                ${tabsTokens.itemColorActive}: var(--text-secondary-active);
-                ${tabsTokens.itemValueColorActive}: var(--text-secondary);
+                ${tabsTokens.itemColorHover}: ${textSecondaryHover};
+                ${tabsTokens.itemValueColorHover}: ${textSecondary};
+                ${tabsTokens.itemColorActive}: ${textSecondaryActive};
+                ${tabsTokens.itemValueColorActive}: ${textSecondary};
                 ${tabsTokens.itemBackgroundColorHover}: transparent;
-                ${tabsTokens.itemSelectedColor}: var(--text-primary);
-                ${tabsTokens.itemSelectedValueColor}: var(--text-secondary);
+                ${tabsTokens.itemSelectedColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedValueColor}: ${textSecondary};
                 ${tabsTokens.itemSelectedBackgroundColor}: transparent;
-                ${tabsTokens.itemSelectedColorHover}: var(--text-primary);
-                ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary);
+                ${tabsTokens.itemSelectedColorHover}: ${textPrimary};
+                ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary};
                 ${tabsTokens.itemSelectedBackgroundColorHover}: transparent;
                 ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
 
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.itemSelectedDividerHeight}: 0rem;
-                ${tabsTokens.itemSelectedDividerColor}: var(--surface-solid-default);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--surface-solid-default-hover);
+                ${tabsTokens.itemSelectedDividerColor}: ${surfaceSolidDefault};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${surfaceSolidDefaultHover};
 
                 ${tabsTokens.itemCursor}: default;
                 ${tabsTokens.itemCursorOverNotSelected}: pointer;
             `,
             secondary: css`
-                ${tabsTokens.itemColor}: var(--text-primary);
-                ${tabsTokens.itemValueColor}: var(--text-secondary);
+                ${tabsTokens.itemColor}: ${textPrimary};
+                ${tabsTokens.itemValueColor}: ${textSecondary};
                 ${tabsTokens.itemBackgroundColor}: transparent;
-                ${tabsTokens.itemColorHover}: var(--text-secondary-hover);
-                ${tabsTokens.itemValueColorHover}: var(--text-secondary);
-                ${tabsTokens.itemColorActive}: var(--text-secondary-active);
-                ${tabsTokens.itemValueColorActive}: var(--text-secondary);
+                ${tabsTokens.itemColorHover}: ${textSecondaryHover};
+                ${tabsTokens.itemValueColorHover}: ${textSecondary};
+                ${tabsTokens.itemColorActive}: ${textSecondaryActive};
+                ${tabsTokens.itemValueColorActive}: ${textSecondary};
                 ${tabsTokens.itemBackgroundColorHover}: transparent;
-                ${tabsTokens.itemSelectedColor}: var(--text-primary);
-                ${tabsTokens.itemSelectedValueColor}: var(--text-secondary);
+                ${tabsTokens.itemSelectedColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedValueColor}: ${textSecondary};
                 ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card);
-                ${tabsTokens.itemSelectedColorHover}: var(--text-primary);
-                ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary);
+                ${tabsTokens.itemSelectedColorHover}: ${textPrimary};
+                ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary};
                 ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card);
                 ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
 
                 ${tabsTokens.itemMarginLeftFilled}: 0.125rem;
 
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.itemSelectedDividerHeight}: 0rem;
-                ${tabsTokens.itemSelectedDividerColor}: var(--surface-solid-default);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--surface-solid-default-hover);
+                ${tabsTokens.itemSelectedDividerColor}: ${surfaceSolidDefault};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${surfaceSolidDefaultHover};
 
                 ${tabsTokens.itemCursor}: default;
                 ${tabsTokens.itemCursorOverNotSelected}: pointer;
             `,
             divider: css`
-                ${tabsTokens.itemColor}: var(--text-accent);
-                ${tabsTokens.itemValueColor}: var(--text-secondary);
+                ${tabsTokens.itemColor}: ${textAccent};
+                ${tabsTokens.itemValueColor}: ${textSecondary};
                 ${tabsTokens.itemBackgroundColor}: transparent;
-                ${tabsTokens.itemColorHover}: var(--text-accent-minor);
-                ${tabsTokens.itemValueColorHover}: var(--text-secondary);
-                ${tabsTokens.itemColorActive}: var(--text-accent-active);
-                ${tabsTokens.itemValueColorActive}: var(--text-secondary);
+                ${tabsTokens.itemColorHover}: ${textAccentMinor};
+                ${tabsTokens.itemValueColorHover}: ${textSecondary};
+                ${tabsTokens.itemColorActive}: ${textAccentActive};
+                ${tabsTokens.itemValueColorActive}: ${textSecondary};
                 ${tabsTokens.itemBackgroundColorHover}: transparent;
-                ${tabsTokens.itemSelectedColor}: var(--text-primary);
-                ${tabsTokens.itemSelectedValueColor}: var(--text-secondary);
+                ${tabsTokens.itemSelectedColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedValueColor}: ${textSecondary};
                 ${tabsTokens.itemSelectedBackgroundColor}: transparent;
-                ${tabsTokens.itemSelectedColorHover}: var(--text-primary);
-                ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary);
+                ${tabsTokens.itemSelectedColorHover}: ${textPrimary};
+                ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary};
                 ${tabsTokens.itemSelectedBackgroundColorHover}: transparent;
                 ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
 
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.itemSelectedDividerHeight}: 0.125rem;
-                ${tabsTokens.itemSelectedDividerColor}: var(--surface-solid-default);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--surface-solid-default-hover);
+                ${tabsTokens.itemSelectedDividerColor}: ${surfaceSolidDefault};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${surfaceSolidDefaultHover};
 
                 ${tabsTokens.itemCursor}: default;
                 ${tabsTokens.itemCursorOverNotSelected}: pointer;
             `,
             default: css`
-                ${tabsTokens.itemColor}: var(--text-primary);
-                ${tabsTokens.itemValueColor}: var(--text-secondary);
+                ${tabsTokens.itemColor}: ${textPrimary};
+                ${tabsTokens.itemValueColor}: ${textSecondary};
                 ${tabsTokens.itemBackgroundColor}: transparent;
-                ${tabsTokens.itemColorHover}: var(--text-secondary-hover);
-                ${tabsTokens.itemValueColorHover}: var(--text-secondary);
-                ${tabsTokens.itemColorActive}: var(--text-secondary-active);
-                ${tabsTokens.itemValueColorActive}: var(--text-secondary);
+                ${tabsTokens.itemColorHover}: ${textSecondaryHover};
+                ${tabsTokens.itemValueColorHover}: ${textSecondary};
+                ${tabsTokens.itemColorActive}: ${textSecondaryActive};
+                ${tabsTokens.itemValueColorActive}: ${textSecondary};
                 ${tabsTokens.itemBackgroundColorHover}: transparent;
-                ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary);
-                ${tabsTokens.itemSelectedValueColor}: var(--on-dark-text-secondary);
-                ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default);
-                ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary);
-                ${tabsTokens.itemSelectedValueColorHover}: var(--on-dark-text-secondary);
-                ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default);
+                ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary};
+                ${tabsTokens.itemSelectedValueColor}: ${onDarkTextSecondary};
+                ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault};
+                ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary};
+                ${tabsTokens.itemSelectedValueColorHover}: ${onDarkTextSecondary};
+                ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault};
                 ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
 
                 ${tabsTokens.itemMarginLeftFilled}: 0.125rem;
 
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.itemSelectedDividerHeight}: 0rem;
-                ${tabsTokens.itemSelectedDividerColor}: var(--surface-solid-default);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--surface-solid-default-hover);
+                ${tabsTokens.itemSelectedDividerColor}: ${surfaceSolidDefault};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${surfaceSolidDefaultHover};
 
                 ${tabsTokens.itemCursor}: default;
                 ${tabsTokens.itemCursorOverNotSelected}: pointer;
@@ -126,32 +127,32 @@ export const config = {
                 ${tabsTokens.itemContentGap}: 0.25rem;
                 ${tabsTokens.itemContentPadding}: 0.125rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-bold-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-body-m-bold-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-bold-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-bold-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-bold-line-height);
+                ${tabsTokens.fontFamily}: ${bodyMBold.fontFamily};
+                ${tabsTokens.fontSize}: ${bodyMBold.fontSize};
+                ${tabsTokens.fontStyle}: ${bodyMBold.fontStyle};
+                ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight};
+                ${tabsTokens.letterSpacing}: ${bodyMBold.letterSpacing};
+                ${tabsTokens.lineHeight}: ${bodyMBold.lineHeight};
 
-                ${tabsTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tabsTokens.valueFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tabsTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tabsTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tabsTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tabsTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tabsTokens.valueFontFamily}: ${bodyM.fontFamily};
+                ${tabsTokens.valueFontSize}: ${bodyM.fontSize};
+                ${tabsTokens.valueFontStyle}: ${bodyM.fontStyle};
+                ${tabsTokens.valueFontWeight}: ${bodyM.fontWeight};
+                ${tabsTokens.valueLetterSpacing}: ${bodyM.letterSpacing};
+                ${tabsTokens.valueLineHeight}: ${bodyM.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0.125rem;
             `
         },
         disabled: {
             true: css`
-                ${tabsTokens.itemColor}: var(--text-secondary);
-                ${tabsTokens.itemValueColor}: var(--text-secondary);
-                ${tabsTokens.itemColorHover}: var(--text-secondary);
-                ${tabsTokens.itemValueColorHover}: var(--text-secondary);
-                ${tabsTokens.itemColorActive}: var(--text-secondary);
-                ${tabsTokens.itemValueColorActive}: var(--text-secondary);
-                ${tabsTokens.itemSelectedColor}: var(--text-secondary);
+                ${tabsTokens.itemColor}: ${textSecondary};
+                ${tabsTokens.itemValueColor}: ${textSecondary};
+                ${tabsTokens.itemColorHover}: ${textSecondary};
+                ${tabsTokens.itemValueColorHover}: ${textSecondary};
+                ${tabsTokens.itemColorActive}: ${textSecondary};
+                ${tabsTokens.itemValueColorActive}: ${textSecondary};
+                ${tabsTokens.itemSelectedColor}: ${textSecondary};
                 ${tabsTokens.itemSelectedDividerColor}: none;
                 ${tabsTokens.itemSelectedDividerColorHover}: none;
             `

package/dist/emotion/es/components/Tabs/horizontal/HorizontalTabs.config.js

@@ -1,3 +1,4 @@
+import { outlineSolidPrimary, surfaceAccent, textAccent, textAccentActive, textAccentMinor, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, tabsTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,36 +8,36 @@ export const config = {
     variations: {
         view: {
             clear: css`
-                ${tabsTokens.arrowColor}: var(--text-secondary);
-                ${tabsTokens.arrowColorHover}: var(--text-secondary-hover);
-                ${tabsTokens.arrowColorActive}: var(---text-secondary-active);
+                ${tabsTokens.arrowColor}: ${textSecondary};
+                ${tabsTokens.arrowColorHover}: ${textSecondaryHover};
+                ${tabsTokens.arrowColorActive}: ${textSecondaryActive};
                 ${tabsTokens.tabsBackgroundColor}: transparent;
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.tabsDividerHeight}: 0rem;
                 ${tabsTokens.tabsDividerColor}: transparent;
                 ${tabsTokens.tabsDividerBorderRadius}: 0rem;
             `,
             filled: css`
-                ${tabsTokens.arrowColor}: var(--text-secondary);
-                ${tabsTokens.arrowColorHover}: var(--text-secondary-hover);
-                ${tabsTokens.arrowColorActive}: var(---text-secondary-active);
+                ${tabsTokens.arrowColor}: ${textSecondary};
+                ${tabsTokens.arrowColorHover}: ${textSecondaryHover};
+                ${tabsTokens.arrowColorActive}: ${textSecondaryActive};
                 ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary);
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.tabsDividerHeight}: 0rem;
                 ${tabsTokens.tabsDividerColor}: transparent;
                 ${tabsTokens.tabsDividerBorderRadius}: 0rem;
             `,
             divider: css`
-                ${tabsTokens.arrowColor}: var(--text-accent);
-                ${tabsTokens.arrowColorHover}: var(--text-accent-minor);
-                ${tabsTokens.arrowColorActive}: var(--text-accent-active);
+                ${tabsTokens.arrowColor}: ${textAccent};
+                ${tabsTokens.arrowColorHover}: ${textAccentMinor};
+                ${tabsTokens.arrowColorActive}: ${textAccentActive};
                 ${tabsTokens.tabsBackgroundColor}: transparent;
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.tabsDividerHeight}: 0.0625rem;
-                ${tabsTokens.tabsDividerColor}: var(--outline-solid-primary);
+                ${tabsTokens.tabsDividerColor}: ${outlineSolidPrimary};
                 ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem;
             `
         },
@@ -112,14 +113,14 @@ export const config = {
         },
         disabled: {
             true: css`
-                ${tabsTokens.arrowColor}: var(--text-secondary);
-                ${tabsTokens.itemColor}: var(--text-secondary);
-                ${tabsTokens.itemValueColor}: var(--text-secondary);
-                ${tabsTokens.itemColorHover}: var(--text-secondary);
-                ${tabsTokens.itemValueColorHover}: var(--text-secondary);
-                ${tabsTokens.itemColorActive}: var(--text-secondary);
-                ${tabsTokens.itemValueColorActive}: var(--text-secondary);
-                ${tabsTokens.itemSelectedColor}: var(--text-secondary);
+                ${tabsTokens.arrowColor}: ${textSecondary};
+                ${tabsTokens.itemColor}: ${textSecondary};
+                ${tabsTokens.itemValueColor}: ${textSecondary};
+                ${tabsTokens.itemColorHover}: ${textSecondary};
+                ${tabsTokens.itemValueColorHover}: ${textSecondary};
+                ${tabsTokens.itemColorActive}: ${textSecondary};
+                ${tabsTokens.itemValueColorActive}: ${textSecondary};
+                ${tabsTokens.itemSelectedColor}: ${textSecondary};
                 ${tabsTokens.itemSelectedDividerColor}: none;
                 ${tabsTokens.itemSelectedDividerColorHover}: none;
                 ${tabsTokens.tabsDividerColor}: transparent;