@oxyhq/bloom 0.1.0

package/src/theme/color-presets.ts

@@ -0,0 +1,499 @@
+export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint';
+
+export interface AppColorPreset {
+  name: AppColorName;
+  hex: string;
+  light: Record<string, string>;
+  dark: Record<string, string>;
+}
+
+export const APP_COLOR_NAMES: AppColorName[] = ['teal', 'blue', 'green', 'amber', 'red', 'purple', 'pink', 'sky', 'orange', 'mint'];
+
+export const HEX_TO_APP_COLOR: Record<string, AppColorName> = {
+  '#005c67': 'teal',
+  '#1d9bf0': 'blue',
+  '#10b981': 'green',
+  '#f59e0b': 'amber',
+  '#ef4444': 'red',
+  '#8b5cf6': 'purple',
+  '#ec4899': 'pink',
+  '#0ea5e9': 'sky',
+  '#f97316': 'orange',
+  '#14b8a6': 'mint',
+};
+
+export function hexToAppColorName(hex: string): AppColorName {
+  return HEX_TO_APP_COLOR[hex.toLowerCase()] ?? 'teal';
+}
+
+export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
+  teal: {
+    name: 'teal',
+    hex: '#005c67',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '185 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '185 100% 20%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '185 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '185 8% 95%',
+      '--muted-foreground': '185 5% 42%',
+      '--accent': '185 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '185 8% 88%',
+      '--input': '185 8% 88%',
+      '--ring': '185 100% 20%',
+      '--sidebar': '185 10% 97%',
+    },
+    dark: {
+      '--background': '185 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '185 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '185 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '185 100% 20%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '185 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '185 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '185 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '185 12% 20%',
+      '--input': '185 10% 23%',
+      '--ring': '185 100% 20%',
+      '--sidebar': '185 30% 8%',
+    },
+  },
+
+  blue: {
+    name: 'blue',
+    hex: '#1D9BF0',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '205 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '205 87% 53%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '205 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '205 8% 95%',
+      '--muted-foreground': '205 5% 42%',
+      '--accent': '205 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '205 8% 88%',
+      '--input': '205 8% 88%',
+      '--ring': '205 87% 53%',
+      '--sidebar': '205 10% 97%',
+    },
+    dark: {
+      '--background': '205 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '205 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '205 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '205 87% 53%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '205 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '205 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '205 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '205 12% 20%',
+      '--input': '205 10% 23%',
+      '--ring': '205 87% 53%',
+      '--sidebar': '205 30% 8%',
+    },
+  },
+
+  green: {
+    name: 'green',
+    hex: '#10B981',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '160 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '160 84% 39%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '160 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '160 8% 95%',
+      '--muted-foreground': '160 5% 42%',
+      '--accent': '160 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '160 8% 88%',
+      '--input': '160 8% 88%',
+      '--ring': '160 84% 39%',
+      '--sidebar': '160 10% 97%',
+    },
+    dark: {
+      '--background': '160 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '160 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '160 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '160 84% 39%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '160 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '160 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '160 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '160 12% 20%',
+      '--input': '160 10% 23%',
+      '--ring': '160 84% 39%',
+      '--sidebar': '160 30% 8%',
+    },
+  },
+
+  amber: {
+    name: 'amber',
+    hex: '#F59E0B',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '38 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '38 92% 50%',
+      '--primary-foreground': '0 0% 0%',
+      '--secondary': '38 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '38 8% 95%',
+      '--muted-foreground': '38 5% 42%',
+      '--accent': '38 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '38 8% 88%',
+      '--input': '38 8% 88%',
+      '--ring': '38 92% 50%',
+      '--sidebar': '38 10% 97%',
+    },
+    dark: {
+      '--background': '38 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '38 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '38 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '38 92% 50%',
+      '--primary-foreground': '0 0% 0%',
+      '--secondary': '38 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '38 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '38 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '38 12% 20%',
+      '--input': '38 10% 23%',
+      '--ring': '38 92% 50%',
+      '--sidebar': '38 30% 8%',
+    },
+  },
+
+  red: {
+    name: 'red',
+    hex: '#EF4444',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '0 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '0 84% 60%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '0 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '0 8% 95%',
+      '--muted-foreground': '0 5% 42%',
+      '--accent': '0 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '0 8% 88%',
+      '--input': '0 8% 88%',
+      '--ring': '0 84% 60%',
+      '--sidebar': '0 10% 97%',
+    },
+    dark: {
+      '--background': '0 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '0 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '0 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '0 84% 60%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '0 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '0 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '0 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '0 12% 20%',
+      '--input': '0 10% 23%',
+      '--ring': '0 84% 60%',
+      '--sidebar': '0 30% 8%',
+    },
+  },
+
+  purple: {
+    name: 'purple',
+    hex: '#8B5CF6',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '258 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '258 90% 66%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '258 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '258 8% 95%',
+      '--muted-foreground': '258 5% 42%',
+      '--accent': '258 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '258 8% 88%',
+      '--input': '258 8% 88%',
+      '--ring': '258 90% 66%',
+      '--sidebar': '258 10% 97%',
+    },
+    dark: {
+      '--background': '258 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '258 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '258 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '258 90% 66%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '258 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '258 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '258 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '258 12% 20%',
+      '--input': '258 10% 23%',
+      '--ring': '258 90% 66%',
+      '--sidebar': '258 30% 8%',
+    },
+  },
+
+  pink: {
+    name: 'pink',
+    hex: '#EC4899',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '330 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '330 81% 60%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '330 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '330 8% 95%',
+      '--muted-foreground': '330 5% 42%',
+      '--accent': '330 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '330 8% 88%',
+      '--input': '330 8% 88%',
+      '--ring': '330 81% 60%',
+      '--sidebar': '330 10% 97%',
+    },
+    dark: {
+      '--background': '330 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '330 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '330 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '330 81% 60%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '330 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '330 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '330 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '330 12% 20%',
+      '--input': '330 10% 23%',
+      '--ring': '330 81% 60%',
+      '--sidebar': '330 30% 8%',
+    },
+  },
+
+  sky: {
+    name: 'sky',
+    hex: '#0EA5E9',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '199 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '199 89% 48%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '199 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '199 8% 95%',
+      '--muted-foreground': '199 5% 42%',
+      '--accent': '199 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '199 8% 88%',
+      '--input': '199 8% 88%',
+      '--ring': '199 89% 48%',
+      '--sidebar': '199 10% 97%',
+    },
+    dark: {
+      '--background': '199 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '199 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '199 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '199 89% 48%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '199 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '199 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '199 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '199 12% 20%',
+      '--input': '199 10% 23%',
+      '--ring': '199 89% 48%',
+      '--sidebar': '199 30% 8%',
+    },
+  },
+
+  orange: {
+    name: 'orange',
+    hex: '#F97316',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '25 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '25 95% 53%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '25 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '25 8% 95%',
+      '--muted-foreground': '25 5% 42%',
+      '--accent': '25 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '25 8% 88%',
+      '--input': '25 8% 88%',
+      '--ring': '25 95% 53%',
+      '--sidebar': '25 10% 97%',
+    },
+    dark: {
+      '--background': '25 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '25 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '25 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '25 95% 53%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '25 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '25 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '25 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '25 12% 20%',
+      '--input': '25 10% 23%',
+      '--ring': '25 95% 53%',
+      '--sidebar': '25 30% 8%',
+    },
+  },
+
+  mint: {
+    name: 'mint',
+    hex: '#14B8A6',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '173 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '173 80% 40%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '173 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '173 8% 95%',
+      '--muted-foreground': '173 5% 42%',
+      '--accent': '173 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '173 8% 88%',
+      '--input': '173 8% 88%',
+      '--ring': '173 80% 40%',
+      '--sidebar': '173 10% 97%',
+    },
+    dark: {
+      '--background': '173 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '173 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '173 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '173 80% 40%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '173 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '173 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '173 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '173 12% 20%',
+      '--input': '173 10% 23%',
+      '--ring': '173 80% 40%',
+      '--sidebar': '173 30% 8%',
+    },
+  },
+};

