@lockin90/ui-native 2.3.0 → 2.4.0

package/src/components/Button.tsx

@@ -4,6 +4,9 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { colors, radii, gradients, fonts, nativeShadows } from '@lockin90/tokens';
 import { hapticSelection } from '../internal/optionalHaptics';
 
+// the web's body line height (1.55): the md button is 12 + 14 × 1.55 + 12 = 45.7, as on web
+const LINE = 1.55;
+
 export type ButtonVariant = 'default' | 'primary' | 'ghost';
 export type ButtonTone = 'danger';
 
@@ -59,7 +62,7 @@ export function Button({ variant = 'default', tone, size = 'md', title, leading,
             style={[styles.base, pad, styles.primary, pressed && styles.pressed, style]}
           >
             {leading}
-            <Text style={[styles.label, { fontSize: labelSize, color: '#0A0A12' }]}>{title}</Text>
+            <Text style={[styles.label, { fontSize: labelSize, lineHeight: labelSize * LINE, color: '#0A0A12' }]}>{title}</Text>
             {trailing}
           </LinearGradient>
         )}
@@ -90,7 +93,7 @@ export function Button({ variant = 'default', tone, size = 'md', title, leading,
     textColor = colors.bad;
   } else {
     backgroundColor = ghost ? 'transparent' : colors.glass2;
-    borderColor = ghost ? colors.border : colors.border2;
+    borderColor = colors.border2;
     textColor = ghost ? colors.textDim : colors.text;
   }
 
@@ -108,7 +111,7 @@ export function Button({ variant = 'default', tone, size = 'md', title, leading,
           ]}
         >
           {leading}
-          <Text style={[styles.label, { fontSize: labelSize, color: textColor }]}>{title}</Text>
+          <Text style={[styles.label, { fontSize: labelSize, lineHeight: labelSize * LINE, color: textColor }]}>{title}</Text>
           {trailing}
         </View>
       )}
