@syncognito/maya
Version:
Maya Design System - Shared tokens and platform-specific components
94 lines • 2.18 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