@salutejs/sdds-serv 0.355.0-next-sbcom.0 → 0.355.0

package/dist/styled-components/es/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -1,4 +1,5 @@
 import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, h1, h2, h3, h4, h5, h6, inverseTextPrimary, inverseTextSecondary, surfaceAccent, surfaceSolidCard, surfaceSolidDefault, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'divider',
@@ -7,106 +8,106 @@ 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(--text-primary);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
+                ${tabsTokens.itemSelectedDividerColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary};
 
                 ${tabsTokens.itemCursor}: 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.itemSelectedBackgroundColor}: var(--surface-solid-card);
-                ${tabsTokens.itemSelectedColorHover}: var(--text-primary);
-                ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary);
-                ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card);
+                ${tabsTokens.itemSelectedColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedValueColor}: ${textSecondary};
+                ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard};
+                ${tabsTokens.itemSelectedColorHover}: ${textPrimary};
+                ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary};
+                ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard};
                 ${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(--text-primary);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
+                ${tabsTokens.itemSelectedDividerColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary};
 
                 ${tabsTokens.itemCursor}: pointer;
             `,
             divider: 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}: 0.125rem;
-                ${tabsTokens.itemSelectedDividerColor}: var(--text-primary);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
+                ${tabsTokens.itemSelectedDividerColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary};
 
                 ${tabsTokens.itemCursor}: 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(--inverse-text-secondary);
-                ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default);
-                ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary);
-                ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary);
-                ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default);
+                ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary};
+                ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary};
+                ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault};
+                ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary};
+                ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary};
+                ${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(--text-primary);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
+                ${tabsTokens.itemSelectedDividerColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary};
 
                 ${tabsTokens.itemCursor}: pointer;
             `
@@ -122,12 +123,12 @@ export const config = {
                 ${tabsTokens.itemContentGap}: 0.25rem;
                 ${tabsTokens.itemContentPadding}: 0.125rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tabsTokens.fontFamily}: ${bodyXS.fontFamily};
+                ${tabsTokens.fontSize}: ${bodyXS.fontSize};
+                ${tabsTokens.fontStyle}: ${bodyXS.fontStyle};
+                ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight};
+                ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing};
+                ${tabsTokens.lineHeight}: ${bodyXS.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0;
             `,
@@ -141,12 +142,12 @@ export const config = {
                 ${tabsTokens.itemContentGap}: 0.25rem;
                 ${tabsTokens.itemContentPadding}: 0.125rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tabsTokens.fontFamily}: ${bodyS.fontFamily};
+                ${tabsTokens.fontSize}: ${bodyS.fontSize};
+                ${tabsTokens.fontStyle}: ${bodyS.fontStyle};
+                ${tabsTokens.fontWeight}: ${bodySBold.fontWeight};
+                ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${tabsTokens.lineHeight}: ${bodyS.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0.125rem;
             `,
@@ -160,12 +161,12 @@ export const config = {
                 ${tabsTokens.itemContentGap}: 0.375rem;
                 ${tabsTokens.itemContentPadding}: 0.125rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tabsTokens.fontFamily}: ${bodyM.fontFamily};
+                ${tabsTokens.fontSize}: ${bodyM.fontSize};
+                ${tabsTokens.fontStyle}: ${bodyM.fontStyle};
+                ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight};
+                ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${tabsTokens.lineHeight}: ${bodyM.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0.25rem;
             `,
@@ -179,12 +180,12 @@ export const config = {
                 ${tabsTokens.itemContentGap}: 0.5rem;
                 ${tabsTokens.itemContentPadding}: 0.125rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tabsTokens.fontFamily}: ${bodyL.fontFamily};
+                ${tabsTokens.fontSize}: ${bodyL.fontSize};
+                ${tabsTokens.fontStyle}: ${bodyL.fontStyle};
+                ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight};
+                ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tabsTokens.lineHeight}: ${bodyL.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0.125rem;
             `,
@@ -196,12 +197,12 @@ export const config = {
                 ${tabsTokens.itemMarginLeft}: 1.5rem;
                 ${tabsTokens.itemContentGap}: 0.625rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height);
+                ${tabsTokens.fontFamily}: ${h6.fontFamily};
+                ${tabsTokens.fontSize}: ${h6.fontSize};
+                ${tabsTokens.fontStyle}: ${h6.fontStyle};
+                ${tabsTokens.fontWeight}: ${h6.fontWeight};
+                ${tabsTokens.letterSpacing}: ${h6.letterSpacing};
+                ${tabsTokens.lineHeight}: ${h6.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: -0.125rem;
             `,
@@ -213,12 +214,12 @@ export const config = {
                 ${tabsTokens.itemMarginLeft}: 1.5rem;
                 ${tabsTokens.itemContentGap}: 0.625rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height);
+                ${tabsTokens.fontFamily}: ${h5.fontFamily};
+                ${tabsTokens.fontSize}: ${h5.fontSize};
+                ${tabsTokens.fontStyle}: ${h5.fontStyle};
+                ${tabsTokens.fontWeight}: ${h5.fontWeight};
+                ${tabsTokens.letterSpacing}: ${h5.letterSpacing};
+                ${tabsTokens.lineHeight}: ${h5.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: -0.125rem;
             `,
@@ -230,12 +231,12 @@ export const config = {
                 ${tabsTokens.itemMarginLeft}: 1.75rem;
                 ${tabsTokens.itemContentGap}: 0.625rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height);
+                ${tabsTokens.fontFamily}: ${h4.fontFamily};
+                ${tabsTokens.fontSize}: ${h4.fontSize};
+                ${tabsTokens.fontStyle}: ${h4.fontStyle};
+                ${tabsTokens.fontWeight}: ${h4.fontWeight};
+                ${tabsTokens.letterSpacing}: ${h4.letterSpacing};
+                ${tabsTokens.lineHeight}: ${h4.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: -0.125rem;
             `,
@@ -247,12 +248,12 @@ export const config = {
                 ${tabsTokens.itemMarginLeft}: 2rem;
                 ${tabsTokens.itemContentGap}: 0.75rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height);
+                ${tabsTokens.fontFamily}: ${h3.fontFamily};
+                ${tabsTokens.fontSize}: ${h3.fontSize};
+                ${tabsTokens.fontStyle}: ${h3.fontStyle};
+                ${tabsTokens.fontWeight}: ${h3.fontWeight};
+                ${tabsTokens.letterSpacing}: ${h3.letterSpacing};
+                ${tabsTokens.lineHeight}: ${h3.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: -0.125rem;
             `,
@@ -264,12 +265,12 @@ export const config = {
                 ${tabsTokens.itemMarginLeft}: 2.25rem;
                 ${tabsTokens.itemContentGap}: 0.875rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height);
+                ${tabsTokens.fontFamily}: ${h2.fontFamily};
+                ${tabsTokens.fontSize}: ${h2.fontSize};
+                ${tabsTokens.fontStyle}: ${h2.fontStyle};
+                ${tabsTokens.fontWeight}: ${h2.fontWeight};
+                ${tabsTokens.letterSpacing}: ${h2.letterSpacing};
+                ${tabsTokens.lineHeight}: ${h2.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: -0.125rem;
             `,
@@ -281,12 +282,12 @@ export const config = {
                 ${tabsTokens.itemMarginLeft}: 3.25rem;
                 ${tabsTokens.itemContentGap}: 1rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height);
+                ${tabsTokens.fontFamily}: ${h1.fontFamily};
+                ${tabsTokens.fontSize}: ${h1.fontSize};
+                ${tabsTokens.fontStyle}: ${h1.fontStyle};
+                ${tabsTokens.fontWeight}: ${h1.fontWeight};
+                ${tabsTokens.letterSpacing}: ${h1.letterSpacing};
+                ${tabsTokens.lineHeight}: ${h1.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0;
             `

package/dist/styled-components/es/components/Tabs/horizontal/HorizontalTabs.config.js

@@ -1,4 +1,5 @@
 import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { surfaceAccent, surfaceTransparentPrimary, surfaceTransparentTertiary, textSecondary, textSecondaryHover, textSecondaryActive } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'filled',
@@ -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.tabsBackgroundColor}: var(--surface-transparent-primary);
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.arrowColor}: ${textSecondary};
+                ${tabsTokens.arrowColorHover}: ${textSecondaryHover};
+                ${tabsTokens.arrowColorActive}: ${textSecondaryActive};
+                ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary};
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.tabsDividerHeight}: 0rem;
                 ${tabsTokens.tabsDividerColor}: transparent;
                 ${tabsTokens.tabsDividerBorderRadius}: 0rem;
             `,
             divider: 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}: 0.0625rem;
-                ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary);
+                ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary};
                 ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem;
             `
         },

