@onairos/react-native 3.1.16 → 3.1.18

package/src/theme/index.ts

@@ -1,239 +1,239 @@
-import { Platform } from 'react-native';
-
-// Color Tokens as specified in the design brief
-export const COLORS = {
-  // Welcome Screen Specific Colors
-  surface: '#FAFAFA',
-  grey400: '#9CA3AF',
-  grey500: '#86888E',
-  grey600: '#62646C',
-  grey700: '#374151', 
-  grey800: '#1F242F',
-  
-  // PrimaryButton exact tokens
-  btnGradStart: '#29292B',
-  btnGradEnd: '#17181C',
-  btnBorder: 'rgba(0,0,0,0.20)',
-  btnShadowOuter: 'rgba(0,0,0,0.10)',
-  btnInnerShadow: 'rgba(0,0,0,0.06)',
-  btnLabel: '#FFFFFF',
-  iconCircleGradientStart: '#0A090E',
-  iconCircleGradientEnd: '#17171B',
-  
-  // Legacy colors (preserved for backward compatibility)
-  primary: '#FFD700',
-  primaryDark: '#E9B104',
-  primaryLight: '#FFDF33',
-  
-  background: {
-    dark: '#000000',
-    medium: '#121212',
-    light: '#1C2526',
-  },
-  
-  text: {
-    primary: '#FFFFFF',
-    secondary: '#B0B0B0',
-    tertiary: '#808080',
-    gold: '#FFD700',
-  },
-  
-  ui: {
-    cardBackground: 'rgba(255, 255, 255, 0.1)',
-    divider: 'rgba(255, 255, 255, 0.1)',
-    inputBackground: 'rgba(255, 255, 255, 0.1)',
-    buttonBackground: 'rgba(255, 255, 255, 0.1)',
-  },
-  
-  status: {
-    success: '#4BB543',
-    error: '#FF3B30',
-    warning: '#FF9500',
-    info: '#5AC8FA',
-  },
-  
-  transparent: 'transparent',
-  overlay: 'rgba(0, 0, 0, 0.7)',
-};
-
-// Typography - Font families and weights as specified
-export const FONTS = {
-  families: {
-    ibmPlexSans: Platform.OS === 'ios' ? 'IBM Plex Sans' : 'IBM Plex Sans',
-    ibmPlexSansBold: Platform.OS === 'ios' ? 'IBM Plex Sans' : 'IBM Plex Sans',
-    inter: Platform.OS === 'ios' ? 'Inter' : 'Inter-Regular',
-    // Legacy families
-    base: Platform.OS === 'ios' ? 'System' : 'Roboto',
-    serif: Platform.OS === 'ios' ? 'Georgia' : 'serif',
-  },
-  
-  weights: {
-    light: '300' as const,
-    regular: '400' as const,
-    medium: '500' as const,
-    semibold: '600' as const,
-    bold: '700' as const,
-  },
-  
-  sizes: {
-    xs: 12,
-    sm: 14,
-    md: 16,
-    lg: 18,
-    xl: 20,
-    xxl: 24,
-    xxxl: 28,
-    title: 32,
-    large: 42,
-    // Welcome screen specific sizes
-    kicker: 18,
-    welcomeTitle: 48,
-    body: 16,
-    buttonLabel: 16,
-  },
-  
-  lineHeights: {
-    // Welcome screen specific line heights
-    kicker: 20, // 111%
-    welcomeTitle: 54, // 112.5%
-    body: 24, // 150%
-    // Legacy line heights
-    sm: 16,
-    md: 20,
-    lg: 24,
-    xl: 28,
-  },
-  
-  letterSpacing: {
-    kicker: -0.24,
-    tight: -0.5,
-    normal: 0,
-    wide: 0.5,
-  },
-};
-
-// Spacing tokens
-export const SPACING = {
-  xs: 4,
-  sm: 8,
-  md: 16,
-  lg: 24,
-  xl: 32,
-  xxl: 48,
-  xxxl: 64,
-  // Welcome screen specific spacing
-  modalTopPadding: 118,
-  modalHorizontal: 24,
-};
-
-// Border radius tokens
-export const BORDER_RADIUS = {
-  xs: 4,
-  sm: 8,
-  md: 16,
-  lg: 24,
-  xl: 32,
-  pill: 100,
-  circle: 999,
-  // Welcome screen specific radii
-  modalTop: 24,
-  buttonPill: 100,
-};
-
-// Shadow tokens
-export const SHADOWS = {
-  small: {
-    shadowColor: COLORS.primary,
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  medium: {
-    shadowColor: COLORS.primary,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.5,
-    shadowRadius: 8,
-    elevation: 5,
-  },
-  large: {
-    shadowColor: COLORS.primary,
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.8,
-    shadowRadius: 16,
-    elevation: 8,
-  },
-  
-  // Welcome screen specific shadows
-  button: {
-    // Inner shadow (simulated via overlay)
-    inner: {
-      shadowColor: COLORS.btnInnerShadow,
-      shadowOffset: { width: 0, height: -36 },
-      shadowOpacity: 1,
-      shadowRadius: 21.1,
-    },
-    // Outer shadow
-    outer: {
-      shadowColor: COLORS.btnShadowOuter,
-      shadowOffset: { width: 20, height: 30 },
-      shadowOpacity: 1,
-      shadowRadius: 40,
-      elevation: 8,
-    },
-  },
-  
-  brandMark: {
-    shadowColor: '#000000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 4,
-  },
-};
-
-// Typography style objects for easy use
-export const TEXT_STYLES = {
-  // Welcome screen typography
-  kicker: {
-    fontFamily: FONTS.families.ibmPlexSansBold,
-    fontWeight: FONTS.weights.bold,
-    fontSize: FONTS.sizes.kicker,
-    lineHeight: FONTS.lineHeights.kicker,
-    letterSpacing: FONTS.letterSpacing.kicker,
-    color: COLORS.grey500,
-  },
-  
-  welcomeTitle: {
-    fontFamily: FONTS.families.ibmPlexSansBold,
-    fontWeight: FONTS.weights.bold,
-    fontSize: FONTS.sizes.welcomeTitle,
-    lineHeight: FONTS.lineHeights.welcomeTitle,
-    color: COLORS.grey800,
-  },
-  
-  body: {
-    fontFamily: FONTS.families.inter,
-    fontWeight: FONTS.weights.regular,
-    fontSize: FONTS.sizes.body,
-    lineHeight: FONTS.lineHeights.body,
-    textAlign: 'center' as const,
-    color: COLORS.grey600,
-  },
-  
-  buttonLabel: {
-    fontFamily: FONTS.families.inter,
-    fontWeight: FONTS.weights.semibold,
-    fontSize: FONTS.sizes.buttonLabel,
-    color: COLORS.btnLabel,
-  },
-};
-
-export default {
-  COLORS,
-  FONTS,
-  SPACING,
-  BORDER_RADIUS,
-  SHADOWS,
-  TEXT_STYLES,
-};
+import { Platform } from 'react-native';
+
+// Color Tokens as specified in the design brief
+export const COLORS = {
+  // Welcome Screen Specific Colors
+  surface: '#FAFAFA',
+  grey400: '#9CA3AF',
+  grey500: '#86888E',
+  grey600: '#62646C',
+  grey700: '#374151', 
+  grey800: '#1F242F',
+  
+  // PrimaryButton exact tokens
+  btnGradStart: '#29292B',
+  btnGradEnd: '#17181C',
+  btnBorder: 'rgba(0,0,0,0.20)',
+  btnShadowOuter: 'rgba(0,0,0,0.10)',
+  btnInnerShadow: 'rgba(0,0,0,0.06)',
+  btnLabel: '#FFFFFF',
+  iconCircleGradientStart: '#0A090E',
+  iconCircleGradientEnd: '#17171B',
+  
+  // Legacy colors (preserved for backward compatibility)
+  primary: '#FFD700',
+  primaryDark: '#E9B104',
+  primaryLight: '#FFDF33',
+  
+  background: {
+    dark: '#000000',
+    medium: '#121212',
+    light: '#1C2526',
+  },
+  
+  text: {
+    primary: '#FFFFFF',
+    secondary: '#B0B0B0',
+    tertiary: '#808080',
+    gold: '#FFD700',
+  },
+  
+  ui: {
+    cardBackground: 'rgba(255, 255, 255, 0.1)',
+    divider: 'rgba(255, 255, 255, 0.1)',
+    inputBackground: 'rgba(255, 255, 255, 0.1)',
+    buttonBackground: 'rgba(255, 255, 255, 0.1)',
+  },
+  
+  status: {
+    success: '#4BB543',
+    error: '#FF3B30',
+    warning: '#FF9500',
+    info: '#5AC8FA',
+  },
+  
+  transparent: 'transparent',
+  overlay: 'rgba(0, 0, 0, 0.7)',
+};
+
+// Typography - Font families and weights as specified
+export const FONTS = {
+  families: {
+    ibmPlexSans: Platform.OS === 'ios' ? 'IBM Plex Sans' : 'IBM Plex Sans',
+    ibmPlexSansBold: Platform.OS === 'ios' ? 'IBM Plex Sans' : 'IBM Plex Sans',
+    inter: Platform.OS === 'ios' ? 'Inter' : 'Inter-Regular',
+    // Legacy families
+    base: Platform.OS === 'ios' ? 'System' : 'Roboto',
+    serif: Platform.OS === 'ios' ? 'Georgia' : 'serif',
+  },
+  
+  weights: {
+    light: '300' as const,
+    regular: '400' as const,
+    medium: '500' as const,
+    semibold: '600' as const,
+    bold: '700' as const,
+  },
+  
+  sizes: {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+    xxl: 24,
+    xxxl: 28,
+    title: 32,
+    large: 42,
+    // Welcome screen specific sizes
+    kicker: 18,
+    welcomeTitle: 48,
+    body: 16,
+    buttonLabel: 16,
+  },
+  
+  lineHeights: {
+    // Welcome screen specific line heights
+    kicker: 20, // 111%
+    welcomeTitle: 54, // 112.5%
+    body: 24, // 150%
+    // Legacy line heights
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+  },
+  
+  letterSpacing: {
+    kicker: -0.24,
+    tight: -0.5,
+    normal: 0,
+    wide: 0.5,
+  },
+};
+
+// Spacing tokens
+export const SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  xxxl: 64,
+  // Welcome screen specific spacing
+  modalTopPadding: 118,
+  modalHorizontal: 24,
+};
+
+// Border radius tokens
+export const BORDER_RADIUS = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  pill: 100,
+  circle: 999,
+  // Welcome screen specific radii
+  modalTop: 24,
+  buttonPill: 100,
+};
+
+// Shadow tokens
+export const SHADOWS = {
+  small: {
+    shadowColor: COLORS.primary,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  medium: {
+    shadowColor: COLORS.primary,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.5,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  large: {
+    shadowColor: COLORS.primary,
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.8,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  
+  // Welcome screen specific shadows
+  button: {
+    // Inner shadow (simulated via overlay)
+    inner: {
+      shadowColor: COLORS.btnInnerShadow,
+      shadowOffset: { width: 0, height: -36 },
+      shadowOpacity: 1,
+      shadowRadius: 21.1,
+    },
+    // Outer shadow
+    outer: {
+      shadowColor: COLORS.btnShadowOuter,
+      shadowOffset: { width: 20, height: 30 },
+      shadowOpacity: 1,
+      shadowRadius: 40,
+      elevation: 8,
+    },
+  },
+  
+  brandMark: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+};
+
+// Typography style objects for easy use
+export const TEXT_STYLES = {
+  // Welcome screen typography
+  kicker: {
+    fontFamily: FONTS.families.ibmPlexSansBold,
+    fontWeight: FONTS.weights.bold,
+    fontSize: FONTS.sizes.kicker,
+    lineHeight: FONTS.lineHeights.kicker,
+    letterSpacing: FONTS.letterSpacing.kicker,
+    color: COLORS.grey500,
+  },
+  
+  welcomeTitle: {
+    fontFamily: FONTS.families.ibmPlexSansBold,
+    fontWeight: FONTS.weights.bold,
+    fontSize: FONTS.sizes.welcomeTitle,
+    lineHeight: FONTS.lineHeights.welcomeTitle,
+    color: COLORS.grey800,
+  },
+  
+  body: {
+    fontFamily: FONTS.families.inter,
+    fontWeight: FONTS.weights.regular,
+    fontSize: FONTS.sizes.body,
+    lineHeight: FONTS.lineHeights.body,
+    textAlign: 'center' as const,
+    color: COLORS.grey600,
+  },
+  
+  buttonLabel: {
+    fontFamily: FONTS.families.inter,
+    fontWeight: FONTS.weights.semibold,
+    fontSize: FONTS.sizes.buttonLabel,
+    color: COLORS.btnLabel,
+  },
+};
+
+export default {
+  COLORS,
+  FONTS,
+  SPACING,
+  BORDER_RADIUS,
+  SHADOWS,
+  TEXT_STYLES,
+};

package/src/types/ambient.d.ts

@@ -1,29 +1,29 @@
-/**
- * Ambient type declarations to fix Node.js module conflicts
- */
-
-// These modules are not used directly in React Native, but are referenced by types
-// Providing empty declarations prevents TypeScript from trying to use Node.js types
-declare module 'https' {
-  interface Server {
-    prependListener(event: string, listener: (...args: any[]) => void): any;
-    once(event: string, listener: (...args: any[]) => void): any;
-    prependOnceListener(event: string, listener: (...args: any[]) => void): any;
-  }
-}
-
-declare module 'node:https' {}
-declare module 'node:http' {}
-declare module 'node:crypto' {}
-declare module 'process' {
-  global {
-    namespace NodeJS {
-      interface Process {
-        env: {
-          NODE_ENV?: string;
-          [key: string]: string | undefined;
-        };
-      }
-    }
-  }
+/**
+ * Ambient type declarations to fix Node.js module conflicts
+ */
+
+// These modules are not used directly in React Native, but are referenced by types
+// Providing empty declarations prevents TypeScript from trying to use Node.js types
+declare module 'https' {
+  interface Server {
+    prependListener(event: string, listener: (...args: any[]) => void): any;
+    once(event: string, listener: (...args: any[]) => void): any;
+    prependOnceListener(event: string, listener: (...args: any[]) => void): any;
+  }
+}
+
+declare module 'node:https' {}
+declare module 'node:http' {}
+declare module 'node:crypto' {}
+declare module 'process' {
+  global {
+    namespace NodeJS {
+      interface Process {
+        env: {
+          NODE_ENV?: string;
+          [key: string]: string | undefined;
+        };
+      }
+    }
+  }
 }