195 lines
3.4 KiB
TypeScript
195 lines
3.4 KiB
TypeScript
export const SPACING = {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 12,
|
|
lg: 16,
|
|
xl: 20,
|
|
xxl: 24,
|
|
xxxl: 32,
|
|
} as const;
|
|
|
|
export const BORDER_RADIUS = {
|
|
xs: 6,
|
|
sm: 8,
|
|
md: 10,
|
|
lg: 12,
|
|
xl: 16,
|
|
xxl: 20,
|
|
round: 999,
|
|
circle: 50,
|
|
} as const;
|
|
|
|
export const SHADOWS = {
|
|
none: {
|
|
shadowColor: 'transparent',
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0,
|
|
shadowRadius: 0,
|
|
elevation: 0,
|
|
},
|
|
xs: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.04,
|
|
shadowRadius: 2,
|
|
elevation: 1,
|
|
},
|
|
sm: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
},
|
|
md: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.08,
|
|
shadowRadius: 8,
|
|
elevation: 4,
|
|
},
|
|
lg: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 8 },
|
|
shadowOpacity: 0.12,
|
|
shadowRadius: 16,
|
|
elevation: 8,
|
|
},
|
|
xl: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 12 },
|
|
shadowOpacity: 0.16,
|
|
shadowRadius: 24,
|
|
elevation: 12,
|
|
},
|
|
inner: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.03,
|
|
shadowRadius: 2,
|
|
elevation: 0,
|
|
},
|
|
} as const;
|
|
|
|
export const TYPOGRAPHY = {
|
|
display: {
|
|
fontSize: 34,
|
|
fontWeight: '700' as const,
|
|
lineHeight: 42,
|
|
letterSpacing: -0.5,
|
|
},
|
|
h1: {
|
|
fontSize: 28,
|
|
fontWeight: '700' as const,
|
|
lineHeight: 36,
|
|
letterSpacing: -0.3,
|
|
},
|
|
h2: {
|
|
fontSize: 22,
|
|
fontWeight: '700' as const,
|
|
lineHeight: 30,
|
|
letterSpacing: -0.2,
|
|
},
|
|
h3: {
|
|
fontSize: 18,
|
|
fontWeight: '600' as const,
|
|
lineHeight: 24,
|
|
letterSpacing: 0,
|
|
},
|
|
h4: {
|
|
fontSize: 16,
|
|
fontWeight: '600' as const,
|
|
lineHeight: 22,
|
|
letterSpacing: 0,
|
|
},
|
|
body: {
|
|
fontSize: 16,
|
|
fontWeight: '400' as const,
|
|
lineHeight: 24,
|
|
letterSpacing: 0,
|
|
},
|
|
bodyStrong: {
|
|
fontSize: 16,
|
|
fontWeight: '600' as const,
|
|
lineHeight: 24,
|
|
letterSpacing: 0,
|
|
},
|
|
bodySmall: {
|
|
fontSize: 14,
|
|
fontWeight: '400' as const,
|
|
lineHeight: 20,
|
|
letterSpacing: 0,
|
|
},
|
|
bodySmallStrong: {
|
|
fontSize: 14,
|
|
fontWeight: '600' as const,
|
|
lineHeight: 20,
|
|
letterSpacing: 0,
|
|
},
|
|
caption: {
|
|
fontSize: 12,
|
|
fontWeight: '400' as const,
|
|
lineHeight: 16,
|
|
letterSpacing: 0.2,
|
|
},
|
|
captionStrong: {
|
|
fontSize: 12,
|
|
fontWeight: '600' as const,
|
|
lineHeight: 16,
|
|
letterSpacing: 0.2,
|
|
},
|
|
overline: {
|
|
fontSize: 11,
|
|
fontWeight: '600' as const,
|
|
lineHeight: 14,
|
|
letterSpacing: 0.8,
|
|
textTransform: 'uppercase' as const,
|
|
},
|
|
button: {
|
|
fontSize: 15,
|
|
fontWeight: '600' as const,
|
|
lineHeight: 20,
|
|
letterSpacing: 0.2,
|
|
},
|
|
buttonSmall: {
|
|
fontSize: 13,
|
|
fontWeight: '600' as const,
|
|
lineHeight: 18,
|
|
letterSpacing: 0.2,
|
|
},
|
|
} as const;
|
|
|
|
export const TRANSITIONS = {
|
|
fast: 120,
|
|
normal: 200,
|
|
slow: 300,
|
|
slower: 400,
|
|
} as const;
|
|
|
|
export const EASING = {
|
|
easeOut: 'ease-out',
|
|
easeInOut: 'ease-in-out',
|
|
spring: 'spring',
|
|
} as const;
|
|
|
|
export const LAYOUT = {
|
|
screenPadding: SPACING.lg,
|
|
cardPadding: SPACING.lg,
|
|
sectionGap: SPACING.xl,
|
|
itemGap: SPACING.md,
|
|
inlineGap: SPACING.sm,
|
|
} as const;
|
|
|
|
export const TOUCH_TARGET = {
|
|
minSize: 44,
|
|
comfortableSize: 48,
|
|
} as const;
|
|
|
|
export const Z_INDEX = {
|
|
base: 0,
|
|
dropdown: 100,
|
|
modal: 200,
|
|
toast: 300,
|
|
tooltip: 400,
|
|
} as const;
|