kurihada
11d872e72a
- design-system.mdc: 暗色 token 映射表、禁止白色背景、按钮分层规则 - project-conventions.mdc: 技术栈声明、Tailwind v4 语法、组件和 API 编码规范
56 lines
3.1 KiB
Plaintext
56 lines
3.1 KiB
Plaintext
---
|
|
description: Dark theme design token system — enforces consistent color usage across all UI
|
|
globs: "**/*.tsx,**/*.css"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Design System: Dark Theme Tokens
|
|
|
|
This project uses a unified dark theme. All colors come from semantic tokens defined in `globals.css` via Tailwind v4 `@theme`.
|
|
|
|
## Token Map
|
|
|
|
| Token | Tailwind Class | Hex | Usage |
|
|
|-------|---------------|-----|-------|
|
|
| background | `bg-background` | #030712 | Page-level backgrounds |
|
|
| surface | `bg-surface` | #111827 | Cards, modals, inputs, panels |
|
|
| elevated | `bg-elevated` | #1f2937 | Hover states, secondary buttons, nested containers |
|
|
| border | `ring-border` / `bg-border` | #1f2937 | Borders, dividers |
|
|
| subtle | `ring-subtle` / `bg-subtle` | #374151 | Secondary borders, hover-next-level |
|
|
| foreground | `text-foreground` | #f3f4f6 | Primary text, input text |
|
|
| muted | `text-muted` | #6b7280 | Secondary text, labels, placeholders emphasis |
|
|
| dim | `text-dim` | #4b5563 | Tertiary text, timestamps, divider labels |
|
|
| accent | `bg-accent` | #10b981 | Primary CTA, active indicators |
|
|
| accent-hover | `bg-accent-hover` | #059669 | Accent hover state |
|
|
|
|
## Mandatory Rules
|
|
|
|
1. **NEVER use `bg-white`** for cards, modals, or page backgrounds. Use `bg-surface` or `bg-elevated`.
|
|
2. **NEVER use `text-zinc-*` or `text-gray-*` for standard text.** Use `text-foreground`, `text-muted`, or `text-dim`.
|
|
3. **NEVER use `bg-gray-950/900/800`** — use `bg-background`, `bg-surface`, `bg-elevated` respectively.
|
|
4. **NEVER use `ring-gray-*` / `border-gray-*`** — use `ring-border` or `ring-subtle`.
|
|
5. **Light-on-dark badges**: use `bg-{color}-500/10..15` + `text-{color}-400` (e.g. `bg-amber-500/10 text-amber-400`).
|
|
6. **Inputs**: `bg-surface ring-1 ring-border text-foreground placeholder:text-dim focus:ring-2 focus:ring-{accent}/50`.
|
|
|
|
## Button Color Hierarchy
|
|
|
|
Buttons follow a strict 4-tier color system:
|
|
|
|
| Tier | Color | When to use | Example |
|
|
|------|-------|-------------|---------|
|
|
| **System CTA** | `bg-accent` | Login, join room, navigate, share, save — any universal primary action | "导航过去", "登录", "加入房间" |
|
|
| **Mode Accent** | Orange gradient (Panic) / `bg-purple-600` (BlindBox) | The ONE primary CTA of each mode only | "创建新房间", "提交想法" |
|
|
| **Dramatic** | `from-red-600 to-rose-500` | Irreversible, high-ceremony actions only | "开启周末盲盒（绝不反悔）" |
|
|
| **Destructive** | `bg-rose-500` or `bg-amber-500` | Leave, kick, end session | "退出房间", "踢出" |
|
|
| **Secondary** | `bg-surface` or `bg-elevated` + `ring-1 ring-border` | Cancel, close, alternative actions | "继续滑卡", "换一批店" |
|
|
|
|
Rules:
|
|
- System-level actions ALWAYS use `bg-accent`, never mode-specific colors.
|
|
- Mode accent colors are ONLY for the core action of that mode, not for navigation or system actions within the mode.
|
|
- Never invent new CTA colors outside this hierarchy.
|
|
|
|
## Exceptions
|
|
|
|
- Image overlays and swipe overlays may use `bg-black/*` or `bg-white/*` for translucency on photos.
|
|
- Filter pills/tags in Panic mode use `bg-orange-500` for active state — these are toggles, not CTA buttons.
|