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

package/dist/emotion/cjs/components/Calendar/CalendarDouble.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,34 +18,34 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-accent);
-                ${_emotion.calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary);
-                ${_emotion.calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-accent);
-                ${_emotion.calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--inverse-outline-solid-secondary);
+                ${_emotion.calendarDoubleTokens.calendarSelectedItemBackground}: ${_sdds_cs.surfaceAccent};
+                ${_emotion.calendarDoubleTokens.calendarSelectedItemColor}: ${_sdds_cs.inverseTextPrimary};
+                ${_emotion.calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.calendarDoubleTokens.calendarCurrentItemBorderColor}: ${_sdds_cs.inverseOutlineSolidSecondary};
                 ${_emotion.calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent;
-                ${_emotion.calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary);
-                ${_emotion.calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-accent);
-                ${_emotion.calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-accent);
-                ${_emotion.calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary);
-                ${_emotion.calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-transparent-accent);
-                ${_emotion.calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary);
-                ${_emotion.calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-accent);
-                ${_emotion.calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent);
+                ${_emotion.calendarDoubleTokens.calendarCurrentItemColorHover}: ${_sdds_cs.textPrimary};
+                ${_emotion.calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.calendarDoubleTokens.calendarActiveItemBackground}: ${_sdds_cs.surfaceAccent};
+                ${_emotion.calendarDoubleTokens.calendarActiveItemColor}: ${_sdds_cs.inverseTextPrimary};
+                ${_emotion.calendarDoubleTokens.calendarHoveredItemBackground}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.calendarDoubleTokens.calendarHoveredItemColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.calendarDoubleTokens.calendarRangeBackground}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.calendarDoubleTokens.calendarOutlineFocusColor}: ${_sdds_cs.surfaceAccent};
                 ${_emotion.calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-primary);
