diff --git a/packages/sdds-netology/src/components/Accordion/Accordion.config.ts b/packages/sdds-netology/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..d2c6d37515d 100644 --- a/packages/sdds-netology/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-netology/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +36,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +49,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +67,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +88,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +109,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +130,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +151,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +172,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +192,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +212,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -207,19 +232,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Attach/Attach.config.ts b/packages/sdds-netology/src/components/Attach/Attach.config.ts index b62ab061eec..f44c5323652 100644 --- a/packages/sdds-netology/src/components/Attach/Attach.config.ts +++ b/packages/sdds-netology/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-netology/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-netology/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..756159b66d0 100644 --- a/packages/sdds-netology/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-netology/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Badge/Badge.config.ts b/packages/sdds-netology/src/components/Badge/Badge.config.ts index 3d8e8df196e..7ed52a240c7 100644 --- a/packages/sdds-netology/src/components/Badge/Badge.config.ts +++ b/packages/sdds-netology/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-netology/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-netology/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..9ad3d874083 100644 --- a/packages/sdds-netology/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-netology/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Button/Button.config.ts b/packages/sdds-netology/src/components/Button/Button.config.ts index 5d4e666a7b9..575cb4b211a 100644 --- a/packages/sdds-netology/src/components/Button/Button.config.ts +++ b/packages/sdds-netology/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +53,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -115,12 +159,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -136,12 +180,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -157,12 +201,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -178,12 +222,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -199,12 +243,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -220,12 +264,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -244,7 +288,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-netology/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-netology/src/components/ButtonGroup/ButtonGroup.config.ts index 38cdcc186d3..23aa75f4cb0 100644 --- a/packages/sdds-netology/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-netology/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -150,12 +198,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -207,12 +255,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-netology/src/components/Calendar/Calendar.config.ts b/packages/sdds-netology/src/components/Calendar/Calendar.config.ts index fc0a15388db..a79fdb1d1f4 100644 --- a/packages/sdds-netology/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-netology/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-netology/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-netology/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..02dc74fb697 100644 --- a/packages/sdds-netology/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-netology/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-netology/src/components/Card/Card.config.ts b/packages/sdds-netology/src/components/Card/Card.config.ts index 2899613fb13..a71153915cc 100644 --- a/packages/sdds-netology/src/components/Card/Card.config.ts +++ b/packages/sdds-netology/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-netology/src/components/Carousel/Carousel.config.ts b/packages/sdds-netology/src/components/Carousel/Carousel.config.ts index f3fd82e4491..f333008d0bf 100644 --- a/packages/sdds-netology/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-netology/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,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: { diff --git a/packages/sdds-netology/src/components/Cell/Cell.config.ts b/packages/sdds-netology/src/components/Cell/Cell.config.ts index 6588088c11f..77ecbee5e70 100644 --- a/packages/sdds-netology/src/components/Cell/Cell.config.ts +++ b/packages/sdds-netology/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; 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; `, }, @@ -23,26 +24,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; @@ -55,26 +56,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; @@ -87,26 +88,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; @@ -119,26 +120,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}; `, }, }, diff --git a/packages/sdds-netology/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-netology/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..54cbb14b69d 100644 --- a/packages/sdds-netology/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-netology/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,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; @@ -39,18 +55,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; @@ -60,91 +76,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; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-netology/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..690d82af44e 100644 --- a/packages/sdds-netology/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-netology/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-netology/src/components/CodeField/CodeField.config.ts b/packages/sdds-netology/src/components/CodeField/CodeField.config.ts index d0109404d66..d6b96618fc3 100644 --- a/packages/sdds-netology/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-netology/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/sdds-netology/src/components/Combobox/Combobox.config.ts b/packages/sdds-netology/src/components/Combobox/Combobox.config.ts index 9b023838c5d..eab31c4dc9d 100644 --- a/packages/sdds-netology/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-netology/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Counter/Counter.config.ts b/packages/sdds-netology/src/components/Counter/Counter.config.ts index 140aa43a57f..0c0fdf42446 100644 --- a/packages/sdds-netology/src/components/Counter/Counter.config.ts +++ b/packages/sdds-netology/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-netology/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..233efa22b22 100644 --- a/packages/sdds-netology/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-netology/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-netology/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-netology/src/components/DatePicker/DatePicker.config.ts index aba695d13e2..e9d253bcb91 100644 --- a/packages/sdds-netology/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-netology/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +51,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -165,30 +207,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -206,46 +248,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -256,25 +298,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -285,12 +327,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -300,12 +342,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -335,30 +377,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,46 +418,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -426,25 +468,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -455,12 +497,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -470,12 +512,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -505,30 +547,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -546,46 +588,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -596,25 +638,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -625,12 +667,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -640,12 +682,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -675,30 +717,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -716,46 +758,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -766,25 +808,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -795,12 +837,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -810,12 +852,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -845,30 +887,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -886,46 +928,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -936,25 +978,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -971,12 +1013,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -985,7 +1027,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -996,12 +1038,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1010,15 +1052,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1031,12 +1073,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1055,12 +1097,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1078,16 +1120,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-netology/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-netology/src/components/DateTimePicker/DateTimePicker.config.ts index aff7ad16593..3d1f1fa8524 100644 --- a/packages/sdds-netology/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-netology/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,89 +50,89 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -104,30 +146,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -137,12 +179,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.popoverBorderRadius}: 0.875rem; ${tokens.popoverGap}: 1.125rem; @@ -155,46 +197,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -205,13 +247,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -224,21 +266,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -254,30 +296,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -287,12 +329,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.popoverBorderRadius}: 0.875rem; ${tokens.popoverGap}: 1rem; @@ -305,46 +347,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -355,13 +397,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -374,21 +416,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -404,30 +446,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -437,12 +479,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.popoverBorderRadius}: 0.75rem; ${tokens.popoverGap}: 1rem; @@ -455,46 +497,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -505,13 +547,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -524,21 +566,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -554,30 +596,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -587,12 +629,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.popoverBorderRadius}: 0.625rem; ${tokens.popoverGap}: 0.875rem; @@ -605,46 +647,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -655,13 +697,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -674,21 +716,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -704,30 +746,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -737,12 +779,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.popoverBorderRadius}: 0.5rem; ${tokens.popoverGap}: 0.75rem; @@ -755,46 +797,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -805,13 +847,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -824,21 +866,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -855,12 +897,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -869,7 +911,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -880,12 +922,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -894,7 +936,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -904,12 +946,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-netology/src/components/Divider/Divider.config.ts b/packages/sdds-netology/src/components/Divider/Divider.config.ts index df0449d5c06..6dbbf4df60c 100644 --- a/packages/sdds-netology/src/components/Divider/Divider.config.ts +++ b/packages/sdds-netology/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-netology/src/components/Drawer/Drawer.config.ts b/packages/sdds-netology/src/components/Drawer/Drawer.config.ts index b0b00b15040..d5b00bec29e 100644 --- a/packages/sdds-netology/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-netology/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-netology/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-netology/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..443b0027ea9 100644 --- a/packages/sdds-netology/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-netology/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-netology/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..b1acc17d9ef 100644 --- a/packages/sdds-netology/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-netology/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-netology/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-netology/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..7bbb99b8b26 100644 --- a/packages/sdds-netology/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-netology/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-netology/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..a342d53bbc6 100644 --- a/packages/sdds-netology/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-netology/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/File/File.config.ts b/packages/sdds-netology/src/components/File/File.config.ts index 455a87f891b..07d42b7781c 100644 --- a/packages/sdds-netology/src/components/File/File.config.ts +++ b/packages/sdds-netology/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/sdds-netology/src/components/IconButton/IconButton.config.ts b/packages/sdds-netology/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..fa898e69464 100644 --- a/packages/sdds-netology/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-netology/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-netology/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..8455c7077c7 100644 --- a/packages/sdds-netology/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-netology/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-netology/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-netology/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..14ee9919f4b 100644 --- a/packages/sdds-netology/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-netology/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-netology/src/components/List/List.config.ts b/packages/sdds-netology/src/components/List/List.config.ts index b0a7acc37b0..88cbba4349d 100644 --- a/packages/sdds-netology/src/components/List/List.config.ts +++ b/packages/sdds-netology/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-netology/src/components/Loader/Loader.config.ts b/packages/sdds-netology/src/components/Loader/Loader.config.ts index 25fef650be1..0826d08735d 100644 --- a/packages/sdds-netology/src/components/Loader/Loader.config.ts +++ b/packages/sdds-netology/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/sdds-netology/src/components/Modal/Modal.config.ts b/packages/sdds-netology/src/components/Modal/Modal.config.ts index 8b107b98ea3..df83a48a53d 100644 --- a/packages/sdds-netology/src/components/Modal/Modal.config.ts +++ b/packages/sdds-netology/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/Note/Note.config.ts b/packages/sdds-netology/src/components/Note/Note.config.ts index ee26ef2fea1..0bafc6e378c 100644 --- a/packages/sdds-netology/src/components/Note/Note.config.ts +++ b/packages/sdds-netology/src/components/Note/Note.config.ts @@ -1,3 +1,23 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textWarning, + textXS, + textXSBold, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +28,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -46,19 +66,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -72,19 +92,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -98,19 +118,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -124,19 +144,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Notification/Notification.config.ts b/packages/sdds-netology/src/components/Notification/Notification.config.ts index 3963e77e1e2..fabaa4624e5 100644 --- a/packages/sdds-netology/src/components/Notification/Notification.config.ts +++ b/packages/sdds-netology/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-netology/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-netology/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..cb9b83a0348 100644 --- a/packages/sdds-netology/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-netology/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-netology/src/components/Pagination/Pagination.config.ts b/packages/sdds-netology/src/components/Pagination/Pagination.config.ts index 5b9af725836..43d506508d9 100644 --- a/packages/sdds-netology/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-netology/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/sdds-netology/src/components/Popover/Popover.config.ts b/packages/sdds-netology/src/components/Popover/Popover.config.ts index 2f9acaf14e8..9139b3c63f9 100644 --- a/packages/sdds-netology/src/components/Popover/Popover.config.ts +++ b/packages/sdds-netology/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Progress/Progress.config.ts b/packages/sdds-netology/src/components/Progress/Progress.config.ts index a103dc32807..ec8fd101122 100644 --- a/packages/sdds-netology/src/components/Progress/Progress.config.ts +++ b/packages/sdds-netology/src/components/Progress/Progress.config.ts @@ -1,3 +1,14 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +19,39 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-netology/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-netology/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..3ae17f3287e 100644 --- a/packages/sdds-netology/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-netology/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-netology/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..81f4c5a83d1 100644 --- a/packages/sdds-netology/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-netology/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/Range/Range.clear.config.ts b/packages/sdds-netology/src/components/Range/Range.clear.config.ts index 53faca3d526..a007d818229 100644 --- a/packages/sdds-netology/src/components/Range/Range.clear.config.ts +++ b/packages/sdds-netology/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Range/Range.config.ts b/packages/sdds-netology/src/components/Range/Range.config.ts index af1793bb835..f682f67f4d4 100644 --- a/packages/sdds-netology/src/components/Range/Range.config.ts +++ b/packages/sdds-netology/src/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +39,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +95,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +108,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -114,22 +143,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +171,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +184,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -190,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,12 +247,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -231,24 +260,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -266,22 +295,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -294,12 +323,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -307,24 +336,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -342,22 +371,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -370,12 +399,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -383,24 +412,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -418,22 +447,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -445,10 +474,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -461,12 +490,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -485,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -508,16 +537,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Rating/Rating.config.ts b/packages/sdds-netology/src/components/Rating/Rating.config.ts index 79e9f36f886..5b42836a7a9 100644 --- a/packages/sdds-netology/src/components/Rating/Rating.config.ts +++ b/packages/sdds-netology/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts b/packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts index 0220aa026dc..8c0f7d28ebb 100644 --- a/packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts +++ b/packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts @@ -1,8 +1,10 @@ +import { surfaceTransparentPrimary, surfaceTransparentTertiary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; + export const config = { view: { default: { - trackColor: 'var(--surface-transparent-primary)', - thumbColor: 'var(--surface-transparent-tertiary)', + trackColor: surfaceTransparentPrimary, + thumbColor: surfaceTransparentTertiary, }, }, size: { diff --git a/packages/sdds-netology/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-netology/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..6cadabcffc5 100644 --- a/packages/sdds-netology/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-netology/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-netology/src/components/Segment/SegmentItem.config.ts b/packages/sdds-netology/src/components/Segment/SegmentItem.config.ts index 550c948b39d..9f4da5059ab 100644 --- a/packages/sdds-netology/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-netology/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-netology/src/components/Select/Select.config.ts b/packages/sdds-netology/src/components/Select/Select.config.ts index 86a62f0b337..d92fb978f87 100644 --- a/packages/sdds-netology/src/components/Select/Select.config.ts +++ b/packages/sdds-netology/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,328 +82,328 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -351,20 +423,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -372,12 +444,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -400,12 +472,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -430,19 +502,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -475,20 +547,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -496,12 +568,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -524,12 +596,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -554,19 +626,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -599,20 +671,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -620,12 +692,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -648,12 +720,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -678,19 +750,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -723,20 +795,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -744,12 +816,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -772,12 +844,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -802,19 +874,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -834,69 +906,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -909,12 +981,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -933,12 +1005,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -958,12 +1030,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts index 75d2ee7a606..17afc2eba2d 100644 --- a/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +32,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-netology/src/components/Slider/Slider.config.ts b/packages/sdds-netology/src/components/Slider/Slider.config.ts index c171f134490..85c4626ab7e 100644 --- a/packages/sdds-netology/src/components/Slider/Slider.config.ts +++ b/packages/sdds-netology/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-netology/src/components/Steps/Steps.config.ts b/packages/sdds-netology/src/components/Steps/Steps.config.ts index ee1ee5e1e98..0ad8c4b2180 100644 --- a/packages/sdds-netology/src/components/Steps/Steps.config.ts +++ b/packages/sdds-netology/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-netology/src/components/Switch/Switch.config.ts b/packages/sdds-netology/src/components/Switch/Switch.config.ts index 8a08bd686d8..15ba42c4ee2 100644 --- a/packages/sdds-netology/src/components/Switch/Switch.config.ts +++ b/packages/sdds-netology/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/Table/Table.config.ts b/packages/sdds-netology/src/components/Table/Table.config.ts index 770fa22b6d8..afa42ebe35a 100644 --- a/packages/sdds-netology/src/components/Table/Table.config.ts +++ b/packages/sdds-netology/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..dd82f97a8c7 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index a7252a1f7c0..8d01730d5df 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--on-dark-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--on-dark-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${onDarkTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${onDarkTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..f66f4ab2ec6 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-netology/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..771aca7ac0b 100644 --- a/packages/sdds-netology/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..65c46ea5191 100644 --- a/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..33ea68546ea 100644 --- a/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-netology/src/components/TextArea/TextArea.clear.config.ts b/packages/sdds-netology/src/components/TextArea/TextArea.clear.config.ts index 87abb38a0d7..c606ff27f3e 100644 --- a/packages/sdds-netology/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/sdds-netology/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +79,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +116,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -130,31 +153,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -184,30 +207,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,12 +248,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -258,30 +281,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,12 +322,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -332,30 +355,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -373,12 +396,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -406,30 +429,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,12 +470,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -480,30 +503,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -521,24 +544,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -551,12 +574,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -575,12 +598,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -598,9 +621,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-netology/src/components/TextArea/TextArea.config.ts b/packages/sdds-netology/src/components/TextArea/TextArea.config.ts index 9a056369045..8c7fcb5461d 100644 --- a/packages/sdds-netology/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-netology/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,172 +46,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -202,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +281,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -275,30 +313,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +354,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -348,30 +386,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,12 +429,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -423,30 +461,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +502,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -496,30 +534,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -537,20 +575,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -563,12 +601,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -587,12 +625,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -606,18 +644,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-netology/src/components/TextField/TextField.clear.config.ts b/packages/sdds-netology/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..294eef53038 100644 --- a/packages/sdds-netology/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-netology/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-netology/src/components/TextField/TextField.config.ts b/packages/sdds-netology/src/components/TextField/TextField.config.ts index c029fa0c4a6..7d7d0d9676c 100644 --- a/packages/sdds-netology/src/components/TextField/TextField.config.ts +++ b/packages/sdds-netology/src/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +62,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -135,40 +188,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -184,19 +237,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -219,20 +272,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -240,20 +293,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -266,12 +319,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -297,20 +350,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -318,20 +371,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -344,12 +397,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -375,20 +428,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -396,20 +449,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -422,12 +475,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -453,20 +506,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -474,20 +527,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -500,12 +553,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -520,126 +573,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -652,12 +705,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -676,12 +729,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -700,13 +753,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-netology/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-netology/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..ea17fdfec0b 100644 --- a/packages/sdds-netology/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-netology/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts index a33164279df..5d0f5e43d10 100644 --- a/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,10 +35,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -25,45 +51,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -76,45 +102,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -127,45 +153,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -178,50 +204,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -235,38 +261,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -288,12 +314,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -305,38 +331,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -358,12 +384,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -375,38 +401,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -428,12 +454,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -445,38 +471,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -498,12 +524,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -515,38 +541,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -568,20 +594,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -594,12 +620,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -618,12 +644,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -641,12 +667,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.config.ts index c63635d3490..cdf3ccf05ce 100644 --- a/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,207 +41,207 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -223,38 +255,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -276,12 +308,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -293,38 +325,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -346,12 +378,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -363,38 +395,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -416,12 +448,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -433,38 +465,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -486,12 +518,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -503,38 +535,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -556,20 +588,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -582,12 +614,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -606,12 +638,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -629,12 +661,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts index 79ebc73e4ed..93751b84788 100644 --- a/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,24 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +29,39 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; `, }, size: { @@ -55,12 +76,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -72,12 +93,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -90,23 +111,23 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -122,12 +143,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -139,12 +160,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -157,23 +178,23 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -189,12 +210,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -206,12 +227,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -224,23 +245,23 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -256,12 +277,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -273,12 +294,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -291,23 +312,23 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -320,12 +341,12 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Toast/Toast.config.ts b/packages/sdds-netology/src/components/Toast/Toast.config.ts index 9678f1dd594..d3ef5af5abc 100644 --- a/packages/sdds-netology/src/components/Toast/Toast.config.ts +++ b/packages/sdds-netology/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-netology/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-netology/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..198fea34fbd 100644 --- a/packages/sdds-netology/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-netology/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-netology/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-netology/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..2a818a1670a 100644 --- a/packages/sdds-netology/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-netology/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Tree/Tree.config.ts b/packages/sdds-netology/src/components/Tree/Tree.config.ts index e8cbfce73a6..6247adf76cc 100644 --- a/packages/sdds-netology/src/components/Tree/Tree.config.ts +++ b/packages/sdds-netology/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Typography/Body.config.ts b/packages/sdds-netology/src/components/Typography/Body.config.ts index 23927fdf18c..722cd63ecde 100644 --- a/packages/sdds-netology/src/components/Typography/Body.config.ts +++ b/packages/sdds-netology/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Typography/Dspl.config.ts b/packages/sdds-netology/src/components/Typography/Dspl.config.ts index 3fb1245a027..b9cb5399c31 100644 --- a/packages/sdds-netology/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-netology/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Typography/Heading.config.ts b/packages/sdds-netology/src/components/Typography/Heading.config.ts index 77f16729129..3d40a09e33d 100644 --- a/packages/sdds-netology/src/components/Typography/Heading.config.ts +++ b/packages/sdds-netology/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Typography/Text.config.ts b/packages/sdds-netology/src/components/Typography/Text.config.ts index 542bc09a87d..0c0104fb3e6 100644 --- a/packages/sdds-netology/src/components/Typography/Text.config.ts +++ b/packages/sdds-netology/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, },