From 5afb15f30b4f68eccbe184498d43e022aea70f43 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Tue, 8 Sep 2026 16:23:35 +0300 Subject: [PATCH] =?UTF-8?q?fix(input-otp):=20=D1=81=D0=B8=D0=BD=D1=85?= =?UTF-8?q?=D1=80=D0=BE=D0=BD=D0=B8=D0=B7=D0=B8=D1=80=D0=BE=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D1=8B=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B=20=D1=81=20?= =?UTF-8?q?=D0=BC=D0=B0=D0=BA=D0=B5=D1=82=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- design-tokens/input/tokens.json | 4 +-- .../Input/InputOtp/InputOtpItem.tsx | 34 ++++++++++++++----- src/theme/tokens/components/dark.json | 10 ++---- src/theme/tokens/components/light.json | 10 ++---- 4 files changed, 31 insertions(+), 27 deletions(-) diff --git a/design-tokens/input/tokens.json b/design-tokens/input/tokens.json index e05daec3..f18cadbc 100644 --- a/design-tokens/input/tokens.json +++ b/design-tokens/input/tokens.json @@ -3072,8 +3072,6 @@ "root": { "gap": "{dimension.space.200}" }, "input": { "width": "{dimension.size.1100}", - "paddingTop": "{dimension.space.350}", - "paddingBottom": "{dimension.space.200}", "lg": { "width": "{dimension.size.1200}" }, "sm": { "width": "{dimension.size.800}" } }, @@ -3109,7 +3107,7 @@ "shadow": "{effects.elevation.none}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.300}", - "borderRadius": "{dimension.borderRadius.400}", + "borderRadius": "{dimension.borderRadius.300}", "transitionDuration": "{effects.transition.duration.200}", "sm": { "fontSize": "{fonts.fontSize.300}", diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index e3abd584..6867992b 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -28,6 +28,13 @@ export interface InputOtpItemProps extends Pick< const CURSOR_ANIMATION_DURATION = 500 +const createFocusRingShadow = ( + ringWidth: number, + ringColor: string, + borderWidth: number, + borderColor: string +) => `0 0 0 ${ringWidth}px ${ringColor}, 0 0 0 ${borderWidth}px ${borderColor}` + // Анимация не может жить в StyleSheet.create: Animated.Text из reanimated не // принимает Unistyles-стиль. Шкала непрозрачности одинакова в обеих темах, // поэтому токены берутся из сгенерированного файла напрямую. @@ -92,7 +99,7 @@ export const InputOtpItem = memo( | @@ -113,8 +120,7 @@ const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ width: components.inputotp.input.width, height: components.inputotp.extend.height, paddingHorizontal: components.inputtext.root.paddingX, - paddingTop: components.inputotp.input.paddingTop, - paddingBottom: components.inputotp.input.paddingBottom, + paddingVertical: components.inputtext.root.paddingY, borderWidth: components.inputotp.extend.borderWidth, borderRadius: components.inputtext.root.borderRadius, borderColor: components.inputtext.root.borderColor, @@ -127,10 +133,11 @@ const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ cursorSpacer: { opacity: semantic.effects.opacity[0] }, + cursor: { lineHeight: fonts.lineHeight[400] }, + text: { fontSize: fonts.fontSize[200], - lineHeight: fonts.fontSize[200], - fontFamily: fonts.fontFamily.heading, + fontFamily: fonts.fontFamily.base, fontWeight: fonts.fontWeight.regular, letterSpacing: fonts.letterSpacing[500], color: components.inputtext.root.color, @@ -141,17 +148,28 @@ const styles = StyleSheet.create(({ components, semantic, fonts }) => ({ hovered: { borderColor: components.inputtext.root.hoverBorderColor }, focused: { - borderColor: components.inputtext.root.focusBorderColor, - boxShadow: `0 0 0 ${components.inputtext.root.focusRing.width}px ${components.inputtext.root.focusRing.color}`, + borderWidth: 0, + boxShadow: createFocusRingShadow( + components.inputtext.root.focusRing.width, + components.inputtext.root.focusRing.color, + components.inputotp.extend.borderWidth, + components.inputtext.root.focusBorderColor + ), }, error: { borderColor: components.inputtext.root.invalidBorderColor }, errorFocused: { - boxShadow: `0 0 0 ${components.inputtext.root.focusRing.width}px ${semantic.colorScheme.color.border.status.danger.focus}`, + boxShadow: createFocusRingShadow( + components.inputtext.root.focusRing.width, + semantic.colorScheme.color.border.status.danger.focus, + components.inputotp.extend.borderWidth, + components.inputtext.root.invalidBorderColor + ), }, disabled: { + borderWidth: components.inputotp.extend.borderWidth, backgroundColor: components.inputtext.root.disabledBackground, borderColor: components.inputtext.root.borderColor, boxShadow: 'none', diff --git a/src/theme/tokens/components/dark.json b/src/theme/tokens/components/dark.json index 4ae0db90..10241ac3 100644 --- a/src/theme/tokens/components/dark.json +++ b/src/theme/tokens/components/dark.json @@ -1348,13 +1348,7 @@ "inputotp": { "extend": { "height": 40, "borderWidth": 1 }, "root": { "gap": 8 }, - "input": { - "width": 40, - "paddingTop": 12, - "paddingBottom": 8, - "lg": { "width": 48 }, - "sm": { "width": 28 } - }, + "input": { "width": 40, "lg": { "width": 48 }, "sm": { "width": 28 } }, "sm": { "width": 0 }, "lg": { "width": 0 } }, @@ -1383,7 +1377,7 @@ "shadow": "none", "paddingX": 10, "paddingY": 10, - "borderRadius": 14, + "borderRadius": 10, "transitionDuration": 180, "sm": { "fontSize": 16, "paddingX": 10, "paddingY": 8 }, "lg": { "fontSize": 16, "paddingX": 10, "paddingY": 14 }, diff --git a/src/theme/tokens/components/light.json b/src/theme/tokens/components/light.json index 7ea83ad2..99e90cc5 100644 --- a/src/theme/tokens/components/light.json +++ b/src/theme/tokens/components/light.json @@ -1348,13 +1348,7 @@ "inputotp": { "extend": { "height": 40, "borderWidth": 1 }, "root": { "gap": 8 }, - "input": { - "width": 40, - "paddingTop": 12, - "paddingBottom": 8, - "lg": { "width": 48 }, - "sm": { "width": 28 } - }, + "input": { "width": 40, "lg": { "width": 48 }, "sm": { "width": 28 } }, "sm": { "width": 0 }, "lg": { "width": 0 } }, @@ -1383,7 +1377,7 @@ "shadow": "none", "paddingX": 10, "paddingY": 10, - "borderRadius": 14, + "borderRadius": 10, "transitionDuration": 180, "sm": { "fontSize": 16, "paddingX": 10, "paddingY": 8 }, "lg": { "fontSize": 16, "paddingX": 10, "paddingY": 14 },