-                ${_emotion.calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--text-secondary);
-                ${_emotion.calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
-                ${_emotion.calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary);
-                ${_emotion.calendarDoubleTokens.calendarDayOfWeekColor}: var(--text-secondary);
-                ${_emotion.calendarDoubleTokens.calendarHeaderArrowColor}: var(--text-accent);
+                ${_emotion.calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.calendarDoubleTokens.calendarContentSecondaryColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.calendarDoubleTokens.calendarDayOfWeekColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.calendarDoubleTokens.calendarHeaderArrowColor}: ${_sdds_cs.textAccent};
                 ${_emotion.calendarDoubleTokens.calendarDisabledOpacity}: 1;
 
-                ${_emotion.calendarDoubleTokens.iconButtonColor}: var(--text-primary);
-                ${_emotion.calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);
-                ${_emotion.calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover);
-                ${_emotion.calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear);
-                ${_emotion.calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover);
-                ${_emotion.calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear);
-                ${_emotion.calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${_emotion.calendarDoubleTokens.iconButtonColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.calendarDoubleTokens.iconButtonBackgroundColor}: ${_sdds_cs.surfaceClear};
+                ${_emotion.calendarDoubleTokens.iconButtonColorHover}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.calendarDoubleTokens.iconButtonBackgroundColorHover}: ${_sdds_cs.surfaceClear};
+                ${_emotion.calendarDoubleTokens.iconButtonColorActive}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.calendarDoubleTokens.iconButtonBackgroundColorActive}: ${_sdds_cs.surfaceClear};
+                ${_emotion.calendarDoubleTokens.iconButtonFocusColor}: ${_sdds_cs.surfaceAccent};
             `
         },
         size: {
@@ -55,45 +56,45 @@ const config = {
                 ${_emotion.calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem;
                 ${_emotion.calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem;
 
-                ${_emotion.calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${_emotion.calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${_emotion.calendarDoubleTokens.calendarYearFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.calendarDoubleTokens.calendarYearFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.calendarDoubleTokens.calendarYearFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.calendarDoubleTokens.calendarYearFontLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.calendarDoubleTokens.calendarYearFontLineHeight}: ${_sdds_cs.bodyS.lineHeight};
+                ${_emotion.calendarDoubleTokens.calendarYearFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.calendarDoubleTokens.calendarYearSelectedFontWeight}: ${_sdds_cs.bodySBold.fontWeight};
 
                 ${_emotion.calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem;
                 ${_emotion.calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem;
 
-                ${_emotion.calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${_emotion.calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${_emotion.calendarDoubleTokens.calendarQuarterFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.calendarDoubleTokens.calendarQuarterFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.calendarDoubleTokens.calendarQuarterFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.calendarDoubleTokens.calendarQuarterFontLineHeight}: ${_sdds_cs.bodyS.lineHeight};
+                ${_emotion.calendarDoubleTokens.calendarQuarterFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${_sdds_cs.bodySBold.fontWeight};
 
                 ${_emotion.calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem;
                 ${_emotion.calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem;
 
-                ${_emotion.calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${_emotion.calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${_emotion.calendarDoubleTokens.calendarMonthFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.calendarDoubleTokens.calendarMonthFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.calendarDoubleTokens.calendarMonthFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.calendarDoubleTokens.calendarMonthFontLineHeight}: ${_sdds_cs.bodyS.lineHeight};
+                ${_emotion.calendarDoubleTokens.calendarMonthFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${_sdds_cs.bodySBold.fontWeight};
 
                 ${_emotion.calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem;
 
-                ${_emotion.calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${_emotion.calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${_emotion.calendarDoubleTokens.calendarDayFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.calendarDoubleTokens.calendarDayFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.calendarDoubleTokens.calendarDayFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.calendarDoubleTokens.calendarDayFontLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.calendarDoubleTokens.calendarDayFontLineHeight}: ${_sdds_cs.bodyS.lineHeight};
+                ${_emotion.calendarDoubleTokens.calendarDayFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.calendarDoubleTokens.calendarDaySelectedFontWeight}: ${_sdds_cs.bodySBold.fontWeight};
 
                 ${_emotion.calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.125rem;
 
@@ -104,13 +105,13 @@ const config = {
                 ${_emotion.calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${_emotion.calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;
 
-                ${_emotion.calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-body-m-bold-font-family);
-                ${_emotion.calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-body-m-bold-font-size);
-                ${_emotion.calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-body-m-bold-font-style);
-                ${_emotion.calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-body-m-bold-letter-spacing);
-                ${_emotion.calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-body-m-bold-line-height);
-                ${_emotion.calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight);
+                ${_emotion.calendarDoubleTokens.calendarHeaderFontFamily}: ${_sdds_cs.bodyMBold.fontFamily};
+                ${_emotion.calendarDoubleTokens.calendarHeaderFontSize}: ${_sdds_cs.bodyMBold.fontSize};
+                ${_emotion.calendarDoubleTokens.calendarHeaderFontStyle}: ${_sdds_cs.bodyMBold.fontStyle};
+                ${_emotion.calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${_sdds_cs.bodyMBold.letterSpacing};
+                ${_emotion.calendarDoubleTokens.calendarHeaderFontLineHeight}: ${_sdds_cs.bodyMBold.lineHeight};
+                ${_emotion.calendarDoubleTokens.calendarHeaderFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.calendarDoubleTokens.calendarHeaderFontWeightBold}: ${_sdds_cs.bodyMBold.fontWeight};
 
                 ${_emotion.calendarDoubleTokens.iconButtonHeight}: 2.5rem;
                 ${_emotion.calendarDoubleTokens.iconButtonWidth}: 2.5rem;

package/dist/emotion/cjs/components/Card/Card.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,7 +18,7 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.cardTokens.solidBackground}: var(--surface-solid-card);
+                ${_emotion.cardTokens.solidBackground}: ${_sdds_cs.surfaceSolidCard};
             `
         },
         size: {

package/dist/emotion/cjs/components/Carousel/Carousel.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,14 +18,14 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.carouselNewTokens.paginationDotBackground}: var(--surface-accent);
-                ${_emotion.carouselNewTokens.paginationDotActiveBackground}: var(--text-primary);
-                ${_emotion.carouselNewTokens.controlIconButtonColor}: var(--text-accent);
-                ${_emotion.carouselNewTokens.controlIconButtonBackgroundColor}: var(--surface-solid-primary);
-                ${_emotion.carouselNewTokens.controlIconButtonColorHover}: var(--text-accent-minor);
-                ${_emotion.carouselNewTokens.controlIconButtonBackgroundColorHover}: var(--surface-solid-primary-hover);
-                ${_emotion.carouselNewTokens.controlIconButtonColorActive}: var(--text-accent-active);
-                ${_emotion.carouselNewTokens.controlIconButtonBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_emotion.carouselNewTokens.paginationDotBackground}: ${_sdds_cs.surfaceAccent};
+                ${_emotion.carouselNewTokens.paginationDotActiveBackground}: ${_sdds_cs.textPrimary};
+                ${_emotion.carouselNewTokens.controlIconButtonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.carouselNewTokens.controlIconButtonBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.carouselNewTokens.controlIconButtonColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.carouselNewTokens.controlIconButtonBackgroundColorHover}: ${_sdds_cs.surfaceSolidPrimaryHover};
+                ${_emotion.carouselNewTokens.controlIconButtonColorActive}: ${_sdds_cs.textAccentActive};
+                ${_emotion.carouselNewTokens.controlIconButtonBackgroundColorActive}: ${_sdds_cs.surfaceSolidPrimaryActive};
             `
         },
         size: {

package/dist/emotion/cjs/components/Cell/Cell.config.js

@@ -8,15 +8,16 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.cellTokens.cellColor}: var(--text-primary);
-                ${_emotion.cellTokens.cellLabelColor}: var(--text-secondary);
-                ${_emotion.cellTokens.cellTitleColor}: var(--text-primary);
-                ${_emotion.cellTokens.cellSubtitleColor}: var(--text-secondary);
+                ${_emotion.cellTokens.cellColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.cellTokens.cellLabelColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.cellTokens.cellTitleColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.cellTokens.cellSubtitleColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.cellTokens.cellBackgroundColor}: transparent;
             `
         },
