diff --git a/packages/sdds-finai/src/components/Accordion/Accordion.config.ts b/packages/sdds-finai/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..4a3619d622e 100644 --- a/packages/sdds-finai/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Attach/Attach.config.ts b/packages/sdds-finai/src/components/Attach/Attach.config.ts index b62ab061eec..26fbb05ae53 100644 --- a/packages/sdds-finai/src/components/Attach/Attach.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-finai/src/components/Autocomplete/Autocomplete.config.ts index 8bc88b82ad3..3f78cff1065 100644 --- a/packages/sdds-finai/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-finai/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,187 +47,187 @@ 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-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${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}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${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-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${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.textFieldLeftHelperColorFocus}: 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-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}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${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-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-warning); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${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.textFieldLeftHelperColorFocus}: 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-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}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentWarning}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${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-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${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.textFieldLeftHelperColorFocus}: 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-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}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${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: { @@ -208,22 +246,22 @@ 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.textFieldBorderWidth}: 0.125rem; ${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; @@ -231,12 +269,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; @@ -256,12 +294,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; @@ -284,22 +322,22 @@ 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.textFieldBorderWidth}: 0.125rem; ${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; @@ -307,12 +345,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; @@ -332,12 +370,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; @@ -360,22 +398,22 @@ 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.textFieldBorderWidth}: 0.125rem; ${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; @@ -383,12 +421,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; @@ -408,12 +446,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; @@ -436,22 +474,22 @@ 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.textFieldBorderWidth}: 0.125rem; ${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; @@ -459,12 +497,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; @@ -484,12 +522,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; @@ -500,22 +538,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: { @@ -528,12 +566,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; @@ -552,12 +590,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; @@ -571,27 +609,27 @@ export const config = { disabled: { true: css` ${tokens.textFieldDisabledOpacity}: 1; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; ${tokens.textFieldBorderColor}: transparent; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 1; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; ${tokens.textFieldBorderWidth}: 0.125rem; `, }, diff --git a/packages/sdds-finai/src/components/Badge/Badge.config.ts b/packages/sdds-finai/src/components/Badge/Badge.config.ts index 3d8e8df196e..c8842445215 100644 --- a/packages/sdds-finai/src/components/Badge/Badge.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-finai/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..8a73bf38895 100644 --- a/packages/sdds-finai/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-finai/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Button/Button.config.ts b/packages/sdds-finai/src/components/Button/Button.config.ts index 229a57ade86..f506d1932cc 100644 --- a/packages/sdds-finai/src/components/Button/Button.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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: { @@ -118,12 +162,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; @@ -142,12 +186,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; @@ -166,12 +210,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; @@ -187,12 +231,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; @@ -208,12 +252,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; @@ -229,12 +273,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; @@ -253,7 +297,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-finai/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-finai/src/components/ButtonGroup/ButtonGroup.config.ts index a8fd7ba8051..544f3ee3d0b 100644 --- a/packages/sdds-finai/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Calendar/Calendar.config.ts b/packages/sdds-finai/src/components/Calendar/Calendar.config.ts index fc0a15388db..03dad7a9d6b 100644 --- a/packages/sdds-finai/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-finai/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..c3aa566fd9a 100644 --- a/packages/sdds-finai/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Card/Card.config.ts b/packages/sdds-finai/src/components/Card/Card.config.ts index 2899613fb13..074cb829620 100644 --- a/packages/sdds-finai/src/components/Card/Card.config.ts +++ b/packages/sdds-finai/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Carousel/Carousel.config.ts b/packages/sdds-finai/src/components/Carousel/Carousel.config.ts index f3fd82e4491..f6d52e14f40 100644 --- a/packages/sdds-finai/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-finai/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Cell/Cell.config.ts b/packages/sdds-finai/src/components/Cell/Cell.config.ts index 6588088c11f..eda2b4c9a2a 100644 --- a/packages/sdds-finai/src/components/Cell/Cell.config.ts +++ b/packages/sdds-finai/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-finai/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..b9eb08592af 100644 --- a/packages/sdds-finai/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Chip/Chip.transparent.config.ts b/packages/sdds-finai/src/components/Chip/Chip.transparent.config.ts index fe3146e24e7..cecfd600393 100644 --- a/packages/sdds-finai/src/components/Chip/Chip.transparent.config.ts +++ b/packages/sdds-finai/src/components/Chip/Chip.transparent.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceTransparentAccent, + surfaceTransparentAccentActive, + surfaceTransparentAccentHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, chipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,78 +40,78 @@ export const config = { variations: { view: { default: css` - ${chipTokens.color}: var(--text-primary); - ${chipTokens.background}: var(--surface-transparent-secondary); - ${chipTokens.colorHover}: var(--text-primary-hover); - ${chipTokens.backgroundHover}: var(--surface-transparent-secondary-hover); - ${chipTokens.colorActive}: var(--text-primary-active); - ${chipTokens.backgroundActive}: var(--surface-transparent-secondary-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnly}: var(--text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnlyHover}: var(--text-primary); - ${chipTokens.closeIconColor}: var(--text-tertiary); + ${chipTokens.color}: ${textPrimary}; + ${chipTokens.background}: ${surfaceTransparentSecondary}; + ${chipTokens.colorHover}: ${textPrimaryHover}; + ${chipTokens.backgroundHover}: ${surfaceTransparentSecondaryHover}; + ${chipTokens.colorActive}: ${textPrimaryActive}; + ${chipTokens.backgroundActive}: ${surfaceTransparentSecondaryActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnly}: ${textPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnlyHover}: ${textPrimary}; + ${chipTokens.closeIconColor}: ${textTertiary}; `, secondary: css` - ${chipTokens.color}: var(--text-primary); - ${chipTokens.background}: var(--surface-transparent-secondary); - ${chipTokens.colorHover}: var(--text-primary-hover); - ${chipTokens.backgroundHover}: var(--surface-transparent-secondary-hover); - ${chipTokens.colorActive}: var(--text-primary-active); - ${chipTokens.backgroundActive}: var(--surface-transparent-secondary-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnly}: var(--text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnlyHover}: var(--text-primary); - ${chipTokens.closeIconColor}: var(--text-tertiary); + ${chipTokens.color}: ${textPrimary}; + ${chipTokens.background}: ${surfaceTransparentSecondary}; + ${chipTokens.colorHover}: ${textPrimaryHover}; + ${chipTokens.backgroundHover}: ${surfaceTransparentSecondaryHover}; + ${chipTokens.colorActive}: ${textPrimaryActive}; + ${chipTokens.backgroundActive}: ${surfaceTransparentSecondaryActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnly}: ${textPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnlyHover}: ${textPrimary}; + ${chipTokens.closeIconColor}: ${textTertiary}; `, accent: css` - ${chipTokens.color}: var(--text-accent); - ${chipTokens.background}: var(--surface-transparent-accent); - ${chipTokens.colorHover}: var(--text-accent); - ${chipTokens.backgroundHover}: var(--surface-transparent-accent-hover); - ${chipTokens.colorActive}: var(--text-accent); - ${chipTokens.backgroundActive}: var(--surface-transparent-accent-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-accent); - ${chipTokens.colorReadOnly}: var(--text-accent); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-accent); - ${chipTokens.colorReadOnlyHover}: var(--text-accent); + ${chipTokens.color}: ${textAccent}; + ${chipTokens.background}: ${surfaceTransparentAccent}; + ${chipTokens.colorHover}: ${textAccent}; + ${chipTokens.backgroundHover}: ${surfaceTransparentAccentHover}; + ${chipTokens.colorActive}: ${textAccent}; + ${chipTokens.backgroundActive}: ${surfaceTransparentAccentActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentAccent}; + ${chipTokens.colorReadOnly}: ${textAccent}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentAccent}; + ${chipTokens.colorReadOnlyHover}: ${textAccent}; `, positive: css` - ${chipTokens.color}: var(--text-positive); - ${chipTokens.background}: var(--surface-transparent-positive); - ${chipTokens.colorHover}: var(--text-positive); - ${chipTokens.backgroundHover}: var(--surface-transparent-positive-hover); - ${chipTokens.colorActive}: var(--text-positive); - ${chipTokens.backgroundActive}: var(--surface-transparent-positive-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-positive); - ${chipTokens.colorReadOnly}: var(--text-positive); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-positive); - ${chipTokens.colorReadOnlyHover}: var(--text-positive); + ${chipTokens.color}: ${textPositive}; + ${chipTokens.background}: ${surfaceTransparentPositive}; + ${chipTokens.colorHover}: ${textPositive}; + ${chipTokens.backgroundHover}: ${surfaceTransparentPositiveHover}; + ${chipTokens.colorActive}: ${textPositive}; + ${chipTokens.backgroundActive}: ${surfaceTransparentPositiveActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentPositive}; + ${chipTokens.colorReadOnly}: ${textPositive}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentPositive}; + ${chipTokens.colorReadOnlyHover}: ${textPositive}; `, warning: css` - ${chipTokens.color}: var(--text-warning); - ${chipTokens.background}: var(--surface-transparent-warning); - ${chipTokens.colorHover}: var(--text-warning); - ${chipTokens.backgroundHover}: var(--surface-transparent-warning-hover); - ${chipTokens.colorActive}: var(--text-warning); - ${chipTokens.backgroundActive}: var(--surface-transparent-warning-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-warning); - ${chipTokens.colorReadOnly}: var(--text-warning); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-warning); - ${chipTokens.colorReadOnlyHover}: var(--text-warning); + ${chipTokens.color}: ${textWarning}; + ${chipTokens.background}: ${surfaceTransparentWarning}; + ${chipTokens.colorHover}: ${textWarning}; + ${chipTokens.backgroundHover}: ${surfaceTransparentWarningHover}; + ${chipTokens.colorActive}: ${textWarning}; + ${chipTokens.backgroundActive}: ${surfaceTransparentWarningActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentWarning}; + ${chipTokens.colorReadOnly}: ${textWarning}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentWarning}; + ${chipTokens.colorReadOnlyHover}: ${textWarning}; `, negative: css` - ${chipTokens.color}: var(--text-negative); - ${chipTokens.background}: var(--surface-transparent-negative); - ${chipTokens.colorHover}: var(--text-negative); - ${chipTokens.backgroundHover}: var(--surface-transparent-negative-hover); - ${chipTokens.colorActive}: var(--text-negative); - ${chipTokens.backgroundActive}: var(--surface-transparent-negative-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-negative); - ${chipTokens.colorReadOnly}: var(--text-negative); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-negative); - ${chipTokens.colorReadOnlyHover}: var(--text-negative); + ${chipTokens.color}: ${textNegative}; + ${chipTokens.background}: ${surfaceTransparentNegative}; + ${chipTokens.colorHover}: ${textNegative}; + ${chipTokens.backgroundHover}: ${surfaceTransparentNegativeHover}; + ${chipTokens.colorActive}: ${textNegative}; + ${chipTokens.backgroundActive}: ${surfaceTransparentNegativeActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentNegative}; + ${chipTokens.colorReadOnly}: ${textNegative}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentNegative}; + ${chipTokens.colorReadOnlyHover}: ${textNegative}; `, }, size: { @@ -91,12 +122,12 @@ export const config = { ${chipTokens.height}: 3rem; ${chipTokens.padding}: 0 1rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${chipTokens.fontFamily}: ${bodyL.fontFamily}; + ${chipTokens.fontSize}: ${bodyL.fontSize}; + ${chipTokens.fontStyle}: ${bodyL.fontStyle}; + ${chipTokens.fontWeight}: ${bodyL.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyL.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.5rem; @@ -113,12 +144,12 @@ export const config = { ${chipTokens.height}: 2.5rem; ${chipTokens.padding}: 0 0.875rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${chipTokens.fontFamily}: ${bodyM.fontFamily}; + ${chipTokens.fontSize}: ${bodyM.fontSize}; + ${chipTokens.fontStyle}: ${bodyM.fontStyle}; + ${chipTokens.fontWeight}: ${bodyM.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyM.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.375rem; @@ -135,12 +166,12 @@ export const config = { ${chipTokens.height}: 2rem; ${chipTokens.padding}: 0 0.875rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${chipTokens.fontFamily}: ${bodyS.fontFamily}; + ${chipTokens.fontSize}: ${bodyS.fontSize}; + ${chipTokens.fontStyle}: ${bodyS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.25rem; @@ -157,12 +188,12 @@ export const config = { ${chipTokens.height}: 1.5rem; ${chipTokens.padding}: 0 0.625rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${chipTokens.fontFamily}: ${bodyXS.fontFamily}; + ${chipTokens.fontSize}: ${bodyXS.fontSize}; + ${chipTokens.fontStyle}: ${bodyXS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyXS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyXS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.25rem; @@ -179,12 +210,12 @@ export const config = { ${chipTokens.height}: 1.25rem; ${chipTokens.padding}: 0 0.5rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${chipTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${chipTokens.fontSize}: ${bodyXXS.fontSize}; + ${chipTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyXXS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.125rem; @@ -202,7 +233,7 @@ export const config = { }, focused: { true: css` - ${chipTokens.focusColor}: var(--surface-accent); + ${chipTokens.focusColor}: ${surfaceAccent}; `, }, pilled: { diff --git a/packages/sdds-finai/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-finai/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..f4a2b75eed7 100644 --- a/packages/sdds-finai/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/CodeField/CodeField.config.ts b/packages/sdds-finai/src/components/CodeField/CodeField.config.ts index d0109404d66..0f1b9790cb5 100644 --- a/packages/sdds-finai/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Combobox/Combobox.config.ts b/packages/sdds-finai/src/components/Combobox/Combobox.config.ts index ce4d3f74ed4..1af7032dd52 100644 --- a/packages/sdds-finai/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-finai/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,235 +46,235 @@ 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-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${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}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${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-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${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.textFieldLeftHelperColorFocus}: 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}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldLeftHelperColorFocus}: ${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}; `, 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-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-warning); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${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.textFieldLeftHelperColorFocus}: 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}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentWarning}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldLeftHelperColorFocus}: ${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}; `, 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-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - - ${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}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + + ${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: { @@ -257,20 +294,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; @@ -279,12 +316,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${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; @@ -307,12 +344,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; @@ -334,19 +371,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; @@ -379,21 +416,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.textFieldBorderWidth}: 0.125rem; ${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; @@ -401,12 +438,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; @@ -429,12 +466,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; @@ -456,19 +493,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; @@ -501,21 +538,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.textFieldBorderWidth}: 0.125rem; ${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; @@ -523,12 +560,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; @@ -551,12 +588,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; @@ -578,19 +615,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; @@ -623,21 +660,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.textFieldBorderWidth}: 0.125rem; ${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; @@ -645,12 +682,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; @@ -673,12 +710,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; @@ -700,19 +737,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; @@ -732,22 +769,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: { @@ -760,12 +797,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; @@ -784,12 +821,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; @@ -803,26 +840,26 @@ export const config = { disabled: { true: css` ${tokens.textFieldDisabledOpacity}: 1; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; ${tokens.textFieldBorderColor}: transparent; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 1; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; ${tokens.textFieldBorderWidth}: 0.125rem; `, }, diff --git a/packages/sdds-finai/src/components/Counter/Counter.config.ts b/packages/sdds-finai/src/components/Counter/Counter.config.ts index 140aa43a57f..5662bb15c3e 100644 --- a/packages/sdds-finai/src/components/Counter/Counter.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts index 9a9ad4ab91c..032379a9915 100644 --- a/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentPositive, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,121 +52,121 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-card); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.borderColor}: var(--outline-solid-primary); - ${tokens.borderColorHover}: var(--outline-solid-primary-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${tokens.borderColorError}: var(--outline-transparent-negative); - ${tokens.borderColorSuccess}: var(--outline-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.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.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - - ${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-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorError}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorSuccess}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-accent); - - ${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}: ${surfaceTransparentCard}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.borderColor}: ${outlineSolidPrimary}; + ${tokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.borderColorError}: ${outlineTransparentNegative}; + ${tokens.borderColorSuccess}: ${outlineTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${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.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + + ${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}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorError}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorSuccess}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlineAccent}; + + ${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: { @@ -132,12 +176,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${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; @@ -147,12 +191,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; @@ -176,20 +220,20 @@ 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.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; @@ -207,46 +251,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; @@ -257,25 +301,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; @@ -287,12 +331,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${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; @@ -302,12 +346,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; @@ -331,20 +375,20 @@ 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.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; @@ -362,46 +406,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; @@ -412,25 +456,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; @@ -442,12 +486,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${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; @@ -457,12 +501,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; @@ -486,20 +530,20 @@ 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.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; @@ -517,46 +561,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; @@ -567,25 +611,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; @@ -597,12 +641,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${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; @@ -612,12 +656,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; @@ -641,20 +685,20 @@ 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.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; @@ -672,46 +716,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; @@ -722,25 +766,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; @@ -757,12 +801,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; @@ -771,7 +815,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; @@ -782,12 +826,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; @@ -796,7 +840,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: { @@ -806,19 +850,19 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-card); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentCard}; + ${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-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.rightContentOpacityReadOnly}: 0.4; diff --git a/packages/sdds-finai/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-finai/src/components/DateTimePicker/DateTimePicker.config.ts index d671d96968f..8322b84ce05 100644 --- a/packages/sdds-finai/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-finai/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,44 @@ +import { + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentPositive, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,94 +49,94 @@ 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-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${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.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldBorderColorError}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorSuccess}: var(--outline-transparent-positive); - - ${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}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldBorderColorError}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorSuccess}: ${outlineTransparentPositive}; + + ${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: { @@ -110,30 +151,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; @@ -143,12 +184,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; @@ -161,46 +202,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; @@ -211,13 +252,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; @@ -230,21 +271,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; @@ -261,30 +302,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; @@ -294,12 +335,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; @@ -312,46 +353,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; @@ -362,13 +403,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; @@ -381,21 +422,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; @@ -412,12 +453,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; @@ -426,7 +467,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; @@ -437,12 +478,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; @@ -451,44 +492,44 @@ 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: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondary}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondary}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; ${tokens.textFieldBorderColor}: transparent; `, }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondary}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; ${tokens.textFieldBorderWidth}: 0.125rem; `, }, diff --git a/packages/sdds-finai/src/components/Divider/Divider.config.ts b/packages/sdds-finai/src/components/Divider/Divider.config.ts index df0449d5c06..9633c4105a5 100644 --- a/packages/sdds-finai/src/components/Divider/Divider.config.ts +++ b/packages/sdds-finai/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Drawer/Drawer.config.ts b/packages/sdds-finai/src/components/Drawer/Drawer.config.ts index b0b00b15040..b89c0cada87 100644 --- a/packages/sdds-finai/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-finai/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-finai/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..045cdb14382 100644 --- a/packages/sdds-finai/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-finai/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-finai/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..35093009032 100644 --- a/packages/sdds-finai/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-finai/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-finai/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..7ca852ab69e 100644 --- a/packages/sdds-finai/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-finai/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..c2e9d580587 100644 --- a/packages/sdds-finai/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-finai/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/IconButton/IconButton.config.ts b/packages/sdds-finai/src/components/IconButton/IconButton.config.ts index 8a28d321fd7..65a274fef8c 100644 --- a/packages/sdds-finai/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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; @@ -160,12 +200,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 1.5rem; ${iconButtonTokens.iconButtonPadding}: 0.5rem; ${iconButtonTokens.iconButtonRadius}: 0.375rem; - ${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}: 0.625rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -178,7 +218,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-finai/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-finai/src/components/InformationWrapper/InformationWrapper.config.ts index 0fed91296a6..a812ad46800 100644 --- a/packages/sdds-finai/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-finai/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +21,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: { 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; @@ -63,29 +76,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.875rem -2.310rem 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.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +108,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.5rem; @@ -112,29 +125,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.688rem -2.125rem 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; @@ -146,10 +159,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: { @@ -162,12 +175,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; @@ -186,12 +199,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-finai/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-finai/src/components/LinkButton/LinkButton.config.ts index 2ec1d625a04..3d429fc1cc3 100644 --- a/packages/sdds-finai/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-finai/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,29 @@ +import { + 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/sdds-themes/tokens/sdds_finai'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +34,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 +105,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; @@ -98,12 +124,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; diff --git a/packages/sdds-finai/src/components/List/List.config.ts b/packages/sdds-finai/src/components/List/List.config.ts index b0a7acc37b0..a5b4a718395 100644 --- a/packages/sdds-finai/src/components/List/List.config.ts +++ b/packages/sdds-finai/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Modal/Modal.config.ts b/packages/sdds-finai/src/components/Modal/Modal.config.ts index 8b107b98ea3..b410e871b98 100644 --- a/packages/sdds-finai/src/components/Modal/Modal.config.ts +++ b/packages/sdds-finai/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Note/Note.config.ts b/packages/sdds-finai/src/components/Note/Note.config.ts index 76e6e79ff13..67311f2a057 100644 --- a/packages/sdds-finai/src/components/Note/Note.config.ts +++ b/packages/sdds-finai/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,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: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ 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.titlePaddingRight}: 1.875rem; - ${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; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ 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.titlePaddingRight}: 1.75rem; - ${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; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ 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.titlePaddingRight}: 1.625rem; - ${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; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ 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.titlePaddingRight}: 1.5rem; - ${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-finai/src/components/Notification/Notification.config.ts b/packages/sdds-finai/src/components/Notification/Notification.config.ts index 3963e77e1e2..99144e8b9f7 100644 --- a/packages/sdds-finai/src/components/Notification/Notification.config.ts +++ b/packages/sdds-finai/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-finai/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..dee322e8b29 100644 --- a/packages/sdds-finai/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Pagination/Pagination.config.ts b/packages/sdds-finai/src/components/Pagination/Pagination.config.ts index 5b9af725836..9033811a6f5 100644 --- a/packages/sdds-finai/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Popover/Popover.config.ts b/packages/sdds-finai/src/components/Popover/Popover.config.ts index 2f9acaf14e8..7cd6a08b79d 100644 --- a/packages/sdds-finai/src/components/Popover/Popover.config.ts +++ b/packages/sdds-finai/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-finai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..5c1548b8feb 100644 --- a/packages/sdds-finai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-finai/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..fbcb3896a42 100644 --- a/packages/sdds-finai/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Range/Range.config.ts b/packages/sdds-finai/src/components/Range/Range.config.ts index 91baf7ee6ec..0d87c581be8 100644 --- a/packages/sdds-finai/src/components/Range/Range.config.ts +++ b/packages/sdds-finai/src/components/Range/Range.config.ts @@ -1,3 +1,37 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentCard, + surfaceTransparentCardHover, + surfaceTransparentNegative, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,65 +44,65 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-card); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.borderColor}: var(--outline-solid-primary); - ${tokens.borderColorError}: var(--outline-transparent-negative); - ${tokens.borderColorSuccess}: var(--outline-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-card-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorErrorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorSuccessHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-accent); - - ${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}: ${surfaceTransparentCard}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.borderColor}: ${outlineSolidPrimary}; + ${tokens.borderColorError}: ${outlineTransparentNegative}; + ${tokens.borderColorSuccess}: ${outlineTransparentPositive}; + + ${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}: ${surfaceTransparentCardHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorErrorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorSuccessHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlineAccent}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -77,12 +111,12 @@ export const config = { ${tokens.borderWidth}: 0.125rem; ${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; @@ -90,12 +124,12 @@ 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.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; @@ -103,12 +137,12 @@ export const config = { ${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; @@ -126,22 +160,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; @@ -154,12 +188,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; @@ -167,12 +201,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.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; @@ -180,12 +214,12 @@ export const config = { ${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; @@ -203,22 +237,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; @@ -232,12 +266,12 @@ export const config = { ${tokens.borderWidth}: 0.125rem; ${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; @@ -245,12 +279,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.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; @@ -258,12 +292,12 @@ export const config = { ${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; @@ -281,22 +315,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; @@ -310,12 +344,12 @@ export const config = { ${tokens.borderWidth}: 0.125rem; ${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; @@ -323,12 +357,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.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; @@ -336,12 +370,12 @@ export const config = { ${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; @@ -359,22 +393,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; @@ -388,12 +422,12 @@ export const config = { ${tokens.borderWidth}: 0.125rem; ${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; @@ -401,12 +435,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.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; @@ -414,12 +448,12 @@ export const config = { ${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; @@ -437,22 +471,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; @@ -464,10 +498,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: { @@ -480,12 +514,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; @@ -504,12 +538,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; @@ -524,27 +558,27 @@ export const config = { true: css` ${tokens.disabledOpacity}: 1; ${tokens.textFieldBackgroundColor}: transparent; - ${tokens.background}: var(--surface-transparent-secondary); + ${tokens.background}: ${surfaceTransparentSecondary}; ${tokens.borderColor}: transparent; - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotColor}: var(--text-secondary); + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotColor}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-card); - ${tokens.background}: var(--surface-transparent-card); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentCard}; + ${tokens.background}: ${surfaceTransparentCard}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 1; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotColor}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-finai/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-finai/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..841b7a3272c 100644 --- a/packages/sdds-finai/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-finai/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Segment/SegmentItem.config.ts b/packages/sdds-finai/src/components/Segment/SegmentItem.config.ts index 550c948b39d..e476c0418c1 100644 --- a/packages/sdds-finai/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Select/Select.config.ts b/packages/sdds-finai/src/components/Select/Select.config.ts index 6e03fa73fa6..152d3c1c9b3 100644 --- a/packages/sdds-finai/src/components/Select/Select.config.ts +++ b/packages/sdds-finai/src/components/Select/Select.config.ts @@ -1,3 +1,80 @@ +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, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,363 +87,363 @@ 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-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-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.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.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${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.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldLeftHelperColorFocus}: 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(--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.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${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.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-warning); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldLeftHelperColorFocus}: 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(--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.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentWarning}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${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.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldLeftHelperColorFocus}: 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(--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.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${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}; `, 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.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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${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}; `, 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.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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${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}; `, 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.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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${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}; `, 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.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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${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}; `, 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.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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${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}; `, 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.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.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${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: { @@ -386,20 +463,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; @@ -408,12 +485,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${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; @@ -436,12 +513,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; @@ -466,19 +543,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; @@ -511,21 +588,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.textFieldBorderWidth}: 0.125rem; ${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; @@ -533,12 +610,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; @@ -561,12 +638,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; @@ -591,19 +668,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; @@ -636,21 +713,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.textFieldBorderWidth}: 0.125rem; ${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; @@ -658,12 +735,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; @@ -686,12 +763,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; @@ -716,19 +793,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; @@ -761,20 +838,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; @@ -783,12 +860,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${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; @@ -811,12 +888,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; @@ -841,19 +918,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; @@ -873,69 +950,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); - ${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}: ${surfaceSolidCard}; + ${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: { @@ -948,12 +1025,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; @@ -972,12 +1049,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; @@ -991,27 +1068,27 @@ export const config = { disabled: { true: css` ${tokens.textFieldDisabledOpacity}: 1; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; ${tokens.textFieldBorderColor}: transparent; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` ${tokens.disclosureIconOpacityReadOnly}: 1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-accent) + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineAccent} `, }, }, diff --git a/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts index 54a10502b46..2916d254fd0 100644 --- a/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; // INFO: у нас нет централизованного, через theme, способа задавать токен для skeleton gradient @@ -10,88 +34,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, linear-gradient(270.00deg, rgb(232, 238, 242) 0.538%,rgb(255, 255, 255) 51.426%,rgb(232, 238, 242) 100%)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}, linear-gradient(270.00deg, rgb(232, 238, 242) 0.538%,rgb(255, 255, 255) 51.426%,rgb(232, 238, 242) 100%)); + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, linear-gradient(90.00deg, rgb(192, 203, 211) 1.601%,rgba(247, 249, 251, 0.5) 51.511%,rgb(192, 203, 211) 99.846%)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}, linear-gradient(90.00deg, rgb(192, 203, 211) 1.601%,rgba(247, 249, 251, 0.5) 51.511%,rgb(192, 203, 211) 99.846%)); + ${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-finai/src/components/Slider/Slider.config.ts b/packages/sdds-finai/src/components/Slider/Slider.config.ts index e77ef580402..2cfa4574420 100644 --- a/packages/sdds-finai/src/components/Slider/Slider.config.ts +++ b/packages/sdds-finai/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + outlineSolidTertiary, + surfaceAccent, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,48 +25,48 @@ 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(--outline-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${outlineSolidTertiary}; + ${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(--outline-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${outlineSolidTertiary}; + ${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}; `, }, size: { @@ -63,24 +80,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; @@ -97,12 +114,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; @@ -114,24 +131,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; @@ -148,12 +165,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; @@ -165,24 +182,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; @@ -199,12 +216,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-finai/src/components/Steps/Steps.config.ts b/packages/sdds-finai/src/components/Steps/Steps.config.ts index 93d45772f0a..0c32cdec61a 100644 --- a/packages/sdds-finai/src/components/Steps/Steps.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + ${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-finai/src/components/Switch/Switch.config.ts b/packages/sdds-finai/src/components/Switch/Switch.config.ts index 8a08bd686d8..f20f365b39b 100644 --- a/packages/sdds-finai/src/components/Switch/Switch.config.ts +++ b/packages/sdds-finai/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Table/Table.config.ts b/packages/sdds-finai/src/components/Table/Table.config.ts index 770fa22b6d8..fab8897f3d9 100644 --- a/packages/sdds-finai/src/components/Table/Table.config.ts +++ b/packages/sdds-finai/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..88484dca2ef 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f70368f502f..25a83fc9fcf 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-finai/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, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -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-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..cf4dcfefb15 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..f0996ce22de 100644 --- a/packages/sdds-finai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..9e9c5dcffaf 100644 --- a/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..bb810d32533 100644 --- a/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/TextArea/TextArea.config.ts b/packages/sdds-finai/src/components/TextArea/TextArea.config.ts index 5873f6846f0..5b961146af1 100644 --- a/packages/sdds-finai/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-finai/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentCard, + surfaceTransparentCardActive, + surfaceTransparentCardHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, textAreaTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,176 +56,176 @@ export const config = { variations: { view: { default: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-card); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-card-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-card-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-solid-primary); - ${textAreaTokens.borderColorHover}: var(--outline-solid-primary-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-secondary); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.dividerColorHover}: var(--text-secondary); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentCard}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentCardHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentCardActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineSolidPrimary}; + ${textAreaTokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textSecondary}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.dividerColorHover}: ${textSecondary}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, positive: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-positive); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-positive-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-transparent-positive); - ${textAreaTokens.borderColorHover}: var(--outline-transparent-positive-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-positive); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-positive); - ${textAreaTokens.dividerColorHover}: var(--surface-positive); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentPositive}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineTransparentPositive}; + ${textAreaTokens.borderColorHover}: ${outlineTransparentPositiveHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textPositive}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfacePositive}; + ${textAreaTokens.dividerColorHover}: ${surfacePositive}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, /** * @deprecated * Использовать `default` */ primary: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-card); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-card-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-card-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-solid-primary); - ${textAreaTokens.borderColorHover}: var(--outline-solid-primary-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-secondary); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.dividerColorHover}: var(--text-secondary); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentCard}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentCardHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentCardActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineSolidPrimary}; + ${textAreaTokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textSecondary}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.dividerColorHover}: ${textSecondary}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, warning: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-warning); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-warning-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-transparent-warning); - ${textAreaTokens.borderColorHover}: var(--outline-transparent-warning-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-warning); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-warning); - ${textAreaTokens.dividerColorHover}: var(--surface-warning); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentWarning}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentWarningActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineTransparentWarning}; + ${textAreaTokens.borderColorHover}: ${outlineTransparentWarningHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textWarning}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfaceWarning}; + ${textAreaTokens.dividerColorHover}: ${surfaceWarning}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, negative: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-negative); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-negative-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-transparent-negative); - ${textAreaTokens.borderColorHover}: var(--outline-transparent-negative-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-negative); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-negative); - ${textAreaTokens.dividerColorHover}: var(--surface-negative); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentNegative}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineTransparentNegative}; + ${textAreaTokens.borderColorHover}: ${outlineTransparentNegativeHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textNegative}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfaceNegative}; + ${textAreaTokens.dividerColorHover}: ${surfaceNegative}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -203,27 +251,27 @@ export const config = { ${textAreaTokens.rightContentRight}: 1.25rem; ${textAreaTokens.rightContentHeight}: 1.5rem; ${textAreaTokens.labelMarginBottom}: 0.75rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0.813rem; ${textAreaTokens.labelInnerTopHelper}: -0.313rem; ${textAreaTokens.labelInnerMarginBottom}: 0.25rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyL.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyL.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyL.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyL.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyL.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.5rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -241,12 +289,12 @@ export const config = { ${textAreaTokens.clearIndicatorHintInnerRight}: 1.5rem -2.488rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${textAreaTokens.inputWidth}: 100%; @@ -270,26 +318,26 @@ export const config = { ${textAreaTokens.rightContentRight}: 1rem; ${textAreaTokens.rightContentHeight}: 1.25rem; ${textAreaTokens.labelMarginBottom}: 0.75rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0.563rem; ${textAreaTokens.labelInnerMarginBottom}: 0.125rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyL.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyL.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyL.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyL.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyL.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.5rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -307,12 +355,12 @@ export const config = { ${textAreaTokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${textAreaTokens.inputWidth}: 100%; @@ -336,26 +384,26 @@ export const config = { ${textAreaTokens.rightContentRight}: 0.875rem; ${textAreaTokens.rightContentHeight}: 1.25rem; ${textAreaTokens.labelMarginBottom}: 0.625rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0.375rem; ${textAreaTokens.labelInnerMarginBottom}: 0.125rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyM.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyM.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyM.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyM.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyM.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.5rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -375,12 +423,12 @@ export const config = { ${textAreaTokens.hintInnerLabelPlacementOffset}:0.312rem -2.813rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${textAreaTokens.inputWidth}: 100%; @@ -404,26 +452,26 @@ export const config = { ${textAreaTokens.rightContentRight}: 0.75rem; ${textAreaTokens.rightContentHeight}: 1.25rem; ${textAreaTokens.labelMarginBottom}: 0.5rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0.375rem; ${textAreaTokens.labelInnerMarginBottom}: 0.125rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyS.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyS.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyS.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyS.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyS.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.375rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -441,12 +489,12 @@ export const config = { ${textAreaTokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${textAreaTokens.inputWidth}: 100%; @@ -470,26 +518,26 @@ export const config = { ${textAreaTokens.rightContentRight}: 0.5rem; ${textAreaTokens.rightContentHeight}: 1rem; ${textAreaTokens.labelMarginBottom}: 0.375rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0rem; ${textAreaTokens.labelInnerMarginBottom}: 0rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyXS.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.375rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -507,20 +555,20 @@ export const config = { ${textAreaTokens.hintInnerLabelPlacementOffset}: -0.188rem -2.188rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${textAreaTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${textAreaTokens.tooltipBoxShadow}: var(--shadow-down-hard-m); - ${textAreaTokens.tooltipColor}: var(--text-primary); - ${textAreaTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${textAreaTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${textAreaTokens.tooltipBoxShadow}: ${shadowDownHardM}; + ${textAreaTokens.tooltipColor}: ${textPrimary}; + ${textAreaTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -533,12 +581,12 @@ export const config = { ${textAreaTokens.tooltipMinHeight}: 2.5rem; ${textAreaTokens.tooltipBorderRadius}: 0.625rem; - ${textAreaTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${textAreaTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${textAreaTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${textAreaTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${textAreaTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${textAreaTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${textAreaTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${textAreaTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${textAreaTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${textAreaTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${textAreaTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${textAreaTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${textAreaTokens.tooltipContentLeftMargin}: 0.375rem; @@ -558,12 +606,12 @@ export const config = { ${textAreaTokens.tooltipMinHeight}: 2rem; ${textAreaTokens.tooltipBorderRadius}: 0.5rem; - ${textAreaTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.tooltipContentLeftMargin}: 0.25rem; @@ -577,22 +625,22 @@ export const config = { }, readOnly: { true: css` - ${textAreaTokens.backgroundColorReadOnly}: var(--surface-transparent-card); - ${textAreaTokens.inputColorReadOnly}: var(--text-primary); - ${textAreaTokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${textAreaTokens.backgroundColorReadOnly}: ${surfaceTransparentCard}; + ${textAreaTokens.inputColorReadOnly}: ${textPrimary}; + ${textAreaTokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${textAreaTokens.contentSlotRightOpacityReadOnly}: 1; - ${textAreaTokens.rightContentColor}: var(--text-secondary); - ${textAreaTokens.backgroundColor}: var(--surface-transparent-card); + ${textAreaTokens.rightContentColor}: ${textSecondary}; + ${textAreaTokens.backgroundColor}: ${surfaceTransparentCard}; `, }, disabled: { true: css` ${textAreaTokens.disabledOpacity}: 1; - ${textAreaTokens.inputColorDisabled}: var(--text-secondary); - ${textAreaTokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${textAreaTokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${textAreaTokens.rightContentColor}: var(--text-secondary); - ${textAreaTokens.backgroundColor}: var(--surface-transparent-secondary); + ${textAreaTokens.inputColorDisabled}: ${textSecondary}; + ${textAreaTokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${textAreaTokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${textAreaTokens.rightContentColor}: ${textSecondary}; + ${textAreaTokens.backgroundColor}: ${surfaceTransparentSecondary}; ${textAreaTokens.borderColor}: transparent; `, }, diff --git a/packages/sdds-finai/src/components/TextField/TextField.clear.config.ts b/packages/sdds-finai/src/components/TextField/TextField.clear.config.ts index 84d684774e4..71f6d67f4f8 100644 --- a/packages/sdds-finai/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-finai/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,51 @@ +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, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,140 +57,140 @@ 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.colorFocus}: var(--text-primary); + ${tokens.color}: ${textPositive}; + ${tokens.colorFocus}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${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-positive); - ${tokens.leftHelperColorFocus}: var(--text-secondary); - ${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.contentSlotColorFocus}: var(--text-primary); - - ${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.leftHelperColorFocus}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + ${tokens.contentSlotColorFocus}: ${textPrimary}; + + ${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.colorFocus}: var(--text-primary); + ${tokens.color}: ${textWarning}; + ${tokens.colorFocus}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${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-warning); - ${tokens.leftHelperColorFocus}: var(--text-secondary); - ${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.contentSlotColorFocus}: var(--text-primary); - - ${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.leftHelperColorFocus}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + ${tokens.contentSlotColorFocus}: ${textPrimary}; + + ${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.colorFocus}: var(--text-primary); + ${tokens.color}: ${textNegative}; + ${tokens.colorFocus}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${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-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - ${tokens.contentSlotColorFocus}: var(--text-primary); - - ${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}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + ${tokens.contentSlotColorFocus}: ${textPrimary}; + + ${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: { @@ -159,40 +207,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; @@ -208,19 +256,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; @@ -243,40 +291,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; @@ -291,12 +339,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; @@ -321,40 +369,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; @@ -369,12 +417,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; @@ -399,40 +447,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; @@ -447,12 +495,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; @@ -477,40 +525,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; @@ -525,12 +573,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; @@ -545,126 +593,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: { @@ -677,12 +725,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; @@ -701,12 +749,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; @@ -720,23 +768,23 @@ export const config = { disabled: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.backgroundColor}: var(--surface-transparent-secondary); - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary); - ${tokens.contentSlotRightColorActive}: var(--text-secondary); + ${tokens.backgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondary}; + ${tokens.contentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` - ${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-tertiary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentTertiary}; ${tokens.contentSlotRightOpacityReadOnly}: 1; - ${tokens.contentSlotRightColor}: var(--text-secondary); + ${tokens.contentSlotRightColor}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-finai/src/components/TextField/TextField.config.ts b/packages/sdds-finai/src/components/TextField/TextField.config.ts index e0fac05826f..444ce309820 100644 --- a/packages/sdds-finai/src/components/TextField/TextField.config.ts +++ b/packages/sdds-finai/src/components/TextField/TextField.config.ts @@ -1,3 +1,63 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentCard, + surfaceTransparentCardHover, + surfaceTransparentNegative, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,135 +69,135 @@ 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-card); - ${tokens.backgroundColorHover}: var(--surface-transparent-card-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card); - ${tokens.borderColor}: var(--outline-solid-primary); - ${tokens.borderColorHover}: var(--outline-solid-primary-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${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}: ${surfaceTransparentCard}; + ${tokens.backgroundColorHover}: ${surfaceTransparentCardHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.borderColor}: ${outlineSolidPrimary}; + ${tokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${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-card); - ${tokens.borderColor}: var(--outline-transparent-positive); - ${tokens.borderColorHover}: var(--outline-transparent-positive-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${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.leftHelperColorFocus}: 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-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}: ${surfaceTransparentCard}; + ${tokens.borderColor}: ${outlineTransparentPositive}; + ${tokens.borderColorHover}: ${outlineTransparentPositiveHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.leftHelperColorFocus}: ${textSecondary}; + ${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-card); - ${tokens.borderColor}: var(--outline-transparent-warning); - ${tokens.borderColorHover}: var(--outline-transparent-warning-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${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.leftHelperColorFocus}: 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-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}: ${surfaceTransparentCard}; + ${tokens.borderColor}: ${outlineTransparentWarning}; + ${tokens.borderColorHover}: ${outlineTransparentWarningHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.leftHelperColorFocus}: ${textSecondary}; + ${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-card); - ${tokens.borderColor}: var(--outline-transparent-negative); - ${tokens.borderColorHover}: var(--outline-transparent-negative-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${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.leftHelperColorFocus}: 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-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}: ${surfaceTransparentCard}; + ${tokens.borderColor}: ${outlineTransparentNegative}; + ${tokens.borderColorHover}: ${outlineTransparentNegativeHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.leftHelperColorFocus}: ${textSecondary}; + ${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: { @@ -151,40 +211,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; @@ -200,19 +260,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,20 +295,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; @@ -256,20 +316,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; @@ -282,12 +342,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; @@ -313,20 +373,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; @@ -334,20 +394,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; @@ -360,12 +420,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; @@ -391,20 +451,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; @@ -412,20 +472,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; @@ -438,12 +498,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; @@ -469,20 +529,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; @@ -490,20 +550,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; @@ -516,12 +576,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; @@ -536,126 +596,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: { @@ -668,12 +728,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; @@ -692,12 +752,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; @@ -711,29 +771,29 @@ export const config = { disabled: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.backgroundColor}: var(--surface-transparent-secondary); + ${tokens.backgroundColor}: ${surfaceTransparentSecondary}; ${tokens.borderColor}: transparent; ${tokens.borderColorHover}: transparent; ${tokens.borderColorFocus}: transparent; - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary); - ${tokens.contentSlotRightColorActive}: var(--text-secondary); + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondary}; + ${tokens.contentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.borderColorReadOnly}: var(--outline-solid-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.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary); - ${tokens.contentSlotRightColorActive}: var(--text-secondary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.borderColorReadOnly}: ${outlineSolidPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondary}; + ${tokens.contentSlotRightColorActive}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-finai/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-finai/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..d475ffb97be 100644 --- a/packages/sdds-finai/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-finai/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts index 080c25ff6e1..eefbb0cdc84 100644 --- a/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textPrimary, + textSecondary, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,58 +36,58 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-card); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.borderColor}: var(--outline-solid-primary); - ${tokens.borderColorHover}: var(--outline-solid-primary-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${tokens.borderColorError}: var(--outline-transparent-negative); - ${tokens.borderColorSuccess}: var(--outline-transparent-positive); - - ${tokens.labelColor}: var(--text-primary); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorError}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorErrorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorSuccess}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorSuccessHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); - - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.background}: ${surfaceTransparentCard}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.borderColor}: ${outlineSolidPrimary}; + ${tokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.borderColorError}: ${outlineTransparentNegative}; + ${tokens.borderColorSuccess}: ${outlineTransparentPositive}; + + ${tokens.labelColor}: ${textPrimary}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.timePickerShadow}: ${shadowDownSoftS}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorError}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorErrorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorSuccess}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorSuccessHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlineAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; + + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; `, }, size: { @@ -75,12 +103,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; @@ -92,12 +120,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; @@ -110,23 +138,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; @@ -143,12 +171,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; @@ -160,12 +188,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; @@ -178,23 +206,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; @@ -211,12 +239,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; @@ -228,12 +256,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; @@ -246,23 +274,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; @@ -279,12 +307,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; @@ -296,12 +324,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; @@ -314,23 +342,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; @@ -339,27 +367,27 @@ export const config = { disabled: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondary}; ${tokens.textFieldBorderColor}: transparent; ${tokens.borderColor}: transparent; `, }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-card); - ${tokens.labelColorReadOnly}: var(--text-secondary); - - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentCard}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-finai/src/components/Toast/Toast.config.ts b/packages/sdds-finai/src/components/Toast/Toast.config.ts index 754867b6cb0..9c28a8585c5 100644 --- a/packages/sdds-finai/src/components/Toast/Toast.config.ts +++ b/packages/sdds-finai/src/components/Toast/Toast.config.ts @@ -1,3 +1,15 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,33 +21,33 @@ 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}; `, /** * @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: { @@ -43,12 +55,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-finai/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-finai/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..c3e8e88489e 100644 --- a/packages/sdds-finai/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-finai/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-finai/src/components/Tooltip/Tooltip.config.ts index 4aa12aa1ad6..6b6f6ba7792 100644 --- a/packages/sdds-finai/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-finai/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,10 @@ +import { + bodyS, + bodyXS, + inverseSurfaceSolidCardBrightness, + inverseTextPrimary, + surfaceSolidCardBrightness, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +23,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 +37,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 +48,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,16 +62,16 @@ 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(--inverse-surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${inverseSurfaceSolidCardBrightness}; ${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(--inverse-text-primary); - ${tooltipTokens.arrowBackground}: var(--inverse-surface-solid-card-brightness); + ${tooltipTokens.color}: ${inverseTextPrimary}; + ${tooltipTokens.arrowBackground}: ${inverseSurfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-finai/src/components/Tree/Tree.config.ts b/packages/sdds-finai/src/components/Tree/Tree.config.ts index 48a65e621fe..4a1cdd5a962 100644 --- a/packages/sdds-finai/src/components/Tree/Tree.config.ts +++ b/packages/sdds-finai/src/components/Tree/Tree.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,23 +25,23 @@ 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.itemBackgroundColorPrimary}: var(--surface-transparent-primary); - ${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.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundColorPrimary}: ${surfaceTransparentPrimary}; + ${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-accent); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfaceAccent}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -52,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; @@ -83,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; @@ -114,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; @@ -145,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; @@ -176,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-finai/src/components/Typography/Body.config.ts b/packages/sdds-finai/src/components/Typography/Body.config.ts index 23927fdf18c..b2e4d887b2f 100644 --- a/packages/sdds-finai/src/components/Typography/Body.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Typography/Dspl.config.ts b/packages/sdds-finai/src/components/Typography/Dspl.config.ts index 3fb1245a027..af585c75e6e 100644 --- a/packages/sdds-finai/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-finai/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Typography/Heading.config.ts b/packages/sdds-finai/src/components/Typography/Heading.config.ts index 77f16729129..4600eba8ba9 100644 --- a/packages/sdds-finai/src/components/Typography/Heading.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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-finai/src/components/Typography/Text.config.ts b/packages/sdds-finai/src/components/Typography/Text.config.ts index 542bc09a87d..da21d0af5da 100644 --- a/packages/sdds-finai/src/components/Typography/Text.config.ts +++ b/packages/sdds-finai/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/sdds-themes/tokens/sdds_finai'; 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}; `, }, }, diff --git a/packages/sdds-finai/src/components/_beta/Popover/Popover.closeInner.config.ts b/packages/sdds-finai/src/components/_beta/Popover/Popover.closeInner.config.ts index 812da859101..9ef84fd7186 100644 --- a/packages/sdds-finai/src/components/_beta/Popover/Popover.closeInner.config.ts +++ b/packages/sdds-finai/src/components/_beta/Popover/Popover.closeInner.config.ts @@ -1,3 +1,14 @@ +import { + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, _beta_popoverTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,18 +19,18 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.boxShadow}: var(--shadow-down-hard-m); - ${tokens.iconColor}: var(--text-secondary); - ${tokens.iconColorHover}: var(--text-secondary-hover); - ${tokens.iconColorActive}: var(--text-secondary-active); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.boxShadow}: ${shadowDownHardM}; + ${tokens.iconColor}: ${textSecondary}; + ${tokens.iconColorHover}: ${textSecondaryHover}; + ${tokens.iconColorActive}: ${textSecondaryActive}; `, info: css` - ${tokens.backgroundColor}: var(--surface-accent); - ${tokens.boxShadow}: var(--shadow-down-hard-m); - ${tokens.iconColor}: var(--on-dark-text-secondary); - ${tokens.iconColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.iconColorActive}: var(--on-dark-text-secondary-active); + ${tokens.backgroundColor}: ${surfaceAccent}; + ${tokens.boxShadow}: ${shadowDownHardM}; + ${tokens.iconColor}: ${onDarkTextSecondary}; + ${tokens.iconColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.iconColorActive}: ${onDarkTextSecondaryActive}; `, }, size: { diff --git a/packages/sdds-finai/src/components/_beta/Popover/Popover.closeNone.config.ts b/packages/sdds-finai/src/components/_beta/Popover/Popover.closeNone.config.ts index a13aa062c25..0c42bfc2f4a 100644 --- a/packages/sdds-finai/src/components/_beta/Popover/Popover.closeNone.config.ts +++ b/packages/sdds-finai/src/components/_beta/Popover/Popover.closeNone.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceAccent, surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, _beta_popoverTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,12 +9,12 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.boxShadow}: var(--shadow-down-hard-m); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.boxShadow}: ${shadowDownHardM}; `, info: css` - ${tokens.backgroundColor}: var(--surface-accent); - ${tokens.boxShadow}: var(--shadow-down-hard-m); + ${tokens.backgroundColor}: ${surfaceAccent}; + ${tokens.boxShadow}: ${shadowDownHardM}; `, }, size: { diff --git a/packages/sdds-finai/src/components/_beta/Tooltip/Tooltip.config.ts b/packages/sdds-finai/src/components/_beta/Tooltip/Tooltip.config.ts index 0aefb95e1d3..432e8d08687 100644 --- a/packages/sdds-finai/src/components/_beta/Tooltip/Tooltip.config.ts +++ b/packages/sdds-finai/src/components/_beta/Tooltip/Tooltip.config.ts @@ -1,3 +1,10 @@ +import { + bodyS, + bodyXS, + inverseSurfaceSolidCardBrightness, + inverseTextPrimary, + shadowDownHardM, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, _beta_tooltipTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,9 +15,9 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--inverse-surface-solid-card-brightness); - ${tokens.boxShadow}: var(--shadow-down-hard-m); - ${tokens.color}: var(--inverse-text-primary); + ${tokens.backgroundColor}: ${inverseSurfaceSolidCardBrightness}; + ${tokens.boxShadow}: ${shadowDownHardM}; + ${tokens.color}: ${inverseTextPrimary}; `, }, size: { @@ -18,23 +25,23 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.padding}: 0.75rem 0.875rem; ${tokens.gap}: 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}; `, s: css` ${tokens.borderRadius}: 0.5rem; ${tokens.padding}: 0.5rem 0.75rem; ${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-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}; `, }, },