npm - @salutejs/sdds-serv - Versions diffs - 0.355.0-next-sbcom.0 → 0.355.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1094) hide show

package/dist/styled-components/cjs/components/Rating/Rating.config.js CHANGED Viewed

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_serv = require("@salutejs/sdds-themes/tokens/sdds_serv");
 const config = {
     defaults: {
         view: 'default',
@@ -17,36 +18,36 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.ratingTokens.color}: var(--text-primary);
-                ${_styledcomponents.ratingTokens.helperTextColor}: var(--text-secondary);
-                ${_styledcomponents.ratingTokens.iconColor}: var(--text-primary);
-                ${_styledcomponents.ratingTokens.outlineIconColor}: var(--text-primary);
+                ${_styledcomponents.ratingTokens.color}: ${_sdds_serv.textPrimary};
+                ${_styledcomponents.ratingTokens.helperTextColor}: ${_sdds_serv.textSecondary};
+                ${_styledcomponents.ratingTokens.iconColor}: ${_sdds_serv.textPrimary};
+                ${_styledcomponents.ratingTokens.outlineIconColor}: ${_sdds_serv.textPrimary};
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.ratingTokens.color}: var(--text-primary);
-                ${_styledcomponents.ratingTokens.helperTextColor}: var(--text-secondary);
+                ${_styledcomponents.ratingTokens.color}: ${_sdds_serv.textPrimary};
+                ${_styledcomponents.ratingTokens.helperTextColor}: ${_sdds_serv.textSecondary};
                 // TODO: change with token data-yellow, when it will be added to theme
                 ${_styledcomponents.ratingTokens.iconColor}: #F3A912;
-                ${_styledcomponents.ratingTokens.outlineIconColor}: var(--text-tertiary);
+                ${_styledcomponents.ratingTokens.outlineIconColor}: ${_sdds_serv.textTertiary};
             `
         },
         size: {
             l: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.bodyL.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.bodyL.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.bodyL.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.bodyLBold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.bodyL.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.bodyL.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyXS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyXS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyXS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyXS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyXS.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 0.625rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.25rem;
@@ -57,19 +58,19 @@ const config = {
             m: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.bodyM.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.bodyM.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.bodyM.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.bodyMBold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.bodyM.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.bodyM.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyXS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyXS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyXS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyXS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyXS.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 0.5rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.25rem;
@@ -80,19 +81,19 @@ const config = {
             s: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.bodyS.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.bodyS.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.bodyS.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.bodySBold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.bodyS.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.bodyS.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyXS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyXS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyXS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyXS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyXS.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 0.5rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.25rem;
@@ -103,19 +104,19 @@ const config = {
             xs: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.bodyXS.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.bodyXS.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.bodyXS.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.bodyXSBold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.bodyXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.bodyXS.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyXXS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyXXS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyXXS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyXXS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyXXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyXXS.lineHeight};
                 ${_styledcomponents.ratingTokens.iconMarginBottom}: 0.125rem;
                 ${_styledcomponents.ratingTokens.contentGap}: 0.375rem;
@@ -130,19 +131,19 @@ const config = {
             xxs: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.bodyXXS.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.bodyXXS.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.bodyXXS.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.bodyXXSBold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.bodyXXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.bodyXXS.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyXXS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyXXS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyXXS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyXXS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyXXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyXXS.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 0.375rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.25rem;
@@ -155,19 +156,19 @@ const config = {
             h1: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-h1-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-h1-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-h1-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-h1-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.h1.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.h1.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.h1.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.h1Bold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.h1.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.h1.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyM.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyM.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyM.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyM.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyM.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyM.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 1rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.5rem;
@@ -186,19 +187,19 @@ const config = {
             h2: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-h2-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-h2-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-h2-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-h2-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.h2.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.h2.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.h2.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.h2Bold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.h2.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.h2.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyS.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 0.875rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.5rem;
@@ -217,19 +218,19 @@ const config = {
             h3: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-h3-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-h3-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-h3-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-h3-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.h3.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.h3.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.h3.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.h3Bold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.h3.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.h3.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyXS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyXS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyXS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyXS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyXS.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 0.75rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.375rem;
@@ -248,19 +249,19 @@ const config = {
             h4: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-h4-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-h4-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-h4-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-h4-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.h4.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.h4.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.h4.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.h4Bold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.h4.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.h4.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyXS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyXS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyXS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyXS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyXS.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 0.625rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.25rem;
@@ -279,19 +280,19 @@ const config = {
             h5: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-h5-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-h5-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-h5-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-h5-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.h5.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.h5.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.h5.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.h5Bold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.h5.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.h5.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyXS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyXS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyXS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyXS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyXS.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 0.625rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.25rem;
@@ -310,19 +311,19 @@ const config = {
             h6: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.25rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-h6-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-h6-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-h6-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-h6-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.h6.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.h6.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.h6.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.h6Bold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.h6.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.h6.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyXS.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyXS.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyXS.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyXS.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyXS.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyXS.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 0.625rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.25rem;
@@ -341,19 +342,19 @@ const config = {
             displayL: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.375rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-dspl-l-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-dspl-l-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-dspl-l-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.dsplL.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.dsplL.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.dsplL.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.dsplLBold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.dsplL.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.dsplL.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-h3-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.h3.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.h3.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.h3.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.h3.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.h3.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.h3.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 1.5rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.75rem;
@@ -372,19 +373,19 @@ const config = {
             displayM: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.375rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-dspl-m-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-dspl-m-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-dspl-m-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.dsplM.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.dsplM.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.dsplM.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.dsplMBold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.dsplM.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.dsplM.lineHeight};
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyL.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyL.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyL.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyL.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyL.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyL.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 1.5rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.75rem;
@@ -403,19 +404,19 @@ const config = {
             displayS: (0, _styledcomponents.css)`
                 ${_styledcomponents.ratingTokens.gap}: 0.375rem;
