ui风格封装

2024-12-25 17:52:30 +08:00
parent 4cbec25b53
commit ac0f7ccbb7
3 changed files with 204 additions and 27 deletions
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,25 +8,124 @@ export default {
  theme: {
    extend: {
      colors: {
+        // Material Design 3 调色板
        primary: {
-          DEFAULT: '#1677ff',
-          dark: '#0958d9',
+          DEFAULT: '#006494',  // 主色
+          50: '#F0F9FF',
+          100: '#E0F2FE',
+          200: '#B9E6FE',
+          300: '#7CD4FD',
+          400: '#36BFFA',
+          500: '#0BA5EC',
+          600: '#0086C9',
+          700: '#006494',
+          800: '#00497D',
+          900: '#003356',
        },
-        success: {
-          DEFAULT: '#52c41a',
-          dark: '#389e0d',
+        secondary: {
+          DEFAULT: '#625B71',
+          50: '#F6F5F7',
+          100: '#ECEAEF',
+          200: '#D9D6DF',
+          300: '#B3AEBF',
+          400: '#8C859E',
+          500: '#625B71',
+          600: '#4E495A',
+          700: '#3B3744',
+          800: '#27242D',
+          900: '#141217',
        },
-        warning: {
-          DEFAULT: '#faad14',
-          dark: '#d48806',
+        surface: {
+          DEFAULT: '#FFFFFF',
+          dark: '#121212',
        },
        error: {
-          DEFAULT: '#ff4d4f',
-          dark: '#d9363e',
+          DEFAULT: '#DC2626',
+          50: '#FEF2F2',
+          100: '#FEE2E2',
+          200: '#FECACA',
+          300: '#FCA5A5',
+          400: '#F87171',
+          500: '#EF4444',
+          600: '#DC2626',
+          700: '#B91C1C',
+          800: '#991B1B',
+          900: '#7F1D1D',
        },
+        success: {
+          DEFAULT: '#16A34A',
+          50: '#F0FDF4',
+          100: '#DCFCE7',
+          200: '#BBF7D0',
+          300: '#86EFAC',
+          400: '#4ADE80',
+          500: '#22C55E',
+          600: '#16A34A',
+          700: '#15803D',
+          800: '#166534',
+          900: '#14532D',
+        },
+        warning: {
+          DEFAULT: '#FBBF24',
+          50: '#FFFBEB',
+          100: '#FEF3C7',
+          200: '#FDE68A',
+          300: '#FCD34D',
+          400: '#FBBF24',
+          500: '#F59E0B',
+          600: '#D97706',
+          700: '#B45309',
+          800: '#92400E',
+          900: '#78350F',
+        }
      },
      fontFamily: {
-        sans: ['Poppins', 'sans-serif'],
+        sans: ['Roboto', 'sans-serif'],  // Google 字体
+      },
+      boxShadow: {
+        // Material Design 3 阴影
+        'elevation-1': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'elevation-2': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        'elevation-3': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        'elevation-4': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        'elevation-5': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+      },
+      borderRadius: {
+        // Material Design 3 圆角
+        'none': '0',
+        'sm': '4px',
+        DEFAULT: '8px',
+        'md': '12px',
+        'lg': '16px',
+        'xl': '28px',
+        '2xl': '32px',
+        'full': '9999px',
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'ripple': 'ripple 0.6s linear',
+      },
+      keyframes: {
+        pulse: {
+          '0%, 100%': {
+            opacity: 1,
+            transform: 'scale(1)',
+          },
+          '50%': {
+            opacity: .9,
+            transform: 'scale(0.98)',
+          },
+        },
+        ripple: {
+          '0%': {
+            transform: 'scale(0)',
+            opacity: 0.4,
+          },
+          '100%': {
+            transform: 'scale(4)',
+            opacity: 0,
+          },
+        }
      },
    },
  },