145 lines
3.8 KiB
TypeScript
145 lines
3.8 KiB
TypeScript
import { createConfig } from '@gluestack-style/react';
|
|
import { config as defaultConfig } from '@gluestack-ui/config';
|
|
|
|
// Design System Colors - NO GRADIENTS, solid colors only
|
|
export const AppColors = {
|
|
// Primary colors
|
|
deepPurple: '#200028', // Primary text, titles, important content
|
|
slatePurple: '#8C8EA3', // Secondary text, placeholders, timestamps
|
|
mediumPurple: '#A177A6', // Brand color, buttons, headers, user chat bubbles
|
|
lavender: '#CEB0DA', // Highlights, AI avatar background, subtle emphasis
|
|
blushPink: '#DBBABA', // User avatar background, warm accents
|
|
cream: '#FAF7F8', // App background
|
|
white: '#FFFFFF', // Cards, chat bubbles, content containers
|
|
|
|
// Functional colors
|
|
transparent: 'transparent',
|
|
error: '#DC3545',
|
|
success: '#28A745',
|
|
};
|
|
|
|
// Create custom config extending default
|
|
export const gluestackConfig = createConfig({
|
|
...defaultConfig,
|
|
tokens: {
|
|
...defaultConfig.tokens,
|
|
colors: {
|
|
...defaultConfig.tokens.colors,
|
|
// App brand colors
|
|
deepPurple: AppColors.deepPurple,
|
|
slatePurple: AppColors.slatePurple,
|
|
mediumPurple: AppColors.mediumPurple,
|
|
lavender: AppColors.lavender,
|
|
blushPink: AppColors.blushPink,
|
|
cream: AppColors.cream,
|
|
|
|
// Override primary colors to use medium purple
|
|
primary0: '#FFFFFF',
|
|
primary50: '#F5EEF6',
|
|
primary100: '#E8D9EB',
|
|
primary200: '#D7C0DC',
|
|
primary300: '#C5A7CD',
|
|
primary400: '#B38FBD',
|
|
primary500: AppColors.mediumPurple, // Main brand color
|
|
primary600: '#8A6490',
|
|
primary700: '#73527A',
|
|
primary800: '#5C4164',
|
|
primary900: '#45304E',
|
|
primary950: AppColors.deepPurple,
|
|
|
|
// Background colors
|
|
backgroundLight0: AppColors.white,
|
|
backgroundLight50: AppColors.cream,
|
|
backgroundLight100: AppColors.cream,
|
|
backgroundDark0: AppColors.deepPurple,
|
|
backgroundDark50: '#2D0036',
|
|
backgroundDark100: '#3A004A',
|
|
|
|
// Text colors
|
|
textLight0: AppColors.deepPurple,
|
|
textLight50: AppColors.deepPurple,
|
|
textLight100: AppColors.deepPurple,
|
|
textLight400: AppColors.slatePurple,
|
|
textLight500: AppColors.slatePurple,
|
|
textDark0: AppColors.white,
|
|
textDark50: AppColors.white,
|
|
textDark100: AppColors.white,
|
|
textDark400: AppColors.lavender,
|
|
textDark500: AppColors.lavender,
|
|
},
|
|
space: {
|
|
...defaultConfig.tokens.space,
|
|
'px': '1px',
|
|
'0': 0,
|
|
'0.5': 2,
|
|
'1': 4,
|
|
'1.5': 6,
|
|
'2': 8,
|
|
'2.5': 10,
|
|
'3': 12,
|
|
'3.5': 14,
|
|
'4': 16,
|
|
'5': 20,
|
|
'6': 24,
|
|
'7': 28,
|
|
'8': 32,
|
|
'10': 40,
|
|
'12': 48,
|
|
'16': 64,
|
|
'20': 80,
|
|
'24': 96,
|
|
},
|
|
radii: {
|
|
...defaultConfig.tokens.radii,
|
|
'none': 0,
|
|
'xs': 4,
|
|
'sm': 6,
|
|
'md': 8,
|
|
'lg': 12,
|
|
'xl': 16,
|
|
'2xl': 20,
|
|
'3xl': 24,
|
|
'full': 9999,
|
|
},
|
|
fontSizes: {
|
|
...defaultConfig.tokens.fontSizes,
|
|
'2xs': 10,
|
|
'xs': 11,
|
|
'sm': 13,
|
|
'md': 15,
|
|
'lg': 17,
|
|
'xl': 20,
|
|
'2xl': 24,
|
|
'3xl': 28,
|
|
'4xl': 32,
|
|
},
|
|
},
|
|
} as const);
|
|
|
|
// Export type for TypeScript support
|
|
type ConfigType = typeof gluestackConfig;
|
|
|
|
declare module '@gluestack-style/react' {
|
|
interface ICustomConfig extends ConfigType {}
|
|
}
|
|
|
|
// Legacy Colors export for backward compatibility
|
|
export const Colors = {
|
|
light: {
|
|
text: AppColors.deepPurple,
|
|
background: AppColors.cream,
|
|
tint: AppColors.mediumPurple,
|
|
icon: AppColors.slatePurple,
|
|
tabIconDefault: AppColors.slatePurple,
|
|
tabIconSelected: AppColors.mediumPurple,
|
|
},
|
|
dark: {
|
|
text: AppColors.white,
|
|
background: AppColors.deepPurple,
|
|
tint: AppColors.lavender,
|
|
icon: AppColors.lavender,
|
|
tabIconDefault: AppColors.lavender,
|
|
tabIconSelected: AppColors.mediumPurple,
|
|
},
|
|
};
|