package/dist/styled-components/es/components/Tabs/vertical/VerticalIconTabItem.config.js

@@ -1,4 +1,5 @@
 import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { surfaceAccent, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'divider',
@@ -7,22 +8,22 @@ export const config = {
     variations: {
         view: {
             divider: css`
-                ${tabsTokens.itemColor}: var(--text-secondary);
+                ${tabsTokens.itemColor}: ${textSecondary};
                 ${tabsTokens.itemBackgroundColor}: transparent;
-                ${tabsTokens.itemColorHover}: var(--text-secondary-hover);
-                ${tabsTokens.itemColorActive}: var(--text-secondary-active);
+                ${tabsTokens.itemColorHover}: ${textSecondaryHover};
+                ${tabsTokens.itemColorActive}: ${textSecondaryActive};
                 ${tabsTokens.itemBackgroundColorHover}: transparent;
-                ${tabsTokens.itemSelectedColor}: var(--text-primary);
+                ${tabsTokens.itemSelectedColor}: ${textPrimary};
                 ${tabsTokens.itemSelectedBackgroundColor}: transparent;
-                ${tabsTokens.itemSelectedColorHover}: var(--text-primary);
+                ${tabsTokens.itemSelectedColorHover}: ${textPrimary};
                 ${tabsTokens.itemSelectedBackgroundColorHover}: transparent;
                 ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
 
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.itemSelectedDividerWidth}: 0.125rem;
-                ${tabsTokens.itemSelectedDividerColor}: var(--text-primary);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
+                ${tabsTokens.itemSelectedDividerColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary};
 
                 ${tabsTokens.itemCursor}: pointer;
             `

package/dist/styled-components/es/components/Tabs/vertical/VerticalTabItem.config.js

@@ -1,4 +1,5 @@
 import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, surfaceAccent, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'divider',
@@ -7,31 +8,31 @@ export const config = {
     variations: {
         view: {
             divider: 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.itemPaddingClear}: 0;
                 ${tabsTokens.itemContentPaddingClear}: 0;
 
-                ${tabsTokens.outlineFocusColor}: var(--surface-accent);
+                ${tabsTokens.outlineFocusColor}: ${surfaceAccent};
 
                 ${tabsTokens.itemSelectedDividerWidth}: 0.125rem;
                 ${tabsTokens.itemSelectedDividerHeight}: 0.125rem;
-                ${tabsTokens.itemSelectedDividerColor}: var(--text-primary);
-                ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary);
+                ${tabsTokens.itemSelectedDividerColor}: ${textPrimary};
+                ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary};
 
                 ${tabsTokens.itemCursor}: pointer;
             `
@@ -48,12 +49,12 @@ export const config = {
                 ${tabsTokens.itemContentGap}: 0.25rem;
                 ${tabsTokens.itemContentPadding}: 0.125rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tabsTokens.fontFamily}: ${bodyXS.fontFamily};
+                ${tabsTokens.fontSize}: ${bodyXS.fontSize};
+                ${tabsTokens.fontStyle}: ${bodyXS.fontStyle};
+                ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight};
+                ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing};
+                ${tabsTokens.lineHeight}: ${bodyXS.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0;
             `,
@@ -68,12 +69,12 @@ export const config = {
                 ${tabsTokens.itemContentGap}: 0.25rem;
                 ${tabsTokens.itemContentPadding}: 0.125rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tabsTokens.fontFamily}: ${bodyS.fontFamily};
+                ${tabsTokens.fontSize}: ${bodyS.fontSize};
+                ${tabsTokens.fontStyle}: ${bodyS.fontStyle};
+                ${tabsTokens.fontWeight}: ${bodySBold.fontWeight};
+                ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${tabsTokens.lineHeight}: ${bodyS.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0.25rem;
             `,
@@ -88,12 +89,12 @@ export const config = {
                 ${tabsTokens.itemContentGap}: 0.375rem;
                 ${tabsTokens.itemContentPadding}: 0.125rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tabsTokens.fontFamily}: ${bodyM.fontFamily};
+                ${tabsTokens.fontSize}: ${bodyM.fontSize};
+                ${tabsTokens.fontStyle}: ${bodyM.fontStyle};
+                ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight};
+                ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${tabsTokens.lineHeight}: ${bodyM.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0.125rem;
             `,
@@ -108,12 +109,12 @@ export const config = {
                 ${tabsTokens.itemContentGap}: 0.5rem;
                 ${tabsTokens.itemContentPadding}: 0.125rem;
 
-                ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tabsTokens.fontFamily}: ${bodyL.fontFamily};
+                ${tabsTokens.fontSize}: ${bodyL.fontSize};
+                ${tabsTokens.fontStyle}: ${bodyL.fontStyle};
+                ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight};
+                ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tabsTokens.lineHeight}: ${bodyL.lineHeight};
 
                 ${tabsTokens.actionContentMarginLeft}: 0.125rem;
             `

package/dist/styled-components/es/components/Tabs/vertical/VerticalTabs.config.js

@@ -1,4 +1,5 @@
 import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { surfaceAccent, surfaceTransparentTertiary, textSecondary, textSecondaryHover, textSecondaryActive } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'divider',
@@ -7,15 +8,15 @@ export const config = {
     variations: {
         view: {
             divider: 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.tabsDividerWidth}: 0.0625rem;
                 ${tabsTokens.tabsDividerHeight}: 0.0625rem;
-                ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary);
+                ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary};
                 ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem;
             `
         },