From 8b83af30c1f3de2aae3b253f08efd0cb7ba1fd69 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Thu, 30 Jul 2026 14:56:48 +0300 Subject: [PATCH 01/47] =?UTF-8?q?feat(Button):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/Button.test.tsx.snap | 15976 ++++++++-------- .../__snapshots__/ButtonBadge.test.tsx.snap | 28 +- .../ButtonSeverity.test.tsx.snap | 56 +- .../Button/utils/ButtonActivityIndicator.tsx | 24 +- .../Button/utils/ButtonContainer.tsx | 267 +- src/components/Button/utils/ButtonIcon.tsx | 219 +- src/components/Button/utils/ButtonLabel.tsx | 209 +- 7 files changed, 7836 insertions(+), 8943 deletions(-) diff --git a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index 2a91e4a6..2a313fd8 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,7 +54,7 @@ exports[`Button component tests Button default props 1`] = ` + + + + + + + + Button + + +`; + +exports[`Button component tests Button with icon on left, size - small, shape - circle, variant - link, loading - true, disabled - false 1`] = ` + + + + Button + + +`; + +exports[`Button component tests Button with icon on left, size - small, shape - circle, variant - link, loading - true, disabled - false 2`] = ` + - - - - - - - - Button - - -`; - -exports[`Button component tests Button with icon on left, size - small, shape - circle, variant - link, loading - true, disabled - false 1`] = ` - - - - Button - - -`; - -exports[`Button component tests Button with icon on left, size - small, shape - circle, variant - link, loading - true, disabled - false 2`] = ` - ({ - 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..1559a0e8 100644 --- a/src/components/Button/utils/ButtonContainer.tsx +++ b/src/components/Button/utils/ButtonContainer.tsx @@ -80,96 +80,92 @@ const ButtonContainerComponent = ({ export const ButtonContainer = genericMemo(ButtonContainerComponent) +// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-1; value=3.5 +// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-0; value=0 +// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-1; value=3.5 const buttonContainerStyles = StyleSheet.create( - ({ theme, border, spacing, sizing }) => ({ + ({ components: { button }, spacing }) => ({ 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'], height: 'auto', minHeight: 'auto', - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, 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 +177,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 +219,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 +318,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 +327,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 +336,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 +345,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 +354,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 +364,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 +373,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 +382,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 +391,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 +400,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 +409,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 +418,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, }, }, @@ -480,9 +431,9 @@ const buttonContainerStyles = StyleSheet.create( 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'], + height: 28, + minHeight: 28, + maxHeight: 28, }, }, { @@ -516,9 +467,9 @@ const buttonContainerStyles = StyleSheet.create( 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'], + height: 14, + minHeight: 28, + maxHeight: 28, }, }, ], diff --git a/src/components/Button/utils/ButtonIcon.tsx b/src/components/Button/utils/ButtonIcon.tsx index 9dcb9c6c..6277d630 100644 --- a/src/components/Button/utils/ButtonIcon.tsx +++ b/src/components/Button/utils/ButtonIcon.tsx @@ -48,140 +48,115 @@ 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'], +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 +// TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e +const buttonIconStyles = StyleSheet.create( + ({ components: { button }, typography }) => ({ + icon: { + variants: { + size: { + xlarge: { + height: typography.Size['text-2xl'], + width: typography.Size['text-2xl'], + }, + large: { + height: typography.Size['text-2xl'], + width: typography.Size['text-2xl'], + }, + base: { + height: typography.Size['text-xl'], + width: typography.Size['text-xl'], + }, + small: { + height: typography.Size['text-base'], + width: typography.Size['text-base'], + }, }, - 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: typography.Color.Common['text-color-secondary'] }, }, - 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..0c35ea89 100644 --- a/src/components/Button/utils/ButtonLabel.tsx +++ b/src/components/Button/utils/ButtonLabel.tsx @@ -48,132 +48,107 @@ 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'] }, - }, +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 +// TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e +const buttonLabelStyles = StyleSheet.create( + ({ components: { button }, 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: 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: typography.Color.Common['text-color-secondary'] }, + }, - // 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 }, + }, + ], + }, + }) +) From 8c2e208fe3fc4dcb11583a192f41536efc74a2cb Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Thu, 30 Jul 2026 22:13:13 +0300 Subject: [PATCH 02/47] =?UTF-8?q?feat(InputSwitch):=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/InputSwitch.test.tsx.snap | 736 +++++++++--------- .../InputSwitch/styles/useHandleStyles.ts | 26 +- .../InputSwitch/styles/useSliderStyles.ts | 38 +- src/theme/assets/DEPRECATED_TOKENS.md | 10 + 4 files changed, 409 insertions(+), 401 deletions(-) create mode 100644 src/theme/assets/DEPRECATED_TOKENS.md diff --git a/src/components/Input/InputSwitch/__tests__/__snapshots__/InputSwitch.test.tsx.snap b/src/components/Input/InputSwitch/__tests__/__snapshots__/InputSwitch.test.tsx.snap index 43c39801..9b89404e 100644 --- a/src/components/Input/InputSwitch/__tests__/__snapshots__/InputSwitch.test.tsx.snap +++ b/src/components/Input/InputSwitch/__tests__/__snapshots__/InputSwitch.test.tsx.snap @@ -33,8 +33,8 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -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/theme/assets/DEPRECATED_TOKENS.md b/src/theme/assets/DEPRECATED_TOKENS.md new file mode 100644 index 00000000..c779007c --- /dev/null +++ b/src/theme/assets/DEPRECATED_TOKENS.md @@ -0,0 +1,10 @@ +# Legacy-токены + +Токены ниже сохраняются в `assets`, пока они входят в публичные `lightTheme`, +`darkTheme` и `ThemeType`. Удалять их можно после миграции всех внутренних +потребителей и только как breaking change. + +| Миграция | Legacy-пути | Замена | Статус | +| ----------- | -------------------------------------------------------- | ------------------------- | ----------------------------------------------------------- | +| Button | `theme.Button.*` | `components.button` | Namespace ещё используется другими компонентами | +| InputSwitch | `theme.Form.inputSwitch.*`, `theme.custom.inputSwitch.*` | `components.toggleswitch` | Внутри UI Kit больше не используются, кандидаты на удаление | From 0eba8b234df0890f72bd5f47c21469f8c525aff4 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Thu, 30 Jul 2026 22:16:40 +0300 Subject: [PATCH 03/47] =?UTF-8?q?feat(ProgressSpinner):=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=B4=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3?= =?UTF-8?q?=D0=B5=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD?= =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ProgressSpinner/ProgressSpinner.tsx | 11 +++++++---- src/theme/assets/DEPRECATED_TOKENS.md | 9 +++++---- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/ProgressSpinner/ProgressSpinner.tsx b/src/components/ProgressSpinner/ProgressSpinner.tsx index 390467ac..cef30d05 100644 --- a/src/components/ProgressSpinner/ProgressSpinner.tsx +++ b/src/components/ProgressSpinner/ProgressSpinner.tsx @@ -125,10 +125,13 @@ export const ProgressSpinner = memo( } ) -const styles = StyleSheet.create(({ theme, global }) => ({ - primary: { color: theme.General.primaryColor }, - white: { color: global.Neutrals.White['white-100'] }, -})) +// TODO(tokens-migration): reason=missing; legacy=global.Neutrals.White.white-100; value=#ffffff +const styles = StyleSheet.create( + ({ components: { progressspinner }, global }) => ({ + primary: { color: progressspinner.colorScheme.root.colorOne }, + white: { color: global.Neutrals.White['white-100'] }, + }) +) enum TestId { ProgressSpinner = 'ProgressSpinner', diff --git a/src/theme/assets/DEPRECATED_TOKENS.md b/src/theme/assets/DEPRECATED_TOKENS.md index c779007c..74376931 100644 --- a/src/theme/assets/DEPRECATED_TOKENS.md +++ b/src/theme/assets/DEPRECATED_TOKENS.md @@ -4,7 +4,8 @@ `darkTheme` и `ThemeType`. Удалять их можно после миграции всех внутренних потребителей и только как breaking change. -| Миграция | Legacy-пути | Замена | Статус | -| ----------- | -------------------------------------------------------- | ------------------------- | ----------------------------------------------------------- | -| Button | `theme.Button.*` | `components.button` | Namespace ещё используется другими компонентами | -| InputSwitch | `theme.Form.inputSwitch.*`, `theme.custom.inputSwitch.*` | `components.toggleswitch` | Внутри UI Kit больше не используются, кандидаты на удаление | +| Миграция | Legacy-пути | Замена | Статус | +| --------------- | -------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------- | +| Button | `theme.Button.*` | `components.button` | Namespace ещё используется другими компонентами | +| InputSwitch | `theme.Form.inputSwitch.*`, `theme.custom.inputSwitch.*` | `components.toggleswitch` | Внутри UI Kit больше не используются, кандидаты на удаление | +| ProgressSpinner | `theme.General.primaryColor` | `components.progressspinner` | Общий токен ещё используется другими компонентами | From 4616c51452ef6d268edc190b5786de0c0fb7177a Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:10:18 +0300 Subject: [PATCH 04/47] =?UTF-8?q?feat(Skeleton):=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Skeleton/Skeleton.tsx | 9 ++++++--- .../__tests__/__snapshots__/Skeleton.test.tsx.snap | 6 +++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx index 1aa52ffe..e6de1fbd 100644 --- a/src/components/Skeleton/Skeleton.tsx +++ b/src/components/Skeleton/Skeleton.tsx @@ -87,14 +87,17 @@ export const Skeleton = memo(({ style, testID, ...rest }) => { ) }) -const styles = StyleSheet.create(({ border, theme }) => ({ +const styles = StyleSheet.create(({ border, components: { skeleton } }) => ({ container: { + // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-lg; value=7; target=components.skeleton.root.borderRadius; targetValue=14 borderRadius: border.Radius['rounded-lg'], 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..429a59f0 100644 --- a/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap +++ b/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap @@ -100,7 +100,7 @@ exports[`Skeleton 50% animation 1`] = ` 0, 1726145252, 0.5, - 1728053247, + 1727066353, 1, 1726145252, ] @@ -237,7 +237,7 @@ exports[`Skeleton 100% animation 1`] = ` 0, 1726145252, 0.5, - 1728053247, + 1727066353, 1, 1726145252, ] @@ -374,7 +374,7 @@ exports[`Skeleton before animation started: before animation started 1`] = ` 0, 1726145252, 0.5, - 1728053247, + 1727066353, 1, 1726145252, ] From 56607aea2bed4be7f72726679bd981c5b2bd24da Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:16:23 +0300 Subject: [PATCH 05/47] =?UTF-8?q?feat(ProgressBar):=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ProgressBar/ProgressBar.tsx | 46 ++++++++++--------- .../__snapshots__/ProgressBar.test.tsx.snap | 40 ++++++++-------- 2 files changed, 45 insertions(+), 41 deletions(-) diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index 2b4630e6..d55886d3 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -89,30 +89,34 @@ export const ProgressBar = memo( } ) -const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({ - container: { - borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.Misc.ProgressBar.progressBarBg, - overflow: 'hidden', - }, +const styles = StyleSheet.create( + ({ components, typography, border, fonts }) => ({ + container: { + // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.progressbar.root.borderRadius; targetValue=14 + borderRadius: border.Radius['rounded-full'], + backgroundColor: components.progressbar.root.background, + overflow: 'hidden', + }, - indicator: { - alignItems: 'center', - justifyContent: 'center', - backgroundColor: theme.Misc.ProgressBar.progressBarValueBg, - height: '100%', - overflow: 'hidden', - }, + indicator: { + alignItems: 'center', + justifyContent: 'center', + 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'], - textAlign: 'center', - color: theme.Misc.ProgressBar.progressBarValueTextColor, - fontFamily: fonts.primary, - }, -})) + indicatorText: { + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xs; value=10.5; target=components.progressbar.label.fontSize; targetValue=12 + fontSize: typography.Size['text-xs'], + textAlign: 'center', + color: components.progressbar.label.color, + fontFamily: fonts.primary, + }, + }) +) /** * Стиль компонента ProgressBar diff --git a/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap index f5afd78f..da3ccf39 100644 --- a/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -139,7 +139,7 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei "width": 100, }, { - "height": 14, + "height": 16, }, ] } @@ -188,7 +188,7 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei Date: Fri, 31 Jul 2026 17:24:14 +0300 Subject: [PATCH 06/47] =?UTF-8?q?feat(Divider):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Divider/Divider.tsx | 20 ++++++++++--------- .../__snapshots__/Divider.test.tsx.snap | 18 ++++++++--------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index f12c2367..0ed12324 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -111,8 +111,8 @@ export const Divider = memo( ({ - color: theme.General.textSecondaryColor, + uniProps={({ components }) => ({ + color: components.divider.content.color, })} /> ) : null} @@ -133,15 +133,15 @@ export const Divider = memo( } ) -const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({ +const styles = StyleSheet.create(({ spacing, components, typography }) => ({ container: { - minHeight: sizing.Height['h-2'], + minHeight: 28, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, containerVertical: { - minWidth: sizing.Width['w-2'], + minWidth: 28, flexDirection: 'column', flexGrow: 1, alignSelf: 'flex-start', @@ -160,22 +160,24 @@ const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({ width: '100%', height: '100%', borderWidth: 1, - borderColor: theme.General.dividerColor, + borderColor: components.divider.root.borderColor, }, lineDash: { borderStyle: 'dashed' }, content: { flexShrink: 1, flexDirection: 'row', alignItems: 'center', - paddingHorizontal: theme.General.inlineSpacing, + paddingHorizontal: spacing.Padding['p-2'], + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.divider.extend.content.gap; targetValue=8 gap: spacing.Gap['gap-2'], - backgroundColor: theme.Panel.Panel.Body.panelContentBg, + backgroundColor: components.divider.content.background, }, contentVertical: { paddingHorizontal: 0, - paddingVertical: theme.General.inlineSpacing, + paddingVertical: spacing.Padding['p-2'], }, icon: { + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.divider.extend.iconSize; targetValue=16 width: typography.Size['text-base'], height: typography.Size['text-base'], }, diff --git a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap index 59628323..bb248952 100644 --- a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap +++ b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap @@ -102,7 +102,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "horizontal", "sho [ { "alignItems": "center", - "backgroundColor": "#f0f0f1", + "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, "gap": 7, @@ -273,7 +273,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" [ { "alignItems": "center", - "backgroundColor": "#f0f0f1", + "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, "gap": 7, @@ -296,7 +296,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" meetOrSlice={0} minX={0} minY={0} - stroke="#85888e" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -332,7 +332,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" } stroke={ { - "payload": 4286941326, + "payload": 4281019955, "type": 0, } } @@ -354,7 +354,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" } stroke={ { - "payload": 4286941326, + "payload": 4281019955, "type": 0, } } @@ -470,7 +470,7 @@ exports[`Divider {"Icon": [Object], "align": "start", "layout": "horizontal", "s [ { "alignItems": "center", - "backgroundColor": "#f0f0f1", + "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, "gap": 7, @@ -490,7 +490,7 @@ exports[`Divider {"Icon": [Object], "align": "start", "layout": "horizontal", "s meetOrSlice={0} minX={0} minY={0} - stroke="#85888e" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -526,7 +526,7 @@ exports[`Divider {"Icon": [Object], "align": "start", "layout": "horizontal", "s } stroke={ { - "payload": 4286941326, + "payload": 4281019955, "type": 0, } } @@ -548,7 +548,7 @@ exports[`Divider {"Icon": [Object], "align": "start", "layout": "horizontal", "s } stroke={ { - "payload": 4286941326, + "payload": 4281019955, "type": 0, } } From 194707ef416455ff363bce40c5580de14f7c211a Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:25:34 +0300 Subject: [PATCH 07/47] =?UTF-8?q?feat(Avatar):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Avatar/Avatar.tsx | 59 +++---- .../__snapshots__/Avatar.test.tsx.snap | 148 +++++++++--------- 2 files changed, 106 insertions(+), 101 deletions(-) diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 83938627..f8aaacb9 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -188,8 +188,8 @@ export const Avatar = memo( height={iconSize} source={Icon} testID={AvatarTestId.icon} - uniProps={({ theme }) => ({ - color: iconColor ?? theme.Misc.Avatar.avatarTextColor, + uniProps={({ components }) => ({ + color: iconColor ?? components.avatar.root.color, })} width={iconSize} /> @@ -257,31 +257,36 @@ export const Avatar = memo( } ) -const styles = StyleSheet.create(({ theme, border, typography, fonts }) => ({ - container: { - justifyContent: 'center', - alignItems: 'center', - borderRadius: theme.General.borderRadiusXL, - borderWidth: 1, - borderColor: theme.Misc.Avatar.avatarBorderColor, - backgroundColor: theme.Misc.Avatar.avatarBg, - overflow: 'hidden', - }, - backgroundFill: { backgroundColor: theme.Misc.Avatar.avatarBg }, - circle: { borderRadius: border.Radius['rounded-full'] }, - text: { - fontSize: typography.Size['text-base'], - textTransform: 'uppercase', - color: theme.Misc.Avatar.avatarTextColor, - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.secondary, - }, - badgeContainer: { position: 'absolute', right: 0, top: -7 }, - badgeMeasureContainer: { alignSelf: 'flex-start' }, - icon: { width: typography.Size['text-base'] }, - iconXLarge: { width: typography.Size['text-2xl'] }, -})) +const styles = StyleSheet.create( + ({ components, border, typography, fonts }) => ({ + container: { + justifyContent: 'center', + alignItems: 'center', + borderRadius: components.avatar.root.borderRadius, + borderWidth: 1, + borderColor: components.avatar.extend.borderColor, + backgroundColor: components.avatar.root.background, + overflow: 'hidden', + }, + backgroundFill: { backgroundColor: components.avatar.root.background }, + // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.avatar.extend.circle.borderRadius; targetValue=1600 + circle: { borderRadius: border.Radius['rounded-full'] }, + text: { + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.avatar.root.fontSize; targetValue=16 + fontSize: typography.Size['text-base'], + textTransform: 'uppercase', + color: components.avatar.root.color, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.secondary, + }, + badgeContainer: { position: 'absolute', right: 0, top: -7 }, + badgeMeasureContainer: { alignSelf: 'flex-start' }, + icon: { width: typography.Size['text-base'] }, + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-2xl; value=21; target=components.avatar.xl.icon.size; targetValue=24 + iconXLarge: { width: typography.Size['text-2xl'] }, + }) +) export const AvatarTestId = { root: 'Avatar', diff --git a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index 81e73a20..ef336ccc 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", @@ -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", @@ -180,7 +180,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#000000" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -216,7 +216,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -238,7 +238,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -261,7 +261,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -287,8 +287,8 @@ exports[`Avatar component tests Size: large, shape: circle, type: image 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -336,8 +336,8 @@ exports[`Avatar component tests Size: large, shape: circle, type: label 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -362,7 +362,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: label 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -389,8 +389,8 @@ exports[`Avatar component tests Size: large, shape: sqare, type: icon 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -418,7 +418,7 @@ exports[`Avatar component tests Size: large, shape: sqare, type: icon 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#000000" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -454,7 +454,7 @@ exports[`Avatar component tests Size: large, shape: sqare, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -476,7 +476,7 @@ exports[`Avatar component tests Size: large, shape: sqare, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -499,7 +499,7 @@ exports[`Avatar component tests Size: large, shape: sqare, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -525,8 +525,8 @@ exports[`Avatar component tests Size: large, shape: square, type: image 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -572,8 +572,8 @@ exports[`Avatar component tests Size: large, shape: square, type: label 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -596,7 +596,7 @@ exports[`Avatar component tests Size: large, shape: square, type: label 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -623,8 +623,8 @@ exports[`Avatar component tests Size: nomal, shape: circle, type: icon 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -654,7 +654,7 @@ exports[`Avatar component tests Size: nomal, shape: circle, type: icon 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#000000" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -690,7 +690,7 @@ exports[`Avatar component tests Size: nomal, shape: circle, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -712,7 +712,7 @@ exports[`Avatar component tests Size: nomal, shape: circle, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -735,7 +735,7 @@ exports[`Avatar component tests Size: nomal, shape: circle, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -761,8 +761,8 @@ exports[`Avatar component tests Size: normal, shape: circle, type: image 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -810,8 +810,8 @@ exports[`Avatar component tests Size: normal, shape: circle, type: label 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -836,7 +836,7 @@ exports[`Avatar component tests Size: normal, shape: circle, type: label 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -863,8 +863,8 @@ exports[`Avatar component tests Size: normal, shape: sqare, type: icon 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -892,7 +892,7 @@ exports[`Avatar component tests Size: normal, shape: sqare, type: icon 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#000000" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -928,7 +928,7 @@ exports[`Avatar component tests Size: normal, shape: sqare, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -950,7 +950,7 @@ exports[`Avatar component tests Size: normal, shape: sqare, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -973,7 +973,7 @@ exports[`Avatar component tests Size: normal, shape: sqare, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -999,8 +999,8 @@ exports[`Avatar component tests Size: normal, shape: square, type: image 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1046,8 +1046,8 @@ exports[`Avatar component tests Size: normal, shape: square, type: label 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1070,7 +1070,7 @@ exports[`Avatar component tests Size: normal, shape: square, type: label 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -1097,8 +1097,8 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: icon 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1128,7 +1128,7 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: icon 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#000000" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1164,7 +1164,7 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -1186,7 +1186,7 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -1209,7 +1209,7 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -1235,8 +1235,8 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: image 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1284,8 +1284,8 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: label 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1310,7 +1310,7 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: label 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -1337,8 +1337,8 @@ exports[`Avatar component tests Size: xlarge, shape: sqare, type: icon 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1366,7 +1366,7 @@ exports[`Avatar component tests Size: xlarge, shape: sqare, type: icon 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#000000" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1402,7 +1402,7 @@ exports[`Avatar component tests Size: xlarge, shape: sqare, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -1424,7 +1424,7 @@ exports[`Avatar component tests Size: xlarge, shape: sqare, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -1447,7 +1447,7 @@ exports[`Avatar component tests Size: xlarge, shape: sqare, type: icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -1473,8 +1473,8 @@ exports[`Avatar component tests Size: xlarge, shape: square, type: image 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1520,8 +1520,8 @@ exports[`Avatar component tests Size: xlarge, shape: square, type: label 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1544,7 +1544,7 @@ exports[`Avatar component tests Size: xlarge, shape: square, type: label 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -1571,8 +1571,8 @@ exports[`Avatar component tests With badge, showBadge: false 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1597,7 +1597,7 @@ exports[`Avatar component tests With badge, showBadge: false 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -1624,8 +1624,8 @@ exports[`Avatar component tests With badge, showBadge: true 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -1650,7 +1650,7 @@ exports[`Avatar component tests With badge, showBadge: true 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, From 14008bc3fb8184952f943d2bc578621027d7f2da Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:27:07 +0300 Subject: [PATCH 08/47] =?UTF-8?q?feat(Badge):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Badge/Badge.tsx | 28 +++--- .../__snapshots__/Badge.test.tsx.snap | 88 +++++++++---------- 2 files changed, 59 insertions(+), 57 deletions(-) diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 8b0e5f6a..9f75d4ab 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -104,42 +104,44 @@ export const Badge = memo( ) const badgeStyles = StyleSheet.create( - ({ theme, border, typography, fonts }) => ({ + ({ components, border, typography, fonts }) => ({ container: { alignItems: 'flex-start' }, dot: { variants: { severity: { - basic: { backgroundColor: theme.Misc.Badge.badgeBg }, + basic: { + backgroundColor: components.badge.colorScheme.primary.background, + }, info: { - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, + backgroundColor: components.badge.extend.extDot.info.background, }, success: { - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonBg, + backgroundColor: components.badge.extend.extDot.success.background, }, warning: { - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonBg, + backgroundColor: components.badge.extend.extDot.warn.background, }, danger: { - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, + backgroundColor: components.badge.extend.extDot.danger.background, }, }, }, }, dotShape: { - width: theme.Misc.Badge.badgeDotSize, - height: theme.Misc.Badge.badgeDotSize, + width: components.badge.dot.size, + height: components.badge.dot.size, + // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.badge.root.borderRadius; targetValue=8 borderRadius: border.Radius['rounded-full'], }, textBadgeContainer: { - height: theme.Misc.Badge.badgeHeight, - paddingHorizontal: theme.Misc.Tag.tagPadding, + height: components.badge.root.height, + paddingHorizontal: components.badge.root.padding, justifyContent: 'center', borderRadius: border.Radius['rounded-full'], }, textBadge: { - color: theme.Misc.Badge.badgeTextColor, + color: components.badge.colorScheme.primary.color, + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xs; value=10.5; target=components.badge.root.fontSize; targetValue=12 fontSize: typography.Size['text-xs'], includeFontPadding: false, verticalAlign: 'middle', diff --git a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap index e4b181ae..fdf4477e 100644 --- a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap @@ -19,8 +19,8 @@ exports[`Badge component tests dot, severity: basic 1`] = ` }, { "borderRadius": 100, - "height": 7, - "width": 7, + "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, + "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, + "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, + "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, + "height": 8, + "width": 8, }, ] } @@ -159,9 +159,9 @@ exports[`Badge component tests severity: basic 1`] = ` }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -171,7 +171,7 @@ exports[`Badge component tests severity: basic 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -206,7 +206,7 @@ exports[`Badge component tests severity: basic 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -236,13 +236,13 @@ exports[`Badge component tests severity: basic 2`] = ` style={ [ { - "backgroundColor": "#aad7fb", + "backgroundColor": "#77baf4", }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -252,7 +252,7 @@ exports[`Badge component tests severity: basic 2`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -287,7 +287,7 @@ exports[`Badge component tests severity: basic 2`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -317,13 +317,13 @@ exports[`Badge component tests severity: basic 3`] = ` style={ [ { - "backgroundColor": "#aafbb7", + "backgroundColor": "#77f48a", }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -333,7 +333,7 @@ exports[`Badge component tests severity: basic 3`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -368,7 +368,7 @@ exports[`Badge component tests severity: basic 3`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -398,13 +398,13 @@ exports[`Badge component tests severity: basic 4`] = ` style={ [ { - "backgroundColor": "#fddeaa", + "backgroundColor": "#facb75", }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -414,7 +414,7 @@ exports[`Badge component tests severity: basic 4`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -449,7 +449,7 @@ exports[`Badge component tests severity: basic 4`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -479,13 +479,13 @@ exports[`Badge component tests severity: basic 5`] = ` style={ [ { - "backgroundColor": "#fbacaa", + "backgroundColor": "#f47f77", }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -495,7 +495,7 @@ exports[`Badge component tests severity: basic 5`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -530,7 +530,7 @@ exports[`Badge component tests severity: basic 5`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -564,9 +564,9 @@ exports[`Badge component tests severity: default 1`] = ` }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -576,7 +576,7 @@ exports[`Badge component tests severity: default 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -611,7 +611,7 @@ exports[`Badge component tests severity: default 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -647,8 +647,8 @@ exports[`Badge component tests with custom style 1`] = ` }, { "borderRadius": 100, - "height": 7, - "width": 7, + "height": 8, + "width": 8, }, ] } From 8a7acf347cf6186c298c08a3caeccc833a96282d Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:28:43 +0300 Subject: [PATCH 09/47] =?UTF-8?q?feat(Accordion):=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Accordion/Accordion.tsx | 31 ++++++++++--------- .../__snapshots__/Accordion.test.tsx.snap | 30 +++++++++--------- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 76ffb39e..02f2c72a 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -109,8 +109,8 @@ export const Accordion: React.FC = ({ ({ - color: theme.Panel.Accordion.accordionHeaderTextColor, + uniProps={({ components }) => ({ + color: components.accordion.header.color, })} /> @@ -119,8 +119,8 @@ export const Accordion: React.FC = ({ {...styles.icon} source={Icon} testID={AccordionTestIds.icon} - uniProps={({ theme }) => ({ - color: theme.Panel.Accordion.accordionHeaderTextColor, + uniProps={({ components }) => ({ + color: components.accordion.header.color, })} /> ) : null} @@ -159,14 +159,15 @@ export const AccordionTestIds = { separator: 'Separator', } -const styles = StyleSheet.create(({ theme, fonts }) => ({ +const styles = StyleSheet.create(({ components, spacing, fonts }) => ({ component: { width: '100%' }, header: { - paddingVertical: theme.Panel.Accordion.accordionHeaderPaddingTopBottom, - gap: 7, + paddingVertical: spacing.Padding['p-4'], + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.accordion.extend.extHeader.gap; targetValue=8 + gap: spacing.Gap['gap-2'], flexDirection: 'row', alignItems: 'center', - backgroundColor: theme.Panel.Accordion.accordionHeaderBg, + backgroundColor: components.accordion.colorScheme.header.background, }, icon: { width: 17.5, height: 17.5 }, title: { @@ -174,20 +175,22 @@ const styles = StyleSheet.create(({ theme, fonts }) => ({ includeFontPadding: false, verticalAlign: 'middle', fontWeight: 700, - color: theme.Panel.Accordion.accordionHeaderTextColor, + color: components.accordion.header.color, fontFamily: fonts.secondary, }, 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, + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-7; value=24.5; target=components.accordion.content.paddingLeft; targetValue=24 + paddingLeft: spacing.Padding['p-7'], + paddingTop: spacing.Padding['p-0'], + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-0; value=0; target=components.accordion.content.paddingRight; targetValue=24 + paddingRight: spacing.Padding['p-0'], + paddingBottom: spacing.Padding['p-4'], }, separator: { - borderTopColor: theme.Panel.Accordion.accordionHeaderBorderColor, + borderTopColor: components.accordion.panel.borderColor, borderTopWidth: 1, }, disabled: { mixBlendMode: 'luminosity', opacity: 0.6 }, diff --git a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap index 04669b17..f07d5cdf 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,7 +51,7 @@ exports[`Accordion Header elements maximal 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", "gap": 7, "paddingVertical": 14, @@ -103,7 +103,7 @@ exports[`Accordion Header elements maximal 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -139,7 +139,7 @@ exports[`Accordion Header elements maximal 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -161,7 +161,7 @@ exports[`Accordion Header elements maximal 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -183,7 +183,7 @@ exports[`Accordion Header elements maximal 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -219,7 +219,7 @@ exports[`Accordion Header elements maximal 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -241,7 +241,7 @@ exports[`Accordion Header elements maximal 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -264,7 +264,7 @@ exports[`Accordion Header elements maximal 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -278,7 +278,7 @@ exports[`Accordion Header elements maximal 1`] = ` Date: Fri, 31 Jul 2026 17:30:13 +0300 Subject: [PATCH 10/47] =?UTF-8?q?feat(Chip):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Chip/Chip.tsx | 93 +++--- .../__snapshots__/Chip.test.tsx.snap | 304 +++++++++--------- 2 files changed, 192 insertions(+), 205 deletions(-) diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 921f630b..018d0060 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -44,10 +44,10 @@ export const Chip = memo( showIcon = true, ...rest }) => { - const iconUniProps = ({ theme }: ThemeType) => ({ + const iconUniProps = ({ components }: ThemeType) => ({ color: disabled - ? theme.Button.Disabled.disabledButtonTextColor - : theme.Misc.Chip.chipTextColor, + ? components.button.extend.disabledColor + : components.chip.colorScheme.root.color, }) return ( @@ -83,10 +83,10 @@ export const Chip = memo( {...styles.icon} source={IconX} style={pressed ? styles.pressedClose : null} - uniProps={({ theme }) => ({ + uniProps={({ components }) => ({ color: disabled - ? theme.Button.Disabled.disabledButtonTextColor - : theme.Misc.Chip.chipTextColor, + ? components.button.extend.disabledColor + : components.chip.colorScheme.root.color, })} /> )} @@ -97,48 +97,51 @@ export const Chip = memo( } ) -const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({ - chip: { - height: theme.Misc.Chip.chipHeight, - alignSelf: 'flex-start', - justifyContent: 'center', - alignItems: 'center', - flexDirection: 'row', - gap: theme.General.inlineSpacing, +const styles = StyleSheet.create( + ({ components, typography, spacing, border, fonts }) => ({ + chip: { + alignSelf: 'flex-start', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'row', + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.chip.root.gap; targetValue=8 + gap: spacing.Gap['gap-2'], - 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, - }, - disabledChip: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - opacity: 0.6, - mixBlendMode: 'luminosity', - }, - icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, - text: { - fontSize: typography.Size['text-base'], - verticalAlign: 'middle', - color: theme.Misc.Chip.chipTextColor, - includeFontPadding: false, - fontFamily: fonts.secondary, - }, - disabledText: { color: theme.General.textSecondaryColor }, - pressedClose: { - borderWidth: border.Width['border-3'], - borderColor: border.Color.Service['border-success'][400], - borderRadius: border.Radius['rounded-full'], - }, -})) + backgroundColor: components.chip.colorScheme.root.background, + borderColor: components.chip.extend.borderColor, + }, + disabledChip: { + backgroundColor: components.button.extend.disabledBackground, + borderColor: 'transparent', + opacity: 0.6, + mixBlendMode: 'luminosity', + }, + icon: { + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.chip.icon.size; targetValue=16 + width: typography.Size['text-base'], + height: typography.Size['text-base'], + }, + text: { + fontSize: typography.Size['text-base'], + verticalAlign: 'middle', + color: components.chip.colorScheme.root.color, + includeFontPadding: false, + fontFamily: fonts.secondary, + }, + disabledText: { color: components.button.extend.disabledColor }, + pressedClose: { + borderWidth: border.Width['border-3'], + borderColor: border.Color.Service['border-success'][400], + borderRadius: border.Radius['rounded-full'], + }, + }) +) export enum TestId { Container = 'Chip_Container', diff --git a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap index d7fe5652..3cc8d364 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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -63,7 +62,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -146,7 +144,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -182,7 +180,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -204,7 +202,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -227,7 +225,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -243,7 +241,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -300,16 +298,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -321,7 +318,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -375,7 +372,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -411,7 +408,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -433,7 +430,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -456,7 +453,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -513,16 +510,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -539,7 +535,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -575,7 +571,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -597,7 +593,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -620,7 +616,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -636,7 +632,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -690,7 +686,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -726,7 +722,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -748,7 +744,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -771,7 +767,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -828,16 +824,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -849,7 +844,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -906,16 +901,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -927,7 +921,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -984,16 +978,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -1005,7 +998,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -1059,7 +1052,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1095,7 +1088,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1117,7 +1110,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1140,7 +1133,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1197,16 +1190,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -1218,7 +1210,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -1272,7 +1264,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1308,7 +1300,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1330,7 +1322,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1353,7 +1345,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1410,16 +1402,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -1431,7 +1422,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -1488,16 +1479,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -1514,7 +1504,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1550,7 +1540,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1572,7 +1562,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1595,7 +1585,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1611,7 +1601,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -1668,16 +1658,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -1689,7 +1678,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -1743,7 +1732,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1779,7 +1768,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1801,7 +1790,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1824,7 +1813,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1881,16 +1870,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -1907,7 +1895,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1943,7 +1931,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1965,7 +1953,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1988,7 +1976,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -2004,7 +1992,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -2058,7 +2046,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2094,7 +2082,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -2116,7 +2104,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -2139,7 +2127,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -2196,16 +2184,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -2217,7 +2204,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -2274,16 +2261,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -2295,7 +2281,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -2352,16 +2338,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -2373,7 +2358,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -2427,7 +2412,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2463,7 +2448,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -2485,7 +2470,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -2508,7 +2493,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -2565,16 +2550,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, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -2586,7 +2570,7 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -2640,7 +2624,7 @@ exports[`Chip component tests { meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2676,7 +2660,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -2698,7 +2682,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -2721,7 +2705,7 @@ exports[`Chip component tests { } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } From 9b26cd3aacb53abbdbed2e7bcc536b073e2f994b Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:31:43 +0300 Subject: [PATCH 11/47] =?UTF-8?q?feat(Tag):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tag/Tag.tsx | 68 ++++++++++-------- .../__tests__/__snapshots__/Tag.test.tsx.snap | 70 +++++++++---------- 2 files changed, 72 insertions(+), 66 deletions(-) diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index d1437ee9..82ab97fc 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -42,13 +42,16 @@ export interface TagProps type TagSeverity = NonNullable -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< + TagSeverity, + (t: ThemeType['components']) => 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,8 +82,8 @@ export const Tag = memo( {...tagStyles.icon} source={Icon} testID={TagTestId.icon} - uniProps={({ theme }) => ({ - color: tagIconColor[severity](theme), + uniProps={({ components }) => ({ + color: tagIconColor[severity](components), })} /> ) : null} @@ -98,55 +101,58 @@ export const Tag = memo( ) const tagStyles = StyleSheet.create( - ({ theme, border, spacing, typography, fonts }) => ({ + ({ components, border, spacing, typography, fonts }) => ({ container: { alignSelf: 'flex-start', flexDirection: 'row', alignItems: 'center', + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-1; value=3.5; target=components.tag.root.gap; targetValue=4 gap: spacing.Gap['gap-1'], - paddingHorizontal: theme.Misc.Tag.tagPadding, - height: theme.Misc.Tag.tagHeight, + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-2; value=7; target=components.tag.root.paddingLeft; targetValue=8 + paddingHorizontal: spacing.Padding['p-2'], + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-1; value=3.5; target=components.tag.root.paddingTop; targetValue=4 + paddingVertical: spacing.Padding['p-1'], + // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-lg; value=7; target=components.tag.root.borderRadius; targetValue=8 borderRadius: border.Radius['rounded-lg'], variants: { severity: { - basic: { backgroundColor: theme.Misc.Badge.badgeBg }, - info: { - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, + basic: { + backgroundColor: components.tag.colorScheme.primary.background, }, + info: { backgroundColor: components.tag.colorScheme.info.background }, success: { - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonBg, + backgroundColor: components.tag.colorScheme.success.background, }, warning: { - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonBg, + backgroundColor: components.tag.colorScheme.warn.background, }, danger: { - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, + backgroundColor: components.tag.colorScheme.danger.background, + }, + secondary: { + backgroundColor: components.tag.colorScheme.secondary.background, }, - secondary: { backgroundColor: theme.Surface['surface-border'] }, }, }, }, + // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.tag.root.roundedBorderRadius; targetValue=1600 roundedContainer: { borderRadius: border.Radius['rounded-full'] }, - icon: { - width: theme.Misc.Tag.tagFontSize, - height: theme.Misc.Tag.tagFontSize, - }, + icon: { width: components.tag.icon.size, height: components.tag.icon.size }, text: { flexShrink: 1, + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xs; value=10.5; target=components.tag.root.fontSize; targetValue=12 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 }, + 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 }, }, }, }, diff --git a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap index d41f7d70..f62b8100 100644 --- a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap +++ b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap @@ -14,8 +14,8 @@ exports[`Tag snapshot: default 1`] = ` "borderRadius": 7, "flexDirection": "row", "gap": 3.5, - "height": 21, "paddingHorizontal": 7, + "paddingVertical": 3.5, }, undefined, ] @@ -26,7 +26,7 @@ exports[`Tag snapshot: default 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "flexShrink": 1, "fontFamily": "TT Fellows", "fontSize": 10.5, @@ -56,8 +56,8 @@ exports[`Tag snapshot: severity = basic, rounded = true, with Icon 1`] = ` "borderRadius": 7, "flexDirection": "row", "gap": 3.5, - "height": 21, "paddingHorizontal": 7, + "paddingVertical": 3.5, }, { "borderRadius": 100, @@ -68,15 +68,15 @@ exports[`Tag snapshot: severity = basic, rounded = true, with Icon 1`] = ` > Date: Fri, 31 Jul 2026 17:33:07 +0300 Subject: [PATCH 12/47] =?UTF-8?q?feat(Dialog):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/DialogComponent.tsx | 18 ++- src/components/Dialog/DialogHeader.tsx | 15 +-- .../__snapshots__/Dialog.test.tsx.snap | 10 +- .../__snapshots__/DialogHeader.test.tsx.snap | 108 ++++++++++-------- 4 files changed, 81 insertions(+), 70 deletions(-) diff --git a/src/components/Dialog/DialogComponent.tsx b/src/components/Dialog/DialogComponent.tsx index 04c95534..15a8a63b 100644 --- a/src/components/Dialog/DialogComponent.tsx +++ b/src/components/Dialog/DialogComponent.tsx @@ -36,18 +36,16 @@ export const DialogComponent: React.FC = ({ ) } -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..c62f28c2 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -75,8 +75,8 @@ export const DialogHeader = ({ ({ - color: theme.General.actionIconColor, + uniProps={({ components }) => ({ + color: components.dialog.root.color, })} /> @@ -88,19 +88,20 @@ export const DialogHeader = ({ ) } -const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({ +const styles = StyleSheet.create(({ components, typography, border }) => ({ 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, + backgroundColor: components.dialog.root.borderColor, }, closeIcon: { width: typography.Size['text-base'], 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..cd852d89 100644 --- a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap +++ b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap @@ -7,9 +7,10 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -183,7 +184,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange meetOrSlice={0} minX={0} minY={0} - stroke="rgba(0, 0, 0, 0.6000)" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -219,7 +220,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -241,7 +242,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -264,7 +265,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -295,9 +296,10 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -494,7 +496,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" meetOrSlice={0} minX={0} minY={0} - stroke="rgba(0, 0, 0, 0.6000)" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -530,7 +532,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -552,7 +554,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -575,7 +577,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -606,9 +608,10 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -805,7 +808,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" meetOrSlice={0} minX={0} minY={0} - stroke="rgba(0, 0, 0, 0.6000)" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -841,7 +844,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -863,7 +866,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -886,7 +889,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -917,9 +920,10 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -1093,7 +1097,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe meetOrSlice={0} minX={0} minY={0} - stroke="rgba(0, 0, 0, 0.6000)" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1129,7 +1133,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -1151,7 +1155,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -1174,7 +1178,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -1205,9 +1209,10 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -1404,7 +1409,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni meetOrSlice={0} minX={0} minY={0} - stroke="rgba(0, 0, 0, 0.6000)" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1440,7 +1445,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -1462,7 +1467,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -1485,7 +1490,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -1516,9 +1521,10 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -1590,7 +1596,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi meetOrSlice={0} minX={0} minY={0} - stroke="rgba(0, 0, 0, 0.6000)" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1626,7 +1632,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -1648,7 +1654,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -1671,7 +1677,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi } stroke={ { - "payload": 2566914048, + "payload": 4281019955, "type": 0, } } @@ -1702,9 +1708,10 @@ exports[`DialogHeader {"onClose": undefined, "severity": "danger", "title": "Dia { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -1851,9 +1858,10 @@ exports[`DialogHeader {"onClose": undefined, "severity": "help", "title": "Dialo { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -2023,9 +2031,10 @@ exports[`DialogHeader {"onClose": undefined, "severity": "info", "title": "Dialo { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -2195,9 +2204,10 @@ exports[`DialogHeader {"onClose": undefined, "severity": "success", "title": "Di { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -2344,9 +2354,10 @@ exports[`DialogHeader {"onClose": undefined, "severity": "warning", "title": "Di { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -2516,9 +2527,10 @@ exports[`DialogHeader {"onClose": undefined, "severity": undefined, "title": "Di { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > From 9a47ff4297a5ee95bdadc4627f076a5e6c50ba2a Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:34:25 +0300 Subject: [PATCH 13/47] =?UTF-8?q?feat(Checkbox):=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Checkbox/Checkbox.tsx | 45 +++++------- .../__snapshots__/Checkbox.test.tsx.snap | 73 ++++++++----------- 2 files changed, 50 insertions(+), 68 deletions(-) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 41a89bf7..7148ca26 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -97,8 +97,8 @@ export const Checkbox = memo( ({ - color: theme.Form.Checkbox.checkboxIconActiveColor, + uniProps={({ components }) => ({ + 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 }) => ({ 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, + borderColor: components.checkbox.root.checkedBorderColor, opacity: 0.2, 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, }, ] From 387411d460baa3c433e2a84f0f721a09f2f774d1 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:35:32 +0300 Subject: [PATCH 14/47] =?UTF-8?q?feat(Slider):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Slider/Slider.tsx | 26 +-- .../__snapshots__/Slider.test.tsx.snap | 202 +++++++++--------- 2 files changed, 114 insertions(+), 114 deletions(-) diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 8195b651..81707366 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -252,7 +252,7 @@ export const Slider = memo( } ) -const styles = StyleSheet.create(({ theme, border }) => { +const styles = StyleSheet.create(({ components, border }) => { return { container: { width: '100%', @@ -260,33 +260,33 @@ const styles = StyleSheet.create(({ theme, border }) => { alignItems: 'center', }, track: { - height: theme.Form.Slider.sliderHorizontalHeight, - backgroundColor: theme.Form.Slider.sliderBg, - borderRadius: theme.Form.Slider.sliderHandleBorderRadius, + height: components.slider.track.size, + backgroundColor: components.slider.track.background, + borderRadius: components.slider.track.borderRadius, position: 'relative', width: '100%', justifyContent: 'center', }, line: { - height: theme.Form.Slider.sliderHorizontalHeight, - borderRadius: theme.Form.Slider.sliderHandleBorderRadius, + height: components.slider.track.size, + borderRadius: components.slider.track.borderRadius, position: 'absolute', - backgroundColor: theme.Form.Slider.sliderRangeBg, + backgroundColor: components.slider.range.background, }, point: { - width: theme.Form.Slider.sliderHandleWidth, - height: theme.Form.Slider.sliderHandleHeight, - borderRadius: theme.Form.Slider.sliderHandleHeight / 2, + width: components.slider.handle.width, + height: components.slider.handle.height, + borderRadius: components.slider.handle.borderRadius, position: 'absolute', - backgroundColor: theme.Form.Slider.sliderHandleBg, + backgroundColor: components.slider.colorScheme.handle.content.background, borderWidth: border.Width['border-3'], - borderColor: theme.Form.Slider.sliderHandleBorder, + borderColor: components.slider.handle.background, }, disabled: { opacity: 0.6, mixBlendMode: 'luminosity' }, - hovered: { backgroundColor: theme.Form.Slider.sliderHandleHoverBg }, + 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..8153e102 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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "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, + "borderRadius": 1600, "borderWidth": 3, - "height": 17.5, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { From e71d35adeb487cb0b7e45f7bf4b8057290af3b51 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:36:51 +0300 Subject: [PATCH 15/47] =?UTF-8?q?feat(RadioButton):=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RadioButton/RadioButton.tsx | 58 +-- .../__snapshots__/RadioButton.test.tsx.snap | 404 +++--------------- 2 files changed, 76 insertions(+), 386 deletions(-) diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index 8eb0e7a6..798183cc 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, border }) => ({ container: { - width: theme.Form.RadioButton.radiobuttonWidth, - height: theme.Form.RadioButton.radiobuttonHeight, + width: components.radiobutton.root.width, + height: components.radiobutton.root.height, borderRadius: border.Radius['rounded-full'], borderWidth: 1, alignItems: 'center', @@ -82,19 +81,19 @@ 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, + borderColor: components.radiobutton.root.borderColor, + backgroundColor: components.radiobutton.root.disabledBackground, opacity: 0.6, }, 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, + width: components.radiobutton.icon.size, + height: components.radiobutton.icon.size, borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.Form.InputText.inputBg, + 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..40cde9bf 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`] = ` - - - - - - - Date: Fri, 31 Jul 2026 17:38:09 +0300 Subject: [PATCH 16/47] =?UTF-8?q?feat(Tabs):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tabs/TabItem/TabItem.tsx | 40 ++- src/components/Tabs/Tabs.tsx | 8 +- .../__snapshots__/Tabs.test.tsx.snap | 284 +++++++++--------- 3 files changed, 165 insertions(+), 167 deletions(-) diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index 71168592..3bf032b3 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -56,14 +56,14 @@ export const TabItem = memo( ({ + uniProps={({ components }) => ({ color: disabled - ? theme.Button.Disabled.disabledButtonTextColor + ? components.button.extend.disabledColor : pressed - ? theme.Panel.TabView.tabviewHeaderHoverTextColor + ? components.tabs.tab.hoverColor : active - ? theme.Panel.TabView.tabviewHeaderActiveTextColor - : theme.Panel.TabView.tabviewHeaderTextColor, + ? components.tabs.tab.activeColor + : components.tabs.tab.color, })} /> ) : null} @@ -86,30 +86,28 @@ export const TabItem = memo( } ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ components, typography, 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: components.badge.root.height + 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: 0.6, mixBlendMode: 'luminosity' }, icon: { - width: theme.Menu.Item.menuitemSubmenuIconFontSize, - height: theme.Menu.Item.menuitemSubmenuIconFontSize, + width: typography.Size['text-xl'], + height: typography.Size['text-xl'], }, text: { fontFamily: fonts.primary, @@ -117,11 +115,11 @@ const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ 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: components.button.extend.disabledColor }, })) export enum TestId { diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 497546b6..d6432de3 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, border }) => ({ container: { flexDirection: 'row', - gap: theme.Panel.TabView.tabviewHeaderSpacing, + gap: components.tabs.tab.margin, borderBottomWidth: border.Width.border, - borderColor: theme.Panel.TabView.tabviewNavBorderColor, + borderColor: components.tabs.tablist.borderColor, }, line: { position: 'absolute', bottom: 0, height: border.Width['border-2'], - 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..b9961332 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, ] @@ -66,7 +66,7 @@ exports[`TabItem component tests active: label 1`] = ` "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, ] @@ -145,7 +145,7 @@ exports[`TabItem component tests active: label, badge 1`] = ` "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, undefined, @@ -172,9 +172,9 @@ exports[`TabItem component tests active: label, badge 1`] = ` }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -184,7 +184,7 @@ exports[`TabItem component tests active: label, badge 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -219,7 +219,7 @@ exports[`TabItem component tests active: label, badge 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -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, ] @@ -300,7 +300,7 @@ exports[`TabItem component tests active: label, icon 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#000000" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -336,7 +336,7 @@ exports[`TabItem component tests active: label, icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -358,7 +358,7 @@ exports[`TabItem component tests active: label, icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -381,7 +381,7 @@ exports[`TabItem component tests active: label, icon 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -404,7 +404,7 @@ exports[`TabItem component tests active: label, icon 1`] = ` "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, undefined, @@ -456,16 +456,16 @@ exports[`TabItem component tests active: label, icon, 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, ] @@ -481,7 +481,7 @@ exports[`TabItem component tests active: label, icon, badge 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#000000" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -517,7 +517,7 @@ exports[`TabItem component tests active: label, icon, badge 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -539,7 +539,7 @@ exports[`TabItem component tests active: label, icon, badge 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -562,7 +562,7 @@ exports[`TabItem component tests active: label, icon, badge 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -585,7 +585,7 @@ exports[`TabItem component tests active: label, icon, badge 1`] = ` "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, undefined, @@ -612,9 +612,9 @@ exports[`TabItem component tests active: label, icon, badge 1`] = ` }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -624,7 +624,7 @@ exports[`TabItem component tests active: label, icon, badge 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -659,7 +659,7 @@ exports[`TabItem component tests active: label, icon, badge 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -715,16 +715,16 @@ exports[`TabItem component tests disabled + 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", }, { "mixBlendMode": "luminosity", @@ -745,7 +745,7 @@ exports[`TabItem component tests disabled + active : label 1`] = ` "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, { @@ -799,11 +799,11 @@ exports[`TabItem component tests disabled: 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, @@ -879,11 +879,11 @@ exports[`TabItem component tests disabled: 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, @@ -934,9 +934,9 @@ exports[`TabItem component tests disabled: label, badge 1`] = ` }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -946,7 +946,7 @@ exports[`TabItem component tests disabled: label, badge 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -981,7 +981,7 @@ exports[`TabItem component tests disabled: label, badge 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -1037,11 +1037,11 @@ exports[`TabItem component tests disabled: 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, @@ -1219,11 +1219,11 @@ exports[`TabItem component tests disabled: label, icon, 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, @@ -1376,9 +1376,9 @@ exports[`TabItem component tests disabled: label, icon, badge 1`] = ` }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -1388,7 +1388,7 @@ exports[`TabItem component tests disabled: label, icon, badge 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -1423,7 +1423,7 @@ exports[`TabItem component tests disabled: label, icon, badge 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -1479,11 +1479,11 @@ exports[`TabItem component tests 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, @@ -1554,11 +1554,11 @@ exports[`TabItem component tests 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, @@ -1604,9 +1604,9 @@ exports[`TabItem component tests label, badge 1`] = ` }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -1616,7 +1616,7 @@ exports[`TabItem component tests label, badge 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -1651,7 +1651,7 @@ exports[`TabItem component tests label, badge 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -1707,11 +1707,11 @@ exports[`TabItem component tests 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, @@ -1884,11 +1884,11 @@ exports[`TabItem component tests label, icon, 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, @@ -2036,9 +2036,9 @@ exports[`TabItem component tests label, icon, badge 1`] = ` }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -2048,7 +2048,7 @@ exports[`TabItem component tests label, icon, badge 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -2083,7 +2083,7 @@ exports[`TabItem component tests label, icon, badge 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -2117,7 +2117,7 @@ exports[`Tabs component tests disabled 1`] = ` "borderBottomWidth": 1, "borderColor": "#e2e2e4", "flexDirection": "row", - "gap": 21, + "gap": 0, } } > @@ -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", @@ -2292,7 +2292,7 @@ exports[`Tabs component tests disabled 1`] = ` "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, { @@ -2344,11 +2344,11 @@ 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, @@ -2422,11 +2422,11 @@ 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, @@ -2473,13 +2473,13 @@ exports[`Tabs component tests disabled 1`] = ` style={ [ { - "backgroundColor": "#fbacaa", + "backgroundColor": "#f47f77", }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -2489,7 +2489,7 @@ exports[`Tabs component tests disabled 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -2524,7 +2524,7 @@ exports[`Tabs component tests disabled 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -2557,7 +2557,7 @@ exports[`Tabs component tests disabled 1`] = ` jestInlineStyle={ [ { - "backgroundColor": "#181a1f", + "backgroundColor": "#2b2e33", "bottom": 0, "height": 2, "position": "absolute", @@ -2567,7 +2567,7 @@ exports[`Tabs component tests disabled 1`] = ` style={ [ { - "backgroundColor": "#181a1f", + "backgroundColor": "#2b2e33", "bottom": 0, "height": 2, "position": "absolute", @@ -2589,7 +2589,7 @@ exports[`Tabs component tests normal 1`] = ` "borderBottomWidth": 1, "borderColor": "#e2e2e4", "flexDirection": "row", - "gap": 21, + "gap": 0, } } > @@ -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, ] @@ -2657,7 +2657,7 @@ exports[`Tabs component tests normal 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#000000" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2693,7 +2693,7 @@ exports[`Tabs component tests normal 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -2715,7 +2715,7 @@ exports[`Tabs component tests normal 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -2738,7 +2738,7 @@ exports[`Tabs component tests normal 1`] = ` } stroke={ { - "payload": 4278190080, + "payload": 4281019955, "type": 0, } } @@ -2761,7 +2761,7 @@ exports[`Tabs component tests normal 1`] = ` "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, false, @@ -2811,11 +2811,11 @@ 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, @@ -2884,11 +2884,11 @@ 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, @@ -2930,13 +2930,13 @@ exports[`Tabs component tests normal 1`] = ` style={ [ { - "backgroundColor": "#fbacaa", + "backgroundColor": "#f47f77", }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -2946,7 +2946,7 @@ exports[`Tabs component tests normal 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -2981,7 +2981,7 @@ exports[`Tabs component tests normal 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -3014,7 +3014,7 @@ exports[`Tabs component tests normal 1`] = ` jestInlineStyle={ [ { - "backgroundColor": "#181a1f", + "backgroundColor": "#2b2e33", "bottom": 0, "height": 2, "position": "absolute", @@ -3024,7 +3024,7 @@ exports[`Tabs component tests normal 1`] = ` style={ [ { - "backgroundColor": "#181a1f", + "backgroundColor": "#2b2e33", "bottom": 0, "height": 2, "position": "absolute", From 20e1844c29958e3e5d4fe7a1a7591c31d264f195 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:40:41 +0300 Subject: [PATCH 17/47] =?UTF-8?q?feat(Input):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Input/InputGroupAddon.tsx | 22 +- .../Input/InputOtp/InputOtpItem.tsx | 21 +- .../__snapshots__/InputOtp.test.tsx.snap | 2016 +++++++---------- .../Input/InputTextBase/InputTextBase.tsx | 5 +- .../Input/InputTextBase/useInputStyles.ts | 46 +- .../InputGroupAddon.test.tsx.snap | 20 +- .../__snapshots__/InputTextBase.test.tsx.snap | 4 +- 7 files changed, 893 insertions(+), 1241 deletions(-) diff --git a/src/components/Input/InputGroupAddon.tsx b/src/components/Input/InputGroupAddon.tsx index dd11ac51..d37150b2 100644 --- a/src/components/Input/InputGroupAddon.tsx +++ b/src/components/Input/InputGroupAddon.tsx @@ -41,8 +41,8 @@ export const InputGroupAddon = memo( ({ - color: theme.Form.InputGroup.inputGroupTextColor, + uniProps={({ components }) => ({ + 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, typography, 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, @@ -74,16 +73,17 @@ const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ }, disabled: { opacity: 0.6, - backgroundColor: theme.Button.Disabled.disabledButtonBg, + backgroundColor: components.button.extend.disabledBackground, }, text: { fontSize: typography.Size['text-base'], - color: theme.Form.InputGroup.inputGroupTextColor, + color: components.inputgroup.colorScheme.addon.color, includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.secondary, }, icon: { + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.inputgroup.extend.iconSize; targetValue=16 width: typography.Size['text-base'], height: typography.Size['text-base'], }, diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index 0e685314..304febc2 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -60,14 +60,13 @@ export const InputOtpItem = memo( } ) -const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({ +const styles = StyleSheet.create(({ components, fonts, typography }) => ({ 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: 35, + minWidth: 35, + paddingHorizontal: components.inputtext.root.paddingX, + borderBottomWidth: components.inputotp.extend.borderWidth, + borderColor: components.inputtext.root.borderColor, alignItems: 'center', justifyContent: 'center', }, @@ -78,15 +77,15 @@ const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({ fontSize: typography.Size['text-2xl'], fontFamily: fonts.primary, fontWeight: '400', - color: theme.Form.InputText.inputTextColor, + 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 }, - 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..544e770e 100644 --- a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap +++ b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap @@ -51,8 +51,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "justifyContent": "center", "minHeight": 35, "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "paddingHorizontal": 14, }, false, false, @@ -63,7 +62,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p ({ - color: theme.Form.InputText.inputIconColor, +const inputIconUniProps = ({ components }: ThemeType) => ({ + color: components.inputtext.root.color, }) export const InputTextBase = memo< @@ -306,7 +306,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..b326d79f 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -25,30 +25,26 @@ const containerMinHeight = StyleSheet.create(({ theme }) => ({ })) export const inputStyles = StyleSheet.create( - ({ theme, border, typography, spacing, fonts }) => ({ + ({ components, border, typography, spacing, fonts }) => ({ container: { flexDirection: 'row', borderWidth: border.Width.border, + // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-xl; value=10.5; target=components.inputtext.root.borderRadius; targetValue=14 borderRadius: border.Radius['rounded-xl'], - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Form.InputText.inputBg, + 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, + borderColor: components.inputtext.root.borderColor, + backgroundColor: components.button.extend.disabledBackground, }, inputContainer: { flex: 1, @@ -57,7 +53,7 @@ export const inputStyles = StyleSheet.create( }, input: { padding: 0, - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, + paddingHorizontal: components.inputtext.root.paddingX, position: 'absolute', left: 0, right: 0, @@ -67,7 +63,7 @@ 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'], @@ -75,30 +71,28 @@ export const inputStyles = StyleSheet.create( }, inputFont: { fontSize: typography.Size['text-base'], - color: theme.Form.InputText.inputTextColor, + color: components.inputtext.root.color, includeFontPadding: false, fontFamily: fonts.secondary, 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: { + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.inputtext.extend.iconSize; targetValue=16 width: typography.Size['text-base'], height: typography.Size['text-base'], }, iconSizeFloatLabel: { + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.inputtext.extend.iconSize; targetValue=16 width: typography.Size['text-xl'], height: typography.Size['text-xl'], }, diff --git a/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap b/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap index e751df44..dabce341 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, @@ -137,11 +136,10 @@ exports[`InputGroup component tests content: string, position: left 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 10.5, + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "padding": 14, }, { "borderBottomRightRadius": 0.2, @@ -178,11 +176,10 @@ exports[`InputGroup component tests disabled: false 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 10.5, + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "padding": 14, }, { "borderBottomRightRadius": 0.2, @@ -219,11 +216,10 @@ exports[`InputGroup component tests disabled: true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 10.5, + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "padding": 14, }, { "borderBottomRightRadius": 0.2, diff --git a/src/components/Input/__tests__/__snapshots__/InputTextBase.test.tsx.snap b/src/components/Input/__tests__/__snapshots__/InputTextBase.test.tsx.snap index 5474ef25..ec42c994 100644 --- a/src/components/Input/__tests__/__snapshots__/InputTextBase.test.tsx.snap +++ b/src/components/Input/__tests__/__snapshots__/InputTextBase.test.tsx.snap @@ -15,7 +15,7 @@ exports[`InputTextBase component functionality tests should pass args to custom "secureTextEntry": false, "style": [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, @@ -25,7 +25,7 @@ exports[`InputTextBase component functionality tests should pass args to custom "bottom": 0, "left": 0, "padding": 0, - "paddingHorizontal": 10.5, + "paddingHorizontal": 14, "position": "absolute", "right": 0, "top": 0, From ad770266512358de64784bd024bb89cce1fc3bf0 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:41:37 +0300 Subject: [PATCH 18/47] =?UTF-8?q?feat(Button):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/ButtonBadge.test.tsx.snap | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap index d810a27d..aacf105b 100644 --- a/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap @@ -110,13 +110,13 @@ exports[`ButtonSeverity component tests badge - basic 1`] = ` style={ [ { - "backgroundColor": "#fbacaa", + "backgroundColor": "#f47f77", }, { "borderRadius": 100, - "height": 21, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -127,7 +127,7 @@ exports[`ButtonSeverity component tests badge - basic 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -162,7 +162,7 @@ exports[`ButtonSeverity component tests badge - basic 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 10.5, "includeFontPadding": false, @@ -281,12 +281,12 @@ exports[`ButtonSeverity component tests badge - dot 1`] = ` style={ [ { - "backgroundColor": "#aad7fb", + "backgroundColor": "#77baf4", }, { "borderRadius": 100, - "height": 7, - "width": 7, + "height": 8, + "width": 8, }, ] } From bfd79468a59b32450a5c753d6e741bec7025573e Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:43:17 +0300 Subject: [PATCH 19/47] =?UTF-8?q?feat(Typography):=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Typography/Body.tsx | 8 +-- src/components/Typography/Caption.tsx | 50 ++++++++++--------- src/components/Typography/Subtitle.tsx | 8 +-- src/components/Typography/Title.tsx | 4 +- .../__snapshots__/Body.test.tsx.snap | 34 ++++++------- .../__snapshots__/Caption.test.tsx.snap | 30 +++++------ .../__snapshots__/Subtitle.test.tsx.snap | 12 ++--- .../__snapshots__/Title.test.tsx.snap | 12 ++--- 8 files changed, 80 insertions(+), 78 deletions(-) diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index f223873e..d3118c48 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -36,7 +36,7 @@ export const Body = ({ ) } -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ text: { fontSize: typography.Size['text-base'], includeFontPadding: false, @@ -46,9 +46,9 @@ const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ }, regular: { fontWeight: 400 }, bold: { fontWeight: 700, letterSpacing: -0.5 }, - default: { color: theme.General.textColor }, - primary: { color: theme.General.primaryColor }, - secondary: { color: theme.General.textSecondaryColor }, + default: { color: semantic.colorScheme.color.fg.default }, + primary: { color: semantic.colorScheme.color.fg.brand.default }, + secondary: { color: semantic.colorScheme.color.fg.muted }, base: { fontSize: typography.Size['text-sm'], lineHeight: 18 }, paragraph: { lineHeight: 24 }, paragraphBase: { lineHeight: 21 }, diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 7795843a..7e1273e8 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -39,11 +39,11 @@ export const Caption = ({ {...styles.icon} source={Icon} testID={CaptionTestId.icon} - uniProps={({ theme }) => ({ + uniProps={({ semantic }) => ({ color: { - default: theme.General.textColor, - primary: theme.General.primaryColor, - secondary: theme.General.textSecondaryColor, + default: semantic.colorScheme.color.fg.default, + primary: semantic.colorScheme.color.fg.brand.default, + secondary: semantic.colorScheme.color.fg.muted, }[color], })} /> @@ -57,23 +57,25 @@ export const Caption = ({ const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' } -const styles = StyleSheet.create(({ theme, spacing, typography, fonts }) => ({ - text: { - fontSize: typography.Size['text-sm'], - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, - }, - 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'] }, - icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, -})) +const styles = StyleSheet.create( + ({ semantic, spacing, typography, fonts }) => ({ + text: { + fontSize: typography.Size['text-sm'], + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.secondary, + lineHeight: 15, + letterSpacing: -0.25, + }, + textWithIcon: { flexShrink: 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: 0.6 }, + withIconContainer: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, + icon: { + width: typography.Size['text-base'], + height: typography.Size['text-base'], + }, + }) +) diff --git a/src/components/Typography/Subtitle.tsx b/src/components/Typography/Subtitle.tsx index 99ff640b..ac82db80 100644 --- a/src/components/Typography/Subtitle.tsx +++ b/src/components/Typography/Subtitle.tsx @@ -30,7 +30,7 @@ export const Subtitle = memo( ) ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ text: { fontSize: typography.Size['text-xs'], fontWeight: 700, @@ -39,7 +39,7 @@ const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ lineHeight: 15, }, base: { lineHeight: 18, fontSize: typography.Size['text-sm'] }, - default: { color: theme.General.textColor }, - primary: { color: theme.General.primaryColor }, - secondary: { color: theme.General.textSecondaryColor }, + 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..d6224789 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -10,9 +10,9 @@ export const Title = ({ level, style, ...other }: TitleProps) => ( ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ text: { - color: theme.General.textColor, + color: semantic.colorScheme.color.fg.default, fontFamily: fonts.primary, fontWeight: 700, includeFontPadding: false, diff --git a/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap index 5e3a51ad..5592d2d3 100644 --- a/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap @@ -16,7 +16,7 @@ exports[`Body component tests base = false, color = default, disabled = false, p "letterSpacing": -0.5, }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, false, @@ -45,7 +45,7 @@ exports[`Body component tests base = false, color = default, disabled = false, p "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, false, @@ -75,7 +75,7 @@ exports[`Body component tests base = false, color = default, disabled = false, p "letterSpacing": -0.5, }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, { @@ -106,7 +106,7 @@ exports[`Body component tests base = false, color = default, disabled = false, p "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, { @@ -138,7 +138,7 @@ exports[`Body component tests base = false, color = default, disabled = true, pa "letterSpacing": -0.5, }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, false, @@ -169,7 +169,7 @@ exports[`Body component tests base = false, color = default, disabled = true, pa "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, false, @@ -201,7 +201,7 @@ exports[`Body component tests base = false, color = default, disabled = true, pa "letterSpacing": -0.5, }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, { @@ -234,7 +234,7 @@ exports[`Body component tests base = false, color = default, disabled = true, pa "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, { @@ -772,7 +772,7 @@ exports[`Body component tests base = true, color = default, disabled = false, pa "letterSpacing": -0.5, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -804,7 +804,7 @@ exports[`Body component tests base = true, color = default, disabled = false, pa "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -837,7 +837,7 @@ exports[`Body component tests base = true, color = default, disabled = false, pa "letterSpacing": -0.5, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -871,7 +871,7 @@ exports[`Body component tests base = true, color = default, disabled = false, pa "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -906,7 +906,7 @@ exports[`Body component tests base = true, color = default, disabled = true, par "letterSpacing": -0.5, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -940,7 +940,7 @@ exports[`Body component tests base = true, color = default, disabled = true, par "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -975,7 +975,7 @@ exports[`Body component tests base = true, color = default, disabled = true, par "letterSpacing": -0.5, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -1011,7 +1011,7 @@ exports[`Body component tests base = true, color = default, disabled = true, par "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -1599,7 +1599,7 @@ exports[`Body component tests default props 1`] = ` "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, diff --git a/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap index 629f90f1..86de46bf 100644 --- a/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap @@ -13,7 +13,7 @@ exports[`Caption component tests color = default, disabled = false 1`] = ` "verticalAlign": "middle", }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, undefined, @@ -45,7 +45,7 @@ exports[`Caption component tests color = default, disabled = false 2`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -81,7 +81,7 @@ exports[`Caption component tests color = default, disabled = false 2`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -103,7 +103,7 @@ exports[`Caption component tests color = default, disabled = false 2`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -126,7 +126,7 @@ exports[`Caption component tests color = default, disabled = false 2`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -149,7 +149,7 @@ exports[`Caption component tests color = default, disabled = false 2`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -172,7 +172,7 @@ exports[`Caption component tests color = default, disabled = false 2`] = ` "verticalAlign": "middle", }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, { @@ -201,7 +201,7 @@ exports[`Caption component tests color = default, disabled = true 1`] = ` "verticalAlign": "middle", }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "opacity": 0.6, @@ -235,7 +235,7 @@ exports[`Caption component tests color = default, disabled = true 2`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -271,7 +271,7 @@ exports[`Caption component tests color = default, disabled = true 2`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -293,7 +293,7 @@ exports[`Caption component tests color = default, disabled = true 2`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -316,7 +316,7 @@ exports[`Caption component tests color = default, disabled = true 2`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -339,7 +339,7 @@ exports[`Caption component tests color = default, disabled = true 2`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -362,7 +362,7 @@ exports[`Caption component tests color = default, disabled = true 2`] = ` "verticalAlign": "middle", }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "opacity": 0.6, @@ -1153,7 +1153,7 @@ exports[`Caption component tests default props 1`] = ` "verticalAlign": "middle", }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, diff --git a/src/components/Typography/__tests__/__snapshots__/Subtitle.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Subtitle.test.tsx.snap index e5e16227..cd6b0d53 100644 --- a/src/components/Typography/__tests__/__snapshots__/Subtitle.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Subtitle.test.tsx.snap @@ -12,7 +12,7 @@ exports[`Subtitle component tests base = false, color = default 1`] = ` "textTransform": "uppercase", }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, { @@ -90,7 +90,7 @@ exports[`Subtitle component tests base = false, color = undefined 1`] = ` "textTransform": "uppercase", }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, { @@ -116,7 +116,7 @@ exports[`Subtitle component tests base = true, color = default 1`] = ` "textTransform": "uppercase", }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -203,7 +203,7 @@ exports[`Subtitle component tests base = true, color = undefined 1`] = ` "textTransform": "uppercase", }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -232,7 +232,7 @@ exports[`Subtitle component tests base = undefined, color = default 1`] = ` "textTransform": "uppercase", }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, { @@ -310,7 +310,7 @@ exports[`Subtitle component tests base = undefined, color = undefined 1`] = ` "textTransform": "uppercase", }, { - "color": "#181a1f", + "color": "#2b2e33", }, false, { diff --git a/src/components/Typography/__tests__/__snapshots__/Title.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Title.test.tsx.snap index f0a009ac..938eb27a 100644 --- a/src/components/Typography/__tests__/__snapshots__/Title.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Title.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Title component tests level = h1 1`] = ` style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, @@ -28,7 +28,7 @@ exports[`Title component tests level = h2 1`] = ` style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, @@ -51,7 +51,7 @@ exports[`Title component tests level = h3 1`] = ` style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, @@ -74,7 +74,7 @@ exports[`Title component tests level = h4 1`] = ` style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, @@ -97,7 +97,7 @@ exports[`Title component tests level = h5 1`] = ` style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, @@ -120,7 +120,7 @@ exports[`Title component tests level = h6 1`] = ` style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, From cd0e6e965b648b6f6c39a9eea2fe4ce1561b4511 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:44:42 +0300 Subject: [PATCH 20/47] =?UTF-8?q?feat(Rating):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Rating/Rating.tsx | 4 +- src/components/Rating/RatingClear.tsx | 14 +- src/components/Rating/RatingItem.tsx | 24 +- src/components/Rating/RatingItemContainer.tsx | 11 +- .../__snapshots__/Rating.test.tsx.snap | 294 ++++++++-------- .../__snapshots__/RatingClear.test.tsx.snap | 176 +++++----- .../__snapshots__/RatingItem.test.tsx.snap | 328 +++++++++--------- 7 files changed, 424 insertions(+), 427 deletions(-) diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx index fed0e34e..5aaf52a8 100644 --- a/src/components/Rating/Rating.tsx +++ b/src/components/Rating/Rating.tsx @@ -100,10 +100,10 @@ export const Rating = memo( } ) -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..28bfe5ac 100644 --- a/src/components/Rating/RatingClear.tsx +++ b/src/components/Rating/RatingClear.tsx @@ -32,12 +32,12 @@ export const RatingClear = memo(({ ...rest }) => { ({ + uniProps={({ components }) => ({ color: disabled - ? theme.custom.rating.ratingCancelIconDisabledColor + ? components.rating.icon.color : pressed - ? theme.Form.Rating.ratingCancelIconHoverColor - : theme.Form.Rating.ratingCancelIconColor, + ? components.rating.icon.hoverColor + : components.rating.icon.color, })} /> )} @@ -45,9 +45,9 @@ export const RatingClear = memo(({ ...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/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 > Date: Fri, 31 Jul 2026 17:46:07 +0300 Subject: [PATCH 21/47] =?UTF-8?q?feat(Menu):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MenuItem/MenuItemAccessory.tsx | 10 +- .../MenuItem/Template/MenuItemTemplate.tsx | 89 ++++---- .../MenuItemTemplate.test.tsx.snap | 204 +++++++++--------- 3 files changed, 154 insertions(+), 149 deletions(-) diff --git a/src/components/MenuItem/MenuItemAccessory.tsx b/src/components/MenuItem/MenuItemAccessory.tsx index 958f8e44..231ba8e4 100644 --- a/src/components/MenuItem/MenuItemAccessory.tsx +++ b/src/components/MenuItem/MenuItemAccessory.tsx @@ -29,8 +29,8 @@ export const MenuItemAccessory = memo( ({ - color: theme.Menu.Item.menuitemIconColor, + uniProps={({ components }) => ({ + color: components.menu.item.icon.color, })} /> @@ -38,10 +38,10 @@ export const MenuItemAccessory = memo( } ) -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..0a58e5a6 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -133,45 +133,50 @@ export const MenuItemTemplate = memo( } ) -const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({ - container: { - borderColor: theme.Menu.Item.menuitemBorderColor, - borderWidth: border.Width.border, - borderRadius: theme.Menu.Item.menuitemBorderRadius, - backgroundColor: theme.Menu.Item.menuitemBg, - }, - containerPressed: { backgroundColor: theme.Menu.Item.menuitemHoverBg }, - containerDisabled: { - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - backgroundColor: theme.Button.Disabled.disabledButtonBg, - opacity: 0.6, - }, - separator: { - borderTopWidth: 1, - borderTopColor: theme.Menu.Overlay.overlayMenuBorderColor, - paddingTop: theme.Menu.Common.menuSeparatorMarginTopBottom, - }, - contentContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: theme.General.inlineSpacing, - paddingHorizontal: theme.Menu.Item.menuitemPaddingLeftRight, - paddingVertical: theme.Menu.Item.menuitemPaddingTopBottom, - }, - accessory: { - color: theme.Menu.Item.menuitemIconColor, - width: theme.Menu.Item.menuitemSubmenuIconFontSize, - height: theme.Menu.Item.menuitemSubmenuIconFontSize, - }, - templateContainer: { - flexDirection: 'row', - gap: spacing.Gap['gap-2'], - flex: 1, - }, - icon: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], - color: theme.Menu.Item.menuitemIconColor, - }, - textContainer: { gap: spacing.Gap['gap-1'], flex: 1 }, -})) +const styles = StyleSheet.create( + ({ components, spacing, typography, border }) => ({ + container: { + borderColor: 'transparent', + borderWidth: border.Width.border, + borderRadius: components.menu.item.borderRadius, + backgroundColor: 'transparent', + }, + containerPressed: { backgroundColor: components.menu.item.focusBackground }, + containerDisabled: { + borderColor: 'transparent', + backgroundColor: components.button.extend.disabledBackground, + opacity: 0.6, + }, + separator: { + borderTopWidth: 1, + borderTopColor: components.menu.separator.borderColor, + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-1; value=3.5; target=components.menu.extend.extItem.caption.gap; targetValue=4 + paddingTop: spacing.Gap['gap-1'], + }, + contentContainer: { + flexDirection: 'row', + alignItems: 'center', + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.menu.item.gap; targetValue=8 + gap: spacing.Gap['gap-2'], + paddingHorizontal: components.menu.item.paddingLeft, + paddingVertical: components.menu.item.paddingTop, + }, + accessory: { + color: components.menu.item.icon.color, + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, + }, + templateContainer: { + flexDirection: 'row', + gap: spacing.Gap['gap-2'], + flex: 1, + }, + icon: { + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.menu.extend.iconSize; targetValue=20 + width: typography.Size['text-xl'], + height: typography.Size['text-xl'], + color: components.menu.item.icon.color, + }, + textContainer: { gap: spacing.Gap['gap-1'], 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..2c6d50e7 100644 --- a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap +++ b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap @@ -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, }, ] @@ -67,8 +67,8 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -100,7 +100,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -136,7 +136,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -158,7 +158,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -181,7 +181,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -215,12 +215,12 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` style={ [ { - "backgroundColor": "#fbacaa", + "backgroundColor": "#f47f77", }, { "borderRadius": 100, - "height": 7, - "width": 7, + "height": 8, + "width": 8, }, ] } @@ -251,7 +251,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -396,15 +396,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` > @@ -618,7 +618,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -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, @@ -697,8 +697,8 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -711,15 +711,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` > @@ -1158,7 +1158,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -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, @@ -1237,8 +1237,8 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1273,7 +1273,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -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, @@ -1448,8 +1448,8 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1481,7 +1481,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1517,7 +1517,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1539,7 +1539,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1562,7 +1562,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1597,7 +1597,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -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, @@ -1676,8 +1676,8 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1709,7 +1709,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1745,7 +1745,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1767,7 +1767,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1790,7 +1790,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -1824,12 +1824,12 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` style={ [ { - "backgroundColor": "#fddeaa", + "backgroundColor": "#facb75", }, { "borderRadius": 100, - "height": 7, - "width": 7, + "height": 8, + "width": 8, }, ] } @@ -1860,7 +1860,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -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, @@ -1942,8 +1942,8 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1978,7 +1978,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, @@ -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, @@ -2063,8 +2063,8 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -2099,7 +2099,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { "fontSize": 12.25, From 6c52db780ff74245d4d4cdd7923ce3bebed70978 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:48:31 +0300 Subject: [PATCH 22/47] =?UTF-8?q?feat(Message):=20=D0=BF=D0=BE=D0=B4=D0=BA?= =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5=D0=BD?= =?UTF-8?q?=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Message/Message.tsx | 51 ++++++------ .../__snapshots__/Message.test.tsx.snap | 82 +++++++++---------- 2 files changed, 64 insertions(+), 69 deletions(-) diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 728468fa..04a4703e 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -88,12 +88,12 @@ type MessageSeverityKey = NonNullable const messageIconColor: Record< MessageSeverityKey, - (t: ThemeType['theme']) => string + (t: ThemeType['components']) => 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,8 +180,8 @@ export const Message = memo( {...messageStyles.iconSize} source={Icon} testID={TestId.Icon} - uniProps={({ theme }) => ({ - color: messageIconColor[severity](theme), + uniProps={({ components }) => ({ + color: messageIconColor[severity](components), })} /> ) @@ -218,32 +218,33 @@ export const Message = memo( } ) +// TODO(tokens-migration): reason=value-mismatch; legacy=border.Width.border-3; value=3; target=components.message.extend.extAccentLine.width; targetValue=4 +// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-5; value=17.5; target=components.message.content.padding; targetValue=14 +// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-1; value=3.5; target=components.message.extend.extText.gap; targetValue=4 +// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-4xl; value=31.5; target=components.message.icon.size; targetValue=36 const messageStyles = StyleSheet.create( - ({ theme, typography, spacing, border }) => ({ + ({ components, typography, spacing, border }) => ({ container: { - borderRadius: theme.General.borderRadiusXL, + borderRadius: components.message.root.borderRadius, borderWidth: border.Width.border, overflow: 'hidden', variants: { severity: { info: { - borderColor: theme.Message.Severities.Info.infoMessageBorderColor, - backgroundColor: theme.Message.Severities.Info.infoMessageBg, + borderColor: components.message.colorScheme.info.borderColor, + backgroundColor: components.message.colorScheme.info.background, }, success: { - borderColor: - theme.Message.Severities.Success.successMessageBorderColor, - backgroundColor: theme.Message.Severities.Success.successMessageBg, + borderColor: components.message.colorScheme.success.borderColor, + backgroundColor: components.message.colorScheme.success.background, }, warning: { - borderColor: - theme.Message.Severities.Warning.warningMessageBorderColor, - backgroundColor: theme.Message.Severities.Warning.warningMessageBg, + borderColor: components.message.colorScheme.warn.borderColor, + backgroundColor: components.message.colorScheme.warn.background, }, danger: { - borderColor: - theme.Message.Severities.Danger.dangerMessageBorderColor, - backgroundColor: theme.Message.Severities.Danger.dangerMessageBg, + borderColor: components.message.colorScheme.error.borderColor, + backgroundColor: components.message.colorScheme.error.background, }, }, }, @@ -257,18 +258,16 @@ const messageStyles = StyleSheet.create( variants: { severity: { info: { - borderColor: theme.Message.Severities.Info.infoMessageIconColor, + borderColor: components.message.colorScheme.info.borderColor, }, success: { - borderColor: - theme.Message.Severities.Success.successMessageIconColor, + borderColor: components.message.colorScheme.success.borderColor, }, warning: { - borderColor: - theme.Message.Severities.Warning.warningMessageIconColor, + borderColor: components.message.colorScheme.warn.borderColor, }, danger: { - borderColor: theme.Message.Severities.Danger.dangerMessageIconColor, + borderColor: components.message.colorScheme.error.borderColor, }, }, }, diff --git a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap index 06eed4f8..7799f837 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", }, @@ -69,8 +69,8 @@ exports[`Message {"Icon": [Object]} 1`] = ` [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -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", }, @@ -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", }, @@ -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", }, @@ -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,7 +825,7 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio Date: Fri, 31 Jul 2026 17:51:06 +0300 Subject: [PATCH 23/47] =?UTF-8?q?feat(SelectButton):=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SelectButton/SelectButton.tsx | 26 ++++++------ .../SelectButton/SelectButtonItem.tsx | 40 +++++++++---------- .../__tests__/SelectButtonItem.test.tsx | 12 ++---- 3 files changed, 36 insertions(+), 42 deletions(-) diff --git a/src/components/SelectButton/SelectButton.tsx b/src/components/SelectButton/SelectButton.tsx index 24fe6ab8..a9634108 100644 --- a/src/components/SelectButton/SelectButton.tsx +++ b/src/components/SelectButton/SelectButton.tsx @@ -271,25 +271,23 @@ export const SelectButton = memo((props) => ( )) -const styles = StyleSheet.create(({ theme }) => ({ +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..b796d516 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -127,12 +127,12 @@ export const SelectButtonItem = memo( {...iconSize} source={Icon} testID='SelectButtonItem_Icon' - uniProps={({ theme }) => ({ + uniProps={({ components, semantic, theme }) => ({ color: disabled ? theme.Button.Disabled.disabledButtonBorderColor : isSelected - ? theme.Form.SelectButton.selectButtonIconActiveColor - : theme.Form.SelectButton.selectButtonTextColor, + ? components.selectbutton.extend.checkedColor + : semantic.colorScheme.color.fg.muted, })} /> ) : null} @@ -153,29 +153,31 @@ export const SelectButtonItem = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=theme.Button.Disabled.disabledButtonBorderColor; light=#a2a5a9; dark=#56595f +// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 +// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-3; value=10.5; target=components.selectbutton.extend.gap; targetValue=4 +// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.selectbutton.extend.iconSize.sm; targetValue=16 +// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.selectbutton.extend.iconSize.md; targetValue=20 +// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-2xl; value=21; target=components.selectbutton.extend.iconSize.lg; targetValue=24 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 const styles = StyleSheet.create( - ({ theme, typography, border, spacing, fonts }) => ({ + ({ components, semantic, theme, typography, border, spacing, fonts }) => ({ container: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - gap: theme.General.inlineSpacing, + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.selectbutton.extend.gap; targetValue=4 + gap: spacing.Gap['gap-2'], 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'], - }, + small: { height: 28 }, + base: { height: 35 }, + large: { height: 49, gap: spacing.Gap['gap-3'] }, + xlarge: { height: 56, gap: spacing.Gap['gap-3'] }, disabledContainer: { - borderRadius: theme.Form.SelectButton.selectButtonBorderRadius, + borderRadius: components.selectbutton.extend.ext.borderRadius, borderWidth: 1, borderColor: theme.Button.Disabled.disabledButtonBorderColor, }, @@ -197,10 +199,8 @@ const styles = StyleSheet.create( 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, - }, + textColor: { color: semantic.colorScheme.color.fg.muted }, + checkedTextColor: { color: components.selectbutton.extend.checkedColor }, disabledTextColor: { color: theme.Button.Disabled.disabledButtonBorderColor, }, diff --git a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx index c0a9806a..9c37b42c 100644 --- a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx +++ b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx @@ -192,12 +192,10 @@ describe('SelectButtonItem', () => { await waitFor(() => { expect(icon).toHaveProp( 'stroke', - lightTheme.theme.Form.SelectButton.selectButtonIconActiveColor + lightTheme.components.selectbutton.extend.checkedColor ) expect(text).toHaveAnimatedStyle({ - color: toRgba( - lightTheme.theme.Form.SelectButton.selectButtonIconActiveColor - ), + color: toRgba(lightTheme.components.selectbutton.extend.checkedColor), }) }) @@ -207,12 +205,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), }) }) }) From c757fba4a75470e893fed7ca7ba051c459c956d4 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 17:56:38 +0300 Subject: [PATCH 24/47] =?UTF-8?q?feat(ToggleButton):=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B3=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=80=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ToggleButton/ToggleButton.tsx | 79 ++++++++++++------- .../__snapshots__/ToggleButton.test.tsx.snap | 38 ++++----- 2 files changed, 70 insertions(+), 47 deletions(-) diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index b8e0e140..e18cb3d7 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -119,8 +119,23 @@ export const ToggleButton = memo( } ) +// TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.togglebutton.root.borderRadius; targetValue=1600 +// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 +// TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonBorderColor; light=#a2a5a9; dark=#56595f; target=components.togglebutton.colorScheme.root.disabledBorderColor; targetValue=#e2e2e4 +// TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Common.buttonPaddingTopBottom; value=0; target=components.togglebutton.root.paddingTop; targetValue=8 +// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-6; value=21 +// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-3; value=10.5; target=components.togglebutton.extend.ext.gap; targetValue=14 +// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.togglebutton.root.gap; targetValue=8 +// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-3; value=10.5; target=components.togglebutton.root.sm.paddingRight; targetValue=14 +// TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonBg; light=#e2e2e4; dark=#404348; target=components.togglebutton.colorScheme.root.disabledBackground; targetValue=#e2e2e4 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-4xl; value=31.5 +// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-2xl; value=21; target=components.togglebutton.extend.iconSize.lg; targetValue=24 +// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.togglebutton.extend.iconSize.md; targetValue=20 +// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.togglebutton.extend.iconSize.sm; targetValue=16 +// TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonTextColor; light=#85888e; dark=#f0f0f1; target=components.togglebutton.colorScheme.root.disabledColor; targetValue=#85888e +// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-sm; value=12.25; target=components.togglebutton.root.sm.fontSize; targetValue=14 const toggleStyles = StyleSheet.create( - ({ theme, spacing, border, fonts, typography }) => ({ + ({ components, theme, spacing, border, fonts, typography }) => ({ container: { alignSelf: 'flex-start', borderRadius: border.Radius['rounded-full'], @@ -129,14 +144,17 @@ const toggleStyles = StyleSheet.create( variants: { checked: { true: { - borderColor: theme.Form.ToggleButton.toggleButtonActiveBorderColor, + borderColor: + components.togglebutton.colorScheme.root.checkedBorderColor, }, false: { - borderColor: theme.Form.ToggleButton.toggleButtonBorderColor, + borderColor: components.togglebutton.colorScheme.root.borderColor, }, }, pressed: { - true: { borderColor: theme.Form.ToggleButton.toggleButtonHoverBg }, + true: { + borderColor: components.togglebutton.extend.hoverBorderColor, + }, false: {}, }, disabled: { @@ -152,8 +170,7 @@ const toggleStyles = StyleSheet.create( checked: 'true', pressed: 'true', styles: { - borderColor: - theme.Form.ToggleButton.toggleButtonActiveHoverBorderColor, + borderColor: components.togglebutton.extend.checkedHoverBorderColor, }, }, ], @@ -168,28 +185,33 @@ const toggleStyles = StyleSheet.create( gap: spacing.Gap['gap-3'], variants: { size: { - xlarge: { minHeight: theme.Button.Common.buttonHeightXL }, - large: { minHeight: theme.Button.Common.buttonHeightLG }, + xlarge: { minHeight: 56 }, + large: { minHeight: 49 }, base: { - minHeight: theme.Button.Common.buttonHeight, + minHeight: 35, paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, - gap: theme.General.inlineSpacing, + gap: spacing.Gap['gap-2'], }, small: { - minHeight: theme.Button.Common.buttonHeightSM, + minHeight: 28, paddingHorizontal: spacing.Padding['p-3'], - gap: theme.General.inlineSpacing, + gap: spacing.Gap['gap-2'], }, }, checked: { true: { - backgroundColor: theme.Form.ToggleButton.toggleButtonActiveBg, + backgroundColor: + components.togglebutton.colorScheme.root.checkedBackground, + }, + false: { + backgroundColor: + components.togglebutton.colorScheme.root.background, }, - false: { backgroundColor: theme.Form.ToggleButton.toggleButtonBg }, }, pressed: { true: { - backgroundColor: theme.Form.ToggleButton.toggleButtonHoverBg, + backgroundColor: + components.togglebutton.colorScheme.root.hoverBackground, }, false: {}, }, @@ -203,7 +225,8 @@ const toggleStyles = StyleSheet.create( checked: 'true', pressed: 'true', styles: { - backgroundColor: theme.Form.ToggleButton.toggleButtonActiveHoverBg, + backgroundColor: + components.togglebutton.extend.checkedHoverBackground, }, }, ], @@ -235,11 +258,13 @@ const toggleStyles = StyleSheet.create( }, }, checked: { - true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor }, - false: { color: theme.Form.ToggleButton.toggleButtonTextColor }, + true: { + color: components.togglebutton.colorScheme.root.checkedColor, + }, + false: { color: components.togglebutton.colorScheme.root.color }, }, pressed: { - true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor }, + true: { color: components.togglebutton.colorScheme.root.hoverColor }, false: {}, }, disabled: { @@ -251,9 +276,7 @@ const toggleStyles = StyleSheet.create( { checked: 'true', pressed: 'true', - styles: { - color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor, - }, + styles: { color: components.togglebutton.extend.checkedHoverColor }, }, ], }, @@ -271,11 +294,13 @@ const toggleStyles = StyleSheet.create( small: { fontSize: typography.Size['text-sm'] }, }, checked: { - true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor }, - false: { color: theme.Form.ToggleButton.toggleButtonTextColor }, + true: { + color: components.togglebutton.colorScheme.root.checkedColor, + }, + false: { color: components.togglebutton.colorScheme.root.color }, }, pressed: { - true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor }, + true: { color: components.togglebutton.colorScheme.root.hoverColor }, false: {}, }, disabled: { @@ -287,9 +312,7 @@ const toggleStyles = StyleSheet.create( { checked: 'true', pressed: 'true', - styles: { - color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor, - }, + styles: { color: components.togglebutton.extend.checkedHoverColor }, }, ], }, diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 213d712b..dfe30cd6 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -10,7 +10,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa [ { "alignSelf": "flex-start", - "borderColor": "rgba(255, 255, 255, 0.0001)", + "borderColor": "#e2e2e4", "borderRadius": 100, "borderWidth": 1, "overflow": "hidden", @@ -49,7 +49,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa meetOrSlice={0} minX={0} minY={0} - stroke="#181a1f" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -85,7 +85,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -107,7 +107,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -130,7 +130,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa } stroke={ { - "payload": 4279769631, + "payload": 4281019955, "type": 0, } } @@ -144,7 +144,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa Date: Fri, 31 Jul 2026 18:06:34 +0300 Subject: [PATCH 25/47] =?UTF-8?q?chore(tokens):=20=D0=BE=D1=82=D0=BC=D0=B5?= =?UTF-8?q?=D1=87=D0=B5=D0=BD=D1=8B=20raw=20transparent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/utils/ButtonContainer.tsx | 1 + src/components/Chip/Chip.tsx | 1 + src/components/MenuItem/Template/MenuItemTemplate.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/src/components/Button/utils/ButtonContainer.tsx b/src/components/Button/utils/ButtonContainer.tsx index 1559a0e8..284d183f 100644 --- a/src/components/Button/utils/ButtonContainer.tsx +++ b/src/components/Button/utils/ButtonContainer.tsx @@ -83,6 +83,7 @@ export const ButtonContainer = genericMemo(ButtonContainerComponent) // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-1; value=3.5 // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-0; value=0 // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-1; value=3.5 +// TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent const buttonContainerStyles = StyleSheet.create( ({ components: { button }, spacing }) => ({ container: { diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 018d0060..f1c88069 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -97,6 +97,7 @@ export const Chip = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent const styles = StyleSheet.create( ({ components, typography, spacing, border, fonts }) => ({ chip: { diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index 0a58e5a6..727e4a58 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -133,6 +133,7 @@ export const MenuItemTemplate = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent const styles = StyleSheet.create( ({ components, spacing, typography, border }) => ({ container: { From 5c9a6b42faf918a7e995c08188e2d6cca44fde78 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 18:08:23 +0300 Subject: [PATCH 26/47] =?UTF-8?q?chore(tokens):=20=D0=BE=D1=82=D0=BC=D0=B5?= =?UTF-8?q?=D1=87=D0=B5=D0=BD=D1=8B=20=D1=81=D0=B5=D0=BC=D0=B0=D0=BD=D1=82?= =?UTF-8?q?=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=B8=D0=B5=20=D0=BE=D1=88=D0=B8?= =?UTF-8?q?=D0=B1=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Chip/Chip.tsx | 2 ++ src/components/Input/InputGroupAddon.tsx | 1 + src/components/Input/InputOtp/InputOtpItem.tsx | 5 +++++ src/components/Input/InputTextBase/useInputStyles.ts | 1 + src/components/MenuItem/Template/MenuItemTemplate.tsx | 1 + src/components/Tabs/TabItem/TabItem.tsx | 2 ++ 6 files changed, 12 insertions(+) diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index f1c88069..1a777c7c 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -98,6 +98,8 @@ export const Chip = memo( ) // TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent +// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9 +// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 const styles = StyleSheet.create( ({ components, typography, spacing, border, fonts }) => ({ chip: { diff --git a/src/components/Input/InputGroupAddon.tsx b/src/components/Input/InputGroupAddon.tsx index d37150b2..2bcea8c3 100644 --- a/src/components/Input/InputGroupAddon.tsx +++ b/src/components/Input/InputGroupAddon.tsx @@ -51,6 +51,7 @@ export const InputGroupAddon = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 const styles = StyleSheet.create(({ components, typography, fonts }) => ({ container: { padding: components.inputgroup.addon.padding, diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index 304febc2..f2d7504e 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -60,6 +60,11 @@ export const InputOtpItem = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.paddingX; value=14 +// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.borderColor; light=#cecfd2; dark=#56595f +// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.color; light=#2b2e33; dark=#ffffff +// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.hoverBorderColor; light=#1dc831; dark=#77f48a +// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.invalidBorderColor; light=#f47f77; dark=#db3424 const styles = StyleSheet.create(({ components, fonts, typography }) => ({ container: { minHeight: 35, diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index b326d79f..65d9804c 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -24,6 +24,7 @@ const containerMinHeight = StyleSheet.create(({ theme }) => ({ xlarge: { minHeight: theme.InputSize.xlarge['min-height'] }, })) +// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 export const inputStyles = StyleSheet.create( ({ components, border, typography, spacing, fonts }) => ({ container: { diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index 727e4a58..c766863f 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -134,6 +134,7 @@ export const MenuItemTemplate = memo( ) // TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent +// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 const styles = StyleSheet.create( ({ components, spacing, typography, border }) => ({ container: { diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index 3bf032b3..509c4596 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -86,6 +86,8 @@ export const TabItem = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9 +// TODO(tokens-migration): reason=missing; legacy=components.badge.root.height; value=24 const styles = StyleSheet.create(({ components, typography, fonts }) => ({ container: { alignItems: 'center', From 1b00580aa09d0ad922cd7bdd91279333cb90b235 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 31 Jul 2026 18:14:26 +0300 Subject: [PATCH 27/47] =?UTF-8?q?chore(tokens):=20=D0=BE=D1=82=D0=BC=D0=B5?= =?UTF-8?q?=D1=87=D0=B5=D0=BD=D1=8B=20=D0=BF=D1=80=D0=BE=D0=BF=D1=83=D1=89?= =?UTF-8?q?=D0=B5=D0=BD=D0=BD=D1=8B=D0=B5=20=D0=B7=D0=BD=D0=B0=D1=87=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Accordion/Accordion.tsx | 2 ++ src/components/Avatar/Avatar.tsx | 1 + src/components/Badge/Badge.tsx | 1 + src/components/Button/utils/ButtonLabel.tsx | 1 + src/components/Chip/Chip.tsx | 4 ++++ src/components/Dialog/DialogHeader.tsx | 3 +++ src/components/Divider/Divider.tsx | 2 ++ src/components/Input/InputGroupAddon.tsx | 1 + src/components/Input/InputOtp/InputOtpItem.tsx | 2 ++ src/components/Input/InputTextBase/useInputStyles.ts | 10 ++++++++++ src/components/MenuItem/Template/MenuItemTemplate.tsx | 1 + src/components/Message/Message.tsx | 3 +++ src/components/ProgressBar/ProgressBar.tsx | 1 + src/components/RadioButton/RadioButton.tsx | 1 + src/components/SelectButton/SelectButton.tsx | 1 + src/components/SelectButton/SelectButtonItem.tsx | 2 ++ src/components/Slider/Slider.tsx | 1 + src/components/Tabs/TabItem/TabItem.tsx | 3 +++ src/components/Tabs/Tabs.tsx | 2 ++ src/components/Tag/Tag.tsx | 1 + src/components/ToggleButton/ToggleButton.tsx | 2 ++ src/components/Typography/Body.tsx | 6 ++++++ src/components/Typography/Caption.tsx | 7 +++++++ src/components/Typography/Subtitle.tsx | 6 ++++++ src/components/Typography/Title.tsx | 11 +++++++++++ 25 files changed, 75 insertions(+) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 02f2c72a..244bb6f4 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -159,6 +159,8 @@ export const AccordionTestIds = { separator: 'Separator', } +// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans +// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-4; value=14 const styles = StyleSheet.create(({ components, spacing, fonts }) => ({ component: { width: '100%' }, header: { diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index f8aaacb9..ffdd5ed4 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -257,6 +257,7 @@ export const Avatar = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans const styles = StyleSheet.create( ({ components, border, typography, fonts }) => ({ container: { diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 9f75d4ab..85423999 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -103,6 +103,7 @@ export const Badge = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows const badgeStyles = StyleSheet.create( ({ components, border, typography, fonts }) => ({ container: { alignItems: 'flex-start' }, diff --git a/src/components/Button/utils/ButtonLabel.tsx b/src/components/Button/utils/ButtonLabel.tsx index 0c35ea89..b43ed887 100644 --- a/src/components/Button/utils/ButtonLabel.tsx +++ b/src/components/Button/utils/ButtonLabel.tsx @@ -52,6 +52,7 @@ export const ButtonLabel = genericMemo(ButtonLabelComponent) // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 // TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows const buttonLabelStyles = StyleSheet.create( ({ components: { button }, typography, fonts }) => ({ label: { diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 1a777c7c..0db13353 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -100,6 +100,10 @@ export const Chip = memo( // TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9 // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 +// TODO(tokens-migration): reason=missing; legacy=border.Color.Service.border-success.400; value=#77f48a +// TODO(tokens-migration): reason=missing; legacy=border.Radius.rounded-full; value=100 +// TODO(tokens-migration): reason=missing; legacy=border.Width.border-3; value=3 +// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans const styles = StyleSheet.create( ({ components, typography, spacing, border, fonts }) => ({ chip: { diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index c62f28c2..7a10d178 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -88,6 +88,9 @@ export const DialogHeader = ({ ) } +// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 const styles = StyleSheet.create(({ components, typography, border }) => ({ text: { flex: 1 }, header: { diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 0ed12324..92debec4 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -133,6 +133,8 @@ export const Divider = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-4; value=14 +// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-2; value=7 const styles = StyleSheet.create(({ spacing, components, typography }) => ({ container: { minHeight: 28, diff --git a/src/components/Input/InputGroupAddon.tsx b/src/components/Input/InputGroupAddon.tsx index 2bcea8c3..3cbd18f6 100644 --- a/src/components/Input/InputGroupAddon.tsx +++ b/src/components/Input/InputGroupAddon.tsx @@ -52,6 +52,7 @@ export const InputGroupAddon = memo( ) // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 +// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans const styles = StyleSheet.create(({ components, typography, fonts }) => ({ container: { padding: components.inputgroup.addon.padding, diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index f2d7504e..02161720 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -65,6 +65,8 @@ export const InputOtpItem = memo( // TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.color; light=#2b2e33; dark=#ffffff // TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.hoverBorderColor; light=#1dc831; dark=#77f48a // TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.invalidBorderColor; light=#f47f77; dark=#db3424 +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 const styles = StyleSheet.create(({ components, fonts, typography }) => ({ container: { minHeight: 35, diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 65d9804c..a83ff4e4 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -18,6 +18,9 @@ export const useInputContainerMinHeight = ( return { minHeight } } +// TODO(tokens-migration): reason=missing; legacy=theme.InputSize.base.min-height; value=35 +// TODO(tokens-migration): reason=missing; legacy=theme.InputSize.large.min-height; value=49 +// TODO(tokens-migration): reason=missing; legacy=theme.InputSize.xlarge.min-height; value=56 const containerMinHeight = StyleSheet.create(({ theme }) => ({ base: { minHeight: theme.InputSize.base['min-height'] }, large: { minHeight: theme.InputSize.large['min-height'] }, @@ -25,6 +28,13 @@ const containerMinHeight = StyleSheet.create(({ theme }) => ({ })) // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 +// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows +// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans +// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-1; value=3.5 +// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-2; value=7 +// TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 export const inputStyles = StyleSheet.create( ({ components, border, typography, spacing, fonts }) => ({ container: { diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index c766863f..8a7068de 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -135,6 +135,7 @@ export const MenuItemTemplate = memo( // TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 +// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 const styles = StyleSheet.create( ({ components, spacing, typography, border }) => ({ container: { diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 04a4703e..a68b60d6 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -222,6 +222,9 @@ export const Message = memo( // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-5; value=17.5; target=components.message.content.padding; targetValue=14 // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-1; value=3.5; target=components.message.extend.extText.gap; targetValue=4 // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-4xl; value=31.5; target=components.message.icon.size; targetValue=36 +// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 +// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-4; value=14 +// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-4; value=14 const messageStyles = StyleSheet.create( ({ components, typography, spacing, border }) => ({ container: { diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index d55886d3..98c274b0 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -89,6 +89,7 @@ export const ProgressBar = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows const styles = StyleSheet.create( ({ components, typography, border, fonts }) => ({ container: { diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index 798183cc..cd9f417a 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/RadioButton/RadioButton.tsx @@ -68,6 +68,7 @@ export const RadioButton = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=border.Radius.rounded-full; value=100 const radioStyles = StyleSheet.create(({ components, border }) => ({ container: { width: components.radiobutton.root.width, diff --git a/src/components/SelectButton/SelectButton.tsx b/src/components/SelectButton/SelectButton.tsx index a9634108..b2d83adc 100644 --- a/src/components/SelectButton/SelectButton.tsx +++ b/src/components/SelectButton/SelectButton.tsx @@ -271,6 +271,7 @@ export const SelectButton = memo((props) => ( )) +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 const styles = StyleSheet.create(({ components, semantic }) => ({ container: { flexDirection: 'row', diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index b796d516..a727465b 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -160,6 +160,8 @@ export const SelectButtonItem = memo( // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.selectbutton.extend.iconSize.md; targetValue=20 // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-2xl; value=21; target=components.selectbutton.extend.iconSize.lg; targetValue=24 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 const styles = StyleSheet.create( ({ components, semantic, theme, typography, border, spacing, fonts }) => ({ container: { diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 81707366..8b459ec8 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -252,6 +252,7 @@ export const Slider = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=border.Width.border-3; value=3 const styles = StyleSheet.create(({ components, border }) => { return { container: { diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index 509c4596..c379b3ce 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -88,6 +88,9 @@ export const TabItem = memo( // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9 // TODO(tokens-migration): reason=missing; legacy=components.badge.root.height; value=24 +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 const styles = StyleSheet.create(({ components, typography, fonts }) => ({ container: { alignItems: 'center', diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index d6432de3..25ecbc4c 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -91,6 +91,8 @@ export const Tabs = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 +// TODO(tokens-migration): reason=missing; legacy=border.Width.border-2; value=2 const styles = StyleSheet.create(({ components, border }) => ({ container: { flexDirection: 'row', diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 82ab97fc..66aa0785 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -100,6 +100,7 @@ export const Tag = memo( } ) +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows const tagStyles = StyleSheet.create( ({ components, border, spacing, typography, fonts }) => ({ container: { diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index e18cb3d7..dae9bf85 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -134,6 +134,8 @@ export const ToggleButton = memo( // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.togglebutton.extend.iconSize.sm; targetValue=16 // TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonTextColor; light=#85888e; dark=#f0f0f1; target=components.togglebutton.colorScheme.root.disabledColor; targetValue=#85888e // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-sm; value=12.25; target=components.togglebutton.root.sm.fontSize; targetValue=14 +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows +// TODO(tokens-migration): reason=missing; legacy=theme.Button.Common.buttonPaddingLeftRight; value=14 const toggleStyles = StyleSheet.create( ({ components, theme, spacing, border, fonts, typography }) => ({ container: { diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index d3118c48..7fa0bbc7 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -36,6 +36,12 @@ export const Body = ({ ) } +// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.brand.default; light=#44e858; dark=#77f48a +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ text: { fontSize: typography.Size['text-base'], diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 7e1273e8..70e6363e 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -57,6 +57,13 @@ export const Caption = ({ const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' } +// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.brand.default; light=#44e858; dark=#77f48a +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 +// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-1; value=3.5 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 const styles = StyleSheet.create( ({ semantic, spacing, typography, fonts }) => ({ text: { diff --git a/src/components/Typography/Subtitle.tsx b/src/components/Typography/Subtitle.tsx index ac82db80..9fd96ef8 100644 --- a/src/components/Typography/Subtitle.tsx +++ b/src/components/Typography/Subtitle.tsx @@ -30,6 +30,12 @@ export const Subtitle = memo( ) ) +// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.brand.default; light=#44e858; dark=#77f48a +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xs; value=10.5 const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ text: { fontSize: typography.Size['text-xs'], diff --git a/src/components/Typography/Title.tsx b/src/components/Typography/Title.tsx index d6224789..a107848d 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -10,6 +10,17 @@ export const Title = ({ level, style, ...other }: TitleProps) => ( ) +// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows +// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-3xl; value=26.25 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-4xl; value=31.5 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-5xl; value=42 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-lg; value=15.75 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 +// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xs; value=10.5 const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ text: { color: semantic.colorScheme.color.fg.default, From 72dee6ebcafdf26022fbf85dc7bf8fcfb058243f Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 14:48:34 +0800 Subject: [PATCH 28/47] =?UTF-8?q?chore(tokens):=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=20=D1=80=D0=B5=D0=B2=D0=B8=D0=B7=D0=BE?= =?UTF-8?q?=D1=80=20TODO-=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D0=B0?= =?UTF-8?q?=D1=80=D0=B8=D0=B5=D0=B2=20=D0=BC=D0=B8=D0=B3=D1=80=D0=B0=D1=86?= =?UTF-8?q?=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + .../token-generator/__tests__/audit.test.ts | 118 +++++++++ scripts/token-generator/audit.ts | 245 ++++++++++++++++++ 3 files changed, 364 insertions(+) create mode 100644 scripts/token-generator/__tests__/audit.test.ts create mode 100644 scripts/token-generator/audit.ts diff --git a/package.json b/package.json index d7d3233e..d92438ed 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "tokens:check": "ts-node --transpile-only --project scripts/token-generator/tsconfig.json scripts/token-generator/build.ts --check", "tokens:typecheck": "tsc --noEmit -p scripts/token-generator/tsconfig.json", "tokens:validate": "yarn tokens:typecheck && yarn tokens:check", + "tokens:audit": "ts-node --transpile-only --project scripts/token-generator/tsconfig.json scripts/token-generator/audit.ts", "doctor": "expo-doctor", "check": "expo install --check", "lint:check": "eslint --cache .", diff --git a/scripts/token-generator/__tests__/audit.test.ts b/scripts/token-generator/__tests__/audit.test.ts new file mode 100644 index 00000000..1e200630 --- /dev/null +++ b/scripts/token-generator/__tests__/audit.test.ts @@ -0,0 +1,118 @@ +import { + auditTodos, + collectTodos, + parseTodo, + resolveLegacyPath, +} from '../audit' + +describe('parseTodo', () => { + test('разбирает поля комментария', () => { + const todo = parseTodo( + '// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.accordion.extend.extHeader.gap; targetValue=8', + 'src/components/Accordion/Accordion.tsx', + 168 + ) + + expect(todo).toStrictEqual({ + file: 'src/components/Accordion/Accordion.tsx', + line: 168, + reason: 'value-mismatch', + legacy: 'spacing.Gap.gap-2', + value: '7', + light: '', + dark: '', + target: 'components.accordion.extend.extHeader.gap', + targetValue: '8', + }) + }) + + test('разбирает цветовые пары light/dark', () => { + expect( + parseTodo( + '// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9', + 'file.tsx', + 1 + ) + ).toMatchObject({ light: '#85888e', dark: '#a2a5a9', value: '' }) + }) + + test('игнорирует строки без маркера и без legacy', () => { + expect(parseTodo('const gap = 8', 'file.tsx', 1)).toBeNull() + expect( + parseTodo('// TODO(tokens-migration): reason=missing', 'file.tsx', 1) + ).toBeNull() + }) +}) + +describe('resolveLegacyPath', () => { + test('находит сгенерированные component- и semantic-токены', () => { + expect( + resolveLegacyPath('components.button.extend.disabledColor') + ).toBeDefined() + expect( + resolveLegacyPath('semantic.colorScheme.color.fg.muted') + ).toBeDefined() + }) + + test('находит поддеревья theme, подмешанные отдельно от themeLight.json', () => { + expect(resolveLegacyPath('theme.InputSize.base.min-height')).toBe(35) + }) + + test('возвращает undefined для неймспейсов вне пайплайна', () => { + expect(resolveLegacyPath('fonts.primary')).toBeUndefined() + expect(resolveLegacyPath('hardcode.transparent')).toBeUndefined() + }) +}) + +describe('auditTodos', () => { + test('классифицирует TODO по резолву legacy-пути', () => { + const [existing, mismatched, outside] = auditTodos([ + { + file: 'a.tsx', + line: 1, + reason: 'missing', + legacy: 'theme.InputSize.base.min-height', + value: '35', + light: '', + dark: '', + target: '', + targetValue: '', + }, + { + file: 'b.tsx', + line: 2, + reason: 'value-mismatch', + legacy: 'theme.InputSize.base.min-height', + value: '35', + light: '', + dark: '', + target: '', + targetValue: '99', + }, + { + file: 'c.tsx', + line: 3, + reason: 'missing', + legacy: 'hardcode.transparent', + value: 'transparent', + light: '', + dark: '', + target: '', + targetValue: '', + }, + ]) + + expect(existing.status).toBe('токен есть') + expect(mismatched.status).toBe('значение расходится') + expect(outside.status).toBe('вне пайплайна') + }) +}) + +describe('collectTodos', () => { + test('находит комментарии в исходниках компонентов', () => { + const todos = collectTodos(`${__dirname}/../../../src/components`) + + expect(todos.length).toBeGreaterThan(0) + expect(todos.every((todo) => todo.legacy.length > 0)).toBeTrue() + }) +}) diff --git a/scripts/token-generator/audit.ts b/scripts/token-generator/audit.ts new file mode 100644 index 00000000..bf59793e --- /dev/null +++ b/scripts/token-generator/audit.ts @@ -0,0 +1,245 @@ +import { readFileSync, readdirSync } from 'node:fs' +import { join, relative, resolve } from 'node:path' + +import { loadTokenTree } from './io' + +const SOURCE_DIRECTORY = resolve(__dirname, '../../src') +const THEME_DIRECTORY = resolve(__dirname, '../../src/theme') +const TODO_MARKER = 'TODO(tokens-migration)' +const SOURCE_EXTENSIONS = ['.ts', '.tsx'] + +/** + * Неймспейс legacy-пути -> файл, в котором этот путь нужно искать. + * Резолвим по light-варианту: dark отличается значениями, но не структурой. + */ +const NAMESPACE_SOURCES: Record = { + components: join(THEME_DIRECTORY, 'tokens/components/light.json'), + semantic: join(THEME_DIRECTORY, 'tokens/semantic/light.json'), + theme: join(THEME_DIRECTORY, 'assets/themeLight.json'), + spacing: join(THEME_DIRECTORY, 'assets/spacing.json'), + typography: join(THEME_DIRECTORY, 'assets/typography.json'), + border: join(THEME_DIRECTORY, 'assets/border.json'), + sizing: join(THEME_DIRECTORY, 'assets/sizing.json'), + global: join(THEME_DIRECTORY, 'assets/global.json'), + background: join(THEME_DIRECTORY, 'assets/background.json'), +} + +/** Неймспейсы вне пайплайна токенов: резолвить нечем, нужно решение. */ +const UNRESOLVABLE_NAMESPACES = new Set(['fonts', 'hardcode']) + +/** + * Поддеревья theme.*, которые подмешиваются в тему отдельно от themeLight.json + * (см. lightTheme.ts) и лежат в каталоге по файлу на размер. + */ +const THEME_SUBTREE_DIRECTORIES = new Set(['InputSize', 'ModalSize']) + +export type TodoStatus = + | 'токен есть' + | 'значение расходится' + | 'токена нет' + | 'вне пайплайна' + +export interface TodoComment { + file: string + line: number + reason: string + legacy: string + value: string + light: string + dark: string + target: string + targetValue: string +} + +export interface AuditedTodo extends TodoComment { + status: TodoStatus + actual: string +} + +const FIELD_PATTERN = /(?\w+)=(?[^;]+)/g + +export const parseTodo = ( + text: string, + file: string, + line: number +): TodoComment | null => { + const markerIndex = text.indexOf(TODO_MARKER) + + if (markerIndex === -1) return null + + const fields: Record = {} + + for (const match of text + .slice(markerIndex + TODO_MARKER.length) + .matchAll(FIELD_PATTERN)) { + const { key, value } = match.groups ?? {} + + if (key && value !== undefined) fields[key] = value.trim() + } + + if (!fields.legacy) return null + + return { + file, + line, + reason: fields.reason ?? '', + legacy: fields.legacy, + value: fields.value ?? '', + light: fields.light ?? '', + dark: fields.dark ?? '', + target: fields.target ?? '', + targetValue: fields.targetValue ?? '', + } +} + +const findSourceFiles = (directory: string): string[] => + readdirSync(directory, { withFileTypes: true }) + .flatMap((entry) => { + const entryPath = join(directory, entry.name) + + if (entry.isDirectory()) return findSourceFiles(entryPath) + + return entry.isFile() && + SOURCE_EXTENSIONS.some((extension) => entry.name.endsWith(extension)) + ? [entryPath] + : [] + }) + .sort() + +export const collectTodos = (directory: string): TodoComment[] => + findSourceFiles(directory).flatMap((filePath) => + readFileSync(filePath, 'utf8') + .split('\n') + .flatMap((text, index) => { + const todo = parseTodo( + text, + relative(resolve(__dirname, '../..'), filePath), + index + 1 + ) + + return todo ? [todo] : [] + }) + ) + +const treeCache = new Map() + +const readTree = (filePath: string): unknown => { + if (!treeCache.has(filePath)) treeCache.set(filePath, loadTokenTree(filePath)) + + return treeCache.get(filePath) +} + +const readPath = (tree: unknown, segments: string[]): unknown => + segments.reduce( + (node, segment) => + node !== null && typeof node === 'object' && segment in node + ? (node as Record)[segment] + : undefined, + tree + ) + +export const resolveLegacyPath = (legacy: string): unknown => { + const [namespace, ...segments] = legacy.split('.') + + if (namespace === 'theme' && THEME_SUBTREE_DIRECTORIES.has(segments[0])) { + const [subtree, size, ...rest] = segments + const sizeFile = join(THEME_DIRECTORY, 'assets', subtree, `${size}.json`) + + return readPath(readTree(sizeFile), rest) + } + + const sourceFile = NAMESPACE_SOURCES[namespace] + + if (!sourceFile) return undefined + + return readPath(readTree(sourceFile), segments) +} + +const auditTodo = (todo: TodoComment): AuditedTodo => { + const [namespace] = todo.legacy.split('.') + + if (UNRESOLVABLE_NAMESPACES.has(namespace)) { + return { ...todo, status: 'вне пайплайна', actual: '' } + } + + const actual = resolveLegacyPath(todo.legacy) + + if (actual === undefined) return { ...todo, status: 'токена нет', actual: '' } + + const actualText = String(actual) + const expected = todo.targetValue || todo.value + + return { + ...todo, + actual: actualText, + status: + expected && actualText !== expected + ? 'значение расходится' + : 'токен есть', + } +} + +export const auditTodos = (todos: TodoComment[]): AuditedTodo[] => + todos.map(auditTodo) + +const formatReport = (audited: AuditedTodo[]): string => { + const byStatus = new Map() + + for (const todo of audited) { + byStatus.set(todo.status, [...(byStatus.get(todo.status) ?? []), todo]) + } + + const sections = [...byStatus.entries()].map(([status, todos]) => { + const rows = todos.map((todo) => { + const expectation = todo.targetValue + ? ` (ожидалось ${todo.targetValue})` + : '' + + return ` ${todo.file}:${todo.line}\n ${todo.legacy} -> ${todo.actual || '—'}${expectation}` + }) + + return `${status.toUpperCase()} — ${todos.length}\n${rows.join('\n')}` + }) + + const summary = [...byStatus.entries()] + .map(([status, todos]) => ` ${status}: ${todos.length}`) + .join('\n') + + return `${sections.join('\n\n')}\n\nВсего TODO: ${audited.length}\n${summary}` +} + +const HELP = `Использование: + yarn tokens:audit [--summary] + +Проверяет комментарии ${TODO_MARKER} в src/: резолвит legacy-путь каждого TODO +в сгенерированных токенах и legacy-ассетах темы. + +Опции: + --summary только сводка по статусам + --help показать эту справку` + +export const run = (arguments_: string[]): void => { + if (arguments_.includes('--help')) { + console.log(HELP) + + return + } + + const audited = auditTodos(collectTodos(SOURCE_DIRECTORY)) + const report = formatReport(audited) + + console.log( + arguments_.includes('--summary') + ? report.slice(report.indexOf('Всего TODO:')) + : report + ) +} + +if (require.main === module) { + try { + run(process.argv.slice(2)) + } catch (error: unknown) { + console.error(error instanceof Error ? error.message : String(error)) + process.exitCode = 1 + } +} From 8c0341c2aaec3801a2325fe4ccb22aaf388432e7 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 14:50:35 +0800 Subject: [PATCH 29/47] =?UTF-8?q?fix(tokens):=20=D0=BE=D0=B1=D0=BE=D1=81?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=B0=D0=BD=20=D0=BB=D0=B8=D1=82=D0=B5=D1=80?= =?UTF-8?q?=D0=B0=D0=BB=20transparent,=20=D1=84=D0=BE=D0=BD=20link-=D0=BA?= =?UTF-8?q?=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2?= =?UTF-8?q?=D0=B5=D0=B4=D1=91=D0=BD=20=D0=BD=D0=B0=20=D1=82=D0=BE=D0=BA?= =?UTF-8?q?=D0=B5=D0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Button/utils/ButtonContainer.tsx | 5 +++-- src/components/Chip/Chip.tsx | 3 ++- src/components/MenuItem/Template/MenuItemTemplate.tsx | 3 ++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Button/utils/ButtonContainer.tsx b/src/components/Button/utils/ButtonContainer.tsx index 284d183f..6d8d2625 100644 --- a/src/components/Button/utils/ButtonContainer.tsx +++ b/src/components/Button/utils/ButtonContainer.tsx @@ -83,7 +83,8 @@ export const ButtonContainer = genericMemo(ButtonContainerComponent) // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-1; value=3.5 // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-0; value=0 // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-1; value=3.5 -// TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent +// `transparent` здесь — отсутствие фона или границы, а не цвет дизайн-системы: +// прозрачность не выражена ни semantic-токеном, ни свойствами button.extend.extText. const buttonContainerStyles = StyleSheet.create( ({ components: { button }, spacing }) => ({ container: { @@ -150,7 +151,7 @@ const buttonContainerStyles = StyleSheet.create( height: 'auto', minHeight: 'auto', borderColor: 'transparent', - backgroundColor: 'transparent', + backgroundColor: button.extend.extLink.background, }, basic: { borderColor: button.colorScheme.root.primary.borderColor, diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 0db13353..f6417c0d 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -97,7 +97,8 @@ export const Chip = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent +// `transparent` здесь — отсутствие границы, а не цвет дизайн-системы: +// у chip.root нет borderColor, прозрачность не выражена semantic-токеном. // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9 // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 // TODO(tokens-migration): reason=missing; legacy=border.Color.Service.border-success.400; value=#77f48a diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index 8a7068de..5465508a 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -133,7 +133,8 @@ export const MenuItemTemplate = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=hardcode.transparent; value=transparent +// `transparent` здесь — отсутствие фона и границы, а не цвет дизайн-системы: +// у menu.item нет background и borderColor, прозрачность не выражена semantic-токеном. // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 const styles = StyleSheet.create( From 0c520930002ab16848043712b71fb45c164637a1 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 15:00:45 +0800 Subject: [PATCH 30/47] =?UTF-8?q?feat(tokens):=20=D1=81=D0=B5=D0=BC=D0=B5?= =?UTF-8?q?=D0=B9=D1=81=D1=82=D0=B2=D0=B0=20=D1=88=D1=80=D0=B8=D1=84=D1=82?= =?UTF-8?q?=D0=BE=D0=B2=20=D0=B2=D1=8B=D0=B2=D0=BE=D0=B4=D1=8F=D1=82=D1=81?= =?UTF-8?q?=D1=8F=20=D0=B3=D0=B5=D0=BD=D0=B5=D1=80=D0=B0=D1=82=D0=BE=D1=80?= =?UTF-8?q?=D0=BE=D0=BC=20=D0=B2=D0=BC=D0=B5=D1=81=D1=82=D0=BE=20=D1=85?= =?UTF-8?q?=D0=B0=D1=80=D0=B4=D0=BA=D0=BE=D0=B4=D0=B0=20=D0=B2=20=D1=82?= =?UTF-8?q?=D0=B5=D0=BC=D0=B0=D1=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/token-generator/README.md | 14 +++++++--- .../token-generator/__tests__/audit.test.ts | 2 +- .../__tests__/compiler.test.ts | 27 ++++++++++++++++--- scripts/token-generator/core/compiler.ts | 12 ++++++++- scripts/token-generator/core/types.ts | 2 ++ scripts/token-generator/io.ts | 2 ++ src/components/Accordion/Accordion.tsx | 1 - src/components/Avatar/Avatar.tsx | 1 - src/components/Badge/Badge.tsx | 1 - src/components/Button/utils/ButtonLabel.tsx | 1 - src/components/Chip/Chip.tsx | 1 - src/components/Input/InputGroupAddon.tsx | 1 - .../Input/InputOtp/InputOtpItem.tsx | 1 - .../Input/InputTextBase/useInputStyles.ts | 2 -- src/components/ProgressBar/ProgressBar.tsx | 1 - .../SelectButton/SelectButtonItem.tsx | 1 - src/components/Tabs/TabItem/TabItem.tsx | 1 - src/components/Tag/Tag.tsx | 1 - src/components/ToggleButton/ToggleButton.tsx | 1 - src/components/Typography/Body.tsx | 1 - src/components/Typography/Caption.tsx | 1 - src/components/Typography/Subtitle.tsx | 1 - src/components/Typography/Title.tsx | 1 - src/theme/__tests__/ThemeContext.test.tsx | 13 +++++++++ src/theme/commonTheme.ts | 3 +++ src/theme/darkTheme.ts | 1 - src/theme/lightTheme.ts | 1 - src/theme/tokens/fonts.json | 1 + 28 files changed, 68 insertions(+), 28 deletions(-) create mode 100644 src/theme/tokens/fonts.json diff --git a/scripts/token-generator/README.md b/scripts/token-generator/README.md index 5894c4b8..bb94f453 100644 --- a/scripts/token-generator/README.md +++ b/scripts/token-generator/README.md @@ -31,10 +31,11 @@ Semantic-токены доступны потребителям библиоте ## Результат генерации -Из `design-tokens/input/tokens.json` создаются четыре файла: +Из `design-tokens/input/tokens.json` создаются пять файлов: ```text src/theme/tokens +├── fonts.json ├── semantic │ ├── light.json │ └── dark.json @@ -43,6 +44,12 @@ src/theme/tokens └── dark.json ``` +`fonts.json` собирается из `primitive.fonts.fontFamily` и не зависит от цветовой +схемы, поэтому файл один на обе темы. Публичный `FontsConfig` оперирует ролями +`primary` и `secondary`, поэтому `commonTheme` отображает `heading` в `primary`, +а `base` — в `secondary`. Отсутствие `primitive.fonts.fontFamily` во входных +токенах — ошибка генерации. + Для каждого выходного файла выбирается соответствующая ветка `colorScheme.light` или `colorScheme.dark`. Ключ `colorScheme` сохраняется, а уровень `light`/`dark` удаляется: @@ -55,8 +62,9 @@ components.button.colorScheme.light.outlined → components/light.json: button.colorScheme.outlined ``` -`primitive` нужен только для подстановки ссылок и не записывается в результат. -Light- и dark-файлы должны иметь одинаковую структуру и типы значений. +`primitive` нужен для подстановки ссылок и в результат не записывается — +единственное исключение `fonts.fontFamily`, попадающий в `fonts.json`. Light- и +dark-файлы должны иметь одинаковую структуру и типы значений. ## Преобразование значений diff --git a/scripts/token-generator/__tests__/audit.test.ts b/scripts/token-generator/__tests__/audit.test.ts index 1e200630..b0d41be7 100644 --- a/scripts/token-generator/__tests__/audit.test.ts +++ b/scripts/token-generator/__tests__/audit.test.ts @@ -113,6 +113,6 @@ describe('collectTodos', () => { const todos = collectTodos(`${__dirname}/../../../src/components`) expect(todos.length).toBeGreaterThan(0) - expect(todos.every((todo) => todo.legacy.length > 0)).toBeTrue() + expect(todos.filter((todo) => todo.legacy.length === 0)).toHaveLength(0) }) }) diff --git a/scripts/token-generator/__tests__/compiler.test.ts b/scripts/token-generator/__tests__/compiler.test.ts index a32d2611..6be5ffb8 100644 --- a/scripts/token-generator/__tests__/compiler.test.ts +++ b/scripts/token-generator/__tests__/compiler.test.ts @@ -22,6 +22,7 @@ import { parseBoxShorthand, } from '../core/normalization' import { resolveReferences } from '../core/resolution' +import { resolvePath } from '../core/tree' import { isTokenTree, type CompiledTokens, @@ -240,6 +241,7 @@ describe('token compiler', () => { primitive: { sizing: { small: '0.5rem', base: '1rem' }, motion: { fast: '150ms' }, + fonts: { fontFamily: { base: 'Noto Sans', heading: 'TT Fellows' } }, }, semantic: { dimension: { @@ -320,6 +322,7 @@ describe('token compiler', () => { primitive: { sizing: { focusRing: '0.25rem' }, colors: { focus: '#d4fedc' }, + fonts: { fontFamily: { base: 'Noto Sans', heading: 'TT Fellows' } }, }, semantic: { dimension: { @@ -402,8 +405,22 @@ describe('production input tokens', () => { expect(tokenFiles).toStrictEqual(['tokens.json']) }) + test('выводит семейства шрифтов из primitive.fonts.fontFamily', () => { + const primitive = source.primitive + + if (!isTokenTree(primitive)) throw new Error('Expected primitive tokens') + + expect(compiled.fonts).toStrictEqual( + resolvePath(primitive, 'fonts.fontFamily') + ) + }) + test('не экспортирует primitive и убирает разделение тем из colorScheme', () => { - expect(Object.keys(compiled)).toStrictEqual(['semantic', 'components']) + expect(Object.keys(compiled)).toStrictEqual([ + 'semantic', + 'components', + 'fonts', + ]) expect(compiled).not.toHaveProperty('primitive') const inputComponents = source.components @@ -443,7 +460,9 @@ describe('production input tokens', () => { test('содержит только целевые файлы', () => { const tokenFiles = listJsonFiles(TOKENS_DIRECTORY) const expectedFiles = Object.values(OUTPUT_FILES) - .flatMap((group) => Object.values(group)) + .flatMap((group) => + typeof group === 'string' ? [group] : Object.values(group) + ) .sort() expect(tokenFiles).toStrictEqual(expectedFiles) @@ -546,7 +565,9 @@ describe('production input tokens', () => { expect(listJsonFiles(temporaryDirectory)).toStrictEqual( Object.values(OUTPUT_FILES) - .flatMap((group) => Object.values(group)) + .flatMap((group) => + typeof group === 'string' ? [group] : Object.values(group) + ) .sort() ) expect( diff --git a/scripts/token-generator/core/compiler.ts b/scripts/token-generator/core/compiler.ts index 1c57644a..7ed557ee 100644 --- a/scripts/token-generator/core/compiler.ts +++ b/scripts/token-generator/core/compiler.ts @@ -180,6 +180,16 @@ const compileScheme = ( } } +const getFontFamilies = (primitive: TokenTree): TokenTree => { + const fontFamily = resolvePath(primitive, 'fonts.fontFamily') + + if (!isTokenTree(fontFamily)) { + throw new Error('Expected an object at "primitive.fonts.fontFamily"') + } + + return mergeTrees({}, fontFamily) +} + export const compileTokens = (source: TokenTree): CompiledTokens => { const primitive = getGroup(source, 'primitive') const semanticSource = getGroup(source, 'semantic') @@ -202,5 +212,5 @@ export const compileTokens = (source: TokenTree): CompiledTokens => { assertSameShape(semantic.light, semantic.dark) assertSameShape(components.light, components.dark) - return { semantic, components } + return { semantic, components, fonts: getFontFamilies(primitive) } } diff --git a/scripts/token-generator/core/types.ts b/scripts/token-generator/core/types.ts index 2c98a251..419ccb43 100644 --- a/scripts/token-generator/core/types.ts +++ b/scripts/token-generator/core/types.ts @@ -15,6 +15,8 @@ export interface BoxEdges { export interface CompiledTokens { semantic: ThemeTokens components: ThemeTokens + /** Семейства шрифтов: не зависят от цветовой схемы, файл один на обе темы. */ + fonts: TokenTree } export interface ThemeTokens { diff --git a/scripts/token-generator/io.ts b/scripts/token-generator/io.ts index 301d159c..8623e298 100644 --- a/scripts/token-generator/io.ts +++ b/scripts/token-generator/io.ts @@ -21,6 +21,7 @@ export const OUTPUT_FILES = { light: join('components', 'light.json'), dark: join('components', 'dark.json'), }, + fonts: 'fonts.json', } as const export const parseTokenTree = ( @@ -49,6 +50,7 @@ const outputEntries = ( [OUTPUT_FILES.semantic.dark, compiled.semantic.dark], [OUTPUT_FILES.components.light, compiled.components.light], [OUTPUT_FILES.components.dark, compiled.components.dark], + [OUTPUT_FILES.fonts, compiled.fonts], ] export const writeGeneratedTokens = ( diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 244bb6f4..8c4de7d3 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -159,7 +159,6 @@ export const AccordionTestIds = { separator: 'Separator', } -// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-4; value=14 const styles = StyleSheet.create(({ components, spacing, fonts }) => ({ component: { width: '100%' }, diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index ffdd5ed4..f8aaacb9 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -257,7 +257,6 @@ export const Avatar = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans const styles = StyleSheet.create( ({ components, border, typography, fonts }) => ({ container: { diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 85423999..9f75d4ab 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -103,7 +103,6 @@ export const Badge = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows const badgeStyles = StyleSheet.create( ({ components, border, typography, fonts }) => ({ container: { alignItems: 'flex-start' }, diff --git a/src/components/Button/utils/ButtonLabel.tsx b/src/components/Button/utils/ButtonLabel.tsx index b43ed887..0c35ea89 100644 --- a/src/components/Button/utils/ButtonLabel.tsx +++ b/src/components/Button/utils/ButtonLabel.tsx @@ -52,7 +52,6 @@ export const ButtonLabel = genericMemo(ButtonLabelComponent) // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 // TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows const buttonLabelStyles = StyleSheet.create( ({ components: { button }, typography, fonts }) => ({ label: { diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index f6417c0d..8a24b12a 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -104,7 +104,6 @@ export const Chip = memo( // TODO(tokens-migration): reason=missing; legacy=border.Color.Service.border-success.400; value=#77f48a // TODO(tokens-migration): reason=missing; legacy=border.Radius.rounded-full; value=100 // TODO(tokens-migration): reason=missing; legacy=border.Width.border-3; value=3 -// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans const styles = StyleSheet.create( ({ components, typography, spacing, border, fonts }) => ({ chip: { diff --git a/src/components/Input/InputGroupAddon.tsx b/src/components/Input/InputGroupAddon.tsx index 3cbd18f6..2bcea8c3 100644 --- a/src/components/Input/InputGroupAddon.tsx +++ b/src/components/Input/InputGroupAddon.tsx @@ -52,7 +52,6 @@ export const InputGroupAddon = memo( ) // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 -// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans const styles = StyleSheet.create(({ components, typography, fonts }) => ({ container: { padding: components.inputgroup.addon.padding, diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index 02161720..339789d5 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -65,7 +65,6 @@ export const InputOtpItem = memo( // TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.color; light=#2b2e33; dark=#ffffff // TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.hoverBorderColor; light=#1dc831; dark=#77f48a // TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.invalidBorderColor; light=#f47f77; dark=#db3424 -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 const styles = StyleSheet.create(({ components, fonts, typography }) => ({ container: { diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index a83ff4e4..2b747b49 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -29,8 +29,6 @@ const containerMinHeight = StyleSheet.create(({ theme }) => ({ // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows -// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-1; value=3.5 // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-2; value=7 // TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index 98c274b0..d55886d3 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -89,7 +89,6 @@ export const ProgressBar = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows const styles = StyleSheet.create( ({ components, typography, border, fonts }) => ({ container: { diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index a727465b..bd49299f 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -160,7 +160,6 @@ export const SelectButtonItem = memo( // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.selectbutton.extend.iconSize.md; targetValue=20 // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-2xl; value=21; target=components.selectbutton.extend.iconSize.lg; targetValue=24 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 const styles = StyleSheet.create( ({ components, semantic, theme, typography, border, spacing, fonts }) => ({ diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index c379b3ce..30fd353b 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -88,7 +88,6 @@ export const TabItem = memo( // TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9 // TODO(tokens-migration): reason=missing; legacy=components.badge.root.height; value=24 -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 const styles = StyleSheet.create(({ components, typography, fonts }) => ({ diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 66aa0785..82ab97fc 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -100,7 +100,6 @@ export const Tag = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows const tagStyles = StyleSheet.create( ({ components, border, spacing, typography, fonts }) => ({ container: { diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index dae9bf85..35b1f12b 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -134,7 +134,6 @@ export const ToggleButton = memo( // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.togglebutton.extend.iconSize.sm; targetValue=16 // TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonTextColor; light=#85888e; dark=#f0f0f1; target=components.togglebutton.colorScheme.root.disabledColor; targetValue=#85888e // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-sm; value=12.25; target=components.togglebutton.root.sm.fontSize; targetValue=14 -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows // TODO(tokens-migration): reason=missing; legacy=theme.Button.Common.buttonPaddingLeftRight; value=14 const toggleStyles = StyleSheet.create( ({ components, theme, spacing, border, fonts, typography }) => ({ diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index 7fa0bbc7..3372bbdc 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -36,7 +36,6 @@ export const Body = ({ ) } -// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.brand.default; light=#44e858; dark=#77f48a // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 70e6363e..796c27db 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -57,7 +57,6 @@ export const Caption = ({ const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' } -// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.brand.default; light=#44e858; dark=#77f48a // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 diff --git a/src/components/Typography/Subtitle.tsx b/src/components/Typography/Subtitle.tsx index 9fd96ef8..f850c4e7 100644 --- a/src/components/Typography/Subtitle.tsx +++ b/src/components/Typography/Subtitle.tsx @@ -30,7 +30,6 @@ export const Subtitle = memo( ) ) -// TODO(tokens-migration): reason=missing; legacy=fonts.secondary; value=Noto Sans // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.brand.default; light=#44e858; dark=#77f48a // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 diff --git a/src/components/Typography/Title.tsx b/src/components/Typography/Title.tsx index a107848d..a5b5dcda 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -10,7 +10,6 @@ export const Title = ({ level, style, ...other }: TitleProps) => ( ) -// TODO(tokens-migration): reason=missing; legacy=fonts.primary; value=TT Fellows // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-3xl; value=26.25 diff --git a/src/theme/__tests__/ThemeContext.test.tsx b/src/theme/__tests__/ThemeContext.test.tsx index 0106d5ff..d5567365 100644 --- a/src/theme/__tests__/ThemeContext.test.tsx +++ b/src/theme/__tests__/ThemeContext.test.tsx @@ -8,6 +8,7 @@ import { darkTheme } from '../darkTheme' import { lightTheme } from '../lightTheme' import darkComponentTokens from '../tokens/components/dark.json' import lightComponentTokens from '../tokens/components/light.json' +import fontFamilyTokens from '../tokens/fonts.json' import darkSemanticTokens from '../tokens/semantic/dark.json' import lightSemanticTokens from '../tokens/semantic/light.json' import { ThemeVariant } from '../types' @@ -81,4 +82,16 @@ describe('ThemeContextProvider', () => { expect(lightTheme.components).toBe(lightComponentTokens) expect(darkTheme.components).toBe(darkComponentTokens) }) + + test('шрифты берутся из токенов: primary — heading, secondary — base', () => { + const expected = { + primary: fontFamilyTokens.heading, + secondary: fontFamilyTokens.base, + } + + expect(lightTheme.fonts).toStrictEqual(expected) + expect(darkTheme.fonts).toStrictEqual(expected) + expect(lightTheme.fonts.primary).toBe('TT Fellows') + expect(lightTheme.fonts.secondary).toBe('Noto Sans') + }) }) diff --git a/src/theme/commonTheme.ts b/src/theme/commonTheme.ts index 8add2156..0d77a57c 100644 --- a/src/theme/commonTheme.ts +++ b/src/theme/commonTheme.ts @@ -8,6 +8,7 @@ import { shadow } from './assets/shadow' import sizing from './assets/sizing.json' import spacing from './assets/spacing.json' import typography from './assets/typography.json' +import fontFamily from './tokens/fonts.json' export const commonTheme = { background, @@ -20,4 +21,6 @@ export const commonTheme = { typography, custom: customCommon, shadow, + // Публичный FontsConfig оперирует ролями primary/secondary, токены — base/heading. + fonts: { primary: fontFamily.heading, secondary: fontFamily.base }, } diff --git a/src/theme/darkTheme.ts b/src/theme/darkTheme.ts index aa8bf3f0..bae0c05f 100644 --- a/src/theme/darkTheme.ts +++ b/src/theme/darkTheme.ts @@ -12,5 +12,4 @@ export const darkTheme: ThemeType = { components: darkComponentTokens, theme: { ...darkThemeAssets, InputSize, ModalSize, custom: customDark }, ...commonTheme, - fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' }, } diff --git a/src/theme/lightTheme.ts b/src/theme/lightTheme.ts index b91a6008..20d31b2d 100644 --- a/src/theme/lightTheme.ts +++ b/src/theme/lightTheme.ts @@ -12,5 +12,4 @@ export const lightTheme: ThemeType = { components: lightComponentTokens, theme: { ...lightThemeAssets, InputSize, ModalSize, custom: customLight }, ...commonTheme, - fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' }, } diff --git a/src/theme/tokens/fonts.json b/src/theme/tokens/fonts.json new file mode 100644 index 00000000..b0b62c43 --- /dev/null +++ b/src/theme/tokens/fonts.json @@ -0,0 +1 @@ +{ "base": "Noto Sans", "heading": "TT Fellows" } From 8498ad01016e24c1aed94e8f90e8c985f7651a81 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 16:03:47 +0800 Subject: [PATCH 31/47] =?UTF-8?q?docs(tokens):=20=D0=BE=D0=B1=D0=BE=D1=81?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=B0=D0=BD=D1=8B=20semantic-=D1=82=D0=BE?= =?UTF-8?q?=D0=BA=D0=B5=D0=BD=D1=8B=20Typography=20=D0=B8=20=D0=B7=D0=B0?= =?UTF-8?q?=D0=B8=D0=BC=D1=81=D1=82=D0=B2=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20inputtext=20=D0=B2=20InputOtp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Input/InputOtp/InputOtpItem.tsx | 8 +++----- src/components/Typography/Body.tsx | 5 ++--- src/components/Typography/Caption.tsx | 5 ++--- src/components/Typography/Subtitle.tsx | 5 ++--- src/components/Typography/Title.tsx | 3 ++- 5 files changed, 11 insertions(+), 15 deletions(-) diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index 339789d5..3f065c97 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -60,11 +60,9 @@ export const InputOtpItem = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.paddingX; value=14 -// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.borderColor; light=#cecfd2; dark=#56595f -// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.color; light=#2b2e33; dark=#ffffff -// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.hoverBorderColor; light=#1dc831; dark=#77f48a -// TODO(tokens-migration): reason=missing; legacy=components.inputtext.root.invalidBorderColor; light=#f47f77; dark=#db3424 +// Рамка, цвет и отступы намеренно берутся у inputtext: поле OTP должно выглядеть +// как обычное поле ввода. Собственные токены inputotp описывают только отличия — +// тот же приём, что в пресете PrimeUIX lara, где inputotp задаёт лишь gap и width. // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 const styles = StyleSheet.create(({ components, fonts, typography }) => ({ container: { diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index 3372bbdc..61b1dfc0 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -36,11 +36,10 @@ export const Body = ({ ) } -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.brand.default; light=#44e858; dark=#77f48a -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ text: { fontSize: typography.Size['text-base'], diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 796c27db..148a39cb 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -57,12 +57,11 @@ export const Caption = ({ const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' } -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.brand.default; light=#44e858; dark=#77f48a -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-1; value=3.5 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). const styles = StyleSheet.create( ({ semantic, spacing, typography, fonts }) => ({ text: { diff --git a/src/components/Typography/Subtitle.tsx b/src/components/Typography/Subtitle.tsx index f850c4e7..7e35844c 100644 --- a/src/components/Typography/Subtitle.tsx +++ b/src/components/Typography/Subtitle.tsx @@ -30,11 +30,10 @@ export const Subtitle = memo( ) ) -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.brand.default; light=#44e858; dark=#77f48a -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xs; value=10.5 +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ text: { fontSize: typography.Size['text-xs'], diff --git a/src/components/Typography/Title.tsx b/src/components/Typography/Title.tsx index a5b5dcda..bc186e09 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -10,7 +10,6 @@ export const Title = ({ level, style, ...other }: TitleProps) => ( ) -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.default; light=#2b2e33; dark=#ffffff // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-3xl; value=26.25 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-4xl; value=31.5 @@ -20,6 +19,8 @@ export const Title = ({ level, style, ...other }: TitleProps) => ( // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xs; value=10.5 +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ text: { color: semantic.colorScheme.color.fg.default, From f7211718d18cf831223e54abc1ad3ebd1b32153b Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 16:41:22 +0800 Subject: [PATCH 32/47] =?UTF-8?q?refactor(tokens):=20disabled-=D1=81=D0=BE?= =?UTF-8?q?=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D1=8F=20=D0=BF=D0=B5=D1=80?= =?UTF-8?q?=D0=B5=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D1=8B=20=D1=81=20=D1=82?= =?UTF-8?q?=D0=BE=D0=BA=D0=B5=D0=BD=D0=BE=D0=B2=20=D0=BA=D0=BD=D0=BE=D0=BF?= =?UTF-8?q?=D0=BA=D0=B8=20=D0=BD=D0=B0=20semantic-=D1=80=D0=BE=D0=BB=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Chip/Chip.tsx | 16 ++-- src/components/Input/InputGroupAddon.tsx | 77 ++++++++++--------- .../Input/InputTextBase/useInputStyles.ts | 5 +- .../MenuItem/Template/MenuItemTemplate.tsx | 5 +- src/components/Tabs/TabItem/TabItem.tsx | 77 ++++++++++--------- 5 files changed, 89 insertions(+), 91 deletions(-) diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 8a24b12a..7c11f953 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -44,9 +44,9 @@ export const Chip = memo( showIcon = true, ...rest }) => { - const iconUniProps = ({ components }: ThemeType) => ({ + const iconUniProps = ({ components, semantic }: ThemeType) => ({ color: disabled - ? components.button.extend.disabledColor + ? semantic.colorScheme.color.fg.muted : components.chip.colorScheme.root.color, }) @@ -83,9 +83,9 @@ export const Chip = memo( {...styles.icon} source={IconX} style={pressed ? styles.pressedClose : null} - uniProps={({ components }) => ({ + uniProps={({ components, semantic }) => ({ color: disabled - ? components.button.extend.disabledColor + ? semantic.colorScheme.color.fg.muted : components.chip.colorScheme.root.color, })} /> @@ -99,13 +99,11 @@ export const Chip = memo( // `transparent` здесь — отсутствие границы, а не цвет дизайн-системы: // у chip.root нет borderColor, прозрачность не выражена semantic-токеном. -// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9 -// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 // TODO(tokens-migration): reason=missing; legacy=border.Color.Service.border-success.400; value=#77f48a // TODO(tokens-migration): reason=missing; legacy=border.Radius.rounded-full; value=100 // TODO(tokens-migration): reason=missing; legacy=border.Width.border-3; value=3 const styles = StyleSheet.create( - ({ components, typography, spacing, border, fonts }) => ({ + ({ components, semantic, typography, spacing, border, fonts }) => ({ chip: { alignSelf: 'flex-start', justifyContent: 'center', @@ -124,7 +122,7 @@ const styles = StyleSheet.create( borderColor: components.chip.extend.borderColor, }, disabledChip: { - backgroundColor: components.button.extend.disabledBackground, + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, borderColor: 'transparent', opacity: 0.6, mixBlendMode: 'luminosity', @@ -141,7 +139,7 @@ const styles = StyleSheet.create( includeFontPadding: false, fontFamily: fonts.secondary, }, - disabledText: { color: components.button.extend.disabledColor }, + disabledText: { color: semantic.colorScheme.color.fg.muted }, pressedClose: { borderWidth: border.Width['border-3'], borderColor: border.Color.Service['border-success'][400], diff --git a/src/components/Input/InputGroupAddon.tsx b/src/components/Input/InputGroupAddon.tsx index 2bcea8c3..2be6398c 100644 --- a/src/components/Input/InputGroupAddon.tsx +++ b/src/components/Input/InputGroupAddon.tsx @@ -51,41 +51,42 @@ export const InputGroupAddon = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 -const styles = StyleSheet.create(({ components, typography, fonts }) => ({ - container: { - padding: components.inputgroup.addon.padding, - justifyContent: 'center', - 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, - // При меньших значениях возникает баг рендера - borderTopRightRadius: 0.2, - borderBottomRightRadius: 0.2, - }, - right: { - borderLeftWidth: 0, - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - }, - disabled: { - opacity: 0.6, - backgroundColor: components.button.extend.disabledBackground, - }, - text: { - fontSize: typography.Size['text-base'], - color: components.inputgroup.colorScheme.addon.color, - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.secondary, - }, - icon: { - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.inputgroup.extend.iconSize; targetValue=16 - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, -})) +const styles = StyleSheet.create( + ({ components, semantic, typography, fonts }) => ({ + container: { + padding: components.inputgroup.addon.padding, + justifyContent: 'center', + 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, + // При меньших значениях возникает баг рендера + borderTopRightRadius: 0.2, + borderBottomRightRadius: 0.2, + }, + right: { + borderLeftWidth: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + disabled: { + opacity: 0.6, + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, + }, + text: { + fontSize: typography.Size['text-base'], + color: components.inputgroup.colorScheme.addon.color, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.secondary, + }, + icon: { + // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.inputgroup.extend.iconSize; targetValue=16 + width: typography.Size['text-base'], + height: typography.Size['text-base'], + }, + }) +) diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 2b747b49..c5d09d61 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -27,14 +27,13 @@ const containerMinHeight = StyleSheet.create(({ theme }) => ({ xlarge: { minHeight: theme.InputSize.xlarge['min-height'] }, })) -// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-1; value=3.5 // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-2; value=7 // TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 export const inputStyles = StyleSheet.create( - ({ components, border, typography, spacing, fonts }) => ({ + ({ components, semantic, border, typography, spacing, fonts }) => ({ container: { flexDirection: 'row', borderWidth: border.Width.border, @@ -53,7 +52,7 @@ export const inputStyles = StyleSheet.create( disabled: { opacity: 0.6, borderColor: components.inputtext.root.borderColor, - backgroundColor: components.button.extend.disabledBackground, + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, }, inputContainer: { flex: 1, diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index 5465508a..eaa8f3fe 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -135,10 +135,9 @@ export const MenuItemTemplate = memo( // `transparent` здесь — отсутствие фона и границы, а не цвет дизайн-системы: // у menu.item нет background и borderColor, прозрачность не выражена semantic-токеном. -// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledBackground; light=#e2e2e4; dark=#404348 // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 const styles = StyleSheet.create( - ({ components, spacing, typography, border }) => ({ + ({ components, semantic, spacing, typography, border }) => ({ container: { borderColor: 'transparent', borderWidth: border.Width.border, @@ -148,7 +147,7 @@ const styles = StyleSheet.create( containerPressed: { backgroundColor: components.menu.item.focusBackground }, containerDisabled: { borderColor: 'transparent', - backgroundColor: components.button.extend.disabledBackground, + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, opacity: 0.6, }, separator: { diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index 30fd353b..aae008ec 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -56,9 +56,9 @@ export const TabItem = memo( ({ + uniProps={({ components, semantic }) => ({ color: disabled - ? components.button.extend.disabledColor + ? semantic.colorScheme.color.fg.muted : pressed ? components.tabs.tab.hoverColor : active @@ -86,45 +86,46 @@ export const TabItem = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9 // TODO(tokens-migration): reason=missing; legacy=components.badge.root.height; value=24 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 // TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 -const styles = StyleSheet.create(({ components, typography, fonts }) => ({ - container: { - alignItems: 'center', - flexDirection: 'row', - - height: components.badge.root.height + components.tabs.tab.padding * 2, - gap: components.tabs.tab.gap, - paddingHorizontal: components.tabs.tab.padding, - paddingVertical: components.tabs.tab.padding, - - backgroundColor: components.tabs.colorScheme.tab.background, - }, - pressedContainer: { - backgroundColor: components.tabs.colorScheme.tab.hoverBackground, - }, - activeContainer: { - backgroundColor: components.tabs.colorScheme.tab.activeBackground, - }, - disabledContainer: { opacity: 0.6, mixBlendMode: 'luminosity' }, - icon: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], - }, - text: { - fontFamily: fonts.primary, - fontSize: typography.Size['text-base'], - verticalAlign: 'middle', - includeFontPadding: false, - - color: components.tabs.tab.color, - }, - pressedText: { color: components.tabs.tab.hoverColor }, - activeText: { color: components.tabs.tab.activeColor }, - disabledText: { color: components.button.extend.disabledColor }, -})) +const styles = StyleSheet.create( + ({ components, semantic, typography, fonts }) => ({ + container: { + alignItems: 'center', + flexDirection: 'row', + + height: components.badge.root.height + components.tabs.tab.padding * 2, + gap: components.tabs.tab.gap, + paddingHorizontal: components.tabs.tab.padding, + paddingVertical: components.tabs.tab.padding, + + backgroundColor: components.tabs.colorScheme.tab.background, + }, + pressedContainer: { + backgroundColor: components.tabs.colorScheme.tab.hoverBackground, + }, + activeContainer: { + backgroundColor: components.tabs.colorScheme.tab.activeBackground, + }, + disabledContainer: { opacity: 0.6, mixBlendMode: 'luminosity' }, + icon: { + width: typography.Size['text-xl'], + height: typography.Size['text-xl'], + }, + text: { + fontFamily: fonts.primary, + fontSize: typography.Size['text-base'], + verticalAlign: 'middle', + includeFontPadding: false, + + color: components.tabs.tab.color, + }, + pressedText: { color: components.tabs.tab.hoverColor }, + activeText: { color: components.tabs.tab.activeColor }, + disabledText: { color: semantic.colorScheme.color.fg.muted }, + }) +) export enum TestId { Container = 'TabItem_Container', From c774faabca4a6120c08de5242f18982db838656f Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 17:10:20 +0800 Subject: [PATCH 33/47] =?UTF-8?q?feat(tokens):=20=D1=88=D1=80=D0=B8=D1=84?= =?UTF-8?q?=D1=82=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B8?= =?UTF-8?q?=D1=82=D0=B8=D0=B2=D1=8B=20=D1=86=D0=B5=D0=BB=D0=B8=D0=BA=D0=BE?= =?UTF-8?q?=D0=BC=20=D0=B2=D1=8B=D0=B2=D0=BE=D0=B4=D1=8F=D1=82=D1=81=D1=8F?= =?UTF-8?q?=20=D0=B3=D0=B5=D0=BD=D0=B5=D1=80=D0=B0=D1=82=D0=BE=D1=80=D0=BE?= =?UTF-8?q?=D0=BC=20=D0=B8=20=D0=B4=D0=BE=D1=81=D1=82=D1=83=D0=BF=D0=BD?= =?UTF-8?q?=D1=8B=20=D0=B2=20=D1=82=D0=B5=D0=BC=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__tests__/compiler.test.ts | 14 ++++-- scripts/token-generator/core/compiler.ts | 25 +++++++--- src/theme/__tests__/ThemeContext.test.tsx | 12 +++-- src/theme/commonTheme.ts | 8 +++- src/theme/tokens/fonts.json | 46 ++++++++++++++++++- src/theme/types.ts | 3 ++ 6 files changed, 92 insertions(+), 16 deletions(-) diff --git a/scripts/token-generator/__tests__/compiler.test.ts b/scripts/token-generator/__tests__/compiler.test.ts index 6be5ffb8..f0e68a04 100644 --- a/scripts/token-generator/__tests__/compiler.test.ts +++ b/scripts/token-generator/__tests__/compiler.test.ts @@ -405,14 +405,20 @@ describe('production input tokens', () => { expect(tokenFiles).toStrictEqual(['tokens.json']) }) - test('выводит семейства шрифтов из primitive.fonts.fontFamily', () => { + test('выводит шрифтовые примитивы с нормализованными значениями', () => { const primitive = source.primitive if (!isTokenTree(primitive)) throw new Error('Expected primitive tokens') - expect(compiled.fonts).toStrictEqual( - resolvePath(primitive, 'fonts.fontFamily') - ) + const input = resolvePath(primitive, 'fonts') + + if (!isTokenTree(input)) throw new Error('Expected font primitives') + + expect(Object.keys(compiled.fonts)).toStrictEqual(Object.keys(input)) + expect(compiled.fonts.fontFamily).toStrictEqual(input.fontFamily) + // rem пересчитан в px: "1rem" -> 16 + expect(resolvePath(compiled.fonts, 'fontSize.300')).toBe(16) + expect(JSON.stringify(compiled.fonts)).not.toMatch(/rem/) }) test('не экспортирует primitive и убирает разделение тем из colorScheme', () => { diff --git a/scripts/token-generator/core/compiler.ts b/scripts/token-generator/core/compiler.ts index 7ed557ee..c342df1b 100644 --- a/scripts/token-generator/core/compiler.ts +++ b/scripts/token-generator/core/compiler.ts @@ -180,14 +180,27 @@ const compileScheme = ( } } -const getFontFamilies = (primitive: TokenTree): TokenTree => { - const fontFamily = resolvePath(primitive, 'fonts.fontFamily') +/** + * Шрифтовые примитивы — единственная часть primitive, попадающая в результат: + * семейства, размеры, интерлиньяж и начертания нужны компонентам напрямую, + * потому что отдельного component-токена типографики в источнике нет. + */ +const compileFonts = (primitive: TokenTree): TokenTree => { + const fonts = resolvePath(primitive, 'fonts') + + if (!isTokenTree(fonts)) { + throw new Error('Expected an object at "primitive.fonts"') + } + + const normalized = normalizeTree(mergeTrees({}, fonts), 'fonts') - if (!isTokenTree(fontFamily)) { - throw new Error('Expected an object at "primitive.fonts.fontFamily"') + if (!isTokenTree(normalized)) { + throw new Error('Expected normalized font primitives') } - return mergeTrees({}, fontFamily) + assertValidOutput(normalized, 'fonts') + + return normalized } export const compileTokens = (source: TokenTree): CompiledTokens => { @@ -212,5 +225,5 @@ export const compileTokens = (source: TokenTree): CompiledTokens => { assertSameShape(semantic.light, semantic.dark) assertSameShape(components.light, components.dark) - return { semantic, components, fonts: getFontFamilies(primitive) } + return { semantic, components, fonts: compileFonts(primitive) } } diff --git a/src/theme/__tests__/ThemeContext.test.tsx b/src/theme/__tests__/ThemeContext.test.tsx index d5567365..3ac7609b 100644 --- a/src/theme/__tests__/ThemeContext.test.tsx +++ b/src/theme/__tests__/ThemeContext.test.tsx @@ -8,7 +8,7 @@ import { darkTheme } from '../darkTheme' import { lightTheme } from '../lightTheme' import darkComponentTokens from '../tokens/components/dark.json' import lightComponentTokens from '../tokens/components/light.json' -import fontFamilyTokens from '../tokens/fonts.json' +import fontTokens from '../tokens/fonts.json' import darkSemanticTokens from '../tokens/semantic/dark.json' import lightSemanticTokens from '../tokens/semantic/light.json' import { ThemeVariant } from '../types' @@ -85,8 +85,8 @@ describe('ThemeContextProvider', () => { test('шрифты берутся из токенов: primary — heading, secondary — base', () => { const expected = { - primary: fontFamilyTokens.heading, - secondary: fontFamilyTokens.base, + primary: fontTokens.fontFamily.heading, + secondary: fontTokens.fontFamily.base, } expect(lightTheme.fonts).toStrictEqual(expected) @@ -94,4 +94,10 @@ describe('ThemeContextProvider', () => { expect(lightTheme.fonts.primary).toBe('TT Fellows') expect(lightTheme.fonts.secondary).toBe('Noto Sans') }) + + test('шрифтовые примитивы доступны в теме', () => { + expect(lightTheme.primitive.fonts).toBe(fontTokens) + expect(darkTheme.primitive.fonts).toBe(fontTokens) + expect(lightTheme.primitive.fonts.fontSize[300]).toBe(16) + }) }) diff --git a/src/theme/commonTheme.ts b/src/theme/commonTheme.ts index 0d77a57c..b17c6929 100644 --- a/src/theme/commonTheme.ts +++ b/src/theme/commonTheme.ts @@ -8,7 +8,7 @@ import { shadow } from './assets/shadow' import sizing from './assets/sizing.json' import spacing from './assets/spacing.json' import typography from './assets/typography.json' -import fontFamily from './tokens/fonts.json' +import fontTokens from './tokens/fonts.json' export const commonTheme = { background, @@ -21,6 +21,10 @@ export const commonTheme = { typography, custom: customCommon, shadow, + primitive: { fonts: fontTokens }, // Публичный FontsConfig оперирует ролями primary/secondary, токены — base/heading. - fonts: { primary: fontFamily.heading, secondary: fontFamily.base }, + fonts: { + primary: fontTokens.fontFamily.heading, + secondary: fontTokens.fontFamily.base, + }, } diff --git a/src/theme/tokens/fonts.json b/src/theme/tokens/fonts.json index b0b62c43..bec6ffbc 100644 --- a/src/theme/tokens/fonts.json +++ b/src/theme/tokens/fonts.json @@ -1 +1,45 @@ -{ "base": "Noto Sans", "heading": "TT Fellows" } +{ + "fontFamily": { "base": "Noto Sans", "heading": "TT Fellows" }, + "fontWeight": { "regular": 400, "medium": 500, "demibold": 600, "bold": 700 }, + "fontSize": { + "100": 12, + "200": 14, + "300": 16, + "400": 18, + "500": 20, + "600": 24, + "650": 30, + "700": 36, + "750": 48, + "800": 60, + "900": 72, + "1000": 96 + }, + "lineHeight": { + "100": 12, + "150": 14, + "200": 14, + "250": 16, + "300": 18, + "350": 18, + "400": 20, + "450": 22, + "500": 24, + "550": 26, + "600": 28, + "700": 30, + "800": 36, + "850": 38, + "900": 44, + "1000": 54, + "none": 1, + "auto": "auto" + }, + "letterSpacing": { + "200": -0.32, + "400": -0.48, + "500": 0, + "600": 0.32, + "700": 0.48 + } +} diff --git a/src/theme/types.ts b/src/theme/types.ts index 7cc9d2dc..02ea187d 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -13,9 +13,12 @@ import type spacing from './assets/spacing.json' import type lightTheme from './assets/themeLight.json' import type typography from './assets/typography.json' import type lightComponentTokens from './tokens/components/light.json' +import type fontTokens from './tokens/fonts.json' import type lightSemanticTokens from './tokens/semantic/light.json' export interface ThemeType { + /** Шрифтовые примитивы из tokens.json: размеры, интерлиньяж, начертания. */ + primitive: { fonts: typeof fontTokens } background: typeof background colors: { primary: typeof primaryColors } border: typeof border From d847f0ef89a8869b839e74b2c05222a6468251e1 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 17:17:49 +0800 Subject: [PATCH 34/47] =?UTF-8?q?feat(tokens):=20=D1=80=D0=B0=D0=B7=D0=BC?= =?UTF-8?q?=D0=B5=D1=80=D1=8B=20=D1=82=D0=B5=D0=BA=D1=81=D1=82=D0=B0=20?= =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D1=8B=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B8=D1=82=D0=B8=D0=B2?= =?UTF-8?q?=D1=8B=20=D1=88=D1=80=D0=B8=D1=84=D1=82=D0=BE=D0=B2=20=D1=81=20?= =?UTF-8?q?=D0=B1=D0=B0=D0=B7=D0=BE=D0=B9=2016px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Avatar/Avatar.tsx | 8 +- .../__snapshots__/Avatar.test.tsx.snap | 100 +- src/components/Badge/Badge.tsx | 4 +- .../__snapshots__/Badge.test.tsx.snap | 24 +- .../__snapshots__/Button.test.tsx.snap | 9126 ++++++++--------- .../__snapshots__/ButtonBadge.test.tsx.snap | 8 +- .../ButtonSeverity.test.tsx.snap | 8 +- src/components/Button/utils/ButtonIcon.tsx | 21 +- src/components/Button/utils/ButtonLabel.tsx | 13 +- src/components/Chip/Chip.tsx | 16 +- .../__snapshots__/Chip.test.tsx.snap | 176 +- src/components/Dialog/DialogHeader.tsx | 12 +- .../__snapshots__/DialogHeader.test.tsx.snap | 240 +- src/components/Divider/Divider.tsx | 6 +- .../__snapshots__/Divider.test.tsx.snap | 28 +- src/components/Input/InputGroupAddon.tsx | 8 +- .../Input/InputOtp/InputOtpItem.tsx | 5 +- .../__snapshots__/InputOtp.test.tsx.snap | 672 +- .../Input/InputTextBase/useInputStyles.ts | 25 +- .../InputGroupAddon.test.tsx.snap | 18 +- .../__snapshots__/InputTextBase.test.tsx.snap | 2 +- src/components/List/Base/ListBase.tsx | 6 +- .../__snapshots__/ListBase.test.tsx.snap | 100 +- .../MenuItem/Template/MenuItemTemplate.tsx | 6 +- .../MenuItemTemplate.test.tsx.snap | 88 +- src/components/Message/Message.tsx | 7 +- .../__snapshots__/Message.test.tsx.snap | 110 +- src/components/ProgressBar/ProgressBar.tsx | 4 +- .../__snapshots__/ProgressBar.test.tsx.snap | 20 +- .../SelectButton/SelectButtonItem.tsx | 35 +- .../__tests__/SelectButtonItem.test.tsx | 14 +- src/components/Tabs/TabItem/TabItem.tsx | 10 +- .../__snapshots__/Tabs.test.tsx.snap | 166 +- src/components/Tag/Tag.tsx | 4 +- .../__tests__/__snapshots__/Tag.test.tsx.snap | 14 +- src/components/Timer/TimerFlip.tsx | 4 +- .../__snapshots__/Timer.test.tsx.snap | 16 +- src/components/ToggleButton/ToggleButton.tsx | 31 +- .../__snapshots__/ToggleButton.test.tsx.snap | 66 +- src/components/Typography/Anchor.tsx | 62 +- src/components/Typography/Body.tsx | 8 +- src/components/Typography/Caption.tsx | 44 +- src/components/Typography/Service.tsx | 61 +- src/components/Typography/Subtitle.tsx | 8 +- src/components/Typography/Title.tsx | 29 +- .../__snapshots__/Anchor.test.tsx.snap | 58 +- .../__snapshots__/Body.test.tsx.snap | 146 +- .../__snapshots__/Caption.test.tsx.snap | 98 +- .../__snapshots__/Service.test.tsx.snap | 360 +- .../__snapshots__/Subtitle.test.tsx.snap | 32 +- .../__snapshots__/Title.test.tsx.snap | 12 +- 51 files changed, 6066 insertions(+), 6073 deletions(-) diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index f8aaacb9..bf0b32e2 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -258,7 +258,7 @@ export const Avatar = memo( ) const styles = StyleSheet.create( - ({ components, border, typography, fonts }) => ({ + ({ primitive, components, border, fonts }) => ({ container: { justifyContent: 'center', alignItems: 'center', @@ -273,7 +273,7 @@ const styles = StyleSheet.create( circle: { borderRadius: border.Radius['rounded-full'] }, text: { // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.avatar.root.fontSize; targetValue=16 - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], textTransform: 'uppercase', color: components.avatar.root.color, includeFontPadding: false, @@ -282,9 +282,9 @@ const styles = StyleSheet.create( }, badgeContainer: { position: 'absolute', right: 0, top: -7 }, badgeMeasureContainer: { alignSelf: 'flex-start' }, - icon: { width: typography.Size['text-base'] }, + icon: { width: primitive.fonts.fontSize[300] }, // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-2xl; value=21; target=components.avatar.xl.icon.size; targetValue=24 - iconXLarge: { width: typography.Size['text-2xl'] }, + iconXLarge: { width: primitive.fonts.fontSize[600] }, }) ) diff --git a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index ef336ccc..a83be90a 100644 --- a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -172,11 +172,11 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` > ( ) const badgeStyles = StyleSheet.create( - ({ components, border, typography, fonts }) => ({ + ({ primitive, components, border, fonts }) => ({ container: { alignItems: 'flex-start' }, dot: { variants: { @@ -142,7 +142,7 @@ const badgeStyles = StyleSheet.create( textBadge: { color: components.badge.colorScheme.primary.color, // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xs; value=10.5; target=components.badge.root.fontSize; targetValue=12 - fontSize: typography.Size['text-xs'], + fontSize: primitive.fonts.fontSize[100], includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.primary, diff --git a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap index fdf4477e..90ab5bbb 100644 --- a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap @@ -173,7 +173,7 @@ exports[`Badge component tests severity: basic 1`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -208,7 +208,7 @@ exports[`Badge component tests severity: basic 1`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -254,7 +254,7 @@ exports[`Badge component tests severity: basic 2`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -289,7 +289,7 @@ exports[`Badge component tests severity: basic 2`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -335,7 +335,7 @@ exports[`Badge component tests severity: basic 3`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -370,7 +370,7 @@ exports[`Badge component tests severity: basic 3`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -416,7 +416,7 @@ exports[`Badge component tests severity: basic 4`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -451,7 +451,7 @@ exports[`Badge component tests severity: basic 4`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -497,7 +497,7 @@ exports[`Badge component tests severity: basic 5`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -532,7 +532,7 @@ exports[`Badge component tests severity: basic 5`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -578,7 +578,7 @@ exports[`Badge component tests severity: default 1`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -613,7 +613,7 @@ exports[`Badge component tests severity: default 1`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } diff --git a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index 2a313fd8..76e45616 100644 --- a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -56,7 +56,7 @@ exports[`Button component tests Button default props 1`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 14, + "fontSize": 16, "fontWeight": 600, "includeFontPadding": false, "verticalAlign": "middle", @@ -128,7 +128,7 @@ exports[`Button component tests Button with custom pressed-based style 1`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 14, + "fontSize": 16, "fontWeight": 600, "includeFontPadding": false, "verticalAlign": "middle", @@ -200,7 +200,7 @@ exports[`Button component tests Button with custom style 1`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 14, + "fontSize": 16, "fontWeight": 600, "includeFontPadding": false, "verticalAlign": "middle", @@ -267,11 +267,11 @@ exports[`Button component tests Button with icon on left, size - base, shape - c > ({ + ({ primitive, components: { button }, typography }) => ({ icon: { variants: { size: { xlarge: { - height: typography.Size['text-2xl'], - width: typography.Size['text-2xl'], + height: primitive.fonts.fontSize[600], + width: primitive.fonts.fontSize[600], }, large: { - height: typography.Size['text-2xl'], - width: typography.Size['text-2xl'], + height: primitive.fonts.fontSize[600], + width: primitive.fonts.fontSize[600], }, base: { - height: typography.Size['text-xl'], - width: typography.Size['text-xl'], + height: primitive.fonts.fontSize[500], + width: primitive.fonts.fontSize[500], }, small: { - height: typography.Size['text-base'], - width: typography.Size['text-base'], + height: primitive.fonts.fontSize[300], + width: primitive.fonts.fontSize[300], }, }, variant: { diff --git a/src/components/Button/utils/ButtonLabel.tsx b/src/components/Button/utils/ButtonLabel.tsx index 0c35ea89..de620d30 100644 --- a/src/components/Button/utils/ButtonLabel.tsx +++ b/src/components/Button/utils/ButtonLabel.tsx @@ -48,12 +48,9 @@ const ButtonLabelComponent = ({ export const ButtonLabel = genericMemo(ButtonLabelComponent) -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 // TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e const buttonLabelStyles = StyleSheet.create( - ({ components: { button }, typography, fonts }) => ({ + ({ primitive, components: { button }, typography, fonts }) => ({ label: { fontWeight: 600, includeFontPadding: false, @@ -61,10 +58,10 @@ const buttonLabelStyles = StyleSheet.create( 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'] }, + xlarge: { fontSize: primitive.fonts.fontSize[500] }, + large: { fontSize: primitive.fonts.fontSize[500] }, + base: { fontSize: primitive.fonts.fontSize[300] }, + small: { fontSize: primitive.fonts.fontSize[100] }, }, variant: { primary: { color: button.colorScheme.root.primary.color }, diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 7c11f953..48c9b686 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -103,7 +103,15 @@ export const Chip = memo( // TODO(tokens-migration): reason=missing; legacy=border.Radius.rounded-full; value=100 // TODO(tokens-migration): reason=missing; legacy=border.Width.border-3; value=3 const styles = StyleSheet.create( - ({ components, semantic, typography, spacing, border, fonts }) => ({ + ({ + primitive, + components, + semantic, + + spacing, + border, + fonts, + }) => ({ chip: { alignSelf: 'flex-start', justifyContent: 'center', @@ -129,11 +137,11 @@ const styles = StyleSheet.create( }, icon: { // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.chip.icon.size; targetValue=16 - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], }, text: { - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], verticalAlign: 'middle', color: components.chip.colorScheme.root.color, includeFontPadding: false, diff --git a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap index 3cc8d364..e9a5b96a 100644 --- a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap @@ -64,7 +64,7 @@ exports[`Chip component tests { { "color": "#2b2e33", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -136,11 +136,11 @@ exports[`Chip component tests { > ({ +const styles = StyleSheet.create(({ primitive, components, border }) => ({ text: { flex: 1 }, header: { flexDirection: 'row', @@ -107,12 +105,12 @@ const styles = StyleSheet.create(({ components, typography, border }) => ({ backgroundColor: components.dialog.root.borderColor, }, closeIcon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], }, severityIcon: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], + width: primitive.fonts.fontSize[600], + height: primitive.fonts.fontSize[600], }, })) diff --git a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap index cd852d89..b69256c6 100644 --- a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap +++ b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap @@ -16,11 +16,11 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange > ( // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-4; value=14 // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-2; value=7 -const styles = StyleSheet.create(({ spacing, components, typography }) => ({ +const styles = StyleSheet.create(({ primitive, spacing, components }) => ({ container: { minHeight: 28, flexDirection: 'row', @@ -180,8 +180,8 @@ const styles = StyleSheet.create(({ spacing, components, typography }) => ({ }, icon: { // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.divider.extend.iconSize; targetValue=16 - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], }, 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 bb248952..d75526fb 100644 --- a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap +++ b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap @@ -117,7 +117,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "horizontal", "sho [ { "fontFamily": "Noto Sans", - "fontSize": 10.5, + "fontSize": 12, "fontWeight": 700, "lineHeight": 15, "textTransform": "uppercase", @@ -288,11 +288,11 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" > ( ) const styles = StyleSheet.create( - ({ components, semantic, typography, fonts }) => ({ + ({ primitive, components, semantic, fonts }) => ({ container: { padding: components.inputgroup.addon.padding, justifyContent: 'center', @@ -77,7 +77,7 @@ const styles = StyleSheet.create( backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, }, text: { - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], color: components.inputgroup.colorScheme.addon.color, includeFontPadding: false, verticalAlign: 'middle', @@ -85,8 +85,8 @@ const styles = StyleSheet.create( }, icon: { // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.inputgroup.extend.iconSize; targetValue=16 - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], }, }) ) diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index 3f065c97..10902d42 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -63,8 +63,7 @@ export const InputOtpItem = memo( // Рамка, цвет и отступы намеренно берутся у inputtext: поле OTP должно выглядеть // как обычное поле ввода. Собственные токены inputotp описывают только отличия — // тот же приём, что в пресете PrimeUIX lara, где inputotp задаёт лишь gap и width. -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 -const styles = StyleSheet.create(({ components, fonts, typography }) => ({ +const styles = StyleSheet.create(({ primitive, components, fonts }) => ({ container: { minHeight: 35, minWidth: 35, @@ -78,7 +77,7 @@ const styles = StyleSheet.create(({ components, fonts, typography }) => ({ textRow: { flexDirection: 'row', alignItems: 'center' }, text: { - fontSize: typography.Size['text-2xl'], + fontSize: primitive.fonts.fontSize[600], fontFamily: fonts.primary, fontWeight: '400', color: components.inputtext.root.color, 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 544e770e..43d201be 100644 --- a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap +++ b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap @@ -64,7 +64,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -95,7 +95,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -189,7 +189,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -222,7 +222,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -316,7 +316,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -349,7 +349,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -447,7 +447,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -480,7 +480,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -576,7 +576,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -611,7 +611,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -707,7 +707,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -742,7 +742,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -841,7 +841,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -875,7 +875,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -972,7 +972,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1008,7 +1008,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1105,7 +1105,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1141,7 +1141,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1242,7 +1242,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1278,7 +1278,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1377,7 +1377,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1415,7 +1415,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1514,7 +1514,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1552,7 +1552,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1650,7 +1650,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1683,7 +1683,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1779,7 +1779,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1814,7 +1814,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1910,7 +1910,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -1945,7 +1945,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2045,7 +2045,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2080,7 +2080,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2178,7 +2178,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2215,7 +2215,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2313,7 +2313,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2350,7 +2350,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2451,7 +2451,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2487,7 +2487,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2586,7 +2586,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2624,7 +2624,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2723,7 +2723,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2761,7 +2761,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2864,7 +2864,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -2902,7 +2902,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3003,7 +3003,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3043,7 +3043,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3144,7 +3144,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3184,7 +3184,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3280,7 +3280,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3311,7 +3311,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3342,7 +3342,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3373,7 +3373,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3467,7 +3467,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3500,7 +3500,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3531,7 +3531,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3562,7 +3562,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3656,7 +3656,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3689,7 +3689,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3722,7 +3722,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3753,7 +3753,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3849,7 +3849,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3882,7 +3882,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3915,7 +3915,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -3948,7 +3948,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4044,7 +4044,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4079,7 +4079,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4112,7 +4112,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4145,7 +4145,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4241,7 +4241,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4276,7 +4276,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4311,7 +4311,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4344,7 +4344,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4441,7 +4441,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4475,7 +4475,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4509,7 +4509,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4543,7 +4543,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4640,7 +4640,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4676,7 +4676,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4710,7 +4710,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4744,7 +4744,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4841,7 +4841,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4877,7 +4877,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4913,7 +4913,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -4947,7 +4947,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5046,7 +5046,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5082,7 +5082,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5118,7 +5118,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5154,7 +5154,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5253,7 +5253,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5291,7 +5291,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5327,7 +5327,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5363,7 +5363,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5462,7 +5462,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5500,7 +5500,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5538,7 +5538,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5574,7 +5574,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5670,7 +5670,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5703,7 +5703,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5736,7 +5736,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5769,7 +5769,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5865,7 +5865,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5900,7 +5900,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5933,7 +5933,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -5966,7 +5966,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6062,7 +6062,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6097,7 +6097,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6132,7 +6132,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6165,7 +6165,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6263,7 +6263,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6298,7 +6298,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6333,7 +6333,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6368,7 +6368,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6466,7 +6466,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6503,7 +6503,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6538,7 +6538,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6573,7 +6573,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6671,7 +6671,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6708,7 +6708,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6745,7 +6745,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6780,7 +6780,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6879,7 +6879,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6915,7 +6915,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6951,7 +6951,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -6987,7 +6987,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7086,7 +7086,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7124,7 +7124,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7160,7 +7160,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7196,7 +7196,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7295,7 +7295,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7333,7 +7333,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7371,7 +7371,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7407,7 +7407,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7508,7 +7508,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7546,7 +7546,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7584,7 +7584,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7622,7 +7622,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7723,7 +7723,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7763,7 +7763,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7801,7 +7801,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7839,7 +7839,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7940,7 +7940,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -7980,7 +7980,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8020,7 +8020,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8058,7 +8058,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8152,7 +8152,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8183,7 +8183,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8214,7 +8214,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8245,7 +8245,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8276,7 +8276,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8307,7 +8307,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8338,7 +8338,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8369,7 +8369,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8463,7 +8463,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8496,7 +8496,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8527,7 +8527,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8558,7 +8558,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8589,7 +8589,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8620,7 +8620,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8651,7 +8651,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8682,7 +8682,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8776,7 +8776,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8809,7 +8809,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8842,7 +8842,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8873,7 +8873,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8904,7 +8904,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8935,7 +8935,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8966,7 +8966,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -8997,7 +8997,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9093,7 +9093,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9126,7 +9126,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9159,7 +9159,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9192,7 +9192,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9225,7 +9225,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9258,7 +9258,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9291,7 +9291,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9324,7 +9324,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9420,7 +9420,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9455,7 +9455,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9488,7 +9488,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9521,7 +9521,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9554,7 +9554,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9587,7 +9587,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9620,7 +9620,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9653,7 +9653,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9749,7 +9749,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9784,7 +9784,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9819,7 +9819,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9852,7 +9852,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9885,7 +9885,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9918,7 +9918,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9951,7 +9951,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -9984,7 +9984,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10081,7 +10081,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10115,7 +10115,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10149,7 +10149,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10183,7 +10183,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10217,7 +10217,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10251,7 +10251,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10285,7 +10285,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10319,7 +10319,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10416,7 +10416,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10452,7 +10452,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10486,7 +10486,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10520,7 +10520,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10554,7 +10554,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10588,7 +10588,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10622,7 +10622,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10656,7 +10656,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10753,7 +10753,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10789,7 +10789,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10825,7 +10825,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10859,7 +10859,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10893,7 +10893,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10927,7 +10927,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10961,7 +10961,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -10995,7 +10995,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11094,7 +11094,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11130,7 +11130,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11166,7 +11166,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11202,7 +11202,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11238,7 +11238,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11274,7 +11274,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11310,7 +11310,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11346,7 +11346,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11445,7 +11445,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11483,7 +11483,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11519,7 +11519,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11555,7 +11555,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11591,7 +11591,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11627,7 +11627,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11663,7 +11663,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11699,7 +11699,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11798,7 +11798,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11836,7 +11836,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11874,7 +11874,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11910,7 +11910,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11946,7 +11946,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -11982,7 +11982,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12018,7 +12018,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12054,7 +12054,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12150,7 +12150,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12183,7 +12183,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12216,7 +12216,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12249,7 +12249,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12282,7 +12282,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12315,7 +12315,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12348,7 +12348,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12381,7 +12381,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12477,7 +12477,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12512,7 +12512,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12545,7 +12545,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12578,7 +12578,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12611,7 +12611,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12644,7 +12644,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12677,7 +12677,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12710,7 +12710,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12806,7 +12806,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12841,7 +12841,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12876,7 +12876,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12909,7 +12909,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12942,7 +12942,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -12975,7 +12975,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13008,7 +13008,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13041,7 +13041,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13139,7 +13139,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13174,7 +13174,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13209,7 +13209,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13244,7 +13244,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13279,7 +13279,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13314,7 +13314,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13349,7 +13349,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13384,7 +13384,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13482,7 +13482,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13519,7 +13519,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13554,7 +13554,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13589,7 +13589,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13624,7 +13624,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13659,7 +13659,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13694,7 +13694,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13729,7 +13729,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13827,7 +13827,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13864,7 +13864,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13901,7 +13901,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13936,7 +13936,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -13971,7 +13971,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14006,7 +14006,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14041,7 +14041,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14076,7 +14076,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14175,7 +14175,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14211,7 +14211,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14247,7 +14247,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14283,7 +14283,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14319,7 +14319,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14355,7 +14355,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14391,7 +14391,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14427,7 +14427,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14526,7 +14526,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14564,7 +14564,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14600,7 +14600,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14636,7 +14636,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14672,7 +14672,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14708,7 +14708,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14744,7 +14744,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14780,7 +14780,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14879,7 +14879,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14917,7 +14917,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14955,7 +14955,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -14991,7 +14991,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15027,7 +15027,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15063,7 +15063,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15099,7 +15099,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15135,7 +15135,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15236,7 +15236,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15274,7 +15274,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15312,7 +15312,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15350,7 +15350,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15388,7 +15388,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15426,7 +15426,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15464,7 +15464,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15502,7 +15502,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15603,7 +15603,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15643,7 +15643,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15681,7 +15681,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15719,7 +15719,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15757,7 +15757,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15795,7 +15795,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15833,7 +15833,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15871,7 +15871,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -15972,7 +15972,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -16012,7 +16012,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -16052,7 +16052,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -16090,7 +16090,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -16128,7 +16128,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -16166,7 +16166,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -16204,7 +16204,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } @@ -16242,7 +16242,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 21, + "fontSize": 24, "fontWeight": "400", "includeFontPadding": false, } diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index c5d09d61..8343b705 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -31,9 +31,16 @@ const containerMinHeight = StyleSheet.create(({ theme }) => ({ // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-1; value=3.5 // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-2; value=7 // TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 export const inputStyles = StyleSheet.create( - ({ components, semantic, border, typography, spacing, fonts }) => ({ + ({ + primitive, + components, + semantic, + border, + typography, + spacing, + fonts, + }) => ({ container: { flexDirection: 'row', borderWidth: border.Width.border, @@ -78,7 +85,7 @@ export const inputStyles = StyleSheet.create( overflow: 'hidden', }, inputFont: { - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], color: components.inputtext.root.color, includeFontPadding: false, fontFamily: fonts.secondary, @@ -96,13 +103,13 @@ export const inputStyles = StyleSheet.create( rightButtonContainer: { justifyContent: 'center' }, iconSize: { // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.inputtext.extend.iconSize; targetValue=16 - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], }, iconSizeFloatLabel: { // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.inputtext.extend.iconSize; targetValue=16 - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: primitive.fonts.fontSize[500], + height: primitive.fonts.fontSize[500], }, label: { @@ -116,11 +123,11 @@ export const inputStyles = StyleSheet.create( color: typography.Color.Common['text-color-secondary'], includeFontPadding: false, verticalAlign: 'middle', - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], fontFamily: fonts.secondary, }, labelReducedSize: { - fontSize: typography.Size['text-sm'], + fontSize: primitive.fonts.fontSize[100], paddingVertical: spacing.Padding['p-1'], top: 7, fontFamily: fonts.primary, diff --git a/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap b/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap index dabce341..4ea15dc6 100644 --- a/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap +++ b/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap @@ -25,11 +25,11 @@ exports[`InputGroup component tests content: icon, position: right 1`] = ` > ({ + ({ primitive, spacing, theme, background }) => ({ container: { flexDirection: 'row', paddingLeft: spacing.Padding['p-4'], @@ -168,8 +168,8 @@ const styles = StyleSheet.create( titleContainer: { gap: spacing.Gap['gap-1'] }, extraContainer: { paddingVertical: spacing.Padding['p-2'] }, icon: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], + width: primitive.fonts.fontSize[600], + height: primitive.fonts.fontSize[600], }, rightSection: { flexDirection: 'row', 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..86dfcf55 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`] = ` > ( // у menu.item нет background и borderColor, прозрачность не выражена semantic-токеном. // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 const styles = StyleSheet.create( - ({ components, semantic, spacing, typography, border }) => ({ + ({ primitive, components, semantic, spacing, border }) => ({ container: { borderColor: 'transparent', borderWidth: border.Width.border, @@ -176,8 +176,8 @@ const styles = StyleSheet.create( }, icon: { // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.menu.extend.iconSize; targetValue=20 - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: primitive.fonts.fontSize[500], + height: primitive.fonts.fontSize[500], color: components.menu.item.icon.color, }, textContainer: { gap: spacing.Gap['gap-1'], 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 2c6d50e7..a49ff181 100644 --- a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap +++ b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap @@ -92,11 +92,11 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` ( // TODO(tokens-migration): reason=value-mismatch; legacy=border.Width.border-3; value=3; target=components.message.extend.extAccentLine.width; targetValue=4 // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-5; value=17.5; target=components.message.content.padding; targetValue=14 // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-1; value=3.5; target=components.message.extend.extText.gap; targetValue=4 -// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-4xl; value=31.5; target=components.message.icon.size; targetValue=36 // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-4; value=14 // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-4; value=14 const messageStyles = StyleSheet.create( - ({ components, typography, spacing, border }) => ({ + ({ primitive, components, spacing, border }) => ({ container: { borderRadius: components.message.root.borderRadius, borderWidth: border.Width.border, @@ -282,8 +281,8 @@ const messageStyles = StyleSheet.create( gap: spacing.Gap['gap-1'], }, iconSize: { - width: typography.Size['text-4xl'], - height: typography.Size['text-4xl'], + width: primitive.fonts.fontSize[700], + height: primitive.fonts.fontSize[700], }, }) ) diff --git a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap index 7799f837..964c40df 100644 --- a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap +++ b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap @@ -101,11 +101,11 @@ exports[`Message {"Icon": [Object]} 1`] = ` > ( ) const styles = StyleSheet.create( - ({ components, typography, border, fonts }) => ({ + ({ primitive, components, border, fonts }) => ({ container: { // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.progressbar.root.borderRadius; targetValue=14 borderRadius: border.Radius['rounded-full'], @@ -110,7 +110,7 @@ const styles = StyleSheet.create( indicatorText: { // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xs; value=10.5; target=components.progressbar.label.fontSize; targetValue=12 - fontSize: typography.Size['text-xs'], + fontSize: primitive.fonts.fontSize[100], textAlign: 'center', color: components.progressbar.label.color, fontFamily: fonts.primary, diff --git a/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap index da3ccf39..e638661e 100644 --- a/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -190,7 +190,7 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } @@ -268,7 +268,7 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } @@ -470,7 +470,7 @@ exports[`ProgressBar component test value - 0, showValue - true, style - {"heigh { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } @@ -548,7 +548,7 @@ exports[`ProgressBar component test value - 0, showValue - true, style - {"heigh { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } @@ -750,7 +750,7 @@ exports[`ProgressBar component test value - 50, showValue - true, style - {"heig { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } @@ -828,7 +828,7 @@ exports[`ProgressBar component test value - 50, showValue - true, style - {"heig { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } @@ -1030,7 +1030,7 @@ exports[`ProgressBar component test value - 100, showValue - true, style - {"hei { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } @@ -1108,7 +1108,7 @@ exports[`ProgressBar component test value - 100, showValue - true, style - {"hei { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } @@ -1310,7 +1310,7 @@ exports[`ProgressBar component test value - 150, showValue - true, style - {"hei { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } @@ -1388,7 +1388,7 @@ exports[`ProgressBar component test value - 150, showValue - true, style - {"hei { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "textAlign": "center", } } diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index bd49299f..0a1bab52 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -156,13 +156,18 @@ export const SelectButtonItem = memo( // TODO(tokens-migration): reason=missing; legacy=theme.Button.Disabled.disabledButtonBorderColor; light=#a2a5a9; dark=#56595f // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-3; value=10.5; target=components.selectbutton.extend.gap; targetValue=4 -// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.selectbutton.extend.iconSize.sm; targetValue=16 -// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.selectbutton.extend.iconSize.md; targetValue=20 -// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-2xl; value=21; target=components.selectbutton.extend.iconSize.lg; targetValue=24 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 const styles = StyleSheet.create( - ({ components, semantic, theme, typography, border, spacing, fonts }) => ({ + ({ + primitive, + components, + semantic, + theme, + + border, + spacing, + fonts, + }) => ({ container: { flex: 1, flexDirection: 'row', @@ -183,23 +188,23 @@ const styles = StyleSheet.create( borderColor: theme.Button.Disabled.disabledButtonBorderColor, }, iconSmall: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], }, iconBase: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: primitive.fonts.fontSize[500], + height: primitive.fonts.fontSize[500], }, iconLarge: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], + width: primitive.fonts.fontSize[600], + height: primitive.fonts.fontSize[600], }, 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'] }, + labelSmall: { fontSize: primitive.fonts.fontSize[100] }, + labelBase: { fontSize: primitive.fonts.fontSize[300] }, + labelLarge: { fontSize: primitive.fonts.fontSize[500] }, + labelXLarge: { fontSize: primitive.fonts.fontSize[600] }, textColor: { color: semantic.colorScheme.color.fg.muted }, checkedTextColor: { color: components.selectbutton.extend.checkedColor }, disabledTextColor: { diff --git a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx index 9c37b42c..c9fcc72a 100644 --- a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx +++ b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx @@ -64,29 +64,29 @@ const sizeCases: Array<{ name: 'маленький', size: 'small', height: lightTheme.theme.Button.Common.buttonHeightSM, - iconSize: lightTheme.typography.Size['text-base'], - fontSize: lightTheme.typography.Size['text-sm'], + iconSize: lightTheme.primitive.fonts.fontSize[300], + fontSize: lightTheme.primitive.fonts.fontSize[100], }, { name: 'базовый', size: 'base', height: lightTheme.theme.Button.Common.buttonHeight, - iconSize: lightTheme.typography.Size['text-xl'], - fontSize: lightTheme.typography.Size['text-base'], + iconSize: lightTheme.primitive.fonts.fontSize[500], + fontSize: lightTheme.primitive.fonts.fontSize[300], }, { name: 'большой', size: 'large', height: lightTheme.theme.Button.Common.buttonHeightLG, - iconSize: lightTheme.typography.Size['text-2xl'], - fontSize: lightTheme.typography.Size['text-xl'], + iconSize: lightTheme.primitive.fonts.fontSize[600], + fontSize: lightTheme.primitive.fonts.fontSize[500], }, { name: 'самый большой', size: 'xlarge', height: lightTheme.theme.Button.Common.buttonHeightXL, iconSize: 28, - fontSize: lightTheme.typography.Size['text-2xl'], + fontSize: lightTheme.primitive.fonts.fontSize[600], }, ] diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index aae008ec..0fc092c4 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -87,10 +87,8 @@ export const TabItem = memo( ) // TODO(tokens-migration): reason=missing; legacy=components.badge.root.height; value=24 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 const styles = StyleSheet.create( - ({ components, semantic, typography, fonts }) => ({ + ({ primitive, components, semantic, fonts }) => ({ container: { alignItems: 'center', flexDirection: 'row', @@ -110,12 +108,12 @@ const styles = StyleSheet.create( }, disabledContainer: { opacity: 0.6, mixBlendMode: 'luminosity' }, icon: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: primitive.fonts.fontSize[500], + height: primitive.fonts.fontSize[500], }, text: { fontFamily: fonts.primary, - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], verticalAlign: 'middle', includeFontPadding: false, diff --git a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap index b9961332..51c730f9 100644 --- a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +++ b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap @@ -61,7 +61,7 @@ exports[`TabItem component tests active: label 1`] = ` { "color": "#85888e", "fontFamily": "TT Fellows", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -140,7 +140,7 @@ exports[`TabItem component tests active: label, badge 1`] = ` { "color": "#85888e", "fontFamily": "TT Fellows", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -186,7 +186,7 @@ exports[`TabItem component tests active: label, badge 1`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -221,7 +221,7 @@ exports[`TabItem component tests active: label, badge 1`] = ` { "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -292,11 +292,11 @@ exports[`TabItem component tests active: label, icon 1`] = ` > ( ) const tagStyles = StyleSheet.create( - ({ components, border, spacing, typography, fonts }) => ({ + ({ primitive, components, border, spacing, fonts }) => ({ container: { alignSelf: 'flex-start', flexDirection: 'row', @@ -141,7 +141,7 @@ const tagStyles = StyleSheet.create( text: { flexShrink: 1, // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xs; value=10.5; target=components.tag.root.fontSize; targetValue=12 - fontSize: typography.Size['text-xs'], + fontSize: primitive.fonts.fontSize[100], includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.primary, diff --git a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap index f62b8100..b44adea6 100644 --- a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap +++ b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap @@ -29,7 +29,7 @@ exports[`Tag snapshot: default 1`] = ` "color": "#2b2e33", "flexShrink": 1, "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -152,7 +152,7 @@ exports[`Tag snapshot: severity = basic, rounded = true, with Icon 1`] = ` "color": "#2b2e33", "flexShrink": 1, "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -194,7 +194,7 @@ exports[`Tag snapshot: severity = danger 1`] = ` "color": "#45120e", "flexShrink": 1, "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -315,7 +315,7 @@ exports[`Tag snapshot: severity = info, showIcon = false, with Icon 1`] = ` "color": "#0e2a45", "flexShrink": 1, "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -436,7 +436,7 @@ exports[`Tag snapshot: severity = secondary, rounded = false, showIcon = true, w "color": "#2b2e33", "flexShrink": 1, "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -483,7 +483,7 @@ exports[`Tag snapshot: severity = success, with custom styles 1`] = ` "color": "#0e4514", "flexShrink": 1, "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -525,7 +525,7 @@ exports[`Tag snapshot: severity = warning 1`] = ` "color": "#4f3709", "flexShrink": 1, "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } diff --git a/src/components/Timer/TimerFlip.tsx b/src/components/Timer/TimerFlip.tsx index 88c72ad9..3cc83dd8 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(({ primitive, typography, fonts }) => ({ container: { overflow: 'hidden', width: COUNTER_SIZE, @@ -81,7 +81,7 @@ const styles = StyleSheet.create(({ typography, fonts }) => ({ position: 'absolute', }, text: { - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], fontWeight: 700, includeFontPadding: false, verticalAlign: 'middle', 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 35b1f12b..a060b493 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -128,15 +128,10 @@ export const ToggleButton = memo( // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.togglebutton.root.gap; targetValue=8 // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-3; value=10.5; target=components.togglebutton.root.sm.paddingRight; targetValue=14 // TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonBg; light=#e2e2e4; dark=#404348; target=components.togglebutton.colorScheme.root.disabledBackground; targetValue=#e2e2e4 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-4xl; value=31.5 -// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-2xl; value=21; target=components.togglebutton.extend.iconSize.lg; targetValue=24 -// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.togglebutton.extend.iconSize.md; targetValue=20 -// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.togglebutton.extend.iconSize.sm; targetValue=16 // TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonTextColor; light=#85888e; dark=#f0f0f1; target=components.togglebutton.colorScheme.root.disabledColor; targetValue=#85888e -// TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-sm; value=12.25; target=components.togglebutton.root.sm.fontSize; targetValue=14 // TODO(tokens-migration): reason=missing; legacy=theme.Button.Common.buttonPaddingLeftRight; value=14 const toggleStyles = StyleSheet.create( - ({ components, theme, spacing, border, fonts, typography }) => ({ + ({ primitive, components, theme, spacing, border, fonts }) => ({ container: { alignSelf: 'flex-start', borderRadius: border.Radius['rounded-full'], @@ -242,20 +237,20 @@ const toggleStyles = StyleSheet.create( variants: { size: { xlarge: { - width: typography.Size['text-4xl'], - height: typography.Size['text-4xl'], + width: primitive.fonts.fontSize[700], + height: primitive.fonts.fontSize[700], }, large: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], + width: primitive.fonts.fontSize[600], + height: primitive.fonts.fontSize[600], }, base: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: primitive.fonts.fontSize[500], + height: primitive.fonts.fontSize[500], }, small: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], }, }, checked: { @@ -289,10 +284,10 @@ const toggleStyles = StyleSheet.create( 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'] }, + xlarge: { fontSize: primitive.fonts.fontSize[600] }, + large: { fontSize: primitive.fonts.fontSize[500] }, + base: { fontSize: primitive.fonts.fontSize[300] }, + small: { fontSize: primitive.fonts.fontSize[100] }, }, checked: { true: { diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index dfe30cd6..8249bb79 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -41,11 +41,11 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa > ({ - container: { flexDirection: 'row', alignItems: 'center' }, - text: { - flexShrink: 1, - fontSize: typography.Size['text-sm'], - includeFontPadding: false, - verticalAlign: 'middle', - color: typography.Color.Service['text-info'], - fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, - }, - underlined: { textDecorationLine: 'underline' }, - base: { - fontSize: typography.Size['text-base'], - lineHeight: undefined, - letterSpacing: 0, - }, - visited: { color: typography.Color.Service['text-help'] }, - icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, - iconBase: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], - }, - leftIconContainer: { paddingRight: spacing.Padding['p-2'] }, - rightIconContainer: { paddingLeft: spacing.Padding['p-2'] }, -})) +const styles = StyleSheet.create( + ({ primitive, spacing, typography, fonts }) => ({ + container: { flexDirection: 'row', alignItems: 'center' }, + text: { + flexShrink: 1, + fontSize: primitive.fonts.fontSize[200], + includeFontPadding: false, + verticalAlign: 'middle', + color: typography.Color.Service['text-info'], + fontFamily: fonts.secondary, + lineHeight: 15, + letterSpacing: -0.25, + }, + underlined: { textDecorationLine: 'underline' }, + base: { + fontSize: primitive.fonts.fontSize[300], + lineHeight: undefined, + letterSpacing: 0, + }, + visited: { color: typography.Color.Service['text-help'] }, + icon: { + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], + }, + iconBase: { + width: primitive.fonts.fontSize[500], + height: primitive.fonts.fontSize[500], + }, + leftIconContainer: { paddingRight: spacing.Padding['p-2'] }, + rightIconContainer: { paddingLeft: spacing.Padding['p-2'] }, + }) +) export const AnchorTestId = { root: 'Anchor', diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index 61b1dfc0..21389189 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -36,13 +36,11 @@ export const Body = ({ ) } -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 // Осознанный обход слоя components: цвет текста — семантическая роль, и своего // токена у Typography нет (компонент отсутствует в tokens.json). -const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ +const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.secondary, @@ -53,7 +51,7 @@ const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ default: { color: semantic.colorScheme.color.fg.default }, primary: { color: semantic.colorScheme.color.fg.brand.default }, secondary: { color: semantic.colorScheme.color.fg.muted }, - base: { fontSize: typography.Size['text-sm'], lineHeight: 18 }, + base: { fontSize: primitive.fonts.fontSize[200], lineHeight: 18 }, paragraph: { lineHeight: 24 }, paragraphBase: { lineHeight: 21 }, disabled: { opacity: 0.6 }, diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 148a39cb..865e72e8 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -58,29 +58,25 @@ export const Caption = ({ const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' } // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-1; value=3.5 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 // Осознанный обход слоя components: цвет текста — семантическая роль, и своего // токена у Typography нет (компонент отсутствует в tokens.json). -const styles = StyleSheet.create( - ({ semantic, spacing, typography, fonts }) => ({ - text: { - fontSize: typography.Size['text-sm'], - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, - }, - textWithIcon: { flexShrink: 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: 0.6 }, - withIconContainer: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, - icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, - }) -) +const styles = StyleSheet.create(({ primitive, semantic, spacing, fonts }) => ({ + text: { + fontSize: primitive.fonts.fontSize[200], + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.secondary, + lineHeight: 15, + letterSpacing: -0.25, + }, + textWithIcon: { flexShrink: 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: 0.6 }, + withIconContainer: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, + icon: { + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], + }, +})) diff --git a/src/components/Typography/Service.tsx b/src/components/Typography/Service.tsx index 78ea369e..aaee6ccf 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -85,34 +85,39 @@ export const Service = ({ ) } -const styles = StyleSheet.create(({ typography, spacing, fonts }) => ({ - iconBase: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], - }, - icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, +const styles = StyleSheet.create( + ({ primitive, typography, spacing, fonts }) => ({ + iconBase: { + width: primitive.fonts.fontSize[500], + height: primitive.fonts.fontSize[500], + }, + icon: { + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], + }, - containerBase: { flexDirection: 'row', gap: spacing.Gap['gap-2'] }, - container: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, + containerBase: { flexDirection: 'row', gap: spacing.Gap['gap-2'] }, + container: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, - textCommon: { - includeFontPadding: false, - verticalAlign: 'middle', - flexShrink: 1, - fontWeight: 400, - fontSize: typography.Size['text-sm'], - fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, - }, - textBase: { lineHeight: undefined, fontSize: typography.Size['text-base'] }, + textCommon: { + includeFontPadding: false, + verticalAlign: 'middle', + flexShrink: 1, + fontWeight: 400, + fontSize: primitive.fonts.fontSize[200], + fontFamily: fonts.secondary, + lineHeight: 15, + letterSpacing: -0.25, + }, + textBase: { + lineHeight: undefined, + fontSize: primitive.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: 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'] }, + }) +) diff --git a/src/components/Typography/Subtitle.tsx b/src/components/Typography/Subtitle.tsx index 7e35844c..c3666586 100644 --- a/src/components/Typography/Subtitle.tsx +++ b/src/components/Typography/Subtitle.tsx @@ -30,19 +30,17 @@ export const Subtitle = memo( ) ) -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xs; value=10.5 // Осознанный обход слоя components: цвет текста — семантическая роль, и своего // токена у Typography нет (компонент отсутствует в tokens.json). -const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ +const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { - fontSize: typography.Size['text-xs'], + fontSize: primitive.fonts.fontSize[100], fontWeight: 700, textTransform: 'uppercase', fontFamily: fonts.secondary, lineHeight: 15, }, - base: { lineHeight: 18, fontSize: typography.Size['text-sm'] }, + base: { lineHeight: 18, fontSize: primitive.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 bc186e09..71222688 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -10,18 +10,9 @@ export const Title = ({ level, style, ...other }: TitleProps) => ( ) -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-2xl; value=21 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-3xl; value=26.25 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-4xl; value=31.5 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-5xl; value=42 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-base; value=14 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-lg; value=15.75 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-sm; value=12.25 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xl; value=17.5 -// TODO(tokens-migration): reason=missing; legacy=typography.Size.text-xs; value=10.5 // Осознанный обход слоя components: цвет текста — семантическая роль, и своего // токена у Typography нет (компонент отсутствует в tokens.json). -const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ +const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { color: semantic.colorScheme.color.fg.default, fontFamily: fonts.primary, @@ -29,13 +20,13 @@ const styles = StyleSheet.create(({ semantic, typography, fonts }) => ({ 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: primitive.fonts.fontSize[750] }, + d2: { fontSize: primitive.fonts.fontSize[700] }, + d3: { fontSize: primitive.fonts.fontSize[650] }, + h1: { fontSize: primitive.fonts.fontSize[600] }, + h2: { fontSize: primitive.fonts.fontSize[500] }, + h3: { fontSize: primitive.fonts.fontSize[400] }, + h4: { fontSize: primitive.fonts.fontSize[300] }, + h5: { fontSize: primitive.fonts.fontSize[100] }, + h6: { fontSize: primitive.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..1b73bbd8 100644 --- a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -20,7 +20,7 @@ exports[`Body component tests default props 1`] = ` "color": "#1e76cd", "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, "letterSpacing": -0.25, "lineHeight": 15, @@ -89,11 +89,11 @@ exports[`Body component tests левая иконка, base, visited, testID = C > Date: Mon, 3 Aug 2026 17:24:49 +0800 Subject: [PATCH 35/47] =?UTF-8?q?feat(tokens):=20=D0=B8=D0=BD=D1=82=D0=B5?= =?UTF-8?q?=D1=80=D0=BB=D0=B8=D0=BD=D1=8C=D1=8F=D0=B6,=20=D1=82=D1=80?= =?UTF-8?q?=D0=B5=D0=BA=D0=B8=D0=BD=D0=B3=20=D0=B8=20=D0=BD=D0=B0=D1=87?= =?UTF-8?q?=D0=B5=D1=80=D1=82=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BF=D0=B5=D1=80?= =?UTF-8?q?=D0=B5=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B8=D0=BC=D0=B8=D1=82=D0=B8=D0=B2=D1=8B=20=D1=88?= =?UTF-8?q?=D1=80=D0=B8=D1=84=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Accordion/Accordion.tsx | 74 +- src/components/Button/utils/ButtonLabel.tsx | 2 +- .../__snapshots__/Divider.test.tsx.snap | 4 +- .../Input/InputOtp/InputOtpItem.tsx | 2 +- .../__snapshots__/InputOtp.test.tsx.snap | 672 +++++++++--------- .../__snapshots__/ListBase.test.tsx.snap | 26 +- .../MenuItemTemplate.test.tsx.snap | 44 +- .../SelectButton/SelectButtonItem.tsx | 6 +- src/components/Timer/TimerFlip.tsx | 2 +- src/components/ToggleButton/ToggleButton.tsx | 2 +- .../__snapshots__/ToggleButton.test.tsx.snap | 6 +- src/components/Typography/Anchor.tsx | 6 +- src/components/Typography/Body.tsx | 18 +- src/components/Typography/Caption.tsx | 4 +- src/components/Typography/Service.tsx | 6 +- src/components/Typography/Subtitle.tsx | 9 +- src/components/Typography/Title.tsx | 2 +- .../__snapshots__/Anchor.test.tsx.snap | 16 +- .../__snapshots__/Body.test.tsx.snap | 242 +++---- .../__snapshots__/Caption.test.tsx.snap | 52 +- .../__snapshots__/Service.test.tsx.snap | 160 ++--- .../__snapshots__/Subtitle.test.tsx.snap | 32 +- src/theme/commonTheme.ts | 11 +- src/theme/types.ts | 15 +- 24 files changed, 723 insertions(+), 690 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 8c4de7d3..fd8e078e 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -160,39 +160,41 @@ export const AccordionTestIds = { } // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-4; value=14 -const styles = StyleSheet.create(({ components, spacing, fonts }) => ({ - component: { width: '100%' }, - header: { - paddingVertical: spacing.Padding['p-4'], - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.accordion.extend.extHeader.gap; targetValue=8 - gap: spacing.Gap['gap-2'], - flexDirection: 'row', - alignItems: 'center', - backgroundColor: components.accordion.colorScheme.header.background, - }, - icon: { width: 17.5, height: 17.5 }, - title: { - fontSize: 15.75, - includeFontPadding: false, - verticalAlign: 'middle', - fontWeight: 700, - color: components.accordion.header.color, - fontFamily: fonts.secondary, - }, - contentAnimated: { overflow: 'hidden' }, - contentWrapper: { - position: 'absolute', - width: '100%', - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-7; value=24.5; target=components.accordion.content.paddingLeft; targetValue=24 - paddingLeft: spacing.Padding['p-7'], - paddingTop: spacing.Padding['p-0'], - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-0; value=0; target=components.accordion.content.paddingRight; targetValue=24 - paddingRight: spacing.Padding['p-0'], - paddingBottom: spacing.Padding['p-4'], - }, - separator: { - borderTopColor: components.accordion.panel.borderColor, - borderTopWidth: 1, - }, - disabled: { mixBlendMode: 'luminosity', opacity: 0.6 }, -})) +const styles = StyleSheet.create( + ({ primitive, components, spacing, fonts }) => ({ + component: { width: '100%' }, + header: { + paddingVertical: spacing.Padding['p-4'], + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.accordion.extend.extHeader.gap; targetValue=8 + gap: spacing.Gap['gap-2'], + flexDirection: 'row', + alignItems: 'center', + backgroundColor: components.accordion.colorScheme.header.background, + }, + icon: { width: 17.5, height: 17.5 }, + title: { + fontSize: 15.75, + includeFontPadding: false, + verticalAlign: 'middle', + fontWeight: primitive.fonts.fontWeight.bold, + color: components.accordion.header.color, + fontFamily: fonts.secondary, + }, + contentAnimated: { overflow: 'hidden' }, + contentWrapper: { + position: 'absolute', + width: '100%', + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-7; value=24.5; target=components.accordion.content.paddingLeft; targetValue=24 + paddingLeft: spacing.Padding['p-7'], + paddingTop: spacing.Padding['p-0'], + // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-0; value=0; target=components.accordion.content.paddingRight; targetValue=24 + paddingRight: spacing.Padding['p-0'], + paddingBottom: spacing.Padding['p-4'], + }, + separator: { + borderTopColor: components.accordion.panel.borderColor, + borderTopWidth: 1, + }, + disabled: { mixBlendMode: 'luminosity', opacity: 0.6 }, + }) +) diff --git a/src/components/Button/utils/ButtonLabel.tsx b/src/components/Button/utils/ButtonLabel.tsx index de620d30..1d1bb8c6 100644 --- a/src/components/Button/utils/ButtonLabel.tsx +++ b/src/components/Button/utils/ButtonLabel.tsx @@ -52,7 +52,7 @@ export const ButtonLabel = genericMemo(ButtonLabelComponent) const buttonLabelStyles = StyleSheet.create( ({ primitive, components: { button }, typography, fonts }) => ({ label: { - fontWeight: 600, + fontWeight: primitive.fonts.fontWeight.demibold, includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.primary, diff --git a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap index d75526fb..63a100b3 100644 --- a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap +++ b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap @@ -119,7 +119,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "horizontal", "sho "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -372,7 +372,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index 10902d42..3d140a20 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -79,7 +79,7 @@ const styles = StyleSheet.create(({ primitive, components, fonts }) => ({ text: { fontSize: primitive.fonts.fontSize[600], fontFamily: fonts.primary, - fontWeight: '400', + fontWeight: primitive.fonts.fontWeight.regular, color: components.inputtext.root.color, includeFontPadding: false, }, 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 43d201be..4fd336cf 100644 --- a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap +++ b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap @@ -65,7 +65,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -96,7 +96,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -190,7 +190,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -223,7 +223,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -317,7 +317,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -350,7 +350,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -448,7 +448,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -481,7 +481,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -577,7 +577,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -612,7 +612,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -708,7 +708,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -743,7 +743,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -842,7 +842,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -876,7 +876,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -973,7 +973,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1009,7 +1009,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1106,7 +1106,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1142,7 +1142,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1243,7 +1243,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1279,7 +1279,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1378,7 +1378,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1416,7 +1416,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1515,7 +1515,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1553,7 +1553,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1651,7 +1651,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1684,7 +1684,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1780,7 +1780,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1815,7 +1815,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1911,7 +1911,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -1946,7 +1946,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2046,7 +2046,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2081,7 +2081,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2179,7 +2179,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2216,7 +2216,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2314,7 +2314,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2351,7 +2351,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2452,7 +2452,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2488,7 +2488,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2587,7 +2587,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2625,7 +2625,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2724,7 +2724,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2762,7 +2762,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2865,7 +2865,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -2903,7 +2903,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3004,7 +3004,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3044,7 +3044,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3145,7 +3145,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3185,7 +3185,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3281,7 +3281,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3312,7 +3312,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3343,7 +3343,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3374,7 +3374,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3468,7 +3468,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3501,7 +3501,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3532,7 +3532,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3563,7 +3563,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3657,7 +3657,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3690,7 +3690,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3723,7 +3723,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3754,7 +3754,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3850,7 +3850,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3883,7 +3883,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3916,7 +3916,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -3949,7 +3949,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4045,7 +4045,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4080,7 +4080,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4113,7 +4113,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4146,7 +4146,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4242,7 +4242,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4277,7 +4277,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4312,7 +4312,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4345,7 +4345,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4442,7 +4442,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4476,7 +4476,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4510,7 +4510,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4544,7 +4544,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4641,7 +4641,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4677,7 +4677,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4711,7 +4711,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4745,7 +4745,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4842,7 +4842,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4878,7 +4878,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4914,7 +4914,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -4948,7 +4948,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5047,7 +5047,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5083,7 +5083,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5119,7 +5119,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5155,7 +5155,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5254,7 +5254,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5292,7 +5292,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5328,7 +5328,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5364,7 +5364,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5463,7 +5463,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5501,7 +5501,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5539,7 +5539,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5575,7 +5575,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5671,7 +5671,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5704,7 +5704,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5737,7 +5737,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5770,7 +5770,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5866,7 +5866,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5901,7 +5901,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5934,7 +5934,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -5967,7 +5967,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6063,7 +6063,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6098,7 +6098,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6133,7 +6133,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6166,7 +6166,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6264,7 +6264,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6299,7 +6299,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6334,7 +6334,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6369,7 +6369,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6467,7 +6467,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6504,7 +6504,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6539,7 +6539,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6574,7 +6574,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6672,7 +6672,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6709,7 +6709,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6746,7 +6746,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6781,7 +6781,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6880,7 +6880,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6916,7 +6916,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6952,7 +6952,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -6988,7 +6988,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7087,7 +7087,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7125,7 +7125,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7161,7 +7161,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7197,7 +7197,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7296,7 +7296,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7334,7 +7334,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7372,7 +7372,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7408,7 +7408,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7509,7 +7509,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7547,7 +7547,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7585,7 +7585,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7623,7 +7623,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7724,7 +7724,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7764,7 +7764,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7802,7 +7802,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7840,7 +7840,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7941,7 +7941,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -7981,7 +7981,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8021,7 +8021,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8059,7 +8059,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8153,7 +8153,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8184,7 +8184,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8215,7 +8215,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8246,7 +8246,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8277,7 +8277,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8308,7 +8308,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8339,7 +8339,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8370,7 +8370,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8464,7 +8464,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8497,7 +8497,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8528,7 +8528,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8559,7 +8559,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8590,7 +8590,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8621,7 +8621,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8652,7 +8652,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8683,7 +8683,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8777,7 +8777,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8810,7 +8810,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8843,7 +8843,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8874,7 +8874,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8905,7 +8905,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8936,7 +8936,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8967,7 +8967,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -8998,7 +8998,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9094,7 +9094,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9127,7 +9127,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9160,7 +9160,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9193,7 +9193,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9226,7 +9226,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9259,7 +9259,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9292,7 +9292,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9325,7 +9325,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9421,7 +9421,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9456,7 +9456,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9489,7 +9489,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9522,7 +9522,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9555,7 +9555,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9588,7 +9588,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9621,7 +9621,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9654,7 +9654,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9750,7 +9750,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9785,7 +9785,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9820,7 +9820,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9853,7 +9853,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9886,7 +9886,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9919,7 +9919,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9952,7 +9952,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -9985,7 +9985,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10082,7 +10082,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10116,7 +10116,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10150,7 +10150,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10184,7 +10184,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10218,7 +10218,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10252,7 +10252,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10286,7 +10286,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10320,7 +10320,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10417,7 +10417,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10453,7 +10453,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10487,7 +10487,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10521,7 +10521,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10555,7 +10555,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10589,7 +10589,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10623,7 +10623,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10657,7 +10657,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10754,7 +10754,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10790,7 +10790,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10826,7 +10826,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10860,7 +10860,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10894,7 +10894,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10928,7 +10928,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10962,7 +10962,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -10996,7 +10996,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11095,7 +11095,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11131,7 +11131,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11167,7 +11167,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11203,7 +11203,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11239,7 +11239,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11275,7 +11275,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11311,7 +11311,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11347,7 +11347,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11446,7 +11446,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11484,7 +11484,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11520,7 +11520,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11556,7 +11556,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11592,7 +11592,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11628,7 +11628,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11664,7 +11664,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11700,7 +11700,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11799,7 +11799,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11837,7 +11837,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11875,7 +11875,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11911,7 +11911,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11947,7 +11947,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -11983,7 +11983,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12019,7 +12019,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12055,7 +12055,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12151,7 +12151,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12184,7 +12184,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12217,7 +12217,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12250,7 +12250,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12283,7 +12283,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12316,7 +12316,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12349,7 +12349,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12382,7 +12382,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12478,7 +12478,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12513,7 +12513,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12546,7 +12546,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12579,7 +12579,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12612,7 +12612,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12645,7 +12645,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12678,7 +12678,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12711,7 +12711,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12807,7 +12807,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12842,7 +12842,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12877,7 +12877,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12910,7 +12910,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12943,7 +12943,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -12976,7 +12976,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13009,7 +13009,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13042,7 +13042,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13140,7 +13140,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13175,7 +13175,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13210,7 +13210,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13245,7 +13245,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13280,7 +13280,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13315,7 +13315,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13350,7 +13350,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13385,7 +13385,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13483,7 +13483,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13520,7 +13520,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13555,7 +13555,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13590,7 +13590,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13625,7 +13625,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13660,7 +13660,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13695,7 +13695,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13730,7 +13730,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13828,7 +13828,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13865,7 +13865,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13902,7 +13902,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13937,7 +13937,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -13972,7 +13972,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14007,7 +14007,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14042,7 +14042,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14077,7 +14077,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14176,7 +14176,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14212,7 +14212,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14248,7 +14248,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14284,7 +14284,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14320,7 +14320,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14356,7 +14356,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14392,7 +14392,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14428,7 +14428,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14527,7 +14527,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14565,7 +14565,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14601,7 +14601,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14637,7 +14637,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14673,7 +14673,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14709,7 +14709,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14745,7 +14745,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14781,7 +14781,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14880,7 +14880,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14918,7 +14918,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14956,7 +14956,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -14992,7 +14992,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15028,7 +15028,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15064,7 +15064,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15100,7 +15100,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15136,7 +15136,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15237,7 +15237,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15275,7 +15275,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15313,7 +15313,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15351,7 +15351,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15389,7 +15389,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15427,7 +15427,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15465,7 +15465,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15503,7 +15503,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15604,7 +15604,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15644,7 +15644,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15682,7 +15682,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15720,7 +15720,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15758,7 +15758,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15796,7 +15796,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15834,7 +15834,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15872,7 +15872,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -15973,7 +15973,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -16013,7 +16013,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -16053,7 +16053,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -16091,7 +16091,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -16129,7 +16129,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -16167,7 +16167,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -16205,7 +16205,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } @@ -16243,7 +16243,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "color": "#2b2e33", "fontFamily": "TT Fellows", "fontSize": 24, - "fontWeight": "400", + "fontWeight": 400, "includeFontPadding": false, } } 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 86dfcf55..38df4bc0 100644 --- a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap +++ b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap @@ -283,7 +283,7 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -311,7 +311,7 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -337,8 +337,8 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -838,7 +838,7 @@ exports[`ListBase tests ListBase full disabled 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -866,7 +866,7 @@ exports[`ListBase tests ListBase full disabled 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -892,8 +892,8 @@ exports[`ListBase tests ListBase full disabled 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -1400,7 +1400,7 @@ exports[`ListBase tests ListBase maximal config 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -1428,7 +1428,7 @@ exports[`ListBase tests ListBase maximal config 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1454,8 +1454,8 @@ exports[`ListBase tests ListBase maximal config 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -1762,7 +1762,7 @@ exports[`ListBase tests ListBase minimal config 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { 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 a49ff181..c6aeec04 100644 --- a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap +++ b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap @@ -244,7 +244,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -255,7 +255,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, undefined, undefined, @@ -273,8 +273,8 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -611,7 +611,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -622,7 +622,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, undefined, undefined, @@ -813,7 +813,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -824,7 +824,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, undefined, undefined, @@ -842,8 +842,8 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -1151,7 +1151,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1162,7 +1162,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, undefined, undefined, @@ -1266,7 +1266,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1277,7 +1277,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, undefined, undefined, @@ -1590,7 +1590,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1601,7 +1601,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, undefined, undefined, @@ -1853,7 +1853,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1864,7 +1864,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, undefined, undefined, @@ -1971,7 +1971,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1982,7 +1982,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, undefined, undefined, @@ -2092,7 +2092,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -2103,7 +2103,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, undefined, undefined, diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index 0a1bab52..681c8480 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -200,7 +200,11 @@ const styles = StyleSheet.create( height: primitive.fonts.fontSize[600], }, iconXLarge: { width: 28, height: 28 }, - label: { flexShrink: 1, fontWeight: 600, fontFamily: fonts.primary }, + label: { + flexShrink: 1, + fontWeight: primitive.fonts.fontWeight.demibold, + fontFamily: fonts.primary, + }, labelSmall: { fontSize: primitive.fonts.fontSize[100] }, labelBase: { fontSize: primitive.fonts.fontSize[300] }, labelLarge: { fontSize: primitive.fonts.fontSize[500] }, diff --git a/src/components/Timer/TimerFlip.tsx b/src/components/Timer/TimerFlip.tsx index 3cc83dd8..7cc00e56 100644 --- a/src/components/Timer/TimerFlip.tsx +++ b/src/components/Timer/TimerFlip.tsx @@ -82,7 +82,7 @@ const styles = StyleSheet.create(({ primitive, typography, fonts }) => ({ }, text: { fontSize: primitive.fonts.fontSize[300], - fontWeight: 700, + fontWeight: primitive.fonts.fontWeight.bold, includeFontPadding: false, verticalAlign: 'middle', color: typography.Color.Surface['text-surface-0'], diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index a060b493..ba0bad63 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -279,7 +279,7 @@ const toggleStyles = StyleSheet.create( label: { flexShrink: 1, fontFamily: fonts.primary, - fontWeight: '600', + fontWeight: primitive.fonts.fontWeight.demibold, includeFontPadding: false, verticalAlign: 'middle', variants: { diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 8249bb79..6b639aee 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -148,7 +148,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "flexShrink": 1, "fontFamily": "TT Fellows", "fontSize": 12, - "fontWeight": "600", + "fontWeight": 600, "includeFontPadding": false, "verticalAlign": "middle", } @@ -207,7 +207,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "flexShrink": 1, "fontFamily": "TT Fellows", "fontSize": 12, - "fontWeight": "600", + "fontWeight": 600, "includeFontPadding": false, "verticalAlign": "middle", } @@ -621,7 +621,7 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal "flexShrink": 1, "fontFamily": "TT Fellows", "fontSize": 20, - "fontWeight": "600", + "fontWeight": 600, "includeFontPadding": false, "verticalAlign": "middle", } diff --git a/src/components/Typography/Anchor.tsx b/src/components/Typography/Anchor.tsx index 6813ca06..326d4424 100644 --- a/src/components/Typography/Anchor.tsx +++ b/src/components/Typography/Anchor.tsx @@ -143,14 +143,14 @@ const styles = StyleSheet.create( verticalAlign: 'middle', color: typography.Color.Service['text-info'], fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + lineHeight: primitive.fonts.lineHeight[300], + letterSpacing: primitive.fonts.letterSpacing[200], }, underlined: { textDecorationLine: 'underline' }, base: { fontSize: primitive.fonts.fontSize[300], lineHeight: undefined, - letterSpacing: 0, + letterSpacing: primitive.fonts.letterSpacing[500], }, visited: { color: typography.Color.Service['text-help'] }, icon: { diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index 21389189..440c8ac5 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -44,15 +44,21 @@ const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.secondary, - lineHeight: 20, + lineHeight: primitive.fonts.lineHeight[450], + }, + regular: { fontWeight: primitive.fonts.fontWeight.regular }, + bold: { + fontWeight: primitive.fonts.fontWeight.bold, + letterSpacing: primitive.fonts.letterSpacing[400], }, - regular: { fontWeight: 400 }, - bold: { fontWeight: 700, letterSpacing: -0.5 }, default: { color: semantic.colorScheme.color.fg.default }, primary: { color: semantic.colorScheme.color.fg.brand.default }, secondary: { color: semantic.colorScheme.color.fg.muted }, - base: { fontSize: primitive.fonts.fontSize[200], lineHeight: 18 }, - paragraph: { lineHeight: 24 }, - paragraphBase: { lineHeight: 21 }, + base: { + fontSize: primitive.fonts.fontSize[200], + lineHeight: primitive.fonts.lineHeight[400], + }, + paragraph: { lineHeight: primitive.fonts.lineHeight[600] }, + paragraphBase: { lineHeight: primitive.fonts.lineHeight[500] }, disabled: { opacity: 0.6 }, })) diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 865e72e8..25a0e0ac 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -66,8 +66,8 @@ const styles = StyleSheet.create(({ primitive, semantic, spacing, fonts }) => ({ includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + lineHeight: primitive.fonts.lineHeight[300], + letterSpacing: primitive.fonts.letterSpacing[200], }, textWithIcon: { flexShrink: 1 }, default: { color: semantic.colorScheme.color.fg.default }, diff --git a/src/components/Typography/Service.tsx b/src/components/Typography/Service.tsx index aaee6ccf..6eeb8a97 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -103,11 +103,11 @@ const styles = StyleSheet.create( includeFontPadding: false, verticalAlign: 'middle', flexShrink: 1, - fontWeight: 400, + fontWeight: primitive.fonts.fontWeight.regular, fontSize: primitive.fonts.fontSize[200], fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + lineHeight: primitive.fonts.lineHeight[300], + letterSpacing: primitive.fonts.letterSpacing[200], }, textBase: { lineHeight: undefined, diff --git a/src/components/Typography/Subtitle.tsx b/src/components/Typography/Subtitle.tsx index c3666586..b2234cdb 100644 --- a/src/components/Typography/Subtitle.tsx +++ b/src/components/Typography/Subtitle.tsx @@ -35,12 +35,15 @@ export const Subtitle = memo( const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { fontSize: primitive.fonts.fontSize[100], - fontWeight: 700, + fontWeight: primitive.fonts.fontWeight.bold, textTransform: 'uppercase', fontFamily: fonts.secondary, - lineHeight: 15, + lineHeight: primitive.fonts.lineHeight[300], + }, + base: { + lineHeight: primitive.fonts.lineHeight[400], + fontSize: primitive.fonts.fontSize[200], }, - base: { lineHeight: 18, fontSize: primitive.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 71222688..d78e548e 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -16,7 +16,7 @@ const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { color: semantic.colorScheme.color.fg.default, fontFamily: fonts.primary, - fontWeight: 700, + fontWeight: primitive.fonts.fontWeight.bold, includeFontPadding: false, verticalAlign: 'middle', }, diff --git a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap index 1b73bbd8..b6f02517 100644 --- a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -22,8 +22,8 @@ exports[`Body component tests default props 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -225,8 +225,8 @@ exports[`Body component tests левая иконка, base, visited, testID = C "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -435,8 +435,8 @@ exports[`Body component tests левая иконка, правая иконка "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -632,8 +632,8 @@ exports[`Body component tests правая иконка, noWrapper 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, diff --git a/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap index 2de3cc6f..fa74ce09 100644 --- a/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap @@ -8,12 +8,12 @@ exports[`Body component tests base = false, color = default, disabled = false, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#2b2e33", @@ -38,7 +38,7 @@ exports[`Body component tests base = false, color = default, disabled = false, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -67,19 +67,19 @@ exports[`Body component tests base = false, color = default, disabled = false, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#2b2e33", }, false, { - "lineHeight": 24, + "lineHeight": 28, }, false, undefined, @@ -99,7 +99,7 @@ exports[`Body component tests base = false, color = default, disabled = false, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -110,7 +110,7 @@ exports[`Body component tests base = false, color = default, disabled = false, p }, false, { - "lineHeight": 24, + "lineHeight": 28, }, false, undefined, @@ -130,12 +130,12 @@ exports[`Body component tests base = false, color = default, disabled = true, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#2b2e33", @@ -162,7 +162,7 @@ exports[`Body component tests base = false, color = default, disabled = true, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -193,19 +193,19 @@ exports[`Body component tests base = false, color = default, disabled = true, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#2b2e33", }, false, { - "lineHeight": 24, + "lineHeight": 28, }, { "opacity": 0.6, @@ -227,7 +227,7 @@ exports[`Body component tests base = false, color = default, disabled = true, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -238,7 +238,7 @@ exports[`Body component tests base = false, color = default, disabled = true, pa }, false, { - "lineHeight": 24, + "lineHeight": 28, }, { "opacity": 0.6, @@ -260,12 +260,12 @@ exports[`Body component tests base = false, color = primary, disabled = false, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#44e858", @@ -290,7 +290,7 @@ exports[`Body component tests base = false, color = primary, disabled = false, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -319,19 +319,19 @@ exports[`Body component tests base = false, color = primary, disabled = false, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#44e858", }, false, { - "lineHeight": 24, + "lineHeight": 28, }, false, undefined, @@ -351,7 +351,7 @@ exports[`Body component tests base = false, color = primary, disabled = false, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -362,7 +362,7 @@ exports[`Body component tests base = false, color = primary, disabled = false, p }, false, { - "lineHeight": 24, + "lineHeight": 28, }, false, undefined, @@ -382,12 +382,12 @@ exports[`Body component tests base = false, color = primary, disabled = true, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#44e858", @@ -414,7 +414,7 @@ exports[`Body component tests base = false, color = primary, disabled = true, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -445,19 +445,19 @@ exports[`Body component tests base = false, color = primary, disabled = true, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#44e858", }, false, { - "lineHeight": 24, + "lineHeight": 28, }, { "opacity": 0.6, @@ -479,7 +479,7 @@ exports[`Body component tests base = false, color = primary, disabled = true, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -490,7 +490,7 @@ exports[`Body component tests base = false, color = primary, disabled = true, pa }, false, { - "lineHeight": 24, + "lineHeight": 28, }, { "opacity": 0.6, @@ -512,12 +512,12 @@ exports[`Body component tests base = false, color = secondary, disabled = false, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#85888e", @@ -542,7 +542,7 @@ exports[`Body component tests base = false, color = secondary, disabled = false, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -571,19 +571,19 @@ exports[`Body component tests base = false, color = secondary, disabled = false, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#85888e", }, false, { - "lineHeight": 24, + "lineHeight": 28, }, false, undefined, @@ -603,7 +603,7 @@ exports[`Body component tests base = false, color = secondary, disabled = false, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -614,7 +614,7 @@ exports[`Body component tests base = false, color = secondary, disabled = false, }, false, { - "lineHeight": 24, + "lineHeight": 28, }, false, undefined, @@ -634,12 +634,12 @@ exports[`Body component tests base = false, color = secondary, disabled = true, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#85888e", @@ -666,7 +666,7 @@ exports[`Body component tests base = false, color = secondary, disabled = true, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -697,19 +697,19 @@ exports[`Body component tests base = false, color = secondary, disabled = true, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#85888e", }, false, { - "lineHeight": 24, + "lineHeight": 28, }, { "opacity": 0.6, @@ -731,7 +731,7 @@ exports[`Body component tests base = false, color = secondary, disabled = true, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -742,7 +742,7 @@ exports[`Body component tests base = false, color = secondary, disabled = true, }, false, { - "lineHeight": 24, + "lineHeight": 28, }, { "opacity": 0.6, @@ -764,19 +764,19 @@ exports[`Body component tests base = true, color = default, disabled = false, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#2b2e33", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, false, @@ -797,7 +797,7 @@ exports[`Body component tests base = true, color = default, disabled = false, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -808,7 +808,7 @@ exports[`Body component tests base = true, color = default, disabled = false, pa }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, false, @@ -829,22 +829,22 @@ exports[`Body component tests base = true, color = default, disabled = false, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#2b2e33", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, false, undefined, @@ -864,7 +864,7 @@ exports[`Body component tests base = true, color = default, disabled = false, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -875,10 +875,10 @@ exports[`Body component tests base = true, color = default, disabled = false, pa }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, false, undefined, @@ -898,19 +898,19 @@ exports[`Body component tests base = true, color = default, disabled = true, par "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#2b2e33", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, { @@ -933,7 +933,7 @@ exports[`Body component tests base = true, color = default, disabled = true, par "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -944,7 +944,7 @@ exports[`Body component tests base = true, color = default, disabled = true, par }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, { @@ -967,22 +967,22 @@ exports[`Body component tests base = true, color = default, disabled = true, par "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#2b2e33", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, { "opacity": 0.6, @@ -1004,7 +1004,7 @@ exports[`Body component tests base = true, color = default, disabled = true, par "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1015,10 +1015,10 @@ exports[`Body component tests base = true, color = default, disabled = true, par }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, { "opacity": 0.6, @@ -1040,19 +1040,19 @@ exports[`Body component tests base = true, color = primary, disabled = false, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#44e858", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, false, @@ -1073,7 +1073,7 @@ exports[`Body component tests base = true, color = primary, disabled = false, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1084,7 +1084,7 @@ exports[`Body component tests base = true, color = primary, disabled = false, pa }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, false, @@ -1105,22 +1105,22 @@ exports[`Body component tests base = true, color = primary, disabled = false, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#44e858", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, false, undefined, @@ -1140,7 +1140,7 @@ exports[`Body component tests base = true, color = primary, disabled = false, pa "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1151,10 +1151,10 @@ exports[`Body component tests base = true, color = primary, disabled = false, pa }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, false, undefined, @@ -1174,19 +1174,19 @@ exports[`Body component tests base = true, color = primary, disabled = true, par "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#44e858", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, { @@ -1209,7 +1209,7 @@ exports[`Body component tests base = true, color = primary, disabled = true, par "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1220,7 +1220,7 @@ exports[`Body component tests base = true, color = primary, disabled = true, par }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, { @@ -1243,22 +1243,22 @@ exports[`Body component tests base = true, color = primary, disabled = true, par "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#44e858", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, { "opacity": 0.6, @@ -1280,7 +1280,7 @@ exports[`Body component tests base = true, color = primary, disabled = true, par "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1291,10 +1291,10 @@ exports[`Body component tests base = true, color = primary, disabled = true, par }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, { "opacity": 0.6, @@ -1316,19 +1316,19 @@ exports[`Body component tests base = true, color = secondary, disabled = false, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#85888e", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, false, @@ -1349,7 +1349,7 @@ exports[`Body component tests base = true, color = secondary, disabled = false, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1360,7 +1360,7 @@ exports[`Body component tests base = true, color = secondary, disabled = false, }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, false, @@ -1381,22 +1381,22 @@ exports[`Body component tests base = true, color = secondary, disabled = false, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#85888e", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, false, undefined, @@ -1416,7 +1416,7 @@ exports[`Body component tests base = true, color = secondary, disabled = false, "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1427,10 +1427,10 @@ exports[`Body component tests base = true, color = secondary, disabled = false, }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, false, undefined, @@ -1450,19 +1450,19 @@ exports[`Body component tests base = true, color = secondary, disabled = true, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#85888e", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, { @@ -1485,7 +1485,7 @@ exports[`Body component tests base = true, color = secondary, disabled = true, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1496,7 +1496,7 @@ exports[`Body component tests base = true, color = secondary, disabled = true, p }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, false, { @@ -1519,22 +1519,22 @@ exports[`Body component tests base = true, color = secondary, disabled = true, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 700, - "letterSpacing": -0.5, + "letterSpacing": -0.48, }, { "color": "#85888e", }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, { "opacity": 0.6, @@ -1556,7 +1556,7 @@ exports[`Body component tests base = true, color = secondary, disabled = true, p "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { @@ -1567,10 +1567,10 @@ exports[`Body component tests base = true, color = secondary, disabled = true, p }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { - "lineHeight": 21, + "lineHeight": 24, }, { "opacity": 0.6, @@ -1592,7 +1592,7 @@ exports[`Body component tests default props 1`] = ` "fontFamily": "Noto Sans", "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { diff --git a/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap index 714646d9..bf651b8e 100644 --- a/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap @@ -8,8 +8,8 @@ exports[`Caption component tests color = default, disabled = false 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -167,8 +167,8 @@ exports[`Caption component tests color = default, disabled = false 2`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -196,8 +196,8 @@ exports[`Caption component tests color = default, disabled = true 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -357,8 +357,8 @@ exports[`Caption component tests color = default, disabled = true 2`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -388,8 +388,8 @@ exports[`Caption component tests color = primary, disabled = false 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -547,8 +547,8 @@ exports[`Caption component tests color = primary, disabled = false 2`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -576,8 +576,8 @@ exports[`Caption component tests color = primary, disabled = true 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -737,8 +737,8 @@ exports[`Caption component tests color = primary, disabled = true 2`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -768,8 +768,8 @@ exports[`Caption component tests color = secondary, disabled = false 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -927,8 +927,8 @@ exports[`Caption component tests color = secondary, disabled = false 2`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -956,8 +956,8 @@ exports[`Caption component tests color = secondary, disabled = true 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -1117,8 +1117,8 @@ exports[`Caption component tests color = secondary, disabled = true 2`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -1148,8 +1148,8 @@ exports[`Caption component tests default props 1`] = ` "fontFamily": "Noto Sans", "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { diff --git a/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap index 2ae48e01..e3e32658 100644 --- a/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap @@ -18,8 +18,8 @@ exports[`Service component tests base = false, showIcon = false, variant = dange "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -52,8 +52,8 @@ exports[`Service component tests base = false, showIcon = false, variant = dange "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -86,8 +86,8 @@ exports[`Service component tests base = false, showIcon = false, variant = help "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -120,8 +120,8 @@ exports[`Service component tests base = false, showIcon = false, variant = help "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -154,8 +154,8 @@ exports[`Service component tests base = false, showIcon = false, variant = info "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -188,8 +188,8 @@ exports[`Service component tests base = false, showIcon = false, variant = info "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -222,8 +222,8 @@ exports[`Service component tests base = false, showIcon = false, variant = succe "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -256,8 +256,8 @@ exports[`Service component tests base = false, showIcon = false, variant = succe "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -290,8 +290,8 @@ exports[`Service component tests base = false, showIcon = false, variant = warni "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -324,8 +324,8 @@ exports[`Service component tests base = false, showIcon = false, variant = warni "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -460,8 +460,8 @@ exports[`Service component tests base = false, showIcon = true, variant = danger "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -711,8 +711,8 @@ exports[`Service component tests base = false, showIcon = true, variant = danger "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -870,8 +870,8 @@ exports[`Service component tests base = false, showIcon = true, variant = help 1 "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -1121,8 +1121,8 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -1280,8 +1280,8 @@ exports[`Service component tests base = false, showIcon = true, variant = info 1 "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -1531,8 +1531,8 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -1667,8 +1667,8 @@ exports[`Service component tests base = false, showIcon = true, variant = succes "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -1918,8 +1918,8 @@ exports[`Service component tests base = false, showIcon = true, variant = succes "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -2077,8 +2077,8 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -2328,8 +2328,8 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -2362,8 +2362,8 @@ exports[`Service component tests base = true, showIcon = false, variant = danger "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2399,8 +2399,8 @@ exports[`Service component tests base = true, showIcon = false, variant = danger "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2436,8 +2436,8 @@ exports[`Service component tests base = true, showIcon = false, variant = help 1 "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2473,8 +2473,8 @@ exports[`Service component tests base = true, showIcon = false, variant = help 2 "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2510,8 +2510,8 @@ exports[`Service component tests base = true, showIcon = false, variant = info 1 "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2547,8 +2547,8 @@ exports[`Service component tests base = true, showIcon = false, variant = info 2 "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2584,8 +2584,8 @@ exports[`Service component tests base = true, showIcon = false, variant = succes "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2621,8 +2621,8 @@ exports[`Service component tests base = true, showIcon = false, variant = succes "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2658,8 +2658,8 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2695,8 +2695,8 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -2834,8 +2834,8 @@ exports[`Service component tests base = true, showIcon = true, variant = danger "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -3088,8 +3088,8 @@ exports[`Service component tests base = true, showIcon = true, variant = danger "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -3250,8 +3250,8 @@ exports[`Service component tests base = true, showIcon = true, variant = help 1` "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -3504,8 +3504,8 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -3666,8 +3666,8 @@ exports[`Service component tests base = true, showIcon = true, variant = info 1` "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -3920,8 +3920,8 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -4059,8 +4059,8 @@ exports[`Service component tests base = true, showIcon = true, variant = success "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -4313,8 +4313,8 @@ exports[`Service component tests base = true, showIcon = true, variant = success "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -4475,8 +4475,8 @@ exports[`Service component tests base = true, showIcon = true, variant = warning "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -4729,8 +4729,8 @@ exports[`Service component tests base = true, showIcon = true, variant = warning "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { diff --git a/src/components/Typography/__tests__/__snapshots__/Subtitle.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Subtitle.test.tsx.snap index 2a094394..e3dae08b 100644 --- a/src/components/Typography/__tests__/__snapshots__/Subtitle.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Subtitle.test.tsx.snap @@ -8,7 +8,7 @@ exports[`Subtitle component tests base = false, color = default 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -34,7 +34,7 @@ exports[`Subtitle component tests base = false, color = primary 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -60,7 +60,7 @@ exports[`Subtitle component tests base = false, color = secondary 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -86,7 +86,7 @@ exports[`Subtitle component tests base = false, color = undefined 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -112,7 +112,7 @@ exports[`Subtitle component tests base = true, color = default 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -120,7 +120,7 @@ exports[`Subtitle component tests base = true, color = default 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { "margin": 10, @@ -141,7 +141,7 @@ exports[`Subtitle component tests base = true, color = primary 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -149,7 +149,7 @@ exports[`Subtitle component tests base = true, color = primary 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { "margin": 10, @@ -170,7 +170,7 @@ exports[`Subtitle component tests base = true, color = secondary 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -178,7 +178,7 @@ exports[`Subtitle component tests base = true, color = secondary 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { "margin": 10, @@ -199,7 +199,7 @@ exports[`Subtitle component tests base = true, color = undefined 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -207,7 +207,7 @@ exports[`Subtitle component tests base = true, color = undefined 1`] = ` }, { "fontSize": 14, - "lineHeight": 18, + "lineHeight": 20, }, { "margin": 10, @@ -228,7 +228,7 @@ exports[`Subtitle component tests base = undefined, color = default 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -254,7 +254,7 @@ exports[`Subtitle component tests base = undefined, color = primary 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -280,7 +280,7 @@ exports[`Subtitle component tests base = undefined, color = secondary 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -306,7 +306,7 @@ exports[`Subtitle component tests base = undefined, color = undefined 1`] = ` "fontFamily": "Noto Sans", "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { diff --git a/src/theme/commonTheme.ts b/src/theme/commonTheme.ts index b17c6929..57f304ab 100644 --- a/src/theme/commonTheme.ts +++ b/src/theme/commonTheme.ts @@ -9,6 +9,11 @@ import sizing from './assets/sizing.json' import spacing from './assets/spacing.json' import typography from './assets/typography.json' import fontTokens from './tokens/fonts.json' +import type { FontPrimitives } from './types' + +// JSON отдаёт fontWeight как number, а TextStyle требует литеральный тип. +// Значения совпадают, различается только их представление в типах. +const fonts = fontTokens as FontPrimitives export const commonTheme = { background, @@ -21,10 +26,10 @@ export const commonTheme = { typography, custom: customCommon, shadow, - primitive: { fonts: fontTokens }, + primitive: { fonts }, // Публичный FontsConfig оперирует ролями primary/secondary, токены — base/heading. fonts: { - primary: fontTokens.fontFamily.heading, - secondary: fontTokens.fontFamily.base, + primary: fonts.fontFamily.heading, + secondary: fonts.fontFamily.base, }, } diff --git a/src/theme/types.ts b/src/theme/types.ts index 02ea187d..05bbdb7d 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -1,3 +1,5 @@ +import type { TextStyle } from 'react-native' + import type { InputSize } from './assets/InputSize' import type { ModalSize } from './assets/ModalSize' import type background from './assets/background.json' @@ -18,7 +20,7 @@ import type lightSemanticTokens from './tokens/semantic/light.json' export interface ThemeType { /** Шрифтовые примитивы из tokens.json: размеры, интерлиньяж, начертания. */ - primitive: { fonts: typeof fontTokens } + primitive: { fonts: FontPrimitives } background: typeof background colors: { primary: typeof primaryColors } border: typeof border @@ -44,6 +46,17 @@ export enum ThemeVariant { Dark = 'Dark', } +/** + * Начертания в токенах — числа, а TextStyle требует литеральный тип, + * поэтому fontWeight переопределяется типом React Native. + */ +export type FontPrimitives = Omit & { + fontWeight: Record< + keyof typeof fontTokens.fontWeight, + TextStyle['fontWeight'] + > +} + export interface FontsConfig { primary: string secondary: string From 94580ba8b6b1b1901453571156c79e6ace60f488 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 17:34:37 +0800 Subject: [PATCH 36/47] =?UTF-8?q?feat(tokens):=2041=20=D0=BE=D0=B1=D1=80?= =?UTF-8?q?=D0=B0=D1=89=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=BE=20=D0=BD=D0=B0=20=D0=BA?= =?UTF-8?q?=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=BD=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Accordion/Accordion.tsx | 9 +- .../__snapshots__/Accordion.test.tsx.snap | 12 +-- src/components/Avatar/Avatar.tsx | 55 +++++------ .../__snapshots__/Avatar.test.tsx.snap | 24 ++--- src/components/Badge/Badge.tsx | 94 +++++++++--------- .../__snapshots__/Badge.test.tsx.snap | 12 +-- .../__snapshots__/ButtonBadge.test.tsx.snap | 2 +- src/components/Chip/Chip.tsx | 9 +- .../__snapshots__/Chip.test.tsx.snap | 32 +++--- src/components/Divider/Divider.tsx | 10 +- .../__snapshots__/Divider.test.tsx.snap | 6 +- src/components/Input/InputGroupAddon.tsx | 5 +- .../Input/InputTextBase/useInputStyles.ts | 13 +-- .../MenuItem/Template/MenuItemTemplate.tsx | 13 +-- .../MenuItemTemplate.test.tsx.snap | 26 ++--- src/components/Message/Message.tsx | 10 +- .../__snapshots__/Message.test.tsx.snap | 60 ++++++------ src/components/ProgressBar/ProgressBar.tsx | 46 ++++----- .../__snapshots__/ProgressBar.test.tsx.snap | 40 ++++---- .../SelectButton/SelectButtonItem.tsx | 10 +- src/components/Skeleton/Skeleton.tsx | 5 +- .../__snapshots__/Skeleton.test.tsx.snap | 6 +- src/components/Tag/Tag.tsx | 98 +++++++++---------- .../__tests__/__snapshots__/Tag.test.tsx.snap | 58 +++++------ src/components/ToggleButton/ToggleButton.tsx | 38 +++---- .../__snapshots__/ToggleButton.test.tsx.snap | 54 +++++----- 26 files changed, 353 insertions(+), 394 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index fd8e078e..cdd549a5 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -165,8 +165,7 @@ const styles = StyleSheet.create( component: { width: '100%' }, header: { paddingVertical: spacing.Padding['p-4'], - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.accordion.extend.extHeader.gap; targetValue=8 - gap: spacing.Gap['gap-2'], + gap: components.accordion.extend.extHeader.gap, flexDirection: 'row', alignItems: 'center', backgroundColor: components.accordion.colorScheme.header.background, @@ -184,11 +183,9 @@ const styles = StyleSheet.create( contentWrapper: { position: 'absolute', width: '100%', - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-7; value=24.5; target=components.accordion.content.paddingLeft; targetValue=24 - paddingLeft: spacing.Padding['p-7'], + paddingLeft: components.accordion.content.paddingLeft, paddingTop: spacing.Padding['p-0'], - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-0; value=0; target=components.accordion.content.paddingRight; targetValue=24 - paddingRight: spacing.Padding['p-0'], + paddingRight: components.accordion.content.paddingRight, paddingBottom: spacing.Padding['p-4'], }, separator: { diff --git a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap index f07d5cdf..583ad721 100644 --- a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap +++ b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap @@ -53,7 +53,7 @@ exports[`Accordion Header elements maximal 1`] = ` "alignItems": "center", "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingVertical": 14, }, {}, @@ -516,8 +516,8 @@ exports[`Accordion Header elements maximal 1`] = ` style={ { "paddingBottom": 14, - "paddingLeft": 24.5, - "paddingRight": 0, + "paddingLeft": 24, + "paddingRight": 24, "paddingTop": 0, "position": "absolute", "width": "100%", @@ -583,7 +583,7 @@ exports[`Accordion Header elements minimal 1`] = ` "alignItems": "center", "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingVertical": 14, }, {}, @@ -760,8 +760,8 @@ exports[`Accordion Header elements minimal 1`] = ` style={ { "paddingBottom": 14, - "paddingLeft": 24.5, - "paddingRight": 0, + "paddingLeft": 24, + "paddingRight": 24, "paddingTop": 0, "position": "absolute", "width": "100%", diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index bf0b32e2..e53ec453 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -257,36 +257,31 @@ export const Avatar = memo( } ) -const styles = StyleSheet.create( - ({ primitive, components, border, fonts }) => ({ - container: { - justifyContent: 'center', - alignItems: 'center', - borderRadius: components.avatar.root.borderRadius, - borderWidth: 1, - borderColor: components.avatar.extend.borderColor, - backgroundColor: components.avatar.root.background, - overflow: 'hidden', - }, - backgroundFill: { backgroundColor: components.avatar.root.background }, - // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.avatar.extend.circle.borderRadius; targetValue=1600 - circle: { borderRadius: border.Radius['rounded-full'] }, - text: { - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.avatar.root.fontSize; targetValue=16 - fontSize: primitive.fonts.fontSize[300], - textTransform: 'uppercase', - color: components.avatar.root.color, - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.secondary, - }, - badgeContainer: { position: 'absolute', right: 0, top: -7 }, - badgeMeasureContainer: { alignSelf: 'flex-start' }, - icon: { width: primitive.fonts.fontSize[300] }, - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-2xl; value=21; target=components.avatar.xl.icon.size; targetValue=24 - iconXLarge: { width: primitive.fonts.fontSize[600] }, - }) -) +const styles = StyleSheet.create(({ primitive, components, fonts }) => ({ + container: { + justifyContent: 'center', + alignItems: 'center', + borderRadius: components.avatar.root.borderRadius, + borderWidth: 1, + borderColor: components.avatar.extend.borderColor, + backgroundColor: components.avatar.root.background, + overflow: 'hidden', + }, + backgroundFill: { backgroundColor: components.avatar.root.background }, + circle: { borderRadius: components.avatar.extend.circle.borderRadius }, + text: { + fontSize: components.avatar.root.fontSize, + textTransform: 'uppercase', + color: components.avatar.root.color, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.secondary, + }, + badgeContainer: { position: 'absolute', right: 0, top: -7 }, + badgeMeasureContainer: { alignSelf: 'flex-start' }, + icon: { width: primitive.fonts.fontSize[300] }, + iconXLarge: { width: components.avatar.xl.icon.size }, +})) export const AvatarTestId = { root: 'Avatar', diff --git a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index a83be90a..4ac62e08 100644 --- a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -25,7 +25,7 @@ exports[`Avatar component tests Size: custom, shape: circle, type: icon, with cu "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -163,7 +163,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -299,7 +299,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: image 1`] = ` }, false, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -350,7 +350,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: label 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -637,7 +637,7 @@ exports[`Avatar component tests Size: nomal, shape: circle, type: icon 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -773,7 +773,7 @@ exports[`Avatar component tests Size: normal, shape: circle, type: image 1`] = ` }, false, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -824,7 +824,7 @@ exports[`Avatar component tests Size: normal, shape: circle, type: label 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -1111,7 +1111,7 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: icon 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -1247,7 +1247,7 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: image 1`] = ` }, false, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -1298,7 +1298,7 @@ exports[`Avatar component tests Size: xlarge, shape: circle, type: label 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -1585,7 +1585,7 @@ exports[`Avatar component tests With badge, showBadge: false 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -1638,7 +1638,7 @@ exports[`Avatar component tests With badge, showBadge: true 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 10d3393b..1d045fec 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -103,55 +103,51 @@ export const Badge = memo( } ) -const badgeStyles = StyleSheet.create( - ({ primitive, components, border, 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, - }, +const badgeStyles = StyleSheet.create(({ components, border, 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: components.badge.dot.size, - height: components.badge.dot.size, - // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.badge.root.borderRadius; targetValue=8 - borderRadius: border.Radius['rounded-full'], - }, - textBadgeContainer: { - height: components.badge.root.height, - paddingHorizontal: components.badge.root.padding, - justifyContent: 'center', - borderRadius: border.Radius['rounded-full'], - }, - textBadge: { - color: components.badge.colorScheme.primary.color, - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xs; value=10.5; target=components.badge.root.fontSize; targetValue=12 - fontSize: primitive.fonts.fontSize[100], - 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: border.Radius['rounded-full'], + }, + textBadge: { + color: components.badge.colorScheme.primary.color, + fontSize: components.badge.root.fontSize, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.primary, + }, + 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 90ab5bbb..f1c2a115 100644 --- a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap @@ -18,7 +18,7 @@ exports[`Badge component tests dot, severity: basic 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 8, "height": 8, "width": 8, }, @@ -46,7 +46,7 @@ exports[`Badge component tests dot, severity: danger 1`] = ` "backgroundColor": "#f47f77", }, { - "borderRadius": 100, + "borderRadius": 8, "height": 8, "width": 8, }, @@ -74,7 +74,7 @@ exports[`Badge component tests dot, severity: info 1`] = ` "backgroundColor": "#77baf4", }, { - "borderRadius": 100, + "borderRadius": 8, "height": 8, "width": 8, }, @@ -102,7 +102,7 @@ exports[`Badge component tests dot, severity: success 1`] = ` "backgroundColor": "#77f48a", }, { - "borderRadius": 100, + "borderRadius": 8, "height": 8, "width": 8, }, @@ -130,7 +130,7 @@ exports[`Badge component tests dot, severity: warning 1`] = ` "backgroundColor": "#facb75", }, { - "borderRadius": 100, + "borderRadius": 8, "height": 8, "width": 8, }, @@ -646,7 +646,7 @@ exports[`Badge component tests with custom style 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 8, "height": 8, "width": 8, }, diff --git a/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap index d3d1f069..18ca8de7 100644 --- a/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap @@ -284,7 +284,7 @@ exports[`ButtonSeverity component tests badge - dot 1`] = ` "backgroundColor": "#77baf4", }, { - "borderRadius": 100, + "borderRadius": 8, "height": 8, "width": 8, }, diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 48c9b686..521e5d8e 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -108,7 +108,6 @@ const styles = StyleSheet.create( components, semantic, - spacing, border, fonts, }) => ({ @@ -117,8 +116,7 @@ const styles = StyleSheet.create( justifyContent: 'center', alignItems: 'center', flexDirection: 'row', - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.chip.root.gap; targetValue=8 - gap: spacing.Gap['gap-2'], + gap: components.chip.root.gap, paddingHorizontal: components.chip.root.paddingX, paddingVertical: components.chip.root.paddingY, @@ -136,9 +134,8 @@ const styles = StyleSheet.create( mixBlendMode: 'luminosity', }, icon: { - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.chip.icon.size; targetValue=16 - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + width: components.chip.icon.size, + height: components.chip.icon.size, }, text: { fontSize: primitive.fonts.fontSize[300], diff --git a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap index e9a5b96a..6df9070f 100644 --- a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap @@ -47,7 +47,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -124,7 +124,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -303,7 +303,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -515,7 +515,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -829,7 +829,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -906,7 +906,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -983,7 +983,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -1195,7 +1195,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -1407,7 +1407,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -1484,7 +1484,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -1663,7 +1663,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -1875,7 +1875,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -2189,7 +2189,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -2266,7 +2266,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -2343,7 +2343,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, @@ -2555,7 +2555,7 @@ exports[`Chip component tests { "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, "justifyContent": "center", "paddingHorizontal": 8, "paddingVertical": 4, diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 6ec9027d..7ba3d607 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -135,7 +135,7 @@ export const Divider = memo( // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-4; value=14 // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-2; value=7 -const styles = StyleSheet.create(({ primitive, spacing, components }) => ({ +const styles = StyleSheet.create(({ spacing, components }) => ({ container: { minHeight: 28, flexDirection: 'row', @@ -170,8 +170,7 @@ const styles = StyleSheet.create(({ primitive, spacing, components }) => ({ flexDirection: 'row', alignItems: 'center', paddingHorizontal: spacing.Padding['p-2'], - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.divider.extend.content.gap; targetValue=8 - gap: spacing.Gap['gap-2'], + gap: components.divider.extend.content.gap, backgroundColor: components.divider.content.background, }, contentVertical: { @@ -179,9 +178,8 @@ const styles = StyleSheet.create(({ primitive, spacing, components }) => ({ paddingVertical: spacing.Padding['p-2'], }, icon: { - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.divider.extend.iconSize; targetValue=16 - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + 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 63a100b3..26a7afc0 100644 --- a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap +++ b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap @@ -105,7 +105,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "horizontal", "sho "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, - "gap": 7, + "gap": 8, "paddingHorizontal": 7, }, false, @@ -276,7 +276,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, - "gap": 7, + "gap": 8, "paddingHorizontal": 7, }, { @@ -473,7 +473,7 @@ exports[`Divider {"Icon": [Object], "align": "start", "layout": "horizontal", "s "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, - "gap": 7, + "gap": 8, "paddingHorizontal": 7, }, false, diff --git a/src/components/Input/InputGroupAddon.tsx b/src/components/Input/InputGroupAddon.tsx index 3ce64e07..468cfc19 100644 --- a/src/components/Input/InputGroupAddon.tsx +++ b/src/components/Input/InputGroupAddon.tsx @@ -84,9 +84,8 @@ const styles = StyleSheet.create( fontFamily: fonts.secondary, }, icon: { - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.inputgroup.extend.iconSize; targetValue=16 - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + width: components.inputgroup.extend.iconSize, + height: components.inputgroup.extend.iconSize, }, }) ) diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 8343b705..45cf74d9 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -44,8 +44,7 @@ export const inputStyles = StyleSheet.create( container: { flexDirection: 'row', borderWidth: border.Width.border, - // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-xl; value=10.5; target=components.inputtext.root.borderRadius; targetValue=14 - borderRadius: border.Radius['rounded-xl'], + borderRadius: components.inputtext.root.borderRadius, borderColor: components.inputtext.root.borderColor, backgroundColor: components.inputtext.root.background, }, @@ -102,14 +101,12 @@ export const inputStyles = StyleSheet.create( }, rightButtonContainer: { justifyContent: 'center' }, iconSize: { - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-base; value=14; target=components.inputtext.extend.iconSize; targetValue=16 - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + width: components.inputtext.extend.iconSize, + height: components.inputtext.extend.iconSize, }, iconSizeFloatLabel: { - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.inputtext.extend.iconSize; targetValue=16 - width: primitive.fonts.fontSize[500], - height: primitive.fonts.fontSize[500], + width: components.inputtext.extend.iconSize, + height: components.inputtext.extend.iconSize, }, label: { diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index bcaadb79..37dd6dc3 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -137,7 +137,7 @@ export const MenuItemTemplate = memo( // у menu.item нет background и borderColor, прозрачность не выражена semantic-токеном. // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 const styles = StyleSheet.create( - ({ primitive, components, semantic, spacing, border }) => ({ + ({ components, semantic, spacing, border }) => ({ container: { borderColor: 'transparent', borderWidth: border.Width.border, @@ -153,14 +153,12 @@ const styles = StyleSheet.create( separator: { borderTopWidth: 1, borderTopColor: components.menu.separator.borderColor, - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-1; value=3.5; target=components.menu.extend.extItem.caption.gap; targetValue=4 - paddingTop: spacing.Gap['gap-1'], + paddingTop: components.menu.extend.extItem.caption.gap, }, contentContainer: { flexDirection: 'row', alignItems: 'center', - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.menu.item.gap; targetValue=8 - gap: spacing.Gap['gap-2'], + gap: components.menu.item.gap, paddingHorizontal: components.menu.item.paddingLeft, paddingVertical: components.menu.item.paddingTop, }, @@ -175,9 +173,8 @@ const styles = StyleSheet.create( flex: 1, }, icon: { - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xl; value=17.5; target=components.menu.extend.iconSize; targetValue=20 - width: primitive.fonts.fontSize[500], - height: primitive.fonts.fontSize[500], + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, color: components.menu.item.icon.color, }, textContainer: { gap: spacing.Gap['gap-1'], 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 c6aeec04..9ec0e4fe 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, } } > @@ -66,7 +66,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingHorizontal": 14, "paddingVertical": 8, } @@ -218,7 +218,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` "backgroundColor": "#f47f77", }, { - "borderRadius": 100, + "borderRadius": 8, "height": 8, "width": 8, }, @@ -581,7 +581,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingHorizontal": 14, "paddingVertical": 8, } @@ -696,7 +696,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingHorizontal": 14, "paddingVertical": 8, } @@ -1008,7 +1008,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingHorizontal": 14, "paddingVertical": 8, } @@ -1236,7 +1236,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingHorizontal": 14, "paddingVertical": 8, } @@ -1447,7 +1447,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingHorizontal": 14, "paddingVertical": 8, } @@ -1675,7 +1675,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingHorizontal": 14, "paddingVertical": 8, } @@ -1827,7 +1827,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` "backgroundColor": "#facb75", }, { - "borderRadius": 100, + "borderRadius": 8, "height": 8, "width": 8, }, @@ -1941,7 +1941,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingHorizontal": 14, "paddingVertical": 8, } @@ -2006,7 +2006,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` { "borderTopColor": "#e2e2e4", "borderTopWidth": 1, - "paddingTop": 3.5, + "paddingTop": 4, } } > @@ -2062,7 +2062,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingHorizontal": 14, "paddingVertical": 8, } diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 8c0a289f..d15682d2 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -218,9 +218,6 @@ export const Message = memo( } ) -// TODO(tokens-migration): reason=value-mismatch; legacy=border.Width.border-3; value=3; target=components.message.extend.extAccentLine.width; targetValue=4 -// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-5; value=17.5; target=components.message.content.padding; targetValue=14 -// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-1; value=3.5; target=components.message.extend.extText.gap; targetValue=4 // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 // TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-4; value=14 // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-4; value=14 @@ -253,9 +250,10 @@ const messageStyles = StyleSheet.create( }, content: { flexGrow: 1, - borderLeftWidth: border.Width['border-3'] - border.Width.border, + borderLeftWidth: + components.message.extend.extAccentLine.width - border.Width.border, padding: spacing.Padding['p-4'], - paddingLeft: spacing.Padding['p-5'], + paddingLeft: components.message.content.padding, gap: spacing.Gap['gap-4'], variants: { severity: { @@ -278,7 +276,7 @@ const messageStyles = StyleSheet.create( titleTextContainer: { flex: 1, alignSelf: 'center', - gap: spacing.Gap['gap-1'], + gap: components.message.extend.extText.gap, }, iconSize: { width: primitive.fonts.fontSize[700], diff --git a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap index 964c40df..26df81f9 100644 --- a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap +++ b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap @@ -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, } } > @@ -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, } } > @@ -206,7 +206,7 @@ exports[`Message {"Icon": [Object]} 1`] = ` { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -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, } } > @@ -392,7 +392,7 @@ exports[`Message {"body": [Object], "caption": "caption", "severity": "info", "s { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -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, } } > @@ -588,7 +588,7 @@ exports[`Message {"body": [Object], "footer": [Object], "severity": "warning"} 1 { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -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, } } > @@ -759,7 +759,7 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -867,11 +867,11 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se style={ { "borderColor": "#44e858", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -990,7 +990,7 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1187,11 +1187,11 @@ exports[`Message {"hiddenIcon": false} 1`] = ` style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -1333,7 +1333,7 @@ exports[`Message {"hiddenIcon": false} 1`] = ` { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1371,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, } } > @@ -1396,7 +1396,7 @@ exports[`Message {"onTimerFinish": [Function mockConstructor], "timerValue": 5} { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1434,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, } } > @@ -1580,7 +1580,7 @@ exports[`Message {"severity": "danger"} 1`] = ` { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1618,11 +1618,11 @@ exports[`Message {} 1`] = ` style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -1764,7 +1764,7 @@ exports[`Message {} 1`] = ` { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index 5ae11b6b..b5f1c0a3 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -89,34 +89,30 @@ export const ProgressBar = memo( } ) -const styles = StyleSheet.create( - ({ primitive, components, border, fonts }) => ({ - container: { - // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.progressbar.root.borderRadius; targetValue=14 - borderRadius: border.Radius['rounded-full'], - backgroundColor: components.progressbar.root.background, - overflow: 'hidden', - }, +const styles = StyleSheet.create(({ components, fonts }) => ({ + container: { + borderRadius: components.progressbar.root.borderRadius, + backgroundColor: components.progressbar.root.background, + overflow: 'hidden', + }, - indicator: { - alignItems: 'center', - justifyContent: 'center', - backgroundColor: components.progressbar.value.background, - height: '100%', - overflow: 'hidden', - }, + indicator: { + alignItems: 'center', + justifyContent: 'center', + backgroundColor: components.progressbar.value.background, + height: '100%', + overflow: 'hidden', + }, - containerShowValue: { height: components.progressbar.root.height }, + containerShowValue: { height: components.progressbar.root.height }, - indicatorText: { - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xs; value=10.5; target=components.progressbar.label.fontSize; targetValue=12 - fontSize: primitive.fonts.fontSize[100], - textAlign: 'center', - color: components.progressbar.label.color, - fontFamily: fonts.primary, - }, - }) -) + indicatorText: { + fontSize: components.progressbar.label.fontSize, + textAlign: 'center', + color: components.progressbar.label.color, + fontFamily: fonts.primary, + }, +})) /** * Стиль компонента ProgressBar diff --git a/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap index e638661e..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", }, { @@ -209,7 +209,7 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -287,7 +287,7 @@ exports[`ProgressBar component test value - 0, showValue - false, style - {"heig [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -349,7 +349,7 @@ exports[`ProgressBar component test value - 0, showValue - false, style - {"heig [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -411,7 +411,7 @@ exports[`ProgressBar component test value - 0, showValue - true, style - {"heigh [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -489,7 +489,7 @@ exports[`ProgressBar component test value - 0, showValue - true, style - {"heigh [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -567,7 +567,7 @@ exports[`ProgressBar component test value - 50, showValue - false, style - {"hei [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -629,7 +629,7 @@ exports[`ProgressBar component test value - 50, showValue - false, style - {"hei [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -691,7 +691,7 @@ exports[`ProgressBar component test value - 50, showValue - true, style - {"heig [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -769,7 +769,7 @@ exports[`ProgressBar component test value - 50, showValue - true, style - {"heig [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -847,7 +847,7 @@ exports[`ProgressBar component test value - 100, showValue - false, style - {"he [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -909,7 +909,7 @@ exports[`ProgressBar component test value - 100, showValue - false, style - {"he [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -971,7 +971,7 @@ exports[`ProgressBar component test value - 100, showValue - true, style - {"hei [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -1049,7 +1049,7 @@ exports[`ProgressBar component test value - 100, showValue - true, style - {"hei [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -1127,7 +1127,7 @@ exports[`ProgressBar component test value - 150, showValue - false, style - {"he [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -1189,7 +1189,7 @@ exports[`ProgressBar component test value - 150, showValue - false, style - {"he [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -1251,7 +1251,7 @@ exports[`ProgressBar component test value - 150, showValue - true, style - {"hei [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -1329,7 +1329,7 @@ exports[`ProgressBar component test value - 150, showValue - true, style - {"hei [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index 681c8480..32cc783d 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -155,7 +155,6 @@ export const SelectButtonItem = memo( // TODO(tokens-migration): reason=missing; legacy=theme.Button.Disabled.disabledButtonBorderColor; light=#a2a5a9; dark=#56595f // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 -// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-3; value=10.5; target=components.selectbutton.extend.gap; targetValue=4 // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 const styles = StyleSheet.create( ({ @@ -165,7 +164,7 @@ const styles = StyleSheet.create( theme, border, - spacing, + fonts, }) => ({ container: { @@ -173,15 +172,14 @@ const styles = StyleSheet.create( flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.selectbutton.extend.gap; targetValue=4 - gap: spacing.Gap['gap-2'], + gap: components.selectbutton.extend.gap, borderWidth: border.Width.border, borderColor: 'transparent', }, small: { height: 28 }, base: { height: 35 }, - large: { height: 49, gap: spacing.Gap['gap-3'] }, - xlarge: { height: 56, gap: spacing.Gap['gap-3'] }, + large: { height: 49, gap: components.selectbutton.extend.gap }, + xlarge: { height: 56, gap: components.selectbutton.extend.gap }, disabledContainer: { borderRadius: components.selectbutton.extend.ext.borderRadius, borderWidth: 1, diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx index e6de1fbd..3e0813d7 100644 --- a/src/components/Skeleton/Skeleton.tsx +++ b/src/components/Skeleton/Skeleton.tsx @@ -87,10 +87,9 @@ export const Skeleton = memo(({ style, testID, ...rest }) => { ) }) -const styles = StyleSheet.create(({ border, components: { skeleton } }) => ({ +const styles = StyleSheet.create(({ components: { skeleton } }) => ({ container: { - // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-lg; value=7; target=components.skeleton.root.borderRadius; targetValue=14 - borderRadius: border.Radius['rounded-lg'], + borderRadius: skeleton.root.borderRadius, overflow: 'hidden', backgroundColor: skeleton.colorScheme.root.background, }, diff --git a/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap b/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap index 429a59f0..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", }, { @@ -144,7 +144,7 @@ exports[`Skeleton 100% animation 1`] = ` [ { "backgroundColor": "#e2e2e4", - "borderRadius": 7, + "borderRadius": 14, "overflow": "hidden", }, { @@ -281,7 +281,7 @@ exports[`Skeleton before animation started: before animation started 1`] = ` [ { "backgroundColor": "#e2e2e4", - "borderRadius": 7, + "borderRadius": 14, "overflow": "hidden", }, { diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index bbb3d086..5ac1724a 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -100,64 +100,56 @@ export const Tag = memo( } ) -const tagStyles = StyleSheet.create( - ({ primitive, components, border, spacing, fonts }) => ({ - container: { - alignSelf: 'flex-start', - flexDirection: 'row', - alignItems: 'center', - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-1; value=3.5; target=components.tag.root.gap; targetValue=4 - gap: spacing.Gap['gap-1'], - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-2; value=7; target=components.tag.root.paddingLeft; targetValue=8 - paddingHorizontal: spacing.Padding['p-2'], - // TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-1; value=3.5; target=components.tag.root.paddingTop; targetValue=4 - paddingVertical: spacing.Padding['p-1'], - // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-lg; value=7; target=components.tag.root.borderRadius; targetValue=8 - borderRadius: border.Radius['rounded-lg'], - 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, - }, +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, }, }, }, - // TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.tag.root.roundedBorderRadius; targetValue=1600 - roundedContainer: { borderRadius: border.Radius['rounded-full'] }, - icon: { width: components.tag.icon.size, height: components.tag.icon.size }, - text: { - flexShrink: 1, - // TODO(tokens-migration): reason=value-mismatch; legacy=typography.Size.text-xs; value=10.5; target=components.tag.root.fontSize; targetValue=12 - fontSize: primitive.fonts.fontSize[100], - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.primary, - 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 }, - }, + }, + 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.primary, + 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 b44adea6..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, - "paddingHorizontal": 7, - "paddingVertical": 3.5, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -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, - "paddingHorizontal": 7, - "paddingVertical": 3.5, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, { - "borderRadius": 100, + "borderRadius": 1600, }, ] } @@ -176,11 +176,11 @@ exports[`Tag snapshot: severity = danger 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#fbacaa", - "borderRadius": 7, + "borderRadius": 8, "flexDirection": "row", - "gap": 3.5, - "paddingHorizontal": 7, - "paddingVertical": 3.5, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -218,11 +218,11 @@ exports[`Tag snapshot: severity = info, showIcon = false, with Icon 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#aad7fb", - "borderRadius": 7, + "borderRadius": 8, "flexDirection": "row", - "gap": 3.5, - "paddingHorizontal": 7, - "paddingVertical": 3.5, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -339,11 +339,11 @@ exports[`Tag snapshot: severity = secondary, rounded = false, showIcon = true, w "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#e2e2e4", - "borderRadius": 7, + "borderRadius": 8, "flexDirection": "row", - "gap": 3.5, - "paddingHorizontal": 7, - "paddingVertical": 3.5, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, false, ] @@ -465,11 +465,11 @@ exports[`Tag snapshot: severity = success, with custom styles 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#77f48a", - "borderRadius": 7, + "borderRadius": 8, "flexDirection": "row", - "gap": 3.5, - "paddingHorizontal": 7, - "paddingVertical": 3.5, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -507,11 +507,11 @@ exports[`Tag snapshot: severity = warning 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#fddeaa", - "borderRadius": 7, + "borderRadius": 8, "flexDirection": "row", - "gap": 3.5, - "paddingHorizontal": 7, - "paddingVertical": 3.5, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index ba0bad63..424be73b 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -119,22 +119,14 @@ export const ToggleButton = memo( } ) -// TODO(tokens-migration): reason=value-mismatch; legacy=border.Radius.rounded-full; value=100; target=components.togglebutton.root.borderRadius; targetValue=1600 // TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 -// TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonBorderColor; light=#a2a5a9; dark=#56595f; target=components.togglebutton.colorScheme.root.disabledBorderColor; targetValue=#e2e2e4 -// TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Common.buttonPaddingTopBottom; value=0; target=components.togglebutton.root.paddingTop; targetValue=8 // TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-6; value=21 -// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-3; value=10.5; target=components.togglebutton.extend.ext.gap; targetValue=14 -// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.togglebutton.root.gap; targetValue=8 -// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Padding.p-3; value=10.5; target=components.togglebutton.root.sm.paddingRight; targetValue=14 -// TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonBg; light=#e2e2e4; dark=#404348; target=components.togglebutton.colorScheme.root.disabledBackground; targetValue=#e2e2e4 -// TODO(tokens-migration): reason=value-mismatch; legacy=theme.Button.Disabled.disabledButtonTextColor; light=#85888e; dark=#f0f0f1; target=components.togglebutton.colorScheme.root.disabledColor; targetValue=#85888e // TODO(tokens-migration): reason=missing; legacy=theme.Button.Common.buttonPaddingLeftRight; value=14 const toggleStyles = StyleSheet.create( ({ primitive, components, theme, spacing, border, fonts }) => ({ container: { alignSelf: 'flex-start', - borderRadius: border.Radius['rounded-full'], + borderRadius: components.togglebutton.root.borderRadius, borderWidth: border.Width.border, overflow: 'hidden', variants: { @@ -155,7 +147,8 @@ const toggleStyles = StyleSheet.create( }, disabled: { true: { - borderColor: theme.Button.Disabled.disabledButtonBorderColor, + borderColor: + components.togglebutton.colorScheme.root.disabledBorderColor, opacity: 0.6, }, false: {}, @@ -175,10 +168,10 @@ const toggleStyles = StyleSheet.create( flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', - borderRadius: border.Radius['rounded-full'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, + borderRadius: components.togglebutton.root.borderRadius, + paddingVertical: components.togglebutton.root.paddingTop, paddingHorizontal: spacing.Padding['p-6'], - gap: spacing.Gap['gap-3'], + gap: components.togglebutton.extend.ext.gap, variants: { size: { xlarge: { minHeight: 56 }, @@ -186,12 +179,12 @@ const toggleStyles = StyleSheet.create( base: { minHeight: 35, paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, - gap: spacing.Gap['gap-2'], + gap: components.togglebutton.root.gap, }, small: { minHeight: 28, - paddingHorizontal: spacing.Padding['p-3'], - gap: spacing.Gap['gap-2'], + paddingHorizontal: components.togglebutton.root.sm.paddingRight, + gap: components.togglebutton.root.gap, }, }, checked: { @@ -212,7 +205,10 @@ const toggleStyles = StyleSheet.create( false: {}, }, disabled: { - true: { backgroundColor: theme.Button.Disabled.disabledButtonBg }, + true: { + backgroundColor: + components.togglebutton.colorScheme.root.disabledBackground, + }, false: {}, }, }, @@ -264,7 +260,9 @@ const toggleStyles = StyleSheet.create( false: {}, }, disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, + true: { + color: components.togglebutton.colorScheme.root.disabledColor, + }, false: {}, }, }, @@ -300,7 +298,9 @@ const toggleStyles = StyleSheet.create( false: {}, }, disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, + true: { + color: components.togglebutton.colorScheme.root.disabledColor, + }, false: {}, }, }, diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 6b639aee..4f6725df 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -11,7 +11,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa { "alignSelf": "flex-start", "borderColor": "#e2e2e4", - "borderRadius": 100, + "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, ] @@ -172,7 +172,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa { "alignSelf": "flex-start", "borderColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "overflow": "hidden", }, @@ -188,12 +188,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, ] @@ -333,7 +333,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr { "alignSelf": "flex-start", "borderColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "overflow": "hidden", }, @@ -349,12 +349,12 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 1600, "flexDirection": "row", - "gap": 7, + "gap": 8, "minHeight": 35, "paddingHorizontal": 14, - "paddingVertical": 0, + "paddingVertical": 8, }, { "aspectRatio": 1, @@ -482,8 +482,8 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal [ { "alignSelf": "flex-start", - "borderColor": "#a2a5a9", - "borderRadius": 100, + "borderColor": "#e2e2e4", + "borderRadius": 1600, "borderWidth": 1, "opacity": 0.6, "overflow": "hidden", @@ -500,12 +500,12 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 1600, "flexDirection": "row", - "gap": 10.5, + "gap": 14, "minHeight": 49, "paddingHorizontal": 21, - "paddingVertical": 0, + "paddingVertical": 8, }, false, ] @@ -645,7 +645,7 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal { "alignSelf": "flex-start", "borderColor": "#2b2e33", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "overflow": "hidden", }, @@ -663,12 +663,12 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#2b2e33", - "borderRadius": 100, + "borderRadius": 1600, "flexDirection": "row", - "gap": 10.5, + "gap": 14, "minHeight": 56, "paddingHorizontal": 21, - "paddingVertical": 0, + "paddingVertical": 8, }, { "aspectRatio": 1, @@ -797,7 +797,7 @@ exports[`ToggleButton snapshots default 1`] = ` { "alignSelf": "flex-start", "borderColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "overflow": "hidden", }, @@ -813,12 +813,12 @@ exports[`ToggleButton snapshots default 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 1600, "flexDirection": "row", - "gap": 7, + "gap": 8, "minHeight": 35, "paddingHorizontal": 14, - "paddingVertical": 0, + "paddingVertical": 8, }, { "aspectRatio": 1, From 9c6005702728d349a1d05428f4c72774acfc0925 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 17:40:36 +0800 Subject: [PATCH 37/47] =?UTF-8?q?feat(tokens):=20=D0=BE=D1=82=D1=81=D1=82?= =?UTF-8?q?=D1=83=D0=BF=D1=8B,=20=D1=80=D0=B0=D0=BC=D0=BA=D0=B8=20=D0=B8?= =?UTF-8?q?=20=D1=86=D0=B2=D0=B5=D1=82=20=D0=B2=D1=82=D0=BE=D1=80=D0=B8?= =?UTF-8?q?=D1=87=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=82=D0=B5=D0=BA=D1=81=D1=82?= =?UTF-8?q?=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD?= =?UTF-8?q?=D1=8B=20=D0=BD=D0=B0=20semantic-=D1=82=D0=BE=D0=BA=D0=B5=D0=BD?= =?UTF-8?q?=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Accordion/Accordion.tsx | 9 +- .../__snapshots__/Avatar.test.tsx.snap | 2 +- src/components/Badge/Badge.tsx | 4 +- .../__snapshots__/Badge.test.tsx.snap | 12 +- .../__snapshots__/Button.test.tsx.snap | 480 +++++++++--------- .../__snapshots__/ButtonBadge.test.tsx.snap | 2 +- .../Button/utils/ButtonContainer.tsx | 23 +- src/components/Button/utils/ButtonIcon.tsx | 5 +- src/components/Button/utils/ButtonLabel.tsx | 5 +- src/components/Chip/Chip.tsx | 6 +- src/components/Dialog/DialogHeader.tsx | 5 +- src/components/Divider/Divider.tsx | 10 +- .../__snapshots__/Divider.test.tsx.snap | 8 +- src/components/Input/InputOtp/InputOtp.tsx | 4 +- .../__snapshots__/InputOtp.test.tsx.snap | 144 +++--- .../Input/InputTextBase/useInputStyles.ts | 20 +- src/components/List/Base/ListBase.tsx | 26 +- .../__snapshots__/ListBase.test.tsx.snap | 46 +- .../MenuItem/Template/MenuItemTemplate.tsx | 87 ++-- .../MenuItemTemplate.test.tsx.snap | 36 +- src/components/Message/Message.tsx | 16 +- src/components/RadioButton/RadioButton.tsx | 7 +- .../__snapshots__/RadioButton.test.tsx.snap | 56 +- .../SelectButton/SelectButtonItem.tsx | 5 +- src/components/Slider/Slider.tsx | 5 +- .../__snapshots__/Slider.test.tsx.snap | 44 +- src/components/Tabs/Tabs.tsx | 8 +- .../__snapshots__/Tabs.test.tsx.snap | 16 +- src/components/ToggleButton/ToggleButton.tsx | 8 +- .../__snapshots__/ToggleButton.test.tsx.snap | 4 +- src/components/Typography/Anchor.tsx | 6 +- src/components/Typography/Caption.tsx | 8 +- src/components/Typography/Service.tsx | 6 +- .../__snapshots__/Anchor.test.tsx.snap | 8 +- .../__snapshots__/Caption.test.tsx.snap | 12 +- .../__snapshots__/Service.test.tsx.snap | 80 +-- 36 files changed, 597 insertions(+), 626 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index cdd549a5..596b85a1 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -159,12 +159,11 @@ export const AccordionTestIds = { separator: 'Separator', } -// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-4; value=14 const styles = StyleSheet.create( - ({ primitive, components, spacing, fonts }) => ({ + ({ semantic, primitive, components, fonts }) => ({ component: { width: '100%' }, header: { - paddingVertical: spacing.Padding['p-4'], + paddingVertical: semantic.dimension.space[400], gap: components.accordion.extend.extHeader.gap, flexDirection: 'row', alignItems: 'center', @@ -184,9 +183,9 @@ const styles = StyleSheet.create( position: 'absolute', width: '100%', paddingLeft: components.accordion.content.paddingLeft, - paddingTop: spacing.Padding['p-0'], + paddingTop: semantic.dimension.space.none, paddingRight: components.accordion.content.paddingRight, - paddingBottom: spacing.Padding['p-4'], + paddingBottom: semantic.dimension.space[400], }, separator: { borderTopColor: components.accordion.panel.borderColor, diff --git a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index 4ac62e08..49469718 100644 --- a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -1706,7 +1706,7 @@ exports[`Avatar component tests With badge, showBadge: true 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 1d045fec..b969bab4 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -103,7 +103,7 @@ export const Badge = memo( } ) -const badgeStyles = StyleSheet.create(({ components, border, fonts }) => ({ +const badgeStyles = StyleSheet.create(({ semantic, components, fonts }) => ({ container: { alignItems: 'flex-start' }, dot: { variants: { @@ -135,7 +135,7 @@ const badgeStyles = StyleSheet.create(({ components, border, fonts }) => ({ height: components.badge.root.height, paddingHorizontal: components.badge.root.padding, justifyContent: 'center', - borderRadius: border.Radius['rounded-full'], + borderRadius: semantic.dimension.borderRadius.max, }, textBadge: { color: components.badge.colorScheme.primary.color, diff --git a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap index f1c2a115..c728269d 100644 --- a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap @@ -158,7 +158,7 @@ exports[`Badge component tests severity: basic 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -239,7 +239,7 @@ exports[`Badge component tests severity: basic 2`] = ` "backgroundColor": "#77baf4", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -320,7 +320,7 @@ exports[`Badge component tests severity: basic 3`] = ` "backgroundColor": "#77f48a", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -401,7 +401,7 @@ exports[`Badge component tests severity: basic 4`] = ` "backgroundColor": "#facb75", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -482,7 +482,7 @@ exports[`Badge component tests severity: basic 5`] = ` "backgroundColor": "#f47f77", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -563,7 +563,7 @@ exports[`Badge component tests severity: default 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, diff --git a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index 76e45616..8152baec 100644 --- a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -259,7 +259,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -431,7 +431,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -603,7 +603,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -775,7 +775,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -947,7 +947,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -1022,7 +1022,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -1097,7 +1097,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -1269,7 +1269,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -6137,7 +6137,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -6309,7 +6309,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -6481,7 +6481,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -6653,7 +6653,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -6825,7 +6825,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -6900,7 +6900,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -6975,7 +6975,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -7147,7 +7147,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -12016,7 +12016,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -12189,7 +12189,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -12362,7 +12362,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -12535,7 +12535,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -12708,7 +12708,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -12784,7 +12784,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -12860,7 +12860,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -13033,7 +13033,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -17966,7 +17966,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -18139,7 +18139,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -18312,7 +18312,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -18485,7 +18485,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -18658,7 +18658,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -18734,7 +18734,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -18810,7 +18810,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -18983,7 +18983,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -23915,7 +23915,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -24087,7 +24087,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -24259,7 +24259,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -24431,7 +24431,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -24603,7 +24603,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -24678,7 +24678,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -24753,7 +24753,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -24925,7 +24925,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -29793,7 +29793,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -29965,7 +29965,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -30137,7 +30137,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -30309,7 +30309,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -30481,7 +30481,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -30556,7 +30556,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -30631,7 +30631,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -30803,7 +30803,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -35672,7 +35672,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -35845,7 +35845,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -36018,7 +36018,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -36191,7 +36191,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -36364,7 +36364,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -36440,7 +36440,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -36516,7 +36516,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -36689,7 +36689,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -41622,7 +41622,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -41795,7 +41795,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -41968,7 +41968,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -42141,7 +42141,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -42314,7 +42314,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -42390,7 +42390,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -42466,7 +42466,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -42639,7 +42639,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -47571,7 +47571,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -47743,7 +47743,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -47915,7 +47915,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -48087,7 +48087,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -48259,7 +48259,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -48334,7 +48334,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -48409,7 +48409,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -48581,7 +48581,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -53449,7 +53449,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -53621,7 +53621,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -53793,7 +53793,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -53965,7 +53965,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -54137,7 +54137,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -54212,7 +54212,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -54287,7 +54287,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -54459,7 +54459,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -59328,7 +59328,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -59501,7 +59501,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -59674,7 +59674,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -59847,7 +59847,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -60020,7 +60020,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -60096,7 +60096,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -60172,7 +60172,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -60345,7 +60345,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -65278,7 +65278,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -65451,7 +65451,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -65624,7 +65624,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -65797,7 +65797,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -65970,7 +65970,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -66046,7 +66046,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -66122,7 +66122,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -66295,7 +66295,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -71227,7 +71227,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -71399,7 +71399,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -71571,7 +71571,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -71743,7 +71743,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -71915,7 +71915,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -71990,7 +71990,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -72065,7 +72065,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -72237,7 +72237,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -77105,7 +77105,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -77277,7 +77277,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -77449,7 +77449,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -77621,7 +77621,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -77793,7 +77793,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -77868,7 +77868,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -77943,7 +77943,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -78115,7 +78115,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -82984,7 +82984,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -83157,7 +83157,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -83330,7 +83330,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -83503,7 +83503,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -83676,7 +83676,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -83752,7 +83752,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -83828,7 +83828,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -84001,7 +84001,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -88934,7 +88934,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -89107,7 +89107,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -89280,7 +89280,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -89453,7 +89453,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -89626,7 +89626,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -89702,7 +89702,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -89778,7 +89778,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -89951,7 +89951,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -94883,8 +94883,8 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "justifyContent": "center", "maxHeight": 21.5, "minHeight": 21.5, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -95043,8 +95043,8 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "justifyContent": "center", "maxHeight": 21.5, "minHeight": 21.5, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -95203,8 +95203,8 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "justifyContent": "center", "maxHeight": 21.5, "minHeight": 21.5, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -95266,8 +95266,8 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "justifyContent": "center", "maxHeight": 21.5, "minHeight": 21.5, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -97566,8 +97566,8 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "justifyContent": "center", "maxHeight": 21.5, "minHeight": 21.5, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -97726,8 +97726,8 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "justifyContent": "center", "maxHeight": 21.5, "minHeight": 21.5, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -97886,8 +97886,8 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "justifyContent": "center", "maxHeight": 21.5, "minHeight": 21.5, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -97949,8 +97949,8 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "justifyContent": "center", "maxHeight": 21.5, "minHeight": 21.5, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -105679,8 +105679,8 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -105839,8 +105839,8 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -105999,8 +105999,8 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -106062,8 +106062,8 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -108362,8 +108362,8 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -108522,8 +108522,8 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -108682,8 +108682,8 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -108745,8 +108745,8 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -111045,8 +111045,8 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -111205,8 +111205,8 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -111365,8 +111365,8 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -111428,8 +111428,8 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -113760,8 +113760,8 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -113920,8 +113920,8 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -114080,8 +114080,8 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -114143,8 +114143,8 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "justifyContent": "center", "maxHeight": 28, "minHeight": 28, - "paddingHorizontal": 3.5, - "paddingVertical": 3.5, + "paddingHorizontal": 4, + "paddingVertical": 4, }, { "aspectRatio": 1, @@ -116475,7 +116475,7 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -116545,7 +116545,7 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -116615,7 +116615,7 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -116685,7 +116685,7 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -116755,7 +116755,7 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -116830,7 +116830,7 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -116905,7 +116905,7 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -116975,7 +116975,7 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -119293,7 +119293,7 @@ exports[`Button component tests Button with text, size - base, shape - square, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -119363,7 +119363,7 @@ exports[`Button component tests Button with text, size - base, shape - square, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -119433,7 +119433,7 @@ exports[`Button component tests Button with text, size - base, shape - square, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -119503,7 +119503,7 @@ exports[`Button component tests Button with text, size - base, shape - square, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -119573,7 +119573,7 @@ exports[`Button component tests Button with text, size - base, shape - square, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -119648,7 +119648,7 @@ exports[`Button component tests Button with text, size - base, shape - square, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -119723,7 +119723,7 @@ exports[`Button component tests Button with text, size - base, shape - square, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -119793,7 +119793,7 @@ exports[`Button component tests Button with text, size - base, shape - square, v "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -122112,7 +122112,7 @@ exports[`Button component tests Button with text, size - large, shape - circle, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -122183,7 +122183,7 @@ exports[`Button component tests Button with text, size - large, shape - circle, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -122254,7 +122254,7 @@ exports[`Button component tests Button with text, size - large, shape - circle, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -122325,7 +122325,7 @@ exports[`Button component tests Button with text, size - large, shape - circle, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -122396,7 +122396,7 @@ exports[`Button component tests Button with text, size - large, shape - circle, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -122472,7 +122472,7 @@ exports[`Button component tests Button with text, size - large, shape - circle, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -122548,7 +122548,7 @@ exports[`Button component tests Button with text, size - large, shape - circle, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -122619,7 +122619,7 @@ exports[`Button component tests Button with text, size - large, shape - circle, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -125002,7 +125002,7 @@ exports[`Button component tests Button with text, size - large, shape - square, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -125073,7 +125073,7 @@ exports[`Button component tests Button with text, size - large, shape - square, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -125144,7 +125144,7 @@ exports[`Button component tests Button with text, size - large, shape - square, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -125215,7 +125215,7 @@ exports[`Button component tests Button with text, size - large, shape - square, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -125286,7 +125286,7 @@ exports[`Button component tests Button with text, size - large, shape - square, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -125362,7 +125362,7 @@ exports[`Button component tests Button with text, size - large, shape - square, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -125438,7 +125438,7 @@ exports[`Button component tests Button with text, size - large, shape - square, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -125509,7 +125509,7 @@ exports[`Button component tests Button with text, size - large, shape - square, "maxHeight": 56, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -127891,7 +127891,7 @@ exports[`Button component tests Button with text, size - small, shape - circle, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -127961,7 +127961,7 @@ exports[`Button component tests Button with text, size - small, shape - circle, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -128031,7 +128031,7 @@ exports[`Button component tests Button with text, size - small, shape - circle, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -128101,7 +128101,7 @@ exports[`Button component tests Button with text, size - small, shape - circle, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -128171,7 +128171,7 @@ exports[`Button component tests Button with text, size - small, shape - circle, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -128246,7 +128246,7 @@ exports[`Button component tests Button with text, size - small, shape - circle, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -128321,7 +128321,7 @@ exports[`Button component tests Button with text, size - small, shape - circle, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -128391,7 +128391,7 @@ exports[`Button component tests Button with text, size - small, shape - circle, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -130709,7 +130709,7 @@ exports[`Button component tests Button with text, size - small, shape - square, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -130779,7 +130779,7 @@ exports[`Button component tests Button with text, size - small, shape - square, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -130849,7 +130849,7 @@ exports[`Button component tests Button with text, size - small, shape - square, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -130919,7 +130919,7 @@ exports[`Button component tests Button with text, size - small, shape - square, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -130989,7 +130989,7 @@ exports[`Button component tests Button with text, size - small, shape - square, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -131064,7 +131064,7 @@ exports[`Button component tests Button with text, size - small, shape - square, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -131139,7 +131139,7 @@ exports[`Button component tests Button with text, size - small, shape - square, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -131209,7 +131209,7 @@ exports[`Button component tests Button with text, size - small, shape - square, "justifyContent": "center", "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -133528,7 +133528,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -133599,7 +133599,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -133670,7 +133670,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -133741,7 +133741,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -133812,7 +133812,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -133888,7 +133888,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -133964,7 +133964,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -134035,7 +134035,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -136418,7 +136418,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -136489,7 +136489,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -136560,7 +136560,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -136631,7 +136631,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -136702,7 +136702,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -136778,7 +136778,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -136854,7 +136854,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] @@ -136925,7 +136925,7 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "maxHeight": 64, "minHeight": "auto", "paddingHorizontal": 0, - "paddingVertical": 3.5, + "paddingVertical": 4, }, false, ] diff --git a/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap index 18ca8de7..819b001a 100644 --- a/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap @@ -113,7 +113,7 @@ exports[`ButtonSeverity component tests badge - basic 1`] = ` "backgroundColor": "#f47f77", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, diff --git a/src/components/Button/utils/ButtonContainer.tsx b/src/components/Button/utils/ButtonContainer.tsx index 6d8d2625..659e1071 100644 --- a/src/components/Button/utils/ButtonContainer.tsx +++ b/src/components/Button/utils/ButtonContainer.tsx @@ -80,13 +80,10 @@ const ButtonContainerComponent = ({ export const ButtonContainer = genericMemo(ButtonContainerComponent) -// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-1; value=3.5 -// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-0; value=0 -// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-1; value=3.5 // `transparent` здесь — отсутствие фона или границы, а не цвет дизайн-системы: // прозрачность не выражена ни semantic-токеном, ни свойствами button.extend.extText. const buttonContainerStyles = StyleSheet.create( - ({ components: { button }, spacing }) => ({ + ({ semantic, components: { button } }) => ({ container: { flexDirection: 'row', justifyContent: 'center', @@ -147,7 +144,7 @@ const buttonContainerStyles = StyleSheet.create( text: { borderColor: 'transparent', backgroundColor: 'transparent' }, link: { paddingHorizontal: 0, - paddingVertical: spacing.Padding['p-1'], + paddingVertical: semantic.dimension.space[100], height: 'auto', minHeight: 'auto', borderColor: 'transparent', @@ -431,8 +428,8 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'xlarge', styles: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], + paddingHorizontal: semantic.dimension.space[100], + paddingVertical: semantic.dimension.space[100], height: 28, minHeight: 28, maxHeight: 28, @@ -443,8 +440,8 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'large', styles: { - paddingHorizontal: spacing.Gap['gap-0'], - paddingVertical: spacing.Gap['gap-0'], + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space.none, height: 24.5, minHeight: 24.5, maxHeight: 24.5, @@ -455,8 +452,8 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'base', styles: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], + paddingHorizontal: semantic.dimension.space[100], + paddingVertical: semantic.dimension.space[100], height: 21.5, minHeight: 21.5, maxHeight: 21.5, @@ -467,8 +464,8 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'small', styles: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], + paddingHorizontal: semantic.dimension.space[100], + paddingVertical: semantic.dimension.space[100], height: 14, minHeight: 28, maxHeight: 28, diff --git a/src/components/Button/utils/ButtonIcon.tsx b/src/components/Button/utils/ButtonIcon.tsx index fa2619f7..81262048 100644 --- a/src/components/Button/utils/ButtonIcon.tsx +++ b/src/components/Button/utils/ButtonIcon.tsx @@ -48,9 +48,8 @@ const ButtonIconComponent = ({ export const ButtonIcon = genericMemo(ButtonIconComponent) -// TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e const buttonIconStyles = StyleSheet.create( - ({ primitive, components: { button }, typography }) => ({ + ({ semantic, primitive, components: { button } }) => ({ icon: { variants: { size: { @@ -89,7 +88,7 @@ const buttonIconStyles = StyleSheet.create( { variant: 'link', pressed: 'true', - styles: { color: typography.Color.Common['text-color-secondary'] }, + styles: { color: semantic.colorScheme.color.fg.muted }, }, // severity icon colors diff --git a/src/components/Button/utils/ButtonLabel.tsx b/src/components/Button/utils/ButtonLabel.tsx index 1d1bb8c6..a4a0788a 100644 --- a/src/components/Button/utils/ButtonLabel.tsx +++ b/src/components/Button/utils/ButtonLabel.tsx @@ -48,9 +48,8 @@ const ButtonLabelComponent = ({ export const ButtonLabel = genericMemo(ButtonLabelComponent) -// TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e const buttonLabelStyles = StyleSheet.create( - ({ primitive, components: { button }, typography, fonts }) => ({ + ({ semantic, primitive, components: { button }, fonts }) => ({ label: { fontWeight: primitive.fonts.fontWeight.demibold, includeFontPadding: false, @@ -81,7 +80,7 @@ const buttonLabelStyles = StyleSheet.create( { variant: 'link', pressed: 'true', - styles: { color: typography.Color.Common['text-color-secondary'] }, + styles: { color: semantic.colorScheme.color.fg.muted }, }, // severity label colors diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 521e5d8e..63f81dd9 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -100,8 +100,6 @@ export const Chip = memo( // `transparent` здесь — отсутствие границы, а не цвет дизайн-системы: // у chip.root нет borderColor, прозрачность не выражена semantic-токеном. // TODO(tokens-migration): reason=missing; legacy=border.Color.Service.border-success.400; value=#77f48a -// TODO(tokens-migration): reason=missing; legacy=border.Radius.rounded-full; value=100 -// TODO(tokens-migration): reason=missing; legacy=border.Width.border-3; value=3 const styles = StyleSheet.create( ({ primitive, @@ -146,9 +144,9 @@ const styles = StyleSheet.create( }, disabledText: { color: semantic.colorScheme.color.fg.muted }, pressedClose: { - borderWidth: border.Width['border-3'], + borderWidth: semantic.dimension.borderWidth[300], borderColor: border.Color.Service['border-success'][400], - borderRadius: border.Radius['rounded-full'], + borderRadius: semantic.dimension.borderRadius.max, }, }) ) diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index 79175d22..13503087 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -88,8 +88,7 @@ export const DialogHeader = ({ ) } -// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 -const styles = StyleSheet.create(({ primitive, components, border }) => ({ +const styles = StyleSheet.create(({ semantic, primitive, components }) => ({ text: { flex: 1 }, header: { flexDirection: 'row', @@ -101,7 +100,7 @@ const styles = StyleSheet.create(({ primitive, components, border }) => ({ }, closeTouchable: { padding: 8 }, separator: { - height: border.Width.border, + height: semantic.dimension.borderWidth[100], backgroundColor: components.dialog.root.borderColor, }, closeIcon: { diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 7ba3d607..dbc6988f 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -133,9 +133,7 @@ export const Divider = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-4; value=14 -// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-2; value=7 -const styles = StyleSheet.create(({ spacing, components }) => ({ +const styles = StyleSheet.create(({ semantic, components }) => ({ container: { minHeight: 28, flexDirection: 'row', @@ -152,7 +150,7 @@ const styles = StyleSheet.create(({ spacing, components }) => ({ containerColumnReverse: { flexDirection: 'column-reverse' }, lineContainer: { flexGrow: 1, - flexBasis: spacing.Gap['gap-4'], + flexBasis: semantic.dimension.space[400], width: 1, height: 1, overflow: 'hidden', @@ -169,13 +167,13 @@ const styles = StyleSheet.create(({ spacing, components }) => ({ flexShrink: 1, flexDirection: 'row', alignItems: 'center', - paddingHorizontal: spacing.Padding['p-2'], + paddingHorizontal: semantic.dimension.space[200], gap: components.divider.extend.content.gap, backgroundColor: components.divider.content.background, }, contentVertical: { paddingHorizontal: 0, - paddingVertical: spacing.Padding['p-2'], + paddingVertical: semantic.dimension.space[200], }, icon: { width: components.divider.extend.iconSize, diff --git a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap index 26a7afc0..a632247d 100644 --- a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap +++ b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap @@ -106,7 +106,7 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "horizontal", "sho "flexDirection": "row", "flexShrink": 1, "gap": 8, - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, false, ] @@ -277,11 +277,11 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" "flexDirection": "row", "flexShrink": 1, "gap": 8, - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, { "paddingHorizontal": 0, - "paddingVertical": 7, + "paddingVertical": 8, }, ] } @@ -474,7 +474,7 @@ exports[`Divider {"Icon": [Object], "align": "start", "layout": "horizontal", "s "flexDirection": "row", "flexShrink": 1, "gap": 8, - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, false, ] 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/__tests__/__snapshots__/InputOtp.test.tsx.snap b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap index 4fd336cf..809f70ab 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, } } > @@ -162,7 +162,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -289,7 +289,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -418,7 +418,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -547,7 +547,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -678,7 +678,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -811,7 +811,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -942,7 +942,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1075,7 +1075,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1210,7 +1210,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1345,7 +1345,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1482,7 +1482,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1621,7 +1621,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1750,7 +1750,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1881,7 +1881,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2014,7 +2014,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2147,7 +2147,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2282,7 +2282,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2419,7 +2419,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2554,7 +2554,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2691,7 +2691,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2830,7 +2830,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2969,7 +2969,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3110,7 +3110,7 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3253,7 +3253,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3440,7 +3440,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3629,7 +3629,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3820,7 +3820,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -4015,7 +4015,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -4212,7 +4212,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -4411,7 +4411,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -4610,7 +4610,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -4811,7 +4811,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -5014,7 +5014,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -5221,7 +5221,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -5430,7 +5430,7 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -5641,7 +5641,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -5836,7 +5836,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -6033,7 +6033,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -6232,7 +6232,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -6435,7 +6435,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -6640,7 +6640,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -6847,7 +6847,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -7054,7 +7054,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -7263,7 +7263,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -7474,7 +7474,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -7689,7 +7689,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -7906,7 +7906,7 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -8125,7 +8125,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -8436,7 +8436,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -8749,7 +8749,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -9064,7 +9064,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -9391,7 +9391,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -9720,7 +9720,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -10051,7 +10051,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -10386,7 +10386,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -10723,7 +10723,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -11062,7 +11062,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -11413,7 +11413,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -11766,7 +11766,7 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -12121,7 +12121,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -12448,7 +12448,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -12777,7 +12777,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -13108,7 +13108,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -13451,7 +13451,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -13796,7 +13796,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -14143,7 +14143,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -14494,7 +14494,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -14847,7 +14847,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -15202,7 +15202,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -15569,7 +15569,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -15938,7 +15938,7 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 45cf74d9..50fd7e34 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -27,23 +27,17 @@ const containerMinHeight = StyleSheet.create(({ theme }) => ({ xlarge: { minHeight: theme.InputSize.xlarge['min-height'] }, })) -// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 -// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-1; value=3.5 -// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-2; value=7 -// TODO(tokens-migration): reason=missing; legacy=typography.Color.Common.text-color-secondary; value=#85888e export const inputStyles = StyleSheet.create( ({ primitive, components, semantic, - border, - typography, - spacing, + fonts, }) => ({ container: { flexDirection: 'row', - borderWidth: border.Width.border, + borderWidth: semantic.dimension.borderWidth[100], borderRadius: components.inputtext.root.borderRadius, borderColor: components.inputtext.root.borderColor, backgroundColor: components.inputtext.root.background, @@ -80,7 +74,7 @@ export const inputStyles = StyleSheet.create( paddingHorizontal: components.inputtext.root.paddingX, paddingTop: 26, paddingBottom: 12, - borderRadius: border.Radius['rounded-xl'], + borderRadius: semantic.dimension.borderRadius[300], overflow: 'hidden', }, inputFont: { @@ -115,9 +109,9 @@ export const inputStyles = StyleSheet.create( right: 7, top: 19, paddingVertical: 0, - paddingLeft: spacing.Padding['p-1'], - paddingRight: spacing.Padding['p-2'], - color: typography.Color.Common['text-color-secondary'], + paddingLeft: semantic.dimension.space[100], + paddingRight: semantic.dimension.space[200], + color: semantic.colorScheme.color.fg.muted, includeFontPadding: false, verticalAlign: 'middle', fontSize: primitive.fonts.fontSize[300], @@ -125,7 +119,7 @@ export const inputStyles = StyleSheet.create( }, labelReducedSize: { fontSize: primitive.fonts.fontSize[100], - paddingVertical: spacing.Padding['p-1'], + paddingVertical: semantic.dimension.space[100], top: 7, fontFamily: fonts.primary, }, diff --git a/src/components/List/Base/ListBase.tsx b/src/components/List/Base/ListBase.tsx index d16640ea..825be9c7 100644 --- a/src/components/List/Base/ListBase.tsx +++ b/src/components/List/Base/ListBase.tsx @@ -142,31 +142,31 @@ const ListBaseTestId = { } const styles = StyleSheet.create( - ({ primitive, spacing, theme, background }) => ({ + ({ semantic, primitive, theme, background }) => ({ container: { flexDirection: 'row', - paddingLeft: spacing.Padding['p-4'], - gap: spacing.Padding['p-4'], + paddingLeft: semantic.dimension.space[400], + gap: semantic.dimension.space[400], alignItems: 'center', }, pressed: { backgroundColor: background.Common['bg-surface-ground-hover'] }, disabled: { opacity: 0.6 }, - leftIcon: { paddingVertical: spacing.Padding['p-4'] }, + leftIcon: { paddingVertical: semantic.dimension.space[400] }, content: { flex: 1, flexDirection: 'row', justifyContent: 'space-between', - paddingVertical: spacing.Padding['p-2'], - paddingEnd: spacing.Padding['p-4'], - gap: spacing.Gap['gap-4'], + paddingVertical: semantic.dimension.space[200], + paddingEnd: semantic.dimension.space[400], + gap: semantic.dimension.space[400], }, labelContainer: { - paddingVertical: spacing.Padding['p-2'], - gap: spacing.Gap['gap-2'], + paddingVertical: semantic.dimension.space[200], + gap: semantic.dimension.space[200], flex: 1, }, - titleContainer: { gap: spacing.Gap['gap-1'] }, - extraContainer: { paddingVertical: spacing.Padding['p-2'] }, + titleContainer: { gap: semantic.dimension.space[100] }, + extraContainer: { paddingVertical: semantic.dimension.space[200] }, icon: { width: primitive.fonts.fontSize[600], height: primitive.fonts.fontSize[600], @@ -174,8 +174,8 @@ const styles = StyleSheet.create( rightSection: { flexDirection: 'row', alignItems: 'center', - paddingVertical: spacing.Padding['p-2'], - gap: spacing.Gap['gap-4'], + paddingVertical: semantic.dimension.space[200], + gap: semantic.dimension.space[400], }, divider: { borderTopColor: theme.Surface['surface-border'], 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 38df4bc0..0b16ef10 100644 --- a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap +++ b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap @@ -261,7 +261,7 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` "gap": 14, "justifyContent": "space-between", "paddingEnd": 14, - "paddingVertical": 7, + "paddingVertical": 8, }, {}, ] @@ -271,8 +271,8 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` style={ { "flex": 1, - "gap": 7, - "paddingVertical": 7, + "gap": 8, + "paddingVertical": 8, } } > @@ -300,7 +300,7 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` @@ -361,14 +361,14 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } > @@ -816,7 +816,7 @@ exports[`ListBase tests ListBase full disabled 1`] = ` "gap": 14, "justifyContent": "space-between", "paddingEnd": 14, - "paddingVertical": 7, + "paddingVertical": 8, }, {}, ] @@ -826,8 +826,8 @@ exports[`ListBase tests ListBase full disabled 1`] = ` style={ { "flex": 1, - "gap": 7, - "paddingVertical": 7, + "gap": 8, + "paddingVertical": 8, } } > @@ -855,7 +855,7 @@ exports[`ListBase tests ListBase full disabled 1`] = ` @@ -916,14 +916,14 @@ exports[`ListBase tests ListBase full disabled 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } > @@ -1375,7 +1375,7 @@ exports[`ListBase tests ListBase maximal config 1`] = ` "gap": 14, "justifyContent": "space-between", "paddingEnd": 14, - "paddingVertical": 7, + "paddingVertical": 8, }, { "borderTopColor": "#e2e2e4", @@ -1388,8 +1388,8 @@ exports[`ListBase tests ListBase maximal config 1`] = ` style={ { "flex": 1, - "gap": 7, - "paddingVertical": 7, + "gap": 8, + "paddingVertical": 8, } } > @@ -1417,7 +1417,7 @@ exports[`ListBase tests ListBase maximal config 1`] = ` @@ -1478,14 +1478,14 @@ exports[`ListBase tests ListBase maximal config 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } > @@ -1733,7 +1733,7 @@ exports[`ListBase tests ListBase minimal config 1`] = ` "gap": 14, "justifyContent": "space-between", "paddingEnd": 14, - "paddingVertical": 7, + "paddingVertical": 8, }, {}, ] @@ -1743,15 +1743,15 @@ exports[`ListBase tests ListBase minimal config 1`] = ` style={ { "flex": 1, - "gap": 7, - "paddingVertical": 7, + "gap": 8, + "paddingVertical": 8, } } > @@ -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/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index 37dd6dc3..26ae244d 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -135,48 +135,45 @@ export const MenuItemTemplate = memo( // `transparent` здесь — отсутствие фона и границы, а не цвет дизайн-системы: // у menu.item нет background и borderColor, прозрачность не выражена semantic-токеном. -// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 -const styles = StyleSheet.create( - ({ components, semantic, spacing, border }) => ({ - container: { - borderColor: 'transparent', - borderWidth: border.Width.border, - borderRadius: components.menu.item.borderRadius, - backgroundColor: 'transparent', - }, - containerPressed: { backgroundColor: components.menu.item.focusBackground }, - containerDisabled: { - borderColor: 'transparent', - backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, - opacity: 0.6, - }, - separator: { - borderTopWidth: 1, - borderTopColor: components.menu.separator.borderColor, - paddingTop: components.menu.extend.extItem.caption.gap, - }, - contentContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: components.menu.item.gap, - paddingHorizontal: components.menu.item.paddingLeft, - paddingVertical: components.menu.item.paddingTop, - }, - accessory: { - color: components.menu.item.icon.color, - width: components.menu.extend.iconSize, - height: components.menu.extend.iconSize, - }, - templateContainer: { - flexDirection: 'row', - gap: spacing.Gap['gap-2'], - flex: 1, - }, - icon: { - width: components.menu.extend.iconSize, - height: components.menu.extend.iconSize, - color: components.menu.item.icon.color, - }, - textContainer: { gap: spacing.Gap['gap-1'], flex: 1 }, - }) -) +const styles = StyleSheet.create(({ components, semantic }) => ({ + container: { + borderColor: 'transparent', + borderWidth: semantic.dimension.borderWidth[100], + borderRadius: components.menu.item.borderRadius, + backgroundColor: 'transparent', + }, + containerPressed: { backgroundColor: components.menu.item.focusBackground }, + containerDisabled: { + borderColor: 'transparent', + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, + opacity: 0.6, + }, + separator: { + borderTopWidth: 1, + borderTopColor: components.menu.separator.borderColor, + paddingTop: components.menu.extend.extItem.caption.gap, + }, + contentContainer: { + flexDirection: 'row', + alignItems: 'center', + gap: components.menu.item.gap, + paddingHorizontal: components.menu.item.paddingLeft, + paddingVertical: components.menu.item.paddingTop, + }, + accessory: { + color: components.menu.item.icon.color, + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, + }, + templateContainer: { + flexDirection: 'row', + gap: semantic.dimension.space[200], + flex: 1, + }, + icon: { + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, + color: components.menu.item.icon.color, + }, + 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 9ec0e4fe..ffadc7b0 100644 --- a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap +++ b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap @@ -77,7 +77,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -233,7 +233,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -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, } } > @@ -794,7 +794,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -802,7 +802,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1019,7 +1019,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1140,7 +1140,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -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, } } > @@ -1458,7 +1458,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1579,7 +1579,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1686,7 +1686,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1842,7 +1842,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -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, } } > @@ -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, } } > diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index d15682d2..53054bfd 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -218,14 +218,11 @@ export const Message = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 -// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-4; value=14 -// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-4; value=14 const messageStyles = StyleSheet.create( - ({ primitive, components, spacing, border }) => ({ + ({ semantic, primitive, components }) => ({ container: { borderRadius: components.message.root.borderRadius, - borderWidth: border.Width.border, + borderWidth: semantic.dimension.borderWidth[100], overflow: 'hidden', variants: { severity: { @@ -251,10 +248,11 @@ const messageStyles = StyleSheet.create( content: { flexGrow: 1, borderLeftWidth: - components.message.extend.extAccentLine.width - border.Width.border, - padding: spacing.Padding['p-4'], + components.message.extend.extAccentLine.width - + semantic.dimension.borderWidth[100], + padding: semantic.dimension.space[400], paddingLeft: components.message.content.padding, - gap: spacing.Gap['gap-4'], + gap: semantic.dimension.space[400], variants: { severity: { info: { @@ -272,7 +270,7 @@ const messageStyles = StyleSheet.create( }, }, }, - titleRow: { flexDirection: 'row', gap: spacing.Gap['gap-4'] }, + titleRow: { flexDirection: 'row', gap: semantic.dimension.space[400] }, titleTextContainer: { flex: 1, alignSelf: 'center', diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index cd9f417a..71e09ec4 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/RadioButton/RadioButton.tsx @@ -68,12 +68,11 @@ export const RadioButton = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=border.Radius.rounded-full; value=100 -const radioStyles = StyleSheet.create(({ components, border }) => ({ +const radioStyles = StyleSheet.create(({ semantic, components }) => ({ container: { width: components.radiobutton.root.width, height: components.radiobutton.root.height, - borderRadius: border.Radius['rounded-full'], + borderRadius: semantic.dimension.borderRadius.max, borderWidth: 1, alignItems: 'center', justifyContent: 'center', @@ -134,7 +133,7 @@ const radioStyles = StyleSheet.create(({ components, border }) => ({ center: { width: components.radiobutton.icon.size, height: components.radiobutton.icon.size, - borderRadius: border.Radius['rounded-full'], + borderRadius: semantic.dimension.borderRadius.max, backgroundColor: components.radiobutton.root.background, transitionProperty: ['opacity'], transitionDuration: 100, diff --git a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap index 40cde9bf..43b79c4b 100644 --- a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap +++ b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap @@ -38,7 +38,7 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger "alignItems": "center", "backgroundColor": "#ffffff", "borderColor": "#f47f77", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -65,7 +65,7 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger "alignItems": "center", "backgroundColor": "#ffffff", "borderColor": "#f47f77", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -90,7 +90,7 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger jestInlineStyle={ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 0, "transitionDuration": 100, @@ -104,7 +104,7 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger [ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 0, "width": 12, @@ -154,7 +154,7 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = defaul "alignItems": "center", "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -181,7 +181,7 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = defaul "alignItems": "center", "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -206,7 +206,7 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = defaul jestInlineStyle={ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 0, "transitionDuration": 100, @@ -220,7 +220,7 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = defaul [ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 0, "width": 12, @@ -270,7 +270,7 @@ exports[`RadioButton snapshots checked = false, disabled = true, state = default "alignItems": "center", "backgroundColor": "#e2e2e4", "borderColor": "#cecfd2", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -298,7 +298,7 @@ exports[`RadioButton snapshots checked = false, disabled = true, state = default "alignItems": "center", "backgroundColor": "#e2e2e4", "borderColor": "#cecfd2", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -324,7 +324,7 @@ exports[`RadioButton snapshots checked = false, disabled = true, state = default jestInlineStyle={ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 0, "transitionDuration": 100, @@ -338,7 +338,7 @@ exports[`RadioButton snapshots checked = false, disabled = true, state = default [ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 0, "width": 12, @@ -388,7 +388,7 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = danger "alignItems": "center", "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -415,7 +415,7 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = danger "alignItems": "center", "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -440,7 +440,7 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = danger jestInlineStyle={ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 1, "transitionDuration": 100, @@ -454,7 +454,7 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = danger [ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 1, "width": 12, @@ -504,7 +504,7 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = default "alignItems": "center", "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -531,7 +531,7 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = default "alignItems": "center", "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -556,7 +556,7 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = default jestInlineStyle={ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 1, "transitionDuration": 100, @@ -570,7 +570,7 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = default [ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 1, "width": 12, @@ -620,7 +620,7 @@ exports[`RadioButton snapshots checked = true, disabled = true, state = default "alignItems": "center", "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -648,7 +648,7 @@ exports[`RadioButton snapshots checked = true, disabled = true, state = default "alignItems": "center", "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -674,7 +674,7 @@ exports[`RadioButton snapshots checked = true, disabled = true, state = default jestInlineStyle={ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 1, "transitionDuration": 100, @@ -688,7 +688,7 @@ exports[`RadioButton snapshots checked = true, disabled = true, state = default [ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 1, "width": 12, @@ -738,7 +738,7 @@ exports[`RadioButton snapshots default 1`] = ` "alignItems": "center", "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -765,7 +765,7 @@ exports[`RadioButton snapshots default 1`] = ` "alignItems": "center", "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, "height": 24, "justifyContent": "center", @@ -790,7 +790,7 @@ exports[`RadioButton snapshots default 1`] = ` jestInlineStyle={ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 0, "transitionDuration": 100, @@ -804,7 +804,7 @@ exports[`RadioButton snapshots default 1`] = ` [ { "backgroundColor": "#ffffff", - "borderRadius": 100, + "borderRadius": 1600, "height": 12, "opacity": 0, "width": 12, diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index 32cc783d..e6c8ad9d 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -154,7 +154,6 @@ export const SelectButtonItem = memo( ) // TODO(tokens-migration): reason=missing; legacy=theme.Button.Disabled.disabledButtonBorderColor; light=#a2a5a9; dark=#56595f -// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 const styles = StyleSheet.create( ({ @@ -163,8 +162,6 @@ const styles = StyleSheet.create( semantic, theme, - border, - fonts, }) => ({ container: { @@ -173,7 +170,7 @@ const styles = StyleSheet.create( alignItems: 'center', justifyContent: 'center', gap: components.selectbutton.extend.gap, - borderWidth: border.Width.border, + borderWidth: semantic.dimension.borderWidth[100], borderColor: 'transparent', }, small: { height: 28 }, diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 8b459ec8..c6151bf5 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -252,8 +252,7 @@ export const Slider = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=border.Width.border-3; value=3 -const styles = StyleSheet.create(({ components, border }) => { +const styles = StyleSheet.create(({ semantic, components }) => { return { container: { width: '100%', @@ -282,7 +281,7 @@ const styles = StyleSheet.create(({ components, border }) => { borderRadius: components.slider.handle.borderRadius, position: 'absolute', backgroundColor: components.slider.colorScheme.handle.content.background, - borderWidth: border.Width['border-3'], + borderWidth: semantic.dimension.borderWidth[300], borderColor: components.slider.handle.background, }, diff --git a/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap b/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap index 8153e102..9079a675 100644 --- a/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap +++ b/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap @@ -95,7 +95,7 @@ exports[`Slider snapshots default 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -111,7 +111,7 @@ exports[`Slider snapshots default 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -226,7 +226,7 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -242,7 +242,7 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -357,7 +357,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -373,7 +373,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -414,7 +414,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -430,7 +430,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -545,7 +545,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -561,7 +561,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -602,7 +602,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -618,7 +618,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -736,7 +736,7 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -752,7 +752,7 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -870,7 +870,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -886,7 +886,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -927,7 +927,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -943,7 +943,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -1061,7 +1061,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -1077,7 +1077,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -1118,7 +1118,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, @@ -1134,7 +1134,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 "backgroundColor": "#ffffff", "borderColor": "#2b2e33", "borderRadius": 1600, - "borderWidth": 3, + "borderWidth": 4, "height": 20, "position": "absolute", "width": 20, diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 25ecbc4c..1e9f2ecf 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -91,20 +91,18 @@ export const Tabs = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 -// TODO(tokens-migration): reason=missing; legacy=border.Width.border-2; value=2 -const styles = StyleSheet.create(({ components, border }) => ({ +const styles = StyleSheet.create(({ semantic, components }) => ({ container: { flexDirection: 'row', gap: components.tabs.tab.margin, - borderBottomWidth: border.Width.border, + 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: 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 51c730f9..e4a3b881 100644 --- a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +++ b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap @@ -171,7 +171,7 @@ exports[`TabItem component tests active: label, badge 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -611,7 +611,7 @@ exports[`TabItem component tests active: label, icon, badge 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -933,7 +933,7 @@ exports[`TabItem component tests disabled: label, badge 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -1375,7 +1375,7 @@ exports[`TabItem component tests disabled: label, icon, badge 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -1603,7 +1603,7 @@ exports[`TabItem component tests label, badge 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -2035,7 +2035,7 @@ exports[`TabItem component tests label, icon, badge 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -2476,7 +2476,7 @@ exports[`Tabs component tests disabled 1`] = ` "backgroundColor": "#f47f77", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, @@ -2933,7 +2933,7 @@ exports[`Tabs component tests normal 1`] = ` "backgroundColor": "#f47f77", }, { - "borderRadius": 100, + "borderRadius": 1600, "height": 24, "justifyContent": "center", "paddingHorizontal": 8, diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index 424be73b..bbce745a 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -119,15 +119,13 @@ export const ToggleButton = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1 -// TODO(tokens-migration): reason=missing; legacy=spacing.Padding.p-6; value=21 // TODO(tokens-migration): reason=missing; legacy=theme.Button.Common.buttonPaddingLeftRight; value=14 const toggleStyles = StyleSheet.create( - ({ primitive, components, theme, spacing, border, fonts }) => ({ + ({ semantic, primitive, components, theme, fonts }) => ({ container: { alignSelf: 'flex-start', borderRadius: components.togglebutton.root.borderRadius, - borderWidth: border.Width.border, + borderWidth: semantic.dimension.borderWidth[100], overflow: 'hidden', variants: { checked: { @@ -170,7 +168,7 @@ const toggleStyles = StyleSheet.create( alignSelf: 'flex-start', borderRadius: components.togglebutton.root.borderRadius, paddingVertical: components.togglebutton.root.paddingTop, - paddingHorizontal: spacing.Padding['p-6'], + paddingHorizontal: semantic.dimension.space[600], gap: components.togglebutton.extend.ext.gap, variants: { size: { diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 4f6725df..416f95e0 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -504,7 +504,7 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal "flexDirection": "row", "gap": 14, "minHeight": 49, - "paddingHorizontal": 21, + "paddingHorizontal": 20, "paddingVertical": 8, }, false, @@ -667,7 +667,7 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal "flexDirection": "row", "gap": 14, "minHeight": 56, - "paddingHorizontal": 21, + "paddingHorizontal": 20, "paddingVertical": 8, }, { diff --git a/src/components/Typography/Anchor.tsx b/src/components/Typography/Anchor.tsx index 326d4424..837ac539 100644 --- a/src/components/Typography/Anchor.tsx +++ b/src/components/Typography/Anchor.tsx @@ -134,7 +134,7 @@ export const Anchor = memo( ) const styles = StyleSheet.create( - ({ primitive, spacing, typography, fonts }) => ({ + ({ semantic, primitive, typography, fonts }) => ({ container: { flexDirection: 'row', alignItems: 'center' }, text: { flexShrink: 1, @@ -161,8 +161,8 @@ const styles = StyleSheet.create( width: primitive.fonts.fontSize[500], height: primitive.fonts.fontSize[500], }, - leftIconContainer: { paddingRight: spacing.Padding['p-2'] }, - rightIconContainer: { paddingLeft: spacing.Padding['p-2'] }, + leftIconContainer: { paddingRight: semantic.dimension.space[200] }, + rightIconContainer: { paddingLeft: semantic.dimension.space[200] }, }) ) diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 25a0e0ac..957ea923 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -57,10 +57,9 @@ export const Caption = ({ const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' } -// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-1; value=3.5 // Осознанный обход слоя components: цвет текста — семантическая роль, и своего // токена у Typography нет (компонент отсутствует в tokens.json). -const styles = StyleSheet.create(({ primitive, semantic, spacing, fonts }) => ({ +const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { fontSize: primitive.fonts.fontSize[200], includeFontPadding: false, @@ -74,7 +73,10 @@ const styles = StyleSheet.create(({ primitive, semantic, spacing, fonts }) => ({ primary: { color: semantic.colorScheme.color.fg.brand.default }, secondary: { color: semantic.colorScheme.color.fg.muted }, disabled: { opacity: 0.6 }, - withIconContainer: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, + withIconContainer: { + flexDirection: 'row', + gap: semantic.dimension.space[100], + }, icon: { width: primitive.fonts.fontSize[300], height: primitive.fonts.fontSize[300], diff --git a/src/components/Typography/Service.tsx b/src/components/Typography/Service.tsx index 6eeb8a97..21f49a37 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -86,7 +86,7 @@ export const Service = ({ } const styles = StyleSheet.create( - ({ primitive, typography, spacing, fonts }) => ({ + ({ semantic, primitive, typography, fonts }) => ({ iconBase: { width: primitive.fonts.fontSize[500], height: primitive.fonts.fontSize[500], @@ -96,8 +96,8 @@ const styles = StyleSheet.create( height: primitive.fonts.fontSize[300], }, - 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, diff --git a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap index b6f02517..35d71d48 100644 --- a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -82,7 +82,7 @@ exports[`Body component tests левая иконка, base, visited, testID = C onStartShouldSetResponder={[Function]} style={ { - "paddingRight": 7, + "paddingRight": 8, } } testID="AnchorLeftPressable" @@ -292,7 +292,7 @@ exports[`Body component tests левая иконка, правая иконка onStartShouldSetResponder={[Function]} style={ { - "paddingRight": 7, + "paddingRight": 8, } } testID="AnchorLeftPressable" @@ -484,7 +484,7 @@ exports[`Body component tests левая иконка, правая иконка onStartShouldSetResponder={[Function]} style={ { - "paddingLeft": 7, + "paddingLeft": 8, } } testID="AnchorRightPressable" @@ -680,7 +680,7 @@ exports[`Body component tests правая иконка, noWrapper 1`] = ` onStartShouldSetResponder={[Function]} style={ { - "paddingLeft": 7, + "paddingLeft": 8, } } testID="AnchorRightPressable" diff --git a/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap index bf651b8e..29c94249 100644 --- a/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Caption.test.tsx.snap @@ -31,7 +31,7 @@ exports[`Caption component tests color = default, disabled = false 2`] = ` style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -221,7 +221,7 @@ exports[`Caption component tests color = default, disabled = true 2`] = ` style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -411,7 +411,7 @@ exports[`Caption component tests color = primary, disabled = false 2`] = ` style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -601,7 +601,7 @@ exports[`Caption component tests color = primary, disabled = true 2`] = ` style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -791,7 +791,7 @@ exports[`Caption component tests color = secondary, disabled = false 2`] = ` style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -981,7 +981,7 @@ exports[`Caption component tests color = secondary, disabled = true 2`] = ` style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > diff --git a/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap index e3e32658..7af401b4 100644 --- a/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Service component tests base = false, showIcon = false, variant = dange style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -39,7 +39,7 @@ exports[`Service component tests base = false, showIcon = false, variant = dange style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -73,7 +73,7 @@ exports[`Service component tests base = false, showIcon = false, variant = help style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -107,7 +107,7 @@ exports[`Service component tests base = false, showIcon = false, variant = help style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -141,7 +141,7 @@ exports[`Service component tests base = false, showIcon = false, variant = info style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -175,7 +175,7 @@ exports[`Service component tests base = false, showIcon = false, variant = info style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -209,7 +209,7 @@ exports[`Service component tests base = false, showIcon = false, variant = succe style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -243,7 +243,7 @@ exports[`Service component tests base = false, showIcon = false, variant = succe style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -277,7 +277,7 @@ exports[`Service component tests base = false, showIcon = false, variant = warni style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -311,7 +311,7 @@ exports[`Service component tests base = false, showIcon = false, variant = warni style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -345,7 +345,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -481,7 +481,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -732,7 +732,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 1 style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -891,7 +891,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -1142,7 +1142,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 1 style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -1301,7 +1301,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -1552,7 +1552,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -1688,7 +1688,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -1939,7 +1939,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -2098,7 +2098,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -2349,7 +2349,7 @@ exports[`Service component tests base = true, showIcon = false, variant = danger style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2386,7 +2386,7 @@ exports[`Service component tests base = true, showIcon = false, variant = danger style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2423,7 +2423,7 @@ exports[`Service component tests base = true, showIcon = false, variant = help 1 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2460,7 +2460,7 @@ exports[`Service component tests base = true, showIcon = false, variant = help 2 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2497,7 +2497,7 @@ exports[`Service component tests base = true, showIcon = false, variant = info 1 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2534,7 +2534,7 @@ exports[`Service component tests base = true, showIcon = false, variant = info 2 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2571,7 +2571,7 @@ exports[`Service component tests base = true, showIcon = false, variant = succes style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2608,7 +2608,7 @@ exports[`Service component tests base = true, showIcon = false, variant = succes style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2645,7 +2645,7 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2682,7 +2682,7 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2719,7 +2719,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2858,7 +2858,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3112,7 +3112,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 1` style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3274,7 +3274,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3528,7 +3528,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 1` style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3690,7 +3690,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -3944,7 +3944,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -4083,7 +4083,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -4337,7 +4337,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -4499,7 +4499,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > From aaa881b30c58b0ac11ee0c1ae33d125ef3da0d67 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 18:11:51 +0800 Subject: [PATCH 38/47] =?UTF-8?q?docs(tokens):=20=D0=BE=D0=BF=D0=B8=D1=81?= =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=BC=D0=B8=D0=B3=D1=80=D0=B0=D1=86?= =?UTF-8?q?=D0=B8=D0=B8=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=BE=D0=B2=20=D0=BD=D0=B0=20=D1=82=D0=BE=D0=BA=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tokens-migration.md | 241 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 241 insertions(+) create mode 100644 docs/tokens-migration.md diff --git a/docs/tokens-migration.md b/docs/tokens-migration.md new file mode 100644 index 00000000..dd820614 --- /dev/null +++ b/docs/tokens-migration.md @@ -0,0 +1,241 @@ +# Миграция компонентов на токены из `tokens.json` + +Документ описывает работу в ветке `feature/tokens-migration-cleanup`, +ответвлённой от `feature/components-token-migration` (PR #56, коммит +`1b00580a`). + +Файл не попадает в публикуемый пакет: `docs` перечислен в `.npmignore`, а +`package.json` публикует только `dist`. + +## Зачем + +PR #56 перевёл компоненты на неймспейс `components.*` и оставил в коде 157 +комментариев `TODO(tokens-migration)` — мест, где компонент не получил нужного +токена либо получил значение, расходящееся с новой базой. Эта ветка разбирает +их: **157 → 10**. + +Формат комментария: + +``` +// TODO(tokens-migration): reason=missing; legacy=<путь в коде>; value=<значение> +// TODO(tokens-migration): reason=value-mismatch; legacy=<путь>; value=<текущее>; target=<целевой токен>; targetValue=<целевое> +``` + +Важная особенность: при `reason=missing` поле `legacy` называет **не** +отсутствующий токен, а тот, что фактически используется. Прочтение «токена нет в +Figma» ошибочно — проверка резолвом показала, что все названные в TODO токены +существуют. + +## Ключевая находка: две базы `rem` + +Расхождения значений объясняются одной причиной. Legacy-ассеты +(`src/theme/assets/*.json`, лежат в репозитории с первого коммита, ноябрь 2025) +построены на `1rem = 14px`. `design-tokens/input/tokens.json` хранит значения в +`rem`, и генератор считает их при `1rem = 16px`. + +Это подтверждается снимком Figma (`passport.md` из выгрузки дизайн-системы), где +те же ключи токенов имеют значения ровно в `0.875` раза меньше: + +| Токен | Figma (база 14) | `tokens.json` (база 16) | +| -------------- | --------------: | ----------------------: | +| `fontSize/300` | 14 | 16 | +| `fontSize/500` | 17.5 | 20 | +| `fontSize/650` | 26.25 | 30 | + +Решение по базе 16px принято владельцем дизайн-системы. + +## Что изменилось + +### Генератор токенов + +`scripts/token-generator` теперь выводит пятый файл — +`src/theme/tokens/fonts.json` с группой `primitive.fonts` (`fontFamily`, +`fontSize`, `lineHeight`, `fontWeight`, `letterSpacing`). Значения +нормализованы: `rem` пересчитан в px. + +Отсутствие `primitive.fonts` во входных токенах — ошибка генерации: тема без +шрифтов нерабочая. + +Добавлен ревизор `yarn tokens:audit`: разбирает все `TODO(tokens-migration)` и +резолвит каждый `legacy`-путь в сгенерированных токенах и legacy-ассетах. +Показывает, существует ли токен и расходится ли значение. Первый прогон дал +ровно тот же состав из 157 позиций, что и ручная выгрузка, — парсер сверен. + +### Тема + +```ts +export const lightTheme: ThemeType = { + semantic: lightSemanticTokens, // из tokens.json + components: lightComponentTokens, // из tokens.json + theme: { ...lightThemeAssets, InputSize, ModalSize, custom }, // legacy + ...commonTheme, // primitive.fonts из tokens.json + legacy-остатки +} +``` + +Появился неймспейс `primitive.fonts`. Публичный `fonts: { primary, secondary }` +не изменился, но теперь собирается из токенов: `heading → primary`, +`base → secondary`. Хардкод `{ primary: 'TT Fellows', secondary: 'Noto Sans' }` +из `lightTheme.ts` и `darkTheme.ts` убран. + +В `types.ts` добавлен тип `FontPrimitives`: JSON отдаёт `fontWeight` как +`number`, а `TextStyle` требует литеральный тип, поэтому приведение сделано в +одном месте. + +### Типографика + +| Свойство | Было | Стало | Источник | +| ---------------------- | ---------------------: | ---------------------: | ---------------------------------------- | +| `text-xs` | 10.5 | 12 | `fontSize[100]` | +| `text-sm` (TT Fellows) | 12.25 | 12 | `fontSize[100]` | +| `text-sm` (Noto Sans) | 12.25 | 14 | `fontSize[200]` | +| `text-base` | 14 | 16 | `fontSize[300]` | +| `text-lg` | 15.75 | 18 | `fontSize[400]` | +| `text-xl` | 17.5 | 20 | `fontSize[500]` | +| `text-2xl` | 21 | 24 | `fontSize[600]` | +| `text-3xl` | 26.25 | 30 | `fontSize[650]` | +| `lineHeight` | 15 / 18 / 20 / 21 / 24 | 18 / 20 / 22 / 24 / 28 | `lineHeight[300…600]` | +| `letterSpacing` | −0.25 / −0.5 | −0.32 / −0.48 | `letterSpacing[200]`, `[400]` | +| `fontWeight` | 400 / 600 / 700 | те же | `fontWeight.regular / .demibold / .bold` | + +`text-sm` разведён по шрифту не произвольно: карта `ds-typography.json` +фиксирует, что этот ключ резолвится в разные размеры для акцентного и базового +шрифтов. Затронуты `ButtonLabel`, `ToggleButton`, `SelectButtonItem`, +`useInputStyles`, `Title` (акцентный) и `Body`, `Caption`, `Subtitle`, +`Service`, `Anchor` (базовый). + +`fontWeight` в снапшотах сменил тип со строки `"400"` на число `400` — React +Native принимает оба, рендер идентичен. + +### Отступы, рамки, скругления + +Переведены с legacy-ассетов на `semantic.dimension`: + +| Было | Стало | Токен | +| ----------------------------------- | ----: | ------------------- | +| `spacing.Gap['gap-1']` 3.5 | 4 | `space[100]` | +| `spacing.Gap['gap-2']` 7 | 8 | `space[200]` | +| `spacing.Padding['p-4']` 14 | 14 | `space[400]` | +| `spacing.Padding['p-6']` 21 | 20 | `space[600]` | +| `border.Width.border` 1 | 1 | `borderWidth[100]` | +| `border.Width['border-3']` 3 | 4 | `borderWidth[300]` | +| `border.Radius['rounded-full']` 100 | 1600 | `borderRadius.max` | +| `border.Radius['rounded-xl']` 10.5 | 10 | `borderRadius[300]` | + +### Компонентные токены + +41 обращение переведено на токены, названные в поле `target` самих комментариев. +Из них изменяют внешний вид не из-за базы `rem`, а по существу: + +| Компонент | Свойство | Было | Стало | +| -------------- | ---------------------- | -------: | ----: | +| `Badge` | `borderRadius` | 100 | 8 | +| `ProgressBar` | `borderRadius` | 100 | 14 | +| `Skeleton` | `borderRadius` | 7 | 14 | +| `Accordion` | `content.paddingRight` | 0 | 24 | +| `Message` | `content.paddingLeft` | 17.5 | 14 | +| `SelectButton` | `gap` | 7 / 10.5 | 4 | +| `ToggleButton` | `gap`, `paddingRight` | 10.5 | 14 | + +### Устранённые заимствования + +`Chip`, `Tabs`, `InputGroupAddon`, `InputTextBase` и `MenuItem` брали +disabled-палитру у кнопки (`components.button.extend.disabled*`). В +`tokens.json` эти токены сами являются ссылками на роли: + +```json +"disabledBackground": "{color.bg.neutral.weak.disabled}", +"disabledColor": "{color.fg.muted}" +``` + +Генератор резолвит ссылку и записывает конкретный цвет, поэтому связь с ролью +терялась. Компоненты переведены на роли напрямую — теперь изменение кнопки не +затрагивает пять чужих компонентов. Значения не изменились. + +Цвет вторичного текста (`typography.Color.Common['text-color-secondary']`, 5 +мест) переведён на `semantic.colorScheme.color.fg.muted`. В светлой теме +значение то же (`#85888e`), в тёмной раньше было такое же, теперь `#a2a5a9` — +появилась тема-зависимость, которой не было. + +### Узаконенные обращения + +Часть комментариев помечала проблему, которой нет. Они сняты и заменены +обоснованием прямо в коде: + +- **`Typography` (10)** — обращается к `semantic.color.fg.*` минуя слой + `components`. Цвет текста и есть семантическая роль; компонента `typography` в + `tokens.json` нет. +- **`InputOtp` (5)** — использует `components.inputtext.root.*`. Поле OTP должно + выглядеть как обычное поле ввода, собственные токены `inputotp` описывают + только отличия. Тот же приём в пресете PrimeUIX lara, где `inputotp` задаёт + лишь `gap` и `width`. +- **`transparent` (3)** — в `Chip` и `MenuItem` литерал оставлен: у `chip.root` + нет `borderColor`, у `menu.item` нет `background`, прозрачность не выражена + semantic-токеном. У кнопки для варианта `link` токен нашёлся — + `button.extend.extLink.background`. + +## Осталось: 10 позиций + +Кодом не закрываются, требуют новых токенов в `tokens.json`: + +| Что | Шт | Чего не хватает | +| --------------------------------------------- | --: | -------------------------------------- | +| `theme.InputSize.*.min-height` (35 / 49 / 56) | 3 | токена высоты поля ввода | +| `theme.Button.*` (padding, disabled border) | 2 | токенов `togglebutton` | +| `semantic.fg.muted` в `SelectButton` | 2 | собственного токена неактивного пункта | +| `components.badge.root.height` в `Tabs` | 1 | `components.tabs.tab.height` | +| `border.Color.Service.border-success.400` | 1 | цветовой роли | +| `global.Neutrals.White.white-100` | 1 | цветовой роли | + +## Не тронуто намеренно + +**`Timer`, `TimerFlip`** — используют +`typography.Color.Surface['text-surface-0']` (`#181a1f`). В semantic этот цвет +есть только как `fg.active` (светлая тема) и `fg.inverse.active` (тёмная), то +есть «активное состояние», а не «цвет текста». Соответствие по значению, но не +по смыслу. + +**Сервисные цвета `Typography.Service` и `Anchor`** (7 мест) — legacy-палитра +построена на «600»-оттенках, а `semantic.fg.status.*.default` на «500». Например +`text-info` `#1e76cd` совпадает не с `status.info.default` (`#4496e8`), а с +`status.info.hover`. Выбор оттенка — решение дизайнера. + +**45 числовых литералов в стилях** (`lineHeight: 20`, `minHeight: 35`, +`width`/`height` иконок) — на них не было комментариев `TODO`, в счётчик 157 они +не входили. Реальный объём «не на токенах» больше, чем показывает счётчик. + +**Размеры иконок на шрифтовой шкале.** `typography.Size` местами задавал не +шрифт, а размер иконки. Где в `tokens.json` есть `iconSize`, обращение +переведено на него; где нет — иконка осталась на `primitive.fonts.fontSize`. + +## Структурный риск + +Генератор покрывает `semantic`, `components` и `primitive.fonts`. Неймспейс +`theme.*` (`assets/themeLight.json`, `InputSize`, `ModalSize`, `custom`) +обновляется руками и с `tokens.json` не связан. Подмена входного файла его не +затронет, и расхождение обнаружится не при генерации, а глазами в интерфейсе — +тем же путём, каким возникли исходные 157 комментариев. + +`src/theme/assets/DEPRECATED_TOKENS.md` фиксирует, что `theme.Button.*`, +`theme.Form.inputSwitch.*` и `theme.General.primaryColor` входят в публичный +`ThemeType`, поэтому их удаление — breaking change. + +## Проверка + +``` +yarn tokens:audit # разбор оставшихся TODO +yarn tokens:validate # типы генератора + актуальность сгенерированных токенов +yarn tsc --noEmit +yarn lint:check +yarn jest +``` + +На момент последнего коммита: `tsc` без ошибок, `eslint` без ошибок, +сгенерированные токены актуальны, 1712 тестов проходят. + +**Снапшоты обновлены полностью** — метрики изменились почти везде. Отдельно +стоит знать: три набора (`Avatar`, `DialogHeader`, `ListBase`, 17 тестов) падали +ещё до начала этой работы, на исходном коммите ветки PR — снапшоты там не были +перегенерированы автором. При обновлении они перезаписаны вместе со всеми, то +есть тот долг не разобран, а зафиксирован. + +Изменения затронули 47 файлов кода и 29 файлов снапшотов. From 7f5d39a713a6d6ba14f543deb8d033f4002f3f47 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 18:24:23 +0800 Subject: [PATCH 39/47] =?UTF-8?q?feat(tokens):=20=D1=80=D0=B0=D0=B7=D0=BC?= =?UTF-8?q?=D0=B5=D1=80=D1=8B=20=D0=BF=D0=BE=D0=BB=D0=B5=D0=B9=20=D0=B8=20?= =?UTF-8?q?=D1=86=D0=B2=D0=B5=D1=82=D0=BE=D0=B2=D1=8B=D0=B5=20=D1=80=D0=BE?= =?UTF-8?q?=D0=BB=D0=B8=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D0=B4=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D0=BD=D0=B0=20semantic-=D1=82=D0=BE=D0=BA=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Chip/Chip.tsx | 4 +--- .../Input/InputTextBase/useInputStyles.ts | 11 ++++------ .../Input/__tests__/InputTextBase.test.tsx | 10 +++++----- .../ProgressSpinner/ProgressSpinner.tsx | 5 ++--- .../SelectButton/SelectButtonItem.tsx | 20 +++++++++++-------- .../__tests__/SelectButtonItem.test.tsx | 4 ++-- src/components/Tabs/TabItem/TabItem.tsx | 3 +-- src/components/ToggleButton/ToggleButton.tsx | 13 ++++++------ .../__snapshots__/ToggleButton.test.tsx.snap | 8 ++++---- 9 files changed, 37 insertions(+), 41 deletions(-) diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 63f81dd9..34d4df95 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -99,14 +99,12 @@ export const Chip = memo( // `transparent` здесь — отсутствие границы, а не цвет дизайн-системы: // у chip.root нет borderColor, прозрачность не выражена semantic-токеном. -// TODO(tokens-migration): reason=missing; legacy=border.Color.Service.border-success.400; value=#77f48a const styles = StyleSheet.create( ({ primitive, components, semantic, - border, fonts, }) => ({ chip: { @@ -145,7 +143,7 @@ const styles = StyleSheet.create( disabledText: { color: semantic.colorScheme.color.fg.muted }, pressedClose: { borderWidth: semantic.dimension.borderWidth[300], - borderColor: border.Color.Service['border-success'][400], + borderColor: semantic.colorScheme.color.border.status.success.strong, borderRadius: semantic.dimension.borderRadius.max, }, }) diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 50fd7e34..52e1c0dd 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -18,13 +18,10 @@ export const useInputContainerMinHeight = ( return { minHeight } } -// TODO(tokens-migration): reason=missing; legacy=theme.InputSize.base.min-height; value=35 -// TODO(tokens-migration): reason=missing; legacy=theme.InputSize.large.min-height; value=49 -// TODO(tokens-migration): reason=missing; legacy=theme.InputSize.xlarge.min-height; value=56 -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( diff --git a/src/components/Input/__tests__/InputTextBase.test.tsx b/src/components/Input/__tests__/InputTextBase.test.tsx index 904989c6..6b737e8e 100644 --- a/src/components/Input/__tests__/InputTextBase.test.tsx +++ b/src/components/Input/__tests__/InputTextBase.test.tsx @@ -190,7 +190,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.base['min-height'], + minHeight: lightTheme.semantic.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: lightTheme.semantic.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: lightTheme.semantic.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: lightTheme.semantic.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: lightTheme.semantic.dimension.size[1100], }) }) diff --git a/src/components/ProgressSpinner/ProgressSpinner.tsx b/src/components/ProgressSpinner/ProgressSpinner.tsx index cef30d05..4cb6372e 100644 --- a/src/components/ProgressSpinner/ProgressSpinner.tsx +++ b/src/components/ProgressSpinner/ProgressSpinner.tsx @@ -125,11 +125,10 @@ export const ProgressSpinner = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=global.Neutrals.White.white-100; value=#ffffff const styles = StyleSheet.create( - ({ components: { progressspinner }, global }) => ({ + ({ semantic, components: { progressspinner } }) => ({ primary: { color: progressspinner.colorScheme.root.colorOne }, - white: { color: global.Neutrals.White['white-100'] }, + white: { color: semantic.colorScheme.color.fg.on.fill.default }, }) ) diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index e6c8ad9d..ead81026 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -127,9 +127,9 @@ export const SelectButtonItem = memo( {...iconSize} source={Icon} testID='SelectButtonItem_Icon' - uniProps={({ components, semantic, theme }) => ({ + uniProps={({ components, semantic }) => ({ color: disabled - ? theme.Button.Disabled.disabledButtonBorderColor + ? semantic.colorScheme.color.border.neutral.strong : isSelected ? components.selectbutton.extend.checkedColor : semantic.colorScheme.color.fg.muted, @@ -153,14 +153,12 @@ export const SelectButtonItem = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=theme.Button.Disabled.disabledButtonBorderColor; light=#a2a5a9; dark=#56595f // TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 const styles = StyleSheet.create( ({ primitive, components, semantic, - theme, fonts, }) => ({ @@ -175,12 +173,18 @@ const styles = StyleSheet.create( }, small: { height: 28 }, base: { height: 35 }, - large: { height: 49, gap: components.selectbutton.extend.gap }, - xlarge: { height: 56, gap: components.selectbutton.extend.gap }, + 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: 1, - borderColor: theme.Button.Disabled.disabledButtonBorderColor, + borderColor: semantic.colorScheme.color.border.neutral.strong, }, iconSmall: { width: primitive.fonts.fontSize[300], @@ -207,7 +211,7 @@ const styles = StyleSheet.create( textColor: { color: semantic.colorScheme.color.fg.muted }, checkedTextColor: { color: components.selectbutton.extend.checkedColor }, disabledTextColor: { - color: theme.Button.Disabled.disabledButtonBorderColor, + 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 c9fcc72a..037fb6f3 100644 --- a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx +++ b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx @@ -77,14 +77,14 @@ const sizeCases: Array<{ { name: 'большой', size: 'large', - height: lightTheme.theme.Button.Common.buttonHeightLG, + height: lightTheme.semantic.dimension.size[1300], iconSize: lightTheme.primitive.fonts.fontSize[600], fontSize: lightTheme.primitive.fonts.fontSize[500], }, { name: 'самый большой', size: 'xlarge', - height: lightTheme.theme.Button.Common.buttonHeightXL, + height: lightTheme.semantic.dimension.size[1400], iconSize: 28, fontSize: lightTheme.primitive.fonts.fontSize[600], }, diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index 0fc092c4..9ee94492 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -86,14 +86,13 @@ export const TabItem = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=components.badge.root.height; value=24 const styles = StyleSheet.create( ({ primitive, components, semantic, fonts }) => ({ container: { alignItems: 'center', flexDirection: 'row', - height: components.badge.root.height + components.tabs.tab.padding * 2, + 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, diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index bbce745a..45a75bff 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -119,9 +119,8 @@ export const ToggleButton = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=theme.Button.Common.buttonPaddingLeftRight; value=14 const toggleStyles = StyleSheet.create( - ({ semantic, primitive, components, theme, fonts }) => ({ + ({ semantic, primitive, components, fonts }) => ({ container: { alignSelf: 'flex-start', borderRadius: components.togglebutton.root.borderRadius, @@ -172,15 +171,15 @@ const toggleStyles = StyleSheet.create( gap: components.togglebutton.extend.ext.gap, variants: { size: { - xlarge: { minHeight: 56 }, - large: { minHeight: 49 }, + xlarge: { minHeight: semantic.dimension.size[1400] }, + large: { minHeight: semantic.dimension.size[1300] }, base: { - minHeight: 35, - paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, + minHeight: semantic.dimension.size[1100], + paddingHorizontal: components.togglebutton.root.paddingLeft, gap: components.togglebutton.root.gap, }, small: { - minHeight: 28, + minHeight: semantic.dimension.size[800], paddingHorizontal: components.togglebutton.root.sm.paddingRight, gap: components.togglebutton.root.gap, }, diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 416f95e0..6f1ddbaa 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -352,7 +352,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr "borderRadius": 1600, "flexDirection": "row", "gap": 8, - "minHeight": 35, + "minHeight": 40, "paddingHorizontal": 14, "paddingVertical": 8, }, @@ -503,7 +503,7 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal "borderRadius": 1600, "flexDirection": "row", "gap": 14, - "minHeight": 49, + "minHeight": 56, "paddingHorizontal": 20, "paddingVertical": 8, }, @@ -666,7 +666,7 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal "borderRadius": 1600, "flexDirection": "row", "gap": 14, - "minHeight": 56, + "minHeight": 64, "paddingHorizontal": 20, "paddingVertical": 8, }, @@ -816,7 +816,7 @@ exports[`ToggleButton snapshots default 1`] = ` "borderRadius": 1600, "flexDirection": "row", "gap": 8, - "minHeight": 35, + "minHeight": 40, "paddingHorizontal": 14, "paddingVertical": 8, }, From bcd03edf040a61db88483f55a70952a3784b5e32 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 18:27:12 +0800 Subject: [PATCH 40/47] =?UTF-8?q?docs(tokens):=20=D0=B0=D0=BA=D1=82=D1=83?= =?UTF-8?q?=D0=B0=D0=BB=D0=B8=D0=B7=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD?= =?UTF-8?q?=D0=BE=20=D0=BE=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8=D0=B5=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=B4=20=D1=84=D0=B8=D0=BD=D0=B0=D0=BB=D1=8C=D0=BD?= =?UTF-8?q?=D0=BE=D0=B5=20=D1=81=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tokens-migration.md | 61 ++++++++++++++++++++++++++++++---------- 1 file changed, 46 insertions(+), 15 deletions(-) diff --git a/docs/tokens-migration.md b/docs/tokens-migration.md index dd820614..657379cf 100644 --- a/docs/tokens-migration.md +++ b/docs/tokens-migration.md @@ -12,7 +12,7 @@ PR #56 перевёл компоненты на неймспейс `components.*` и оставил в коде 157 комментариев `TODO(tokens-migration)` — мест, где компонент не получил нужного токена либо получил значение, расходящееся с новой базой. Эта ветка разбирает -их: **157 → 10**. +их: **157 → 2**. Формат комментария: @@ -173,18 +173,38 @@ disabled-палитру у кнопки (`components.button.extend.disabled*`). semantic-токеном. У кнопки для варианта `link` токен нашёлся — `button.extend.extLink.background`. -## Осталось: 10 позиций +### Размеры полей и последние цветовые роли -Кодом не закрываются, требуют новых токенов в `tokens.json`: +Высоты `InputSize` заданы целыми `rem`: `35 = 2.5rem`, `49 = 3.5rem`, +`56 = 4rem` при базе 14. При базе 16 это `40 / 56 / 64`, и все три значения есть +в `dimension.size`: -| Что | Шт | Чего не хватает | -| --------------------------------------------- | --: | -------------------------------------- | -| `theme.InputSize.*.min-height` (35 / 49 / 56) | 3 | токена высоты поля ввода | -| `theme.Button.*` (padding, disabled border) | 2 | токенов `togglebutton` | -| `semantic.fg.muted` в `SelectButton` | 2 | собственного токена неактивного пункта | -| `components.badge.root.height` в `Tabs` | 1 | `components.tabs.tab.height` | -| `border.Color.Service.border-success.400` | 1 | цветовой роли | -| `global.Neutrals.White.white-100` | 1 | цветовой роли | +| Место | Было | Стало | Токен | +| ---------------------------------- | ------------------: | ----: | ------------------------------- | +| `useInputStyles` `base` | 35 | 40 | `dimension.size[1100]` | +| `useInputStyles` `large` | 49 | 56 | `size[1300]` | +| `useInputStyles` `xlarge` | 56 | 64 | `size[1400]` | +| `Tabs/TabItem` высота | `badge.root.height` | 24 | `size[700]` | +| `ToggleButton` `paddingHorizontal` | `theme.Button.*` 14 | 14 | `togglebutton.root.paddingLeft` | + +Те же высоты были продублированы числами в `ToggleButton` и `SelectButtonItem` — +переведены вместе с полями, иначе компоненты разъехались бы. + +| Место | Было | Стало (light / dark) | Токен | +| ------------------------------- | ----------------------- | -------------------- | ------------------------------ | +| `ProgressSpinner` | `global.Neutrals.White` | `#ffffff / #ffffff` | `fg.on.fill.default` | +| `Chip` граница success | `#77f48a` фиксированный | `#1dc831 / #77f48a` | `border.status.success.strong` | +| `SelectButton` disabled-граница | `#a2a5a9 / #56595f` | `#cecfd2 / #56595f` | `border.neutral.strong` | + +Для `SelectButton` точной пары в semantic не нашлось: тёмная тема совпадает, +светлая стала светлее. + +## Осталось: 2 позиции + +`SelectButtonItem.tsx`, строки 156 и 163 — цвет неактивного пункта берётся из +`semantic.colorScheme.color.fg.muted`. Токен рабочий и тема-зависимый; вопрос +только в том, заводить ли `components.selectbutton.colorScheme.root.color`. +Кодом не закрывается. ## Не тронуто намеренно @@ -199,9 +219,15 @@ disabled-палитру у кнопки (`components.button.extend.disabled*`). `text-info` `#1e76cd` совпадает не с `status.info.default` (`#4496e8`), а с `status.info.hover`. Выбор оттенка — решение дизайнера. -**45 числовых литералов в стилях** (`lineHeight: 20`, `minHeight: 35`, -`width`/`height` иконок) — на них не было комментариев `TODO`, в счётчик 157 они -не входили. Реальный объём «не на токенах» больше, чем показывает счётчик. +**`ListBase`** — `theme.Surface['surface-border']` и +`background.Common['bg-surface-ground-hover']`, по одному обращению. + +**57 числовых литералов в стилях** — на них не было комментариев `TODO`, в +счётчик 157 они не входили. Реальный объём «не на токенах» больше, чем +показывает счётчик. Часть закрывается существующими токенами: `opacity: 0.6` в +семи местах (`Chip`, `RadioButton`, `MenuItem`, `ToggleButton`, +`InputGroupAddon` и др.) — это `semantic.effects.opacity[60]`, `opacity: 0.2` — +`[20]`. **Размеры иконок на шрифтовой шкале.** `typography.Size` местами задавал не шрифт, а размер иконки. Где в `tokens.json` есть `iconSize`, обращение @@ -219,6 +245,11 @@ disabled-палитру у кнопки (`components.button.extend.disabled*`). `theme.Form.inputSwitch.*` и `theme.General.primaryColor` входят в публичный `ThemeType`, поэтому их удаление — breaking change. +Отдельно: даже там, где UI Kit больше не использует legacy-неймспейс, он +остаётся в публичном `ThemeType` и доступен потребителям библиотеки — +`background`, `colors`, `border`, `effects`, `global`, `sizing`, `spacing`, +`typography`, `theme`, `custom`, `shadow`. Внутренняя миграция их не убирает. + ## Проверка ``` @@ -238,4 +269,4 @@ yarn jest перегенерированы автором. При обновлении они перезаписаны вместе со всеми, то есть тот долг не разобран, а зафиксирован. -Изменения затронули 47 файлов кода и 29 файлов снапшотов. +Изменения затронули 50 файлов кода и 30 файлов снапшотов. From 0e59bea848e088124fc6d73ff0c9026b138185f9 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 18:34:23 +0800 Subject: [PATCH 41/47] =?UTF-8?q?feat(tokens):=20=D1=81=D0=B5=D1=80=D0=B2?= =?UTF-8?q?=D0=B8=D1=81=D0=BD=D1=8B=D0=B5=20=D1=86=D0=B2=D0=B5=D1=82=D0=B0?= =?UTF-8?q?=20=D0=B8=20=D1=86=D0=B2=D0=B5=D1=82=20=D1=82=D0=B0=D0=B9=D0=BC?= =?UTF-8?q?=D0=B5=D1=80=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D0=B4?= =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B0=20semantic-=D1=80=D0=BE=D0=BB?= =?UTF-8?q?=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Timer/Timer.tsx | 4 +- src/components/Timer/TimerFlip.tsx | 4 +- src/components/Typography/Anchor.tsx | 62 +++++++------- src/components/Typography/Service.tsx | 61 +++++++------- .../__snapshots__/Anchor.test.tsx.snap | 10 +-- .../__snapshots__/Service.test.tsx.snap | 80 +++++++++---------- 6 files changed, 107 insertions(+), 114 deletions(-) diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index 02699374..be194889 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -96,7 +96,7 @@ export const Timer = memo(({ 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 7cc00e56..11a87b99 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(({ primitive, typography, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, primitive, fonts }) => ({ container: { overflow: 'hidden', width: COUNTER_SIZE, @@ -85,7 +85,7 @@ const styles = StyleSheet.create(({ primitive, typography, fonts }) => ({ fontWeight: primitive.fonts.fontWeight.bold, includeFontPadding: false, verticalAlign: 'middle', - color: typography.Color.Surface['text-surface-0'], + color: semantic.colorScheme.color.fg.active, fontFamily: fonts.secondary, }, })) diff --git a/src/components/Typography/Anchor.tsx b/src/components/Typography/Anchor.tsx index 837ac539..e9c7d30b 100644 --- a/src/components/Typography/Anchor.tsx +++ b/src/components/Typography/Anchor.tsx @@ -133,38 +133,36 @@ export const Anchor = memo( } ) -const styles = StyleSheet.create( - ({ semantic, primitive, typography, fonts }) => ({ - container: { flexDirection: 'row', alignItems: 'center' }, - text: { - flexShrink: 1, - fontSize: primitive.fonts.fontSize[200], - includeFontPadding: false, - verticalAlign: 'middle', - color: typography.Color.Service['text-info'], - fontFamily: fonts.secondary, - lineHeight: primitive.fonts.lineHeight[300], - letterSpacing: primitive.fonts.letterSpacing[200], - }, - underlined: { textDecorationLine: 'underline' }, - base: { - fontSize: primitive.fonts.fontSize[300], - lineHeight: undefined, - letterSpacing: primitive.fonts.letterSpacing[500], - }, - visited: { color: typography.Color.Service['text-help'] }, - icon: { - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], - }, - iconBase: { - width: primitive.fonts.fontSize[500], - height: primitive.fonts.fontSize[500], - }, - leftIconContainer: { paddingRight: semantic.dimension.space[200] }, - rightIconContainer: { paddingLeft: semantic.dimension.space[200] }, - }) -) +const styles = StyleSheet.create(({ semantic, primitive, fonts }) => ({ + container: { flexDirection: 'row', alignItems: 'center' }, + text: { + flexShrink: 1, + fontSize: primitive.fonts.fontSize[200], + includeFontPadding: false, + verticalAlign: 'middle', + color: semantic.colorScheme.color.fg.status.info.default, + fontFamily: fonts.secondary, + lineHeight: primitive.fonts.lineHeight[300], + letterSpacing: primitive.fonts.letterSpacing[200], + }, + underlined: { textDecorationLine: 'underline' }, + base: { + fontSize: primitive.fonts.fontSize[300], + lineHeight: undefined, + letterSpacing: primitive.fonts.letterSpacing[500], + }, + visited: { color: semantic.colorScheme.color.fg.status.help.default }, + icon: { + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], + }, + iconBase: { + width: primitive.fonts.fontSize[500], + height: primitive.fonts.fontSize[500], + }, + leftIconContainer: { paddingRight: semantic.dimension.space[200] }, + rightIconContainer: { paddingLeft: semantic.dimension.space[200] }, +})) export const AnchorTestId = { root: 'Anchor', diff --git a/src/components/Typography/Service.tsx b/src/components/Typography/Service.tsx index 21f49a37..2bb10245 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -85,39 +85,34 @@ export const Service = ({ ) } -const styles = StyleSheet.create( - ({ semantic, primitive, typography, fonts }) => ({ - iconBase: { - width: primitive.fonts.fontSize[500], - height: primitive.fonts.fontSize[500], - }, - icon: { - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], - }, +const styles = StyleSheet.create(({ semantic, primitive, fonts }) => ({ + iconBase: { + width: primitive.fonts.fontSize[500], + height: primitive.fonts.fontSize[500], + }, + icon: { + width: primitive.fonts.fontSize[300], + height: primitive.fonts.fontSize[300], + }, - containerBase: { flexDirection: 'row', gap: semantic.dimension.space[200] }, - container: { flexDirection: 'row', gap: semantic.dimension.space[100] }, + containerBase: { flexDirection: 'row', gap: semantic.dimension.space[200] }, + container: { flexDirection: 'row', gap: semantic.dimension.space[100] }, - textCommon: { - includeFontPadding: false, - verticalAlign: 'middle', - flexShrink: 1, - fontWeight: primitive.fonts.fontWeight.regular, - fontSize: primitive.fonts.fontSize[200], - fontFamily: fonts.secondary, - lineHeight: primitive.fonts.lineHeight[300], - letterSpacing: primitive.fonts.letterSpacing[200], - }, - textBase: { - lineHeight: undefined, - fontSize: primitive.fonts.fontSize[300], - }, + textCommon: { + includeFontPadding: false, + verticalAlign: 'middle', + flexShrink: 1, + fontWeight: primitive.fonts.fontWeight.regular, + fontSize: primitive.fonts.fontSize[200], + fontFamily: fonts.secondary, + lineHeight: primitive.fonts.lineHeight[300], + letterSpacing: primitive.fonts.letterSpacing[200], + }, + textBase: { lineHeight: undefined, fontSize: primitive.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/__tests__/__snapshots__/Anchor.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap index 35d71d48..e2c1efeb 100644 --- a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -17,7 +17,7 @@ exports[`Body component tests default props 1`] = ` style={ [ { - "color": "#1e76cd", + "color": "#4496e8", "flexShrink": 1, "fontFamily": "Noto Sans", "fontSize": 14, @@ -220,7 +220,7 @@ exports[`Body component tests левая иконка, base, visited, testID = C style={ [ { - "color": "#1e76cd", + "color": "#4496e8", "flexShrink": 1, "fontFamily": "Noto Sans", "fontSize": 14, @@ -236,7 +236,7 @@ exports[`Body component tests левая иконка, base, visited, testID = C "lineHeight": undefined, }, { - "color": "#9457ea", + "color": "#a855f7", }, undefined, ] @@ -430,7 +430,7 @@ exports[`Body component tests левая иконка, правая иконка style={ [ { - "color": "#1e76cd", + "color": "#4496e8", "flexShrink": 1, "fontFamily": "Noto Sans", "fontSize": 14, @@ -627,7 +627,7 @@ exports[`Body component tests правая иконка, noWrapper 1`] = ` style={ [ { - "color": "#1e76cd", + "color": "#4496e8", "flexShrink": 1, "fontFamily": "Noto Sans", "fontSize": 14, diff --git a/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap index 7af401b4..4d01ca62 100644 --- a/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap @@ -24,7 +24,7 @@ exports[`Service component tests base = false, showIcon = false, variant = dange }, false, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -58,7 +58,7 @@ exports[`Service component tests base = false, showIcon = false, variant = dange }, false, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -92,7 +92,7 @@ exports[`Service component tests base = false, showIcon = false, variant = help }, false, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -126,7 +126,7 @@ exports[`Service component tests base = false, showIcon = false, variant = help }, false, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -160,7 +160,7 @@ exports[`Service component tests base = false, showIcon = false, variant = info }, false, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -194,7 +194,7 @@ exports[`Service component tests base = false, showIcon = false, variant = info }, false, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -228,7 +228,7 @@ exports[`Service component tests base = false, showIcon = false, variant = succe }, false, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -262,7 +262,7 @@ exports[`Service component tests base = false, showIcon = false, variant = succe }, false, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -296,7 +296,7 @@ exports[`Service component tests base = false, showIcon = false, variant = warni }, false, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -330,7 +330,7 @@ exports[`Service component tests base = false, showIcon = false, variant = warni }, false, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -466,7 +466,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger }, false, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -717,7 +717,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger }, false, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -876,7 +876,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 1 }, false, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -1127,7 +1127,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 }, false, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -1286,7 +1286,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 1 }, false, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -1537,7 +1537,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 }, false, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -1673,7 +1673,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes }, false, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -1924,7 +1924,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes }, false, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -2083,7 +2083,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin }, false, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -2334,7 +2334,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin }, false, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -2371,7 +2371,7 @@ exports[`Service component tests base = true, showIcon = false, variant = danger "lineHeight": undefined, }, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -2408,7 +2408,7 @@ exports[`Service component tests base = true, showIcon = false, variant = danger "lineHeight": undefined, }, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -2445,7 +2445,7 @@ exports[`Service component tests base = true, showIcon = false, variant = help 1 "lineHeight": undefined, }, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -2482,7 +2482,7 @@ exports[`Service component tests base = true, showIcon = false, variant = help 2 "lineHeight": undefined, }, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -2519,7 +2519,7 @@ exports[`Service component tests base = true, showIcon = false, variant = info 1 "lineHeight": undefined, }, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -2556,7 +2556,7 @@ exports[`Service component tests base = true, showIcon = false, variant = info 2 "lineHeight": undefined, }, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -2593,7 +2593,7 @@ exports[`Service component tests base = true, showIcon = false, variant = succes "lineHeight": undefined, }, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -2630,7 +2630,7 @@ exports[`Service component tests base = true, showIcon = false, variant = succes "lineHeight": undefined, }, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -2667,7 +2667,7 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin "lineHeight": undefined, }, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -2704,7 +2704,7 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin "lineHeight": undefined, }, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -2843,7 +2843,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger "lineHeight": undefined, }, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -3097,7 +3097,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger "lineHeight": undefined, }, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -3259,7 +3259,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 1` "lineHeight": undefined, }, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -3513,7 +3513,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` "lineHeight": undefined, }, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -3675,7 +3675,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 1` "lineHeight": undefined, }, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -3929,7 +3929,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` "lineHeight": undefined, }, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -4068,7 +4068,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success "lineHeight": undefined, }, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -4322,7 +4322,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success "lineHeight": undefined, }, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -4484,7 +4484,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning "lineHeight": undefined, }, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -4738,7 +4738,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning "lineHeight": undefined, }, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } From 129d281214fc53fcc0012976c388a2ecb0b53f03 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 18:42:14 +0800 Subject: [PATCH 42/47] =?UTF-8?q?feat(tokens):=20=D0=BD=D0=B5=D0=BF=D1=80?= =?UTF-8?q?=D0=BE=D0=B7=D1=80=D0=B0=D1=87=D0=BD=D0=BE=D1=81=D1=82=D1=8C=20?= =?UTF-8?q?=D0=B8=20=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20ListBase=20=D0=BF?= =?UTF-8?q?=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D1=8B=20=D0=BD?= =?UTF-8?q?=D0=B0=20semantic-=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Accordion/Accordion.tsx | 5 +- src/components/Checkbox/Checkbox.tsx | 4 +- src/components/Chip/Chip.tsx | 2 +- src/components/Input/InputGroupAddon.tsx | 2 +- .../Input/InputOtp/InputOtpItem.tsx | 53 +++++++----- .../Input/InputTextBase/useInputStyles.ts | 2 +- src/components/List/Base/ListBase.tsx | 84 +++++++++---------- .../MenuItem/Template/MenuItemTemplate.tsx | 2 +- src/components/RadioButton/RadioButton.tsx | 2 +- src/components/Slider/Slider.tsx | 5 +- src/components/Tabs/TabItem/TabItem.tsx | 5 +- src/components/ToggleButton/ToggleButton.tsx | 2 +- src/components/Typography/Body.tsx | 2 +- src/components/Typography/Caption.tsx | 2 +- 14 files changed, 94 insertions(+), 78 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 596b85a1..c62e3849 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -191,6 +191,9 @@ const styles = StyleSheet.create( 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/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 7148ca26..fc5c231d 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -107,7 +107,7 @@ export const Checkbox = memo( } ) -const styles = StyleSheet.create(({ components }) => ({ +const styles = StyleSheet.create(({ semantic, components }) => ({ container: { justifyContent: 'center', alignItems: 'center', @@ -161,7 +161,7 @@ const styles = StyleSheet.create(({ components }) => ({ disabled: 'true', styles: { borderColor: components.checkbox.root.checkedBorderColor, - opacity: 0.2, + opacity: semantic.effects.opacity[20], mixBlendMode: 'luminosity', }, }, diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 34d4df95..6c83414e 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -126,7 +126,7 @@ const styles = StyleSheet.create( disabledChip: { backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, borderColor: 'transparent', - opacity: 0.6, + opacity: semantic.effects.opacity[60], mixBlendMode: 'luminosity', }, icon: { diff --git a/src/components/Input/InputGroupAddon.tsx b/src/components/Input/InputGroupAddon.tsx index 468cfc19..27db958f 100644 --- a/src/components/Input/InputGroupAddon.tsx +++ b/src/components/Input/InputGroupAddon.tsx @@ -73,7 +73,7 @@ const styles = StyleSheet.create( borderBottomLeftRadius: 0, }, disabled: { - opacity: 0.6, + opacity: semantic.effects.opacity[60], backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, }, text: { diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index 3d140a20..d1ca7922 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -15,6 +15,8 @@ export interface InputOtpItemProps extends Pick { const CURSOR_ANIMATION_DURATION = 500 +// Объект вне StyleSheet.create, доступа к теме нет — значение продублировано +// из semantic.effects.opacity[20]. const cursorAnimationStyle = { animationName: { from: { opacity: 1 }, to: { opacity: 0.2 } }, animationDuration: CURSOR_ANIMATION_DURATION, @@ -63,32 +65,37 @@ export const InputOtpItem = memo( // Рамка, цвет и отступы намеренно берутся у inputtext: поле OTP должно выглядеть // как обычное поле ввода. Собственные токены inputotp описывают только отличия — // тот же приём, что в пресете PrimeUIX lara, где inputotp задаёт лишь gap и width. -const styles = StyleSheet.create(({ primitive, components, fonts }) => ({ - container: { - minHeight: 35, - minWidth: 35, - paddingHorizontal: components.inputtext.root.paddingX, - borderBottomWidth: components.inputotp.extend.borderWidth, - borderColor: components.inputtext.root.borderColor, - alignItems: 'center', - justifyContent: 'center', - }, +const styles = StyleSheet.create( + ({ semantic, primitive, components, fonts }) => ({ + container: { + minHeight: 35, + minWidth: 35, + paddingHorizontal: components.inputtext.root.paddingX, + borderBottomWidth: components.inputotp.extend.borderWidth, + borderColor: components.inputtext.root.borderColor, + alignItems: 'center', + justifyContent: 'center', + }, - textRow: { flexDirection: 'row', alignItems: 'center' }, + textRow: { flexDirection: 'row', alignItems: 'center' }, - text: { - fontSize: primitive.fonts.fontSize[600], - fontFamily: fonts.primary, - fontWeight: primitive.fonts.fontWeight.regular, - color: components.inputtext.root.color, - includeFontPadding: false, - }, + text: { + fontSize: primitive.fonts.fontSize[600], + fontFamily: fonts.primary, + fontWeight: primitive.fonts.fontWeight.regular, + color: components.inputtext.root.color, + includeFontPadding: false, + }, - pressed: { borderColor: components.inputtext.root.hoverBorderColor }, + pressed: { borderColor: components.inputtext.root.hoverBorderColor }, - error: { borderColor: components.inputtext.root.invalidBorderColor }, + error: { borderColor: components.inputtext.root.invalidBorderColor }, - disabled: { mixBlendMode: 'luminosity', opacity: 0.6 }, + disabled: { + mixBlendMode: 'luminosity', + opacity: semantic.effects.opacity[60], + }, - cursor: { color: components.inputtext.root.color, marginBottom: 3 }, -})) + cursor: { color: components.inputtext.root.color, marginBottom: 3 }, + }) +) diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 52e1c0dd..07514255 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -47,7 +47,7 @@ export const inputStyles = StyleSheet.create( containerFloatLabel: { minHeight: 56, maxHeight: 56, height: 56 }, danger: { borderColor: components.inputtext.root.invalidBorderColor }, disabled: { - opacity: 0.6, + opacity: semantic.effects.opacity[60], borderColor: components.inputtext.root.borderColor, backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, }, diff --git a/src/components/List/Base/ListBase.tsx b/src/components/List/Base/ListBase.tsx index 825be9c7..a470df95 100644 --- a/src/components/List/Base/ListBase.tsx +++ b/src/components/List/Base/ListBase.tsx @@ -141,45 +141,45 @@ const ListBaseTestId = { title: 'Title', } -const styles = StyleSheet.create( - ({ semantic, primitive, theme, background }) => ({ - container: { - flexDirection: 'row', - paddingLeft: semantic.dimension.space[400], - gap: semantic.dimension.space[400], - alignItems: 'center', - }, - pressed: { backgroundColor: background.Common['bg-surface-ground-hover'] }, - disabled: { opacity: 0.6 }, - 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: primitive.fonts.fontSize[600], - height: primitive.fonts.fontSize[600], - }, - rightSection: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: semantic.dimension.space[200], - gap: semantic.dimension.space[400], - }, - divider: { - borderTopColor: theme.Surface['surface-border'], - borderTopWidth: 1, - }, - }) -) +const styles = StyleSheet.create(({ semantic, primitive }) => ({ + 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: primitive.fonts.fontSize[600], + height: primitive.fonts.fontSize[600], + }, + 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/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index 26ae244d..f6733949 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -146,7 +146,7 @@ const styles = StyleSheet.create(({ components, semantic }) => ({ containerDisabled: { borderColor: 'transparent', backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, - opacity: 0.6, + opacity: semantic.effects.opacity[60], }, separator: { borderTopWidth: 1, diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index 71e09ec4..81c52a65 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/RadioButton/RadioButton.tsx @@ -94,7 +94,7 @@ const radioStyles = StyleSheet.create(({ semantic, components }) => ({ true: { borderColor: components.radiobutton.root.borderColor, backgroundColor: components.radiobutton.root.disabledBackground, - opacity: 0.6, + opacity: semantic.effects.opacity[60], }, false: {}, }, diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index c6151bf5..e9e9686f 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -285,7 +285,10 @@ const styles = StyleSheet.create(({ semantic, components }) => { borderColor: components.slider.handle.background, }, - disabled: { opacity: 0.6, mixBlendMode: 'luminosity' }, + disabled: { + opacity: semantic.effects.opacity[60], + mixBlendMode: 'luminosity', + }, hovered: { backgroundColor: components.slider.handle.hoverBackground }, } diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index 9ee94492..ff804483 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -105,7 +105,10 @@ const styles = StyleSheet.create( activeContainer: { backgroundColor: components.tabs.colorScheme.tab.activeBackground, }, - disabledContainer: { opacity: 0.6, mixBlendMode: 'luminosity' }, + disabledContainer: { + opacity: semantic.effects.opacity[60], + mixBlendMode: 'luminosity', + }, icon: { width: primitive.fonts.fontSize[500], height: primitive.fonts.fontSize[500], diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index 45a75bff..36284ad5 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -146,7 +146,7 @@ const toggleStyles = StyleSheet.create( true: { borderColor: components.togglebutton.colorScheme.root.disabledBorderColor, - opacity: 0.6, + opacity: semantic.effects.opacity[60], }, false: {}, }, diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index 440c8ac5..ba950105 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -60,5 +60,5 @@ const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ }, paragraph: { lineHeight: primitive.fonts.lineHeight[600] }, paragraphBase: { lineHeight: primitive.fonts.lineHeight[500] }, - disabled: { opacity: 0.6 }, + disabled: { opacity: semantic.effects.opacity[60] }, })) diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 957ea923..897f4948 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -72,7 +72,7 @@ const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ default: { color: semantic.colorScheme.color.fg.default }, primary: { color: semantic.colorScheme.color.fg.brand.default }, secondary: { color: semantic.colorScheme.color.fg.muted }, - disabled: { opacity: 0.6 }, + disabled: { opacity: semantic.effects.opacity[60] }, withIconContainer: { flexDirection: 'row', gap: semantic.dimension.space[100], From b19705addb570203dded3b497063c21c012dcdad Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 18:48:07 +0800 Subject: [PATCH 43/47] =?UTF-8?q?refactor(tokens):=20=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=BC=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BA=D1=83=D1=80=D1=81=D0=BE?= =?UTF-8?q?=D1=80=D0=B0=20OTP=20=D0=B1=D0=B5=D1=80=D1=91=D1=82=20=D0=BD?= =?UTF-8?q?=D0=B5=D0=BF=D1=80=D0=BE=D0=B7=D1=80=D0=B0=D1=87=D0=BD=D0=BE?= =?UTF-8?q?=D1=81=D1=82=D1=8C=20=D0=B8=D0=B7=20=D1=82=D0=BE=D0=BA=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Input/InputOtp/InputOtpItem.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index d1ca7922..48755b77 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/light.json' + export interface InputOtpItemProps extends Pick { value?: string error: boolean @@ -15,10 +17,14 @@ export interface InputOtpItemProps extends Pick { const CURSOR_ANIMATION_DURATION = 500 -// Объект вне StyleSheet.create, доступа к теме нет — значение продублировано -// из semantic.effects.opacity[20]. +// Анимация не может жить в 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', From 813d95e29988301384a4451f7ffedf95c625aa91 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 18:56:14 +0800 Subject: [PATCH 44/47] =?UTF-8?q?docs(tokens):=20=D1=83=D0=B7=D0=B0=D0=BA?= =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=8B=20semantic-=D1=82=D0=BE=D0=BA?= =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20SelectButton,=20=D1=80=D0=B0=D0=B7=D0=BC?= =?UTF-8?q?=D0=B5=D1=82=D0=BA=D0=B0=20=D1=80=D0=B0=D0=B7=D0=BE=D0=B1=D1=80?= =?UTF-8?q?=D0=B0=D0=BD=D0=B0=20=D0=BF=D0=BE=D0=BB=D0=BD=D0=BE=D1=81=D1=82?= =?UTF-8?q?=D1=8C=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tokens-migration.md | 69 ++++++++++++------- .../token-generator/__tests__/audit.test.ts | 39 +++++++++-- src/components/SelectButton/SelectButton.tsx | 4 +- .../SelectButton/SelectButtonItem.tsx | 4 +- 4 files changed, 84 insertions(+), 32 deletions(-) diff --git a/docs/tokens-migration.md b/docs/tokens-migration.md index 657379cf..b74f5c1c 100644 --- a/docs/tokens-migration.md +++ b/docs/tokens-migration.md @@ -12,7 +12,7 @@ PR #56 перевёл компоненты на неймспейс `components.*` и оставил в коде 157 комментариев `TODO(tokens-migration)` — мест, где компонент не получил нужного токена либо получил значение, расходящееся с новой базой. Эта ветка разбирает -их: **157 → 2**. +их: **157 → 0**. Формат комментария: @@ -199,35 +199,52 @@ disabled-палитру у кнопки (`components.button.extend.disabled*`). Для `SelectButton` точной пары в semantic не нашлось: тёмная тема совпадает, светлая стала светлее. -## Осталось: 2 позиции +## Комментариев `TODO(tokens-migration)` не осталось -`SelectButtonItem.tsx`, строки 156 и 163 — цвет неактивного пункта берётся из -`semantic.colorScheme.color.fg.muted`. Токен рабочий и тема-зависимый; вопрос -только в том, заводить ли `components.selectbutton.colorScheme.root.color`. -Кодом не закрывается. +Последние две позиции — `SelectButton` и `SelectButtonItem`, цвет невыбранного +пункта через `semantic.colorScheme.color.fg.muted` — узаконены так же, как +`Typography`: обращение оставлено, комментарий заменён обоснованием. + +Наблюдение для дизайна: одно и то же `#85888e` приходит тремя путями — +`semantic.fg.muted` в `SelectButton`, `components.tabs.tab.color` в `Tabs`, +`components.menu.item.color` в `Menu`. Похоже на общую роль «неактивный элемент +выбора», а не на повод завести четвёртый компонентный токен. В самом +`SelectButtonItem` есть и третье употребление `fg.muted` (в `uniProps` иконки), +которое разметка не покрывала, — при заведении токена менять нужно три места. + +Счётчик `yarn tokens:audit` показывает `0`, но это не значит «всё на +`tokens.json`»: разметка не покрывала числовые литералы и legacy-неймспейсы в +публичном `ThemeType` (см. разделы ниже). + +### Цвета сверх разметки + +Комментариев на них не было, переведены по решению владельца дизайн-системы: + +| Место | Было | Стало | +| ---------------------------------- | ------------------------------------ | ------------------------------------------------- | +| `Typography.Service`, `Anchor` (7) | `typography.Color.Service.*` | `fg.status.*.default` | +| `Timer`, `TimerFlip` (2) | `typography.Color.Surface[0]` | `fg.active` | +| `ListBase` (2) | `theme.Surface`, `background.Common` | `border.neutral.default`, `bg.neutral.weak.hover` | +| `opacity: 0.6` / `0.2` (14) | литералы | `effects.opacity[60]` / `[20]` | + +Сервисные цвета сместились с «600»-оттенков на «500»: `text-info` +`#1e76cd → #4496e8` и аналогично для остальных статусов. Это единственная из +четырёх строк, которая меняет вид. ## Не тронуто намеренно -**`Timer`, `TimerFlip`** — используют -`typography.Color.Surface['text-surface-0']` (`#181a1f`). В semantic этот цвет -есть только как `fg.active` (светлая тема) и `fg.inverse.active` (тёмная), то -есть «активное состояние», а не «цвет текста». Соответствие по значению, но не -по смыслу. - -**Сервисные цвета `Typography.Service` и `Anchor`** (7 мест) — legacy-палитра -построена на «600»-оттенках, а `semantic.fg.status.*.default` на «500». Например -`text-info` `#1e76cd` совпадает не с `status.info.default` (`#4496e8`), а с -`status.info.hover`. Выбор оттенка — решение дизайнера. - -**`ListBase`** — `theme.Surface['surface-border']` и -`background.Common['bg-surface-ground-hover']`, по одному обращению. - -**57 числовых литералов в стилях** — на них не было комментариев `TODO`, в -счётчик 157 они не входили. Реальный объём «не на токенах» больше, чем -показывает счётчик. Часть закрывается существующими токенами: `opacity: 0.6` в -семи местах (`Chip`, `RadioButton`, `MenuItem`, `ToggleButton`, -`InputGroupAddon` и др.) — это `semantic.effects.opacity[60]`, `opacity: 0.2` — -`[20]`. +**Числовые литералы `opacity: 0` и `opacity: 1`** (4 места) — это логика «скрыто +/ видно», а не решение дизайна, хотя ключи в `effects.opacity` есть. + +**Анимация курсора в `InputOtpItem`** — объявлена вне `StyleSheet.create`, +потому что `Animated.Text` из reanimated не принимает Unistyles-стиль. Токены +импортируются из сгенерированного файла напрямую: шкала непрозрачности одинакова +в обеих темах. + +**Остальные числовые литералы** (около 25: `width`/`height` иконок, `minHeight` +в `InputOtp`, `marginBottom` курсора) — на них не было комментариев `TODO`, в +счётчик 157 они не входили. Требуют разбора поштучно: у части есть компонентный +`iconSize`, у части нет. **Размеры иконок на шрифтовой шкале.** `typography.Size` местами задавал не шрифт, а размер иконки. Где в `tokens.json` есть `iconSize`, обращение diff --git a/scripts/token-generator/__tests__/audit.test.ts b/scripts/token-generator/__tests__/audit.test.ts index b0d41be7..27581253 100644 --- a/scripts/token-generator/__tests__/audit.test.ts +++ b/scripts/token-generator/__tests__/audit.test.ts @@ -1,3 +1,7 @@ +import { mkdtempSync, mkdirSync, writeFileSync, rmSync } from 'node:fs' +import { tmpdir } from 'node:os' +import { join } from 'node:path' + import { auditTodos, collectTodos, @@ -109,10 +113,37 @@ describe('auditTodos', () => { }) describe('collectTodos', () => { - test('находит комментарии в исходниках компонентов', () => { - const todos = collectTodos(`${__dirname}/../../../src/components`) + test('обходит вложенные каталоги и собирает комментарии', () => { + const directory = mkdtempSync(join(tmpdir(), 'tokens-audit-')) + + try { + mkdirSync(join(directory, 'nested')) + writeFileSync( + join(directory, 'Component.tsx'), + '// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-2; value=7\nconst gap = 7\n' + ) + writeFileSync( + join(directory, 'nested', 'useStyles.ts'), + 'const size = 1\n// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1\n' + ) + writeFileSync(join(directory, 'readme.md'), 'TODO(tokens-migration): x') - expect(todos.length).toBeGreaterThan(0) - expect(todos.filter((todo) => todo.legacy.length === 0)).toHaveLength(0) + const todos = collectTodos(directory) + + expect(todos).toHaveLength(2) + expect(todos.map((todo) => todo.legacy).sort()).toStrictEqual([ + 'border.Width.border', + 'spacing.Gap.gap-2', + ]) + expect(todos.map((todo) => todo.line).sort()).toStrictEqual([1, 2]) + } finally { + rmSync(directory, { recursive: true, force: true }) + } + }) + + test('в исходниках компонентов не осталось неразобранных комментариев', () => { + expect(collectTodos(`${__dirname}/../../../src/components`)).toStrictEqual( + [] + ) }) }) diff --git a/src/components/SelectButton/SelectButton.tsx b/src/components/SelectButton/SelectButton.tsx index b2d83adc..68f6fff5 100644 --- a/src/components/SelectButton/SelectButton.tsx +++ b/src/components/SelectButton/SelectButton.tsx @@ -271,7 +271,9 @@ export const SelectButton = memo((props) => ( )) -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 +// Осознанный обход слоя components: цвет невыбранного пункта — семантическая +// роль «приглушённый текст». Собственного токена у selectbutton нет, а то же +// значение приходит в tabs.tab.color и menu.item.color. const styles = StyleSheet.create(({ components, semantic }) => ({ container: { flexDirection: 'row', diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index ead81026..2f70ce63 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -153,7 +153,9 @@ export const SelectButtonItem = memo( } ) -// TODO(tokens-migration): reason=missing; legacy=semantic.colorScheme.color.fg.muted; light=#85888e; dark=#a2a5a9 +// Осознанный обход слоя components: цвет невыбранного пункта — семантическая +// роль «приглушённый текст». Собственного токена у selectbutton нет, а то же +// значение приходит в tabs.tab.color и menu.item.color. const styles = StyleSheet.create( ({ primitive, From de4aab2c779962023c3a2173fc25b389c3faf8b4 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 19:09:18 +0800 Subject: [PATCH 45/47] =?UTF-8?q?refactor(tokens):=20=D1=80=D0=B0=D0=B7?= =?UTF-8?q?=D0=BC=D0=B5=D1=80=D1=8B=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BE=D0=BA?= =?UTF-8?q?,=20=D1=80=D0=B0=D0=BC=D0=BA=D0=B8=20=D0=B8=20=D0=BD=D1=83?= =?UTF-8?q?=D0=BB=D0=B5=D0=B2=D1=8B=D0=B5=20=D0=BE=D1=82=D1=81=D1=82=D1=83?= =?UTF-8?q?=D0=BF=D1=8B=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D0=B4=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D0=BD=D0=B0=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD?= =?UTF-8?q?=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Avatar/Avatar.tsx | 6 +- .../Button/utils/ButtonContainer.tsx | 2 +- src/components/Button/utils/ButtonIcon.tsx | 18 +-- src/components/Dialog/DialogHeader.tsx | 10 +- src/components/Divider/Divider.tsx | 8 +- .../Input/InputTextBase/useInputStyles.ts | 4 +- src/components/List/Base/ListBase.tsx | 6 +- src/components/Message/Message.tsx | 112 +++++++++--------- src/components/RadioButton/RadioButton.tsx | 2 +- .../SelectButton/SelectButtonItem.tsx | 20 ++-- src/components/Tabs/TabItem/TabItem.tsx | 4 +- src/components/ToggleButton/ToggleButton.tsx | 21 ++-- src/components/Typography/Anchor.tsx | 8 +- src/components/Typography/Caption.tsx | 4 +- src/components/Typography/Service.tsx | 8 +- 15 files changed, 117 insertions(+), 116 deletions(-) diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index e53ec453..81e73645 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -257,12 +257,12 @@ export const Avatar = memo( } ) -const styles = StyleSheet.create(({ primitive, components, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, components, fonts }) => ({ container: { justifyContent: 'center', alignItems: 'center', borderRadius: components.avatar.root.borderRadius, - borderWidth: 1, + borderWidth: semantic.dimension.borderWidth[100], borderColor: components.avatar.extend.borderColor, backgroundColor: components.avatar.root.background, overflow: 'hidden', @@ -279,7 +279,7 @@ const styles = StyleSheet.create(({ primitive, components, fonts }) => ({ }, badgeContainer: { position: 'absolute', right: 0, top: -7 }, badgeMeasureContainer: { alignSelf: 'flex-start' }, - icon: { width: primitive.fonts.fontSize[300] }, + icon: { width: components.avatar.icon.size }, iconXLarge: { width: components.avatar.xl.icon.size }, })) diff --git a/src/components/Button/utils/ButtonContainer.tsx b/src/components/Button/utils/ButtonContainer.tsx index 659e1071..70cb3539 100644 --- a/src/components/Button/utils/ButtonContainer.tsx +++ b/src/components/Button/utils/ButtonContainer.tsx @@ -143,7 +143,7 @@ const buttonContainerStyles = StyleSheet.create( }, text: { borderColor: 'transparent', backgroundColor: 'transparent' }, link: { - paddingHorizontal: 0, + paddingHorizontal: semantic.dimension.space.none, paddingVertical: semantic.dimension.space[100], height: 'auto', minHeight: 'auto', diff --git a/src/components/Button/utils/ButtonIcon.tsx b/src/components/Button/utils/ButtonIcon.tsx index 81262048..318e95f4 100644 --- a/src/components/Button/utils/ButtonIcon.tsx +++ b/src/components/Button/utils/ButtonIcon.tsx @@ -49,25 +49,25 @@ const ButtonIconComponent = ({ export const ButtonIcon = genericMemo(ButtonIconComponent) const buttonIconStyles = StyleSheet.create( - ({ semantic, primitive, components: { button } }) => ({ + ({ semantic, components: { button } }) => ({ icon: { variants: { size: { xlarge: { - height: primitive.fonts.fontSize[600], - width: primitive.fonts.fontSize[600], + height: button.extend.iconSize.lg, + width: button.extend.iconSize.lg, }, large: { - height: primitive.fonts.fontSize[600], - width: primitive.fonts.fontSize[600], + height: button.extend.iconSize.lg, + width: button.extend.iconSize.lg, }, base: { - height: primitive.fonts.fontSize[500], - width: primitive.fonts.fontSize[500], + height: button.extend.iconSize.md, + width: button.extend.iconSize.md, }, small: { - height: primitive.fonts.fontSize[300], - width: primitive.fonts.fontSize[300], + height: button.extend.iconSize.sm, + width: button.extend.iconSize.sm, }, }, variant: { diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index 13503087..b4313a8c 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -88,7 +88,7 @@ export const DialogHeader = ({ ) } -const styles = StyleSheet.create(({ semantic, primitive, components }) => ({ +const styles = StyleSheet.create(({ semantic, components }) => ({ text: { flex: 1 }, header: { flexDirection: 'row', @@ -104,12 +104,12 @@ const styles = StyleSheet.create(({ semantic, primitive, components }) => ({ backgroundColor: components.dialog.root.borderColor, }, closeIcon: { - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, severityIcon: { - width: primitive.fonts.fontSize[600], - height: primitive.fonts.fontSize[600], + width: semantic.dimension.size[700], + height: semantic.dimension.size[700], }, })) diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index dbc6988f..460e2ccc 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -135,13 +135,13 @@ export const Divider = memo( const styles = StyleSheet.create(({ semantic, components }) => ({ container: { - minHeight: 28, + minHeight: semantic.dimension.size[800], flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, containerVertical: { - minWidth: 28, + minWidth: semantic.dimension.size[800], flexDirection: 'column', flexGrow: 1, alignSelf: 'flex-start', @@ -159,7 +159,7 @@ const styles = StyleSheet.create(({ semantic, components }) => ({ line: { width: '100%', height: '100%', - borderWidth: 1, + borderWidth: semantic.dimension.borderWidth[100], borderColor: components.divider.root.borderColor, }, lineDash: { borderStyle: 'dashed' }, @@ -172,7 +172,7 @@ const styles = StyleSheet.create(({ semantic, components }) => ({ backgroundColor: components.divider.content.background, }, contentVertical: { - paddingHorizontal: 0, + paddingHorizontal: semantic.dimension.space.none, paddingVertical: semantic.dimension.space[200], }, icon: { diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 07514255..f26f1871 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -57,7 +57,7 @@ export const inputStyles = StyleSheet.create( justifyContent: 'center', }, input: { - padding: 0, + padding: semantic.dimension.space.none, paddingHorizontal: components.inputtext.root.paddingX, position: 'absolute', left: 0, @@ -105,7 +105,7 @@ export const inputStyles = StyleSheet.create( left: 7, right: 7, top: 19, - paddingVertical: 0, + paddingVertical: semantic.dimension.space.none, paddingLeft: semantic.dimension.space[100], paddingRight: semantic.dimension.space[200], color: semantic.colorScheme.color.fg.muted, diff --git a/src/components/List/Base/ListBase.tsx b/src/components/List/Base/ListBase.tsx index a470df95..dfd1854e 100644 --- a/src/components/List/Base/ListBase.tsx +++ b/src/components/List/Base/ListBase.tsx @@ -141,7 +141,7 @@ const ListBaseTestId = { title: 'Title', } -const styles = StyleSheet.create(({ semantic, primitive }) => ({ +const styles = StyleSheet.create(({ semantic }) => ({ container: { flexDirection: 'row', paddingLeft: semantic.dimension.space[400], @@ -169,8 +169,8 @@ const styles = StyleSheet.create(({ semantic, primitive }) => ({ titleContainer: { gap: semantic.dimension.space[100] }, extraContainer: { paddingVertical: semantic.dimension.space[200] }, icon: { - width: primitive.fonts.fontSize[600], - height: primitive.fonts.fontSize[600], + width: semantic.dimension.size[700], + height: semantic.dimension.size[700], }, rightSection: { flexDirection: 'row', diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 53054bfd..8af1a16a 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -218,70 +218,66 @@ export const Message = memo( } ) -const messageStyles = StyleSheet.create( - ({ semantic, primitive, components }) => ({ - 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, - }, +const messageStyles = StyleSheet.create(({ semantic, components }) => ({ + 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: - 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, - }, + }, + 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: semantic.dimension.space[400] }, - titleTextContainer: { - flex: 1, - alignSelf: 'center', - gap: components.message.extend.extText.gap, - }, - iconSize: { - width: primitive.fonts.fontSize[700], - height: primitive.fonts.fontSize[700], - }, - }) -) + }, + 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/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index 81c52a65..a476ccb1 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/RadioButton/RadioButton.tsx @@ -73,7 +73,7 @@ const radioStyles = StyleSheet.create(({ semantic, components }) => ({ width: components.radiobutton.root.width, height: components.radiobutton.root.height, borderRadius: semantic.dimension.borderRadius.max, - borderWidth: 1, + borderWidth: semantic.dimension.borderWidth[100], alignItems: 'center', justifyContent: 'center', transitionProperty: ['borderColor', 'backgroundColor'], diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index 2f70ce63..ace30c0e 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -185,22 +185,26 @@ const styles = StyleSheet.create( }, disabledContainer: { borderRadius: components.selectbutton.extend.ext.borderRadius, - borderWidth: 1, + borderWidth: semantic.dimension.borderWidth[100], borderColor: semantic.colorScheme.color.border.neutral.strong, }, iconSmall: { - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + width: components.selectbutton.extend.iconSize.sm, + height: components.selectbutton.extend.iconSize.sm, }, iconBase: { - width: primitive.fonts.fontSize[500], - height: primitive.fonts.fontSize[500], + width: components.selectbutton.extend.iconSize.md, + height: components.selectbutton.extend.iconSize.md, }, iconLarge: { - width: primitive.fonts.fontSize[600], - height: primitive.fonts.fontSize[600], + 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], }, - iconXLarge: { width: 28, height: 28 }, label: { flexShrink: 1, fontWeight: primitive.fonts.fontWeight.demibold, diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index ff804483..bde21a35 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -110,8 +110,8 @@ const styles = StyleSheet.create( mixBlendMode: 'luminosity', }, icon: { - width: primitive.fonts.fontSize[500], - height: primitive.fonts.fontSize[500], + width: semantic.dimension.size[600], + height: semantic.dimension.size[600], }, text: { fontFamily: fonts.primary, diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index 36284ad5..8f40c522 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -222,28 +222,29 @@ const toggleStyles = StyleSheet.create( }, iconOnly: { aspectRatio: 1, - paddingHorizontal: 0, - paddingVertical: 0, + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space.none, justifyContent: 'center', }, icon: { variants: { size: { xlarge: { - width: primitive.fonts.fontSize[700], - height: primitive.fonts.fontSize[700], + // Токена iconSize.xlg в дизайн-системе нет — размер взят semantic-ролью. + width: semantic.dimension.size[1000], + height: semantic.dimension.size[1000], }, large: { - width: primitive.fonts.fontSize[600], - height: primitive.fonts.fontSize[600], + width: components.togglebutton.extend.iconSize.lg, + height: components.togglebutton.extend.iconSize.lg, }, base: { - width: primitive.fonts.fontSize[500], - height: primitive.fonts.fontSize[500], + width: components.togglebutton.extend.iconSize.md, + height: components.togglebutton.extend.iconSize.md, }, small: { - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + width: components.togglebutton.extend.iconSize.sm, + height: components.togglebutton.extend.iconSize.sm, }, }, checked: { diff --git a/src/components/Typography/Anchor.tsx b/src/components/Typography/Anchor.tsx index e9c7d30b..8a16fa00 100644 --- a/src/components/Typography/Anchor.tsx +++ b/src/components/Typography/Anchor.tsx @@ -153,12 +153,12 @@ const styles = StyleSheet.create(({ semantic, primitive, fonts }) => ({ }, visited: { color: semantic.colorScheme.color.fg.status.help.default }, icon: { - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, iconBase: { - width: primitive.fonts.fontSize[500], - height: primitive.fonts.fontSize[500], + width: semantic.dimension.size[600], + height: semantic.dimension.size[600], }, leftIconContainer: { paddingRight: semantic.dimension.space[200] }, rightIconContainer: { paddingLeft: semantic.dimension.space[200] }, diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 897f4948..6b041640 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -78,7 +78,7 @@ const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ gap: semantic.dimension.space[100], }, icon: { - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + 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 2bb10245..cdf87b24 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -87,12 +87,12 @@ export const Service = ({ const styles = StyleSheet.create(({ semantic, primitive, fonts }) => ({ iconBase: { - width: primitive.fonts.fontSize[500], - height: primitive.fonts.fontSize[500], + width: semantic.dimension.size[600], + height: semantic.dimension.size[600], }, icon: { - width: primitive.fonts.fontSize[300], - height: primitive.fonts.fontSize[300], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, containerBase: { flexDirection: 'row', gap: semantic.dimension.space[200] }, From 89aaf169b4a907bbf3d4081d99f33176e9383191 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 19:21:36 +0800 Subject: [PATCH 46/47] =?UTF-8?q?fix(tokens):=20=D0=B7=D0=B0=D0=B1=D1=8B?= =?UTF-8?q?=D1=82=D1=8B=D0=B5=20=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F=20=D1=81=D1=82=D0=B0=D1=80=D0=BE=D0=B9=20=D1=88=D0=BA?= =?UTF-8?q?=D0=B0=D0=BB=D1=8B=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D0=B4?= =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B0=20=D1=82=D0=BE=D0=BA=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Accordion/Accordion.tsx | 7 +- .../__snapshots__/Accordion.test.tsx.snap | 40 +- .../__snapshots__/Button.test.tsx.snap | 192 +-- .../Button/utils/ButtonContainer.tsx | 24 +- .../Input/InputOtp/InputOtpItem.tsx | 4 +- .../__snapshots__/InputOtp.test.tsx.snap | 1344 ++++++++--------- .../SelectButton/SelectButtonItem.tsx | 4 +- .../__tests__/SelectButtonItem.test.tsx | 4 +- 8 files changed, 811 insertions(+), 808 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index c62e3849..40791b04 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -169,9 +169,12 @@ const styles = StyleSheet.create( alignItems: 'center', backgroundColor: components.accordion.colorScheme.header.background, }, - icon: { width: 17.5, height: 17.5 }, + icon: { + width: components.accordion.extend.extHeader.iconSize, + height: components.accordion.extend.extHeader.iconSize, + }, title: { - fontSize: 15.75, + fontSize: primitive.fonts.fontSize[400], includeFontPadding: false, verticalAlign: 'middle', fontWeight: primitive.fonts.fontWeight.bold, diff --git a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap index 583ad721..a1483e18 100644 --- a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap +++ b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap @@ -95,11 +95,11 @@ exports[`Accordion Header elements maximal 1`] = ` > ( const styles = StyleSheet.create( ({ semantic, primitive, components, fonts }) => ({ container: { - minHeight: 35, - minWidth: 35, + 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, 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 809f70ab..e07be575 100644 --- a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap +++ b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap @@ -49,8 +49,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -80,8 +80,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -174,8 +174,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -207,8 +207,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -301,8 +301,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -334,8 +334,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -430,8 +430,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -463,8 +463,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -559,8 +559,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -594,8 +594,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -690,8 +690,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -725,8 +725,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -823,8 +823,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -857,8 +857,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -954,8 +954,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -990,8 +990,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -1087,8 +1087,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -1123,8 +1123,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -1222,8 +1222,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -1258,8 +1258,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -1357,8 +1357,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -1395,8 +1395,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -1494,8 +1494,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -1532,8 +1532,8 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -1633,8 +1633,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -1666,8 +1666,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -1762,8 +1762,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -1797,8 +1797,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -1893,8 +1893,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -1928,8 +1928,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2026,8 +2026,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2061,8 +2061,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2159,8 +2159,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2196,8 +2196,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2294,8 +2294,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2331,8 +2331,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2431,8 +2431,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2467,8 +2467,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2566,8 +2566,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2604,8 +2604,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2703,8 +2703,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2741,8 +2741,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2842,8 +2842,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2880,8 +2880,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -2981,8 +2981,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -3021,8 +3021,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -3122,8 +3122,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -3162,8 +3162,8 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -3265,8 +3265,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3296,8 +3296,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3327,8 +3327,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3358,8 +3358,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3452,8 +3452,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3485,8 +3485,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3516,8 +3516,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3547,8 +3547,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3641,8 +3641,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3674,8 +3674,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3707,8 +3707,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3738,8 +3738,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3832,8 +3832,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3865,8 +3865,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3898,8 +3898,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -3931,8 +3931,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4027,8 +4027,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4062,8 +4062,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4095,8 +4095,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4128,8 +4128,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4224,8 +4224,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4259,8 +4259,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4294,8 +4294,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4327,8 +4327,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4423,8 +4423,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4457,8 +4457,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4491,8 +4491,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4525,8 +4525,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4622,8 +4622,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4658,8 +4658,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4692,8 +4692,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4726,8 +4726,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4823,8 +4823,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4859,8 +4859,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4895,8 +4895,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -4929,8 +4929,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5026,8 +5026,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5062,8 +5062,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5098,8 +5098,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5134,8 +5134,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5233,8 +5233,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5271,8 +5271,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5307,8 +5307,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5343,8 +5343,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5442,8 +5442,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5480,8 +5480,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5518,8 +5518,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5554,8 +5554,8 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -5653,8 +5653,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -5686,8 +5686,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -5719,8 +5719,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -5752,8 +5752,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -5848,8 +5848,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -5883,8 +5883,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -5916,8 +5916,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -5949,8 +5949,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6045,8 +6045,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6080,8 +6080,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6115,8 +6115,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6148,8 +6148,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6244,8 +6244,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6279,8 +6279,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6314,8 +6314,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6349,8 +6349,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6447,8 +6447,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6484,8 +6484,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6519,8 +6519,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6554,8 +6554,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6652,8 +6652,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6689,8 +6689,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6726,8 +6726,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6761,8 +6761,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6859,8 +6859,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6895,8 +6895,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6931,8 +6931,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -6967,8 +6967,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7066,8 +7066,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7104,8 +7104,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7140,8 +7140,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7176,8 +7176,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7275,8 +7275,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7313,8 +7313,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7351,8 +7351,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7387,8 +7387,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7486,8 +7486,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7524,8 +7524,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7562,8 +7562,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7600,8 +7600,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7701,8 +7701,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7741,8 +7741,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7779,8 +7779,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7817,8 +7817,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7918,8 +7918,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7958,8 +7958,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -7998,8 +7998,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -8036,8 +8036,8 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -8137,8 +8137,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8168,8 +8168,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8199,8 +8199,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8230,8 +8230,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8261,8 +8261,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8292,8 +8292,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8323,8 +8323,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8354,8 +8354,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8448,8 +8448,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8481,8 +8481,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8512,8 +8512,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8543,8 +8543,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8574,8 +8574,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8605,8 +8605,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8636,8 +8636,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8667,8 +8667,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8761,8 +8761,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8794,8 +8794,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8827,8 +8827,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8858,8 +8858,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8889,8 +8889,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8920,8 +8920,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8951,8 +8951,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -8982,8 +8982,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9076,8 +9076,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9109,8 +9109,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9142,8 +9142,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9175,8 +9175,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9208,8 +9208,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9241,8 +9241,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9274,8 +9274,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9307,8 +9307,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9403,8 +9403,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9438,8 +9438,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9471,8 +9471,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9504,8 +9504,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9537,8 +9537,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9570,8 +9570,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9603,8 +9603,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9636,8 +9636,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9732,8 +9732,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9767,8 +9767,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9802,8 +9802,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9835,8 +9835,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9868,8 +9868,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9901,8 +9901,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9934,8 +9934,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -9967,8 +9967,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10063,8 +10063,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10097,8 +10097,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10131,8 +10131,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10165,8 +10165,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10199,8 +10199,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10233,8 +10233,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10267,8 +10267,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10301,8 +10301,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10398,8 +10398,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10434,8 +10434,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10468,8 +10468,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10502,8 +10502,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10536,8 +10536,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10570,8 +10570,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10604,8 +10604,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10638,8 +10638,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10735,8 +10735,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10771,8 +10771,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10807,8 +10807,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10841,8 +10841,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10875,8 +10875,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10909,8 +10909,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10943,8 +10943,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -10977,8 +10977,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11074,8 +11074,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11110,8 +11110,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11146,8 +11146,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11182,8 +11182,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11218,8 +11218,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11254,8 +11254,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11290,8 +11290,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11326,8 +11326,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11425,8 +11425,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11463,8 +11463,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11499,8 +11499,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11535,8 +11535,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11571,8 +11571,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11607,8 +11607,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11643,8 +11643,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11679,8 +11679,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11778,8 +11778,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11816,8 +11816,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11854,8 +11854,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11890,8 +11890,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11926,8 +11926,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11962,8 +11962,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -11998,8 +11998,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -12034,8 +12034,8 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, false, @@ -12133,8 +12133,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12166,8 +12166,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12199,8 +12199,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12232,8 +12232,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12265,8 +12265,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12298,8 +12298,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12331,8 +12331,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12364,8 +12364,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12460,8 +12460,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12495,8 +12495,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12528,8 +12528,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12561,8 +12561,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12594,8 +12594,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12627,8 +12627,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12660,8 +12660,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12693,8 +12693,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12789,8 +12789,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12824,8 +12824,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12859,8 +12859,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12892,8 +12892,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12925,8 +12925,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12958,8 +12958,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -12991,8 +12991,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13024,8 +13024,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13120,8 +13120,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13155,8 +13155,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13190,8 +13190,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13225,8 +13225,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13260,8 +13260,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13295,8 +13295,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13330,8 +13330,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13365,8 +13365,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13463,8 +13463,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13500,8 +13500,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13535,8 +13535,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13570,8 +13570,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13605,8 +13605,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13640,8 +13640,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13675,8 +13675,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13710,8 +13710,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13808,8 +13808,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13845,8 +13845,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13882,8 +13882,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13917,8 +13917,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13952,8 +13952,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -13987,8 +13987,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14022,8 +14022,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14057,8 +14057,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14155,8 +14155,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14191,8 +14191,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14227,8 +14227,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14263,8 +14263,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14299,8 +14299,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14335,8 +14335,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14371,8 +14371,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14407,8 +14407,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14506,8 +14506,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14544,8 +14544,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14580,8 +14580,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14616,8 +14616,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14652,8 +14652,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14688,8 +14688,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14724,8 +14724,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14760,8 +14760,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14859,8 +14859,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14897,8 +14897,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14935,8 +14935,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -14971,8 +14971,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15007,8 +15007,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15043,8 +15043,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15079,8 +15079,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15115,8 +15115,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15214,8 +15214,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15252,8 +15252,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15290,8 +15290,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15328,8 +15328,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15366,8 +15366,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15404,8 +15404,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15442,8 +15442,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15480,8 +15480,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15581,8 +15581,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15621,8 +15621,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15659,8 +15659,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15697,8 +15697,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15735,8 +15735,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15773,8 +15773,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15811,8 +15811,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15849,8 +15849,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15950,8 +15950,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -15990,8 +15990,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -16030,8 +16030,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -16068,8 +16068,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -16106,8 +16106,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -16144,8 +16144,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -16182,8 +16182,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { @@ -16220,8 +16220,8 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, + "minHeight": 40, + "minWidth": 40, "paddingHorizontal": 14, }, { diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index ace30c0e..2d8283ee 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -173,8 +173,8 @@ const styles = StyleSheet.create( borderWidth: semantic.dimension.borderWidth[100], borderColor: 'transparent', }, - small: { height: 28 }, - base: { height: 35 }, + small: { height: semantic.dimension.size[800] }, + base: { height: semantic.dimension.size[1100] }, large: { height: semantic.dimension.size[1300], gap: components.selectbutton.extend.gap, diff --git a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx index 037fb6f3..0abd689e 100644 --- a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx +++ b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx @@ -63,14 +63,14 @@ const sizeCases: Array<{ { name: 'маленький', size: 'small', - height: lightTheme.theme.Button.Common.buttonHeightSM, + height: lightTheme.semantic.dimension.size[800], iconSize: lightTheme.primitive.fonts.fontSize[300], fontSize: lightTheme.primitive.fonts.fontSize[100], }, { name: 'базовый', size: 'base', - height: lightTheme.theme.Button.Common.buttonHeight, + height: lightTheme.semantic.dimension.size[1100], iconSize: lightTheme.primitive.fonts.fontSize[500], fontSize: lightTheme.primitive.fonts.fontSize[300], }, From 337bf828629453051c89b16785c4a0abb8a81608 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 3 Aug 2026 20:08:02 +0800 Subject: [PATCH 47/47] =?UTF-8?q?fix(tokens):=20=D1=86=D0=B2=D0=B5=D1=82?= =?UTF-8?q?=D0=B0=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BE=D0=BA=20=D1=81=D1=82?= =?UTF-8?q?=D0=B0=D1=82=D1=83=D1=81=D0=BE=D0=B2=20=D0=BF=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B0=20semantic-?= =?UTF-8?q?=D1=80=D0=BE=D0=BB=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/DialogHeader.tsx | 12 +- .../__snapshots__/DialogHeader.test.tsx.snap | 92 +++--- src/components/Typography/Anchor.tsx | 6 +- src/components/Typography/Service.tsx | 12 +- .../__snapshots__/Anchor.test.tsx.snap | 40 +-- .../__snapshots__/Service.test.tsx.snap | 272 +++++++++--------- 6 files changed, 217 insertions(+), 217 deletions(-) diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index b4313a8c..ba570a31 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -46,13 +46,13 @@ export const DialogHeader = ({ ({ + uniProps={({ semantic }) => ({ 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'], + 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], })} /> diff --git a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap index b69256c6..92567dca 100644 --- a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap +++ b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap @@ -24,7 +24,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange meetOrSlice={0} minX={0} minY={0} - stroke="#db3424" + stroke="#e85244" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -60,7 +60,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -82,7 +82,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -105,7 +105,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -313,7 +313,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" meetOrSlice={0} minX={0} minY={0} - stroke="#9457ea" + stroke="#a855f7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -349,7 +349,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -371,7 +371,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -394,7 +394,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -417,7 +417,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -625,7 +625,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" meetOrSlice={0} minX={0} minY={0} - stroke="#1e76cd" + stroke="#4496e8" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -661,7 +661,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -683,7 +683,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -706,7 +706,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -729,7 +729,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -937,7 +937,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe meetOrSlice={0} minX={0} minY={0} - stroke="#168322" + stroke="#44e858" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -973,7 +973,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -995,7 +995,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1018,7 +1018,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1226,7 +1226,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni meetOrSlice={0} minX={0} minY={0} - stroke="#dc9710" + stroke="#f5b83d" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1262,7 +1262,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -1284,7 +1284,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -1307,7 +1307,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -1330,7 +1330,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -1725,7 +1725,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "danger", "title": "Dia meetOrSlice={0} minX={0} minY={0} - stroke="#db3424" + stroke="#e85244" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1761,7 +1761,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "danger", "title": "Dia } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -1783,7 +1783,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "danger", "title": "Dia } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -1806,7 +1806,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "danger", "title": "Dia } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -1875,7 +1875,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "help", "title": "Dialo meetOrSlice={0} minX={0} minY={0} - stroke="#9457ea" + stroke="#a855f7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1911,7 +1911,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "help", "title": "Dialo } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -1933,7 +1933,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "help", "title": "Dialo } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -1956,7 +1956,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "help", "title": "Dialo } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -1979,7 +1979,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "help", "title": "Dialo } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -2048,7 +2048,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "info", "title": "Dialo meetOrSlice={0} minX={0} minY={0} - stroke="#1e76cd" + stroke="#4496e8" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2084,7 +2084,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "info", "title": "Dialo } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -2106,7 +2106,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "info", "title": "Dialo } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -2129,7 +2129,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "info", "title": "Dialo } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -2152,7 +2152,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "info", "title": "Dialo } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -2221,7 +2221,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "success", "title": "Di meetOrSlice={0} minX={0} minY={0} - stroke="#168322" + stroke="#44e858" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2257,7 +2257,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "success", "title": "Di } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -2279,7 +2279,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "success", "title": "Di } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -2302,7 +2302,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "success", "title": "Di } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -2371,7 +2371,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "warning", "title": "Di meetOrSlice={0} minX={0} minY={0} - stroke="#dc9710" + stroke="#f5b83d" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2407,7 +2407,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "warning", "title": "Di } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2429,7 +2429,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "warning", "title": "Di } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2452,7 +2452,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "warning", "title": "Di } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2475,7 +2475,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "warning", "title": "Di } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } diff --git a/src/components/Typography/Anchor.tsx b/src/components/Typography/Anchor.tsx index 8a16fa00..fa312beb 100644 --- a/src/components/Typography/Anchor.tsx +++ b/src/components/Typography/Anchor.tsx @@ -68,10 +68,10 @@ export const Anchor = memo( }, [noWrapper, testID]) const iconSize = base ? styles.iconBase : styles.icon - const iconUniProps = ({ typography: t }: ThemeType) => ({ + 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 ( diff --git a/src/components/Typography/Service.tsx b/src/components/Typography/Service.tsx index cdf87b24..e09cf963 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -69,13 +69,13 @@ export const Service = ({ ({ + uniProps={({ semantic }) => ({ 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'], + 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], })} /> diff --git a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap index e2c1efeb..1d37bed1 100644 --- a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -97,7 +97,7 @@ exports[`Body component tests левая иконка, base, visited, testID = C meetOrSlice={0} minX={0} minY={0} - stroke="#9457ea" + stroke="#a855f7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -133,7 +133,7 @@ exports[`Body component tests левая иконка, base, visited, testID = C } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -155,7 +155,7 @@ exports[`Body component tests левая иконка, base, visited, testID = C } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -178,7 +178,7 @@ exports[`Body component tests левая иконка, base, visited, testID = C } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -201,7 +201,7 @@ exports[`Body component tests левая иконка, base, visited, testID = C } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -307,7 +307,7 @@ exports[`Body component tests левая иконка, правая иконка meetOrSlice={0} minX={0} minY={0} - stroke="#1e76cd" + stroke="#4496e8" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -343,7 +343,7 @@ exports[`Body component tests левая иконка, правая иконка } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -365,7 +365,7 @@ exports[`Body component tests левая иконка, правая иконка } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -388,7 +388,7 @@ exports[`Body component tests левая иконка, правая иконка } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -411,7 +411,7 @@ exports[`Body component tests левая иконка, правая иконка } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -499,7 +499,7 @@ exports[`Body component tests левая иконка, правая иконка meetOrSlice={0} minX={0} minY={0} - stroke="#1e76cd" + stroke="#4496e8" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -535,7 +535,7 @@ exports[`Body component tests левая иконка, правая иконка } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -557,7 +557,7 @@ exports[`Body component tests левая иконка, правая иконка } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -580,7 +580,7 @@ exports[`Body component tests левая иконка, правая иконка } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -603,7 +603,7 @@ exports[`Body component tests левая иконка, правая иконка } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -695,7 +695,7 @@ exports[`Body component tests правая иконка, noWrapper 1`] = ` meetOrSlice={0} minX={0} minY={0} - stroke="#1e76cd" + stroke="#4496e8" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -731,7 +731,7 @@ exports[`Body component tests правая иконка, noWrapper 1`] = ` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -753,7 +753,7 @@ exports[`Body component tests правая иконка, noWrapper 1`] = ` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -776,7 +776,7 @@ exports[`Body component tests правая иконка, noWrapper 1`] = ` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -799,7 +799,7 @@ exports[`Body component tests правая иконка, noWrapper 1`] = ` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } diff --git a/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap index 4d01ca62..c41c8d4b 100644 --- a/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Service.test.tsx.snap @@ -359,7 +359,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger meetOrSlice={0} minX={0} minY={0} - stroke="#db3424" + stroke="#e85244" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -395,7 +395,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -417,7 +417,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -440,7 +440,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -495,7 +495,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger meetOrSlice={0} minX={0} minY={0} - stroke="#db3424" + stroke="#e85244" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -531,7 +531,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -553,7 +553,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -576,7 +576,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -599,7 +599,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -622,7 +622,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -645,7 +645,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -668,7 +668,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -691,7 +691,7 @@ exports[`Service component tests base = false, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -746,7 +746,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 1 meetOrSlice={0} minX={0} minY={0} - stroke="#9457ea" + stroke="#a855f7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -782,7 +782,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 1 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -804,7 +804,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 1 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -827,7 +827,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 1 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -850,7 +850,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 1 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -905,7 +905,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 meetOrSlice={0} minX={0} minY={0} - stroke="#9457ea" + stroke="#a855f7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -941,7 +941,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -963,7 +963,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -986,7 +986,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -1009,7 +1009,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -1032,7 +1032,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -1055,7 +1055,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -1078,7 +1078,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -1101,7 +1101,7 @@ exports[`Service component tests base = false, showIcon = true, variant = help 2 } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -1156,7 +1156,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 1 meetOrSlice={0} minX={0} minY={0} - stroke="#1e76cd" + stroke="#4496e8" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1192,7 +1192,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 1 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1214,7 +1214,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 1 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1237,7 +1237,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 1 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1260,7 +1260,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 1 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1315,7 +1315,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 meetOrSlice={0} minX={0} minY={0} - stroke="#1e76cd" + stroke="#4496e8" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1351,7 +1351,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1373,7 +1373,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1396,7 +1396,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1419,7 +1419,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1442,7 +1442,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1465,7 +1465,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1488,7 +1488,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1511,7 +1511,7 @@ exports[`Service component tests base = false, showIcon = true, variant = info 2 } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -1566,7 +1566,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes meetOrSlice={0} minX={0} minY={0} - stroke="#168322" + stroke="#44e858" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1602,7 +1602,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1624,7 +1624,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1647,7 +1647,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1702,7 +1702,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes meetOrSlice={0} minX={0} minY={0} - stroke="#168322" + stroke="#44e858" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1738,7 +1738,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1760,7 +1760,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1783,7 +1783,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1806,7 +1806,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1829,7 +1829,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1852,7 +1852,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1875,7 +1875,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1898,7 +1898,7 @@ exports[`Service component tests base = false, showIcon = true, variant = succes } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -1953,7 +1953,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin meetOrSlice={0} minX={0} minY={0} - stroke="#dc9710" + stroke="#f5b83d" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1989,7 +1989,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2011,7 +2011,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2034,7 +2034,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2057,7 +2057,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2112,7 +2112,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin meetOrSlice={0} minX={0} minY={0} - stroke="#dc9710" + stroke="#f5b83d" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2148,7 +2148,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2170,7 +2170,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2193,7 +2193,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2216,7 +2216,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2239,7 +2239,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2262,7 +2262,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2285,7 +2285,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2308,7 +2308,7 @@ exports[`Service component tests base = false, showIcon = true, variant = warnin } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -2733,7 +2733,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger meetOrSlice={0} minX={0} minY={0} - stroke="#db3424" + stroke="#e85244" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2769,7 +2769,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -2791,7 +2791,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -2814,7 +2814,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -2872,7 +2872,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger meetOrSlice={0} minX={0} minY={0} - stroke="#db3424" + stroke="#e85244" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2908,7 +2908,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -2930,7 +2930,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -2953,7 +2953,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -2976,7 +2976,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -2999,7 +2999,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -3022,7 +3022,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -3045,7 +3045,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -3068,7 +3068,7 @@ exports[`Service component tests base = true, showIcon = true, variant = danger } stroke={ { - "payload": 4292555812, + "payload": 4293415492, "type": 0, } } @@ -3126,7 +3126,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 1` meetOrSlice={0} minX={0} minY={0} - stroke="#9457ea" + stroke="#a855f7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3162,7 +3162,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 1` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3184,7 +3184,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 1` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3207,7 +3207,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 1` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3230,7 +3230,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 1` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3288,7 +3288,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` meetOrSlice={0} minX={0} minY={0} - stroke="#9457ea" + stroke="#a855f7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3324,7 +3324,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3346,7 +3346,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3369,7 +3369,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3392,7 +3392,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3415,7 +3415,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3438,7 +3438,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3461,7 +3461,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3484,7 +3484,7 @@ exports[`Service component tests base = true, showIcon = true, variant = help 2` } stroke={ { - "payload": 4287911914, + "payload": 4289222135, "type": 0, } } @@ -3542,7 +3542,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 1` meetOrSlice={0} minX={0} minY={0} - stroke="#1e76cd" + stroke="#4496e8" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3578,7 +3578,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 1` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3600,7 +3600,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 1` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3623,7 +3623,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 1` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3646,7 +3646,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 1` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3704,7 +3704,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` meetOrSlice={0} minX={0} minY={0} - stroke="#1e76cd" + stroke="#4496e8" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3740,7 +3740,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3762,7 +3762,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3785,7 +3785,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3808,7 +3808,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3831,7 +3831,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3854,7 +3854,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3877,7 +3877,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3900,7 +3900,7 @@ exports[`Service component tests base = true, showIcon = true, variant = info 2` } stroke={ { - "payload": 4280186573, + "payload": 4282685160, "type": 0, } } @@ -3958,7 +3958,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success meetOrSlice={0} minX={0} minY={0} - stroke="#168322" + stroke="#44e858" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3994,7 +3994,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4016,7 +4016,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4039,7 +4039,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4097,7 +4097,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success meetOrSlice={0} minX={0} minY={0} - stroke="#168322" + stroke="#44e858" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -4133,7 +4133,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4155,7 +4155,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4178,7 +4178,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4201,7 +4201,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4224,7 +4224,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4247,7 +4247,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4270,7 +4270,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4293,7 +4293,7 @@ exports[`Service component tests base = true, showIcon = true, variant = success } stroke={ { - "payload": 4279665442, + "payload": 4282706008, "type": 0, } } @@ -4351,7 +4351,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning meetOrSlice={0} minX={0} minY={0} - stroke="#dc9710" + stroke="#f5b83d" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -4387,7 +4387,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4409,7 +4409,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4432,7 +4432,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4455,7 +4455,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4513,7 +4513,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning meetOrSlice={0} minX={0} minY={0} - stroke="#dc9710" + stroke="#f5b83d" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -4549,7 +4549,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4571,7 +4571,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4594,7 +4594,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4617,7 +4617,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4640,7 +4640,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4663,7 +4663,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4686,7 +4686,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } } @@ -4709,7 +4709,7 @@ exports[`Service component tests base = true, showIcon = true, variant = warning } stroke={ { - "payload": 4292646672, + "payload": 4294293565, "type": 0, } }