/
sanagl
/
ui-kit-ce
Обзор
Документация
Войти
/
sanagl
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/theme/src/comp/button.ts
289 строк
11 KB
Павел Урядышев
refactor: исправлена поддержка обратной совместимости токенов
11 апр 2024, 17:29
11 апр 2024, 17:29
748e4d2
Код
Авторство
О чём код?
import { Theme } from '../interface' // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export const createButton = (theme: Theme, compatibilityMode?: boolean) => ({ // BACKGROUND colorBackgroundContainedPrimary: compatibilityMode ? theme.colourway.primary : theme.sys.color.primaryAlpha, colorBackgroundContainedPrimaryHover: compatibilityMode ? theme.colourway.primaryHover : theme.sys.color.primaryBeta, colorBackgroundContainedPrimaryActive: compatibilityMode ? theme.colourway.primaryActive : theme.sys.color.primaryGamma, colorBackgroundContainedPrimaryDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledMedium, colorBackgroundContainedSecondary: compatibilityMode ? theme.colourway.secondary : theme.sys.color.secondaryAlpha, colorBackgroundContainedSecondaryHover: compatibilityMode ? theme.colourway.secondaryHover : theme.sys.color.secondaryBeta, colorBackgroundContainedSecondaryActive: compatibilityMode ? theme.colourway.secondaryActive : theme.sys.color.secondaryGamma, colorBackgroundContainedSecondaryDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledMedium, colorBackgroundContainedError: compatibilityMode ? theme.colourway.error : theme.sys.color.errorAlpha, colorBackgroundContainedErrorHover: compatibilityMode ? theme.colourway.errorHover : theme.sys.color.errorBeta, colorBackgroundContainedErrorActive: compatibilityMode ? theme.colourway.errorActive : theme.sys.color.errorGamma, colorBackgroundContainedErrorDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledMedium, colorBackgroundOutlinedPrimaryFocus: compatibilityMode ? theme.colourway.primary : theme.sys.color.primaryAlpha, colorBackgroundOutlinedPrimaryHover: compatibilityMode ? theme.colourway.primaryHover : theme.sys.color.primaryBeta, colorBackgroundOutlinedPrimaryActive: compatibilityMode ? theme.colourway.primaryActive : theme.sys.color.primaryGamma, colorBackgroundOutlinedSecondaryFocus: compatibilityMode ? theme.colourway.secondary : theme.sys.color.secondaryAlpha, colorBackgroundOutlinedSecondaryHover: compatibilityMode ? theme.colourway.secondaryHover : theme.sys.color.secondaryBeta, colorBackgroundOutlinedSecondaryActive: compatibilityMode ? theme.colourway.secondaryActive : theme.sys.color.secondaryGamma, colorBackgroundOutlinedErrorFocus: compatibilityMode ? theme.colourway.error : theme.sys.color.errorAlpha, colorBackgroundOutlinedErrorHover: compatibilityMode ? theme.colourway.errorHover : theme.sys.color.errorBeta, colorBackgroundOutlinedErrorActive: compatibilityMode ? theme.colourway.errorActive : theme.sys.color.errorGamma, colorBackgroundGhostPrimaryHover: compatibilityMode ? theme.colourway.mono02 : theme.sys.color.onBackgroundOverlayHover, colorBackgroundGhostPrimaryActive: compatibilityMode ? theme.colourway.mono04 : theme.sys.color.onBackgroundOverlayActive, colorBackgroundGhostSecondaryHover: compatibilityMode ? theme.colourway.mono02 : theme.sys.color.onBackgroundOverlayHover, colorBackgroundGhostSecondaryActive: compatibilityMode ? theme.colourway.mono04 : theme.sys.color.onBackgroundOverlayActive, colorBackgroundGhostErrorHover: compatibilityMode ? theme.colourway.mono02 : theme.sys.color.onBackgroundOverlayHover, colorBackgroundGhostErrorActive: compatibilityMode ? theme.colourway.mono04 : theme.sys.color.onBackgroundOverlayActive, // TEXT colorTextContainedPrimary: compatibilityMode ? theme.colourway.onPrimaryHigh : theme.sys.color.onPrimaryHigh, colorTextContainedPrimaryDisabled: compatibilityMode ? theme.colourway.onPrimaryLow : theme.sys.color.disabledHigh, colorTextContainedSecondary: compatibilityMode ? theme.colourway.onSecondaryHigh : theme.sys.color.onSecondaryHigh, colorTextContainedSecondaryDisabled: compatibilityMode ? theme.colourway.onSecondaryLow : theme.sys.color.disabledHigh, colorTextContainedError: compatibilityMode ? theme.colourway.onErrorHigh : theme.sys.color.onErrorHigh, colorTextContainedErrorDisabled: compatibilityMode ? theme.colourway.onErrorLow : theme.sys.color.disabledHigh, colorTextOutlinedPrimary: compatibilityMode ? theme.colourway.primary : theme.sys.color.primaryAlpha, colorTextOutlinedPrimaryFocus: compatibilityMode ? theme.colourway.onPrimaryHigh : theme.sys.color.onPrimaryHigh, colorTextOutlinedPrimaryHover: compatibilityMode ? theme.colourway.onPrimaryHigh : theme.sys.color.onPrimaryHigh, colorTextOutlinedPrimaryActive: compatibilityMode ? theme.colourway.onPrimaryHigh : theme.sys.color.onPrimaryHigh, colorTextOutlinedPrimaryDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledHigh, colorTextOutlinedSecondary: compatibilityMode ? theme.colourway.secondary : theme.sys.color.secondaryAlpha, colorTextOutlinedSecondaryFocus: compatibilityMode ? theme.colourway.onSecondaryHigh : theme.sys.color.onSecondaryHigh, colorTextOutlinedSecondaryHover: compatibilityMode ? theme.colourway.onSecondaryHigh : theme.sys.color.onSecondaryHigh, colorTextOutlinedSecondaryActive: compatibilityMode ? theme.colourway.onSecondaryHigh : theme.sys.color.onSecondaryHigh, colorTextOutlinedSecondaryDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledHigh, colorTextOutlinedError: compatibilityMode ? theme.colourway.error : theme.sys.color.errorAlpha, colorTextOutlinedErrorFocus: compatibilityMode ? theme.colourway.onErrorHigh : theme.sys.color.onErrorHigh, colorTextOutlinedErrorHover: compatibilityMode ? theme.colourway.onErrorHigh : theme.sys.color.onErrorHigh, colorTextOutlinedErrorActive: compatibilityMode ? theme.colourway.onErrorHigh : theme.sys.color.onErrorHigh, colorTextOutlinedErrorDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledHigh, colorTextGhostPrimary: compatibilityMode ? theme.colourway.primary : theme.sys.color.primaryAlpha, colorTextGhostPrimaryHover: compatibilityMode ? theme.colourway.primaryHover : theme.sys.color.primaryBeta, colorTextGhostPrimaryActive: compatibilityMode ? theme.colourway.primaryActive : theme.sys.color.primaryGamma, colorTextGhostPrimaryDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledHigh, colorTextGhostSecondary: compatibilityMode ? theme.colourway.secondary : theme.sys.color.secondaryAlpha, colorTextGhostSecondaryHover: compatibilityMode ? theme.colourway.secondaryHover : theme.sys.color.secondaryBeta, colorTextGhostSecondaryActive: compatibilityMode ? theme.colourway.secondaryActive : theme.sys.color.secondaryGamma, colorTextGhostSecondaryDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledHigh, colorTextGhostError: compatibilityMode ? theme.colourway.error : theme.sys.color.errorAlpha, colorTextGhostErrorHover: compatibilityMode ? theme.colourway.errorHover : theme.sys.color.errorBeta, colorTextGhostErrorActive: compatibilityMode ? theme.colourway.errorActive : theme.sys.color.errorGamma, colorTextGhostErrorDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledHigh, // BORDER colorBorderOutlinedPrimary: compatibilityMode ? theme.colourway.primary : theme.sys.color.primaryAlpha, colorBorderOutlinedPrimaryDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledHigh, colorBorderOutlinedSecondary: compatibilityMode ? theme.colourway.secondary : theme.sys.color.secondaryAlpha, colorBorderOutlinedSecondaryDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledHigh, colorBorderOutlinedError: compatibilityMode ? theme.colourway.error : theme.sys.color.errorAlpha, colorBorderOutlinedErrorDisabled: compatibilityMode ? theme.colourway.disabledMajor : theme.sys.color.disabledHigh, colorBorderFocus: compatibilityMode ? theme.colourway.focusPocus : theme.sys.color.focusPocus, // SHADOW colorShadowFocus: compatibilityMode ? theme.colourway.focus : theme.sys.color.focus, shapeBorderRadiusTopLeftMd: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusMd, shapeBorderRadiusTopRightMd: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusMd, shapeBorderRadiusBottomLeftMd: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusMd, shapeBorderRadiusBottomRightMd: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusMd, shapeBorderRadiusTopLeftSm: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusSm, shapeBorderRadiusTopRightSm: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusSm, shapeBorderRadiusBottomLeftSm: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusSm, shapeBorderRadiusBottomRightSm: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusSm, shapeBorderRadiusTopLeftLg: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusLg, shapeBorderRadiusTopRightLg: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusLg, shapeBorderRadiusBottomLeftLg: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusLg, shapeBorderRadiusBottomRightLg: compatibilityMode ? theme.shape.borderRadius : theme.sys.shape.borderRadiusLg, //typography (base) typographyFontFamily: compatibilityMode ? theme.typography.fontFamily.text : theme.sys.typography.uiTextMd.fontFamily, typographyFontWeight: compatibilityMode ? theme.typography.fontWeight.semibold : theme.sys.typography.uiTextMd.fontWeight, typographyLetterSpacing: compatibilityMode ? theme.typography.letterSpacing.button : theme.sys.typography.uiTextMd.letterSpacing, //typography lg typographyFontSizeLg: '', typographyLineHeightLg: '', //typography md typographyFontSizeMd: '', typographyLineHeightMd: '', //typography sm typographyFontSizeSm: '', typographyLineHeightSm: '', //typography (old) /** * @deprecated Используйте соответствующие токены, в зависимости от нужного размера: `typographyFontSizeSm`, `typographyFontSizeMd` или `typographyFontSizeLg` */ typographyFontSize: compatibilityMode ? theme.typography.fontSize.button : theme.sys.typography.uiTextMd.fontSize, /** * @deprecated Используйте соответствующие токены, в зависимости от нужного размера: `typographyLineHeightSm`, `typographyLineHeightMd` или `typographyLineHeightLg` */ typographyLineHeight: compatibilityMode ? theme.typography.lineHeight.button : theme.sys.typography.uiTextMd.lineHeight, })