@robin-ux/native 0.1.0

package/src/theme/defaultTheme.ts

@@ -0,0 +1,91 @@
+import { Theme, ThemeColors } from './types';
+
+/**
+ * Default light theme colors - a neutral, accessible color palette.
+ */
+export const defaultLightColors: ThemeColors = {
+  // Backgrounds
+  background: '#ffffff',
+  backgroundSecondary: '#f5f5f5',
+
+  // Foreground (text)
+  foreground: '#1a1a1a',
+  foregroundSecondary: '#666666',
+  foregroundTertiary: '#999999',
+
+  // Primary brand colors
+  primary: '#3b82f6',
+  primaryLight: '#60a5fa',
+  primaryDark: '#2563eb',
+
+  // Accent colors
+  accent: '#8b5cf6',
+  accentLight: '#a78bfa',
+
+  // Semantic/status colors
+  destructive: '#ef4444',
+  destructiveForeground: '#ffffff',
+  success: '#10b981',
+  warning: '#f59e0b',
+  error: '#ef4444',
+  info: '#3b82f6',
+
+  // UI element colors
+  border: '#e5e5e5',
+  muted: '#f5f5f5',
+  mutedForeground: '#666666',
+  card: '#ffffff',
+};
+
+/**
+ * Default dark theme colors - a neutral, accessible dark color palette.
+ */
+export const defaultDarkColors: ThemeColors = {
+  // Backgrounds
+  background: '#0a0a0a',
+  backgroundSecondary: '#171717',
+
+  // Foreground (text)
+  foreground: '#fafafa',
+  foregroundSecondary: '#a3a3a3',
+  foregroundTertiary: '#737373',
+
+  // Primary brand colors
+  primary: '#60a5fa',
+  primaryLight: '#93c5fd',
+  primaryDark: '#3b82f6',
+
+  // Accent colors
+  accent: '#a78bfa',
+  accentLight: '#c4b5fd',
+
+  // Semantic/status colors
+  destructive: '#f87171',
+  destructiveForeground: '#ffffff',
+  success: '#34d399',
+  warning: '#fbbf24',
+  error: '#f87171',
+  info: '#60a5fa',
+
+  // UI element colors
+  border: '#262626',
+  muted: '#262626',
+  mutedForeground: '#a3a3a3',
+  card: '#171717',
+};
+
+/**
+ * Default light theme - used as fallback when no ThemeProvider is present.
+ */
+export const defaultTheme: Theme = {
+  colors: defaultLightColors,
+  isDark: false,
+};
+
+/**
+ * Default dark theme variant.
+ */
+export const defaultDarkTheme: Theme = {
+  colors: defaultDarkColors,
+  isDark: true,
+};

package/src/theme/index.ts

@@ -0,0 +1,12 @@
+// Theme context and hooks
+export { ThemeContext, useTheme, useThemeSafe } from './ThemeContext';
+
+// Theme provider
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+
+// Default themes
+export { defaultTheme, defaultDarkTheme, defaultLightColors, defaultDarkColors } from './defaultTheme';
+
+// Types
+export type { Theme, ThemeColors, ThemeContextValue } from './types';

package/src/theme/types.ts

@@ -0,0 +1,52 @@
+/**
+ * Theme color definitions for @robin-ux/native components.
+ * These define all the semantic colors used by components.
+ */
+export interface ThemeColors {
+  // Backgrounds
+  background: string;
+  backgroundSecondary: string;
+
+  // Foreground (text)
+  foreground: string;
+  foregroundSecondary: string;
+  foregroundTertiary: string;
+
+  // Primary brand colors
+  primary: string;
+  primaryLight: string;
+  primaryDark: string;
+
+  // Accent colors
+  accent: string;
+  accentLight: string;
+
+  // Semantic/status colors
+  destructive: string;
+  destructiveForeground: string;
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+
+  // UI element colors
+  border: string;
+  muted: string;
+  mutedForeground: string;
+  card: string;
+}
+
+/**
+ * Complete theme object containing colors and mode information.
+ */
+export interface Theme {
+  colors: ThemeColors;
+  isDark: boolean;
+}
+
+/**
+ * Theme context value type.
+ */
+export interface ThemeContextValue {
+  theme: Theme;
+}

