68 lines
1.1 KiB
TypeScript
68 lines
1.1 KiB
TypeScript
/**
|
|
* Design Tokens
|
|
* Centralized design system constants for consistent UI/UX
|
|
*/
|
|
|
|
export const designTokens = {
|
|
// Breakpoints (in pixels)
|
|
breakpoints: {
|
|
xs: 320,
|
|
sm: 640,
|
|
md: 768,
|
|
lg: 1024,
|
|
xl: 1280,
|
|
'2xl': 1536,
|
|
'3xl': 1920,
|
|
},
|
|
|
|
// Sidebar dimensions
|
|
sidebar: {
|
|
collapsed: 64,
|
|
expanded: 256,
|
|
mobile: 320,
|
|
},
|
|
|
|
// Z-index scale
|
|
zIndex: {
|
|
base: 0,
|
|
dropdown: 10,
|
|
sticky: 20,
|
|
overlay: 40, // Overlay below sidebar
|
|
sidebar: 50, // Sidebar above overlay
|
|
header: 60, // Header above sidebar
|
|
modal: 70, // Modal above everything
|
|
toast: 80, // Toast at the top
|
|
},
|
|
|
|
// Animation durations (in milliseconds)
|
|
animation: {
|
|
fast: 150,
|
|
normal: 300,
|
|
slow: 500,
|
|
},
|
|
|
|
// Spacing scale (in pixels)
|
|
spacing: {
|
|
mobile: 16,
|
|
tablet: 24,
|
|
desktop: 32,
|
|
wide: 40,
|
|
},
|
|
|
|
// Touch target minimum size
|
|
touchTarget: {
|
|
min: 44,
|
|
},
|
|
|
|
// Container max widths
|
|
container: {
|
|
sm: 640,
|
|
md: 768,
|
|
lg: 1024,
|
|
xl: 1280,
|
|
'2xl': 1536,
|
|
},
|
|
} as const;
|
|
|
|
export type DesignTokens = typeof designTokens;
|