@syncognito/maya
Version:
Maya Design System - Shared tokens and platform-specific components
94 lines • 2.17 kB
JavaScript
// Import root shared tokens
import { colors, borderRadius, zIndex, animation } from '../tokens';
// Web shared tokens (extends root shared)
export const typography = {
fontSize: {
xs: '0.75rem',
sm: '0.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
},
fontWeight: {
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
},
lineHeight: {
tight: 1.25,
normal: 1.4,
relaxed: 1.6,
},
fontFamily: {
sans: 'Inter, system-ui, sans-serif',
mono: 'JetBrains Mono, monospace',
},
};
export const spacing = {
xs: '0.25rem',
sm: '0.5rem',
md: '0.75rem',
lg: '1rem',
xl: '1.5rem',
'2xl': '2rem',
'3xl': '3rem',
'4xl': '4rem',
button: {
padding: {
sm: '0.375rem 0.75rem',
md: '0.5rem 1rem',
lg: '0.75rem 1.5rem',
},
gap: '0.5rem',
},
card: {
padding: '1rem',
gap: '0.75rem',
},
form: {
gap: '0.75rem',
padding: '1rem',
},
table: {
padding: '0.5rem',
gap: '0.25rem',
},
};
export const shadows = {
none: 'none',
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
md: '0 2px 4px -1px rgba(0, 0, 0, 0.1)',
lg: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
xl: '0 8px 15px -3px rgba(0, 0, 0, 0.1)',
component: {
button: {
default: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
hover: '0 2px 4px -1px rgba(0, 0, 0, 0.1)',
},
card: {
default: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
elevated: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
},
modal: {
default: '0 10px 25px -5px rgba(0, 0, 0, 0.1)',
},
dropdown: {
default: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
},
},
};
// Export all web shared tokens
export const webSharedTokens = {
colors,
borderRadius,
zIndex,
animation,
typography,
spacing,
shadows,
};
//# sourceMappingURL=tokens.js.map