feat(v3): VSCode-style prompt redesign + theme-aware CSS migration
This commit is contained in:
parent
319c92fc68
commit
be4df01302
6 changed files with 489 additions and 327 deletions
17
.claude/rules/51-theme-integration.md
Normal file
17
.claude/rules/51-theme-integration.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
# Theme Integration (CSS)
|
||||
|
||||
All UI components MUST use the project's CSS custom properties for colors. Never hardcode color values.
|
||||
|
||||
## Rules
|
||||
|
||||
- **Backgrounds**: Use `var(--ctp-base)`, `var(--ctp-mantle)`, `var(--ctp-crust)`, `var(--ctp-surface0)`, `var(--ctp-surface1)`, `var(--ctp-surface2)`.
|
||||
- **Text**: Use `var(--ctp-text)`, `var(--ctp-subtext0)`, `var(--ctp-subtext1)`.
|
||||
- **Muted/overlay text**: Use `var(--ctp-overlay0)`, `var(--ctp-overlay1)`, `var(--ctp-overlay2)`.
|
||||
- **Accents**: Use `var(--ctp-blue)`, `var(--ctp-green)`, `var(--ctp-mauve)`, `var(--ctp-peach)`, `var(--ctp-pink)`, `var(--ctp-red)`, `var(--ctp-yellow)`, `var(--ctp-teal)`, `var(--ctp-sapphire)`, `var(--ctp-lavender)`, `var(--ctp-flamingo)`, `var(--ctp-rosewater)`, `var(--ctp-maroon)`, `var(--ctp-sky)`.
|
||||
- **Per-project accent**: Use `var(--accent)` which is set per ProjectBox slot.
|
||||
- **Borders**: Use `var(--ctp-surface0)` or `var(--ctp-surface1)`.
|
||||
- Never use raw hex/rgb/hsl color values in component CSS. All colors must go through `--ctp-*` variables.
|
||||
- Hover states: typically lighten by stepping up one surface level (e.g., surface0 -> surface1) or change text from subtext0 to text.
|
||||
- Active/selected states: use `var(--accent)` or a specific accent color with `var(--ctp-base)` background distinction.
|
||||
- Disabled states: reduce opacity (0.4-0.5) rather than introducing gray colors.
|
||||
- Use `color-mix()` for semi-transparent overlays: `color-mix(in srgb, var(--ctp-blue) 10%, transparent)`.
|
||||
Loading…
Add table
Add a link
Reference in a new issue