// 使用函数全部生成没有提示 // function genThemeColor() { // const colors = ['primary', 'success', 'warning', 'danger', 'info']; // const colorMap = {}; // for (const item of colors) { // const branchMap = {}; // for (let i = 1; i <= 4; i++) { // const key = `light-${2 * i + 1}`; // const colorValue = `var(--alloy-color-${item}-${key}`; // branchMap[key] = colorValue; // } // branchMap['light-8'] = `var(--alloy-color-${item}-light-8)`; // branchMap['dark-2'] = `var(--alloy-color-${item}-dark-2)`; // branchMap['default'] = `var(--alloy-color-${item})`; // colorMap[item] = branchMap; // } // return colorMap; // } const namespace = 'alloy'; 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} */ module.exports = { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: { fontWeight: { 'weight-default': `var(--${namespace}-font-weight-primary)`, }, lineHeight: { default: `var(--${namespace}-font-line-height-primary)`, }, transitionDuration: { default: `var(--${namespace}-transition-duration)`, fast: `var(--${namespace}-transition-duration-fast)`, }, 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)`, }, }, fontFamily: { 'family-default': `var(--${namespace}-font-family)`, }, 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)`, }, borderWidth: { 'w-default': `var(--${namespace}-border-width)`, }, backgroundColor: { primary: genThemeColor('primary'), success: genThemeColor('success'), warning: genThemeColor('warning'), danger: genThemeColor('danger'), info: genThemeColor('info'), default: `var(--${namespace}-bg-color)`, page: `var(--${namespace}-bg-color-page)`, overlay: `var(--${namespace}-bg-color-overlay)`, disabled: `var(--${namespace}-disabled-bg-color)`, white: `var(--${namespace}-color-white)`, black: `var(--${namespace}-color-black)`, }, textColor: { primary: genThemeColor('primary'), success: genThemeColor('success'), warning: genThemeColor('warning'), danger: genThemeColor('danger'), info: genThemeColor('info'), white: `var(--${namespace}-color-white)`, black: `var(--${namespace}-color-black)`, '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)`, }, borderColor: { primary: genThemeColor('primary'), success: genThemeColor('success'), warning: genThemeColor('warning'), danger: genThemeColor('danger'), info: genThemeColor('info'), '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)`, }, }, corePlugins: { preflight: false, }, };