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 },