@@ -32,26 +33,26 @@ const config = {
                 ${_emotion.cellTokens.cellTextboxGap}: 0.125rem;
                 ${_emotion.cellTokens.cellGap}: 0.375rem;
 
-                ${_emotion.cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.cellTokens.cellLabelFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.cellTokens.cellLabelFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.cellTokens.cellLabelFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.cellTokens.cellLabelFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.cellTokens.cellLabelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.cellTokens.cellLabelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
-                ${_emotion.cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.cellTokens.cellTitleFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.cellTokens.cellTitleFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.cellTokens.cellTitleFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.cellTokens.cellTitleFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.cellTokens.cellTitleLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.cellTokens.cellTitleLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
-                ${_emotion.cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.cellTokens.cellSubtitleFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.cellTokens.cellSubtitleFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.cellTokens.cellSubtitleFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.cellTokens.cellSubtitleFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.cellTokens.cellSubtitleLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.cellTokens.cellSubtitleLineHeight}: ${_sdds_cs.bodyS.lineHeight};
             `,
             xs: (0, _emotion.css)`
                 ${_emotion.cellTokens.cellWidth}: 15rem;
@@ -64,26 +65,26 @@ const config = {
                 ${_emotion.cellTokens.cellTextboxGap}: 0.125rem;
                 ${_emotion.cellTokens.cellGap}: 0.25rem;
 
-                ${_emotion.cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.cellTokens.cellLabelFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.cellTokens.cellLabelFontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.cellTokens.cellLabelFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.cellTokens.cellLabelFontWeight}: ${_sdds_cs.bodyXS.fontWeight};
+                ${_emotion.cellTokens.cellLabelLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.cellTokens.cellLabelLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
 
-                ${_emotion.cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.cellTokens.cellTitleFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.cellTokens.cellTitleFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.cellTokens.cellTitleFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.cellTokens.cellTitleFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.cellTokens.cellTitleLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.cellTokens.cellTitleLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
-                ${_emotion.cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.cellTokens.cellSubtitleFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.cellTokens.cellSubtitleFontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.cellTokens.cellSubtitleFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.cellTokens.cellSubtitleFontWeight}: ${_sdds_cs.bodyXS.fontWeight};
+                ${_emotion.cellTokens.cellSubtitleLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.cellTokens.cellSubtitleLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
             `
         }
     }

package/dist/emotion/cjs/components/Checkbox/Checkbox.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -26,41 +27,41 @@ const config = {
                 ${_emotion.checkboxTokens.contentTopOffset}: 0rem;
                 ${_emotion.checkboxTokens.contentLeftOffset}: 0.75rem;
                 ${_emotion.checkboxTokens.descriptionMarginTop}: 0.125rem;
-                ${_emotion.checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
-                ${_emotion.checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.checkboxTokens.labelFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.checkboxTokens.labelFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.checkboxTokens.labelFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.checkboxTokens.labelFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.checkboxTokens.labelLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.checkboxTokens.labelLineHeight}: ${_sdds_cs.bodyM.lineHeight};
+                ${_emotion.checkboxTokens.descriptionFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.checkboxTokens.descriptionFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.checkboxTokens.descriptionFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.checkboxTokens.descriptionFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.checkboxTokens.descriptionLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.checkboxTokens.descriptionLineHeight}: ${_sdds_cs.bodyS.lineHeight};
             `
         },
         view: {
             accent: (0, _emotion.css)`
-                ${_emotion.checkboxTokens.fillColor}: var(--text-accent);
-                ${_emotion.checkboxTokens.iconColor}: var(--on-dark-text-primary);
-                ${_emotion.checkboxTokens.labelColor}: var(--text-primary);
-                ${_emotion.checkboxTokens.descriptionColor}: var(--text-secondary);
-                ${_emotion.checkboxTokens.triggerBorderColor}: var(--outline-accent);
+                ${_emotion.checkboxTokens.fillColor}: ${_sdds_cs.textAccent};
+                ${_emotion.checkboxTokens.iconColor}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.checkboxTokens.labelColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.checkboxTokens.descriptionColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.checkboxTokens.triggerBorderColor}: ${_sdds_cs.outlineAccent};
                 ${_emotion.checkboxTokens.triggerBackgroundColor}: transparent;
                 ${_emotion.checkboxTokens.triggerBorderCheckedColor}: transparent;
             `
         },
         disabled: {
             true: (0, _emotion.css)`
-                ${_emotion.checkboxTokens.triggerBorderColor}: var(--outline-solid-primary);
-                ${_emotion.checkboxTokens.fillColor}: var(--surface-solid-tertiary);
-                ${_emotion.checkboxTokens.labelColor}: var(--text-secondary);
+                ${_emotion.checkboxTokens.triggerBorderColor}: ${_sdds_cs.outlineSolidPrimary};
+                ${_emotion.checkboxTokens.fillColor}: ${_sdds_cs.surfaceSolidTertiary};
+                ${_emotion.checkboxTokens.labelColor}: ${_sdds_cs.textSecondary};
             `
         },
         focused: {
             true: (0, _emotion.css)`
-                ${_emotion.checkboxTokens.focusColor}: var(--text-accent);
+                ${_emotion.checkboxTokens.focusColor}: ${_sdds_cs.textAccent};
             `
         }
     }

package/dist/emotion/cjs/components/Chip/Chip.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -18,50 +19,50 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.chipTokens.color}: var(--text-primary);
-                ${_emotion.chipTokens.background}: var(--surface-solid-card);
-                ${_emotion.chipTokens.colorHover}: var(--text-primary);
-                ${_emotion.chipTokens.backgroundHover}: var(--surface-solid-card);
-                ${_emotion.chipTokens.colorActive}: var(--text-primary);
-                ${_emotion.chipTokens.backgroundActive}: var(--surface-solid-card);
-                ${_emotion.chipTokens.backgroundReadOnly}: var(--surface-solid-card);
-                ${_emotion.chipTokens.colorReadOnly}: var(--text-primary);
-                ${_emotion.chipTokens.backgroundReadOnlyHover}: var(--surface-solid-card);
-                ${_emotion.chipTokens.colorReadOnlyHover}: var(--text-primary);
-                ${_emotion.chipTokens.closeIconColor}: var(--text-accent);
-                ${_emotion.chipTokens.closeIconColorHover}: var(--text-accent-minor);
-                ${_emotion.chipTokens.leftContentColor}: var(--text-accent);
+                ${_emotion.chipTokens.color}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.background}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.chipTokens.colorHover}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.backgroundHover}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.chipTokens.colorActive}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.backgroundActive}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.chipTokens.backgroundReadOnly}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.chipTokens.colorReadOnly}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.backgroundReadOnlyHover}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.chipTokens.colorReadOnlyHover}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.closeIconColor}: ${_sdds_cs.textAccent};
+                ${_emotion.chipTokens.closeIconColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.chipTokens.leftContentColor}: ${_sdds_cs.textAccent};
             `,
             secondary: (0, _emotion.css)`
