eventx-design-system
Version:
Design System do EventX
251 lines (250 loc) • 5.64 kB
JavaScript
// Tokens principais extraídos do Figma (design-tokens.tokens.json)
// Baseado no eventx-web/src/constants/design-tokens.ts
export const colors = {
brand: {
primary: {
50: '#FDE8EC',
100: '#FBE5ED',
200: '#F6CCDC',
300: '#F2B3CB',
400: '#EE99B9',
500: '#E980A7',
600: '#E56696',
700: '#E14D85',
800: '#DD3373',
900: '#D81A62',
950: '#D40050',
},
secondary: {
50: '#F5F1FF',
100: '#E9E7EE',
200: '#D3CFDE',
300: '#BDB7CD',
400: '#A79FBC',
500: '#9187AB',
600: '#7C709B',
700: '#66588A',
800: '#504079',
900: '#3A2869',
950: '#241058',
},
},
neutral: {
50: '#FFFFFF',
100: '#F8F8FA',
200: '#F4F3F4',
300: '#E7E7EA',
400: '#CFD0D5',
500: '#B8B9C0',
600: '#A0A1AB',
700: '#888996',
800: '#707281',
900: '#585B6C',
950: '#11142D',
},
semantic: {
success: {
50: '#F5FAF2',
100: '#E8F5E3',
200: '#D1EBC7',
300: '#A3D78F',
400: '#75C357',
500: '#47AF1F',
600: '#398C19',
700: '#2B6913',
800: '#1D460D',
900: '#0F2307',
},
error: {
50: '#FEF2F2',
100: '#FEE2E2',
200: '#FECACA',
300: '#FCA5A5',
400: '#F87171',
500: '#EF4444',
600: '#DC2626',
700: '#B91C1C',
800: '#991B1B',
900: '#7F1D1D',
},
warning: {
50: '#FFFBEB',
100: '#FEF3C7',
200: '#FDE68A',
300: '#FCD34D',
400: '#FBBF24',
500: '#F59E0B',
600: '#D97706',
700: '#B45309',
800: '#92400E',
900: '#78350F',
},
info: {
50: '#EFF6FF',
100: '#DBEAFE',
200: '#BFDBFE',
300: '#93C5FD',
400: '#60A5FA',
500: '#3B82F6',
600: '#2563EB',
700: '#1D4ED8',
800: '#1E40AF',
900: '#1E3A8A',
},
},
};
export const typography = {
fontFamily: {
primary: 'Poppins, sans-serif',
secondary: 'Cairo, sans-serif',
mono: 'JetBrains Mono, monospace',
},
fontSize: {
xs: '12px',
sm: '14px',
base: '16px',
lg: '18px',
xl: '20px',
'2xl': '24px',
'3xl': '32px',
'4xl': '40px',
'5xl': '48px',
'6xl': '56px',
'7xl': '64px',
'8xl': '72px',
'9xl': '96px',
},
fontWeight: {
thin: 100,
extralight: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
lineHeight: {
none: 1,
tight: 1.25,
snug: 1.375,
normal: 1.5,
relaxed: 1.625,
loose: 2,
},
letterSpacing: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0em',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
},
};
export const spacing = {
0: '0px',
1: '4px',
2: '8px',
3: '12px',
4: '16px',
5: '20px',
6: '24px',
7: '28px',
8: '32px',
9: '36px',
10: '40px',
11: '44px',
12: '48px',
14: '56px',
16: '64px',
18: '72px',
20: '80px',
22: '88px',
24: '96px',
28: '112px',
32: '128px',
36: '144px',
40: '160px',
44: '176px',
48: '192px',
52: '208px',
56: '224px',
60: '240px',
64: '256px',
72: '288px',
80: '320px',
96: '384px',
};
export const borderRadius = {
none: '0px',
sm: '2px',
base: '4px',
md: '6px',
lg: '8px',
xl: '12px',
'2xl': '16px',
'3xl': '24px',
full: '9999px',
};
export const shadows = {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
none: 'none',
};
export const breakpoints = {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
};
export const zIndex = {
0: 0,
10: 10,
20: 20,
30: 30,
40: 40,
50: 50,
auto: 'auto',
dropdown: 1000,
sticky: 1020,
fixed: 1030,
modal: 1040,
popover: 1050,
tooltip: 1060,
};
export const transitions = {
duration: {
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
},
easing: {
linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
inOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
},
};
// Exportando todos os tokens como um objeto único para compatibilidade
export const tokens = {
colors,
typography,
spacing,
borderRadius,
shadows,
breakpoints,
zIndex,
transitions,
};