diff --git a/MIGRATION.md b/MIGRATION.md index 074c690b..de792443 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -18,7 +18,7 @@ import { export const Root = () => ( @@ -45,7 +45,7 @@ const fonts = useFonts() import { StyleSheet } from 'react-native-unistyles' const styles = StyleSheet.create(({ fonts }) => ({ - title: { fontFamily: fonts.primary }, + title: { fontFamily: fonts.fontFamily.heading }, })) ``` diff --git a/README.md b/README.md index b95d6112..bf4be666 100644 --- a/README.md +++ b/README.md @@ -36,26 +36,25 @@ npm i @cdek-it/react-native-ui-kit UI kit использует следующие виды шрифтов. -| Тип шрифта | Используемые начертания | Рекомендуемый шрифт | Рекомендуемый аналог | -| ----------- | ---------------------------------------------- | ------------------- | -------------------- | -| `primary` | – regular
– demibold
– demibold italic | TT Fellows | Noto Sans | -| `secondary` | – regular
– bold | Noto Sans | — | +| Тип шрифта | Используемые начертания | Рекомендуемый шрифт | Рекомендуемый аналог | +| ---------- | ---------------------------------------------- | ------------------- | -------------------- | +| `heading` | – regular
– demibold
– demibold italic | TT Fellows | Noto Sans | +| `base` | – regular
– bold | Noto Sans | — | Исходники шрифтов не поставляются вместе с пакетом, их требуется подключать -отдельно. После подключения шрифтов в проект, необходимо указать их в -`ThemeContextProvider`. +отдельно под именами, указанными в токенах. ```tsx - + ``` После этого шрифты доступны через `useUnistyles().theme.fonts` или прямо в `StyleSheet.create(({ fonts }) => ...)`. -`ThemeContextProvider` настраивает активную тему и шрифты для `unistyles`. -`ThemeContext` остается пустым и всегда имеет значение `null`. +`ThemeContextProvider` только настраивает темы и шрифты для `unistyles`. +`ThemeContext` остается пустым и всегда имеет значение `null`. Deprecated-формат +`fonts={{ primary, secondary }}` временно сохраняется для обратной +совместимости. ### Пример подключения шрифтов с помощью expo-fonts через плагин diff --git a/jest.setup.ts b/jest.setup.ts index 8c1471d8..850baa92 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -13,8 +13,12 @@ jest.mock('react-native-worklets', () => ) interface MockedUnistylesModule { - StyleSheet: { create: (...args: unknown[]) => unknown } + StyleSheet: { + configure: jest.Mock + create: (...args: unknown[]) => unknown + } UnistylesRuntime: { + getTheme: jest.Mock miniRuntime: unknown setTheme: jest.Mock updateTheme: jest.Mock unknown]> @@ -32,23 +36,28 @@ const unistyles = jest.requireMock( // загрузки src/theme (и как следствие — src/utils/SvgUniversal с // `withUnistyles(...)` на top-level) в модуле уже стояли наши моки, а не // исходные identity-заглушки. -const themeRef: { - current: { darkTheme: unknown; lightTheme: unknown } | null -} = { current: null } +const themeRef: { current: { dark: unknown; light: unknown } | null } = { + current: null, +} const getTheme = (themeName: ThemeName | undefined) => - themeName === 'dark' - ? themeRef.current?.darkTheme - : themeRef.current?.lightTheme + themeName === 'dark' ? themeRef.current?.dark : themeRef.current?.light const runtime = unistyles.UnistylesRuntime runtime.themeName = 'light' +runtime.getTheme = jest.fn(getTheme) runtime.setTheme = jest.fn((themeName: ThemeName) => { runtime.themeName = themeName }) runtime.updateTheme = jest.fn() +unistyles.StyleSheet.configure = jest.fn(({ themes }) => { + if (themes) { + themeRef.current = themes + } +}) + unistyles.useUnistyles = jest.fn(() => ({ theme: getTheme(runtime.themeName), rt: runtime, @@ -174,11 +183,16 @@ unistyles.withUnistyles = jest.fn( } ) -themeRef.current = require('./src/theme') as { +const publicThemes = require('./src/theme') as { darkTheme: unknown lightTheme: unknown } +themeRef.current ??= { + dark: publicThemes.darkTheme, + light: publicThemes.lightTheme, +} + generatePropsCombinations = (properties: PropertyCombinations): T[] => { const keys = Object.keys(properties) as Array diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 76ffb39e..e04b763f 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -109,9 +109,9 @@ export const Accordion: React.FC = ({ ({ - color: theme.Panel.Accordion.accordionHeaderTextColor, - })} + uniProps={({ components }) => { + return { color: components.accordion.header.color } + }} /> {Icon ? ( @@ -119,9 +119,9 @@ export const Accordion: React.FC = ({ {...styles.icon} source={Icon} testID={AccordionTestIds.icon} - uniProps={({ theme }) => ({ - color: theme.Panel.Accordion.accordionHeaderTextColor, - })} + uniProps={({ components }) => { + return { color: components.accordion.header.color } + }} /> ) : null} {title} @@ -159,36 +159,42 @@ export const AccordionTestIds = { separator: 'Separator', } -const styles = StyleSheet.create(({ theme, fonts }) => ({ +const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ component: { width: '100%' }, header: { - paddingVertical: theme.Panel.Accordion.accordionHeaderPaddingTopBottom, - gap: 7, + paddingVertical: semantic.dimension.space[400], + gap: components.accordion.extend.extHeader.gap, flexDirection: 'row', alignItems: 'center', - backgroundColor: theme.Panel.Accordion.accordionHeaderBg, + backgroundColor: components.accordion.colorScheme.header.background, + }, + icon: { + width: components.accordion.extend.extHeader.iconSize, + height: components.accordion.extend.extHeader.iconSize, }, - icon: { width: 17.5, height: 17.5 }, title: { - fontSize: 15.75, + fontSize: fonts.fontSize[400], includeFontPadding: false, verticalAlign: 'middle', - fontWeight: 700, - color: theme.Panel.Accordion.accordionHeaderTextColor, - fontFamily: fonts.secondary, + fontWeight: fonts.fontWeight.bold, + color: components.accordion.header.color, + fontFamily: fonts.fontFamily.base, }, contentAnimated: { overflow: 'hidden' }, contentWrapper: { position: 'absolute', width: '100%', - paddingLeft: theme.Panel.Accordion.accordionContentPaddingLeft, - paddingTop: theme.Panel.Accordion.accordionContentPaddingTop, - paddingRight: theme.Panel.Accordion.accordionContentPaddingRight, - paddingBottom: theme.Panel.Accordion.accordionContentPaddingBottom, + paddingLeft: components.accordion.content.paddingLeft, + paddingTop: semantic.dimension.space.none, + paddingRight: components.accordion.content.paddingRight, + paddingBottom: semantic.dimension.space[400], }, separator: { - borderTopColor: theme.Panel.Accordion.accordionHeaderBorderColor, + borderTopColor: components.accordion.panel.borderColor, borderTopWidth: 1, }, - disabled: { mixBlendMode: 'luminosity', opacity: 0.6 }, + disabled: { + mixBlendMode: 'luminosity', + opacity: semantic.effects.opacity[60], + }, })) diff --git a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap index 04669b17..a1483e18 100644 --- a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap +++ b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap @@ -8,7 +8,7 @@ exports[`Accordion Header elements maximal 1`] = ` "width": "100%", }, { - "borderTopColor": "#e2e2e4", + "borderTopColor": "#cecfd2", "borderTopWidth": 1, }, ] @@ -51,9 +51,9 @@ exports[`Accordion Header elements maximal 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingVertical": 14, }, {}, @@ -95,15 +95,15 @@ exports[`Accordion Header elements maximal 1`] = ` > ( height={iconSize} source={Icon} testID={AvatarTestId.icon} - uniProps={({ theme }) => ({ - color: iconColor ?? theme.Misc.Avatar.avatarTextColor, - })} + uniProps={({ components }) => { + return { color: iconColor ?? components.avatar.root.color } + }} width={iconSize} /> ) @@ -257,30 +257,30 @@ export const Avatar = memo( } ) -const styles = StyleSheet.create(({ theme, border, typography, fonts }) => ({ +const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ container: { justifyContent: 'center', alignItems: 'center', - borderRadius: theme.General.borderRadiusXL, - borderWidth: 1, - borderColor: theme.Misc.Avatar.avatarBorderColor, - backgroundColor: theme.Misc.Avatar.avatarBg, + borderRadius: components.avatar.root.borderRadius, + borderWidth: semantic.dimension.borderWidth[100], + borderColor: components.avatar.extend.borderColor, + backgroundColor: components.avatar.root.background, overflow: 'hidden', }, - backgroundFill: { backgroundColor: theme.Misc.Avatar.avatarBg }, - circle: { borderRadius: border.Radius['rounded-full'] }, + backgroundFill: { backgroundColor: components.avatar.root.background }, + circle: { borderRadius: components.avatar.extend.circle.borderRadius }, text: { - fontSize: typography.Size['text-base'], + fontSize: components.avatar.root.fontSize, textTransform: 'uppercase', - color: theme.Misc.Avatar.avatarTextColor, + color: components.avatar.root.color, includeFontPadding: false, verticalAlign: 'middle', - fontFamily: fonts.secondary, + fontFamily: fonts.fontFamily.base, }, badgeContainer: { position: 'absolute', right: 0, top: -7 }, badgeMeasureContainer: { alignSelf: 'flex-start' }, - icon: { width: typography.Size['text-base'] }, - iconXLarge: { width: typography.Size['text-2xl'] }, + icon: { width: components.avatar.icon.size }, + iconXLarge: { width: components.avatar.xl.icon.size }, })) export const AvatarTestId = { diff --git a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index 81e73a20..49469718 100644 --- a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -11,8 +11,8 @@ exports[`Avatar component tests Size: custom, shape: circle, type: icon, with cu { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -25,7 +25,7 @@ exports[`Avatar component tests Size: custom, shape: circle, type: icon, with cu "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -149,8 +149,8 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -163,7 +163,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -172,15 +172,15 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` > ( } ) -const badgeStyles = StyleSheet.create( - ({ theme, border, typography, fonts }) => ({ - container: { alignItems: 'flex-start' }, - dot: { - variants: { - severity: { - basic: { backgroundColor: theme.Misc.Badge.badgeBg }, - info: { - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, - }, - success: { - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonBg, - }, - warning: { - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonBg, - }, - danger: { - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, - }, +const badgeStyles = StyleSheet.create(({ components, semantic, fonts }) => ({ + container: { alignItems: 'flex-start' }, + dot: { + variants: { + severity: { + basic: { + backgroundColor: components.badge.colorScheme.primary.background, + }, + info: { + backgroundColor: components.badge.extend.extDot.info.background, + }, + success: { + backgroundColor: components.badge.extend.extDot.success.background, + }, + warning: { + backgroundColor: components.badge.extend.extDot.warn.background, + }, + danger: { + backgroundColor: components.badge.extend.extDot.danger.background, }, }, }, - dotShape: { - width: theme.Misc.Badge.badgeDotSize, - height: theme.Misc.Badge.badgeDotSize, - borderRadius: border.Radius['rounded-full'], - }, - textBadgeContainer: { - height: theme.Misc.Badge.badgeHeight, - paddingHorizontal: theme.Misc.Tag.tagPadding, - justifyContent: 'center', - borderRadius: border.Radius['rounded-full'], - }, - textBadge: { - color: theme.Misc.Badge.badgeTextColor, - fontSize: typography.Size['text-xs'], - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.primary, - }, - hiddenContainer: { - width: Dimensions.get('window').width, - height: 0, - flexDirection: 'row', - position: 'absolute', - }, - }) -) + }, + dotShape: { + width: components.badge.dot.size, + height: components.badge.dot.size, + borderRadius: components.badge.root.borderRadius, + }, + textBadgeContainer: { + height: components.badge.root.height, + paddingHorizontal: components.badge.root.padding, + justifyContent: 'center', + borderRadius: semantic.dimension.borderRadius.max, + }, + textBadge: { + color: components.badge.colorScheme.primary.color, + fontSize: components.badge.root.fontSize, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.fontFamily.heading, + }, + hiddenContainer: { + width: Dimensions.get('window').width, + height: 0, + flexDirection: 'row', + position: 'absolute', + }, +})) diff --git a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap index e4b181ae..c728269d 100644 --- a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap @@ -18,9 +18,9 @@ exports[`Badge component tests dot, severity: basic 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -43,12 +43,12 @@ exports[`Badge component tests dot, severity: danger 1`] = ` style={ [ { - "backgroundColor": "#fbacaa", + "backgroundColor": "#f47f77", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -71,12 +71,12 @@ exports[`Badge component tests dot, severity: info 1`] = ` style={ [ { - "backgroundColor": "#aad7fb", + "backgroundColor": "#77baf4", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -99,12 +99,12 @@ exports[`Badge component tests dot, severity: success 1`] = ` style={ [ { - "backgroundColor": "#aafbb7", + "backgroundColor": "#77f48a", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -127,12 +127,12 @@ exports[`Badge component tests dot, severity: warning 1`] = ` style={ [ { - "backgroundColor": "#fddeaa", + "backgroundColor": "#facb75", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -158,10 +158,10 @@ exports[`Badge component tests severity: basic 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -171,9 +171,9 @@ exports[`Badge component tests severity: basic 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -206,9 +206,9 @@ exports[`Badge component tests severity: basic 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -236,13 +236,13 @@ exports[`Badge component tests severity: basic 2`] = ` style={ [ { - "backgroundColor": "#aad7fb", + "backgroundColor": "#77baf4", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -252,9 +252,9 @@ exports[`Badge component tests severity: basic 2`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -287,9 +287,9 @@ exports[`Badge component tests severity: basic 2`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -317,13 +317,13 @@ exports[`Badge component tests severity: basic 3`] = ` style={ [ { - "backgroundColor": "#aafbb7", + "backgroundColor": "#77f48a", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -333,9 +333,9 @@ exports[`Badge component tests severity: basic 3`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -368,9 +368,9 @@ exports[`Badge component tests severity: basic 3`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -398,13 +398,13 @@ exports[`Badge component tests severity: basic 4`] = ` style={ [ { - "backgroundColor": "#fddeaa", + "backgroundColor": "#facb75", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -414,9 +414,9 @@ exports[`Badge component tests severity: basic 4`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -449,9 +449,9 @@ exports[`Badge component tests severity: basic 4`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -479,13 +479,13 @@ exports[`Badge component tests severity: basic 5`] = ` style={ [ { - "backgroundColor": "#fbacaa", + "backgroundColor": "#f47f77", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -495,9 +495,9 @@ exports[`Badge component tests severity: basic 5`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -530,9 +530,9 @@ exports[`Badge component tests severity: basic 5`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -563,10 +563,10 @@ exports[`Badge component tests severity: default 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -576,9 +576,9 @@ exports[`Badge component tests severity: default 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -611,9 +611,9 @@ exports[`Badge component tests severity: default 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -646,9 +646,9 @@ exports[`Badge component tests with custom style 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } diff --git a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index 2a91e4a6..61172500 100644 --- a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -37,17 +37,15 @@ exports[`Button component tests Button default props 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 10.5, + "borderColor": "transparent", + "borderRadius": 14, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 35, + "gap": 8, + "height": "auto", "justifyContent": "center", - "maxHeight": 35, - "minHeight": 35, "paddingHorizontal": 14, - "paddingVertical": 0, + "paddingVertical": 8, }, false, ] @@ -56,9 +54,9 @@ exports[`Button component tests Button default props 1`] = ` ({ - indicator: { - color: theme.Button.Disabled.disabledButtonTextColor, - variants: { - size: { - xlarge: { height: 21 }, - large: { height: 21 }, - base: { height: 17.5 }, - small: { height: 14 }, +const buttonActivityIndicatorStyles = StyleSheet.create( + ({ components: { button } }) => ({ + indicator: { + color: button.extend.disabledColor, + variants: { + size: { + xlarge: { height: 21 }, + large: { height: 21 }, + base: { height: 17.5 }, + small: { height: 14 }, + }, }, }, - }, -})) + }) +) diff --git a/src/components/Button/utils/ButtonContainer.tsx b/src/components/Button/utils/ButtonContainer.tsx index 682cc8ed..91a23db0 100644 --- a/src/components/Button/utils/ButtonContainer.tsx +++ b/src/components/Button/utils/ButtonContainer.tsx @@ -80,96 +80,91 @@ const ButtonContainerComponent = ({ export const ButtonContainer = genericMemo(ButtonContainerComponent) +// `transparent` здесь — отсутствие фона или границы, а не цвет дизайн-системы: +// прозрачность не выражена ни semantic-токеном, ни свойствами button.extend.extText. const buttonContainerStyles = StyleSheet.create( - ({ theme, border, spacing, sizing }) => ({ + ({ components: { button }, semantic }) => ({ container: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', - borderWidth: border.Width.border, + borderWidth: button.extend.borderWidth, variants: { size: { xlarge: { - paddingHorizontal: spacing.Padding['p-6'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeightXL, - minHeight: theme.Button.Common.buttonHeightXL, - maxHeight: theme.Button.Common.buttonHeightXL, - gap: spacing.Gap['gap-3'], - borderRadius: theme.General.borderRadius2XL, + paddingHorizontal: button.extend.extXlg.paddingX, + paddingVertical: button.extend.extXlg.paddingY, + height: button.extend.extXlg.height, + minHeight: button.extend.extXlg.height, + maxHeight: button.extend.extXlg.height, + gap: button.extend.extXlg.gap, + borderRadius: button.extend.extXlg.borderRadius, }, large: { - paddingHorizontal: spacing.Padding['p-6'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeightLG, - minHeight: theme.Button.Common.buttonHeightLG, - maxHeight: theme.Button.Common.buttonHeightLG, - gap: spacing.Gap['gap-3'], - borderRadius: theme.General.borderRadius2XL, + paddingHorizontal: button.root.lg.paddingX, + paddingVertical: button.root.lg.paddingY, + height: button.extend.extLg.height, + minHeight: button.extend.extLg.height, + maxHeight: button.extend.extLg.height, + gap: button.extend.extLg.gap, + borderRadius: button.extend.extLg.borderRadius, }, base: { - paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeight, - minHeight: theme.Button.Common.buttonHeight, - maxHeight: theme.Button.Common.buttonHeight, - gap: theme.General.inlineSpacing, - borderRadius: theme.General.borderRadiusXL, + paddingHorizontal: button.root.paddingX, + paddingVertical: button.root.paddingY, + height: 'auto', + gap: button.root.gap, + borderRadius: button.root.borderRadius, }, small: { - paddingHorizontal: spacing.Padding['p-3'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeightSM, - minHeight: theme.Button.Common.buttonHeightSM, - maxHeight: theme.Button.Common.buttonHeightSM, - gap: theme.General.inlineSpacing, - borderRadius: theme.General.borderRadiusXL, + paddingHorizontal: button.root.sm.paddingX, + paddingVertical: button.root.sm.paddingY, + height: 'auto', + gap: button.extend.extSm.gap, + borderRadius: button.extend.extSm.borderRadius, }, }, shape: { square: {}, - circle: { borderRadius: border.Radius['rounded-full'] }, + circle: { borderRadius: button.root.roundedBorderRadius }, }, variant: { primary: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Brand.buttonBg, + borderColor: button.colorScheme.root.primary.borderColor, + backgroundColor: button.colorScheme.root.primary.background, }, secondary: { - borderColor: theme.Button.Primary.secondaryButtonBorderColor, - backgroundColor: theme.Button.Primary.secondaryButtonBg, + borderColor: button.colorScheme.root.secondary.borderColor, + backgroundColor: button.colorScheme.root.secondary.background, }, tertiary: { - borderColor: theme.Button.Secondary.helpButtonBorderColor, - backgroundColor: theme.Button.Secondary.helpButtonBg, - }, - text: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, + borderColor: button.colorScheme.root.contrast.borderColor, + backgroundColor: button.colorScheme.root.contrast.background, }, + text: { borderColor: 'transparent', backgroundColor: 'transparent' }, link: { - paddingHorizontal: 0, - paddingVertical: spacing.Padding['p-1'], + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space[100], height: 'auto', minHeight: 'auto', - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, + borderColor: 'transparent', + backgroundColor: button.extend.extLink.background, }, basic: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Brand.buttonBg, + borderColor: button.colorScheme.root.primary.borderColor, + backgroundColor: button.colorScheme.root.primary.background, }, outlined: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, + borderColor: button.colorScheme.outlined.primary.borderColor, + backgroundColor: 'transparent', }, }, severity: { info: {}, success: {}, warning: {}, danger: {} }, pressed: { true: {}, false: {} }, disabled: { true: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - borderColor: theme.Button.Disabled.disabledButtonBorderColor, + backgroundColor: button.extend.disabledBackground, + borderColor: 'transparent', }, false: {}, }, @@ -181,40 +176,40 @@ const buttonContainerStyles = StyleSheet.create( variant: 'primary', pressed: 'true', styles: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Brand.buttonHoverBg, + borderColor: button.colorScheme.root.primary.hoverBorderColor, + backgroundColor: button.colorScheme.root.primary.hoverBackground, }, }, { variant: 'secondary', pressed: 'true', styles: { - borderColor: theme.Button.Primary.secondaryButtonHoverBorderColor, - backgroundColor: theme.Button.Primary.secondaryButtonHoverBg, + borderColor: button.colorScheme.root.secondary.hoverBorderColor, + backgroundColor: button.colorScheme.root.secondary.hoverBackground, }, }, { variant: 'tertiary', pressed: 'true', styles: { - borderColor: theme.Button.Secondary.helpButtonHoverBorderColor, - backgroundColor: theme.Button.Secondary.helpButtonHoverBg, + borderColor: button.colorScheme.root.contrast.hoverBorderColor, + backgroundColor: button.colorScheme.root.contrast.hoverBackground, }, }, { variant: 'text', pressed: 'true', styles: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.primary.hoverBackground, }, }, { variant: 'link', disabled: 'true', styles: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, @@ -223,118 +218,96 @@ const buttonContainerStyles = StyleSheet.create( variant: 'basic', severity: 'info', styles: { - borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, + borderColor: button.colorScheme.root.info.borderColor, + backgroundColor: button.colorScheme.root.info.background, }, }, { variant: 'outlined', severity: 'info', styles: { - borderColor: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonBg, + borderColor: button.colorScheme.outlined.info.borderColor, + backgroundColor: 'transparent', }, }, { variant: 'text', severity: 'info', styles: { - borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Text.infoTextButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, { variant: 'basic', severity: 'success', styles: { - borderColor: - theme.Button.Severity.Success.Basic.successButtonBorderColor, - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonBg, + borderColor: button.colorScheme.root.success.borderColor, + backgroundColor: button.colorScheme.root.success.background, }, }, { variant: 'outlined', severity: 'success', styles: { - borderColor: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Success.Outlined.successOutlinedButtonBg, + borderColor: button.colorScheme.outlined.success.borderColor, + backgroundColor: 'transparent', }, }, { variant: 'text', severity: 'success', styles: { - borderColor: - theme.Button.Severity.Success.Basic.successButtonBorderColor, - backgroundColor: - theme.Button.Severity.Success.Text.successTextButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, { variant: 'basic', severity: 'warning', styles: { - borderColor: - theme.Button.Severity.Warning.Basic.warningButtonBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonBg, + borderColor: button.colorScheme.root.warn.borderColor, + backgroundColor: button.colorScheme.root.warn.background, }, }, { variant: 'outlined', severity: 'warning', styles: { - borderColor: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Outlined.warningOutlinedButtonBg, + borderColor: button.colorScheme.outlined.warn.borderColor, + backgroundColor: 'transparent', }, }, { variant: 'text', severity: 'warning', styles: { - borderColor: - theme.Button.Severity.Warning.Basic.warningButtonBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Text.warningTextButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, { variant: 'basic', severity: 'danger', styles: { - borderColor: - theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, + borderColor: button.colorScheme.root.danger.borderColor, + backgroundColor: button.colorScheme.root.danger.background, }, }, { variant: 'outlined', severity: 'danger', styles: { - borderColor: - theme.Button.Severity.Danger.Outlined - .dangerOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonBg, + borderColor: button.colorScheme.outlined.danger.borderColor, + backgroundColor: 'transparent', }, }, { variant: 'text', severity: 'danger', styles: { - borderColor: - theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Text.dangerTextButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, @@ -344,8 +317,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'info', pressed: 'true', styles: { - borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonHoverBg, + borderColor: button.colorScheme.root.info.hoverBorderColor, + backgroundColor: button.colorScheme.root.info.hoverBackground, }, }, { @@ -353,11 +326,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'info', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Info.Outlined - .infoOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonHoverBg, + borderColor: button.colorScheme.outlined.info.borderColor, + backgroundColor: button.colorScheme.outlined.info.hoverBackground, }, }, { @@ -365,9 +335,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'info', pressed: 'true', styles: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Info.Text.infoTextButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.info.hoverBackground, }, }, { @@ -375,10 +344,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'success', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Success.Basic.successButtonBorderColor, - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonHoverBg, + borderColor: button.colorScheme.root.success.hoverBorderColor, + backgroundColor: button.colorScheme.root.success.hoverBackground, }, }, { @@ -386,12 +353,9 @@ const buttonContainerStyles = StyleSheet.create( severity: 'success', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonHoverBorderColor, + borderColor: button.colorScheme.outlined.success.borderColor, backgroundColor: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonHoverBg, + button.colorScheme.outlined.success.hoverBackground, }, }, { @@ -399,9 +363,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'success', pressed: 'true', styles: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Success.Text.successTextButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.success.hoverBackground, }, }, { @@ -409,10 +372,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'warning', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Warning.Basic.warningButtonBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonHoverBg, + borderColor: button.colorScheme.root.warn.hoverBorderColor, + backgroundColor: button.colorScheme.root.warn.hoverBackground, }, }, { @@ -420,12 +381,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'warning', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonHoverBg, + borderColor: button.colorScheme.outlined.warn.borderColor, + backgroundColor: button.colorScheme.outlined.warn.hoverBackground, }, }, { @@ -433,9 +390,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'warning', pressed: 'true', styles: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Warning.Text.warningTextButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.warn.hoverBackground, }, }, { @@ -443,10 +399,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'danger', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Basic.dangerButtonHoverBg, + borderColor: button.colorScheme.root.danger.hoverBorderColor, + backgroundColor: button.colorScheme.root.danger.hoverBackground, }, }, { @@ -454,11 +408,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'danger', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Danger.Outlined - .dangerOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonHoverBg, + borderColor: button.colorScheme.outlined.danger.borderColor, + backgroundColor: button.colorScheme.outlined.danger.hoverBackground, }, }, { @@ -466,9 +417,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'danger', pressed: 'true', styles: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Danger.Text.dangerTextButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.danger.hoverBackground, }, }, @@ -478,11 +428,11 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'xlarge', styles: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], - height: sizing.Height['h-2'], - minHeight: sizing.Height['h-2'], - maxHeight: sizing.Height['h-2'], + paddingHorizontal: semantic.dimension.space[100], + paddingVertical: semantic.dimension.space[100], + height: button.extend.extLink.xlg.iconOnlyWidth, + minHeight: button.extend.extLink.xlg.iconOnlyWidth, + maxHeight: button.extend.extLink.xlg.iconOnlyWidth, }, }, { @@ -490,11 +440,11 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'large', styles: { - paddingHorizontal: spacing.Gap['gap-0'], - paddingVertical: spacing.Gap['gap-0'], - height: 24.5, - minHeight: 24.5, - maxHeight: 24.5, + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space.none, + height: button.extend.extLink.lg.iconOnlyWidth, + minHeight: button.extend.extLink.lg.iconOnlyWidth, + maxHeight: button.extend.extLink.lg.iconOnlyWidth, }, }, { @@ -502,11 +452,11 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'base', styles: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], - height: 21.5, - minHeight: 21.5, - maxHeight: 21.5, + paddingHorizontal: semantic.dimension.space[100], + paddingVertical: semantic.dimension.space[100], + height: button.extend.extLink.base.iconOnlyWidth, + minHeight: button.extend.extLink.base.iconOnlyWidth, + maxHeight: button.extend.extLink.base.iconOnlyWidth, }, }, { @@ -514,11 +464,11 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'small', styles: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], - height: sizing.Height['h-1'], - minHeight: sizing.Height['h-2'], - maxHeight: sizing.Height['h-2'], + paddingHorizontal: semantic.dimension.space[100], + paddingVertical: semantic.dimension.space[100], + height: button.extend.extLink.sm.iconOnlyWidth, + minHeight: button.extend.extLink.sm.iconOnlyWidth, + maxHeight: button.extend.extLink.sm.iconOnlyWidth, }, }, ], diff --git a/src/components/Button/utils/ButtonIcon.tsx b/src/components/Button/utils/ButtonIcon.tsx index 9dcb9c6c..6be2a77f 100644 --- a/src/components/Button/utils/ButtonIcon.tsx +++ b/src/components/Button/utils/ButtonIcon.tsx @@ -48,140 +48,111 @@ const ButtonIconComponent = ({ export const ButtonIcon = genericMemo(ButtonIconComponent) -const buttonIconStyles = StyleSheet.create(({ theme, typography }) => ({ - icon: { - variants: { - size: { - xlarge: { - height: typography.Size['text-2xl'], - width: typography.Size['text-2xl'], +const buttonIconStyles = StyleSheet.create( + ({ components: { button }, semantic }) => ({ + icon: { + variants: { + size: { + xlarge: { + height: button.extend.iconSize.lg, + width: button.extend.iconSize.lg, + }, + large: { + height: button.extend.iconSize.lg, + width: button.extend.iconSize.lg, + }, + base: { + height: button.extend.iconSize.md, + width: button.extend.iconSize.md, + }, + small: { + height: button.extend.iconSize.sm, + width: button.extend.iconSize.sm, + }, }, - large: { - height: typography.Size['text-2xl'], - width: typography.Size['text-2xl'], + variant: { + primary: { color: button.colorScheme.root.primary.color }, + secondary: { color: button.colorScheme.root.secondary.color }, + tertiary: { color: button.colorScheme.root.contrast.color }, + text: { color: button.colorScheme.text.primary.color }, + link: { color: button.colorScheme.link.color }, + basic: { color: button.colorScheme.root.primary.color }, + outlined: { color: button.colorScheme.outlined.primary.color }, }, - base: { - height: typography.Size['text-xl'], - width: typography.Size['text-xl'], + severity: { info: {}, success: {}, warning: {}, danger: {} }, + pressed: { true: {}, false: {} }, + disabled: { true: { color: button.extend.disabledColor }, false: {} }, + }, + compoundVariants: [ + // link pressed + { + variant: 'link', + pressed: 'true', + styles: { color: semantic.colorScheme.color.fg.muted }, }, - small: { - height: typography.Size['text-base'], - width: typography.Size['text-base'], - }, - }, - variant: { - primary: { color: theme.Button.Brand.buttonTextColor }, - secondary: { color: theme.Button.Primary.secondaryButtonTextColor }, - tertiary: { color: theme.Button.Secondary.helpButtonTextColor }, - text: { color: theme.Button.Text.textButtonTextColor }, - link: { color: theme.Button.Text.textButtonTextColor }, - basic: { color: theme.Button.Brand.buttonTextColor }, - outlined: { color: theme.Button.Brand.buttonTextColor }, - }, - severity: { info: {}, success: {}, warning: {}, danger: {} }, - pressed: { true: {}, false: {} }, - disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, - false: {}, - }, - }, - compoundVariants: [ - // link pressed - { - variant: 'link', - pressed: 'true', - styles: { color: typography.Color.Common['text-color-secondary'] }, - }, - // severity icon colors - { - variant: 'basic', - severity: 'info', - styles: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor }, - }, - { - variant: 'outlined', - severity: 'info', - styles: { - color: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor, + // severity icon colors + { + variant: 'basic', + severity: 'info', + styles: { color: button.colorScheme.root.info.color }, }, - }, - { - variant: 'text', - severity: 'info', - styles: { - color: theme.Button.Severity.Info.Text.infoTextButtonTextColor, + { + variant: 'outlined', + severity: 'info', + styles: { color: button.colorScheme.outlined.info.color }, }, - }, - { - variant: 'basic', - severity: 'success', - styles: { - color: theme.Button.Severity.Success.Basic.successButtonTextColor, + { + variant: 'text', + severity: 'info', + styles: { color: button.colorScheme.text.info.color }, }, - }, - { - variant: 'outlined', - severity: 'success', - styles: { - color: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'success', + styles: { color: button.colorScheme.root.success.color }, }, - }, - { - variant: 'text', - severity: 'success', - styles: { - color: theme.Button.Severity.Success.Text.successTextButtonTextColor, + { + variant: 'outlined', + severity: 'success', + styles: { color: button.colorScheme.outlined.success.color }, }, - }, - { - variant: 'basic', - severity: 'warning', - styles: { - color: theme.Button.Severity.Warning.Basic.warningButtonTextColor, + { + variant: 'text', + severity: 'success', + styles: { color: button.colorScheme.text.success.color }, }, - }, - { - variant: 'outlined', - severity: 'warning', - styles: { - color: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'warning', + styles: { color: button.colorScheme.root.warn.color }, }, - }, - { - variant: 'text', - severity: 'warning', - styles: { - color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor, + { + variant: 'outlined', + severity: 'warning', + styles: { color: button.colorScheme.outlined.warn.color }, }, - }, - { - variant: 'basic', - severity: 'danger', - styles: { - color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor, + { + variant: 'text', + severity: 'warning', + styles: { color: button.colorScheme.text.warn.color }, }, - }, - { - variant: 'outlined', - severity: 'danger', - styles: { - color: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'danger', + styles: { color: button.colorScheme.root.danger.color }, }, - }, - { - variant: 'text', - severity: 'danger', - styles: { - color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor, + { + variant: 'outlined', + severity: 'danger', + styles: { color: button.colorScheme.outlined.danger.color }, }, - }, - ], - }, -})) + { + variant: 'text', + severity: 'danger', + styles: { color: button.colorScheme.text.danger.color }, + }, + ], + }, + }) +) diff --git a/src/components/Button/utils/ButtonLabel.tsx b/src/components/Button/utils/ButtonLabel.tsx index 5b541a60..22e315f8 100644 --- a/src/components/Button/utils/ButtonLabel.tsx +++ b/src/components/Button/utils/ButtonLabel.tsx @@ -48,132 +48,103 @@ const ButtonLabelComponent = ({ export const ButtonLabel = genericMemo(ButtonLabelComponent) -const buttonLabelStyles = StyleSheet.create(({ theme, typography, fonts }) => ({ - label: { - fontWeight: 600, - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.primary, - variants: { - size: { - xlarge: { fontSize: typography.Size['text-xl'] }, - large: { fontSize: typography.Size['text-xl'] }, - base: { fontSize: typography.Size['text-base'] }, - small: { fontSize: typography.Size['text-sm'] }, - }, - variant: { - primary: { color: theme.Button.Brand.buttonTextColor }, - secondary: { color: theme.Button.Primary.secondaryButtonTextColor }, - tertiary: { color: theme.Button.Secondary.helpButtonTextColor }, - text: { color: theme.Button.Text.textButtonTextColor }, - link: { color: theme.Button.Text.textButtonTextColor }, - basic: { color: theme.Button.Brand.buttonTextColor }, - outlined: { color: theme.Button.Brand.buttonTextColor }, - }, - severity: { info: {}, success: {}, warning: {}, danger: {} }, - pressed: { true: {}, false: {} }, - disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, - false: {}, - }, - }, - compoundVariants: [ - // link pressed color change - { - variant: 'link', - pressed: 'true', - styles: { color: typography.Color.Common['text-color-secondary'] }, - }, +const buttonLabelStyles = StyleSheet.create( + ({ components: { button }, semantic, fonts }) => ({ + label: { + fontWeight: fonts.fontWeight.demibold, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.fontFamily.heading, + variants: { + size: { + xlarge: { fontSize: fonts.fontSize[500] }, + large: { fontSize: fonts.fontSize[500] }, + base: { fontSize: fonts.fontSize[300] }, + small: { fontSize: fonts.fontSize[100] }, + }, + variant: { + primary: { color: button.colorScheme.root.primary.color }, + secondary: { color: button.colorScheme.root.secondary.color }, + tertiary: { color: button.colorScheme.root.contrast.color }, + text: { color: button.colorScheme.text.primary.color }, + link: { color: button.colorScheme.link.color }, + basic: { color: button.colorScheme.root.primary.color }, + outlined: { color: button.colorScheme.outlined.primary.color }, + }, + severity: { info: {}, success: {}, warning: {}, danger: {} }, + pressed: { true: {}, false: {} }, + disabled: { true: { color: button.extend.disabledColor }, false: {} }, + }, + compoundVariants: [ + // link pressed color change + { + variant: 'link', + pressed: 'true', + styles: { color: semantic.colorScheme.color.fg.muted }, + }, - // severity label colors - { - variant: 'basic', - severity: 'info', - styles: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor }, - }, - { - variant: 'outlined', - severity: 'info', - styles: { - color: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor, + // severity label colors + { + variant: 'basic', + severity: 'info', + styles: { color: button.colorScheme.root.info.color }, }, - }, - { - variant: 'text', - severity: 'info', - styles: { - color: theme.Button.Severity.Info.Text.infoTextButtonTextColor, + { + variant: 'outlined', + severity: 'info', + styles: { color: button.colorScheme.outlined.info.color }, }, - }, - { - variant: 'basic', - severity: 'success', - styles: { - color: theme.Button.Severity.Success.Basic.successButtonTextColor, + { + variant: 'text', + severity: 'info', + styles: { color: button.colorScheme.text.info.color }, }, - }, - { - variant: 'outlined', - severity: 'success', - styles: { - color: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'success', + styles: { color: button.colorScheme.root.success.color }, }, - }, - { - variant: 'text', - severity: 'success', - styles: { - color: theme.Button.Severity.Success.Text.successTextButtonTextColor, + { + variant: 'outlined', + severity: 'success', + styles: { color: button.colorScheme.outlined.success.color }, }, - }, - { - variant: 'basic', - severity: 'warning', - styles: { - color: theme.Button.Severity.Warning.Basic.warningButtonTextColor, + { + variant: 'text', + severity: 'success', + styles: { color: button.colorScheme.text.success.color }, }, - }, - { - variant: 'outlined', - severity: 'warning', - styles: { - color: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'warning', + styles: { color: button.colorScheme.root.warn.color }, }, - }, - { - variant: 'text', - severity: 'warning', - styles: { - color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor, + { + variant: 'outlined', + severity: 'warning', + styles: { color: button.colorScheme.outlined.warn.color }, }, - }, - { - variant: 'basic', - severity: 'danger', - styles: { - color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor, + { + variant: 'text', + severity: 'warning', + styles: { color: button.colorScheme.text.warn.color }, }, - }, - { - variant: 'outlined', - severity: 'danger', - styles: { - color: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'danger', + styles: { color: button.colorScheme.root.danger.color }, }, - }, - { - variant: 'text', - severity: 'danger', - styles: { - color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor, + { + variant: 'outlined', + severity: 'danger', + styles: { color: button.colorScheme.outlined.danger.color }, }, - }, - ], - }, -})) + { + variant: 'text', + severity: 'danger', + styles: { color: button.colorScheme.text.danger.color }, + }, + ], + }, + }) +) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 41a89bf7..b1e3b144 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -97,9 +97,9 @@ export const Checkbox = memo( ({ - color: theme.Form.Checkbox.checkboxIconActiveColor, - })} + uniProps={({ components }) => { + return { color: components.checkbox.icon.checkedColor } + }} /> ) : null} @@ -107,57 +107,52 @@ export const Checkbox = memo( } ) -const styles = StyleSheet.create(({ theme, border, sizing }) => ({ +const styles = StyleSheet.create(({ components, semantic }) => ({ container: { justifyContent: 'center', alignItems: 'center', - width: theme.Form.Checkbox.checkboxWidth, - height: theme.Form.Checkbox.checkboxHeight, + width: components.checkbox.root.width, + height: components.checkbox.root.height, }, background: { ...RNStyleSheet.absoluteFillObject }, backgroundState: { - borderRadius: border.Radius['rounded-lg'], - borderWidth: border.Width.border, + borderRadius: components.checkbox.root.borderRadius, + borderWidth: components.checkbox.root.extend.borderWidth, variants: { filled: { true: { - backgroundColor: theme.Form.Checkbox.checkboxActiveBg, - borderColor: theme.Form.Checkbox.checkboxActiveBorderColor, + backgroundColor: components.checkbox.root.checkedBackground, + borderColor: components.checkbox.root.checkedBorderColor, }, false: { - backgroundColor: theme.Form.InputText.inputBg, - borderColor: theme.Form.InputText.inputBorderColor, + backgroundColor: components.checkbox.root.background, + borderColor: components.checkbox.root.borderColor, }, }, pressed: { - true: { borderColor: theme.Form.InputText.inputHoverBorderColor }, + true: { borderColor: components.checkbox.root.hoverBorderColor }, false: {}, }, state: { - danger: { - borderColor: theme.Form.InputText.inputErrorBorderColor, - outlineStyle: 'solid', - outlineColor: theme.General.focusOutlineErrorColor, - outlineWidth: Math.round(theme.General.focusShadowWidth), - }, + danger: { borderColor: components.checkbox.root.invalidBorderColor }, }, - disabled: { true: { outlineWidth: 0 }, false: {} }, + disabled: { true: {}, false: {} }, }, compoundVariants: [ { filled: 'true', pressed: 'true', styles: { - backgroundColor: theme.Form.Checkbox.checkboxActiveHoverBg, - borderColor: theme.Form.Checkbox.checkboxActiveHoverBorderColor, + backgroundColor: components.checkbox.root.checkedHoverBackground, + borderColor: components.checkbox.root.checkedHoverBorderColor, }, }, { filled: 'false', disabled: 'true', styles: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - borderColor: theme.Form.InputText.inputBorderColor, + backgroundColor: components.checkbox.root.disabledBackground, + borderColor: components.checkbox.root.borderColor, mixBlendMode: 'luminosity', }, }, @@ -165,12 +160,12 @@ const styles = StyleSheet.create(({ theme, border, sizing }) => ({ filled: 'true', disabled: 'true', styles: { - borderColor: theme.Form.Checkbox.checkboxActiveBorderColor, - opacity: 0.2, + borderColor: components.checkbox.root.checkedBorderColor, + opacity: semantic.effects.opacity[20], mixBlendMode: 'luminosity', }, }, ], }, - icon: { height: sizing.Height['h-1'], width: sizing.Width['w-1'] }, + icon: { height: 14, width: 14 }, })) diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap index 872efcb8..11e41577 100644 --- a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap +++ b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap @@ -36,9 +36,9 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -55,12 +55,9 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f }, { "backgroundColor": "#ffffff", - "borderColor": "#db3424", - "borderRadius": 7, + "borderColor": "#f47f77", + "borderRadius": 8, "borderWidth": 1, - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, }, ] } @@ -104,9 +101,9 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -124,7 +121,7 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f { "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, }, ] @@ -169,9 +166,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -188,12 +185,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa }, { "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "borderRadius": 7, + "borderColor": "#f47f77", + "borderRadius": 8, "borderWidth": 1, - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, }, ] } @@ -316,9 +310,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -336,7 +330,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa { "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, }, ] @@ -460,9 +454,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -479,12 +473,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal }, { "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "borderRadius": 7, + "borderColor": "#f47f77", + "borderRadius": 8, "borderWidth": 1, - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, }, ] } @@ -607,9 +598,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -627,7 +618,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal { "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, }, ] @@ -751,9 +742,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -771,13 +762,10 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru { "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, "mixBlendMode": "luminosity", "opacity": 0.2, - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 0, }, ] } @@ -900,9 +888,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -920,11 +908,10 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru { "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, "mixBlendMode": "luminosity", "opacity": 0.2, - "outlineWidth": 0, }, ] } @@ -1047,9 +1034,9 @@ exports[`Checkbox snapshots default 1`] = ` style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -1067,7 +1054,7 @@ exports[`Checkbox snapshots default 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, }, ] diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 921f630b..fffcb528 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -5,9 +5,11 @@ import { Text, Pressable, type PressableProps } from 'react-native' import { StyleSheet } from 'react-native-unistyles' -import type { ThemeType } from '../../theme/types' - -import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' +import { + type SvgSource, + SvgUniversal, + type SvgUniversalTheme, +} from '../../utils/SvgUniversal' export interface ChipProps extends PressableProps { /** SVG-иконка */ @@ -44,11 +46,13 @@ export const Chip = memo( showIcon = true, ...rest }) => { - const iconUniProps = ({ theme }: ThemeType) => ({ - color: disabled - ? theme.Button.Disabled.disabledButtonTextColor - : theme.Misc.Chip.chipTextColor, - }) + const iconUniProps = ({ components, semantic }: SvgUniversalTheme) => { + return { + color: disabled + ? semantic.colorScheme.color.fg.muted + : components.chip.colorScheme.root.color, + } + } return ( ( {...styles.icon} source={IconX} style={pressed ? styles.pressedClose : null} - uniProps={({ theme }) => ({ - color: disabled - ? theme.Button.Disabled.disabledButtonTextColor - : theme.Misc.Chip.chipTextColor, - })} + uniProps={({ components, semantic }) => { + return { + color: disabled + ? semantic.colorScheme.color.fg.muted + : components.chip.colorScheme.root.color, + } + }} /> )} @@ -97,46 +103,44 @@ export const Chip = memo( } ) -const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({ +// `transparent` здесь — отсутствие границы, а не цвет дизайн-системы: +// у chip.root нет borderColor, прозрачность не выражена semantic-токеном. +const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ chip: { - height: theme.Misc.Chip.chipHeight, alignSelf: 'flex-start', justifyContent: 'center', alignItems: 'center', flexDirection: 'row', - gap: theme.General.inlineSpacing, + gap: components.chip.root.gap, - paddingHorizontal: theme.Misc.Chip.chipPaddingLeftRight, - paddingVertical: theme.Misc.Chip.chipPaddingTopBottom, + paddingHorizontal: components.chip.root.paddingX, + paddingVertical: components.chip.root.paddingY, - borderRadius: theme.Misc.Chip.chipBorderRadius, - borderWidth: border.Width.border, + borderRadius: components.chip.root.borderRadius, + borderWidth: components.chip.extend.borderWidth, - backgroundColor: theme.Misc.Chip.chipBg, - borderColor: theme.Misc.Chip.chipBorderColor, + backgroundColor: components.chip.colorScheme.root.background, + borderColor: components.chip.extend.borderColor, }, disabledChip: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - opacity: 0.6, + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, + borderColor: 'transparent', + opacity: semantic.effects.opacity[60], mixBlendMode: 'luminosity', }, - icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, + icon: { width: components.chip.icon.size, height: components.chip.icon.size }, text: { - fontSize: typography.Size['text-base'], + fontSize: fonts.fontSize[300], verticalAlign: 'middle', - color: theme.Misc.Chip.chipTextColor, + color: components.chip.colorScheme.root.color, includeFontPadding: false, - fontFamily: fonts.secondary, + fontFamily: fonts.fontFamily.base, }, - disabledText: { color: theme.General.textSecondaryColor }, + disabledText: { color: semantic.colorScheme.color.fg.muted }, pressedClose: { - borderWidth: border.Width['border-3'], - borderColor: border.Color.Service['border-success'][400], - borderRadius: border.Radius['rounded-full'], + borderWidth: semantic.dimension.borderWidth[300], + borderColor: semantic.colorScheme.color.border.status.success.strong, + borderRadius: semantic.dimension.borderRadius.max, }, })) diff --git a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap index d7fe5652..6df9070f 100644 --- a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap @@ -42,16 +42,15 @@ exports[`Chip component tests { { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "#f0f0f1", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "#e2e2e4", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 24.5, + "gap": 8, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -63,9 +62,9 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -120,16 +119,15 @@ exports[`Chip component tests { { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "#f0f0f1", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "#e2e2e4", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 24.5, + "gap": 8, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -138,15 +136,15 @@ exports[`Chip component tests { > = ({ ) } -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ root: { - backgroundColor: theme.Overlay.Dialog.Header.dialogHeaderBg, - borderColor: theme.Overlay.Overlay.overlayContentBorderColor, - borderRadius: theme.General.borderRadius2XL, - }, - body: { - paddingVertical: theme.Overlay.Dialog.Body.dialogContentPaddingTopBottom, - paddingHorizontal: theme.Overlay.Dialog.Body.dialogContentPaddingLeftRight, + backgroundColor: components.dialog.root.background, + borderColor: components.dialog.root.borderColor, + borderRadius: components.dialog.root.borderRadius, }, + body: { padding: components.dialog.content.padding }, footer: { - paddingBottom: theme.Overlay.Dialog.Footer.dialogFooterPaddingLeftRight, - paddingHorizontal: theme.Overlay.Dialog.Footer.dialogFooterPaddingLeftRight, + paddingTop: components.dialog.footer.paddingTop, + paddingBottom: components.dialog.footer.paddingBottom, + paddingHorizontal: components.dialog.footer.paddingLeft, }, })) diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index f6dd8042..3620dd43 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -46,15 +46,17 @@ export const DialogHeader = ({ ({ - color: { - danger: t.Color.Service['text-danger'], - warning: t.Color.Service['text-warning'], - info: t.Color.Service['text-info'], - success: t.Color.Service['text-success'], - help: t.Color.Service['text-help'], - }[severity], - })} + uniProps={({ semantic }) => { + return { + color: { + danger: semantic.colorScheme.color.fg.status.danger.default, + warning: semantic.colorScheme.color.fg.status.warning.default, + info: semantic.colorScheme.color.fg.status.info.default, + success: semantic.colorScheme.color.fg.status.success.default, + help: semantic.colorScheme.color.fg.status.help.default, + }[severity], + } + }} /> ) }, [severity]) @@ -75,9 +77,9 @@ export const DialogHeader = ({ ({ - color: theme.General.actionIconColor, - })} + uniProps={({ components }) => { + return { color: components.dialog.root.color } + }} /> ) : null} @@ -88,27 +90,28 @@ export const DialogHeader = ({ ) } -const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({ +const styles = StyleSheet.create(({ components, semantic }) => ({ text: { flex: 1 }, header: { flexDirection: 'row', - gap: spacing.Gap['gap-4'], + gap: components.dialog.header.gap, alignItems: 'center', - paddingBottom: theme.Overlay.Dialog.Header.dialogHeaderPaddingTopBottom, - padding: theme.Overlay.Dialog.Header.dialogHeaderPaddingLeftRight, + paddingTop: components.dialog.header.paddingTop, + paddingBottom: components.dialog.header.paddingBottom, + paddingHorizontal: components.dialog.header.paddingLeft, }, closeTouchable: { padding: 8 }, separator: { - height: border.Width.border, - backgroundColor: theme.Overlay.Overlay.overlayContentBorderColor, + height: semantic.dimension.borderWidth[100], + backgroundColor: components.dialog.root.borderColor, }, closeIcon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, severityIcon: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], + width: semantic.dimension.size[700], + height: semantic.dimension.size[700], }, })) diff --git a/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap index 77efd620..8fd76ec3 100644 --- a/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -128,7 +128,7 @@ exports[`Dialog component tests basic dialog with title, body and footer 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#e2e2e4", - "borderRadius": 14, + "borderRadius": 1600, }, { "maxHeight": 1234, @@ -143,8 +143,7 @@ exports[`Dialog component tests basic dialog with title, body and footer 1`] = ` @@ -155,8 +154,9 @@ exports[`Dialog component tests basic dialog with title, body and footer 1`] = ` diff --git a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap index 5bc35562..92567dca 100644 --- a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap +++ b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap @@ -7,23 +7,24 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -1526,14 +1532,14 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", }, { - "fontSize": 15.75, + "fontSize": 18, }, { "flex": 1, @@ -1582,15 +1588,15 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi > @@ -2526,14 +2538,14 @@ exports[`DialogHeader {"onClose": undefined, "severity": undefined, "title": "Di style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", }, { - "fontSize": 15.75, + "fontSize": 18, }, { "flex": 1, diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index f12c2367..2cf5964a 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -111,9 +111,9 @@ export const Divider = memo( ({ - color: theme.General.textSecondaryColor, - })} + uniProps={({ components }) => { + return { color: components.divider.content.color } + }} /> ) : null} {text ? ( @@ -133,15 +133,15 @@ export const Divider = memo( } ) -const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({ +const styles = StyleSheet.create(({ components, semantic }) => ({ container: { - minHeight: sizing.Height['h-2'], + minHeight: semantic.dimension.size[800], flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, containerVertical: { - minWidth: sizing.Width['w-2'], + minWidth: semantic.dimension.size[800], flexDirection: 'column', flexGrow: 1, alignSelf: 'flex-start', @@ -150,7 +150,7 @@ const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({ containerColumnReverse: { flexDirection: 'column-reverse' }, lineContainer: { flexGrow: 1, - flexBasis: spacing.Gap['gap-4'], + flexBasis: semantic.dimension.space[400], width: 1, height: 1, overflow: 'hidden', @@ -159,25 +159,25 @@ const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({ line: { width: '100%', height: '100%', - borderWidth: 1, - borderColor: theme.General.dividerColor, + borderWidth: semantic.dimension.borderWidth[100], + borderColor: components.divider.root.borderColor, }, lineDash: { borderStyle: 'dashed' }, content: { flexShrink: 1, flexDirection: 'row', alignItems: 'center', - paddingHorizontal: theme.General.inlineSpacing, - gap: spacing.Gap['gap-2'], - backgroundColor: theme.Panel.Panel.Body.panelContentBg, + paddingHorizontal: semantic.dimension.space[200], + gap: components.divider.extend.content.gap, + backgroundColor: components.divider.content.background, }, contentVertical: { - paddingHorizontal: 0, - paddingVertical: theme.General.inlineSpacing, + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space[200], }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: components.divider.extend.iconSize, + height: components.divider.extend.iconSize, }, text: { flexShrink: 1 }, })) diff --git a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap index 59628323..a632247d 100644 --- a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap +++ b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap @@ -102,11 +102,11 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "horizontal", "sho [ { "alignItems": "center", - "backgroundColor": "#f0f0f1", + "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, - "gap": 7, - "paddingHorizontal": 7, + "gap": 8, + "paddingHorizontal": 8, }, false, ] @@ -117,9 +117,9 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "horizontal", "sho [ { "fontFamily": "Noto Sans", - "fontSize": 10.5, + "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -273,30 +273,30 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" [ { "alignItems": "center", - "backgroundColor": "#f0f0f1", + "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, - "gap": 7, - "paddingHorizontal": 7, + "gap": 8, + "paddingHorizontal": 8, }, { "paddingHorizontal": 0, - "paddingVertical": 7, + "paddingVertical": 8, }, ] } > ( ({ - color: theme.Form.InputGroup.inputGroupTextColor, - })} + uniProps={({ components }) => { + return { color: components.inputgroup.colorScheme.addon.color } + }} /> )} @@ -51,15 +51,14 @@ export const InputGroupAddon = memo( } ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ container: { - paddingVertical: theme.Form.InputText.inputPaddingTopBottom, - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, + padding: components.inputgroup.addon.padding, justifyContent: 'center', - borderRadius: theme.General.borderRadiusXL, - borderWidth: 1, - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Form.InputGroup.inputGroupBg, + borderRadius: components.inputgroup.addon.borderRadius, + borderWidth: components.inputgroup.extend.borderWidth, + borderColor: components.inputgroup.colorScheme.addon.borderColor, + backgroundColor: components.inputgroup.colorScheme.addon.background, }, left: { borderRightWidth: 0, @@ -73,18 +72,18 @@ const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ borderBottomLeftRadius: 0, }, disabled: { - opacity: 0.6, - backgroundColor: theme.Button.Disabled.disabledButtonBg, + opacity: semantic.effects.opacity[60], + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, }, text: { - fontSize: typography.Size['text-base'], - color: theme.Form.InputGroup.inputGroupTextColor, + fontSize: fonts.fontSize[300], + color: components.inputgroup.colorScheme.addon.color, includeFontPadding: false, verticalAlign: 'middle', - fontFamily: fonts.secondary, + fontFamily: fonts.fontFamily.base, }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: components.inputgroup.extend.iconSize, + height: components.inputgroup.extend.iconSize, }, })) diff --git a/src/components/Input/InputOtp/InputOtp.tsx b/src/components/Input/InputOtp/InputOtp.tsx index a43155c3..3923463b 100644 --- a/src/components/Input/InputOtp/InputOtp.tsx +++ b/src/components/Input/InputOtp/InputOtp.tsx @@ -155,10 +155,10 @@ export const InputOtp = memo( } ) -const styles = StyleSheet.create(({ spacing }) => ({ +const styles = StyleSheet.create(({ semantic }) => ({ container: {}, - content: { flexDirection: 'row', gap: spacing.Gap['gap-2'] }, + content: { flexDirection: 'row', gap: semantic.dimension.space[200] }, input: { position: 'absolute', width: 1, height: 1, opacity: 0 }, })) diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index 0e685314..cb719a5c 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -5,6 +5,8 @@ import Animated, { type AnimatedStyle } from 'react-native-reanimated' import { StyleSheet } from 'react-native-unistyles' +import effects from '../../../theme/tokens/semantic/effects.json' + export interface InputOtpItemProps extends Pick { value?: string error: boolean @@ -15,8 +17,14 @@ export interface InputOtpItemProps extends Pick { const CURSOR_ANIMATION_DURATION = 500 +// Анимация не может жить в StyleSheet.create: Animated.Text из reanimated не +// принимает Unistyles-стиль. Шкала непрозрачности одинакова в обеих темах, +// поэтому токены берутся из сгенерированного файла напрямую. const cursorAnimationStyle = { - animationName: { from: { opacity: 1 }, to: { opacity: 0.2 } }, + animationName: { + from: { opacity: effects.opacity[100] }, + to: { opacity: effects.opacity[20] }, + }, animationDuration: CURSOR_ANIMATION_DURATION, animationDirection: 'alternate', animationIterationCount: 'infinite', @@ -60,14 +68,16 @@ export const InputOtpItem = memo( } ) -const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({ +// Рамка, цвет и отступы намеренно берутся у inputtext: поле OTP должно выглядеть +// как обычное поле ввода. Собственные токены inputotp описывают только отличия — +// тот же приём, что в пресете PrimeUIX lara, где inputotp задаёт лишь gap и width. +const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ container: { - minHeight: theme.Button.Common.buttonHeight, - minWidth: theme.Button.Common.buttonHeight, - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, - paddingVertical: theme.Form.InputText.inputPaddingTopBottom, - borderBottomWidth: border.Width.border, - borderColor: theme.Form.InputText.inputBorderColor, + minHeight: components.inputotp.extend.height, + minWidth: components.inputotp.extend.height, + paddingHorizontal: components.inputtext.root.paddingX, + borderBottomWidth: components.inputotp.extend.borderWidth, + borderColor: components.inputtext.root.borderColor, alignItems: 'center', justifyContent: 'center', }, @@ -75,18 +85,21 @@ const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({ textRow: { flexDirection: 'row', alignItems: 'center' }, text: { - fontSize: typography.Size['text-2xl'], - fontFamily: fonts.primary, - fontWeight: '400', - color: theme.Form.InputText.inputTextColor, + fontSize: fonts.fontSize[600], + fontFamily: fonts.fontFamily.heading, + fontWeight: fonts.fontWeight.regular, + color: components.inputtext.root.color, includeFontPadding: false, }, - pressed: { borderColor: theme.Form.InputText.inputHoverBorderColor }, + pressed: { borderColor: components.inputtext.root.hoverBorderColor }, - error: { borderColor: theme.Form.InputText.inputErrorBorderColor }, + error: { borderColor: components.inputtext.root.invalidBorderColor }, - disabled: { mixBlendMode: 'luminosity', opacity: 0.6 }, + disabled: { + mixBlendMode: 'luminosity', + opacity: semantic.effects.opacity[60], + }, - cursor: { color: theme.Form.InputText.inputTextColor, marginBottom: 3 }, + cursor: { color: components.inputtext.root.color, marginBottom: 3 }, })) diff --git a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap index c48a2c5d..e07be575 100644 --- a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap +++ b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap @@ -37,7 +37,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -49,10 +49,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -63,10 +62,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -176,10 +174,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -190,10 +187,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -305,10 +301,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -319,10 +314,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -436,10 +430,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -452,10 +445,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -567,10 +559,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -583,10 +574,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -700,10 +690,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -716,10 +705,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -835,10 +823,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -852,10 +839,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -968,10 +954,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -985,10 +970,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1103,10 +1087,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -1120,10 +1103,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1240,10 +1222,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -1259,10 +1240,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1377,10 +1357,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -1396,10 +1375,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1516,10 +1494,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -1535,10 +1512,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1657,13 +1633,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -1673,10 +1648,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -1788,13 +1762,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -1804,10 +1777,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -1921,13 +1893,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -1937,10 +1908,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -2056,13 +2026,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -2074,10 +2043,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -2191,13 +2159,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -2209,10 +2176,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -2328,13 +2294,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -2346,10 +2311,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -2467,13 +2431,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -2486,10 +2449,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -2604,13 +2566,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -2623,10 +2584,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -2743,13 +2703,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -2762,10 +2721,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -2884,13 +2842,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -2905,10 +2862,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -3025,13 +2981,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -3046,10 +3001,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -3168,13 +3122,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -3189,10 +3142,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -3313,10 +3265,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -3327,10 +3278,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -3504,10 +3452,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -3518,10 +3465,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -3697,10 +3641,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -3711,10 +3654,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -3892,10 +3832,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -3908,10 +3847,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -4091,10 +4027,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -4107,10 +4042,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -4292,10 +4224,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -4308,10 +4239,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -4495,10 +4423,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -4512,10 +4439,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -4698,10 +4622,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -4715,10 +4638,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -4903,10 +4823,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -4920,10 +4839,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -5110,10 +5026,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -5129,10 +5044,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -5321,10 +5233,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -5340,10 +5251,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -5534,10 +5442,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -5553,10 +5460,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -5749,13 +5653,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -5765,10 +5668,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -5948,13 +5848,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -5964,10 +5863,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6149,13 +6045,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -6165,10 +6060,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6352,13 +6244,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -6370,10 +6261,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6559,13 +6447,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -6577,10 +6464,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6768,13 +6652,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -6786,10 +6669,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6979,13 +6859,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -6998,10 +6877,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -7190,13 +7066,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -7209,10 +7084,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -7403,13 +7275,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -7422,10 +7293,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -7618,13 +7486,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -7639,10 +7506,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -7837,13 +7701,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -7858,10 +7721,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -8058,13 +7918,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -8079,10 +7938,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -8281,10 +8137,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -8295,10 +8150,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -8600,10 +8448,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -8614,10 +8461,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -8921,10 +8761,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -8935,10 +8774,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -9244,10 +9076,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -9260,10 +9091,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -9579,10 +9403,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -9595,10 +9418,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -9916,10 +9732,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -9932,10 +9747,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -10255,10 +10063,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -10272,10 +10079,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -10598,10 +10398,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -10615,10 +10414,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -10943,10 +10735,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -10960,10 +10751,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -11290,10 +11074,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -11309,10 +11092,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -11649,10 +11425,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -11668,10 +11443,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -12010,10 +11778,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -12029,10 +11796,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -12373,13 +12133,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -12389,10 +12148,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -12708,13 +12460,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -12724,10 +12475,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -13045,13 +12789,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -13061,10 +12804,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -13384,13 +13120,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -13402,10 +13137,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -13735,13 +13463,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -13753,10 +13480,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -14088,13 +13808,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -14106,10 +13825,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -14443,13 +14155,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -14462,10 +14173,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -14802,13 +14506,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -14821,10 +14524,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -15163,13 +14859,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -15182,10 +14877,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -15526,13 +15214,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -15547,10 +15234,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -15901,13 +15581,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -15922,10 +15601,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -16278,13 +15950,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -16299,10 +15970,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -52,25 +52,25 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#85888e"", + "backgroundColor": ""#a2a5a9"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#85888e", + "backgroundColor": "#a2a5a9", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -90,24 +90,24 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -149,8 +149,8 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -168,25 +168,25 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#85888e"", + "backgroundColor": ""#a2a5a9"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#85888e", + "backgroundColor": "#a2a5a9", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -206,24 +206,24 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -265,8 +265,8 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -284,25 +284,25 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#DFDFDF"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#DFDFDF", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -322,24 +322,24 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -381,8 +381,8 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -400,25 +400,25 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#DFDFDF"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#DFDFDF", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -438,24 +438,24 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -497,8 +497,8 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -516,25 +516,25 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - } jestInlineStyle={ { - "backgroundColor": ""#85888e"", - "borderColor": ""#db3424"", - "borderRadius": 100, + "backgroundColor": ""#a2a5a9"", + "borderColor": ""#f47f77"", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#85888e", - "borderColor": "#db3424", - "borderRadius": 100, + "backgroundColor": "#a2a5a9", + "borderColor": "#f47f77", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -554,24 +554,24 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -613,8 +613,8 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -632,25 +632,25 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - } jestInlineStyle={ { - "backgroundColor": ""#85888e"", - "borderColor": ""#db3424"", - "borderRadius": 100, + "backgroundColor": ""#a2a5a9"", + "borderColor": ""#f47f77"", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#85888e", - "borderColor": "#db3424", - "borderRadius": 100, + "backgroundColor": "#a2a5a9", + "borderColor": "#f47f77", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -670,24 +670,24 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -729,8 +729,8 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -748,25 +748,25 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - } jestInlineStyle={ { - "backgroundColor": ""#DFDFDF"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#DFDFDF", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -786,24 +786,24 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -845,8 +845,8 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -864,25 +864,25 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - } jestInlineStyle={ { - "backgroundColor": ""#DFDFDF"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#DFDFDF", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -902,24 +902,24 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -961,8 +961,8 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -982,11 +982,11 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - { "backgroundColor": ""#2b2e33"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ @@ -994,11 +994,11 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - { "backgroundColor": "#2b2e33", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1017,25 +1017,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1077,8 +1077,8 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1098,11 +1098,11 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - { "backgroundColor": ""#2b2e33"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ @@ -1110,11 +1110,11 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - { "backgroundColor": "#2b2e33", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1133,25 +1133,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1193,8 +1193,8 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1212,25 +1212,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#9A9A9A"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#9A9A9A", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1249,25 +1249,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1309,8 +1309,8 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1328,25 +1328,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#9A9A9A"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#9A9A9A", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1365,25 +1365,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1425,8 +1425,8 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1445,24 +1445,24 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f jestInlineStyle={ { "backgroundColor": ""#2b2e33"", - "borderColor": ""#db3424"", - "borderRadius": 100, + "borderColor": ""#f47f77"", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "borderRadius": 100, + "borderColor": "#f47f77", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1481,25 +1481,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1541,8 +1541,8 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1561,24 +1561,24 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f jestInlineStyle={ { "backgroundColor": ""#2b2e33"", - "borderColor": ""#db3424"", - "borderRadius": 100, + "borderColor": ""#f47f77"", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "borderRadius": 100, + "borderColor": "#f47f77", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1597,25 +1597,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1657,8 +1657,8 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1676,25 +1676,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t } jestInlineStyle={ { - "backgroundColor": ""#9A9A9A"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#9A9A9A", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1713,25 +1713,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1773,8 +1773,8 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1792,25 +1792,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t } jestInlineStyle={ { - "backgroundColor": ""#9A9A9A"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#9A9A9A", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1829,25 +1829,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } diff --git a/src/components/Input/InputSwitch/styles/useHandleStyles.ts b/src/components/Input/InputSwitch/styles/useHandleStyles.ts index 1349cbc2..93287f19 100644 --- a/src/components/Input/InputSwitch/styles/useHandleStyles.ts +++ b/src/components/Input/InputSwitch/styles/useHandleStyles.ts @@ -48,27 +48,27 @@ export const useHandleStyles = (checked: boolean) => { return { handleStyle } } -const handleStyles = StyleSheet.create(({ theme, border }) => ({ +const handleStyles = StyleSheet.create(({ components: { toggleswitch } }) => ({ handle: { - height: theme.Form.inputSwitch.inputSwitchHandleHeight, - width: theme.Form.inputSwitch.inputSwitchHandleWidth, - borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.Form.inputSwitch.inputSwitchHandleOffBg, + height: toggleswitch.handle.size, + width: toggleswitch.handle.size, + borderRadius: toggleswitch.handle.borderRadius, + backgroundColor: toggleswitch.colorScheme.handle.background, position: 'absolute', - top: theme.Form.inputSwitch.inputSwitchSliderPadding - border.Width.border, + top: toggleswitch.root.gap - toggleswitch.root.borderWidth, }, handleOff: { - backgroundColor: theme.Form.inputSwitch.inputSwitchHandleOffBg, - left: theme.Form.inputSwitch.inputSwitchSliderPadding - border.Width.border, + backgroundColor: toggleswitch.colorScheme.handle.background, + left: toggleswitch.root.gap - toggleswitch.root.borderWidth, }, handleOn: { - backgroundColor: theme.Form.inputSwitch.inputSwitchHandleOnBg, + backgroundColor: toggleswitch.colorScheme.handle.checkedBackground, left: - theme.Form.inputSwitch.inputSwitchWidth - - theme.Form.inputSwitch.inputSwitchSliderPadding - - theme.Form.inputSwitch.inputSwitchHandleWidth - - 1, + toggleswitch.root.width - + toggleswitch.root.gap - + toggleswitch.handle.size - + toggleswitch.root.borderWidth, }, })) diff --git a/src/components/Input/InputSwitch/styles/useSliderStyles.ts b/src/components/Input/InputSwitch/styles/useSliderStyles.ts index 8739c29b..4741e796 100644 --- a/src/components/Input/InputSwitch/styles/useSliderStyles.ts +++ b/src/components/Input/InputSwitch/styles/useSliderStyles.ts @@ -102,45 +102,43 @@ export const useSliderStyles = ( } } -const switchStyles = StyleSheet.create(({ theme, border }) => ({ +const switchStyles = StyleSheet.create(({ components: { toggleswitch } }) => ({ container: { - height: theme.Form.inputSwitch.inputSwitchHeight, - width: theme.Form.inputSwitch.inputSwitchWidth, + height: toggleswitch.root.height, + width: toggleswitch.root.width, }, slider: { - padding: theme.Form.inputSwitch.inputSwitchSliderPadding, - height: theme.Form.inputSwitch.inputSwitchHeight, - width: theme.Form.inputSwitch.inputSwitchWidth, - borderRadius: border.Radius['rounded-full'], - borderWidth: border.Width.border, + padding: toggleswitch.root.gap, + height: toggleswitch.root.height, + width: toggleswitch.root.width, + borderRadius: toggleswitch.root.borderRadius, + borderWidth: toggleswitch.root.borderWidth, }, - sliderOff: { backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOffBg }, + sliderOff: { backgroundColor: toggleswitch.colorScheme.root.background }, - sliderOn: { backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOnBg }, + sliderOn: { + backgroundColor: toggleswitch.colorScheme.root.checkedBackground, + }, sliderPressed: { - backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOffHoverBg, + backgroundColor: toggleswitch.colorScheme.root.hoverBackground, }, sliderOnPressed: { - backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOnHoverBg, + backgroundColor: toggleswitch.colorScheme.root.checkedHoverBackground, }, sliderDisabled: { - backgroundColor: theme.custom.inputSwitch.inputSwitchSliderOffDisabledBg, + backgroundColor: toggleswitch.colorScheme.root.disabledBackground, }, sliderOnDisabled: { - backgroundColor: theme.custom.inputSwitch.inputSwitchSliderOnDisabledBg, + backgroundColor: toggleswitch.colorScheme.root.disabledBackground, }, - sliderNoDanger: { borderColor: 'transparent' }, + sliderNoDanger: { borderColor: toggleswitch.root.borderColor }, - sliderDanger: { - borderColor: theme.Form.InputText.inputErrorBorderColor, - outlineColor: theme.General.focusOutlineErrorColor, - outlineWidth: Math.round(theme.General.focusShadowWidth), - }, + sliderDanger: { borderColor: toggleswitch.root.invalidBorderColor }, })) diff --git a/src/components/Input/InputTextBase/InputTextBase.tsx b/src/components/Input/InputTextBase/InputTextBase.tsx index 4809b81e..eccfb823 100644 --- a/src/components/Input/InputTextBase/InputTextBase.tsx +++ b/src/components/Input/InputTextBase/InputTextBase.tsx @@ -36,8 +36,11 @@ import Animated, { import { useLoadingRotationAnimation } from '../../../hooks/useLoadingRotationAnimation' import { useMakeTestId } from '../../../hooks/useMakeTestId' -import type { ThemeType } from '../../../theme/types' -import { SvgUniversal } from '../../../utils/SvgUniversal' + +import { + SvgUniversal, + type SvgUniversalTheme, +} from '../../../utils/SvgUniversal' import { InputTextBaseTestId } from './testIds' import type { InputTextBaseProps, RenderTextInputArgs } from './types' @@ -52,9 +55,9 @@ interface PrivateInputTextBaseProps { * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5470&m=dev * @see InputText */ -const inputIconUniProps = ({ theme }: ThemeType) => ({ - color: theme.Form.InputText.inputIconColor, -}) +const inputIconUniProps = ({ components }: SvgUniversalTheme) => { + return { color: components.inputtext.root.color } +} export const InputTextBase = memo< InputTextBaseProps & PrivateInputTextBaseProps @@ -306,7 +309,6 @@ export const InputTextBase = memo< isFocused && styles.containerFocused, containerStyle, state === 'danger' && styles.danger, - state === 'danger' && isFocused && styles.dangerFocused, disabled && styles.disabled, ]} testID={makeTestId(InputTextBaseTestId.pressableContainer)} diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 0d751e34..75977e4b 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -18,37 +18,32 @@ export const useInputContainerMinHeight = ( return { minHeight } } -const containerMinHeight = StyleSheet.create(({ theme }) => ({ - base: { minHeight: theme.InputSize.base['min-height'] }, - large: { minHeight: theme.InputSize.large['min-height'] }, - xlarge: { minHeight: theme.InputSize.xlarge['min-height'] }, +const containerMinHeight = StyleSheet.create(({ semantic }) => ({ + base: { minHeight: semantic.dimension.size[1100] }, + large: { minHeight: semantic.dimension.size[1300] }, + xlarge: { minHeight: semantic.dimension.size[1400] }, })) export const inputStyles = StyleSheet.create( - ({ theme, border, typography, spacing, fonts }) => ({ + ({ components, semantic, fonts }) => ({ container: { flexDirection: 'row', - borderWidth: border.Width.border, - borderRadius: border.Radius['rounded-xl'], - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Form.InputText.inputBg, + borderWidth: semantic.dimension.borderWidth[100], + borderRadius: components.inputtext.root.borderRadius, + borderColor: components.inputtext.root.borderColor, + backgroundColor: components.inputtext.root.background, }, containerFocused: { - outlineColor: theme.General.focusOutlineColor, - outlineWidth: Math.round(theme.General.focusShadowWidth), - borderColor: theme.General.focusBorderColor, + outlineColor: components.inputtext.root.focusRing.color, + outlineWidth: components.inputtext.root.focusRing.width, + borderColor: components.inputtext.root.focusBorderColor, }, - containerFloatLabel: { - minHeight: theme.Button.Common.buttonHeightXL, - maxHeight: theme.Button.Common.buttonHeightXL, - height: theme.Button.Common.buttonHeightXL, - }, - danger: { borderColor: theme.Form.InputText.inputErrorBorderColor }, - dangerFocused: { outlineColor: theme.General.focusOutlineErrorColor }, + containerFloatLabel: { minHeight: 56, maxHeight: 56, height: 56 }, + danger: { borderColor: components.inputtext.root.invalidBorderColor }, disabled: { - opacity: 0.6, - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Button.Disabled.disabledButtonBg, + opacity: semantic.effects.opacity[60], + borderColor: components.inputtext.root.borderColor, + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, }, inputContainer: { flex: 1, @@ -56,8 +51,8 @@ export const inputStyles = StyleSheet.create( justifyContent: 'center', }, input: { - padding: 0, - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, + padding: semantic.dimension.space.none, + paddingHorizontal: components.inputtext.root.paddingX, position: 'absolute', left: 0, right: 0, @@ -67,40 +62,36 @@ export const inputStyles = StyleSheet.create( inputWithRightContent: { paddingRight: 0 }, floatLabelInput: { flex: 1, - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, + paddingHorizontal: components.inputtext.root.paddingX, paddingTop: 26, paddingBottom: 12, - borderRadius: border.Radius['rounded-xl'], + borderRadius: semantic.dimension.borderRadius[300], overflow: 'hidden', }, inputFont: { - fontSize: typography.Size['text-base'], - color: theme.Form.InputText.inputTextColor, + fontSize: fonts.fontSize[300], + color: components.inputtext.root.color, includeFontPadding: false, - fontFamily: fonts.secondary, + fontFamily: fonts.fontFamily.base, verticalAlign: 'middle', }, - placeholder: { - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, - }, - placeholderTextColor: { - color: theme.Form.InputText.inputPlaceholderTextColor, - }, + placeholder: { paddingHorizontal: components.inputtext.root.paddingX }, + placeholderTextColor: { color: components.inputtext.root.placeholderColor }, rightContainer: { flexDirection: 'row', - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, - gap: theme.Form.InputText.inputPaddingLeftRight, + paddingHorizontal: components.inputtext.root.paddingX, + gap: components.inputtext.root.paddingX, overflow: 'hidden', alignItems: 'center', }, rightButtonContainer: { justifyContent: 'center' }, iconSize: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: components.inputtext.extend.iconSize, + height: components.inputtext.extend.iconSize, }, iconSizeFloatLabel: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: components.inputtext.extend.iconSize, + height: components.inputtext.extend.iconSize, }, label: { @@ -108,20 +99,20 @@ export const inputStyles = StyleSheet.create( left: 7, right: 7, top: 19, - paddingVertical: 0, - paddingLeft: spacing.Padding['p-1'], - paddingRight: spacing.Padding['p-2'], - color: typography.Color.Common['text-color-secondary'], + paddingVertical: semantic.dimension.space.none, + paddingLeft: semantic.dimension.space[100], + paddingRight: semantic.dimension.space[200], + color: semantic.colorScheme.color.fg.muted, includeFontPadding: false, verticalAlign: 'middle', - fontSize: typography.Size['text-base'], - fontFamily: fonts.secondary, + fontSize: fonts.fontSize[300], + fontFamily: fonts.fontFamily.base, }, labelReducedSize: { - fontSize: typography.Size['text-sm'], - paddingVertical: spacing.Padding['p-1'], + fontSize: fonts.fontSize[100], + paddingVertical: semantic.dimension.space[100], top: 7, - fontFamily: fonts.primary, + fontFamily: fonts.fontFamily.heading, }, hidden: { opacity: 0 }, }) diff --git a/src/components/Input/__tests__/InputTextBase.test.tsx b/src/components/Input/__tests__/InputTextBase.test.tsx index 904989c6..076f6952 100644 --- a/src/components/Input/__tests__/InputTextBase.test.tsx +++ b/src/components/Input/__tests__/InputTextBase.test.tsx @@ -2,7 +2,7 @@ import { fireEvent, render, userEvent } from '@testing-library/react-native' import { TextInput } from 'react-native-gesture-handler' -import { lightTheme } from '../../../theme' +import { semanticTokens } from '../../../theme/tokens' import { InputTextBase } from '../InputTextBase/InputTextBase' import { InputTextBaseTestId } from '../InputTextBase/testIds' import type { RenderTextInputArgs } from '../InputTextBase/types' @@ -190,7 +190,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.base['min-height'], + minHeight: semanticTokens.dimension.size[1100], }) }) @@ -198,7 +198,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.base['min-height'], + minHeight: semanticTokens.dimension.size[1100], }) }) @@ -206,7 +206,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.large['min-height'], + minHeight: semanticTokens.dimension.size[1300], }) }) @@ -214,7 +214,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.xlarge['min-height'], + minHeight: semanticTokens.dimension.size[1400], }) }) @@ -222,7 +222,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.base['min-height'], + minHeight: semanticTokens.dimension.size[1100], }) }) diff --git a/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap b/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap index e751df44..4ea15dc6 100644 --- a/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap +++ b/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap @@ -8,11 +8,10 @@ exports[`InputGroup component tests content: icon, position: right 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 10.5, + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "padding": 14, }, { "borderBottomLeftRadius": 0, @@ -26,11 +25,11 @@ exports[`InputGroup component tests content: icon, position: right 1`] = ` > ({ - container: { - flexDirection: 'row', - paddingLeft: spacing.Padding['p-4'], - gap: spacing.Padding['p-4'], - alignItems: 'center', - }, - pressed: { backgroundColor: background.Common['bg-surface-ground-hover'] }, - disabled: { opacity: 0.6 }, - leftIcon: { paddingVertical: spacing.Padding['p-4'] }, - content: { - flex: 1, - flexDirection: 'row', - justifyContent: 'space-between', - paddingVertical: spacing.Padding['p-2'], - paddingEnd: spacing.Padding['p-4'], - gap: spacing.Gap['gap-4'], - }, - labelContainer: { - paddingVertical: spacing.Padding['p-2'], - gap: spacing.Gap['gap-2'], - flex: 1, - }, - titleContainer: { gap: spacing.Gap['gap-1'] }, - extraContainer: { paddingVertical: spacing.Padding['p-2'] }, - icon: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], - }, - rightSection: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: spacing.Padding['p-2'], - gap: spacing.Gap['gap-4'], - }, - divider: { - borderTopColor: theme.Surface['surface-border'], - borderTopWidth: 1, - }, - }) -) +const styles = StyleSheet.create(({ semantic }) => ({ + container: { + flexDirection: 'row', + paddingLeft: semantic.dimension.space[400], + gap: semantic.dimension.space[400], + alignItems: 'center', + }, + pressed: { + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.hover, + }, + disabled: { opacity: semantic.effects.opacity[60] }, + leftIcon: { paddingVertical: semantic.dimension.space[400] }, + content: { + flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + paddingVertical: semantic.dimension.space[200], + paddingEnd: semantic.dimension.space[400], + gap: semantic.dimension.space[400], + }, + labelContainer: { + paddingVertical: semantic.dimension.space[200], + gap: semantic.dimension.space[200], + flex: 1, + }, + titleContainer: { gap: semantic.dimension.space[100] }, + extraContainer: { paddingVertical: semantic.dimension.space[200] }, + icon: { + width: semantic.dimension.size[700], + height: semantic.dimension.size[700], + }, + rightSection: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: semantic.dimension.space[200], + gap: semantic.dimension.space[400], + }, + divider: { + borderTopColor: semantic.colorScheme.color.border.neutral.default, + borderTopWidth: 1, + }, +})) diff --git a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap index 323012bf..0b16ef10 100644 --- a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap +++ b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap @@ -66,11 +66,11 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` > @@ -281,9 +281,9 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 10.5, + "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -300,7 +300,7 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` @@ -309,16 +309,16 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, @@ -335,10 +335,10 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -361,14 +361,14 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } > @@ -450,11 +450,11 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` @@ -836,9 +836,9 @@ exports[`ListBase tests ListBase full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 10.5, + "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -855,7 +855,7 @@ exports[`ListBase tests ListBase full disabled 1`] = ` @@ -864,16 +864,16 @@ exports[`ListBase tests ListBase full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, @@ -890,10 +890,10 @@ exports[`ListBase tests ListBase full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -916,14 +916,14 @@ exports[`ListBase tests ListBase full disabled 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } > @@ -1005,11 +1005,11 @@ exports[`ListBase tests ListBase full disabled 1`] = ` @@ -1398,9 +1398,9 @@ exports[`ListBase tests ListBase maximal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 10.5, + "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -1417,7 +1417,7 @@ exports[`ListBase tests ListBase maximal config 1`] = ` @@ -1426,16 +1426,16 @@ exports[`ListBase tests ListBase maximal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, @@ -1452,10 +1452,10 @@ exports[`ListBase tests ListBase maximal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -1478,14 +1478,14 @@ exports[`ListBase tests ListBase maximal config 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } > @@ -1567,11 +1567,11 @@ exports[`ListBase tests ListBase maximal config 1`] = ` @@ -1760,16 +1760,16 @@ exports[`ListBase tests ListBase minimal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, @@ -1789,7 +1789,7 @@ exports[`ListBase tests ListBase minimal config 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } /> diff --git a/src/components/MenuItem/MenuItemAccessory.tsx b/src/components/MenuItem/MenuItemAccessory.tsx index 958f8e44..e106b745 100644 --- a/src/components/MenuItem/MenuItemAccessory.tsx +++ b/src/components/MenuItem/MenuItemAccessory.tsx @@ -29,19 +29,19 @@ export const MenuItemAccessory = memo( ({ - color: theme.Menu.Item.menuitemIconColor, - })} + uniProps={({ components }) => { + return { color: components.menu.item.icon.color } + }} /> ) } ) -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ container: { justifyContent: 'center' }, icon: { - width: theme.Menu.Item.menuitemSubmenuIconFontSize, - height: theme.Menu.Item.menuitemSubmenuIconFontSize, + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, }, })) diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index fb2d4c05..f6733949 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -133,45 +133,47 @@ export const MenuItemTemplate = memo( } ) -const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({ +// `transparent` здесь — отсутствие фона и границы, а не цвет дизайн-системы: +// у menu.item нет background и borderColor, прозрачность не выражена semantic-токеном. +const styles = StyleSheet.create(({ components, semantic }) => ({ container: { - borderColor: theme.Menu.Item.menuitemBorderColor, - borderWidth: border.Width.border, - borderRadius: theme.Menu.Item.menuitemBorderRadius, - backgroundColor: theme.Menu.Item.menuitemBg, + borderColor: 'transparent', + borderWidth: semantic.dimension.borderWidth[100], + borderRadius: components.menu.item.borderRadius, + backgroundColor: 'transparent', }, - containerPressed: { backgroundColor: theme.Menu.Item.menuitemHoverBg }, + containerPressed: { backgroundColor: components.menu.item.focusBackground }, containerDisabled: { - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - backgroundColor: theme.Button.Disabled.disabledButtonBg, - opacity: 0.6, + borderColor: 'transparent', + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, + opacity: semantic.effects.opacity[60], }, separator: { borderTopWidth: 1, - borderTopColor: theme.Menu.Overlay.overlayMenuBorderColor, - paddingTop: theme.Menu.Common.menuSeparatorMarginTopBottom, + borderTopColor: components.menu.separator.borderColor, + paddingTop: components.menu.extend.extItem.caption.gap, }, contentContainer: { flexDirection: 'row', alignItems: 'center', - gap: theme.General.inlineSpacing, - paddingHorizontal: theme.Menu.Item.menuitemPaddingLeftRight, - paddingVertical: theme.Menu.Item.menuitemPaddingTopBottom, + gap: components.menu.item.gap, + paddingHorizontal: components.menu.item.paddingLeft, + paddingVertical: components.menu.item.paddingTop, }, accessory: { - color: theme.Menu.Item.menuitemIconColor, - width: theme.Menu.Item.menuitemSubmenuIconFontSize, - height: theme.Menu.Item.menuitemSubmenuIconFontSize, + color: components.menu.item.icon.color, + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, }, templateContainer: { flexDirection: 'row', - gap: spacing.Gap['gap-2'], + gap: semantic.dimension.space[200], flex: 1, }, icon: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], - color: theme.Menu.Item.menuitemIconColor, + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, + color: components.menu.item.icon.color, }, - textContainer: { gap: spacing.Gap['gap-1'], flex: 1 }, + textContainer: { gap: semantic.dimension.space[100], flex: 1 }, })) diff --git a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap index bc4546e9..ffadc7b0 100644 --- a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap +++ b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap @@ -6,7 +6,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` { "borderTopColor": "#e2e2e4", "borderTopWidth": 1, - "paddingTop": 3.5, + "paddingTop": 4, } } > @@ -45,16 +45,16 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, undefined, { "backgroundColor": "#e2e2e4", - "borderColor": "#a2a5a9", + "borderColor": "transparent", "opacity": 0.6, }, ] @@ -66,9 +66,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -77,7 +77,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -92,15 +92,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` @@ -242,20 +242,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -271,10 +271,10 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -396,15 +396,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` > @@ -592,7 +592,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -600,7 +600,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -609,20 +609,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -679,9 +679,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -696,9 +696,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -711,15 +711,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` > @@ -802,7 +802,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -811,20 +811,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -840,10 +840,10 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -869,15 +869,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` > @@ -1019,7 +1019,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1034,11 +1034,11 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` @@ -1149,20 +1149,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -1219,9 +1219,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -1236,9 +1236,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1247,7 +1247,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1255,7 +1255,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1264,20 +1264,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -1430,9 +1430,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -1447,9 +1447,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1458,7 +1458,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1473,15 +1473,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` @@ -1588,20 +1588,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -1658,9 +1658,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -1675,9 +1675,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1686,7 +1686,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1701,15 +1701,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` @@ -1851,20 +1851,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -1921,9 +1921,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -1941,9 +1941,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1952,7 +1952,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1960,7 +1960,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1969,20 +1969,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -2006,7 +2006,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` { "borderTopColor": "#e2e2e4", "borderTopWidth": 1, - "paddingTop": 3.5, + "paddingTop": 4, } } > @@ -2045,9 +2045,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -2062,9 +2062,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -2073,7 +2073,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2081,7 +2081,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -2090,20 +2090,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 728468fa..9000650e 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -16,7 +16,7 @@ import { import { StyleSheet } from 'react-native-unistyles' -import type { ThemeType } from '../../theme/types' +import type { ComponentTokens } from '../../theme/tokens/index' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' import { ButtonSeverity } from '../Button/ButtonSeverity' import { Timer } from '../Timer/Timer' @@ -88,12 +88,12 @@ type MessageSeverityKey = NonNullable const messageIconColor: Record< MessageSeverityKey, - (t: ThemeType['theme']) => string + (t: ComponentTokens) => string > = { - info: (t) => t.Message.Severities.Info.infoMessageIconColor, - success: (t) => t.Message.Severities.Success.successMessageIconColor, - warning: (t) => t.Message.Severities.Warning.warningMessageIconColor, - danger: (t) => t.Message.Severities.Danger.dangerMessageIconColor, + info: (t) => t.message.extend.extInfo.color, + success: (t) => t.message.extend.extSuccess.color, + warning: (t) => t.message.extend.extWarn.color, + danger: (t) => t.message.extend.extError.color, } /** @@ -180,9 +180,9 @@ export const Message = memo( {...messageStyles.iconSize} source={Icon} testID={TestId.Icon} - uniProps={({ theme }) => ({ - color: messageIconColor[severity](theme), - })} + uniProps={({ components }) => { + return { color: messageIconColor[severity](components) } + }} /> ) } @@ -218,73 +218,66 @@ export const Message = memo( } ) -const messageStyles = StyleSheet.create( - ({ theme, typography, spacing, border }) => ({ - container: { - borderRadius: theme.General.borderRadiusXL, - borderWidth: border.Width.border, - overflow: 'hidden', - variants: { - severity: { - info: { - borderColor: theme.Message.Severities.Info.infoMessageBorderColor, - backgroundColor: theme.Message.Severities.Info.infoMessageBg, - }, - success: { - borderColor: - theme.Message.Severities.Success.successMessageBorderColor, - backgroundColor: theme.Message.Severities.Success.successMessageBg, - }, - warning: { - borderColor: - theme.Message.Severities.Warning.warningMessageBorderColor, - backgroundColor: theme.Message.Severities.Warning.warningMessageBg, - }, - danger: { - borderColor: - theme.Message.Severities.Danger.dangerMessageBorderColor, - backgroundColor: theme.Message.Severities.Danger.dangerMessageBg, - }, +const messageStyles = StyleSheet.create(({ components, semantic }) => ({ + container: { + borderRadius: components.message.root.borderRadius, + borderWidth: semantic.dimension.borderWidth[100], + overflow: 'hidden', + variants: { + severity: { + info: { + borderColor: components.message.colorScheme.info.borderColor, + backgroundColor: components.message.colorScheme.info.background, + }, + success: { + borderColor: components.message.colorScheme.success.borderColor, + backgroundColor: components.message.colorScheme.success.background, + }, + warning: { + borderColor: components.message.colorScheme.warn.borderColor, + backgroundColor: components.message.colorScheme.warn.background, + }, + danger: { + borderColor: components.message.colorScheme.error.borderColor, + backgroundColor: components.message.colorScheme.error.background, }, }, }, - content: { - flexGrow: 1, - borderLeftWidth: border.Width['border-3'] - border.Width.border, - padding: spacing.Padding['p-4'], - paddingLeft: spacing.Padding['p-5'], - gap: spacing.Gap['gap-4'], - variants: { - severity: { - info: { - borderColor: theme.Message.Severities.Info.infoMessageIconColor, - }, - success: { - borderColor: - theme.Message.Severities.Success.successMessageIconColor, - }, - warning: { - borderColor: - theme.Message.Severities.Warning.warningMessageIconColor, - }, - danger: { - borderColor: theme.Message.Severities.Danger.dangerMessageIconColor, - }, + }, + content: { + flexGrow: 1, + borderLeftWidth: + components.message.extend.extAccentLine.width - + semantic.dimension.borderWidth[100], + padding: semantic.dimension.space[400], + paddingLeft: components.message.content.padding, + gap: semantic.dimension.space[400], + variants: { + severity: { + info: { borderColor: components.message.colorScheme.info.borderColor }, + success: { + borderColor: components.message.colorScheme.success.borderColor, + }, + warning: { + borderColor: components.message.colorScheme.warn.borderColor, + }, + danger: { + borderColor: components.message.colorScheme.error.borderColor, }, }, }, - titleRow: { flexDirection: 'row', gap: spacing.Gap['gap-4'] }, - titleTextContainer: { - flex: 1, - alignSelf: 'center', - gap: spacing.Gap['gap-1'], - }, - iconSize: { - width: typography.Size['text-4xl'], - height: typography.Size['text-4xl'], - }, - }) -) + }, + titleRow: { flexDirection: 'row', gap: semantic.dimension.space[400] }, + titleTextContainer: { + flex: 1, + alignSelf: 'center', + gap: components.message.extend.extText.gap, + }, + iconSize: { + width: components.message.icon.size, + height: components.message.icon.size, + }, +})) export enum TestId { Container = 'MessageContainer', diff --git a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap index 06eed4f8..26df81f9 100644 --- a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap +++ b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap @@ -7,8 +7,8 @@ exports[`Message {"Icon": [Object], "timerValue": 5} 1`] = ` [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -21,11 +21,11 @@ exports[`Message {"Icon": [Object], "timerValue": 5} 1`] = ` style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -45,7 +45,7 @@ exports[`Message {"Icon": [Object], "timerValue": 5} 1`] = ` { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -69,8 +69,8 @@ exports[`Message {"Icon": [Object]} 1`] = ` [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -83,11 +83,11 @@ exports[`Message {"Icon": [Object]} 1`] = ` style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -101,11 +101,11 @@ exports[`Message {"Icon": [Object]} 1`] = ` > @@ -230,8 +230,8 @@ exports[`Message {"body": [Object], "caption": "caption", "severity": "info", "s [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -246,11 +246,11 @@ exports[`Message {"body": [Object], "caption": "caption", "severity": "info", "s style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -264,11 +264,11 @@ exports[`Message {"body": [Object], "caption": "caption", "severity": "info", "s > @@ -428,8 +428,8 @@ exports[`Message {"body": [Object], "footer": [Object], "severity": "warning"} 1 [ { "backgroundColor": "#fffdfa", - "borderColor": "#ffeed4", - "borderRadius": 10.5, + "borderColor": "#f5b83d", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -442,11 +442,11 @@ exports[`Message {"body": [Object], "footer": [Object], "severity": "warning"} 1 style={ { "borderColor": "#f5b83d", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -460,11 +460,11 @@ exports[`Message {"body": [Object], "footer": [Object], "severity": "warning"} 1 > @@ -622,8 +622,8 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio [ { "backgroundColor": "#fafffb", - "borderColor": "#d4fedc", - "borderRadius": 10.5, + "borderColor": "#44e858", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -636,11 +636,11 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio style={ { "borderColor": "#44e858", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -654,11 +654,11 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio > @@ -806,18 +806,16 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "#44e858", - "borderRadius": 10.5, + "backgroundColor": "transparent", + "borderColor": "#1dc831", + "borderRadius": 14, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 28, + "gap": 8, + "height": "auto", "justifyContent": "center", - "maxHeight": 28, - "minHeight": 28, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "paddingHorizontal": 14, + "paddingVertical": 8, }, false, ] @@ -827,9 +825,9 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio @@ -887,11 +885,11 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se > @@ -1039,18 +1037,16 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "#44e858", - "borderRadius": 10.5, + "backgroundColor": "transparent", + "borderColor": "#1dc831", + "borderRadius": 14, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 28, + "gap": 8, + "height": "auto", "justifyContent": "center", - "maxHeight": 28, - "minHeight": 28, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "paddingHorizontal": 14, + "paddingVertical": 8, }, { "aspectRatio": 1, @@ -1061,15 +1057,15 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se > @@ -1209,11 +1205,11 @@ exports[`Message {"hiddenIcon": false} 1`] = ` > @@ -1361,8 +1357,8 @@ exports[`Message {"onTimerFinish": [Function mockConstructor], "timerValue": 5} [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -1375,11 +1371,11 @@ exports[`Message {"onTimerFinish": [Function mockConstructor], "timerValue": 5} style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -1400,7 +1396,7 @@ exports[`Message {"onTimerFinish": [Function mockConstructor], "timerValue": 5} { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1424,8 +1420,8 @@ exports[`Message {"severity": "danger"} 1`] = ` [ { "backgroundColor": "#fffafa", - "borderColor": "#fed4d4", - "borderRadius": 10.5, + "borderColor": "#e85244", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -1438,11 +1434,11 @@ exports[`Message {"severity": "danger"} 1`] = ` style={ { "borderColor": "#e85244", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -1456,11 +1452,11 @@ exports[`Message {"severity": "danger"} 1`] = ` > @@ -1608,8 +1604,8 @@ exports[`Message {} 1`] = ` [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -1622,11 +1618,11 @@ exports[`Message {} 1`] = ` style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -1640,11 +1636,11 @@ exports[`Message {} 1`] = ` > diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index 2b4630e6..de3c6667 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -89,28 +89,28 @@ export const ProgressBar = memo( } ) -const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({ +const styles = StyleSheet.create(({ components, fonts }) => ({ container: { - borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.Misc.ProgressBar.progressBarBg, + borderRadius: components.progressbar.root.borderRadius, + backgroundColor: components.progressbar.root.background, overflow: 'hidden', }, indicator: { alignItems: 'center', justifyContent: 'center', - backgroundColor: theme.Misc.ProgressBar.progressBarValueBg, + backgroundColor: components.progressbar.value.background, height: '100%', overflow: 'hidden', }, - containerShowValue: { height: theme.Misc.ProgressBar.progressBarHeight }, + containerShowValue: { height: components.progressbar.root.height }, indicatorText: { - fontSize: typography.Size['text-xs'], + fontSize: components.progressbar.label.fontSize, textAlign: 'center', - color: theme.Misc.ProgressBar.progressBarValueTextColor, - fontFamily: fonts.primary, + color: components.progressbar.label.color, + fontFamily: fonts.fontFamily.heading, }, })) diff --git a/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap index f5afd78f..97a74194 100644 --- a/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -7,7 +7,7 @@ exports[`ProgressBar component test value - -50, showValue - false, style - {"he [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -69,7 +69,7 @@ exports[`ProgressBar component test value - -50, showValue - false, style - {"he [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -131,7 +131,7 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -139,7 +139,7 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei "width": 100, }, { - "height": 14, + "height": 16, }, ] } @@ -188,9 +188,9 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei ( } ) -const styles = StyleSheet.create(({ theme, global }) => ({ - primary: { color: theme.General.primaryColor }, - white: { color: global.Neutrals.White['white-100'] }, -})) +const styles = StyleSheet.create( + ({ components: { progressspinner }, semantic }) => ({ + primary: { color: progressspinner.colorScheme.root.colorOne }, + white: { color: semantic.colorScheme.color.fg.on.fill.default }, + }) +) enum TestId { ProgressSpinner = 'ProgressSpinner', diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index 8eb0e7a6..e5fddbd0 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/RadioButton/RadioButton.tsx @@ -52,7 +52,6 @@ export const RadioButton = memo( return ( - ( } ) -const radioStyles = StyleSheet.create(({ theme, border }) => ({ +const radioStyles = StyleSheet.create(({ components, semantic }) => ({ container: { - width: theme.Form.RadioButton.radiobuttonWidth, - height: theme.Form.RadioButton.radiobuttonHeight, - borderRadius: border.Radius['rounded-full'], - borderWidth: 1, + width: components.radiobutton.root.width, + height: components.radiobutton.root.height, + borderRadius: semantic.dimension.borderRadius.max, + borderWidth: semantic.dimension.borderWidth[100], alignItems: 'center', justifyContent: 'center', transitionProperty: ['borderColor', 'backgroundColor'], @@ -82,20 +81,20 @@ const radioStyles = StyleSheet.create(({ theme, border }) => ({ variants: { checked: { true: { - borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, + borderColor: components.radiobutton.root.checkedBorderColor, + backgroundColor: components.radiobutton.root.checkedBackground, }, false: { - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Form.InputText.inputBg, + borderColor: components.radiobutton.root.borderColor, + backgroundColor: components.radiobutton.root.background, }, }, pressed: { true: {}, false: {} }, disabled: { true: { - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Button.Disabled.disabledButtonBg, - opacity: 0.6, + borderColor: components.radiobutton.root.borderColor, + backgroundColor: components.radiobutton.root.disabledBackground, + opacity: semantic.effects.opacity[60], }, false: {}, }, @@ -106,59 +105,38 @@ const radioStyles = StyleSheet.create(({ theme, border }) => ({ checked: 'true', pressed: 'true', styles: { - borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveHoverBg, + borderColor: components.radiobutton.root.checkedHoverBorderColor, + backgroundColor: components.radiobutton.root.checkedHoverBackground, }, }, { checked: 'true', disabled: 'true', styles: { - borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, + borderColor: components.radiobutton.root.checkedBorderColor, + backgroundColor: components.radiobutton.root.checkedBackground, }, }, { state: 'danger', disabled: 'false', checked: 'false', - styles: { borderColor: theme.Form.InputText.inputErrorBorderColor }, + styles: { borderColor: components.radiobutton.root.invalidBorderColor }, }, { checked: 'false', pressed: 'true', - styles: { - borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor, - }, + styles: { borderColor: components.radiobutton.root.hoverBorderColor }, }, ], }, center: { - width: theme.Form.RadioButton.radiobuttonIconSize, - height: theme.Form.RadioButton.radiobuttonIconSize, - borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.Form.InputText.inputBg, + width: components.radiobutton.icon.size, + height: components.radiobutton.icon.size, + borderRadius: semantic.dimension.borderRadius.max, + backgroundColor: components.radiobutton.root.background, transitionProperty: ['opacity'], transitionDuration: 100, variants: { checked: { false: { opacity: 0 }, true: { opacity: 1 } } }, }, - outline: { - position: 'absolute', - top: -theme.General.focusShadowWidth, - left: -theme.General.focusShadowWidth, - width: - theme.Form.RadioButton.radiobuttonWidth + - theme.General.focusShadowWidth * 2, - height: - theme.Form.RadioButton.radiobuttonHeight + - theme.General.focusShadowWidth * 2, - borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.General.focusOutlineErrorColor, - transitionProperty: 'opacity', - transitionDuration: 100, - variants: { - state: { danger: { opacity: 1 }, default: { opacity: 0 } }, - disabled: { true: { opacity: 0 } }, - }, - }, })) diff --git a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap index cb279583..43b79c4b 100644 --- a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap +++ b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap @@ -2,48 +2,6 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger 1`] = ` - - - - - - - ( } ) -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ container: { flexDirection: 'row', - gap: theme.General.inlineSpacing, + gap: components.rating.root.gap, alignItems: 'center', }, })) diff --git a/src/components/Rating/RatingClear.tsx b/src/components/Rating/RatingClear.tsx index 5c6d47c1..7560ee92 100644 --- a/src/components/Rating/RatingClear.tsx +++ b/src/components/Rating/RatingClear.tsx @@ -32,22 +32,24 @@ export const RatingClear = memo(({ ...rest }) => { ({ - color: disabled - ? theme.custom.rating.ratingCancelIconDisabledColor - : pressed - ? theme.Form.Rating.ratingCancelIconHoverColor - : theme.Form.Rating.ratingCancelIconColor, - })} + uniProps={({ components }) => { + return { + color: disabled + ? components.rating.icon.color + : pressed + ? components.rating.icon.hoverColor + : components.rating.icon.color, + } + }} /> )} ) }) -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ icon: { - height: theme.Form.Rating.ratingIconFontSize, - width: theme.Form.Rating.ratingIconFontSize, + height: components.rating.icon.size, + width: components.rating.icon.size, }, })) diff --git a/src/components/Rating/RatingItem.tsx b/src/components/Rating/RatingItem.tsx index 92fffb31..0cdc6951 100644 --- a/src/components/Rating/RatingItem.tsx +++ b/src/components/Rating/RatingItem.tsx @@ -41,25 +41,25 @@ export const RatingItem = memo(({ checked, ...rest }) => { {...styles.icon} fillOpacity={checked ? 1 : 0} source={Icon} - uniProps={({ theme }) => { + uniProps={({ components }) => { const color = disabled ? checked - ? theme.custom.rating.ratingStarIconOnDisabledColor - : theme.custom.rating.ratingStarIconOffDisabledColor + ? components.rating.icon.activeColor + : components.rating.icon.color : pressed - ? theme.Form.Rating.ratingStarIconHoverColor + ? components.rating.icon.hoverColor : checked - ? theme.Form.Rating.ratingStarIconOnColor - : theme.Form.Rating.ratingStarIconOffColor + ? components.rating.icon.activeColor + : components.rating.icon.color return { color, fill: checked ? disabled - ? theme.custom.rating.ratingStarIconOnDisabledColor + ? components.rating.icon.activeColor : pressed - ? theme.Form.Rating.ratingStarIconHoverColor - : theme.Form.Rating.ratingStarIconOnColor + ? components.rating.icon.hoverColor + : components.rating.icon.activeColor : undefined, } }} @@ -69,9 +69,9 @@ export const RatingItem = memo(({ checked, ...rest }) => { ) }) -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ icon: { - height: theme.Form.Rating.ratingIconFontSize, - width: theme.Form.Rating.ratingIconFontSize, + height: components.rating.icon.size, + width: components.rating.icon.size, }, })) diff --git a/src/components/Rating/RatingItemContainer.tsx b/src/components/Rating/RatingItemContainer.tsx index 3776dbc7..c39eceff 100644 --- a/src/components/Rating/RatingItemContainer.tsx +++ b/src/components/Rating/RatingItemContainer.tsx @@ -55,16 +55,13 @@ export const RatingItemContainer = memo( } ) -const styles = StyleSheet.create(({ theme, sizing }) => ({ +const styles = StyleSheet.create(({ components }) => ({ container: { alignItems: 'center', justifyContent: 'center', - width: theme.Form.Rating.ratingIconFontSize, - height: theme.Form.Rating.ratingIconFontSize, + width: components.rating.icon.size, + height: components.rating.icon.size, }, - containerWithPaddings: { - width: sizing.Width['w-3'], - height: sizing.Height['h-3'], - }, + containerWithPaddings: { width: 42, height: 42 }, })) diff --git a/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap b/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap index 9a97587d..19ba0f8e 100644 --- a/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap +++ b/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -44,9 +44,9 @@ exports[`Rating component tests renders correctly with default props 1`] = ` [ { "alignItems": "center", - "height": 17.5, + "height": 24, "justifyContent": "center", - "width": 17.5, + "width": 24, }, false, ] @@ -55,11 +55,11 @@ exports[`Rating component tests renders correctly with default props 1`] = ` > @@ -827,9 +827,9 @@ exports[`Rating component tests renders the correct number of checked items - $r [ { "alignItems": "center", - "height": 17.5, + "height": 24, "justifyContent": "center", - "width": 17.5, + "width": 24, }, false, ] @@ -838,11 +838,11 @@ exports[`Rating component tests renders the correct number of checked items - $r > @@ -1610,9 +1610,9 @@ exports[`Rating component tests renders the correct number of checked items - $r [ { "alignItems": "center", - "height": 17.5, + "height": 24, "justifyContent": "center", - "width": 17.5, + "width": 24, }, false, ] @@ -1621,11 +1621,11 @@ exports[`Rating component tests renders the correct number of checked items - $r > ((props) => ( )) -const styles = StyleSheet.create(({ theme }) => ({ +// Осознанный обход слоя components: цвет невыбранного пункта — семантическая +// роль «приглушённый текст». Собственного токена у selectbutton нет, а то же +// значение приходит в tabs.tab.color и menu.item.color. +const styles = StyleSheet.create(({ components, semantic }) => ({ container: { flexDirection: 'row', - padding: theme.Form.SelectButton.selectButtonGroupPadding, - gap: theme.Form.SelectButton.selectButtonGroupPadding, - borderRadius: theme.General.borderRadiusXL, - backgroundColor: theme.Form.SelectButton.selectButtonGroupBg, + padding: components.selectbutton.extend.paddingX, + gap: components.selectbutton.extend.paddingX, + borderRadius: components.selectbutton.root.borderRadius, + backgroundColor: components.selectbutton.colorScheme.extend.background, }, frame: { position: 'absolute', - top: theme.Form.SelectButton.selectButtonGroupPadding, - bottom: theme.Form.SelectButton.selectButtonGroupPadding, - left: theme.Form.SelectButton.selectButtonGroupPadding, - borderRadius: theme.Form.SelectButton.selectButtonBorderRadius, - backgroundColor: theme.Form.SelectButton.selectButtonActiveBg, + top: components.selectbutton.extend.paddingY, + bottom: components.selectbutton.extend.paddingY, + left: components.selectbutton.extend.paddingX, + borderRadius: components.selectbutton.extend.ext.borderRadius, + backgroundColor: components.selectbutton.extend.checkedBackground, zIndex: -1, }, - textColor: { color: theme.Form.SelectButton.selectButtonTextColor }, - checkedTextColor: { - color: theme.Form.SelectButton.selectButtonIconActiveColor, - }, + textColor: { color: semantic.colorScheme.color.fg.muted }, + checkedTextColor: { color: components.selectbutton.extend.checkedColor }, })) diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index 4c8ca4e6..3f7da2d7 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -127,13 +127,15 @@ export const SelectButtonItem = memo( {...iconSize} source={Icon} testID='SelectButtonItem_Icon' - uniProps={({ theme }) => ({ - color: disabled - ? theme.Button.Disabled.disabledButtonBorderColor - : isSelected - ? theme.Form.SelectButton.selectButtonIconActiveColor - : theme.Form.SelectButton.selectButtonTextColor, - })} + uniProps={({ components, semantic }) => { + return { + color: disabled + ? semantic.colorScheme.color.border.neutral.strong + : isSelected + ? components.selectbutton.extend.checkedColor + : semantic.colorScheme.color.fg.muted, + } + }} /> ) : null} ( } ) -const styles = StyleSheet.create( - ({ theme, typography, border, spacing, fonts }) => ({ - container: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - gap: theme.General.inlineSpacing, - borderWidth: border.Width.border, - borderColor: 'transparent', - }, - small: { height: theme.Button.Common.buttonHeightSM }, - base: { height: theme.Button.Common.buttonHeight }, - large: { - height: theme.Button.Common.buttonHeightLG, - gap: spacing.Gap['gap-3'], - }, - xlarge: { - height: theme.Button.Common.buttonHeightXL, - gap: spacing.Gap['gap-3'], - }, - disabledContainer: { - borderRadius: theme.Form.SelectButton.selectButtonBorderRadius, - borderWidth: 1, - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - }, - iconSmall: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, - iconBase: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], - }, - iconLarge: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], - }, - iconXLarge: { width: 28, height: 28 }, - label: { flexShrink: 1, fontWeight: 600, fontFamily: fonts.primary }, - labelSmall: { fontSize: typography.Size['text-sm'] }, - labelBase: { fontSize: typography.Size['text-base'] }, - labelLarge: { fontSize: typography.Size['text-xl'] }, - labelXLarge: { fontSize: typography.Size['text-2xl'] }, - textColor: { color: theme.Form.SelectButton.selectButtonTextColor }, - checkedTextColor: { - color: theme.Form.SelectButton.selectButtonIconActiveColor, - }, - disabledTextColor: { - color: theme.Button.Disabled.disabledButtonBorderColor, - }, - }) -) +// Осознанный обход слоя components: цвет невыбранного пункта — семантическая +// роль «приглушённый текст». Собственного токена у selectbutton нет, а то же +// значение приходит в tabs.tab.color и menu.item.color. +const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ + container: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + gap: components.selectbutton.extend.gap, + borderWidth: semantic.dimension.borderWidth[100], + borderColor: 'transparent', + }, + small: { height: semantic.dimension.size[800] }, + base: { height: semantic.dimension.size[1100] }, + large: { + height: semantic.dimension.size[1300], + gap: components.selectbutton.extend.gap, + }, + xlarge: { + height: semantic.dimension.size[1400], + gap: components.selectbutton.extend.gap, + }, + disabledContainer: { + borderRadius: components.selectbutton.extend.ext.borderRadius, + borderWidth: semantic.dimension.borderWidth[100], + borderColor: semantic.colorScheme.color.border.neutral.strong, + }, + iconSmall: { + width: components.selectbutton.extend.iconSize.sm, + height: components.selectbutton.extend.iconSize.sm, + }, + iconBase: { + width: components.selectbutton.extend.iconSize.md, + height: components.selectbutton.extend.iconSize.md, + }, + iconLarge: { + width: components.selectbutton.extend.iconSize.lg, + height: components.selectbutton.extend.iconSize.lg, + }, + // Токена iconSize для xlarge в дизайн-системе нет — размер взят semantic-ролью. + iconXLarge: { + width: semantic.dimension.size[800], + height: semantic.dimension.size[800], + }, + label: { + flexShrink: 1, + fontWeight: fonts.fontWeight.demibold, + fontFamily: fonts.fontFamily.heading, + }, + labelSmall: { fontSize: fonts.fontSize[100] }, + labelBase: { fontSize: fonts.fontSize[300] }, + labelLarge: { fontSize: fonts.fontSize[500] }, + labelXLarge: { fontSize: fonts.fontSize[600] }, + textColor: { color: semantic.colorScheme.color.fg.muted }, + checkedTextColor: { color: components.selectbutton.extend.checkedColor }, + disabledTextColor: { + color: semantic.colorScheme.color.border.neutral.strong, + }, +})) diff --git a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx index c0a9806a..14a2d4be 100644 --- a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx +++ b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx @@ -5,6 +5,8 @@ import { Pressable } from 'react-native' import { useSharedValue } from 'react-native-reanimated' import { lightTheme } from '../../../theme' +import { fontTokens, semanticTokens } from '../../../theme/tokens' +import lightComponentTokens from '../../../theme/tokens/components/light.json' import { type SelectButtonItemProps, SelectButtonItem, @@ -63,30 +65,30 @@ const sizeCases: Array<{ { name: 'маленький', size: 'small', - height: lightTheme.theme.Button.Common.buttonHeightSM, - iconSize: lightTheme.typography.Size['text-base'], - fontSize: lightTheme.typography.Size['text-sm'], + height: semanticTokens.dimension.size[800], + iconSize: fontTokens.fontSize[300], + fontSize: fontTokens.fontSize[100], }, { name: 'базовый', size: 'base', - height: lightTheme.theme.Button.Common.buttonHeight, - iconSize: lightTheme.typography.Size['text-xl'], - fontSize: lightTheme.typography.Size['text-base'], + height: semanticTokens.dimension.size[1100], + iconSize: fontTokens.fontSize[500], + fontSize: fontTokens.fontSize[300], }, { name: 'большой', size: 'large', - height: lightTheme.theme.Button.Common.buttonHeightLG, - iconSize: lightTheme.typography.Size['text-2xl'], - fontSize: lightTheme.typography.Size['text-xl'], + height: semanticTokens.dimension.size[1300], + iconSize: fontTokens.fontSize[600], + fontSize: fontTokens.fontSize[500], }, { name: 'самый большой', size: 'xlarge', - height: lightTheme.theme.Button.Common.buttonHeightXL, + height: semanticTokens.dimension.size[1400], iconSize: 28, - fontSize: lightTheme.typography.Size['text-2xl'], + fontSize: fontTokens.fontSize[600], }, ] @@ -192,12 +194,10 @@ describe('SelectButtonItem', () => { await waitFor(() => { expect(icon).toHaveProp( 'stroke', - lightTheme.theme.Form.SelectButton.selectButtonIconActiveColor + lightComponentTokens.selectbutton.extend.checkedColor ) expect(text).toHaveAnimatedStyle({ - color: toRgba( - lightTheme.theme.Form.SelectButton.selectButtonIconActiveColor - ), + color: toRgba(lightComponentTokens.selectbutton.extend.checkedColor), }) }) @@ -207,12 +207,10 @@ describe('SelectButtonItem', () => { await waitFor(() => { expect(icon).toHaveProp( 'stroke', - lightTheme.theme.Form.SelectButton.selectButtonTextColor + lightTheme.semantic.colorScheme.color.fg.muted ) expect(text).toHaveAnimatedStyle({ - color: toRgba( - lightTheme.theme.Form.SelectButton.selectButtonTextColor - ), + color: toRgba(lightTheme.semantic.colorScheme.color.fg.muted), }) }) }) diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx index 1aa52ffe..3e0813d7 100644 --- a/src/components/Skeleton/Skeleton.tsx +++ b/src/components/Skeleton/Skeleton.tsx @@ -87,14 +87,16 @@ export const Skeleton = memo(({ style, testID, ...rest }) => { ) }) -const styles = StyleSheet.create(({ border, theme }) => ({ +const styles = StyleSheet.create(({ components: { skeleton } }) => ({ container: { - borderRadius: border.Radius['rounded-lg'], + borderRadius: skeleton.root.borderRadius, overflow: 'hidden', - backgroundColor: theme.Misc.Skeleton.skeletonBg, + backgroundColor: skeleton.colorScheme.root.background, }, gradientContainer: { position: 'absolute', height: '100%' }, - gradientColor: { backgroundColor: theme.Misc.Skeleton.skeletonAnimationBg }, + gradientColor: { + backgroundColor: skeleton.colorScheme.root.animationBackground, + }, })) export const SkeletonTestId = { diff --git a/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap b/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap index 2da3ca1f..14b2bb9d 100644 --- a/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap +++ b/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Skeleton 50% animation 1`] = ` [ { "backgroundColor": "#e2e2e4", - "borderRadius": 7, + "borderRadius": 14, "overflow": "hidden", }, { @@ -100,7 +100,7 @@ exports[`Skeleton 50% animation 1`] = ` 0, 1726145252, 0.5, - 1728053247, + 1727066353, 1, 1726145252, ] @@ -144,7 +144,7 @@ exports[`Skeleton 100% animation 1`] = ` [ { "backgroundColor": "#e2e2e4", - "borderRadius": 7, + "borderRadius": 14, "overflow": "hidden", }, { @@ -237,7 +237,7 @@ exports[`Skeleton 100% animation 1`] = ` 0, 1726145252, 0.5, - 1728053247, + 1727066353, 1, 1726145252, ] @@ -281,7 +281,7 @@ exports[`Skeleton before animation started: before animation started 1`] = ` [ { "backgroundColor": "#e2e2e4", - "borderRadius": 7, + "borderRadius": 14, "overflow": "hidden", }, { @@ -374,7 +374,7 @@ exports[`Skeleton before animation started: before animation started 1`] = ` 0, 1726145252, 0.5, - 1728053247, + 1727066353, 1, 1726145252, ] diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 8195b651..60c4a6cb 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -252,41 +252,38 @@ export const Slider = memo( } ) -const styles = StyleSheet.create(({ theme, border }) => { - return { - container: { - width: '100%', - justifyContent: 'center', - alignItems: 'center', - }, - track: { - height: theme.Form.Slider.sliderHorizontalHeight, - backgroundColor: theme.Form.Slider.sliderBg, - borderRadius: theme.Form.Slider.sliderHandleBorderRadius, - position: 'relative', - width: '100%', - justifyContent: 'center', - }, - - line: { - height: theme.Form.Slider.sliderHorizontalHeight, - borderRadius: theme.Form.Slider.sliderHandleBorderRadius, - position: 'absolute', - backgroundColor: theme.Form.Slider.sliderRangeBg, - }, - - point: { - width: theme.Form.Slider.sliderHandleWidth, - height: theme.Form.Slider.sliderHandleHeight, - borderRadius: theme.Form.Slider.sliderHandleHeight / 2, - position: 'absolute', - backgroundColor: theme.Form.Slider.sliderHandleBg, - borderWidth: border.Width['border-3'], - borderColor: theme.Form.Slider.sliderHandleBorder, - }, - - disabled: { opacity: 0.6, mixBlendMode: 'luminosity' }, - - hovered: { backgroundColor: theme.Form.Slider.sliderHandleHoverBg }, - } -}) +const styles = StyleSheet.create(({ components, semantic }) => ({ + container: { width: '100%', justifyContent: 'center', alignItems: 'center' }, + track: { + height: components.slider.track.size, + backgroundColor: components.slider.track.background, + borderRadius: components.slider.track.borderRadius, + position: 'relative', + width: '100%', + justifyContent: 'center', + }, + + line: { + height: components.slider.track.size, + borderRadius: components.slider.track.borderRadius, + position: 'absolute', + backgroundColor: components.slider.range.background, + }, + + point: { + width: components.slider.handle.width, + height: components.slider.handle.height, + borderRadius: components.slider.handle.borderRadius, + position: 'absolute', + backgroundColor: components.slider.colorScheme.handle.content.background, + borderWidth: semantic.dimension.borderWidth[300], + borderColor: components.slider.handle.background, + }, + + disabled: { + opacity: semantic.effects.opacity[60], + mixBlendMode: 'luminosity', + }, + + hovered: { backgroundColor: components.slider.handle.hoverBackground }, +})) diff --git a/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap b/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap index 0a400845..9079a675 100644 --- a/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap +++ b/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap @@ -19,7 +19,7 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -37,7 +37,7 @@ exports[`Slider snapshots default 1`] = ` { "value": { "left": 0, - "width": 8.75, + "width": 10, }, } } @@ -47,7 +47,7 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -59,13 +59,13 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { "left": 0, - "width": 8.75, + "width": 10, }, ] } @@ -94,11 +94,11 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -110,11 +110,11 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -150,7 +150,7 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -168,7 +168,7 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "value": { "left": 0, - "width": 8.75, + "width": 10, }, } } @@ -178,7 +178,7 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -190,13 +190,13 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { "left": 0, - "width": 8.75, + "width": 10, }, ] } @@ -225,11 +225,11 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -241,11 +241,11 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -281,7 +281,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -298,7 +298,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` jestAnimatedStyle={ { "value": { - "left": 8.75, + "left": 10, "width": 0, }, } @@ -309,7 +309,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -321,12 +321,12 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { - "left": 8.75, + "left": 10, "width": 0, }, ] @@ -356,11 +356,11 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -372,11 +372,11 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -413,11 +413,11 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -429,11 +429,11 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -469,7 +469,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -486,7 +486,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = jestAnimatedStyle={ { "value": { - "left": 8.75, + "left": 10, "width": 0, }, } @@ -497,7 +497,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -509,12 +509,12 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { - "left": 8.75, + "left": 10, "width": 0, }, ] @@ -544,11 +544,11 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -560,11 +560,11 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -601,11 +601,11 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -617,11 +617,11 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -660,7 +660,7 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -678,7 +678,7 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "value": { "left": 0, - "width": 8.75, + "width": 10, }, } } @@ -688,7 +688,7 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -700,13 +700,13 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { "left": 0, - "width": 8.75, + "width": 10, }, ] } @@ -735,11 +735,11 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -751,11 +751,11 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -794,7 +794,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -811,7 +811,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` jestAnimatedStyle={ { "value": { - "left": 8.75, + "left": 10, "width": 0, }, } @@ -822,7 +822,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -834,12 +834,12 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { - "left": 8.75, + "left": 10, "width": 0, }, ] @@ -869,11 +869,11 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -885,11 +885,11 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -926,11 +926,11 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -942,11 +942,11 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -985,7 +985,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -1002,7 +1002,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 jestAnimatedStyle={ { "value": { - "left": 8.75, + "left": 10, "width": 0, }, } @@ -1013,7 +1013,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -1025,12 +1025,12 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { - "left": 8.75, + "left": 10, "width": 0, }, ] @@ -1060,11 +1060,11 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -1076,11 +1076,11 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -1117,11 +1117,11 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -1133,11 +1133,11 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index 71168592..7f65a7c9 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -56,15 +56,17 @@ export const TabItem = memo( ({ - color: disabled - ? theme.Button.Disabled.disabledButtonTextColor - : pressed - ? theme.Panel.TabView.tabviewHeaderHoverTextColor - : active - ? theme.Panel.TabView.tabviewHeaderActiveTextColor - : theme.Panel.TabView.tabviewHeaderTextColor, - })} + uniProps={({ components, semantic }) => { + return { + color: disabled + ? semantic.colorScheme.color.fg.muted + : pressed + ? components.tabs.tab.hoverColor + : active + ? components.tabs.tab.activeColor + : components.tabs.tab.color, + } + }} /> ) : null} ( } ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ container: { alignItems: 'center', flexDirection: 'row', - height: - theme.Misc.Badge.badgeHeight + - theme.Panel.TabView.tabviewHeaderPaddingTopBottom * 2, - gap: theme.General.inlineSpacing, - paddingHorizontal: theme.Panel.TabView.tabviewHeaderPaddingLeftRight, - paddingVertical: theme.Panel.TabView.tabviewHeaderPaddingTopBottom, + height: semantic.dimension.size[700] + components.tabs.tab.padding * 2, + gap: components.tabs.tab.gap, + paddingHorizontal: components.tabs.tab.padding, + paddingVertical: components.tabs.tab.padding, - backgroundColor: theme.Panel.TabView.tabviewHeaderBg, + backgroundColor: components.tabs.colorScheme.tab.background, }, pressedContainer: { - backgroundColor: theme.Panel.TabView.tabviewHeaderHoverBg, + backgroundColor: components.tabs.colorScheme.tab.hoverBackground, }, activeContainer: { - backgroundColor: theme.Panel.TabView.tabviewHeaderActiveBg, + backgroundColor: components.tabs.colorScheme.tab.activeBackground, + }, + disabledContainer: { + opacity: semantic.effects.opacity[60], + mixBlendMode: 'luminosity', }, - disabledContainer: { opacity: 0.6, mixBlendMode: 'luminosity' }, icon: { - width: theme.Menu.Item.menuitemSubmenuIconFontSize, - height: theme.Menu.Item.menuitemSubmenuIconFontSize, + width: semantic.dimension.size[600], + height: semantic.dimension.size[600], }, text: { - fontFamily: fonts.primary, - fontSize: typography.Size['text-base'], + fontFamily: fonts.fontFamily.heading, + fontSize: fonts.fontSize[300], verticalAlign: 'middle', includeFontPadding: false, - color: theme.Panel.TabView.tabviewHeaderTextColor, + color: components.tabs.tab.color, }, - pressedText: { color: theme.Panel.TabView.tabviewHeaderHoverTextColor }, - activeText: { color: theme.Panel.TabView.tabviewHeaderActiveTextColor }, - disabledText: { color: theme.Button.Disabled.disabledButtonTextColor }, + pressedText: { color: components.tabs.tab.hoverColor }, + activeText: { color: components.tabs.tab.activeColor }, + disabledText: { color: semantic.colorScheme.color.fg.muted }, })) export enum TestId { diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 497546b6..3c94a134 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -91,19 +91,19 @@ export const Tabs = memo( } ) -const styles = StyleSheet.create(({ theme, border }) => ({ +const styles = StyleSheet.create(({ components, semantic }) => ({ container: { flexDirection: 'row', - gap: theme.Panel.TabView.tabviewHeaderSpacing, + gap: components.tabs.tab.margin, - borderBottomWidth: border.Width.border, - borderColor: theme.Panel.TabView.tabviewNavBorderColor, + borderBottomWidth: semantic.dimension.borderWidth[100], + borderColor: components.tabs.tablist.borderColor, }, line: { position: 'absolute', bottom: 0, - height: border.Width['border-2'], + height: semantic.dimension.borderWidth[200], - backgroundColor: theme.Panel.TabView.tabviewHeaderActiveBorderColor, + backgroundColor: components.tabs.activeBar.background, }, })) diff --git a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap index 70574bf1..e4a3b881 100644 --- a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +++ b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap @@ -39,16 +39,16 @@ exports[`TabItem component tests active: label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, undefined, ] @@ -61,12 +61,12 @@ exports[`TabItem component tests active: label 1`] = ` { "color": "#85888e", "fontFamily": "TT Fellows", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, undefined, @@ -118,16 +118,16 @@ exports[`TabItem component tests active: label, badge 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, undefined, ] @@ -140,12 +140,12 @@ exports[`TabItem component tests active: label, badge 1`] = ` { "color": "#85888e", "fontFamily": "TT Fellows", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, undefined, @@ -171,10 +171,10 @@ exports[`TabItem component tests active: label, badge 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -184,9 +184,9 @@ exports[`TabItem component tests active: label, badge 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -219,9 +219,9 @@ exports[`TabItem component tests active: label, badge 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -275,16 +275,16 @@ exports[`TabItem component tests active: label, icon 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, undefined, ] @@ -292,15 +292,15 @@ exports[`TabItem component tests active: label, icon 1`] = ` > @@ -2160,16 +2160,16 @@ exports[`Tabs component tests disabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, { "mixBlendMode": "luminosity", @@ -2180,11 +2180,11 @@ exports[`Tabs component tests disabled 1`] = ` > @@ -2632,16 +2632,16 @@ exports[`Tabs component tests normal 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, false, ] @@ -2649,15 +2649,15 @@ exports[`Tabs component tests normal 1`] = ` > -const tagIconColor: Record string> = { - basic: (t) => t.Misc.Badge.badgeTextColor, - info: (t) => t.Misc.Badge.badgeInfoTextColor, - success: (t) => t.Misc.Badge.badgeSuccessTextColor, - warning: (t) => t.Misc.Badge.badgeWarningTextColor, - danger: (t) => t.Misc.Badge.badgeDangerTextColor, - secondary: (t) => t.Misc.Badge.badgeTextColor, +const tagIconColor: Record string> = { + basic: (t) => t.tag.colorScheme.primary.color, + info: (t) => t.tag.colorScheme.info.color, + success: (t) => t.tag.colorScheme.success.color, + warning: (t) => t.tag.colorScheme.warn.color, + danger: (t) => t.tag.colorScheme.danger.color, + secondary: (t) => t.tag.colorScheme.secondary.color, } /** @@ -79,9 +79,9 @@ export const Tag = memo( {...tagStyles.icon} source={Icon} testID={TagTestId.icon} - uniProps={({ theme }) => ({ - color: tagIconColor[severity](theme), - })} + uniProps={({ components }) => { + return { color: tagIconColor[severity](components) } + }} /> ) : null} ( } ) -const tagStyles = StyleSheet.create( - ({ theme, border, spacing, typography, fonts }) => ({ - container: { - alignSelf: 'flex-start', - flexDirection: 'row', - alignItems: 'center', - gap: spacing.Gap['gap-1'], - paddingHorizontal: theme.Misc.Tag.tagPadding, - height: theme.Misc.Tag.tagHeight, - borderRadius: border.Radius['rounded-lg'], - variants: { - severity: { - basic: { backgroundColor: theme.Misc.Badge.badgeBg }, - info: { - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, - }, - success: { - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonBg, - }, - warning: { - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonBg, - }, - danger: { - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, - }, - secondary: { backgroundColor: theme.Surface['surface-border'] }, +const tagStyles = StyleSheet.create(({ components, fonts }) => ({ + container: { + alignSelf: 'flex-start', + flexDirection: 'row', + alignItems: 'center', + gap: components.tag.root.gap, + paddingHorizontal: components.tag.root.paddingLeft, + paddingVertical: components.tag.root.paddingTop, + borderRadius: components.tag.root.borderRadius, + variants: { + severity: { + basic: { + backgroundColor: components.tag.colorScheme.primary.background, + }, + info: { backgroundColor: components.tag.colorScheme.info.background }, + success: { + backgroundColor: components.tag.colorScheme.success.background, + }, + warning: { + backgroundColor: components.tag.colorScheme.warn.background, + }, + danger: { + backgroundColor: components.tag.colorScheme.danger.background, + }, + secondary: { + backgroundColor: components.tag.colorScheme.secondary.background, }, }, }, - roundedContainer: { borderRadius: border.Radius['rounded-full'] }, - icon: { - width: theme.Misc.Tag.tagFontSize, - height: theme.Misc.Tag.tagFontSize, - }, - text: { - flexShrink: 1, - fontSize: typography.Size['text-xs'], - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.primary, - variants: { - severity: { - basic: { color: theme.Misc.Badge.badgeTextColor }, - info: { color: theme.Misc.Badge.badgeInfoTextColor }, - success: { color: theme.Misc.Badge.badgeSuccessTextColor }, - warning: { color: theme.Misc.Badge.badgeWarningTextColor }, - danger: { color: theme.Misc.Badge.badgeDangerTextColor }, - secondary: { color: theme.Misc.Badge.badgeTextColor }, - }, + }, + roundedContainer: { borderRadius: components.tag.root.roundedBorderRadius }, + icon: { width: components.tag.icon.size, height: components.tag.icon.size }, + text: { + flexShrink: 1, + fontSize: components.tag.root.fontSize, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.fontFamily.heading, + variants: { + severity: { + basic: { color: components.tag.colorScheme.primary.color }, + info: { color: components.tag.colorScheme.info.color }, + success: { color: components.tag.colorScheme.success.color }, + warning: { color: components.tag.colorScheme.warn.color }, + danger: { color: components.tag.colorScheme.danger.color }, + secondary: { color: components.tag.colorScheme.secondary.color }, }, }, - }) -) + }, +})) export const TagTestId = { root: 'Tag', diff --git a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap index d41f7d70..ff2517c9 100644 --- a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap +++ b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap @@ -11,11 +11,11 @@ exports[`Tag snapshot: default 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#44e858", - "borderRadius": 7, + "borderRadius": 8, "flexDirection": "row", - "gap": 3.5, - "height": 21, - "paddingHorizontal": 7, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -26,10 +26,10 @@ exports[`Tag snapshot: default 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "flexShrink": 1, "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -53,14 +53,14 @@ exports[`Tag snapshot: severity = basic, rounded = true, with Icon 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#44e858", - "borderRadius": 7, + "borderRadius": 8, "flexDirection": "row", - "gap": 3.5, - "height": 21, - "paddingHorizontal": 7, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, { - "borderRadius": 100, + "borderRadius": 1600, }, ] } @@ -68,15 +68,15 @@ exports[`Tag snapshot: severity = basic, rounded = true, with Icon 1`] = ` > (({ countFrom, onFinish }) => { ) }) -const styles = StyleSheet.create(({ typography }) => ({ +const styles = StyleSheet.create(({ semantic }) => ({ container: { overflow: 'hidden', width: COUNTER_SIZE, @@ -111,7 +111,7 @@ const styles = StyleSheet.create(({ typography }) => ({ width: COUNTER_SIZE, height: COUNTER_SIZE, }, - circle: { color: typography.Color.Surface['text-surface-0'] }, + circle: { color: semantic.colorScheme.color.fg.active }, })) export enum TestId { diff --git a/src/components/Timer/TimerFlip.tsx b/src/components/Timer/TimerFlip.tsx index 88c72ad9..de57079b 100644 --- a/src/components/Timer/TimerFlip.tsx +++ b/src/components/Timer/TimerFlip.tsx @@ -64,7 +64,7 @@ export const TimerFlip = memo(({ value, duration = 300 }) => { ) }) -const styles = StyleSheet.create(({ typography, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, fonts }) => ({ container: { overflow: 'hidden', width: COUNTER_SIZE, @@ -81,11 +81,11 @@ const styles = StyleSheet.create(({ typography, fonts }) => ({ position: 'absolute', }, text: { - fontSize: typography.Size['text-base'], - fontWeight: 700, + fontSize: fonts.fontSize[300], + fontWeight: fonts.fontWeight.bold, includeFontPadding: false, verticalAlign: 'middle', - color: typography.Color.Surface['text-surface-0'], - fontFamily: fonts.secondary, + color: semantic.colorScheme.color.fg.active, + fontFamily: fonts.fontFamily.base, }, })) diff --git a/src/components/Timer/__tests__/__snapshots__/Timer.test.tsx.snap b/src/components/Timer/__tests__/__snapshots__/Timer.test.tsx.snap index f5235f08..b7bbf37d 100644 --- a/src/components/Timer/__tests__/__snapshots__/Timer.test.tsx.snap +++ b/src/components/Timer/__tests__/__snapshots__/Timer.test.tsx.snap @@ -158,7 +158,7 @@ exports[`Timer should reset timer on changing countFrom prop: after 1 s 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -223,7 +223,7 @@ exports[`Timer should reset timer on changing countFrom prop: after 1 s 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -395,7 +395,7 @@ exports[`Timer should reset timer on changing countFrom prop: after reset 1`] = { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -460,7 +460,7 @@ exports[`Timer should reset timer on changing countFrom prop: after reset 1`] = { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -632,7 +632,7 @@ exports[`Timer snapshot: before start 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -697,7 +697,7 @@ exports[`Timer snapshot: before start 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -869,7 +869,7 @@ exports[`Timer snapshot: on finish 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -934,7 +934,7 @@ exports[`Timer snapshot: on finish 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index b8e0e140..cabf375c 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -119,182 +119,186 @@ export const ToggleButton = memo( } ) -const toggleStyles = StyleSheet.create( - ({ theme, spacing, border, fonts, typography }) => ({ - container: { - alignSelf: 'flex-start', - borderRadius: border.Radius['rounded-full'], - borderWidth: border.Width.border, - overflow: 'hidden', - variants: { - checked: { - true: { - borderColor: theme.Form.ToggleButton.toggleButtonActiveBorderColor, - }, - false: { - borderColor: theme.Form.ToggleButton.toggleButtonBorderColor, - }, +const toggleStyles = StyleSheet.create(({ components, semantic, fonts }) => ({ + container: { + alignSelf: 'flex-start', + borderRadius: components.togglebutton.root.borderRadius, + borderWidth: semantic.dimension.borderWidth[100], + overflow: 'hidden', + variants: { + checked: { + true: { + borderColor: + components.togglebutton.colorScheme.root.checkedBorderColor, }, - pressed: { - true: { borderColor: theme.Form.ToggleButton.toggleButtonHoverBg }, - false: {}, - }, - disabled: { - true: { - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - opacity: 0.6, - }, - false: {}, + false: { + borderColor: components.togglebutton.colorScheme.root.borderColor, }, }, - compoundVariants: [ - { - checked: 'true', - pressed: 'true', - styles: { - borderColor: - theme.Form.ToggleButton.toggleButtonActiveHoverBorderColor, - }, + pressed: { + true: { borderColor: components.togglebutton.extend.hoverBorderColor }, + false: {}, + }, + disabled: { + true: { + borderColor: + components.togglebutton.colorScheme.root.disabledBorderColor, + opacity: semantic.effects.opacity[60], }, - ], + false: {}, + }, }, - contentContainer: { - flexDirection: 'row', - alignItems: 'center', - alignSelf: 'flex-start', - borderRadius: border.Radius['rounded-full'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - paddingHorizontal: spacing.Padding['p-6'], - gap: spacing.Gap['gap-3'], - variants: { - size: { - xlarge: { minHeight: theme.Button.Common.buttonHeightXL }, - large: { minHeight: theme.Button.Common.buttonHeightLG }, - base: { - minHeight: theme.Button.Common.buttonHeight, - paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, - gap: theme.General.inlineSpacing, - }, - small: { - minHeight: theme.Button.Common.buttonHeightSM, - paddingHorizontal: spacing.Padding['p-3'], - gap: theme.General.inlineSpacing, - }, - }, - checked: { - true: { - backgroundColor: theme.Form.ToggleButton.toggleButtonActiveBg, - }, - false: { backgroundColor: theme.Form.ToggleButton.toggleButtonBg }, - }, - pressed: { - true: { - backgroundColor: theme.Form.ToggleButton.toggleButtonHoverBg, - }, - false: {}, - }, - disabled: { - true: { backgroundColor: theme.Button.Disabled.disabledButtonBg }, - false: {}, + compoundVariants: [ + { + checked: 'true', + pressed: 'true', + styles: { + borderColor: components.togglebutton.extend.checkedHoverBorderColor, }, }, - compoundVariants: [ - { - checked: 'true', - pressed: 'true', - styles: { - backgroundColor: theme.Form.ToggleButton.toggleButtonActiveHoverBg, - }, + ], + }, + contentContainer: { + flexDirection: 'row', + alignItems: 'center', + alignSelf: 'flex-start', + borderRadius: components.togglebutton.root.borderRadius, + paddingVertical: components.togglebutton.root.paddingTop, + paddingHorizontal: semantic.dimension.space[600], + gap: components.togglebutton.extend.ext.gap, + variants: { + size: { + xlarge: { minHeight: semantic.dimension.size[1400] }, + large: { minHeight: semantic.dimension.size[1300] }, + base: { + minHeight: semantic.dimension.size[1100], + paddingHorizontal: components.togglebutton.root.paddingLeft, + gap: components.togglebutton.root.gap, }, - ], - }, - iconOnly: { - aspectRatio: 1, - paddingHorizontal: 0, - paddingVertical: 0, - justifyContent: 'center', - }, - icon: { - variants: { - size: { - xlarge: { - width: typography.Size['text-4xl'], - height: typography.Size['text-4xl'], - }, - large: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], - }, - base: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], - }, - small: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, + small: { + minHeight: semantic.dimension.size[800], + paddingHorizontal: components.togglebutton.root.sm.paddingRight, + gap: components.togglebutton.root.gap, }, - checked: { - true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor }, - false: { color: theme.Form.ToggleButton.toggleButtonTextColor }, + }, + checked: { + true: { + backgroundColor: + components.togglebutton.colorScheme.root.checkedBackground, }, - pressed: { - true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor }, - false: {}, + false: { + backgroundColor: components.togglebutton.colorScheme.root.background, }, - disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, - false: {}, + }, + pressed: { + true: { + backgroundColor: + components.togglebutton.colorScheme.root.hoverBackground, }, + false: {}, }, - compoundVariants: [ - { - checked: 'true', - pressed: 'true', - styles: { - color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor, - }, + disabled: { + true: { + backgroundColor: + components.togglebutton.colorScheme.root.disabledBackground, }, - ], + false: {}, + }, }, - label: { - flexShrink: 1, - fontFamily: fonts.primary, - fontWeight: '600', - includeFontPadding: false, - verticalAlign: 'middle', - variants: { - size: { - xlarge: { fontSize: typography.Size['text-2xl'] }, - large: { fontSize: typography.Size['text-xl'] }, - base: { fontSize: typography.Size['text-base'] }, - small: { fontSize: typography.Size['text-sm'] }, + compoundVariants: [ + { + checked: 'true', + pressed: 'true', + styles: { + backgroundColor: + components.togglebutton.extend.checkedHoverBackground, }, - checked: { - true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor }, - false: { color: theme.Form.ToggleButton.toggleButtonTextColor }, + }, + ], + }, + iconOnly: { + aspectRatio: 1, + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space.none, + justifyContent: 'center', + }, + icon: { + variants: { + size: { + xlarge: { + // Токена iconSize.xlg в дизайн-системе нет — размер взят semantic-ролью. + width: semantic.dimension.size[1000], + height: semantic.dimension.size[1000], }, - pressed: { - true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor }, - false: {}, + large: { + width: components.togglebutton.extend.iconSize.lg, + height: components.togglebutton.extend.iconSize.lg, }, - disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, - false: {}, + base: { + width: components.togglebutton.extend.iconSize.md, + height: components.togglebutton.extend.iconSize.md, }, - }, - compoundVariants: [ - { - checked: 'true', - pressed: 'true', - styles: { - color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor, - }, + small: { + width: components.togglebutton.extend.iconSize.sm, + height: components.togglebutton.extend.iconSize.sm, }, - ], + }, + checked: { + true: { color: components.togglebutton.colorScheme.root.checkedColor }, + false: { color: components.togglebutton.colorScheme.root.color }, + }, + pressed: { + true: { color: components.togglebutton.colorScheme.root.hoverColor }, + false: {}, + }, + disabled: { + true: { color: components.togglebutton.colorScheme.root.disabledColor }, + false: {}, + }, }, - }) -) + compoundVariants: [ + { + checked: 'true', + pressed: 'true', + styles: { color: components.togglebutton.extend.checkedHoverColor }, + }, + ], + }, + label: { + flexShrink: 1, + fontFamily: fonts.fontFamily.heading, + fontWeight: fonts.fontWeight.demibold, + includeFontPadding: false, + verticalAlign: 'middle', + variants: { + size: { + xlarge: { fontSize: fonts.fontSize[600] }, + large: { fontSize: fonts.fontSize[500] }, + base: { fontSize: fonts.fontSize[300] }, + small: { fontSize: fonts.fontSize[100] }, + }, + checked: { + true: { color: components.togglebutton.colorScheme.root.checkedColor }, + false: { color: components.togglebutton.colorScheme.root.color }, + }, + pressed: { + true: { color: components.togglebutton.colorScheme.root.hoverColor }, + false: {}, + }, + disabled: { + true: { color: components.togglebutton.colorScheme.root.disabledColor }, + false: {}, + }, + }, + compoundVariants: [ + { + checked: 'true', + pressed: 'true', + styles: { color: components.togglebutton.extend.checkedHoverColor }, + }, + ], + }, +})) export const ToggleButtonTestId = { root: 'ToggleButton', diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 213d712b..6f1ddbaa 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -10,8 +10,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa [ { "alignSelf": "flex-start", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 100, + "borderColor": "#e2e2e4", + "borderRadius": 1600, "borderWidth": 1, "overflow": "hidden", }, @@ -27,12 +27,12 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 1600, "flexDirection": "row", - "gap": 7, + "gap": 8, "minHeight": 28, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "paddingHorizontal": 14, + "paddingVertical": 8, }, false, ] @@ -41,15 +41,15 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa > ({ + const iconUniProps = ({ semantic }: ThemeType) => ({ color: visited - ? t.Color.Service['text-help'] - : t.Color.Service['text-info'], + ? semantic.colorScheme.color.fg.status.help.default + : semantic.colorScheme.color.fg.status.info.default, }) return ( @@ -133,35 +133,35 @@ export const Anchor = memo( } ) -const styles = StyleSheet.create(({ spacing, typography, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, fonts }) => ({ container: { flexDirection: 'row', alignItems: 'center' }, text: { flexShrink: 1, - fontSize: typography.Size['text-sm'], + fontSize: fonts.fontSize[200], includeFontPadding: false, verticalAlign: 'middle', - color: typography.Color.Service['text-info'], - fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + color: semantic.colorScheme.color.fg.status.info.default, + fontFamily: fonts.fontFamily.base, + lineHeight: fonts.lineHeight[300], + letterSpacing: fonts.letterSpacing[200], }, underlined: { textDecorationLine: 'underline' }, base: { - fontSize: typography.Size['text-base'], + fontSize: fonts.fontSize[300], lineHeight: undefined, - letterSpacing: 0, + letterSpacing: fonts.letterSpacing[500], }, - visited: { color: typography.Color.Service['text-help'] }, + visited: { color: semantic.colorScheme.color.fg.status.help.default }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, iconBase: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: semantic.dimension.size[600], + height: semantic.dimension.size[600], }, - leftIconContainer: { paddingRight: spacing.Padding['p-2'] }, - rightIconContainer: { paddingLeft: spacing.Padding['p-2'] }, + leftIconContainer: { paddingRight: semantic.dimension.space[200] }, + rightIconContainer: { paddingLeft: semantic.dimension.space[200] }, })) export const AnchorTestId = { diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index f223873e..c44d11ed 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -36,21 +36,26 @@ export const Body = ({ ) } -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). +const styles = StyleSheet.create(({ semantic, fonts }) => ({ text: { - fontSize: typography.Size['text-base'], + fontSize: fonts.fontSize[300], includeFontPadding: false, verticalAlign: 'middle', - fontFamily: fonts.secondary, - lineHeight: 20, + fontFamily: fonts.fontFamily.base, + lineHeight: fonts.lineHeight[450], }, - regular: { fontWeight: 400 }, - bold: { fontWeight: 700, letterSpacing: -0.5 }, - default: { color: theme.General.textColor }, - primary: { color: theme.General.primaryColor }, - secondary: { color: theme.General.textSecondaryColor }, - base: { fontSize: typography.Size['text-sm'], lineHeight: 18 }, - paragraph: { lineHeight: 24 }, - paragraphBase: { lineHeight: 21 }, - disabled: { opacity: 0.6 }, + regular: { fontWeight: fonts.fontWeight.regular }, + bold: { + fontWeight: fonts.fontWeight.bold, + letterSpacing: fonts.letterSpacing[400], + }, + default: { color: semantic.colorScheme.color.fg.default }, + primary: { color: semantic.colorScheme.color.fg.brand.default }, + secondary: { color: semantic.colorScheme.color.fg.muted }, + base: { fontSize: fonts.fontSize[200], lineHeight: fonts.lineHeight[400] }, + paragraph: { lineHeight: fonts.lineHeight[600] }, + paragraphBase: { lineHeight: fonts.lineHeight[500] }, + disabled: { opacity: semantic.effects.opacity[60] }, })) diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 7795843a..c71c7c2b 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -39,13 +39,15 @@ export const Caption = ({ {...styles.icon} source={Icon} testID={CaptionTestId.icon} - uniProps={({ theme }) => ({ - color: { - default: theme.General.textColor, - primary: theme.General.primaryColor, - secondary: theme.General.textSecondaryColor, - }[color], - })} + uniProps={({ semantic }) => { + return { + color: { + default: semantic.colorScheme.color.fg.default, + primary: semantic.colorScheme.color.fg.brand.default, + secondary: semantic.colorScheme.color.fg.muted, + }[color], + } + }} /> {text} @@ -57,23 +59,28 @@ export const Caption = ({ const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' } -const styles = StyleSheet.create(({ theme, spacing, typography, fonts }) => ({ +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). +const styles = StyleSheet.create(({ semantic, fonts }) => ({ text: { - fontSize: typography.Size['text-sm'], + fontSize: fonts.fontSize[200], includeFontPadding: false, verticalAlign: 'middle', - fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + fontFamily: fonts.fontFamily.base, + lineHeight: fonts.lineHeight[300], + letterSpacing: fonts.letterSpacing[200], }, textWithIcon: { flexShrink: 1 }, - default: { color: theme.General.textColor }, - primary: { color: theme.General.primaryColor }, - secondary: { color: theme.General.textSecondaryColor }, - disabled: { opacity: 0.6 }, - withIconContainer: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, + default: { color: semantic.colorScheme.color.fg.default }, + primary: { color: semantic.colorScheme.color.fg.brand.default }, + secondary: { color: semantic.colorScheme.color.fg.muted }, + disabled: { opacity: semantic.effects.opacity[60] }, + withIconContainer: { + flexDirection: 'row', + gap: semantic.dimension.space[100], + }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, })) diff --git a/src/components/Typography/Service.tsx b/src/components/Typography/Service.tsx index 78ea369e..442dc22d 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -69,15 +69,17 @@ export const Service = ({ ({ - color: { - danger: t.Color.Service['text-danger'], - warning: t.Color.Service['text-warning'], - success: t.Color.Service['text-success'], - info: t.Color.Service['text-info'], - help: t.Color.Service['text-help'], - }[variant], - })} + uniProps={({ semantic }) => { + return { + color: { + danger: semantic.colorScheme.color.fg.status.danger.default, + warning: semantic.colorScheme.color.fg.status.warning.default, + success: semantic.colorScheme.color.fg.status.success.default, + info: semantic.colorScheme.color.fg.status.info.default, + help: semantic.colorScheme.color.fg.status.help.default, + }[variant], + } + }} /> ) : null} @@ -85,34 +87,34 @@ export const Service = ({ ) } -const styles = StyleSheet.create(({ typography, spacing, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, fonts }) => ({ iconBase: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: semantic.dimension.size[600], + height: semantic.dimension.size[600], }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, - containerBase: { flexDirection: 'row', gap: spacing.Gap['gap-2'] }, - container: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, + containerBase: { flexDirection: 'row', gap: semantic.dimension.space[200] }, + container: { flexDirection: 'row', gap: semantic.dimension.space[100] }, textCommon: { includeFontPadding: false, verticalAlign: 'middle', flexShrink: 1, - fontWeight: 400, - fontSize: typography.Size['text-sm'], - fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + fontWeight: fonts.fontWeight.regular, + fontSize: fonts.fontSize[200], + fontFamily: fonts.fontFamily.base, + lineHeight: fonts.lineHeight[300], + letterSpacing: fonts.letterSpacing[200], }, - textBase: { lineHeight: undefined, fontSize: typography.Size['text-base'] }, + textBase: { lineHeight: undefined, fontSize: fonts.fontSize[300] }, - warning: { color: typography.Color.Service['text-warning'] }, - success: { color: typography.Color.Service['text-success'] }, - info: { color: typography.Color.Service['text-info'] }, - help: { color: typography.Color.Service['text-help'] }, - danger: { color: typography.Color.Service['text-danger'] }, + warning: { color: semantic.colorScheme.color.fg.status.warning.default }, + success: { color: semantic.colorScheme.color.fg.status.success.default }, + info: { color: semantic.colorScheme.color.fg.status.info.default }, + help: { color: semantic.colorScheme.color.fg.status.help.default }, + danger: { color: semantic.colorScheme.color.fg.status.danger.default }, })) diff --git a/src/components/Typography/Subtitle.tsx b/src/components/Typography/Subtitle.tsx index 99ff640b..bfacf93c 100644 --- a/src/components/Typography/Subtitle.tsx +++ b/src/components/Typography/Subtitle.tsx @@ -30,16 +30,18 @@ export const Subtitle = memo( ) ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). +const styles = StyleSheet.create(({ semantic, fonts }) => ({ text: { - fontSize: typography.Size['text-xs'], - fontWeight: 700, + fontSize: fonts.fontSize[100], + fontWeight: fonts.fontWeight.bold, textTransform: 'uppercase', - fontFamily: fonts.secondary, - lineHeight: 15, + fontFamily: fonts.fontFamily.base, + lineHeight: fonts.lineHeight[300], }, - base: { lineHeight: 18, fontSize: typography.Size['text-sm'] }, - default: { color: theme.General.textColor }, - primary: { color: theme.General.primaryColor }, - secondary: { color: theme.General.textSecondaryColor }, + base: { lineHeight: fonts.lineHeight[400], fontSize: fonts.fontSize[200] }, + default: { color: semantic.colorScheme.color.fg.default }, + primary: { color: semantic.colorScheme.color.fg.brand.default }, + secondary: { color: semantic.colorScheme.color.fg.muted }, })) diff --git a/src/components/Typography/Title.tsx b/src/components/Typography/Title.tsx index de6dd6d0..97946d4b 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -10,21 +10,23 @@ export const Title = ({ level, style, ...other }: TitleProps) => ( ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). +const styles = StyleSheet.create(({ semantic, fonts }) => ({ text: { - color: theme.General.textColor, - fontFamily: fonts.primary, - fontWeight: 700, + color: semantic.colorScheme.color.fg.default, + fontFamily: fonts.fontFamily.heading, + fontWeight: fonts.fontWeight.bold, includeFontPadding: false, verticalAlign: 'middle', }, - d1: { fontSize: typography.Size['text-5xl'] }, - d2: { fontSize: typography.Size['text-4xl'] }, - d3: { fontSize: typography.Size['text-3xl'] }, - h1: { fontSize: typography.Size['text-2xl'] }, - h2: { fontSize: typography.Size['text-xl'] }, - h3: { fontSize: typography.Size['text-lg'] }, - h4: { fontSize: typography.Size['text-base'] }, - h5: { fontSize: typography.Size['text-sm'] }, - h6: { fontSize: typography.Size['text-xs'] }, + d1: { fontSize: fonts.fontSize[750] }, + d2: { fontSize: fonts.fontSize[700] }, + d3: { fontSize: fonts.fontSize[650] }, + h1: { fontSize: fonts.fontSize[600] }, + h2: { fontSize: fonts.fontSize[500] }, + h3: { fontSize: fonts.fontSize[400] }, + h4: { fontSize: fonts.fontSize[300] }, + h5: { fontSize: fonts.fontSize[100] }, + h6: { fontSize: fonts.fontSize[100] }, })) diff --git a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap index 53bf9367..1d37bed1 100644 --- a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -17,13 +17,13 @@ exports[`Body component tests default props 1`] = ` style={ [ { - "color": "#1e76cd", + "color": "#4496e8", "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -82,22 +82,22 @@ exports[`Body component tests левая иконка, base, visited, testID = C onStartShouldSetResponder={[Function]} style={ { - "paddingRight": 7, + "paddingRight": 8, } } testID="AnchorLeftPressable" > @@ -15,16 +15,16 @@ exports[`Service component tests base = false, showIcon = false, variant = dange { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -39,7 +39,7 @@ exports[`Service component tests base = false, showIcon = false, variant = dange style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -49,16 +49,16 @@ exports[`Service component tests base = false, showIcon = false, variant = dange { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -73,7 +73,7 @@ exports[`Service component tests base = false, showIcon = false, variant = help style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -83,16 +83,16 @@ exports[`Service component tests base = false, showIcon = false, variant = help { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -107,7 +107,7 @@ exports[`Service component tests base = false, showIcon = false, variant = help style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -117,16 +117,16 @@ exports[`Service component tests base = false, showIcon = false, variant = help { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -141,7 +141,7 @@ exports[`Service component tests base = false, showIcon = false, variant = info style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -151,16 +151,16 @@ exports[`Service component tests base = false, showIcon = false, variant = info { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -175,7 +175,7 @@ exports[`Service component tests base = false, showIcon = false, variant = info style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -185,16 +185,16 @@ exports[`Service component tests base = false, showIcon = false, variant = info { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -209,7 +209,7 @@ exports[`Service component tests base = false, showIcon = false, variant = succe style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -219,16 +219,16 @@ exports[`Service component tests base = false, showIcon = false, variant = succe { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -243,7 +243,7 @@ exports[`Service component tests base = false, showIcon = false, variant = succe style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -253,16 +253,16 @@ exports[`Service component tests base = false, showIcon = false, variant = succe { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -277,7 +277,7 @@ exports[`Service component tests base = false, showIcon = false, variant = warni style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -287,16 +287,16 @@ exports[`Service component tests base = false, showIcon = false, variant = warni { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -311,7 +311,7 @@ exports[`Service component tests base = false, showIcon = false, variant = warni style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -321,16 +321,16 @@ exports[`Service component tests base = false, showIcon = false, variant = warni { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -345,21 +345,21 @@ exports[`Service component tests base = false, showIcon = true, variant = danger style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -2359,19 +2359,19 @@ exports[`Service component tests base = true, showIcon = false, variant = danger { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -2386,7 +2386,7 @@ exports[`Service component tests base = true, showIcon = false, variant = danger style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2396,19 +2396,19 @@ exports[`Service component tests base = true, showIcon = false, variant = danger { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -2423,7 +2423,7 @@ exports[`Service component tests base = true, showIcon = false, variant = help 1 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2433,19 +2433,19 @@ exports[`Service component tests base = true, showIcon = false, variant = help 1 { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -2460,7 +2460,7 @@ exports[`Service component tests base = true, showIcon = false, variant = help 2 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2470,19 +2470,19 @@ exports[`Service component tests base = true, showIcon = false, variant = help 2 { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -2497,7 +2497,7 @@ exports[`Service component tests base = true, showIcon = false, variant = info 1 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2507,19 +2507,19 @@ exports[`Service component tests base = true, showIcon = false, variant = info 1 { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -2534,7 +2534,7 @@ exports[`Service component tests base = true, showIcon = false, variant = info 2 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2544,19 +2544,19 @@ exports[`Service component tests base = true, showIcon = false, variant = info 2 { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -2571,7 +2571,7 @@ exports[`Service component tests base = true, showIcon = false, variant = succes style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2581,19 +2581,19 @@ exports[`Service component tests base = true, showIcon = false, variant = succes { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -2608,7 +2608,7 @@ exports[`Service component tests base = true, showIcon = false, variant = succes style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2618,19 +2618,19 @@ exports[`Service component tests base = true, showIcon = false, variant = succes { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -2645,7 +2645,7 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2655,19 +2655,19 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -2682,7 +2682,7 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2692,19 +2692,19 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -2719,21 +2719,21 @@ exports[`Service component tests base = true, showIcon = true, variant = danger style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > { +export const useFonts = (): ThemeType['fonts'] => { const { theme } = useUnistyles() return theme.fonts diff --git a/src/theme/ThemeContext.tsx b/src/theme/ThemeContext.tsx index e26905a3..f528907e 100644 --- a/src/theme/ThemeContext.tsx +++ b/src/theme/ThemeContext.tsx @@ -4,9 +4,9 @@ import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles' import { SkeletonContextProvider } from '../utils/SkeletonContext' -import { darkTheme } from './darkTheme' -import { lightTheme } from './lightTheme' -import { type FontsConfig, ThemeVariant } from './types' +import { applyFontConfig, type FontsConfig } from './legacyTokens' +import { darkTheme, lightTheme } from './themes' +import { ThemeVariant } from './types' StyleSheet.configure({ settings: { initialTheme: 'light' }, @@ -42,8 +42,12 @@ export const ThemeContextProvider = ({ UnistylesRuntime.setTheme(THEME_NAME_MAP[initialTheme]) if (fonts) { - UnistylesRuntime.updateTheme('light', (t) => ({ ...t, fonts })) - UnistylesRuntime.updateTheme('dark', (t) => ({ ...t, fonts })) + UnistylesRuntime.updateTheme('light', (theme) => + applyFontConfig(theme, fonts) + ) + UnistylesRuntime.updateTheme('dark', (theme) => + applyFontConfig(theme, fonts) + ) } // eslint-disable-next-line react-hooks/exhaustive-deps -- initial* props применяем только на mount }, []) diff --git a/src/theme/__tests__/ThemeContext.test.tsx b/src/theme/__tests__/ThemeContext.test.tsx index 71425de8..c65f0d92 100644 --- a/src/theme/__tests__/ThemeContext.test.tsx +++ b/src/theme/__tests__/ThemeContext.test.tsx @@ -4,13 +4,10 @@ import { Text } from 'react-native' import { UnistylesRuntime } from 'react-native-unistyles' import { ThemeContextProvider } from '../ThemeContext' -import { darkTheme } from '../darkTheme' -import { lightTheme } from '../lightTheme' -import { semanticTokens } from '../tokens' +import { darkTheme, lightTheme } from '../themes' +import { componentTokens, fontTokens, semanticTokens } from '../tokens' import darkSemanticColorSchemeTokens from '../tokens/semantic/colorScheme/dark.json' import lightSemanticColorSchemeTokens from '../tokens/semantic/colorScheme/light.json' -import semanticDimensions from '../tokens/semantic/dimensions.json' -import semanticEffects from '../tokens/semantic/effects.json' import { ThemeVariant } from '../types' describe('ThemeContextProvider', () => { @@ -38,7 +35,7 @@ describe('ThemeContextProvider', () => { expect(UnistylesRuntime.setTheme).toHaveBeenCalledWith('light') }) - test('при передаче fonts обновляет обе темы', () => { + test('при legacy-формате fonts обновляет обе темы', () => { const fonts = { primary: 'Roboto', secondary: 'Inter' } render( @@ -57,10 +54,43 @@ describe('ThemeContextProvider', () => { ) const [, updater] = jest.mocked(UnistylesRuntime.updateTheme).mock.calls[0] + const theme = lightTheme + + expect(updater(theme)).toStrictEqual({ + ...theme, + fonts: { + ...theme.fonts, + fontFamily: { + ...theme.fonts.fontFamily, + heading: fonts.primary, + base: fonts.secondary, + }, + ...fonts, + }, + }) + }) + + test('при актуальном формате fonts обновляет обе темы', () => { + const fonts = { heading: 'Roboto', base: 'Inter' } - expect( - updater({ ...lightTheme, fonts: { primary: 'old', secondary: 'old' } }) - ).toStrictEqual({ ...lightTheme, fonts }) + render( + + child + + ) + + const [, updater] = jest.mocked(UnistylesRuntime.updateTheme).mock.calls[0] + const theme = lightTheme + + expect(updater(theme)).toStrictEqual({ + ...theme, + fonts: { + ...theme.fonts, + fontFamily: { ...theme.fonts.fontFamily, ...fonts }, + primary: fonts.heading, + secondary: fonts.base, + }, + }) }) test('без fonts не вызывает updateTheme', () => { @@ -73,20 +103,57 @@ describe('ThemeContextProvider', () => { expect(UnistylesRuntime.updateTheme).not.toHaveBeenCalled() }) - test('каждая тема содержит только соответствующую цветовую схему', () => { + test('каждая тема содержит соответствующие semantic-токены', () => { expect(lightTheme.semantic.colorScheme).toBe(lightSemanticColorSchemeTokens) expect(darkTheme.semantic.colorScheme).toBe(darkSemanticColorSchemeTokens) - expect(lightTheme.semantic).not.toHaveProperty('dimension') - expect(lightTheme.semantic).not.toHaveProperty('effects') + expect(lightTheme.semantic.dimension).toBe(semanticTokens.dimension) + expect(lightTheme.semantic.effects).toBe(semanticTokens.effects) }) test('общие semantic-токены не зависят от темы', () => { - expect(semanticTokens.dimension).toBe(semanticDimensions) - expect(semanticTokens.effects).toBe(semanticEffects) + expect(lightTheme.semantic.dimension).toBe(darkTheme.semantic.dimension) + expect(lightTheme.semantic.effects).toBe(darkTheme.semantic.effects) }) - test('component-токены не входят в публичные темы', () => { - expect(lightTheme).not.toHaveProperty('components') - expect(darkTheme).not.toHaveProperty('components') + test('каждая тема содержит соответствующие component-токены', () => { + expect(lightTheme.components).toBe(componentTokens.light) + expect(darkTheme.components).toBe(componentTokens.dark) + }) + + test('каждая тема содержит общие шрифтовые токены', () => { + expect(lightTheme.fonts.fontSize).toBe(fontTokens.fontSize) + expect(darkTheme.fonts.fontSize).toBe(fontTokens.fontSize) + }) + + test('публичные темы сохраняют legacy-алиасы шрифтов', () => { + expect(lightTheme.fonts).toStrictEqual( + expect.objectContaining({ + primary: fontTokens.fontFamily.heading, + secondary: fontTokens.fontFamily.base, + }) + ) + }) + + test('публичные темы сохраняют legacy-токены', () => { + const legacyKeys = [ + 'background', + 'border', + 'colors', + 'custom', + 'effects', + 'global', + 'shadow', + 'sizing', + 'spacing', + 'theme', + 'typography', + ] + + expect(Object.keys(lightTheme)).toStrictEqual( + expect.arrayContaining(legacyKeys) + ) + expect(Object.keys(darkTheme)).toStrictEqual( + expect.arrayContaining(legacyKeys) + ) }) }) diff --git a/src/theme/__tests__/tokenAdapters.test.ts b/src/theme/adapters/__tests__/easing.test.ts similarity index 87% rename from src/theme/__tests__/tokenAdapters.test.ts rename to src/theme/adapters/__tests__/easing.test.ts index f11c67b4..c6218172 100644 --- a/src/theme/__tests__/tokenAdapters.test.ts +++ b/src/theme/adapters/__tests__/easing.test.ts @@ -1,4 +1,4 @@ -import { toEasing } from '../tokenAdapters' +import { toEasing } from '../easing' describe('toEasing', () => { test('создаёт Reanimated easing из коэффициентов токена', () => { diff --git a/src/theme/tokenAdapters.ts b/src/theme/adapters/easing.ts similarity index 100% rename from src/theme/tokenAdapters.ts rename to src/theme/adapters/easing.ts diff --git a/src/theme/adapters/index.ts b/src/theme/adapters/index.ts new file mode 100644 index 00000000..3c4cc4cc --- /dev/null +++ b/src/theme/adapters/index.ts @@ -0,0 +1 @@ +export { toEasing, type EasingToken } from './easing' diff --git a/src/theme/commonTheme.ts b/src/theme/commonTheme.ts deleted file mode 100644 index 8add2156..00000000 --- a/src/theme/commonTheme.ts +++ /dev/null @@ -1,23 +0,0 @@ -import background from './assets/background.json' -import border from './assets/border.json' -import { customCommon } from './assets/customCommon' -import effects from './assets/effects.json' -import global from './assets/global.json' -import primaryColors from './assets/primaryColors.json' -import { shadow } from './assets/shadow' -import sizing from './assets/sizing.json' -import spacing from './assets/spacing.json' -import typography from './assets/typography.json' - -export const commonTheme = { - background, - colors: { primary: primaryColors }, - border, - effects, - global, - sizing, - spacing, - typography, - custom: customCommon, - shadow, -} diff --git a/src/theme/darkTheme.ts b/src/theme/darkTheme.ts index bbc330fe..c3419e58 100644 --- a/src/theme/darkTheme.ts +++ b/src/theme/darkTheme.ts @@ -1,14 +1 @@ -import { InputSize } from './assets/InputSize' -import { ModalSize } from './assets/ModalSize' -import { customDark } from './assets/customDark' -import darkThemeAssets from './assets/themeDark.json' -import { commonTheme } from './commonTheme' -import darkSemanticColorSchemeTokens from './tokens/semantic/colorScheme/dark.json' -import type { ThemeType } from './types' - -export const darkTheme: ThemeType = { - semantic: { colorScheme: darkSemanticColorSchemeTokens }, - theme: { ...darkThemeAssets, InputSize, ModalSize, custom: customDark }, - ...commonTheme, - fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' }, -} +export { darkTheme } from './themes' diff --git a/src/theme/index.ts b/src/theme/index.ts index 4266d324..76e8c11c 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,6 +1,5 @@ -export { darkTheme } from './darkTheme' -export { lightTheme } from './lightTheme' -export { toEasing, type EasingToken } from './tokenAdapters' +export { darkTheme, lightTheme } from './themes' +export { toEasing, type EasingToken } from './adapters' export { semanticTokens, type SemanticTokens } from './tokens' export { ThemeContext, diff --git a/src/theme/assets/InputSize/base.json b/src/theme/legacyTokens/InputSize/base.json similarity index 100% rename from src/theme/assets/InputSize/base.json rename to src/theme/legacyTokens/InputSize/base.json diff --git a/src/theme/assets/InputSize/index.ts b/src/theme/legacyTokens/InputSize/index.ts similarity index 100% rename from src/theme/assets/InputSize/index.ts rename to src/theme/legacyTokens/InputSize/index.ts diff --git a/src/theme/assets/InputSize/large.json b/src/theme/legacyTokens/InputSize/large.json similarity index 100% rename from src/theme/assets/InputSize/large.json rename to src/theme/legacyTokens/InputSize/large.json diff --git a/src/theme/assets/InputSize/xlarge.json b/src/theme/legacyTokens/InputSize/xlarge.json similarity index 100% rename from src/theme/assets/InputSize/xlarge.json rename to src/theme/legacyTokens/InputSize/xlarge.json diff --git a/src/theme/assets/ModalSize/index.ts b/src/theme/legacyTokens/ModalSize/index.ts similarity index 100% rename from src/theme/assets/ModalSize/index.ts rename to src/theme/legacyTokens/ModalSize/index.ts diff --git a/src/theme/assets/ModalSize/lg.json b/src/theme/legacyTokens/ModalSize/lg.json similarity index 100% rename from src/theme/assets/ModalSize/lg.json rename to src/theme/legacyTokens/ModalSize/lg.json diff --git a/src/theme/assets/ModalSize/md.json b/src/theme/legacyTokens/ModalSize/md.json similarity index 100% rename from src/theme/assets/ModalSize/md.json rename to src/theme/legacyTokens/ModalSize/md.json diff --git a/src/theme/assets/ModalSize/sm.json b/src/theme/legacyTokens/ModalSize/sm.json similarity index 100% rename from src/theme/assets/ModalSize/sm.json rename to src/theme/legacyTokens/ModalSize/sm.json diff --git a/src/theme/assets/ModalSize/xl.json b/src/theme/legacyTokens/ModalSize/xl.json similarity index 100% rename from src/theme/assets/ModalSize/xl.json rename to src/theme/legacyTokens/ModalSize/xl.json diff --git a/src/theme/legacyTokens/README.md b/src/theme/legacyTokens/README.md new file mode 100644 index 00000000..f163ad42 --- /dev/null +++ b/src/theme/legacyTokens/README.md @@ -0,0 +1,13 @@ +# Legacy-токены + +Эти токены сохраняются только для обратной совместимости публичных `lightTheme`, +`darkTheme` и `ThemeType`. Компоненты библиотеки используют `components`, +`semantic` и сгенерированную структуру `fonts`. + +Единственная точка подключения legacy-токенов — `index.ts`. Компоненты не должны +импортировать отдельные файлы из этой директории. Удалить этот слой можно в +следующей мажорной версии. + +К этому же слою относятся deprecated-алиасы `fonts.primary` и `fonts.secondary`, +а также их преобразование в `fonts.fontFamily.heading` и +`fonts.fontFamily.base`. diff --git a/src/theme/assets/background.json b/src/theme/legacyTokens/background.json similarity index 100% rename from src/theme/assets/background.json rename to src/theme/legacyTokens/background.json diff --git a/src/theme/assets/border.json b/src/theme/legacyTokens/border.json similarity index 100% rename from src/theme/assets/border.json rename to src/theme/legacyTokens/border.json diff --git a/src/theme/assets/customCommon.ts b/src/theme/legacyTokens/customCommon.ts similarity index 100% rename from src/theme/assets/customCommon.ts rename to src/theme/legacyTokens/customCommon.ts diff --git a/src/theme/assets/customDark.ts b/src/theme/legacyTokens/customDark.ts similarity index 100% rename from src/theme/assets/customDark.ts rename to src/theme/legacyTokens/customDark.ts diff --git a/src/theme/assets/customLight.ts b/src/theme/legacyTokens/customLight.ts similarity index 100% rename from src/theme/assets/customLight.ts rename to src/theme/legacyTokens/customLight.ts diff --git a/src/theme/assets/effects.json b/src/theme/legacyTokens/effects.json similarity index 100% rename from src/theme/assets/effects.json rename to src/theme/legacyTokens/effects.json diff --git a/src/theme/assets/global.json b/src/theme/legacyTokens/global.json similarity index 100% rename from src/theme/assets/global.json rename to src/theme/legacyTokens/global.json diff --git a/src/theme/legacyTokens/index.ts b/src/theme/legacyTokens/index.ts new file mode 100644 index 00000000..991912d0 --- /dev/null +++ b/src/theme/legacyTokens/index.ts @@ -0,0 +1,130 @@ +import { InputSize } from './InputSize' +import { ModalSize } from './ModalSize' +import background from './background.json' +import border from './border.json' +import { customCommon } from './customCommon' +import { customDark } from './customDark' +import { customLight } from './customLight' +import effects from './effects.json' +import global from './global.json' +import primaryColors from './primaryColors.json' +import { shadow } from './shadow' +import sizing from './sizing.json' +import spacing from './spacing.json' +import darkTheme from './themeDark.json' +import lightTheme from './themeLight.json' +import typography from './typography.json' + +interface FontFamilyTokens { + base: string + heading: string +} + +export interface LegacyFontAliases { + /** @deprecated Используйте `fonts.fontFamily.heading`. */ + primary: string + /** @deprecated Используйте `fonts.fontFamily.base`. */ + secondary: string +} + +export type FontsConfig = FontFamilyTokens | LegacyFontAliases + +export interface FontsConfigType { + fonts: FontsConfig +} + +export interface LegacyTheme { + /** @deprecated Используйте `semantic` или `components`. */ + background: typeof background + /** @deprecated Используйте `semantic` или `components`. */ + colors: { primary: typeof primaryColors } + /** @deprecated Используйте `semantic` или `components`. */ + border: typeof border + /** @deprecated Используйте `semantic.effects`. */ + effects: typeof effects + /** @deprecated Используйте `semantic`, `components` или `fonts`. */ + global: typeof global + /** @deprecated Используйте `semantic` или `components`. */ + sizing: typeof sizing + /** @deprecated Используйте `semantic` или `components`. */ + spacing: typeof spacing + /** @deprecated Используйте `semantic` или `components`. */ + theme: typeof lightTheme & { + custom: typeof customLight + InputSize: typeof InputSize + ModalSize: typeof ModalSize + } + /** @deprecated Используйте `fonts`. */ + typography: typeof typography + /** @deprecated Используйте `semantic` или `components`. */ + custom: typeof customCommon + /** @deprecated Используйте `semantic.effects`. */ + shadow: typeof shadow +} + +const commonLegacyTokens: Omit = { + background, + colors: { primary: primaryColors }, + border, + effects, + global, + sizing, + spacing, + typography, + custom: customCommon, + shadow, +} + +const legacyThemes = { + light: { + theme: { ...lightTheme, InputSize, ModalSize, custom: customLight }, + ...commonLegacyTokens, + }, + dark: { + theme: { ...darkTheme, InputSize, ModalSize, custom: customDark }, + ...commonLegacyTokens, + }, +} satisfies Record<'light' | 'dark', LegacyTheme> + +const toFontFamilyTokens = (fonts: FontsConfig): FontFamilyTokens => { + if (!('primary' in fonts)) { + return fonts + } + + const aliases = fonts as Record<'primary' | 'secondary', string> + + return { base: aliases.secondary, heading: aliases.primary } +} + +const toLegacyFontAliases = ({ + base, + heading, +}: FontFamilyTokens): LegacyFontAliases => ({ + primary: heading, + secondary: base, +}) + +export const applyFontConfig = < + T extends { fonts: { fontFamily: FontFamilyTokens } }, +>( + theme: T, + fonts: FontsConfig +) => { + const fontFamily = { ...theme.fonts.fontFamily, ...toFontFamilyTokens(fonts) } + + return { + ...theme, + fonts: { ...theme.fonts, fontFamily, ...toLegacyFontAliases(fontFamily) }, + } +} + +export const withLegacyTokens = < + T extends { fonts: { fontFamily: FontFamilyTokens } }, +>( + theme: T, + colorScheme: keyof typeof legacyThemes +) => ({ + ...theme, + ...legacyThemes[colorScheme], + fonts: { ...theme.fonts, ...toLegacyFontAliases(theme.fonts.fontFamily) }, +}) diff --git a/src/theme/assets/primaryColors.json b/src/theme/legacyTokens/primaryColors.json similarity index 100% rename from src/theme/assets/primaryColors.json rename to src/theme/legacyTokens/primaryColors.json diff --git a/src/theme/assets/shadow.ts b/src/theme/legacyTokens/shadow.ts similarity index 100% rename from src/theme/assets/shadow.ts rename to src/theme/legacyTokens/shadow.ts diff --git a/src/theme/assets/sizing.json b/src/theme/legacyTokens/sizing.json similarity index 100% rename from src/theme/assets/sizing.json rename to src/theme/legacyTokens/sizing.json diff --git a/src/theme/assets/spacing.json b/src/theme/legacyTokens/spacing.json similarity index 100% rename from src/theme/assets/spacing.json rename to src/theme/legacyTokens/spacing.json diff --git a/src/theme/assets/themeDark.json b/src/theme/legacyTokens/themeDark.json similarity index 100% rename from src/theme/assets/themeDark.json rename to src/theme/legacyTokens/themeDark.json diff --git a/src/theme/assets/themeLight.json b/src/theme/legacyTokens/themeLight.json similarity index 100% rename from src/theme/assets/themeLight.json rename to src/theme/legacyTokens/themeLight.json diff --git a/src/theme/assets/typography.json b/src/theme/legacyTokens/typography.json similarity index 100% rename from src/theme/assets/typography.json rename to src/theme/legacyTokens/typography.json diff --git a/src/theme/lightTheme.ts b/src/theme/lightTheme.ts index e3c80bfb..a39341e9 100644 --- a/src/theme/lightTheme.ts +++ b/src/theme/lightTheme.ts @@ -1,14 +1 @@ -import { InputSize } from './assets/InputSize' -import { ModalSize } from './assets/ModalSize' -import { customLight } from './assets/customLight' -import lightThemeAssets from './assets/themeLight.json' -import { commonTheme } from './commonTheme' -import lightSemanticColorSchemeTokens from './tokens/semantic/colorScheme/light.json' -import type { ThemeType } from './types' - -export const lightTheme: ThemeType = { - semantic: { colorScheme: lightSemanticColorSchemeTokens }, - theme: { ...lightThemeAssets, InputSize, ModalSize, custom: customLight }, - ...commonTheme, - fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' }, -} +export { lightTheme } from './themes' diff --git a/src/theme/themes.ts b/src/theme/themes.ts new file mode 100644 index 00000000..9f55ed97 --- /dev/null +++ b/src/theme/themes.ts @@ -0,0 +1,29 @@ +import { withLegacyTokens } from './legacyTokens' +import { componentTokens, fontTokens, semanticTokens } from './tokens' +import darkSemanticColorSchemeTokens from './tokens/semantic/colorScheme/dark.json' +import lightSemanticColorSchemeTokens from './tokens/semantic/colorScheme/light.json' +import type { RuntimeTheme, ThemeType } from './types' + +const createRuntimeTheme = ( + colorScheme: RuntimeTheme['semantic']['colorScheme'], + components: RuntimeTheme['components'] +): RuntimeTheme => ({ + semantic: { colorScheme, ...semanticTokens }, + components, + fonts: fontTokens, +}) + +const runtimeThemes = { + light: createRuntimeTheme( + lightSemanticColorSchemeTokens, + componentTokens.light + ), + dark: createRuntimeTheme(darkSemanticColorSchemeTokens, componentTokens.dark), +} + +export const lightTheme: ThemeType = withLegacyTokens( + runtimeThemes.light, + 'light' +) + +export const darkTheme: ThemeType = withLegacyTokens(runtimeThemes.dark, 'dark') diff --git a/src/theme/tokens/README.md b/src/theme/tokens/README.md index 6547d0fb..f7dd2729 100644 --- a/src/theme/tokens/README.md +++ b/src/theme/tokens/README.md @@ -1,12 +1,11 @@ # Сгенерированные токены -В `ThemeType.semantic` подключается только выбранный `colorScheme`. Общие -`dimension` и `effects` экспортируются как статический `semanticTokens`, поэтому -не участвуют в переключении темы. `components` хранит внутренние токены -компонентов и не входит в темы или публичные экспорты. `fonts.json` содержит -общие для цветовых схем токены из `primitive.fonts`, но пока не подключён к теме -и не экспортируется из библиотеки. Всё генерируется из -`design-tokens/input/tokens.json` и не редактируется вручную. +В `ThemeType`, `lightTheme` и `darkTheme` входят выбранный +`semantic.colorScheme`, общие `semantic.dimension`, `semantic.effects`, `fonts` +и соответствующие теме `components`. Отдельно из пакета экспортируются только +общие `semanticTokens`; карты component- и font-токенов остаются внутренними. +Всё генерируется из `design-tokens/input/tokens.json` и не редактируется +вручную. Подробности: [генератор токенов](../../../scripts/token-generator/README.md). diff --git a/src/theme/tokens/index.ts b/src/theme/tokens/index.ts index 9344acc6..08fdcb6f 100644 --- a/src/theme/tokens/index.ts +++ b/src/theme/tokens/index.ts @@ -1,6 +1,20 @@ +import type { FontTokens } from '../types' + +import darkComponentTokens from './components/dark.json' +import lightComponentTokens from './components/light.json' +import generatedFontTokens from './fonts.json' import dimensions from './semantic/dimensions.json' import effects from './semantic/effects.json' export const semanticTokens = { dimension: dimensions, effects } as const export type SemanticTokens = typeof semanticTokens + +export type ComponentTokens = typeof lightComponentTokens + +export const componentTokens = { + light: lightComponentTokens, + dark: darkComponentTokens, +} as const + +export const fontTokens = generatedFontTokens as FontTokens diff --git a/src/theme/types.ts b/src/theme/types.ts index a73c9ea9..0402a101 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -1,49 +1,39 @@ -import type { InputSize } from './assets/InputSize' -import type { ModalSize } from './assets/ModalSize' -import type background from './assets/background.json' -import type border from './assets/border.json' -import type { customCommon } from './assets/customCommon' -import type { customLight } from './assets/customLight' -import type effects from './assets/effects.json' -import type global from './assets/global.json' -import type primaryColors from './assets/primaryColors.json' -import type { shadow } from './assets/shadow' -import type sizing from './assets/sizing.json' -import type spacing from './assets/spacing.json' -import type lightTheme from './assets/themeLight.json' -import type typography from './assets/typography.json' +import type { TextStyle } from 'react-native' + +import type { LegacyFontAliases, LegacyTheme } from './legacyTokens' +import type lightComponentTokens from './tokens/components/light.json' +import type fontTokens from './tokens/fonts.json' import type lightSemanticColorSchemeTokens from './tokens/semantic/colorScheme/light.json' +import type semanticDimensions from './tokens/semantic/dimensions.json' +import type semanticEffects from './tokens/semantic/effects.json' -export interface ThemeType { - background: typeof background - colors: { primary: typeof primaryColors } - border: typeof border - effects: typeof effects - global: typeof global - sizing: typeof sizing - spacing: typeof spacing - semantic: { colorScheme: typeof lightSemanticColorSchemeTokens } - theme: typeof lightTheme & { - custom: typeof customLight - InputSize: typeof InputSize - ModalSize: typeof ModalSize +export interface RuntimeTheme { + semantic: { + colorScheme: typeof lightSemanticColorSchemeTokens + dimension: typeof semanticDimensions + effects: typeof semanticEffects } - typography: typeof typography - custom: typeof customCommon - shadow: typeof shadow - fonts: FontsConfig + components: typeof lightComponentTokens + fonts: FontTokens } +export type ThemeType = RuntimeTheme & + LegacyTheme & { fonts: FontTokens & LegacyFontAliases } + export enum ThemeVariant { Light = 'Light', Dark = 'Dark', } -export interface FontsConfig { - primary: string - secondary: string +export type FontTokens = Omit & { + fontWeight: Record< + keyof typeof fontTokens.fontWeight, + TextStyle['fontWeight'] + > } -export interface FontsConfigType { - fonts: FontsConfig -} +export type { + FontsConfig, + FontsConfigType, + LegacyFontAliases, +} from './legacyTokens' diff --git a/src/utils/SvgUniversal.tsx b/src/utils/SvgUniversal.tsx index 00119d79..e169a63b 100644 --- a/src/utils/SvgUniversal.tsx +++ b/src/utils/SvgUniversal.tsx @@ -6,9 +6,7 @@ import { memo, } from 'react' import { SvgUri, SvgXml, type SvgProps } from 'react-native-svg' -import { withUnistyles } from 'react-native-unistyles' - -import type { ThemeType } from '../theme/types' +import { withUnistyles, type UnistylesThemes } from 'react-native-unistyles' export type SvgSource = | { uri: string } @@ -20,6 +18,8 @@ export interface SvgUniversalProps extends SvgProps { source: SvgSource } +export type SvgUniversalTheme = UnistylesThemes[keyof UnistylesThemes] + /** * Компонент для рендера SVG из разных источников * Поддерживает: @@ -57,7 +57,7 @@ type SvgUniversalComponent = ForwardRefExoticComponent< PropsWithoutRef< Partial & { uniProps?: ( - theme: ThemeType + theme: SvgUniversalTheme ) => Omit< Partial, 'style' | 'contentContainerStyle'