@@ -117,7 +120,7 @@ export function Button({ variant = 'default', tone, size = 'md', title, leading,
 }
 
 const styles = StyleSheet.create({
-  base: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 9, borderRadius: radii.pill },
+  base: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 9, borderRadius: radii.sm },
   padMd: { paddingVertical: 12, paddingHorizontal: 20 },
   padSm: { paddingVertical: 8, paddingHorizontal: 14 },
   primary: { ...nativeShadows.glowAccent },

package/src/components/Chip.tsx

@@ -18,7 +18,7 @@ export interface ChipProps extends ViewProps {
 }
 
 const TONE: Record<ChipTone, { color: string; border: string; bg: string }> = {
-  default: { color: colors.textDim, border: colors.border, bg: colors.glass },
+  default: { color: colors.textDim, border: colors.border2, bg: colors.glass },
   neutral: { color: colors.textFaint, border: colors.border2, bg: colors.glass2 },
   high: { color: colors.zoneHigh, border: 'rgba(52,245,197,0.35)', bg: 'rgba(52,245,197,0.08)' },
   mid: { color: colors.zoneMid, border: 'rgba(255,176,32,0.35)', bg: 'rgba(255,176,32,0.08)' },
@@ -34,7 +34,7 @@ const TONE: Record<ChipTone, { color: string; border: string; bg: string }> = {
  *  pill (high/mid/low read slightly stronger; neutral reads dim on glass-2).
  *  The `accent` tone is handled specially (filled gradient). */
 const TONE_SM: Partial<Record<ChipTone, Partial<{ color: string; border: string; bg: string }>>> = {
-  neutral: { color: colors.textDim, border: colors.border, bg: colors.glass2 },
+  neutral: { color: colors.textDim, bg: colors.glass2 },
   high: { bg: 'rgba(52,245,197,0.10)' },
   mid: { bg: 'rgba(255,176,32,0.10)' },
   low: { bg: 'rgba(255,77,109,0.10)' },
@@ -102,7 +102,7 @@ const styles = StyleSheet.create({
     gap: 7,
     paddingVertical: 5,
     paddingHorizontal: 11,
-    borderRadius: radii.pill,
+    borderRadius: radii.sm,
     borderWidth: 1,
     alignSelf: 'flex-start',
   },

package/src/components/FollowButton.tsx

@@ -35,7 +35,7 @@ export function FollowButton({
   const labelSize = size === 'sm' ? 12 : 12.5;
 
   const tone = following
-    ? { color: colors.textDim, border: colors.border, bg: colors.glass }
+    ? { color: colors.textDim, border: colors.border2, bg: colors.glass }
     : { color: '#cbbcff', border: 'rgba(124,92,255,0.45)', bg: 'rgba(124,92,255,0.10)' };
 
   return (
@@ -66,7 +66,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 6,
-    borderRadius: radii.pill,
+    borderRadius: radii.sm,
     borderWidth: 1,
     alignSelf: 'flex-start',
   },

package/src/components/FormField.tsx

@@ -169,12 +169,14 @@ const styles = StyleSheet.create({
   // FormField
   field: { gap: 6, minWidth: 0 },
   labelRow: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 },
+  // the label the web shows (11px / 500, text-dim, 0.12em, line height 1.55 = 17)
   fieldLabel: {
     fontFamily: fonts.mono,
-    fontSize: 10,
+    fontSize: 11,
+    lineHeight: 17,
     fontWeight: '500',
-    letterSpacing: 1.2,
-    color: colors.textFaint,
+    letterSpacing: 1.32,
+    color: colors.textDim,
   },
   req: { color: colors.accent, fontSize: 11 },
   control: { minWidth: 0 },

package/src/components/Input.tsx

@@ -70,28 +70,32 @@ export function Input({
 
 const styles = StyleSheet.create({
   wrap: { gap: 6, minWidth: 0 },
+  // the same caption as FormField's label (11px / 500, text-dim, line height 17), as the web shows
   label: {
     fontFamily: fonts.mono,
-    fontSize: 10,
+    fontSize: 11,
+    lineHeight: 17,
     fontWeight: '500',
-    letterSpacing: 1.2,
-    color: colors.textFaint,
+    letterSpacing: 1.32,
+    color: colors.textDim,
   },
   field: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 8,
     minWidth: 0,
+    minHeight: 39.6,
     paddingVertical: 9,
     paddingHorizontal: 12,
     borderRadius: radii.sm,
     borderWidth: 1,
     backgroundColor: colors.glass2,
   },
-  fieldSm: { paddingVertical: 6, paddingHorizontal: 10 },
+  // the web box: 9 + 14 × 1.4 + 9 + 2 borders = 39.6 (sm: 6 + 12.5 × 1.4 + 6 + 2 = 31.5)
+  fieldSm: { minHeight: 31.5, paddingVertical: 6, paddingHorizontal: 10 },
   // design `.strow .sv` — glass-2 fill (already the field default), border-2
   // (already default), 9px radius, roomier centered padding.
-  fieldNumeral: { justifyContent: 'center', paddingVertical: 10, paddingHorizontal: 10, borderRadius: 9 },
+  fieldNumeral: { minHeight: 0, justifyContent: 'center', paddingVertical: 10, paddingHorizontal: 10, borderRadius: 9 },
   lead: { flexShrink: 0 },
   input: {
     flex: 1,

package/src/components/PasswordInput.tsx

@@ -80,25 +80,29 @@ export function PasswordInput({
 
 const styles = StyleSheet.create({
   wrap: { gap: 6, minWidth: 0 },
+  // the same caption as FormField's label (11px / 500, text-dim, line height 17), as the web shows
   label: {
     fontFamily: fonts.mono,
-    fontSize: 10,
+    fontSize: 11,
+    lineHeight: 17,
     fontWeight: '500',
-    letterSpacing: 1.2,
-    color: colors.textFaint,
+    letterSpacing: 1.32,
+    color: colors.textDim,
   },
   field: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 8,
     minWidth: 0,
+    minHeight: 39.6,
     paddingVertical: 9,
     paddingHorizontal: 12,
     borderRadius: radii.sm,
     borderWidth: 1,
     backgroundColor: colors.glass2,
   },
-  fieldSm: { paddingVertical: 6, paddingHorizontal: 10 },
+  // the web box: 9 + 14 × 1.4 + 9 + 2 borders = 39.6 (sm: 6 + 12.5 × 1.4 + 6 + 2 = 31.5)
+  fieldSm: { minHeight: 31.5, paddingVertical: 6, paddingHorizontal: 10 },
   lead: { flexShrink: 0 },
   input: {
     flex: 1,
@@ -107,7 +111,9 @@ const styles = StyleSheet.create({
     color: colors.text,
     fontFamily: fonts.ui,
     fontSize: 14,
-    lineHeight: 20,
+    // centred by the field's height, as Input (an explicit lineHeight biases the glyph)
+    textAlignVertical: 'center',
+    includeFontPadding: false,
   },
   inputSm: { fontSize: 12.5 },
   trail: { flexShrink: 0 },

package/src/components/Select.tsx

@@ -248,12 +248,14 @@ const styles = StyleSheet.create({
   wrap: { flexDirection: 'column', gap: 6, alignSelf: 'stretch' },
   // sm hugs its content instead of stretching (design `.pref-select` pill)
   wrapSm: { alignSelf: 'auto' },
+  // the same caption as FormField's label (11px / 500, text-dim, line height 17), as the web shows
   label: {
-    fontFamily: fonts.ui,
-    fontSize: 10,
+    fontFamily: fonts.mono,
+    fontSize: 11,
+    lineHeight: 17,
     fontWeight: '500',
-    letterSpacing: 1.2,
-    color: colors.textFaint,
+    letterSpacing: 1.32,
+    color: colors.textDim,
   },
   field: {
     flexDirection: 'row',

package/src/components/SplitButton.tsx

@@ -87,7 +87,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   groupPrimary: { ...nativeShadows.glowAccent },
-  groupDefault: { borderWidth: 1, borderColor: colors.border },
+  groupDefault: { borderWidth: 1, borderColor: colors.border2 },
   main: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/SsoButton.tsx

@@ -75,11 +75,10 @@ const styles = StyleSheet.create({
     borderRadius: radii.sm,
     backgroundColor: 'rgba(255,255,255,0.04)',
     borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.10)',
+    borderColor: colors.border2,
   },
   pressed: {
     backgroundColor: 'rgba(255,255,255,0.06)',
-    borderColor: 'rgba(255,255,255,0.16)',
   },
   disabled: { opacity: 0.5 },
   iconSlot: { width: 16, height: 16, alignItems: 'center', justifyContent: 'center' },
@@ -88,6 +87,8 @@ const styles = StyleSheet.create({
     fontFamily: fonts.ui,
     fontWeight: '600',
     fontSize: 12.5,
+    // the web's 1.55 line height: 10 + 19.4 + 10 + 2 borders = 41.4, as on web
+    lineHeight: 12.5 * 1.55,
     letterSpacing: 0.1,
   },
 });