abingyydsandClaude Sonnet 4.6
b34e81bb58
问题：非黑色背景的主题下，共享页面中的灰色/黑色硬编码颜色不协调 修复方案： 1. 扩展 CSS 变量体系：新增 --page-surface, --page-surface-hover, --page-divider, --page-inset, --page-success/warning/danger/info 2. .theme-light 和 .theme-claude 各自定义对应的浅色值 3. Tailwind 新增 text-page-success/warning/danger/info 语义色 4. 新增 CSS 工具类: bg-page-surface, hover:bg-page-surface-hover, border-page-divider, bg-page-inset 修改文件： - index.css: 扩展 CSS 变量 + 工具类 - tailwind.config.js: 新增语义色 token - Dashboard: SpotlightCard → 简单 glass 卡片，hover 色修复 - Pricing: border-white/hover-white → 主题感知类 - Tokens: bg-black/bg-neutral-800 → bg-page-inset/surface - Topup: SpotlightCard → glass，hover/text 色修复 - ConfigExporter: 下拉菜单/代码预览区全面适配 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,jsx}'],
|
|
darkMode: 'class',
|
|
safelist: [
|
|
// Dark theme uses dynamic accent colors
|
|
{ pattern: /border-(emerald|cyan|violet)-500\/(10|15|20|25)/ },
|
|
{ pattern: /bg-(emerald|cyan|violet)-500\/(10|15)/ },
|
|
{ pattern: /text-(emerald|cyan|violet)-400/ },
|
|
{ pattern: /from-(emerald|cyan|violet)-500\/(50|10)/ },
|
|
{ pattern: /to-(emerald|cyan|violet|teal)-500\/(10)/ },
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'Noto Sans SC', 'system-ui', '-apple-system', 'sans-serif'],
|
|
heading: ['Inter', 'Noto Sans SC', 'system-ui', '-apple-system', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#eef2ff',
|
|
100: '#e0e7ff',
|
|
200: '#c7d2fe',
|
|
300: '#a5b4fc',
|
|
400: '#818cf8',
|
|
500: '#6366f1',
|
|
600: '#4f46e5',
|
|
700: '#4338ca',
|
|
800: '#3730a3',
|
|
900: '#312e81',
|
|
},
|
|
/* Theme-aware page colors via CSS variables */
|
|
page: {
|
|
DEFAULT: 'rgb(var(--page-text) / <alpha-value>)',
|
|
secondary: 'rgb(var(--page-text-secondary) / <alpha-value>)',
|
|
muted: 'rgb(var(--page-text-muted) / <alpha-value>)',
|
|
label: 'rgb(var(--page-label) / <alpha-value>)',
|
|
link: 'rgb(var(--page-link) / <alpha-value>)',
|
|
success: 'rgb(var(--page-success-text) / <alpha-value>)',
|
|
warning: 'rgb(var(--page-warning-text) / <alpha-value>)',
|
|
danger: 'rgb(var(--page-danger-text) / <alpha-value>)',
|
|
info: 'rgb(var(--page-info-text) / <alpha-value>)',
|
|
},
|
|
},
|
|
animation: {
|
|
'star-movement-bottom': 'star-movement-bottom linear infinite alternate',
|
|
'star-movement-top': 'star-movement-top linear infinite alternate',
|
|
'fade-in': 'fade-in 0.5s ease-out',
|
|
'slide-up': 'slide-up 0.5s ease-out',
|
|
},
|
|
keyframes: {
|
|
'star-movement-bottom': {
|
|
'0%': { transform: 'translate(0%, 0%)', opacity: '1' },
|
|
'100%': { transform: 'translate(-100%, 0%)', opacity: '0' },
|
|
},
|
|
'star-movement-top': {
|
|
'0%': { transform: 'translate(0%, 0%)', opacity: '1' },
|
|
'100%': { transform: 'translate(100%, 0%)', opacity: '0' },
|
|
},
|
|
'fade-in': {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
'slide-up': {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|