274 lines
10 KiB
TypeScript
274 lines
10 KiB
TypeScript
import type { Config } from 'tailwindcss'
|
||
|
||
const config: Config = {
|
||
content: [
|
||
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
||
'../../packages/lewooogo-ui/src/**/*.{js,ts,jsx,tsx}',
|
||
],
|
||
// 移除 darkMode - 全面採用明亮主題
|
||
theme: {
|
||
extend: {
|
||
// ==================== Nothing.tech Light Theme Colors ====================
|
||
colors: {
|
||
// 核心色彩 - 明亮主題
|
||
nothing: {
|
||
black: '#111111', // 主文字色
|
||
white: '#FFFFFF', // 純白背景
|
||
cream: '#FAFAFA', // 極淺灰背景
|
||
red: '#FF3300', // 警示橘紅 (高對比)
|
||
gray: {
|
||
50: '#FAFAFA',
|
||
100: '#F5F5F5',
|
||
200: '#E5E5E5',
|
||
300: '#D4D4D4',
|
||
400: '#A3A3A3',
|
||
500: '#737373',
|
||
600: '#525252',
|
||
700: '#404040',
|
||
800: '#333333', // 次要文字
|
||
900: '#111111', // 主要文字
|
||
},
|
||
},
|
||
status: {
|
||
healthy: '#22C55E', // 綠色 - 健康
|
||
thinking: '#8B5CF6', // 紫色 - AI 思考中
|
||
syncing: '#3B82F6', // 藍色 - 同步中
|
||
warning: '#F59E0B', // 黃色 - 警告
|
||
critical: '#FF3300', // 橘紅 - 嚴重
|
||
idle: '#A3A3A3', // 灰色 - 閒置
|
||
},
|
||
// 智慧之眼 - OpenClaw 品牌藍
|
||
claw: {
|
||
blue: '#4A90D9', // 智慧之眼核心藍
|
||
'blue-light': '#6BA3E0', // 淺藍光暈
|
||
'blue-glow': 'rgba(74, 144, 217, 0.3)', // 發光效果
|
||
},
|
||
// ==================== Anthropic Warmth (AI中心 v6) ====================
|
||
'ai-center': {
|
||
'bg-base': '#f5f4ed', // 頁面底色（米色）
|
||
'bg-surface': '#faf9f3', // 表面色（暖白）
|
||
'bg-feed': '#f0efe8', // 事件列底色
|
||
border: '#e0ddd4', // 邊框（暖灰）
|
||
'text-primary': '#141413', // 主文字
|
||
'text-secondary':'#87867f', // 次要文字
|
||
'text-muted': '#b0ad9f', // 標籤文字
|
||
accent: '#d97757', // 橘紅 Accent（active/hover/badge）
|
||
'accent-light':'rgba(217,119,87,0.08)', // active 背景
|
||
},
|
||
},
|
||
|
||
// ==================== Typography ====================
|
||
fontFamily: {
|
||
heading: ['var(--font-heading)', 'Syne', 'system-ui', 'sans-serif'],
|
||
body: ['var(--font-body)', 'DM Mono', 'monospace'],
|
||
display: ['var(--font-heading)', 'Syne', 'system-ui', 'sans-serif'],
|
||
mono: ['var(--font-mono)', 'JetBrains Mono', 'monospace'],
|
||
// DSEG7 點陣字體 - 用於核心指標數字顯示
|
||
'dot-matrix': ['DSEG7-Classic', 'var(--font-mono)', 'monospace'],
|
||
},
|
||
|
||
// Nothing.tech 文字層級系統
|
||
textColor: {
|
||
ink: '#111111',
|
||
'ink-secondary': '#525252',
|
||
// 5層文字層級
|
||
primary: '#111111', // 主標題、最重要資訊
|
||
secondary: '#333333', // 大/中標題、正文
|
||
tertiary: '#525252', // 小標題、說明文字
|
||
muted: '#737373', // 輔助標籤、時間戳
|
||
disabled: '#A3A3A3', // 停用狀態
|
||
},
|
||
|
||
fontSize: {
|
||
'display-xl': ['3.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
|
||
'display-lg': ['2.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
|
||
'display-md': ['1.75rem', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
|
||
'display-sm': ['1.25rem', { lineHeight: '1.3', letterSpacing: '0' }],
|
||
},
|
||
|
||
// ==================== Light Glassmorphism ====================
|
||
backdropBlur: {
|
||
glass: '16px',
|
||
'glass-heavy': '24px',
|
||
},
|
||
|
||
backgroundColor: {
|
||
'glass-white': 'rgba(255, 255, 255, 0.70)',
|
||
'glass-light': 'rgba(250, 250, 250, 0.80)',
|
||
},
|
||
|
||
borderColor: {
|
||
'glass-border': 'rgba(0, 0, 0, 0.08)',
|
||
'glass-border-hover': 'rgba(0, 0, 0, 0.15)',
|
||
},
|
||
|
||
// ==================== Animations ====================
|
||
// Phase 19.A: Terminal Animation System
|
||
// @see lib/constants/animations.ts
|
||
animation: {
|
||
'breathe': 'breathe 2s ease-in-out infinite',
|
||
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||
'pulse-3s': 'pulse3s 0.5s ease-in-out 6', // 6 iterations x 0.5s = 3s total
|
||
'fade-in': 'fadeIn 200ms ease-out',
|
||
'slide-in-right': 'slideInRight 300ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||
'slide-in-up': 'slideInUp 300ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||
'scan': 'scan 2s linear infinite',
|
||
// Magic UI Effects
|
||
'border-beam': 'border-beam var(--duration, 6s) linear infinite',
|
||
'ripple': 'ripple 600ms linear',
|
||
'shimmer': 'shimmer 2s linear infinite',
|
||
// Phase 19: Terminal Animations
|
||
'terminal-open': 'terminal-open 250ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||
'terminal-close': 'terminal-close 200ms ease-out',
|
||
'typing-cursor': 'typing-cursor 530ms ease-in-out infinite',
|
||
'thinking-dot': 'thinking-dot 1200ms ease-in-out infinite',
|
||
'message-slide-in': 'message-slide-in 200ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||
'stream-char': 'stream-char 100ms ease-out',
|
||
},
|
||
|
||
keyframes: {
|
||
breathe: {
|
||
'0%, 100%': { opacity: '0.5' },
|
||
'50%': { opacity: '1' },
|
||
},
|
||
// Timeline 最新項目閃爍 (3秒後停止)
|
||
pulse3s: {
|
||
'0%, 100%': { opacity: '1', backgroundColor: 'transparent' },
|
||
'50%': { opacity: '0.7', backgroundColor: 'rgba(139, 92, 246, 0.05)' },
|
||
},
|
||
fadeIn: {
|
||
'0%': { opacity: '0' },
|
||
'100%': { opacity: '1' },
|
||
},
|
||
slideInRight: {
|
||
'0%': { transform: 'translateX(100%)', opacity: '0' },
|
||
'100%': { transform: 'translateX(0)', opacity: '1' },
|
||
},
|
||
slideInUp: {
|
||
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||
},
|
||
scan: {
|
||
'0%': { transform: 'translateX(-100%)' },
|
||
'100%': { transform: 'translateX(100%)' },
|
||
},
|
||
// Magic UI Border Beam
|
||
'border-beam': {
|
||
'0%': { '--start': '0' },
|
||
'100%': { '--start': '1' },
|
||
},
|
||
// Ripple effect for button clicks
|
||
ripple: {
|
||
'0%': { transform: 'scale(0)', opacity: '0.5' },
|
||
'100%': { transform: 'scale(4)', opacity: '0' },
|
||
},
|
||
// Shimmer effect
|
||
shimmer: {
|
||
'0%': { backgroundPosition: '-200% 0' },
|
||
'100%': { backgroundPosition: '200% 0' },
|
||
},
|
||
// Phase 19: Terminal Keyframes
|
||
'terminal-open': {
|
||
'0%': { opacity: '0', transform: 'translateY(20px) scale(0.98)' },
|
||
'100%': { opacity: '1', transform: 'translateY(0) scale(1)' },
|
||
},
|
||
'terminal-close': {
|
||
'0%': { opacity: '1', transform: 'translateY(0) scale(1)' },
|
||
'100%': { opacity: '0', transform: 'translateY(20px) scale(0.98)' },
|
||
},
|
||
'typing-cursor': {
|
||
'0%, 100%': { opacity: '1' },
|
||
'50%': { opacity: '0' },
|
||
},
|
||
'thinking-dot': {
|
||
'0%, 80%, 100%': { opacity: '0.3', transform: 'scale(0.8)' },
|
||
'40%': { opacity: '1', transform: 'scale(1)' },
|
||
},
|
||
'message-slide-in': {
|
||
'0%': { opacity: '0', transform: 'translateX(-10px)' },
|
||
'100%': { opacity: '1', transform: 'translateX(0)' },
|
||
},
|
||
'stream-char': {
|
||
'0%': { opacity: '0', transform: 'translateY(2px)' },
|
||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||
},
|
||
},
|
||
|
||
// ==================== Spacing & Layout ====================
|
||
borderRadius: {
|
||
'wooo-xs': 'var(--wooo-radius-xs)',
|
||
'wooo-sm': 'var(--wooo-radius-sm)',
|
||
'glass': 'var(--wooo-radius-panel)',
|
||
'card': 'var(--wooo-radius-card)',
|
||
'button': 'var(--wooo-radius-control)',
|
||
'pill': 'var(--wooo-radius-pill)',
|
||
},
|
||
|
||
boxShadow: {
|
||
'glass': 'var(--wooo-shadow-panel)',
|
||
'glass-hover': '0 8px 32px rgba(0, 0, 0, 0.10)',
|
||
'card': 'var(--wooo-shadow-card)',
|
||
'card-hover': '0 4px 20px rgba(0, 0, 0, 0.08)',
|
||
'glow-red': '0 0 16px rgba(255, 51, 0, 0.3)',
|
||
'glow-green': '0 0 16px rgba(34, 197, 94, 0.3)',
|
||
'glow-blue': '0 0 16px rgba(59, 130, 246, 0.3)',
|
||
'glow-purple': '0 0 16px rgba(139, 92, 246, 0.3)',
|
||
},
|
||
|
||
// ==================== Z-Index Scale ====================
|
||
// Phase 19: 已遷移至 lib/constants/z-index.ts
|
||
// 使用 inline style={{ zIndex: Z_INDEX.XXX }} 取代 Tailwind classes
|
||
// @see lib/constants/z-index.ts
|
||
},
|
||
},
|
||
plugins: [
|
||
// Custom plugin for light glass effect
|
||
function ({ addUtilities }: { addUtilities: Function }) {
|
||
addUtilities({
|
||
// 白色磨砂玻璃 (主要卡片)
|
||
'.glass-card': {
|
||
background: 'rgba(255, 255, 255, 0.70)',
|
||
backdropFilter: 'blur(16px)',
|
||
'-webkit-backdrop-filter': 'blur(16px)',
|
||
border: '1px solid rgba(0, 0, 0, 0.08)',
|
||
borderRadius: 'var(--wooo-radius-panel)',
|
||
boxShadow: 'var(--wooo-shadow-panel)',
|
||
},
|
||
'.glass-card-hover': {
|
||
background: 'rgba(255, 255, 255, 0.80)',
|
||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.10)',
|
||
borderColor: 'rgba(0, 0, 0, 0.12)',
|
||
},
|
||
// 頂部導航列
|
||
'.glass-header': {
|
||
background: 'rgba(255, 255, 255, 0.85)',
|
||
backdropFilter: 'blur(20px)',
|
||
'-webkit-backdrop-filter': 'blur(20px)',
|
||
borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
|
||
},
|
||
// Copilot 面板
|
||
'.glass-copilot': {
|
||
background: 'rgba(250, 250, 250, 0.90)',
|
||
backdropFilter: 'blur(20px)',
|
||
'-webkit-backdrop-filter': 'blur(20px)',
|
||
border: '1px solid rgba(139, 92, 246, 0.2)',
|
||
borderRadius: 'var(--wooo-radius-panel)',
|
||
boxShadow: '0 4px 24px rgba(139, 92, 246, 0.1)',
|
||
},
|
||
// AI 思考指示器
|
||
'.ai-indicator': {
|
||
animation: 'breathe 2s ease-in-out infinite',
|
||
},
|
||
// 狀態指示點
|
||
'.status-dot': {
|
||
width: '8px',
|
||
height: '8px',
|
||
borderRadius: '50%',
|
||
},
|
||
})
|
||
},
|
||
],
|
||
}
|
||
|
||
export default config
|