package/src/utils/index.ts

@@ -0,0 +1,19 @@
+// Style utilities
+export {
+  spacing,
+  borderRadius,
+  typography,
+  shadows,
+  layouts,
+  useThemedStyles,
+  createThemedStyle,
+} from './styles';
+
+// Types
+export type {
+  SpacingKey,
+  BorderRadiusKey,
+  TypographyVariant,
+  ShadowKey,
+  LayoutKey,
+} from './styles';

package/src/utils/styles.ts

@@ -0,0 +1,188 @@
+import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
+import { useThemeSafe } from '../theme';
+import { ThemeColors } from '../theme/types';
+
+/**
+ * Spacing scale for consistent layout.
+ */
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+} as const;
+
+export type SpacingKey = keyof typeof spacing;
+
+/**
+ * Border radius scale.
+ */
+export const borderRadius = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const;
+
+export type BorderRadiusKey = keyof typeof borderRadius;
+
+/**
+ * Typography presets using system fonts.
+ */
+export const typography = {
+  // Headings
+  heading: {
+    fontSize: 32,
+    lineHeight: 40,
+    fontWeight: '800' as const,
+  } as TextStyle,
+
+  subheading: {
+    fontSize: 24,
+    lineHeight: 32,
+    fontWeight: '700' as const,
+  } as TextStyle,
+
+  title: {
+    fontSize: 20,
+    lineHeight: 28,
+    fontWeight: '600' as const,
+  } as TextStyle,
+
+  // Body text
+  body: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '400' as const,
+  } as TextStyle,
+
+  bodyMedium: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '500' as const,
+  } as TextStyle,
+
+  bodySemibold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600' as const,
+  } as TextStyle,
+
+  // Small text
+  caption: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '400' as const,
+  } as TextStyle,
+
+  label: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '500' as const,
+  } as TextStyle,
+} as const;
+
+export type TypographyVariant = keyof typeof typography;
+
+/**
+ * Common shadow styles.
+ */
+export const shadows = {
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  } as ViewStyle,
+
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  } as ViewStyle,
+
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 4,
+  } as ViewStyle,
+} as const;
+
+export type ShadowKey = keyof typeof shadows;
+
+/**
+ * Common flex layouts.
+ */
+export const layouts = {
+  row: {
+    flexDirection: 'row',
+  } as ViewStyle,
+
+  rowCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  } as ViewStyle,
+
+  rowBetween: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  } as ViewStyle,
+
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  } as ViewStyle,
+
+  flex1: {
+    flex: 1,
+  } as ViewStyle,
+} as const;
+
+export type LayoutKey = keyof typeof layouts;
+
+/**
+ * Type for style factory function.
+ */
+type StyleFactory<T> = (colors: ThemeColors) => T;
+
+/**
+ * Hook to create themed styles using StyleSheet.create.
+ *
+ * @example
+ * ```tsx
+ * const styles = useThemedStyles((colors) => ({
+ *   container: {
+ *     backgroundColor: colors.background,
+ *     padding: spacing.md,
+ *   },
+ *   title: {
+ *     ...typography.heading,
+ *     color: colors.foreground,
+ *   },
+ * }));
+ * ```
+ */
+export function useThemedStyles<T extends StyleSheet.NamedStyles<T>>(factory: StyleFactory<T>): T {
+  const { colors } = useThemeSafe();
+  return StyleSheet.create(factory(colors));
+}
+
+/**
+ * Create a themed style object without StyleSheet.create.
+ * Useful for dynamic styles or when you need to merge with other styles.
+ */
+export function createThemedStyle<T extends ViewStyle | TextStyle>(
+  factory: StyleFactory<T>,
+  colors: ThemeColors
+): T {
+  return factory(colors);
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}