@syncognito/maya
Version:
Maya Design System - Shared tokens and platform-specific components
193 lines • 4.6 kB
JavaScript
// Mobile-specific tokens for React Native (no web imports)
export const typography = {
fontSize: {
xs: 12, // 0.75rem * 16
sm: 14, // 0.875rem * 16
base: 16, // 1rem * 16
lg: 18, // 1.125rem * 16
xl: 20, // 1.25rem * 16
'2xl': 24, // 1.5rem * 16
'3xl': 30, // 1.875rem * 16
'4xl': 36, // 2.25rem * 16
},
fontWeight: {
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
},
lineHeight: {
tight: 1.25,
normal: 1.4,
relaxed: 1.6,
},
fontFamily: {
sans: 'Inter',
mono: 'JetBrains Mono',
},
};
export const spacing = {
xs: 4, // 0.25rem * 16
sm: 8, // 0.5rem * 16
md: 12, // 0.75rem * 16
lg: 16, // 1rem * 16
xl: 24, // 1.5rem * 16
'2xl': 32, // 2rem * 16
'3xl': 48, // 3rem * 16
'4xl': 64, // 4rem * 16
button: {
padding: {
sm: { vertical: 8, horizontal: 16 }, // Touch-friendly padding
md: { vertical: 12, horizontal: 24 }, // Touch-friendly padding
lg: { vertical: 16, horizontal: 32 }, // Touch-friendly padding
},
gap: 8,
},
card: {
padding: 16,
gap: 12,
},
form: {
gap: 12,
padding: 16,
},
table: {
padding: 8,
gap: 4,
},
};
export const borderRadius = {
none: 0,
sm: 4,
md: 8,
lg: 12,
xl: 16,
full: 9999,
};
export const shadows = {
none: {
shadowColor: 'transparent',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
},
sm: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 1,
},
md: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
lg: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 6,
elevation: 5,
},
xl: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.1,
shadowRadius: 15,
elevation: 8,
},
component: {
button: {
default: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 1,
},
hover: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
},
card: {
default: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 3,
elevation: 2,
},
elevated: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 6,
elevation: 5,
},
},
modal: {
default: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.1,
shadowRadius: 25,
elevation: 10,
},
},
dropdown: {
default: {
shadowColor: '#000000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 6,
elevation: 5,
},
},
},
};
export const zIndex = {
hide: -1,
auto: 'auto',
base: 0,
docked: 10,
dropdown: 1000,
sticky: 1100,
banner: 1200,
overlay: 1300,
modal: 1400,
popover: 1500,
skipLink: 1600,
toast: 1700,
tooltip: 1800,
};
export const animation = {
duration: {
fast: 150,
normal: 300,
slow: 500,
},
easing: {
ease: 'ease',
easeIn: 'ease-in',
easeOut: 'ease-out',
easeInOut: 'ease-in-out',
},
};
// Export all isha (mobile) tokens
export const manushyaIshaTokens = {
borderRadius,
zIndex,
animation,
typography,
spacing,
shadows,
};
//# sourceMappingURL=tokens.js.map