cameron.stream
A React Native app for the ultimate thinking partner.
1// Letta Theme System - Central Export
2
3export * from './colors';
4export * from './typography';
5export * from './spacing';
6export * from './animations';
7
8import { defaultColors, lightColors, createColorTokens, type ColorTokens } from './colors';
9import { typography, type Typography } from './typography';
10import { spacing, layout, breakpoints, type Spacing, type Layout } from './spacing';
11import { duration, easing, animations, createTransition, type Duration, type Easing } from './animations';
12
13// Complete theme object
14export const createTheme = (isDark: boolean = true) => ({
15 colors: createColorTokens(isDark),
16 typography,
17 spacing,
18 layout,
19 breakpoints,
20 animations: {
21 duration,
22 easing,
23 presets: animations,
24 createTransition,
25 },
26});
27
28// Default themes
29export const darkTheme = createTheme(true);
30export const lightTheme = createTheme(false);
31
32// Theme type
33export type Theme = ReturnType<typeof createTheme>;
34
35// Theme context interface
36export interface ThemeContextType {
37 theme: Theme;
38 isDark: boolean;
39 toggleTheme: () => void;
40}
41
42// Utility function to get responsive values
43export const responsive = (values: { [key in keyof typeof breakpoints]?: any }) => {
44 return values;
45};
46
47// Media query helpers for React Native Web
48export const mediaQuery = {
49 mobile: `@media (max-width: ${breakpoints.tablet - 1}px)`,
50 tablet: `@media (min-width: ${breakpoints.tablet}px) and (max-width: ${breakpoints.desktop - 1}px)`,
51 desktop: `@media (min-width: ${breakpoints.desktop}px)`,
52 wide: `@media (min-width: ${breakpoints.wide}px)`,
53};
54
55export default darkTheme;