-                ${_styledcomponents.ratingTokens.fontFamily}: var(--plasma-typo-dspl-s-font-family);
-                ${_styledcomponents.ratingTokens.fontSize}: var(--plasma-typo-dspl-s-font-size);
-                ${_styledcomponents.ratingTokens.fontStyle}: var(--plasma-typo-dspl-s-font-style);
-                ${_styledcomponents.ratingTokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight);
-                ${_styledcomponents.ratingTokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing);
-                ${_styledcomponents.ratingTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height);
-                ${_styledcomponents.ratingTokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.ratingTokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.ratingTokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.ratingTokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.ratingTokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.ratingTokens.fontFamily}: ${_sdds_serv.dsplS.fontFamily};
+                ${_styledcomponents.ratingTokens.fontSize}: ${_sdds_serv.dsplS.fontSize};
+                ${_styledcomponents.ratingTokens.fontStyle}: ${_sdds_serv.dsplS.fontStyle};
+                ${_styledcomponents.ratingTokens.fontWeight}: ${_sdds_serv.dsplSBold.fontWeight};
+                ${_styledcomponents.ratingTokens.letterSpacing}: ${_sdds_serv.dsplS.letterSpacing};
+                ${_styledcomponents.ratingTokens.lineHeight}: ${_sdds_serv.dsplS.lineHeight};
+                ${_styledcomponents.ratingTokens.helperTextFontFamily}: ${_sdds_serv.bodyL.fontFamily};
+                ${_styledcomponents.ratingTokens.helperTextFontSize}: ${_sdds_serv.bodyL.fontSize};
+                ${_styledcomponents.ratingTokens.helperTextFontStyle}: ${_sdds_serv.bodyL.fontStyle};
+                ${_styledcomponents.ratingTokens.helperTextFontWeight}: ${_sdds_serv.bodyL.fontWeight};
+                ${_styledcomponents.ratingTokens.helperTextLetterSpacing}: ${_sdds_serv.bodyL.letterSpacing};
+                ${_styledcomponents.ratingTokens.helperTextLineHeight}: ${_sdds_serv.bodyL.lineHeight};
                 ${_styledcomponents.ratingTokens.contentGap}: 1.5rem;
                 ${_styledcomponents.ratingTokens.singleIconContentGap}: 0.75rem;

package/dist/styled-components/cjs/components/Scrollbar/Scrollbar.config.js CHANGED Viewed

@@ -8,13 +8,14 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_serv = require("@salutejs/sdds-themes/tokens/sdds_serv");
 const config = {
     view: {
         default: {
-            trackColor: 'var(--surface-transparent-primary)',
-            thumbColor: 'var(--surface-transparent-tertiary)',
-            thumbHoverColor: 'var(--surface-transparent-tertiary-hover)',
-            thumbActiveColor: 'var(--surface-transparent-tertiary-active)'
+            trackColor: `${_sdds_serv.surfaceTransparentPrimary}`,
+            thumbColor: `${_sdds_serv.surfaceTransparentTertiary}`,
+            thumbHoverColor: `${_sdds_serv.surfaceTransparentTertiaryHover}`,
+            thumbActiveColor: `${_sdds_serv.surfaceTransparentTertiaryActive}`
         }
     },
     size: {

package/dist/styled-components/cjs/components/Segment/SegmentGroup.config.js CHANGED Viewed

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_serv = require("@salutejs/sdds-themes/tokens/sdds_serv");
 const config = {
     defaults: {
         view: 'clear',
@@ -17,14 +18,14 @@ const config = {
     variations: {
         view: {
             clear: (0, _styledcomponents.css)`
-                ${_styledcomponents.segmentTokens.arrowColor}: var(--text-secondary);
+                ${_styledcomponents.segmentTokens.arrowColor}: ${_sdds_serv.textSecondary};
                 ${_styledcomponents.segmentTokens.groupBackgroundColor}: transparent;
-                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
+                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: ${_sdds_serv.textAccent};
             `,
             filled: (0, _styledcomponents.css)`
-                ${_styledcomponents.segmentTokens.arrowColor}: var(--text-secondary);
+                ${_styledcomponents.segmentTokens.arrowColor}: ${_sdds_serv.textSecondary};
                 ${_styledcomponents.segmentTokens.groupBackgroundColor}: transparent;
-                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
+                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: ${_sdds_serv.textAccent};
             `
         },
         size: {
@@ -83,7 +84,7 @@ const config = {
         },
         filledBackground: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary);
+                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: ${_sdds_serv.surfaceTransparentSecondary};
             `
         },
         orientation: {