@cranberry-money/shared-constants
Version:
Shared constants for Blueberry platform
218 lines • 6.1 kB
JavaScript
/**
* Design tokens for consistent styling across platforms
* These values can be used in both React (CSS) and React Native (StyleSheet)
*/
export const DESIGN_TOKENS = {
colors: {
// Surface colors - backgrounds and containers
surface: {
primary: '#0c1426', // Main app background - navy blue
secondary: '#1a2332', // Cards, panels - lighter navy
tertiary: '#2a3441', // Interactive elements - blue-gray
quaternary: '#4a5568', // Disabled states
elevated: '#243247', // Modals, dropdowns - elevated navy
},
// Content colors - text and icons
content: {
primary: '#fafbfc', // Primary headings
secondary: '#e4e7ea', // Secondary text
body: '#cbd2d8', // Body text
muted: '#8b95a1', // Muted text
subtle: '#64748b', // Subtle helpers
},
// Primary brand colors
primary: {
100: '#e0e7ff',
300: '#a5b4fc',
400: '#818cf8',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
800: '#3730a3',
900: '#312e81',
},
// Status colors
success: {
300: '#86efac',
400: '#4ade80',
600: '#16a34a',
700: '#15803d',
900: '#14532d',
},
error: {
300: '#fca5a5',
400: '#f87171',
600: '#dc2626',
700: '#b91c1c',
900: '#7f1d1d',
subtle: '#fef2f2', // Light background for error messages
},
warning: {
300: '#fbbf24',
600: '#d97706',
900: '#92400e',
},
info: {
400: '#38bdf8',
600: '#0284c7',
},
// Border colors
border: {
default: '#334155', // Standard borders - navy-gray
subtle: '#1e293b', // Subtle dividers - dark navy
strong: '#475569', // Emphasis borders
focus: {
primary: '#6366f1', // Primary focus color
subtle: '#6b7280', // Subtle focus color
},
},
// Accent colors for special UI elements
accent: {
secondary: '#ec4899', // Pink accent for icons
warm: '#f97316', // Orange accent for icons
teal: '#14b8a6', // Teal accent for financial highlights
violet: '#8b5cf6', // Violet accent for premium features
},
// Financial specific colors
financial: {
positive: '#10b981', // For positive values (gains, profits)
negative: '#ef4444', // For negative values (losses)
distribution: '#8b5cf6', // For distribution/gift transactions
},
// Utility colors
utility: {
white: '#ffffff',
black: '#000000',
transparent: 'transparent',
},
// Chart colors for data visualization
chart: [
'#3B82F6',
'#EF4444',
'#10B981',
'#F59E0B',
'#8B5CF6',
'#EC4899',
'#06B6D4',
'#84CC16',
'#F97316',
'#6366F1',
],
// Semantic colors for specific meanings
semantic: {
positive: '#10B981', // Green for gains/success
negative: '#EF4444', // Red for losses/errors
neutral: '#6B7280', // Gray for unchanged
},
},
// Spacing scale (in pixels)
spacing: {
xs: 4,
sm: 8,
md: 16,
lg: 24,
xl: 32,
'2xl': 48,
'3xl': 64,
'4xl': 80,
},
// Border radius values
borderRadius: {
none: 0,
sm: 4,
md: 8,
lg: 12,
xl: 16,
'2xl': 24,
full: 9999,
},
// Font sizes
fontSize: {
xs: 12,
sm: 14,
base: 16,
lg: 18,
xl: 20,
'2xl': 24,
'3xl': 30,
'4xl': 36,
'5xl': 48,
},
// Font weights
fontWeight: {
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
},
// Line heights
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.75,
loose: 2,
},
// Z-index scale for layering
zIndex: {
base: 0,
dropdown: 1000,
sticky: 1020,
fixed: 1030,
backdrop: 1040,
modal: 1050,
popover: 1060,
tooltip: 1070,
},
// Animation durations (in milliseconds)
animation: {
duration: {
instant: 0,
fast: 150,
normal: 300,
slow: 500,
},
easing: {
linear: 'linear',
easeIn: 'ease-in',
easeOut: 'ease-out',
easeInOut: 'ease-in-out',
},
},
// Shadows (React Native compatible format)
shadows: {
sm: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 1, // Android
// Web version
web: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
},
md: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
web: '0 2px 4px 0 rgba(0, 0, 0, 0.1)',
},
lg: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.15,
shadowRadius: 8,
elevation: 5,
web: '0 4px 8px 0 rgba(0, 0, 0, 0.15)',
},
xl: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.2,
shadowRadius: 16,
elevation: 8,
web: '0 8px 16px 0 rgba(0, 0, 0, 0.2)',
},
},
};
//# sourceMappingURL=design-tokens.js.map