package/src/theme/index.ts

@@ -0,0 +1,6 @@
+export { BloomThemeProvider } from './BloomThemeProvider';
+export type { BloomThemeProviderProps, BloomThemeContextValue } from './BloomThemeProvider';
+export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
+export type { Theme, ThemeColors, ThemeMode } from './types';
+export type { AppColorName, AppColorPreset } from './color-presets';
+export { APP_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName } from './color-presets';

package/src/theme/set-color-scheme-safe.ts

@@ -0,0 +1,19 @@
+import { Appearance, Platform } from 'react-native';
+import type { ColorSchemeName } from 'react-native';
+import type { ThemeMode } from './types';
+
+/**
+ * Safely set the color scheme via Appearance API.
+ * On Android (RN 0.83+), Appearance.setColorScheme has a Kotlin non-null
+ * annotation on `style`. Passing null for 'system' crashes.
+ * Workaround: resolve the system preference and pass 'light'/'dark' instead.
+ */
+export function setColorSchemeSafe(mode: ThemeMode) {
+  const effectiveMode = mode === 'adaptive' ? 'system' : mode;
+  if (effectiveMode === 'system') {
+    const resolved = Appearance.getColorScheme() ?? 'light';
+    Appearance.setColorScheme(resolved);
+  } else {
+    Appearance.setColorScheme(effectiveMode);
+  }
+}

package/src/theme/types.ts

@@ -0,0 +1,48 @@
+export type ThemeMode = 'light' | 'dark' | 'system' | 'adaptive';
+
+export interface ThemeColors {
+  background: string;
+  backgroundSecondary: string;
+  backgroundTertiary: string;
+
+  text: string;
+  textSecondary: string;
+  textTertiary: string;
+
+  border: string;
+  borderLight: string;
+
+  primary: string;
+  primaryLight: string;
+  primaryDark: string;
+
+  secondary: string;
+
+  tint: string;
+  icon: string;
+  iconActive: string;
+
+  success: string;
+  error: string;
+  warning: string;
+  info: string;
+
+  primarySubtle: string;
+  primarySubtleForeground: string;
+  negative: string;
+  negativeForeground: string;
+  negativeSubtle: string;
+  negativeSubtleForeground: string;
+  contrast50: string;
+
+  card: string;
+  shadow: string;
+  overlay: string;
+}
+
+export interface Theme {
+  mode: 'light' | 'dark';
+  colors: ThemeColors;
+  isDark: boolean;
+  isLight: boolean;
+}

package/src/theme/use-theme.ts

@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { BloomThemeContext } from './BloomThemeProvider';
+import type { Theme, ThemeColors } from './types';
+
+export function useTheme(): Theme {
+  const ctx = useContext(BloomThemeContext);
+  if (!ctx) {
+    throw new Error('useTheme must be used within a <BloomThemeProvider>');
+  }
+  return ctx.theme;
+}
+
+export function useThemeColor(colorKey: keyof ThemeColors): string {
+  const theme = useTheme();
+  return theme.colors[colorKey];
+}
+
+export function useBloomTheme() {
+  const ctx = useContext(BloomThemeContext);
+  if (!ctx) {
+    throw new Error('useBloomTheme must be used within a <BloomThemeProvider>');
+  }
+  return ctx;
+}