Initial commit

2026-06-12 23:23:22 +00:00 · 2026-05-08 13:01:47 +00:00
parent 864bbd389e
commit 9e663bdc8b
64 changed files with 20910 additions and 74 deletions
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -0,0 +1,158 @@
+import { useColorScheme, Platform } from 'react-native';
+import { useThemeStore } from '../stores/themeStore';
+
+// ─── Brand colors ─────────────────────────────────────────────────────────────
+export const COLORS = {
+  primary:          '#6366f1',
+  primaryDark:      '#4f46e5',
+  primaryLight:     '#818cf8',
+  primaryUltraLight:'#eef2ff',
+  primaryMid:       '#c7d2fe',
+
+  success:  '#10b981',
+  successBg:'#d1fae5',
+  warning:  '#f59e0b',
+  warningBg:'#fef3c7',
+  error:    '#ef4444',
+  errorBg:  '#fee2e2',
+  info:     '#3b82f6',
+  infoBg:   '#dbeafe',
+  purple:   '#8b5cf6',
+  purpleBg: '#ede9fe',
+
+  white: '#ffffff',
+  black: '#000000',
+
+  light: {
+    bg:           '#f8fafc',
+    bgSecondary:  '#f1f5f9',
+    surface:      '#ffffff',
+    surfaceHover: '#f8fafc',
+    border:       '#e2e8f0',
+    borderLight:  '#f1f5f9',
+    text:         '#0f172a',
+    textSecondary:'#475569',
+    textMuted:    '#94a3b8',
+    inputBg:      '#ffffff',
+    tabBar:       '#ffffff',
+    tabBarBorder: '#f1f5f9',
+    placeholder:  '#94a3b8',
+    icon:         '#64748b',
+    overlay:      'rgba(15,23,42,0.4)',
+  },
+
+  dark: {
+    bg:           '#0a0f1e',
+    bgSecondary:  '#0f172a',
+    surface:      '#151f32',
+    surfaceHover: '#1e293b',
+    border:       '#1e293b',
+    borderLight:  '#162033',
+    text:         '#f1f5f9',
+    textSecondary:'#94a3b8',
+    textMuted:    '#475569',
+    inputBg:      '#151f32',
+    tabBar:       '#0a0f1e',
+    tabBarBorder: '#151f32',
+    placeholder:  '#475569',
+    icon:         '#64748b',
+    overlay:      'rgba(0,0,0,0.6)',
+  },
+};
+
+// ─── Spacing ──────────────────────────────────────────────────────────────────
+export const SPACING = {
+  xs:   4,
+  sm:   8,
+  md:   12,
+  lg:   16,
+  xl:   20,
+  xxl:  24,
+  xxxl: 32,
+  huge: 48,
+};
+
+// ─── Border radius ────────────────────────────────────────────────────────────
+export const RADIUS = {
+  xs:   4,
+  sm:   8,
+  md:   12,
+  lg:   16,
+  xl:   20,
+  xxl:  24,
+  full: 9999,
+};
+
+// ─── Typography ───────────────────────────────────────────────────────────────
+export const FONT_SIZE = {
+  xs:   11,
+  sm:   13,
+  md:   15,
+  lg:   17,
+  xl:   20,
+  xxl:  24,
+  xxxl: 30,
+  huge: 38,
+};
+
+export const FONT = {
+  regular:  '400' as const,
+  medium:   '500' as const,
+  semibold: '600' as const,
+  bold:     '700' as const,
+  extrabold:'800' as const,
+};
+
+// Pre-built text style objects (use with spread)
+export const TEXT = {
+  h1:      { fontSize: FONT_SIZE.xxxl, fontWeight: FONT.bold,     lineHeight: 38 },
+  h2:      { fontSize: FONT_SIZE.xxl,  fontWeight: FONT.bold,     lineHeight: 32 },
+  h3:      { fontSize: FONT_SIZE.xl,   fontWeight: FONT.semibold, lineHeight: 28 },
+  h4:      { fontSize: FONT_SIZE.lg,   fontWeight: FONT.semibold, lineHeight: 24 },
+  body:    { fontSize: FONT_SIZE.md,   fontWeight: FONT.regular,  lineHeight: 22 },
+  bodyM:   { fontSize: FONT_SIZE.md,   fontWeight: FONT.medium,   lineHeight: 22 },
+  small:   { fontSize: FONT_SIZE.sm,   fontWeight: FONT.regular,  lineHeight: 18 },
+  smallM:  { fontSize: FONT_SIZE.sm,   fontWeight: FONT.medium,   lineHeight: 18 },
+  caption: { fontSize: FONT_SIZE.xs,   fontWeight: FONT.regular,  lineHeight: 16 },
+  captionM:{ fontSize: FONT_SIZE.xs,   fontWeight: FONT.medium,   lineHeight: 16 },
+  overline:{ fontSize: FONT_SIZE.xs,   fontWeight: FONT.bold,     letterSpacing: 1, lineHeight: 16 },
+} as const;
+
+// ─── Shadows ──────────────────────────────────────────────────────────────────
+export const SHADOWS = {
+  none: {},
+  xs: Platform.select({
+    ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.04, shadowRadius: 3 },
+    android: { elevation: 1 },
+  }) ?? {},
+  sm: Platform.select({
+    ios: { shadowColor: '#0f172a', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.06, shadowRadius: 8 },
+    android: { elevation: 2 },
+  }) ?? {},
+  md: Platform.select({
+    ios: { shadowColor: '#0f172a', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.09, shadowRadius: 16 },
+    android: { elevation: 4 },
+  }) ?? {},
+  lg: Platform.select({
+    ios: { shadowColor: '#0f172a', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.12, shadowRadius: 24 },
+    android: { elevation: 8 },
+  }) ?? {},
+  xl: Platform.select({
+    ios: { shadowColor: '#0f172a', shadowOffset: { width: 0, height: 16 }, shadowOpacity: 0.18, shadowRadius: 40 },
+    android: { elevation: 16 },
+  }) ?? {},
+  // Tinted primary shadow
+  primary: Platform.select({
+    ios: { shadowColor: '#6366f1', shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.3, shadowRadius: 16 },
+    android: { elevation: 6 },
+  }) ?? {},
+};
+
+// ─── Theme hook ───────────────────────────────────────────────────────────────
+export function useTheme() {
+  const scheme = useColorScheme();
+  const mode = useThemeStore(s => s.mode);
+  const isDark = mode === 'system' ? scheme === 'dark' : mode === 'dark';
+  const theme = isDark ? COLORS.dark : COLORS.light;
+  return { isDark, colors: COLORS, theme, shadows: SHADOWS };
+}