diff --git a/apps/app/src/lib/themes/catppuccin.ts b/apps/app/src/lib/themes/catppuccin.ts new file mode 100644 index 000000000..3de0a8596 --- /dev/null +++ b/apps/app/src/lib/themes/catppuccin.ts @@ -0,0 +1,101 @@ +/** + * Catppuccin palette (https://catppuccin.com). Light = Latte, dark = Mocha, + * accent = Mauve. Overrides only the two anchors (--canvas/--ink), the accent, + * the secondary text tiers, the semantic colors, and the ANSI palette — every + * neutral surface (cards, borders, sidebar, hover, selection, ring) derives + * from the anchors and accent in theme.css, so it follows automatically. + * Unlike Nord, Latte and Mocha have *different* terminal colors, so the + * --ansi-* (and --ansi-bg-fg-*) blocks live in BOTH selectors, not just light. + */ +export const catppuccinThemeCss = ` +:root, .light { + /* Anchors: Base / Text */ + --canvas: #eff1f5; + --ink: #4c4f69; + + /* Accent: Mauve */ + --primary: #8839ef; + --primary-foreground: #eff1f5; + --file-accent: #1e66f5; /* Blue — the one path tint */ + + /* Text tiers: Subtext1 / Subtext0 / Overlay1 */ + --muted-foreground: #5c5f77; + --readback-foreground: #6c6f85; + --subtle-foreground: #8c8fa1; + + /* Semantic — Red / Yellow / Peach / Green / Mauve(merged) */ + --destructive: #d20f39; + --destructive-foreground: #eff1f5; + --destructive-text: #d20f39; + --warning: #df8e1d; + --warning-text: #b8730a; + --attention: #fe640b; + --success: #40a02b; + --diff-added: #40a02b; + --diff-removed: #d20f39; + --pr-merged: #8839ef; + + /* Terminal — official Catppuccin Latte ANSI */ + --ansi-0: #5c5f77; --ansi-bg-fg-0: #eff1f5; + --ansi-1: #d20f39; --ansi-bg-fg-1: #eff1f5; + --ansi-2: #40a02b; --ansi-bg-fg-2: #eff1f5; + --ansi-3: #df8e1d; --ansi-bg-fg-3: #11111b; + --ansi-4: #1e66f5; --ansi-bg-fg-4: #eff1f5; + --ansi-5: #ea76cb; --ansi-bg-fg-5: #11111b; + --ansi-6: #179299; --ansi-bg-fg-6: #eff1f5; + --ansi-7: #acb0be; --ansi-bg-fg-7: #11111b; + --ansi-8: #6c6f85; --ansi-bg-fg-8: #eff1f5; + --ansi-9: #d20f39; --ansi-bg-fg-9: #eff1f5; + --ansi-10: #40a02b; --ansi-bg-fg-10: #eff1f5; + --ansi-11: #df8e1d; --ansi-bg-fg-11: #11111b; + --ansi-12: #1e66f5; --ansi-bg-fg-12: #eff1f5; + --ansi-13: #ea76cb; --ansi-bg-fg-13: #11111b; + --ansi-14: #179299; --ansi-bg-fg-14: #eff1f5; + --ansi-15: #bcc0cc; --ansi-bg-fg-15: #11111b; +} +.dark { + /* Anchors: Base / Text */ + --canvas: #1e1e2e; + --ink: #cdd6f4; + + /* Accent: Mauve */ + --primary: #cba6f7; + --primary-foreground: #1e1e2e; + --file-accent: #89b4fa; /* Blue */ + + /* Text tiers: Subtext1 / Subtext0 / Overlay1 */ + --muted-foreground: #bac2de; + --readback-foreground: #a6adc8; + --subtle-foreground: #7f849c; + + /* Semantic — lighter pastels so they read on the dark base */ + --destructive: #f38ba8; + --destructive-foreground: #1e1e2e; + --destructive-text: #f38ba8; + --warning: #f9e2af; + --warning-text: #f9e2af; + --attention: #fab387; + --success: #a6e3a1; + --diff-added: #a6e3a1; + --diff-removed: #f38ba8; + --pr-merged: #cba6f7; + + /* Terminal — official Catppuccin Mocha ANSI */ + --ansi-0: #45475a; --ansi-bg-fg-0: #cdd6f4; + --ansi-1: #f38ba8; --ansi-bg-fg-1: #11111b; + --ansi-2: #a6e3a1; --ansi-bg-fg-2: #11111b; + --ansi-3: #f9e2af; --ansi-bg-fg-3: #11111b; + --ansi-4: #89b4fa; --ansi-bg-fg-4: #11111b; + --ansi-5: #f5c2e7; --ansi-bg-fg-5: #11111b; + --ansi-6: #94e2d5; --ansi-bg-fg-6: #11111b; + --ansi-7: #bac2de; --ansi-bg-fg-7: #11111b; + --ansi-8: #585b70; --ansi-bg-fg-8: #cdd6f4; + --ansi-9: #f38ba8; --ansi-bg-fg-9: #11111b; + --ansi-10: #a6e3a1; --ansi-bg-fg-10: #11111b; + --ansi-11: #f9e2af; --ansi-bg-fg-11: #11111b; + --ansi-12: #89b4fa; --ansi-bg-fg-12: #11111b; + --ansi-13: #f5c2e7; --ansi-bg-fg-13: #11111b; + --ansi-14: #94e2d5; --ansi-bg-fg-14: #11111b; + --ansi-15: #a6adc8; --ansi-bg-fg-15: #11111b; +} +`; diff --git a/apps/app/src/lib/themes/index.ts b/apps/app/src/lib/themes/index.ts index e1afdfccc..ee3c55903 100644 --- a/apps/app/src/lib/themes/index.ts +++ b/apps/app/src/lib/themes/index.ts @@ -1,4 +1,5 @@ import type { AppTheme, AppThemeId } from "@bb/domain"; +import { catppuccinThemeCss } from "./catppuccin"; import { draculaThemeCss } from "./dracula"; import { gruvboxThemeCss } from "./gruvbox"; import { nordThemeCss } from "./nord"; @@ -18,6 +19,7 @@ const builtInThemeCss: Record, string> = { dracula: draculaThemeCss, solarized: solarizedThemeCss, gruvbox: gruvboxThemeCss, + catppuccin: catppuccinThemeCss, }; export function resolveAppThemeCss(appearance: AppTheme): string { diff --git a/apps/server/src/services/skills/builtin-skills/bb-cli/SKILL.md b/apps/server/src/services/skills/builtin-skills/bb-cli/SKILL.md index 13d440d35..e24828c92 100644 --- a/apps/server/src/services/skills/builtin-skills/bb-cli/SKILL.md +++ b/apps/server/src/services/skills/builtin-skills/bb-cli/SKILL.md @@ -148,7 +148,7 @@ For review or fix pipelines, get the environment ID from - Commands: - `bb theme list` — built-in themes and which palette is active. - `bb theme set ` — switch to a built-in: `default`, `nord`, `dracula`, - `solarized`, `gruvbox`. + `solarized`, `gruvbox`, `catppuccin`. - `bb theme set-custom --file ` — load a custom stylesheet and activate it. This is the only way to set custom CSS (Settings only switches between built-ins). diff --git a/apps/server/src/services/skills/builtin-skills/bb-cli/references/theming.md b/apps/server/src/services/skills/builtin-skills/bb-cli/references/theming.md index 4ed7aff20..0b9c9733f 100644 --- a/apps/server/src/services/skills/builtin-skills/bb-cli/references/theming.md +++ b/apps/server/src/services/skills/builtin-skills/bb-cli/references/theming.md @@ -230,7 +230,7 @@ and semantics: - `bb theme set-custom --file ./my-theme.css` — load and activate a custom stylesheet (the only way to set custom CSS). - `bb theme set ` — switch to a built-in (`default`, `nord`, `dracula`, - `solarized`, `gruvbox`). + `solarized`, `gruvbox`, `catppuccin`). - `bb theme show --css` — dump the active custom CSS; `bb theme list` shows the active palette; `bb theme reset` returns to `default`. diff --git a/packages/domain/src/app-theme.ts b/packages/domain/src/app-theme.ts index 4c28d4464..a4df63a85 100644 --- a/packages/domain/src/app-theme.ts +++ b/packages/domain/src/app-theme.ts @@ -15,6 +15,7 @@ export const appThemeIdSchema = z.enum([ "dracula", "solarized", "gruvbox", + "catppuccin", "custom", ]); export type AppThemeId = z.infer; @@ -44,6 +45,11 @@ export const builtInThemes: readonly BuiltInThemeMeta[] = [ description: "Balanced light and dark (Schoonover palette)", }, { id: "gruvbox", name: "Gruvbox", description: "Warm retro earth tones" }, + { + id: "catppuccin", + name: "Catppuccin", + description: "Soothing pastel — Latte light, Mocha dark", + }, ]; /** Built-in palette ids (everything except "custom"). */