@mtec-solutions-org/design-system
Version:
A React Native Web design system library with theme and components
64 lines (63 loc) • 1.49 kB
JavaScript
import { makeTheme } from '@dripsy/core';
export const baseTheme = makeTheme({
space: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64],
fontSizes: [12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48],
fonts: {
body: 'System',
heading: 'System',
monospace: 'Menlo, monospace',
},
fontWeights: {
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
},
lineHeights: {
tight: 1.2,
normal: 1.4,
relaxed: 1.6,
},
breakpoints: ['480px', '768px', '1024px', '1280px', '1536px'],
radii: {
none: 0,
sm: 4,
md: 8,
lg: 12,
xl: 16,
full: 9999,
},
shadows: {
sm: {
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.05,
shadowRadius: 1,
elevation: 1,
},
md: {
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 2,
},
lg: {
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.15,
shadowRadius: 8,
elevation: 4,
},
},
});
export default baseTheme;