388 lines
15 KiB
JavaScript
388 lines
15 KiB
JavaScript
module.exports = {
|
|
darkMode: 'class',
|
|
prefix: '',
|
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
foreground: {
|
|
DEFAULT: 'rgba(var(--foreground), 1)',
|
|
revert: 'rgba(var(--coze-fg-revert), var(--coze-fg-revert-alpha))',
|
|
white: 'rgba(var(--coze-fg-white), var(--coze-fg-white-alpha))',
|
|
7: 'rgba(var(--coze-fg-7), 1)',
|
|
6: 'rgba(var(--coze-fg-6), 1)',
|
|
5: 'rgba(var(--coze-fg-5), var(--coze-fg-5-alpha))',
|
|
4: 'rgba(var(--coze-fg-4), var(--coze-fg-4-alpha))',
|
|
3: 'rgba(var(--coze-fg-3), var(--coze-fg-3-alpha))',
|
|
2: 'rgba(var(--coze-fg-2), var(--coze-fg-2-alpha))',
|
|
1: 'rgba(var(--coze-fg-1), var(--coze-fg-1-alpha))',
|
|
},
|
|
background: {
|
|
DEFAULT: 'rgba(var(--background), 1)',
|
|
9: 'rgba(var(--coze-bg-9), var(--coze-bg-9-alpha))',
|
|
8: 'rgba(var(--coze-bg-8), var(--coze-bg-8-alpha))',
|
|
7: 'rgba(var(--coze-bg-7), var(--coze-bg-7-alpha))',
|
|
6: 'rgba(var(--coze-bg-6), var(--coze-bg-6-alpha))',
|
|
5: 'rgba(var(--coze-bg-5), var(--coze-bg-5-alpha))',
|
|
4: 'rgba(var(--coze-bg-4), var(--coze-bg-4-alpha))',
|
|
3: 'rgba(var(--coze-bg-3), var(--coze-bg-3-alpha))',
|
|
2: 'rgba(var(--coze-bg-2), var(--coze-bg-2-alpha))',
|
|
1: 'rgba(var(--coze-bg-1), var(--coze-bg-1-alpha))',
|
|
0: 'rgba(var(--coze-bg-0), 1)',
|
|
},
|
|
brand: {
|
|
DEFAULT: 'rgba(var(--coze-brand-7), 1)',
|
|
linear: 'rgba(var(--coze-brand-5), 0)',
|
|
50: 'rgba(var(--coze-brand-50), var(--coze-brand-50-alpha))',
|
|
30: 'rgba(var(--coze-brand-30), var(--coze-brand-30-alpha))',
|
|
7: 'rgba(var(--coze-brand-7), 1)',
|
|
6: 'rgba(var(--coze-brand-6), 1)',
|
|
5: 'rgba(var(--coze-brand-5), 1)',
|
|
3: 'rgba(var(--coze-brand-3), var(--coze-brand-3-alpha))',
|
|
2: 'rgba(var(--coze-brand-2), var(--coze-brand-2-alpha))',
|
|
1: 'rgba(var(--coze-brand-1), var(--coze-brand-1-alpha))',
|
|
0: 'rgba(var(--coze-brand-0), var(--coze-brand-0-alpha))',
|
|
},
|
|
red: {
|
|
DEFAULT: 'rgba(var(--coze-red-7), 1)',
|
|
linear: 'rgba(var(--coze-red-5), 0)',
|
|
7: 'rgba(var(--coze-red-7), 1)',
|
|
6: 'rgba(var(--coze-red-6), 1)',
|
|
5: 'rgba(var(--coze-red-5), 1)',
|
|
3: 'rgba(var(--coze-red-3), var(--coze-red-3-alpha))',
|
|
2: 'rgba(var(--coze-red-2), var(--coze-red-2-alpha))',
|
|
1: 'rgba(var(--coze-red-1), var(--coze-red-1-alpha))',
|
|
0: 'rgba(var(--coze-red-0), var(--coze-red-0-alpha))',
|
|
},
|
|
yellow: {
|
|
DEFAULT: 'rgba(var(--coze-yellow-7), 1)',
|
|
linear: 'rgba(var(--coze-yellow-5), 0)',
|
|
50: 'rgba(var(--coze-yellow-50), var(--coze-yellow-50-alpha))',
|
|
30: 'rgba(var(--coze-yellow-30), var(--coze-yellow-30-alpha))',
|
|
7: 'rgba(var(--coze-yellow-7), 1)',
|
|
6: 'rgba(var(--coze-yellow-6), 1)',
|
|
5: 'rgba(var(--coze-yellow-5), 1)',
|
|
3: 'rgba(var(--coze-yellow-3), var(--coze-yellow-3-alpha))',
|
|
2: 'rgba(var(--coze-yellow-2), var(--coze-yellow-2-alpha))',
|
|
1: 'rgba(var(--coze-yellow-1), var(--coze-yellow-1-alpha))',
|
|
0: 'rgba(var(--coze-yellow-0), var(--coze-yellow-0-alpha))',
|
|
},
|
|
green: {
|
|
DEFAULT: 'rgba(var(--coze-green-7), 1)',
|
|
linear: 'rgba(var(--coze-green-5), 0)',
|
|
7: 'rgba(var(--coze-green-7), 1)',
|
|
6: 'rgba(var(--coze-green-6), 1)',
|
|
5: 'rgba(var(--coze-green-5), 1)',
|
|
3: 'rgba(var(--coze-green-3), var(--coze-green-3-alpha))',
|
|
2: 'rgba(var(--coze-green-2), var(--coze-green-2-alpha))',
|
|
1: 'rgba(var(--coze-green-1), var(--coze-green-1-alpha))',
|
|
0: 'rgba(var(--coze-green-0), var(--coze-green-0-alpha))',
|
|
},
|
|
emerald: {
|
|
DEFAULT: 'rgba(var(--coze-emerald-5), 1)',
|
|
linear: 'rgba(var(--coze-emerald-5), 0)',
|
|
50: 'rgba(var(--coze-emerald-50), var(--coze-emerald-50-alpha))',
|
|
30: 'rgba(var(--coze-emerald-30), var(--coze-emerald-30-alpha))',
|
|
20: 'rgba(var(--coze-emerald-20), 1)',
|
|
10: 'rgba(var(--coze-emerald-10), 1)',
|
|
5: 'rgba(var(--coze-emerald-5), 1)',
|
|
3: 'rgba(var(--coze-emerald-3), var(--coze-emerald-3-alpha))',
|
|
},
|
|
orange: {
|
|
DEFAULT: 'rgba(var(--coze-orange-5), 1)',
|
|
linear: 'rgba(var(--coze-orange-5), 0)',
|
|
5: 'rgba(var(--coze-orange-5), 1)',
|
|
3: 'rgba(var(--coze-orange-3), var(--coze-orange-3-alpha))',
|
|
1: 'rgba(var(--coze-orange-1), var(--coze-orange-1-alpha))',
|
|
},
|
|
alternative: {
|
|
DEFAULT: 'rgba(var(--coze-alternative-50), 1)',
|
|
50: 'rgba(var(--coze-alternative-50), 1)',
|
|
30: 'rgba(var(--coze-alternative-30), var(--coze-alternative-30-alpha))',
|
|
},
|
|
cyan: {
|
|
DEFAULT: 'rgba(var(--coze-cyan-5), 1)',
|
|
linear: 'rgba(var(--coze-cyan-5), 0)',
|
|
50: 'rgba(var(--coze-cyan-50), var(--coze-cyan-50-alpha))',
|
|
30: 'rgba(var(--coze-cyan-30), var(--coze-cyan-30-alpha))',
|
|
20: 'rgba(var(--coze-cyan-20), var(--coze-cyan-20-alpha))',
|
|
10: 'rgba(var(--coze-cyan-10), var(--coze-cyan-10-alpha))',
|
|
5: 'rgba(var(--coze-cyan-5), 1)',
|
|
3: 'rgba(var(--coze-cyan-3), var(--coze-cyan-3-alpha))',
|
|
},
|
|
blue: {
|
|
DEFAULT: 'rgba(var(--coze-blue-5), 1)',
|
|
linear: 'rgba(var(--coze-blue-5), 0)',
|
|
50: 'rgba(var(--coze-blue-50), var(--coze-blue-50-alpha))',
|
|
30: 'rgba(var(--coze-blue-30), var(--coze-blue-30-alpha))',
|
|
20: 'rgba(var(--coze-blue-20), var(--coze-blue-20-alpha))',
|
|
10: 'rgba(var(--coze-blue-10), var(--coze-blue-10-alpha))',
|
|
5: 'rgba(var(--coze-blue-5), var(--coze-blue-5-alpha))',
|
|
3: 'rgba(var(--coze-blue-3), var(--coze-blue-3-alpha))',
|
|
},
|
|
purple: {
|
|
DEFAULT: 'rgba(var(--coze-purple-5), 1)',
|
|
linear: 'rgba(var(--coze-purple-5), 0)',
|
|
50: 'rgba(var(--coze-purple-50), var(--coze-purple-50-alpha))',
|
|
30: 'rgba(var(--coze-purple-30), var(--coze-purple-30-alpha))',
|
|
20: 'rgba(var(--coze-purple-20), var(--coze-purple-20-alpha))',
|
|
10: 'rgba(var(--coze-purple-10), var(--coze-purple-10-alpha))',
|
|
7: 'rgba(var(--coze-purple-7), 1)',
|
|
6: 'rgba(var(--coze-purple-6), 1)',
|
|
5: 'rgba(var(--coze-purple-5), 1)',
|
|
3: 'rgba(var(--coze-purple-3), var(--coze-purple-3-alpha))',
|
|
2: 'rgba(var(--coze-purple-2), var(--coze-purple-2-alpha))',
|
|
1: 'rgba(var(--coze-purple-1), var(--coze-purple-1-alpha))',
|
|
},
|
|
magenta: {
|
|
DEFAULT: 'rgba(var(--coze-magenta-5), 1)',
|
|
linear: 'rgba(var(--coze-magenta-5), 0)',
|
|
50: 'rgba(var(--coze-magenta-50), var(--coze-magenta-50-alpha))',
|
|
30: 'rgba(var(--coze-magenta-30), var(--coze-magenta-30-alpha))',
|
|
20: 'rgba(var(--coze-magenta-20), var(--coze-magenta-20-alpha))',
|
|
10: 'rgba(var(--coze-magenta-10), var(--coze-magenta-10-alpha))',
|
|
5: 'rgba(var(--coze-magenta-5), 1)',
|
|
3: 'rgba(var(--coze-magenta-3), var(--coze-magenta-3-alpha))',
|
|
},
|
|
black: {
|
|
DEFAULT: 'rgb(var(--black-6))',
|
|
7: 'rgb(var(--black-7))',
|
|
6: 'rgb(var(--black-6))',
|
|
5: 'rgb(var(--black-5))',
|
|
4: 'rgb(var(--black-4))',
|
|
3: 'rgb(var(--black-3))',
|
|
2: 'rgb(var(--black-2))',
|
|
1: 'rgb(var(--black-1))',
|
|
},
|
|
white: {
|
|
DEFAULT: 'rgb(var(--white-1))',
|
|
6: 'rgb(var(--white-6))',
|
|
5: 'rgb(var(--white-5))',
|
|
4: 'rgb(var(--white-4))',
|
|
3: 'rgb(var(--white-3))',
|
|
2: 'rgb(var(--white-2))',
|
|
1: 'rgb(var(--white-1))',
|
|
},
|
|
stroke: {
|
|
DEFAULT: 'rgba(var(--coze-stroke-5), var(--coze-stroke-5-alpha))',
|
|
max: 'rgba(var(--coze-stroke-7), var(--coze-stroke-7-alpha))',
|
|
6: 'rgba(var(--coze-stroke-6), var(--coze-stroke-6-alpha))',
|
|
5: 'rgba(var(--coze-stroke-5), var(--coze-stroke-5-alpha))',
|
|
opaque: 'rgb(var(--coze-stroke-opaque))',
|
|
},
|
|
mask: {
|
|
DEFAULT: 'rgba(var(--coze-mask-5), 0.4)',
|
|
5: 'rgba(var(--coze-mask-5), 0.4)',
|
|
},
|
|
icon: {
|
|
DEFAULT: 'hsl(var(--icon))',
|
|
gray: 'hsl(var(--icon-gray))',
|
|
dark: 'hsl(var(--icon-dark))',
|
|
},
|
|
fornax: {
|
|
DEFAULT: 'rgba(var(--coze-fornax-7), 1)',
|
|
7: 'var(--coze-fornax-7)',
|
|
},
|
|
},
|
|
fontSize: {
|
|
mini: 'var(--coze-10)',
|
|
base: 'var(--coze-12)',
|
|
lg: 'var(--coze-14)',
|
|
xl: 'var(--coze-15)',
|
|
xxl: 'var(--coze-16)',
|
|
'18px': 'var(--coze-18)',
|
|
'20px': 'var(--coze-20)',
|
|
'22px': 'var(--coze-22)',
|
|
'24px': 'var(--coze-24)',
|
|
'26px': 'var(--coze-26)',
|
|
'28px': 'var(--coze-28)',
|
|
'30px': 'var(--coze-30)',
|
|
'32px': 'var(--coze-32)',
|
|
'36px': 'var(--coze-36)',
|
|
'48px': 'var(--coze-48)',
|
|
'64px': 'var(--coze-64)',
|
|
},
|
|
spacing: {
|
|
DEFAULT: 'var(--coze-8)',
|
|
xxl: 'var(--coze-96)',
|
|
xl: 'var(--coze-80)',
|
|
md: 'var(--coze-64)',
|
|
mm: 'var(--coze-48)',
|
|
large: 'var(--coze-40)',
|
|
normal: 'var(--coze-32)',
|
|
small: 'var(--coze-20)',
|
|
mini: 'var(--coze-16)',
|
|
'1080px': 'var(--coze-1080)',
|
|
'800px': 'var(--coze-800)',
|
|
'640px': 'var(--coze-640)',
|
|
'480px': 'var(--coze-480)',
|
|
'320px': 'var(--coze-320)',
|
|
'240px': 'var(--coze-240)',
|
|
'200px': 'var(--coze-200)',
|
|
'160px': 'var(--coze-160)',
|
|
'120px': 'var(--coze-120)',
|
|
'96px': 'var(--coze-96)',
|
|
'80px': 'var(--coze-80)',
|
|
'64px': 'var(--coze-64)',
|
|
'48px': 'var(--coze-48)',
|
|
'40px': 'var(--coze-40)',
|
|
'32px': 'var(--coze-32)',
|
|
'30px': 'var(--coze-30)',
|
|
'28px': 'var(--coze-28)',
|
|
'26px': 'var(--coze-26)',
|
|
'24px': 'var(--coze-24)',
|
|
'22px': 'var(--coze-22)',
|
|
'20px': 'var(--coze-20)',
|
|
'18px': 'var(--coze-18)',
|
|
'16px': 'var(--coze-16)',
|
|
'15px': 'var(--coze-15)',
|
|
'14px': 'var(--coze-14)',
|
|
'12px': 'var(--coze-12)',
|
|
'10px': 'var(--coze-10)',
|
|
'9px': 'var(--coze-9)',
|
|
'8px': 'var(--coze-8)',
|
|
'6px': 'var(--coze-6)',
|
|
'5px': 'var(--coze-5)',
|
|
'4px': 'var(--coze-4)',
|
|
'3px': 'var(--coze-3)',
|
|
'2px': 'var(--coze-2)',
|
|
'1px': 'var(--coze-1)',
|
|
},
|
|
borderWidth: {
|
|
DEFAULT: 'var(--coze-1)',
|
|
normal: 'var(--coze-1)',
|
|
half: 'var(--coze-0-5)',
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: 'var(--coze-8)',
|
|
ultra: 'var(--coze-40)',
|
|
xxl: 'var(--coze-24)',
|
|
xl: 'var(--coze-16)',
|
|
md: 'var(--coze-12)',
|
|
m: 'var(--coze-10)',
|
|
normal: 'var(--coze-8)',
|
|
small: 'var(--coze-6)',
|
|
little: 'var(--coze-5)',
|
|
mini: 'var(--coze-4)',
|
|
tiny: 'var(--coze-2)',
|
|
},
|
|
btnBorderRadius: {
|
|
large: 'var(--coze-10)',
|
|
normal: 'var(--coze-8)',
|
|
small: 'var(--coze-5)',
|
|
mini: 'var(--coze-4)',
|
|
},
|
|
inputBorderRadius: {
|
|
large: 'var(--coze-10)',
|
|
normal: 'var(--coze-8)',
|
|
small: 'var(--coze-6)',
|
|
},
|
|
inputHeight: {
|
|
large: 'var(--coze-40)',
|
|
normal: 'var(--coze-32)',
|
|
small: 'var(--coze-24)',
|
|
},
|
|
height: {
|
|
DEFAULT: 'var(--coze-32)',
|
|
'1080px': 'var(--coze-1080)',
|
|
'800px': 'var(--coze-800)',
|
|
'640px': 'var(--coze-640)',
|
|
'480px': 'var(--coze-480)',
|
|
'320px': 'var(--coze-320)',
|
|
'240px': 'var(--coze-240)',
|
|
'200px': 'var(--coze-200)',
|
|
'160px': 'var(--coze-160)',
|
|
'120px': 'var(--coze-120)',
|
|
xxl: 'var(--coze-96)',
|
|
xl: 'var(--coze-80)',
|
|
md: 'var(--coze-64)',
|
|
m: 'var(--coze-48)',
|
|
large: 'var(--coze-40)',
|
|
normal: 'var(--coze-32)',
|
|
small: 'var(--coze-24)',
|
|
petite: 'var(--coze-18)',
|
|
mini: 'var(--coze-16)',
|
|
},
|
|
minHeight: {
|
|
large: 'var(--coze-40)',
|
|
normal: 'var(--coze-32)',
|
|
small: 'var(--coze-24)',
|
|
petite: 'var(--coze-18)',
|
|
mini: 'var(--coze-16)',
|
|
},
|
|
lineHeight: {
|
|
mini: 'var(--coze-16)',
|
|
'12px': 'var(--coze-12)',
|
|
'14px': 'var(--coze-14)',
|
|
'16px': 'var(--coze-16)',
|
|
'20px': 'var(--coze-20)',
|
|
'22px': 'var(--coze-22)',
|
|
'24px': 'var(--coze-24)',
|
|
'28px': 'var(--coze-28)',
|
|
'36px': 'var(--coze-36)',
|
|
},
|
|
width: {
|
|
DEFAULT: 'var(--coze-32)',
|
|
'1080px': 'var(--coze-1080)',
|
|
'800px': 'var(--coze-800)',
|
|
'640px': 'var(--coze-640)',
|
|
'480px': 'var(--coze-480)',
|
|
'320px': 'var(--coze-320)',
|
|
'240px': 'var(--coze-240)',
|
|
'200px': 'var(--coze-200)',
|
|
'160px': 'var(--coze-160)',
|
|
'120px': 'var(--coze-120)',
|
|
xxl: 'var(--coze-96)',
|
|
xl: 'var(--coze-80)',
|
|
md: 'var(--coze-64)',
|
|
m: 'var(--coze-48)',
|
|
large: 'var(--coze-40)',
|
|
normal: 'var(--coze-32)',
|
|
small: 'var(--coze-24)',
|
|
petite: 'var(--coze-18)',
|
|
mini: 'var(--coze-16)',
|
|
},
|
|
minWidth: {
|
|
large: 'var(--coze-40)',
|
|
normal: 'var(--coze-32)',
|
|
small: 'var(--coze-24)',
|
|
petite: 'var(--coze-18)',
|
|
mini: 'var(--coze-16)',
|
|
},
|
|
fill: theme => ({
|
|
DEFAULT: theme('colors.foreground.5'),
|
|
dark: theme('colors.foreground.5'),
|
|
light: theme('colors.foreground.3'),
|
|
black: theme('colors.black'),
|
|
white: theme('colors.white'),
|
|
}),
|
|
boxShadow: {
|
|
DEFAULT:
|
|
'0 4px 12px 0px rgba(var(--coze-shadow-0), 0.08), 0px 8px 24px 0px rgba(var(--coze-shadow-0), 0.04)',
|
|
small:
|
|
'0px 2px 6px 0px rgba(var(--coze-shadow-0), 0.04), 0px 4px 12px 0px rgba(var(--coze-shadow-0), 0.02)',
|
|
normal:
|
|
'0 4px 12px 0px rgba(var(--coze-shadow-0), 0.08), 0px 8px 24px 0px rgba(var(--coze-shadow-0), 0.04)',
|
|
large:
|
|
'0px 8px 24px 0px rgba(var(--coze-shadow-0), 0.16), 0px 16px 48px 0px rgba(var(--coze-shadow-0), 0.08)',
|
|
},
|
|
keyframes: {
|
|
'icon-down': {
|
|
'0%': { transform: 'rotate(0deg)' },
|
|
'100%': { transform: 'rotate(90deg)' },
|
|
},
|
|
'icon-up': {
|
|
'0%': { transform: 'rotate(90deg)' },
|
|
'100%': { transform: 'rotate(0deg)' },
|
|
},
|
|
},
|
|
animation: {
|
|
'icon-down': 'icon-down 0.2s ease-out',
|
|
'icon-up': 'icon-up 0.2s ease-out',
|
|
loading: '',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|