-                ${_emotion.chipTokens.color}: var(--text-primary);
-                ${_emotion.chipTokens.background}: var(--surface-solid-secondary);
-                ${_emotion.chipTokens.colorHover}: var(--text-primary);
-                ${_emotion.chipTokens.backgroundHover}: var(--surface-solid-secondary);
-                ${_emotion.chipTokens.colorActive}: var(--text-primary);
-                ${_emotion.chipTokens.backgroundActive}: var(--surface-solid-secondary);
-                ${_emotion.chipTokens.backgroundReadOnly}: var(--surface-solid-primary);
-                ${_emotion.chipTokens.colorReadOnly}: var(--text-primary);
-                ${_emotion.chipTokens.backgroundReadOnlyHover}: var(--surface-solid-primary);
-                ${_emotion.chipTokens.colorReadOnlyHover}: var(--text-primary);
-                ${_emotion.chipTokens.closeIconColor}: var(--text-accent);
-                ${_emotion.chipTokens.closeIconColorHover}: var(--text-accent-minor);
-                ${_emotion.chipTokens.leftContentColor}: var(--text-accent);
+                ${_emotion.chipTokens.color}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.background}: ${_sdds_cs.surfaceSolidSecondary};
+                ${_emotion.chipTokens.colorHover}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.backgroundHover}: ${_sdds_cs.surfaceSolidSecondary};
+                ${_emotion.chipTokens.colorActive}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.backgroundActive}: ${_sdds_cs.surfaceSolidSecondary};
+                ${_emotion.chipTokens.backgroundReadOnly}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.chipTokens.colorReadOnly}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.backgroundReadOnlyHover}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.chipTokens.colorReadOnlyHover}: ${_sdds_cs.textPrimary};
+                ${_emotion.chipTokens.closeIconColor}: ${_sdds_cs.textAccent};
+                ${_emotion.chipTokens.closeIconColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.chipTokens.leftContentColor}: ${_sdds_cs.textAccent};
             `,
             accent: (0, _emotion.css)`
