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

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

@@ -1,4 +1,5 @@
 import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,7 +8,7 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.solidBackground}: var(--surface-solid-card);
+                ${tokens.solidBackground}: ${surfaceSolidCard};
             `
         },
         size: {

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

@@ -1,4 +1,5 @@
 import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+import { surfaceSolidDefault, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, surfaceTransparentTertiary, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,14 +8,14 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary);
-                ${tokens.paginationDotActiveBackground}: var(--surface-solid-default);
-                ${tokens.controlIconButtonColor}: var(--text-primary);
-                ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary);
-                ${tokens.controlIconButtonColorHover}: var(--text-primary);
-                ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${tokens.controlIconButtonColorActive}: var(--text-primary);
-                ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary};
+                ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault};
+                ${tokens.controlIconButtonColor}: ${textPrimary};
+                ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary};
+                ${tokens.controlIconButtonColorHover}: ${textPrimary};
+                ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${tokens.controlIconButtonColorActive}: ${textPrimary};
+                ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
             `
         },
         size: {

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

@@ -1,12 +1,13 @@
 import { css, cellTokens } from '@salutejs/plasma-new-hope/emotion';
+import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     variations: {
         view: {
             default: css`
-                ${cellTokens.cellColor}: var(--text-primary);
-                ${cellTokens.cellLabelColor}: var(--text-secondary);
-                ${cellTokens.cellTitleColor}: var(--text-primary);
-                ${cellTokens.cellSubtitleColor}: var(--text-secondary);
+                ${cellTokens.cellColor}: ${textPrimary};
+                ${cellTokens.cellLabelColor}: ${textSecondary};
+                ${cellTokens.cellTitleColor}: ${textPrimary};
+                ${cellTokens.cellSubtitleColor}: ${textSecondary};
                 ${cellTokens.cellBackgroundColor}: transparent;
             `
         },
@@ -22,26 +23,26 @@ export const config = {
                 ${cellTokens.cellTextboxGap}: 0.125rem;
                 ${cellTokens.cellGap}: 0.375rem;
 
-                ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size);
-                ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height);
-
-                ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size);
-                ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height);
-
-                ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily};
+                ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize};
+                ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle};
+                ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight};
+                ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing};
+                ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight};
+
+                ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily};
+                ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize};
+                ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle};
+                ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight};
+                ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing};
+                ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight};
+
+                ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily};
+                ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize};
+                ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle};
+                ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight};
+                ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing};
+                ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight};
             `,
             m: css`
                 ${cellTokens.cellWidth}: 15rem;
@@ -54,26 +55,26 @@ export const config = {
                 ${cellTokens.cellTextboxGap}: 0.125rem;
                 ${cellTokens.cellGap}: 0.5rem;
 
-                ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
-
-                ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily};
+                ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize};
+                ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle};
+                ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight};
+                ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing};
+                ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight};
+
+                ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily};
+                ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize};
+                ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle};
+                ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight};
+                ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing};
+                ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight};
+
+                ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily};
+                ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize};
+                ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle};
+                ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight};
+                ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight};
             `,
             s: css`
                 ${cellTokens.cellWidth}: 15rem;
@@ -86,26 +87,26 @@ export const config = {
                 ${cellTokens.cellTextboxGap}: 0.125rem;
                 ${cellTokens.cellGap}: 0.375rem;
 
-                ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height);
-
-                ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily};
+                ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize};
+                ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle};
+                ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight};
+                ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing};
+                ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight};
+
+                ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily};
+                ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize};
+                ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle};
+                ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight};
+                ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight};
+
+                ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily};
+                ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize};
+                ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle};
+                ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight};
+                ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight};
             `,
             xs: css`
                 ${cellTokens.cellWidth}: 15rem;
