ai_dev_chengtou_source

wujingjing

2025-03-10 9c9a5c3f95932fff1a4bb16384a411f1cbcb0e8b

 tailwind.config.js

@@ -1,3 +1,17 @@
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}'],
@@ -7,6 +21,72 @@
      // 2）i 标签 display 修改，导致布局错误；3）border 颜色默认值不是黑色
      preflight: false,
   },
   theme: {},
   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: [],
};