const namespace = 'wi-admin';
|
|
function genThemeColor(branchName) {
|
return {
|
'light-3': `var(--${namespace}-color-${branchName}-light-3)`,
|
'light-5': `var(--${namespace}-color-${branchName}-light-5)`,
|
'light-7': `var(--${namespace}-color-${branchName}-light-7)`,
|
'light-8': `var(--${namespace}-color-${branchName}-light-8)`,
|
'light-9': `var(--${namespace}-color-${branchName}-light-9)`,
|
DEFAULT: `var(--${namespace}-color-${branchName})`,
|
'dark-2': `var(--${namespace}-color-${branchName}-dark-2)`,
|
};
|
}
|
|
/** @type {import('tailwindcss').Config} */
|
export default {
|
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
corePlugins: {
|
// preflight 会修改元素的默认样式
|
// NOTE: 已知的改为 true 的问题：1）html2canvas 生成的图片因为 image display 改变导致文字整体偏下；
|
// 2）i 标签 display 修改，导致布局错误；3）border 颜色默认值不是黑色
|
preflight: false,
|
},
|
theme: {
|
extend: {
|
colors: {
|
// 直接使用css变量
|
primary: genThemeColor('primary'),
|
success: genThemeColor('success'),
|
warning: genThemeColor('warning'),
|
danger: genThemeColor('danger'),
|
info: genThemeColor('info'),
|
},
|
backgroundColor: {
|
default: `var(--${namespace}-bg-color)`,
|
page: `var(--${namespace}-bg-color-page)`,
|
overlay: `var(--${namespace}-bg-color-overlay)`,
|
disabled: `var(--${namespace}-disabled-bg-color)`,
|
|
},
|
textColor: {
|
'color-default': `var(--${namespace}-text-color-primary)`,
|
regular: `var(--${namespace}-text-color-regular)`,
|
secondary: `var(--${namespace}-text-color-secondary)`,
|
placeholder: `var(--${namespace}-text-color-placeholder)`,
|
disabled: `var(--${namespace}-text-color-disabled)`,
|
},
|
borderRadius: {
|
base: `var(--${namespace}-border-radius-base)`,
|
small: `var(--${namespace}-border-radius-small)`,
|
round: `var(--${namespace}-border-radius-round)`,
|
circle: `var(--${namespace}-border-radius-circle)`,
|
},
|
borderColor: {
|
'color-default': `var(--${namespace}-border-color)`,
|
light: `var(--${namespace}-border-color-light)`,
|
lighter: `var(--${namespace}-border-color-lighter)`,
|
extraLight: `var(--${namespace}-border-color-extra-light)`,
|
dark: `var(--${namespace}-border-color-dark)`,
|
darker: `var(--${namespace}-border-color-darker)`,
|
hover: `var(--${namespace}-border-color-hover)`,
|
disabled: `var(--${namespace}-disabled-border-color)`,
|
},
|
borderWidth: {
|
'w-default': `var(--${namespace}-border-width)`,
|
},
|
fontFamily: {
|
'family-default': `var(--${namespace}-font-family)`,
|
},
|
fontWeight: {
|
'weight-default': `var(--${namespace}-font-weight-primary)`,
|
},
|
|
fontSize: {
|
'extra-small': `var(--${namespace}-font-size-extra-small)`,
|
small: `var(--${namespace}-font-size-small)`,
|
base: `var(--${namespace}-font-size-base)`,
|
medium: `var(--${namespace}-font-size-medium)`,
|
large: `var(--${namespace}-font-size-large)`,
|
'extra-large': `var(--${namespace}-font-size-extra-large)`,
|
},
|
lineHeight: {
|
default: `var(--${namespace}-font-line-height-primary)`,
|
},
|
transitionDuration: {
|
default: `var(--${namespace}-transition-duration)`,
|
fast: `var(--${namespace}-transition-duration-fast)`,
|
},
|
},
|
},
|
plugins: [],
|
};
|