@@ -118,26 +119,26 @@ export const config = {
                 ${cellTokens.cellTextboxGap}: 0.125rem;
                 ${cellTokens.cellGap}: 0.375rem;
 
-                ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height);
-
-                ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height);
-
-                ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily};
+                ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize};
+                ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle};
+                ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight};
+                ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing};
+                ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight};
+
+                ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily};
+                ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize};
+                ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle};
+                ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight};
+                ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight};
+
+                ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily};
+                ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize};
+                ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle};
+                ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight};
+                ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight};
             `
         }
     }

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

@@ -1,4 +1,5 @@
 import { css, checkboxTokens } from '@salutejs/plasma-new-hope/emotion';
+import { bodyL, bodyM, bodyS, bodyXS, inverseTextPrimary, onDarkTextPrimary, textAccent, textNegative, textParagraph, textPositive, textPrimary, textSecondary, textTertiary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'accent',
@@ -16,18 +17,18 @@ export const config = {
                 ${checkboxTokens.contentTopOffset}: 0;
                 ${checkboxTokens.contentLeftOffset}: 0.5rem;
                 ${checkboxTokens.descriptionMarginTop}: 0.125rem;
-                ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily};
+                ${checkboxTokens.labelFontSize}: ${bodyS.fontSize};
+                ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle};
+                ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight};
+                ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing};
+                ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight};
+                ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily};
+                ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize};
+                ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle};
+                ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight};
+                ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight};
             `,
             m: css`
                 ${checkboxTokens.margin}: 0;
@@ -38,18 +39,18 @@ export const config = {
                 ${checkboxTokens.contentTopOffset}: 0.125rem;
                 ${checkboxTokens.contentLeftOffset}: 0.75rem;
                 ${checkboxTokens.descriptionMarginTop}: 0.125rem;
-                ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
-                ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
-                ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily};
+                ${checkboxTokens.labelFontSize}: ${bodyM.fontSize};
+                ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle};
+                ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight};
+                ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing};
+                ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight};
+                ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily};
+                ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize};
+                ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle};
+                ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight};
+                ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing};
+                ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight};
             `,
             l: css`
                 ${checkboxTokens.margin}: 0;
@@ -59,91 +60,91 @@ export const config = {
                 ${checkboxTokens.triggerBorderWidth}: 0.125rem;
                 ${checkboxTokens.contentTopOffset}: 0.0625rem;
                 ${checkboxTokens.contentLeftOffset}: 0.75rem;
-                ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size);
-                ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily};
+                ${checkboxTokens.labelFontSize}: ${bodyL.fontSize};
+                ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle};
+                ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight};
+                ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing};
+                ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight};
                 ${checkboxTokens.descriptionMarginTop}: 0.125rem;
-                ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size);
-                ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily};
+                ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize};
+                ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle};
+                ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight};
+                ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing};
+                ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight};
             `
         },
         view: {
             accent: css`
-                ${checkboxTokens.fillColor}: var(--text-accent);
-                ${checkboxTokens.iconColor}: var(--on-dark-text-primary);
-                ${checkboxTokens.labelColor}: var(--text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textAccent};
+                ${checkboxTokens.iconColor}: ${onDarkTextPrimary};
+                ${checkboxTokens.labelColor}: ${textPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-secondary);
+                ${checkboxTokens.triggerBorderColor}: ${textSecondary};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `,
             // deprecated
             default: css`
-                ${checkboxTokens.fillColor}: var(--text-primary);
-                ${checkboxTokens.iconColor}: var(--inverse-text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textPrimary};
+                ${checkboxTokens.iconColor}: ${inverseTextPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-secondary);
+                ${checkboxTokens.triggerBorderColor}: ${textSecondary};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `,
             // deprecated
             secondary: css`
-                ${checkboxTokens.fillColor}: var(--text-secondary);
-                ${checkboxTokens.iconColor}: var(--inverse-text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textSecondary};
+                ${checkboxTokens.iconColor}: ${inverseTextPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-secondary);
+                ${checkboxTokens.triggerBorderColor}: ${textSecondary};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `,
             // deprecated
             tertiary: css`
-                ${checkboxTokens.fillColor}: var(--text-tertiary);
-                ${checkboxTokens.iconColor}: var(--inverse-text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textTertiary};
+                ${checkboxTokens.iconColor}: ${inverseTextPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-secondary);
+                ${checkboxTokens.triggerBorderColor}: ${textSecondary};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `,
             // deprecated
             paragraph: css`
-                ${checkboxTokens.fillColor}: var(--text-paragraph);
-                ${checkboxTokens.iconColor}: var(--inverse-text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textParagraph};
+                ${checkboxTokens.iconColor}: ${inverseTextPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-secondary);
+                ${checkboxTokens.triggerBorderColor}: ${textSecondary};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `,
             // deprecated
             positive: css`
-                ${checkboxTokens.fillColor}: var(--text-positive);
-                ${checkboxTokens.iconColor}: var(--on-dark-text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textPositive};
+                ${checkboxTokens.iconColor}: ${onDarkTextPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-secondary);
+                ${checkboxTokens.triggerBorderColor}: ${textSecondary};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `,
             // deprecated
             warning: css`
-                ${checkboxTokens.fillColor}: var(--text-warning);
-                ${checkboxTokens.iconColor}: var(--on-dark-text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textWarning};
+                ${checkboxTokens.iconColor}: ${onDarkTextPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-secondary);
+                ${checkboxTokens.triggerBorderColor}: ${textSecondary};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `,
             negative: css`
-                ${checkboxTokens.fillColor}: var(--text-negative);
-                ${checkboxTokens.iconColor}: var(--on-dark-text-primary);
-                ${checkboxTokens.descriptionColor}: var(--text-secondary);
+                ${checkboxTokens.fillColor}: ${textNegative};
+                ${checkboxTokens.iconColor}: ${onDarkTextPrimary};
+                ${checkboxTokens.descriptionColor}: ${textSecondary};
                 ${checkboxTokens.triggerBackgroundColor}: transparent;
-                ${checkboxTokens.triggerBorderColor}: var(--text-negative);
+                ${checkboxTokens.triggerBorderColor}: ${textNegative};
                 ${checkboxTokens.triggerBorderCheckedColor}: transparent;
             `
         },
@@ -154,7 +155,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${checkboxTokens.focusColor}: var(--text-accent);
+                ${checkboxTokens.focusColor}: ${textAccent};
             `
         }
     }