3672e92b7e
Tauri + Svelte 5 + Rust application for orchestrating multiple AI coding agents. Includes Claude, Aider, Codex, and Ollama provider support, multi-agent communication (btmsg/bttask), session anchors, plugin sandbox, FTS5 search, Landlock sandboxing, and 507 vitest + 110 cargo tests.
17 lines
1.4 KiB
Markdown
17 lines
1.4 KiB
Markdown
# 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)`.
|