-                ${_emotion.chipTokens.color}: var(--on-dark-text-primary);
-                ${_emotion.chipTokens.background}: var(--surface-accent);
-                ${_emotion.chipTokens.colorHover}: var(--on-dark-text-primary);
-                ${_emotion.chipTokens.backgroundHover}: var(--surface-accent-hover);
-                ${_emotion.chipTokens.colorActive}: var(--on-dark-text-primary);
-                ${_emotion.chipTokens.backgroundActive}: var(--surface-accent-active);
-                ${_emotion.chipTokens.backgroundReadOnly}: var(--surface-accent);
-                ${_emotion.chipTokens.colorReadOnly}: var(--on-dark-text-primary);
-                ${_emotion.chipTokens.backgroundReadOnlyHover}: var(--surface-accent);
-                ${_emotion.chipTokens.colorReadOnlyHover}: var(--on-dark-text-primary);
+                ${_emotion.chipTokens.color}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.chipTokens.background}: ${_sdds_cs.surfaceAccent};
+                ${_emotion.chipTokens.colorHover}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.chipTokens.backgroundHover}: ${_sdds_cs.surfaceAccentHover};
+                ${_emotion.chipTokens.colorActive}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.chipTokens.backgroundActive}: ${_sdds_cs.surfaceAccentActive};
+                ${_emotion.chipTokens.backgroundReadOnly}: ${_sdds_cs.surfaceAccent};
+                ${_emotion.chipTokens.colorReadOnly}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.chipTokens.backgroundReadOnlyHover}: ${_sdds_cs.surfaceAccent};
+                ${_emotion.chipTokens.colorReadOnlyHover}: ${_sdds_cs.onDarkTextPrimary};
 
-                ${_emotion.chipTokens.closeIconColor}: var(--on-dark-text-primary);
-                ${_emotion.chipTokens.closeIconColorHover}: var(--on-dark-text-primary-hover);
-                ${_emotion.chipTokens.leftContentColor}: var(--on-dark-text-primary);
+                ${_emotion.chipTokens.closeIconColor}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.chipTokens.closeIconColorHover}: ${_sdds_cs.onDarkTextPrimaryHover};
+                ${_emotion.chipTokens.leftContentColor}: ${_sdds_cs.onDarkTextPrimary};
             `
         },
         size: {
@@ -72,12 +73,12 @@ const config = {
                 ${_emotion.chipTokens.height}: 2.5rem;
                 ${_emotion.chipTokens.padding}: 0 1rem;
 
-                ${_emotion.chipTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.chipTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.chipTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.chipTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.chipTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.chipTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.chipTokens.fontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.chipTokens.fontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.chipTokens.fontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.chipTokens.fontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.chipTokens.letterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.chipTokens.lineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.chipTokens.leftContentMarginLeft}: -0.25rem;
                 ${_emotion.chipTokens.leftContentMarginRight}: 0.25rem;
@@ -94,12 +95,12 @@ const config = {
                 ${_emotion.chipTokens.height}: 1.5rem;
                 ${_emotion.chipTokens.padding}: 0.125rem 0.5rem;
 
-                ${_emotion.chipTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.chipTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.chipTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.chipTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.chipTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.chipTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.chipTokens.fontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.chipTokens.fontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.chipTokens.fontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.chipTokens.fontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.chipTokens.letterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.chipTokens.lineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
                 ${_emotion.chipTokens.leftContentMarginLeft}: 0;
                 ${_emotion.chipTokens.leftContentMarginRight}: 0.25rem;
@@ -112,7 +113,7 @@ const config = {
         },
         focused: {
             true: (0, _emotion.css)`
-                ${_emotion.chipTokens.focusColor}: var(--text-accent);
+                ${_emotion.chipTokens.focusColor}: ${_sdds_cs.textAccent};
             `
         }
     }