sgod-library-frontend
Version:
Thư viện component UI Frontend
431 lines (430 loc) • 8.67 kB
TypeScript
/**
* Design System Tokens
* Các giá trị cơ bản trong hệ thống thiết kế
*/
export declare const colors: {
primary: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
secondary: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
success: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
warning: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
error: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
info: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
neutral: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
};
export declare const typography: {
fontSize: {
xs: string;
sm: string;
base: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
};
fontWeight: {
regular: number;
medium: number;
bold: number;
};
lineHeight: {
none: number;
tight: number;
normal: number;
relaxed: number;
};
letterSpacing: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
};
fontFamily: {
heading: string;
body: string;
};
};
export declare const spacing: {
0: string;
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
8: string;
10: string;
12: string;
16: string;
20: string;
24: string;
32: string;
};
export declare const borderRadius: {
none: string;
sm: string;
default: string;
md: string;
lg: string;
xl: string;
'2xl': string;
full: string;
};
export declare const shadows: {
none: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
export declare const zIndex: {
0: number;
10: number;
20: number;
30: number;
40: number;
50: number;
auto: string;
dropdown: number;
sticky: number;
fixed: number;
modalBackdrop: number;
modal: number;
popover: number;
tooltip: number;
};
export declare const transitions: {
duration: {
75: string;
100: string;
150: string;
200: string;
300: string;
500: string;
700: string;
1000: string;
};
timing: {
default: string;
linear: string;
in: string;
out: string;
'in-out': string;
};
};
export declare const grid: {
columns: number;
gutter: string;
margin: string;
};
export declare const breakpoints: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
export declare const iconSizes: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
export declare const designTokens: {
colors: {
primary: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
secondary: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
success: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
warning: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
error: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
info: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
neutral: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
};
};
typography: {
fontSize: {
xs: string;
sm: string;
base: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
};
fontWeight: {
regular: number;
medium: number;
bold: number;
};
lineHeight: {
none: number;
tight: number;
normal: number;
relaxed: number;
};
letterSpacing: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
};
fontFamily: {
heading: string;
body: string;
};
};
spacing: {
0: string;
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
8: string;
10: string;
12: string;
16: string;
20: string;
24: string;
32: string;
};
borderRadius: {
none: string;
sm: string;
default: string;
md: string;
lg: string;
xl: string;
'2xl': string;
full: string;
};
shadows: {
none: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
zIndex: {
0: number;
10: number;
20: number;
30: number;
40: number;
50: number;
auto: string;
dropdown: number;
sticky: number;
fixed: number;
modalBackdrop: number;
modal: number;
popover: number;
tooltip: number;
};
transitions: {
duration: {
75: string;
100: string;
150: string;
200: string;
300: string;
500: string;
700: string;
1000: string;
};
timing: {
default: string;
linear: string;
in: string;
out: string;
'in-out': string;
};
};
grid: {
columns: number;
gutter: string;
margin: string;
};
breakpoints: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
iconSizes: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
};