151 lines
5.6 KiB
TypeScript
151 lines
5.6 KiB
TypeScript
// ─────────────────────────────────────────────────────
|
|
// BIIPROJECT — Design System v3.0
|
|
// Palette: Neon Lime (#C6F135) · Charcoal Black (#1A1A1A) · Clean White (#FFFFFF)
|
|
// Inspired by: modern fintech/logistics dark-contrast UI
|
|
// ─────────────────────────────────────────────────────
|
|
|
|
export const PALETTE = {
|
|
// ── Core ──────────────────────────────────────────
|
|
lime: '#C6F135', // Primary Neon Lime — CTA, active states, highlights
|
|
limeDark: '#A8D820', // Darker lime for pressed states
|
|
limeLight: '#ECFB97', // Soft lime for backgrounds/badges
|
|
limeMuted: '#C6F13526', // 15% opacity lime for subtle tints
|
|
|
|
black: '#111111', // True near-black — primary surfaces/dark mode bg
|
|
charcoal: '#1A1A1A', // Charcoal — text, buttons, cards
|
|
graphite: '#2A2A2A', // Card surface in dark mode
|
|
steel: '#3D3D3D', // Borders, dividers in dark mode
|
|
|
|
white: '#FFFFFF', // Pure white — light mode backgrounds
|
|
offWhite: '#F5F5F5', // Light gray background
|
|
snow: '#FAFAFA', // Card surfaces in light mode
|
|
mist: '#EEEEEE', // Border / divider in light mode
|
|
fog: '#D4D4D4', // Muted / disabled
|
|
|
|
// ── Semantic ──────────────────────────────────────
|
|
textDark: '#111111', // Primary text in light mode
|
|
textMuted: '#6B6B6B', // Secondary text in light mode
|
|
textDimmed: '#9B9B9B', // Placeholder / timestamp
|
|
|
|
textLight: '#FFFFFF', // Primary text in dark mode
|
|
textLightMuted: '#A3A3A3', // Secondary text in dark mode
|
|
|
|
// ── Status ────────────────────────────────────────
|
|
success: '#22C55E', // Green (status success)
|
|
error: '#EF4444', // Red (errors, danger)
|
|
warning: '#F59E0B', // Amber (warnings)
|
|
info: '#3B82F6', // Blue (info)
|
|
};
|
|
|
|
export const Theme = {
|
|
light: {
|
|
background: PALETTE.offWhite, // Page background: #F5F5F5
|
|
surface: PALETTE.white, // Card surface: #FFFFFF
|
|
surfaceLight: PALETTE.snow, // Subtle surface: #FAFAFA
|
|
surfaceElevated: PALETTE.white,
|
|
|
|
primary: PALETTE.lime, // CTA / Active: #C6F135
|
|
primaryDark: PALETTE.limeDark, // Press state: #A8D820
|
|
primaryLight: PALETTE.limeLight, // Badge bg: #ECFB97
|
|
primaryMuted: PALETTE.limeMuted, // Tinted bg: #C6F13526
|
|
secondary: PALETTE.charcoal, // Buttons/icons: #1A1A1A
|
|
accent: PALETTE.lime,
|
|
|
|
text: PALETTE.textDark, // #111111
|
|
textSecondary: PALETTE.textMuted, // #6B6B6B
|
|
textPlaceholder: PALETTE.textDimmed, // #9B9B9B
|
|
|
|
border: PALETTE.mist, // #EEEEEE
|
|
divider: PALETTE.fog, // #D4D4D4
|
|
|
|
tabBar: PALETTE.white, // Tab bar background
|
|
tabBarActive: PALETTE.charcoal, // Active tab icon: charcoal
|
|
tabBarInactive: '#A3A3A3', // Inactive tab icon
|
|
|
|
error: PALETTE.error,
|
|
success: PALETTE.success,
|
|
warning: PALETTE.warning,
|
|
|
|
// Legacy compat
|
|
darkNav: PALETTE.charcoal,
|
|
pastelPurple: PALETTE.limeLight,
|
|
pastelBlue: '#C6F135',
|
|
pastelYellow: PALETTE.limeLight,
|
|
pastelPink: PALETTE.limeMuted,
|
|
glass: 'rgba(255, 255, 255, 0.92)',
|
|
},
|
|
|
|
dark: {
|
|
background: PALETTE.black, // #111111
|
|
surface: PALETTE.graphite, // #2A2A2A
|
|
surfaceLight: '#333333',
|
|
surfaceElevated: '#3A3A3A',
|
|
|
|
primary: PALETTE.lime, // Lime stays vibrant in dark: #C6F135
|
|
primaryDark: PALETTE.limeDark,
|
|
primaryLight: '#3A3D00', // Dark lime tint for dark mode badges
|
|
primaryMuted: PALETTE.limeMuted,
|
|
secondary: PALETTE.white,
|
|
accent: PALETTE.lime,
|
|
|
|
text: PALETTE.textLight, // #FFFFFF
|
|
textSecondary: PALETTE.textLightMuted, // #A3A3A3
|
|
textPlaceholder: '#6B6B6B',
|
|
|
|
border: PALETTE.steel, // #3D3D3D
|
|
divider: '#333333',
|
|
|
|
tabBar: PALETTE.black,
|
|
tabBarActive: PALETTE.lime, // Active = lime in dark mode
|
|
tabBarInactive: '#6B6B6B',
|
|
|
|
error: '#FF6B6B',
|
|
success: '#4ADE80',
|
|
warning: '#FBBF24',
|
|
|
|
// Legacy compat
|
|
darkNav: PALETTE.black,
|
|
pastelPurple: '#C6F13515',
|
|
pastelBlue: '#C6F13515',
|
|
pastelYellow: '#C6F13515',
|
|
pastelPink: '#C6F13515',
|
|
glass: 'rgba(17, 17, 17, 0.92)',
|
|
},
|
|
|
|
spacing: {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 16,
|
|
lg: 24,
|
|
xl: 32,
|
|
xxl: 40,
|
|
},
|
|
|
|
radius: {
|
|
sm: 12,
|
|
md: 20,
|
|
lg: 28,
|
|
xl: 36,
|
|
full: 999,
|
|
},
|
|
};
|
|
|
|
export const Colors = {
|
|
light: {
|
|
text: PALETTE.textDark,
|
|
background: PALETTE.offWhite,
|
|
tint: PALETTE.lime,
|
|
icon: PALETTE.textMuted,
|
|
tabIconDefault: '#A3A3A3',
|
|
tabIconSelected: PALETTE.charcoal,
|
|
},
|
|
dark: {
|
|
text: PALETTE.textLight,
|
|
background: PALETTE.black,
|
|
tint: PALETTE.lime,
|
|
icon: PALETTE.textLightMuted,
|
|
tabIconDefault: '#6B6B6B',
|
|
tabIconSelected: PALETTE.lime,
|
|
},
|
|
};
|