@cranberry-money/shared-constants
Version:
Shared constants for Blueberry platform
323 lines • 11.6 kB
JavaScript
const BASE_COLORS = {
surface: {
primary: '#0c1426',
secondary: '#1a2332',
tertiary: '#2a3441',
quaternary: '#4a5568',
elevated: '#243247',
transparent: 'transparent',
alpha: {
100: 'rgba(12, 20, 38, 0.1)',
200: 'rgba(12, 20, 38, 0.2)',
300: 'rgba(12, 20, 38, 0.3)',
500: 'rgba(12, 20, 38, 0.5)',
700: 'rgba(12, 20, 38, 0.7)',
900: 'rgba(12, 20, 38, 0.9)',
},
},
content: {
primary: '#fafbfc',
secondary: '#e4e7ea',
body: '#cbd2d8',
muted: '#8b95a1',
subtle: '#64748b',
},
primary: {
100: '#e0e7ff',
200: '#c7d2fe',
300: '#a5b4fc',
400: '#818cf8',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
800: '#3730a3',
900: '#312e81',
alpha: { 100: '#312e811A', 200: '#312e8133', 300: '#312e814D', 500: '#312e8180' },
},
success: {
300: '#86efac',
400: '#4ade80',
500: '#22c55e',
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d',
subtle: '#f0fdf4',
},
error: {
300: '#fca5a5',
400: '#f87171',
500: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d',
subtle: '#fef2f2',
backgroundSubtle: 'rgba(220, 38, 38, 0.1)',
},
warning: {
300: '#fcd34d',
400: '#fbbf24',
500: '#eab308',
600: '#d97706',
700: '#b45309',
900: '#92400e',
},
info: {
300: '#7dd3fc',
400: '#38bdf8',
600: '#0284c7',
700: '#0369a1',
900: '#0c4a6e',
},
border: {
default: '#334155',
subtle: '#1e293b',
strong: '#475569',
hover: '#475569',
focus: { primary: '#6366f1', subtle: '#6b7280' },
},
accent: { primary: '#ec4899', warm: '#f97316' },
utility: { white: '#ffffff', black: '#000000', transparent: 'transparent' },
chart: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'],
chartText: ['#93C5FD', '#6EE7B7', '#FDE68A', '#FCA5A5', '#C4B5FD', '#FBCFE8'],
};
const SEMANTIC_COLORS = {
financial: {
positive: BASE_COLORS.success[600],
negative: BASE_COLORS.error[600],
distribution: BASE_COLORS.primary[500],
},
chartUI: {
dateText: BASE_COLORS.content.muted,
gridLines: 'rgba(156, 163, 175, 0.3)',
tooltipBackground: 'rgba(17, 24, 39, 0.8)',
portfolioLine: BASE_COLORS.info[400],
pointerStrip: 'rgba(255, 255, 255, 0.15)',
tooltip: {
background: '#374151',
titleColor: '#f3f4f6',
bodyColor: '#d1d5db',
borderColor: '#6b7280',
},
tickColor: '#9CA3AF',
gridColor: '#374151',
lineColor: '#60A5FA',
lineBackground: 'rgba(96, 165, 250, 0.1)',
},
chain: {
ethereum: '#627eea',
bitcoin: '#f7931a',
},
interactive: {
default: BASE_COLORS.primary[600],
defaultSubtle: BASE_COLORS.primary[500],
hover: BASE_COLORS.primary[700],
hoverSubtle: BASE_COLORS.primary[400],
pressed: BASE_COLORS.primary[800],
active: BASE_COLORS.primary[400],
disabled: BASE_COLORS.surface.quaternary,
disabledText: BASE_COLORS.content.subtle,
selected: {
background: BASE_COLORS.primary.alpha[300],
border: BASE_COLORS.primary[600],
text: BASE_COLORS.content.primary,
icon: BASE_COLORS.primary[600],
},
focus: { ring: BASE_COLORS.primary[500], background: BASE_COLORS.primary.alpha[100] },
},
badge: {
success: { background: `${BASE_COLORS.success[900]}80`, text: BASE_COLORS.success[300] },
warning: { background: `${BASE_COLORS.warning[900]}80`, text: BASE_COLORS.warning[300] },
error: { background: `${BASE_COLORS.error[900]}80`, text: BASE_COLORS.error[300] },
info: { background: BASE_COLORS.surface.tertiary, text: BASE_COLORS.content.secondary },
neutral: { background: BASE_COLORS.surface.secondary, text: BASE_COLORS.content.muted },
},
assetType: {
etf: BASE_COLORS.primary[400],
fund: BASE_COLORS.warning[600],
crypto: BASE_COLORS.success[600],
stablecoin: BASE_COLORS.info[600],
stock: BASE_COLORS.content.muted,
},
status: {
success: { icon: BASE_COLORS.success[400], text: BASE_COLORS.success[600], border: BASE_COLORS.success[700] },
error: { icon: BASE_COLORS.error[400], text: BASE_COLORS.error[400], border: BASE_COLORS.error[700] },
warning: {
icon: BASE_COLORS.warning[400],
text: BASE_COLORS.warning[400],
border: BASE_COLORS.warning[600],
background: BASE_COLORS.warning[900],
},
info: { icon: BASE_COLORS.info[300], text: BASE_COLORS.info[400], border: BASE_COLORS.info[600] },
},
form: {
placeholder: BASE_COLORS.content.muted,
error: BASE_COLORS.error[400],
errorBackground: `${BASE_COLORS.error[900]}80`,
border: BASE_COLORS.border.default,
borderFocus: BASE_COLORS.primary[500],
borderError: BASE_COLORS.error[700],
},
decorative: {
icon: BASE_COLORS.info[300],
iconSubtle: BASE_COLORS.info[400],
},
};
const BUTTON_SYSTEM = {
sizes: {
small: { height: 40, paddingHorizontal: 16, fontSize: 14, iconSize: 16, gap: 6 },
medium: { height: 48, paddingHorizontal: 24, fontSize: 16, iconSize: 20, gap: 8 },
large: { height: 56, paddingHorizontal: 32, fontSize: 18, iconSize: 24, gap: 10 },
},
variants: {
primary: {
background: SEMANTIC_COLORS.interactive.active,
backgroundHover: SEMANTIC_COLORS.interactive.hover,
backgroundPressed: SEMANTIC_COLORS.interactive.pressed,
backgroundDisabled: SEMANTIC_COLORS.interactive.disabled,
text: BASE_COLORS.utility.white,
textDisabled: SEMANTIC_COLORS.interactive.disabledText,
borderColor: 'transparent',
},
secondary: {
background: BASE_COLORS.surface.quaternary,
backgroundHover: BASE_COLORS.surface.elevated,
backgroundPressed: BASE_COLORS.surface.quaternary,
backgroundDisabled: BASE_COLORS.surface.quaternary,
text: BASE_COLORS.content.primary,
textDisabled: BASE_COLORS.content.subtle,
borderColor: BASE_COLORS.border.default,
},
ghost: {
background: 'transparent',
backgroundHover: BASE_COLORS.surface.tertiary,
backgroundPressed: BASE_COLORS.surface.secondary,
backgroundDisabled: 'transparent',
text: SEMANTIC_COLORS.interactive.default,
textDisabled: SEMANTIC_COLORS.interactive.disabledText,
borderColor: 'transparent',
},
danger: {
background: BASE_COLORS.error[600],
backgroundHover: BASE_COLORS.error[700],
backgroundPressed: BASE_COLORS.error[900],
backgroundDisabled: SEMANTIC_COLORS.interactive.disabled,
text: BASE_COLORS.utility.white,
textDisabled: SEMANTIC_COLORS.interactive.disabledText,
borderColor: 'transparent',
},
},
borderWidth: 1,
borderRadius: 12,
fontWeight: '600',
shadow: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 1,
},
};
export const DESIGN_TOKENS = {
colors: {
...BASE_COLORS,
semantic: {
positive: SEMANTIC_COLORS.financial.positive,
negative: SEMANTIC_COLORS.financial.negative,
neutral: '#6B7280',
},
financial: SEMANTIC_COLORS.financial,
chartUI: SEMANTIC_COLORS.chartUI,
interactive: SEMANTIC_COLORS.interactive,
badge: SEMANTIC_COLORS.badge,
assetType: SEMANTIC_COLORS.assetType,
status: SEMANTIC_COLORS.status,
form: SEMANTIC_COLORS.form,
decorative: SEMANTIC_COLORS.decorative,
chain: SEMANTIC_COLORS.chain,
button: BUTTON_SYSTEM,
},
spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48, xxxl: 64, xxxxl: 80 },
borderRadius: { none: 0, sm: 4, md: 8, lg: 12, xl: 16, xxl: 24, full: 9999 },
fontSize: { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, xxl: 24, xxxl: 30, xxxxl: 36, xxxxxl: 48 },
fontWeight: { normal: '400', medium: '500', semibold: '600', bold: '700' },
lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75, loose: 2 },
layout: { transparentHeaderPadding: 110, screenBottomPadding: 40, bottomTabBarHeight: 100, screenHeaderHeight: 160 },
zIndex: {
base: 0,
dropdown: 1000,
sticky: 1020,
fixed: 1030,
backdrop: 1040,
modal: 1050,
popover: 1060,
tooltip: 1070,
},
animation: {
duration: { instant: 0, fast: 150, normal: 300, slow: 500 },
easing: { linear: 'linear', easeIn: 'ease-in', easeOut: 'ease-out', easeInOut: 'ease-in-out' },
},
shadows: {
sm: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 1,
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)',
},
},
icon: {
sizes: { xs: 12, sm: 16, md: 20, lg: 24, xl: 32, xxl: 48, hero: 40, display: 64 },
weights: {
thin: 'thin',
light: 'light',
regular: 'regular',
bold: 'bold',
fill: 'fill',
},
defaultWeight: 'regular',
colors: {
default: BASE_COLORS.content.muted,
primary: BASE_COLORS.content.primary,
secondary: BASE_COLORS.content.secondary,
muted: BASE_COLORS.content.subtle,
success: SEMANTIC_COLORS.status.success.icon,
error: SEMANTIC_COLORS.status.error.icon,
warning: SEMANTIC_COLORS.status.warning.icon,
info: SEMANTIC_COLORS.status.info.icon,
decorative: SEMANTIC_COLORS.decorative.icon,
interactive: SEMANTIC_COLORS.interactive.active,
interactiveDefault: SEMANTIC_COLORS.interactive.default,
interactiveHover: SEMANTIC_COLORS.interactive.hover,
accent: BASE_COLORS.accent.primary,
warm: BASE_COLORS.accent.warm,
},
},
};
//# sourceMappingURL=design-tokens.js.map