@tinkcarlos/skillora 0.2.0

package/.claude/skills/frontend-design/references/color-consistency.md

@@ -0,0 +1,487 @@
+# Color Consistency Guide
+
+配色统一高级的完整指南，确保 Light/Dark Mode 都有良好的视觉效果。
+
+---
+
+## 🔴 配色问题快速诊断
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  配色诊断流程                                                     │
+├─────────────────────────────────────────────────────────────────┤
+│  对比度不足? → 检查 4.5:1 (正文) / 3:1 (大标题)                 │
+│  颜色不统一? → 检查 CSS 变量 / Tailwind 类                       │
+│  Light/Dark 不协调? → 检查两种模式的颜色映射                     │
+│  玻璃效果不可见? → Light 用 bg-white/80, Dark 用 bg-gray-900/80 │
+│  边框不可见? → 检查两种模式的边框颜色                            │
+│  状态颜色混乱? → 检查语义化颜色系统                              │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 🔴 核心原则
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  配色一致性黄金法则                                          │
+├─────────────────────────────────────────────────────────────┤
+│  ✅ 使用 CSS 变量定义所有颜色                                │
+│  ✅ 遵循 60-30-10 配色法则                                   │
+│  ✅ 确保 4.5:1 最小对比度 (WCAG AA)                          │
+│  ✅ Light/Dark Mode 都要测试                                 │
+│  ❌ 禁止硬编码颜色值                                         │
+│  ❌ 禁止仅依赖颜色传达信息                                   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 60-30-10 配色法则
+
+| 比例 | 用途 | 示例 |
+|------|------|------|
+| **60%** | 主背景色 | 页面背景、卡片背景 |
+| **30%** | 次要色 | 导航、侧边栏、区块背景 |
+| **10%** | 强调色 | CTA按钮、链接、高亮 |
+
+```css
+:root {
+  /* 60% - 主背景 */
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #F8FAFC;
+
+  /* 30% - 次要色 */
+  --color-surface: #F1F5F9;
+  --color-border: #E2E8F0;
+
+  /* 10% - 强调色 */
+  --color-accent: #6366F1;
+  --color-accent-hover: #4F46E5;
+}
+```
+
+---
+
+## Light Mode 配色规范
+
+### 文字颜色层级
+
+| 层级 | Tailwind | Hex | 用途 |
+|------|----------|-----|------|
+| **Primary** | `text-slate-900` | #0F172A | 标题、正文 |
+| **Secondary** | `text-slate-700` | #334155 | 次要文字 |
+| **Muted** | `text-slate-600` | #475569 | 辅助说明 |
+| **Disabled** | `text-slate-400` | #94A3B8 | 禁用状态 |
+| **Placeholder** | `text-slate-400` | #94A3B8 | 占位符 |
+
+```html
+<!-- ✅ 正确的文字层级 -->
+<h1 class="text-slate-900">Main Title</h1>
+<p class="text-slate-700">Body text content...</p>
+<span class="text-slate-600">Helper text</span>
+<span class="text-slate-400">Disabled text</span>
+```
+
+### 背景颜色层级
+
+| 层级 | Tailwind | Hex | 用途 |
+|------|----------|-----|------|
+| **Page** | `bg-white` | #FFFFFF | 页面背景 |
+| **Surface** | `bg-slate-50` | #F8FAFC | 卡片背景 |
+| **Elevated** | `bg-slate-100` | #F1F5F9 | 悬浮元素 |
+| **Hover** | `bg-slate-200` | #E2E8F0 | 悬停状态 |
+
+### 边框颜色
+
+| 状态 | Tailwind | 用途 |
+|------|----------|------|
+| **Default** | `border-slate-200` | 默认边框 |
+| **Hover** | `border-slate-300` | 悬停边框 |
+| **Focus** | `border-indigo-500` | 焦点边框 |
+| **Error** | `border-red-500` | 错误边框 |
+
+### 玻璃效果 (Glassmorphism)
+
+```css
+/* ❌ 错误: Light Mode 下太透明 */
+.glass-card {
+  background: rgba(255, 255, 255, 0.1); /* 看不见 */
+}
+
+/* ✅ 正确: Light Mode 下可见 */
+.glass-card {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+```
+
+**Tailwind CSS:**
+```html
+<!-- Light Mode 玻璃效果 -->
+<div class="bg-white/80 backdrop-blur-xl border border-white/30 shadow-lg">
+  ...
+</div>
+```
+
+---
+
+## Dark Mode 配色规范
+
+### 文字颜色层级
+
+| 层级 | Tailwind | Hex | 用途 |
+|------|----------|-----|------|
+| **Primary** | `dark:text-white` | #FFFFFF | 标题 |
+| **Secondary** | `dark:text-gray-100` | #F3F4F6 | 正文 |
+| **Muted** | `dark:text-gray-400` | #9CA3AF | 辅助说明 |
+| **Disabled** | `dark:text-gray-500` | #6B7280 | 禁用状态 |
+
+### 背景颜色层级
+
+| 层级 | Tailwind | Hex | 用途 |
+|------|----------|-----|------|
+| **Page** | `dark:bg-gray-950` | #030712 | 页面背景 |
+| **Surface** | `dark:bg-gray-900` | #111827 | 卡片背景 |
+| **Elevated** | `dark:bg-gray-800` | #1F2937 | 悬浮元素 |
+| **Hover** | `dark:bg-gray-700` | #374151 | 悬停状态 |
+
+### 边框颜色
+
+| 状态 | Tailwind |
+|------|----------|
+| **Default** | `dark:border-gray-700` |
+| **Hover** | `dark:border-gray-600` |
+| **Focus** | `dark:border-indigo-400` |
+
+### 玻璃效果 (Dark Mode)
+
+```html
+<!-- Dark Mode 玻璃效果 -->
+<div class="dark:bg-gray-900/80 dark:backdrop-blur-xl dark:border-gray-700/50">
+  ...
+</div>
+```
+
+---
+
+## 完整的 Light/Dark 切换示例
+
+```html
+<!-- 卡片组件 -->
+<div class="
+  bg-white dark:bg-gray-900
+  border border-slate-200 dark:border-gray-700
+  shadow-sm dark:shadow-gray-900/50
+  rounded-xl p-6
+">
+  <h3 class="text-slate-900 dark:text-white font-semibold">
+    Card Title
+  </h3>
+  <p class="text-slate-600 dark:text-gray-400 mt-2">
+    Card description text...
+  </p>
+  <button class="
+    mt-4 px-4 py-2 rounded-lg
+    bg-indigo-600 hover:bg-indigo-700
+    dark:bg-indigo-500 dark:hover:bg-indigo-600
+    text-white font-medium
+    transition-colors duration-200
+  ">
+    Action
+  </button>
+</div>
+```
+
+---
+
+## 对比度检查
+
+### WCAG 标准
+
+| 级别 | 正文文字 | 大文字 (18pt+) |
+|------|----------|----------------|
+| **AA** | 4.5:1 | 3:1 |
+| **AAA** | 7:1 | 4.5:1 |
+
+### 常见对比度问题
+
+```css
+/* ❌ 错误: 对比度不足 */
+.light-mode {
+  background: #FFFFFF;
+  color: #94A3B8; /* slate-400, 对比度 ~2.5:1 */
+}
+
+/* ✅ 正确: 对比度充足 */
+.light-mode {
+  background: #FFFFFF;
+  color: #475569; /* slate-600, 对比度 ~5.5:1 */
+}
+```
+
+### 对比度检查工具
+
+```bash
+# Chrome DevTools
+# Elements > Styles > 点击颜色值 > 查看 Contrast ratio
+
+# 在线工具
+# https://webaim.org/resources/contrastchecker/
+# https://coolors.co/contrast-checker
+```
+
+---
+
+## 语义化颜色系统
+
+```css
+:root {
+  /* 状态颜色 */
+  --color-success: #10B981; /* green-500 */
+  --color-warning: #F59E0B; /* amber-500 */
+  --color-error: #EF4444;   /* red-500 */
+  --color-info: #3B82F6;    /* blue-500 */
+
+  /* 交互颜色 */
+  --color-link: #6366F1;    /* indigo-500 */
+  --color-link-hover: #4F46E5;
+  --color-focus-ring: #6366F1;
+}
+```
+
+**Tailwind 语义化类:**
+```html
+<!-- 状态颜色 -->
+<div class="text-green-600 bg-green-50">Success</div>
+<div class="text-amber-600 bg-amber-50">Warning</div>
+<div class="text-red-600 bg-red-50">Error</div>
+<div class="text-blue-600 bg-blue-50">Info</div>
+```
+
+---
+
+## 品牌色应用
+
+### 主色调变体
+
+```css
+:root {
+  --brand-50: #EEF2FF;
+  --brand-100: #E0E7FF;
+  --brand-200: #C7D2FE;
+  --brand-300: #A5B4FC;
+  --brand-400: #818CF8;
+  --brand-500: #6366F1; /* 主色 */
+  --brand-600: #4F46E5;
+  --brand-700: #4338CA;
+  --brand-800: #3730A3;
+  --brand-900: #312E81;
+}
+```
+
+### 使用场景
+
+| 变体 | 用途 |
+|------|------|
+| **50-100** | 背景色、hover 状态 |
+| **200-300** | 边框、分隔线 |
+| **400-500** | 图标、次要按钮 |
+| **500-600** | 主按钮、链接 |
+| **700-900** | 深色文字、深色背景 |
+
+---
+
+## 配色检查清单
+
+### 交付前必查
+
+- [ ] 所有颜色使用 CSS 变量或 Tailwind 类
+- [ ] 正文文字对比度 ≥ 4.5:1
+- [ ] 大标题对比度 ≥ 3:1
+- [ ] Light Mode 测试通过
+- [ ] Dark Mode 测试通过
+- [ ] 玻璃效果在两种模式下都可见
+- [ ] 边框在两种模式下都可见
+- [ ] 禁用状态有明显区分
+- [ ] 错误/成功状态颜色正确
+- [ ] 不仅依赖颜色传达信息 (配合图标)
+
+### 常见错误
+
+| 错误 | 正确做法 |
+|------|----------|
+| `text-gray-400` 作为正文 | 使用 `text-gray-600` 或更深 |
+| `bg-white/10` 玻璃效果 | Light Mode 用 `bg-white/80` |
+| `border-white/10` 边框 | Light Mode 用 `border-gray-200` |
+| 硬编码 `#6366F1` | 使用 `bg-indigo-500` 或 CSS 变量 |
+| 仅用红色表示错误 | 红色 + 错误图标 + 文字说明 |
+
+---
+
+## 🔴 完整配色系统模板
+
+### CSS 变量模板 (Light + Dark)
+
+```css
+:root {
+  /* ===== 60-30-10 配色 ===== */
+  /* 60% - 主背景 */
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #F8FAFC;
+
+  /* 30% - 次要色 */
+  --color-surface: #F1F5F9;
+  --color-surface-hover: #E2E8F0;
+
+  /* 10% - 强调色 */
+  --color-accent: #6366F1;
+  --color-accent-hover: #4F46E5;
+  --color-accent-active: #4338CA;
+
+  /* ===== 文字颜色 ===== */
+  --color-text-primary: #0F172A;    /* 标题、正文 */
+  --color-text-secondary: #334155;  /* 次要文字 */
+  --color-text-muted: #64748B;      /* 辅助说明 */
+  --color-text-disabled: #94A3B8;   /* 禁用状态 */
+
+  /* ===== 边框颜色 ===== */
+  --color-border: #E2E8F0;
+  --color-border-hover: #CBD5E1;
+  --color-border-focus: #6366F1;
+
+  /* ===== 状态颜色 ===== */
+  --color-success: #22C55E;
+  --color-success-bg: #F0FDF4;
+  --color-warning: #F59E0B;
+  --color-warning-bg: #FFFBEB;
+  --color-error: #EF4444;
+  --color-error-bg: #FEF2F2;
+  --color-info: #3B82F6;
+  --color-info-bg: #EFF6FF;
+}
+
+/* Dark Mode */
+[data-theme="dark"], .dark {
+  --color-bg-primary: #0F172A;
+  --color-bg-secondary: #1E293B;
+
+  --color-surface: #334155;
+  --color-surface-hover: #475569;
+
+  --color-text-primary: #F8FAFC;
+  --color-text-secondary: #E2E8F0;
+  --color-text-muted: #94A3B8;
+  --color-text-disabled: #64748B;
+
+  --color-border: #334155;
+  --color-border-hover: #475569;
+
+  --color-success-bg: #052E16;
+  --color-warning-bg: #451A03;
+  --color-error-bg: #450A0A;
+  --color-info-bg: #172554;
+}
+```
+
+### Tailwind CSS 配色模板
+
+```html
+<!-- 卡片组件 (Light + Dark) -->
+<div class="
+  bg-white dark:bg-slate-900
+  border border-slate-200 dark:border-slate-700
+  shadow-sm dark:shadow-slate-900/50
+  rounded-xl p-6
+">
+  <h3 class="text-slate-900 dark:text-white font-semibold">
+    标题
+  </h3>
+  <p class="text-slate-600 dark:text-slate-400 mt-2">
+    正文内容
+  </p>
+  <span class="text-slate-500 dark:text-slate-500 text-sm">
+    辅助文字
+  </span>
+</div>
+
+<!-- 按钮组件 -->
+<button class="
+  bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800
+  dark:bg-indigo-500 dark:hover:bg-indigo-600
+  text-white font-medium
+  px-4 py-2 rounded-lg
+  transition-colors duration-200
+  focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2
+">
+  按钮
+</button>
+
+<!-- 输入框组件 -->
+<input class="
+  w-full px-4 py-2 rounded-lg
+  bg-white dark:bg-slate-800
+  border border-slate-300 dark:border-slate-600
+  text-slate-900 dark:text-white
+  placeholder:text-slate-400 dark:placeholder:text-slate-500
+  focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20
+  transition-colors duration-200
+" placeholder="输入内容...">
+
+<!-- 玻璃效果 (Light + Dark) -->
+<div class="
+  bg-white/80 dark:bg-slate-900/80
+  backdrop-blur-xl
+  border border-white/20 dark:border-slate-700/50
+  shadow-lg
+  rounded-2xl p-6
+">
+  玻璃效果卡片
+</div>
+
+<!-- 状态颜色 -->
+<div class="text-green-600 bg-green-50 dark:text-green-400 dark:bg-green-900/20 p-3 rounded-lg">
+  ✓ 成功状态
+</div>
+<div class="text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-900/20 p-3 rounded-lg">
+  ✕ 错误状态
+</div>
+<div class="text-amber-600 bg-amber-50 dark:text-amber-400 dark:bg-amber-900/20 p-3 rounded-lg">
+  ⚠ 警告状态
+</div>
+<div class="text-blue-600 bg-blue-50 dark:text-blue-400 dark:bg-blue-900/20 p-3 rounded-lg">
+  ℹ 信息状态
+</div>
+```
+
+---
+
+## 🔴 行业配色速查
+
+| 行业 | 主色 | 次要色 | 强调色 | 禁止色 |
+|------|------|--------|--------|--------|
+| **SaaS/Tech** | Indigo #6366F1 | Purple #8B5CF6 | Amber #F59E0B | - |
+| **Healthcare** | Sky #0EA5E9 | Teal #14B8A6 | Orange #F97316 | Red |
+| **Finance** | Navy #1E3A5F | Emerald #059669 | Gold #EAB308 | Neon |
+| **E-commerce** | Red #DC2626 | Black #000000 | Yellow #FBBF24 | - |
+| **Beauty/Spa** | Pink #E8B4B8 | Sage #A8D5BA | Gold #D4AF37 | Neon |
+| **Food** | Orange #F97316 | Brown #92400E | Green #22C55E | Blue |
+| **Gaming** | Purple #7C3AED | Cyan #06B6D4 | Green #22C55E | Pastel |
+
+---
+
+## 🔴 对比度速查表
+
+| 背景色 | 最浅可用文字 | 对比度 |
+|--------|--------------|--------|
+| `#FFFFFF` (白) | `#525252` (gray-600) | 4.6:1 ✓ |
+| `#F8FAFC` (slate-50) | `#525252` (gray-600) | 4.5:1 ✓ |
+| `#0F172A` (slate-900) | `#94A3B8` (slate-400) | 4.5:1 ✓ |
+| `#1E293B` (slate-800) | `#94A3B8` (slate-400) | 4.0:1 ⚠ |
+
+**规则**:
+- 白色背景: 文字至少用 `gray-600` / `slate-600`
+- 深色背景: 文字至少用 `gray-300` / `slate-300`
+