@anker-in/headless-ui 0.0.27-alpha.8 → 0.0.27-alpha.80

package/tailwind.config.js

@@ -0,0 +1,219 @@
+module.exports = {
+  darkMode: ['selector', '.aiui-dark'],
+  content: [
+    './src/components/**/*.{js,jsx,ts,tsx}',
+    './src/icons/**/*.{js,jsx,ts,tsx}',
+    '../storybook/.storybook/**/*.{js,jsx,ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      screens: {
+        tablet: '768px', // ≥768px 平板
+        laptop: '1025px', // ≥1025px 小桌面
+        desktop: '1441px', // ≥1441px 大桌面
+        'lg-desktop': '1921px', // ≥1921px 超大屏
+      },
+      colors: {
+        brand: {
+          0: 'var(--brand-color-0)',
+          1: 'var(--brand-color-1)',
+        },
+        success: {
+          0: 'var(--success-color-0)',
+          1: 'var(--success-color-1)',
+          2: 'var(--success-color-2)',
+          3: 'var(--success-color-3)',
+          4: 'var(--success-color-4)',
+        },
+        error: {
+          0: 'var(--error-color-0)',
+          1: 'var(--error-color-1)',
+          2: 'var(--error-color-2)',
+          3: 'var(--error-color-3)',
+          4: 'var(--error-color-4)',
+        },
+        warning: {
+          0: 'var(--warning-color-0)',
+          1: 'var(--warning-color-1)',
+          2: 'var(--warning-color-2)',
+          3: 'var(--warning-color-3)',
+          4: 'var(--warning-color-4)',
+        },
+        info: {
+          primary: 'var(--info-primary-color)',
+          secondary: 'var(--info-secondary-color)',
+          tertiary: 'var(--info-tertiary-color)',
+          quaternary: 'var(--info-quaternary-color)',
+          white: 'var(--info-white-color)',
+        },
+        container: {
+          primary: 'var(--container-primary-color)',
+          secondary: {
+            0: 'var(--container-secondary-color-0)',
+            1: 'var(--container-secondary-color-1)',
+          },
+        },
+        tabs: {
+          list: {
+            bg: 'var(--tabs-list-bg-color)',
+          },
+        },
+        bg: {
+          0: 'var(--bg-color-0)',
+          1: 'var(--bg-color-1)',
+          2: 'var(--bg-color-2)',
+        },
+        lines: {
+          DEFAULT: 'var(--lines-color)',
+          1: 'var(--line-color-1)',
+          2: 'var(--line-color-2)',
+          3: 'var(--dark-success-color-0)',
+          4: 'var(--dark-warning-color-0)',
+          5: 'var(--dark-error-color-0)',
+        },
+        masks: {
+          0: 'var(--masks-color-0)',
+          1: 'var(--masks-color-1)',
+        },
+        tab: {
+          word: {
+            0: 'var(--tab-word-color-0)',
+            1: 'var(--tab-word-color-1)',
+            2: 'var(--tab-word-color-2)',
+          },
+          stroke: {
+            0: 'var(--tab-stroke-color-0)',
+            1: 'var(--tab-stroke-color-1)',
+            2: 'var(--tab-stroke-color-2)',
+          },
+          fill: {
+            0: 'var(--tab-fill-color-0)',
+            1: 'var(--tab-fill-color-1)',
+            2: 'var(--tab-fill-color-2)',
+          },
+        },
+        primary: {
+          DEFAULT: 'var(--brand-color-0)',
+          foreground: 'var(--btn-text-color)',
+        },
+        btn: {
+          primary: {
+            DEFAULT: 'var(--info-primary-color)',
+            foreground: 'var(--btn-text-color)',
+            active: {
+              DEFAULT: 'var(--brand-color-0)',
+              foreground: 'var(--btn-text-active-color)',
+            },
+            disabled: {
+              DEFAULT: 'var(--info-quaternary-color)',
+              foreground: 'var(--info-white-color)',
+              border: 'var(--brand-color-0)',
+            },
+            border: {
+              DEFAULT: 'var(--btn-text-secondary-color)',
+            },
+          },
+          secondary: {
+            DEFAULT: 'var(--btn-bg-secondary-color)',
+            foreground: 'var(--btn-text-secondary-color)',
+            active: {
+              DEFAULT: 'var(--info-primary-color)',
+              foreground: 'var(--btn-tsxt-secondary-active-color)',
+            },
+            disabled: {
+              DEFAULT: 'var(--info-white-color)',
+              foreground: 'var(--info-quaternary-color)',
+              border: 'var(--info-quaternary-color)',
+            },
+          },
+        },
+        badge: {
+          DEFAULT: 'var(--secondary-brand-color-2)',
+          foreground: 'var(--brand-color-0)',
+        },
+        skeleton: {
+          DEFAULT: 'var(--info-tertiary-color)',
+        },
+        background: {
+          DEFAULT: 'var(--container-primary-color)',
+        },
+      },
+      width: {
+        'swiper-1/2': 'calc(50% - 8px)',
+      },
+      backgroundImage: {
+        'gradient-brand': 'var(--brand-gradient-color-0)',
+      },
+      borderRadius: {
+        btn: 'var(--btn-radius)',
+        box: 'var(--box-radius)',
+      },
+      lineHeight: {
+        tight: 'var(--line-height-tight)',
+        normal: 'var(--line-height-normal)',
+        loose: 'var(--line-height-loose)',
+      },
+      letterSpacing: {
+        DEFAULT: 'var(--letter-spacing-normal)',
+      },
+      fontSize: {
+        'text-1': [
+          'var(--size-text-1)',
+          {
+            lineHeight: 'var(--line-height-normal)',
+            letterSpacing: 'var(--letter-spacing-text-1)',
+          },
+        ],
+        'text-2': [
+          'var(--size-text-2)',
+          {
+            lineHeight: 'var(--line-height-normal)',
+            letterSpacing: 'var(--letter-spacing-text-3)',
+          },
+        ],
+        'text-3': [
+          'var(--size-text-3)',
+          {
+            lineHeight: 'var(--line-height-normal)',
+            letterSpacing: 'var(--letter-spacing-text-3)',
+          },
+        ],
+        'heading-1': [
+          '14px',
+          {
+            lineHeight: '120%',
+            letterSpacing: '-0.48px',
+          },
+        ],
+        'heading-2': [
+          '20px',
+          {
+            lineHeight: '120%',
+            letterSpacing: '-0.64px',
+          },
+        ],
+        'heading-3': [
+          '24px',
+          {
+            lineHeight: '120%',
+            letterSpacing: '-0.8px',
+          },
+        ],
+        'heading-4': [
+          '32px',
+          {
+            lineHeight: '100%',
+            letterSpacing: '-0.96px',
+          },
+        ],
+        'heading-5': [
+          '40px',
+          {
+            lineHeight: '100%',
+            letterSpacing: '-1.12px',
+          },
+        ],
+      },
+    },
+  },
+}