163 lines
9.8 KiB
TypeScript
163 lines
9.8 KiB
TypeScript
|
import type { Config } from "tailwindcss";
|
||
|
|
import { heroui } from "@heroui/theme";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
darkMode: "class",
|
||
|
|
content: [
|
||
|
|
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||
|
|
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||
|
|
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||
|
|
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
|
||
|
|
],
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
screens: {
|
||
|
|
'3xl': '2000px', // 2K+
|
||
|
|
'4xl': '2800px', // 4K
|
||
|
|
},
|
||
|
|
colors: {
|
||
|
|
// 向后兼容
|
||
|
|
background: "var(--background)",
|
||
|
|
foreground: "var(--foreground)",
|
||
|
|
|
||
|
|
// 设计系统 - 文本颜色
|
||
|
|
'text-primary': 'var(--text-primary)',
|
||
|
|
'text-secondary': 'var(--text-secondary)',
|
||
|
|
'text-tertiary': 'var(--text-tertiary)',
|
||
|
|
'text-inverse': 'var(--text-inverse)',
|
||
|
|
'text-disabled': 'var(--text-disabled)',
|
||
|
|
|
||
|
|
// 设计系统 - 背景颜色
|
||
|
|
'bg-base': 'var(--bg-base)',
|
||
|
|
'bg-subtle': 'var(--bg-subtle)',
|
||
|
|
'bg-surface': 'var(--bg-surface)',
|
||
|
|
'bg-elevated': 'var(--bg-elevated)',
|
||
|
|
'bg-overlay': 'var(--bg-overlay)',
|
||
|
|
|
||
|
|
// 设计系统 - 边框颜色
|
||
|
|
'border-normal': 'var(--border-normal)',
|
||
|
|
'border-subtle': 'var(--border-subtle)',
|
||
|
|
'border-strong': 'var(--border-strong)',
|
||
|
|
|
||
|
|
// 向后兼容的别名
|
||
|
|
'border-gray': 'var(--border-subtle)',
|
||
|
|
'fill-secondary-click': 'var(--bg-elevated)',
|
||
|
|
|
||
|
|
// 设计系统 - 强调色
|
||
|
|
'accent-green': 'var(--accent-green)',
|
||
|
|
'accent-green-bg': 'var(--accent-green-bg)',
|
||
|
|
'accent-blue': 'var(--accent-blue)',
|
||
|
|
'accent-blue-bg': 'var(--accent-blue-bg)',
|
||
|
|
'accent-red': 'var(--accent-red)',
|
||
|
|
'accent-yellow': 'var(--accent-yellow)',
|
||
|
|
|
||
|
|
// 设计系统 - 特殊颜色
|
||
|
|
'special-black': 'var(--special-black)',
|
||
|
|
'special-white': 'var(--special-white)',
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
inter: ['var(--font-noto-sans-sc)', 'var(--font-inter)', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif'],
|
||
|
|
jetbrains: ['var(--font-jetbrains)', 'JetBrains Mono', 'monospace'],
|
||
|
|
domine: ['var(--font-noto-serif-sc)', 'var(--font-domine)', 'Domine', 'Georgia', 'Noto Serif', 'serif'],
|
||
|
|
'noto-sans': ['var(--font-noto-sans-sc)', 'sans-serif'],
|
||
|
|
'noto-serif': ['var(--font-noto-serif-sc)', 'serif'],
|
||
|
|
},
|
||
|
|
fontSize: {
|
||
|
|
// 向后兼容的别名
|
||
|
|
'caption-tiny': ['12px', { lineHeight: '150%', letterSpacing: '0.01em' }],
|
||
|
|
'body-small': ['14px', { lineHeight: '150%' }],
|
||
|
|
'body-default': ['16px', { lineHeight: '150%' }],
|
||
|
|
'body-large': ['18px', { lineHeight: '150%' }],
|
||
|
|
'heading-h3': ['24px', { lineHeight: '130%', letterSpacing: '-0.005em' }],
|
||
|
|
'heading-h2': ['32px', { lineHeight: '120%', letterSpacing: '-0.01em' }],
|
||
|
|
|
||
|
|
// Serif Display 系列
|
||
|
|
'serif-display-giant-bold': ['100px', { lineHeight: '100%', fontWeight: '700', letterSpacing: '-0.03em' }],
|
||
|
|
'serif-display-giant': ['100px', { lineHeight: '100%', fontWeight: '400', letterSpacing: '-0.03em' }],
|
||
|
|
'serif-display-hero-bold': ['64px', { lineHeight: '110%', fontWeight: '700', letterSpacing: '-0.02em' }],
|
||
|
|
'serif-display-hero': ['64px', { lineHeight: '110%', fontWeight: '400', letterSpacing: '-0.02em' }],
|
||
|
|
'serif-display-title1-bold': ['48px', { lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.01em' }],
|
||
|
|
'serif-display-title1': ['48px', { lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.01em' }],
|
||
|
|
'serif-display-title2-bold': ['32px', { lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.01em' }],
|
||
|
|
'serif-display-title2': ['32px', { lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.01em' }],
|
||
|
|
'serif-display-quote-bold': ['24px', { lineHeight: '130%', fontWeight: '700', letterSpacing: '-0.005em' }],
|
||
|
|
'serif-display-quote': ['24px', { lineHeight: '130%', fontWeight: '400', letterSpacing: '-0.005em' }],
|
||
|
|
'serif-display-text-bold': ['16px', { lineHeight: '150%', fontWeight: '700' }],
|
||
|
|
'serif-display-text': ['16px', { lineHeight: '150%', fontWeight: '400' }],
|
||
|
|
|
||
|
|
// Sans Heading 系列
|
||
|
|
'sans-h1-bold': ['48px', { lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.01em' }],
|
||
|
|
'sans-h1-medium': ['48px', { lineHeight: '120%', fontWeight: '500', letterSpacing: '-0.01em' }],
|
||
|
|
'sans-h1': ['48px', { lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.01em' }],
|
||
|
|
'sans-h2-bold': ['32px', { lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.01em' }],
|
||
|
|
'sans-h2-medium': ['32px', { lineHeight: '120%', fontWeight: '500', letterSpacing: '-0.01em' }],
|
||
|
|
'sans-h2': ['32px', { lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.01em' }],
|
||
|
|
'sans-h3-bold': ['24px', { lineHeight: '130%', fontWeight: '700', letterSpacing: '-0.005em' }],
|
||
|
|
'sans-h3-medium': ['24px', { lineHeight: '130%', fontWeight: '500', letterSpacing: '-0.005em' }],
|
||
|
|
'sans-h3': ['24px', { lineHeight: '130%', fontWeight: '400', letterSpacing: '-0.005em' }],
|
||
|
|
'sans-h4-bold': ['20px', { lineHeight: '140%', fontWeight: '700' }],
|
||
|
|
'sans-h4-medium': ['20px', { lineHeight: '140%', fontWeight: '500' }],
|
||
|
|
'sans-h4': ['20px', { lineHeight: '140%', fontWeight: '400' }],
|
||
|
|
|
||
|
|
// Sans Body 系列
|
||
|
|
'sans-body-large-bold': ['18px', { lineHeight: '150%', fontWeight: '700' }],
|
||
|
|
'sans-body-large-medium': ['18px', { lineHeight: '150%', fontWeight: '500' }],
|
||
|
|
'sans-body-large': ['18px', { lineHeight: '150%', fontWeight: '400' }],
|
||
|
|
'sans-body-default-bold': ['16px', { lineHeight: '150%', fontWeight: '700' }],
|
||
|
|
'sans-body-default-medium': ['16px', { lineHeight: '150%', fontWeight: '500' }],
|
||
|
|
'sans-body-default': ['16px', { lineHeight: '150%', fontWeight: '400' }],
|
||
|
|
'sans-body-small-bold': ['14px', { lineHeight: '150%', fontWeight: '700' }],
|
||
|
|
'sans-body-small-medium': ['14px', { lineHeight: '150%', fontWeight: '500' }],
|
||
|
|
'sans-body-small': ['14px', { lineHeight: '150%', fontWeight: '400' }],
|
||
|
|
|
||
|
|
// Sans Caption 系列
|
||
|
|
'sans-caption-tiny-bold': ['12px', { lineHeight: '150%', fontWeight: '700', letterSpacing: '0.01em' }],
|
||
|
|
'sans-caption-tiny-medium': ['12px', { lineHeight: '150%', fontWeight: '500', letterSpacing: '0.01em' }],
|
||
|
|
'sans-caption-tiny': ['12px', { lineHeight: '150%', fontWeight: '400', letterSpacing: '0.01em' }],
|
||
|
|
'sans-caption-minuscule-bold': ['10px', { lineHeight: '150%', fontWeight: '700', letterSpacing: '0.02em' }],
|
||
|
|
'sans-caption-minuscule-medium': ['10px', { lineHeight: '150%', fontWeight: '500', letterSpacing: '0.02em' }],
|
||
|
|
'sans-caption-minuscule': ['10px', { lineHeight: '150%', fontWeight: '400', letterSpacing: '0.02em' }],
|
||
|
|
|
||
|
|
// Mono Numeric 系列
|
||
|
|
'mono-numeric-giant-extrabold': ['48px', { lineHeight: '110%', fontWeight: '800', letterSpacing: '-0.01em' }],
|
||
|
|
'mono-numeric-giant-bold': ['48px', { lineHeight: '110%', fontWeight: '700', letterSpacing: '-0.01em' }],
|
||
|
|
'mono-numeric-giant-medium': ['48px', { lineHeight: '110%', fontWeight: '500', letterSpacing: '-0.01em' }],
|
||
|
|
'mono-numeric-giant': ['48px', { lineHeight: '110%', fontWeight: '400', letterSpacing: '-0.01em' }],
|
||
|
|
'mono-numeric-huge-extrabold': ['32px', { lineHeight: '120%', fontWeight: '800', letterSpacing: '-0.005em' }],
|
||
|
|
'mono-numeric-huge-bold': ['32px', { lineHeight: '120%', fontWeight: '700', letterSpacing: '-0.005em' }],
|
||
|
|
'mono-numeric-huge-medium': ['32px', { lineHeight: '120%', fontWeight: '500', letterSpacing: '-0.005em' }],
|
||
|
|
'mono-numeric-huge': ['32px', { lineHeight: '120%', fontWeight: '400', letterSpacing: '-0.005em' }],
|
||
|
|
'mono-numeric-large-extrabold': ['24px', { lineHeight: '130%', fontWeight: '800' }],
|
||
|
|
'mono-numeric-large-bold': ['24px', { lineHeight: '130%', fontWeight: '700' }],
|
||
|
|
'mono-numeric-large-medium': ['24px', { lineHeight: '130%', fontWeight: '500' }],
|
||
|
|
'mono-numeric-large': ['24px', { lineHeight: '130%', fontWeight: '400' }],
|
||
|
|
'mono-numeric-default-extrabold': ['16px', { lineHeight: '140%', fontWeight: '800' }],
|
||
|
|
'mono-numeric-default-bold': ['16px', { lineHeight: '140%', fontWeight: '700' }],
|
||
|
|
'mono-numeric-default-medium': ['16px', { lineHeight: '140%', fontWeight: '500' }],
|
||
|
|
'mono-numeric-default': ['16px', { lineHeight: '140%', fontWeight: '400' }],
|
||
|
|
|
||
|
|
// Mono Code 系列
|
||
|
|
'mono-code-small-extrabold': ['14px', { lineHeight: '150%', fontWeight: '800' }],
|
||
|
|
'mono-code-small-bold': ['14px', { lineHeight: '150%', fontWeight: '700' }],
|
||
|
|
'mono-code-small-medium': ['14px', { lineHeight: '150%', fontWeight: '500' }],
|
||
|
|
'mono-code-small': ['14px', { lineHeight: '150%', fontWeight: '400' }],
|
||
|
|
'mono-code-tiny-extrabold': ['12px', { lineHeight: '150%', fontWeight: '800' }],
|
||
|
|
'mono-code-tiny-bold': ['12px', { lineHeight: '150%', fontWeight: '700' }],
|
||
|
|
'mono-code-tiny-medium': ['12px', { lineHeight: '150%', fontWeight: '500' }],
|
||
|
|
'mono-code-tiny': ['12px', { lineHeight: '150%', fontWeight: '400' }],
|
||
|
|
'mono-code-minuscule-extrabold': ['10px', { lineHeight: '150%', fontWeight: '800' }],
|
||
|
|
'mono-code-minuscule-bold': ['10px', { lineHeight: '150%', fontWeight: '700' }],
|
||
|
|
'mono-code-minuscule-medium': ['10px', { lineHeight: '150%', fontWeight: '500' }],
|
||
|
|
'mono-code-minuscule': ['10px', { lineHeight: '150%', fontWeight: '400' }],
|
||
|
|
},
|
||
|
|
fontWeight: {
|
||
|
|
regular: '400',
|
||
|
|
medium: '500',
|
||
|
|
bold: '700',
|
||
|
|
extrabold: '800',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
plugins: [heroui()],
|
||
|
|
} satisfies Config;
|