@memberjunction/ng-react
Version:
Angular components for hosting React components in MemberJunction applications
106 lines • 3.04 kB
JavaScript
/**
* @fileoverview Default styles for React components in MemberJunction.
* These styles provide a consistent design system for React components.
* @module @memberjunction/ng-react
*/
/**
* Default styles that match the Skip design system
*/
export const DEFAULT_STYLES = {
colors: {
// Primary colors - modern purple/blue gradient feel
primary: '#5B4FE9',
primaryHover: '#4940D4',
primaryLight: '#E8E6FF',
// Secondary colors - sophisticated gray
secondary: '#64748B',
secondaryHover: '#475569',
// Status colors
success: '#10B981',
successLight: '#D1FAE5',
warning: '#F59E0B',
warningLight: '#FEF3C7',
error: '#EF4444',
errorLight: '#FEE2E2',
info: '#3B82F6',
infoLight: '#DBEAFE',
// Base colors
background: '#FFFFFF',
surface: '#F8FAFC',
surfaceHover: '#F1F5F9',
// Text colors with better contrast
text: '#1E293B',
textSecondary: '#64748B',
textTertiary: '#94A3B8',
textInverse: '#FFFFFF',
// Border colors
border: '#E2E8F0',
borderLight: '#F1F5F9',
borderFocus: '#5B4FE9',
// Shadows (as color strings for easy use)
shadow: 'rgba(0, 0, 0, 0.05)',
shadowMedium: 'rgba(0, 0, 0, 0.1)',
shadowLarge: 'rgba(0, 0, 0, 0.15)',
},
spacing: {
xs: '4px',
sm: '8px',
md: '16px',
lg: '24px',
xl: '32px',
xxl: '48px',
xxxl: '64px',
},
typography: {
fontFamily: '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif',
fontSize: {
xs: '11px',
sm: '12px',
md: '14px',
lg: '16px',
xl: '20px',
xxl: '24px',
xxxl: '32px',
},
fontWeight: {
light: '300',
regular: '400',
medium: '500',
semibold: '600',
bold: '700',
},
lineHeight: {
tight: '1.25',
normal: '1.5',
relaxed: '1.75',
},
},
borders: {
radius: {
sm: '6px',
md: '8px',
lg: '12px',
xl: '16px',
full: '9999px',
},
width: {
thin: '1px',
medium: '2px',
thick: '3px',
},
},
shadows: {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
},
transitions: {
fast: '150ms ease-in-out',
normal: '250ms ease-in-out',
slow: '350ms ease-in-out',
},
overflow: 'auto'
};
//# sourceMappingURL=default-styles.js.map