Merge pull request #389 from kntng/feat/catppuccin

Add modern Catppuccin themes

lib/styles/themes.js

@@ -17,6 +17,10 @@ import * as Sylens from "./themes/sylens";
 import * as SpaceDuck from "./themes/spaceduck";
 import * as MidsummerNightDark from "./themes/midsummer-night-dark";
 import * as Catppuccin from "./themes/catppuccin";
+import * as CatppuccinLatte from "./themes/catppuccin-latte.js";
+import * as CatppuccinFrappe from "./themes/catppuccin-frappe.js";
+import * as CatppuccinMacchiato from "./themes/catppuccin-macchiato.js";
+import * as CatppuccinMocha from "./themes/catppuccin-mocha.js";
 import * as TokyoNight from "./themes/tokyo-night";
 import * as MaterialOcean from "./themes/material-ocean";
 import * as NightOwl from "./themes/night-owl";
@@ -47,6 +51,10 @@ export const collection = {
   SpaceDuck: SpaceDuck.theme,
   MidsummerNightDark: MidsummerNightDark.theme,
   Catppuccin: Catppuccin.theme,
+  CatppuccinLatte: CatppuccinLatte.theme,
+  CatppuccinFrappe: CatppuccinFrappe.theme,
+  CatppuccinMacchiato: CatppuccinMacchiato.theme,
+  CatppuccinMocha: CatppuccinMocha.theme,
   TokyoNight: TokyoNight.theme,
   MaterialOcean: MaterialOcean.theme,
   NightOwl: NightOwl.theme,

lib/styles/themes/catppuccin-frappe.js

@@ -0,0 +1,31 @@
+export const theme = {
+  name: "Catppuccin Frappe",
+  kind: "dark",
+  main: "#303446",        // Base
+  mainAlt: "#292c3c",     // Mantle
+  minor: "#232634",       // Crust
+  red: "#e78284",         // Red
+  green: "#a6d189",       // Green
+  yellow: "#e5c890",      // Yellow
+  orange: "#ef9f76",      // Peach
+  blue: "#8caaee",        // Blue
+  magenta: "#ca9ee6",     // Mauve
+  cyan: "#99d1db",        // Sky
+  black: "#303446",       // Base
+  white: "#c6d0f5",       // Text
+  foreground: "#c6d0f5",  // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};

lib/styles/themes/catppuccin-latte.js

@@ -0,0 +1,31 @@
+export const theme = {
+  name: "Catppuccin Latte",
+  kind: "light",
+  main: "#eff1f5",        // Base
+  mainAlt: "#e6e9ef",     // Mantle
+  minor: "#dce0e8",       // Crust
+  red: "#d20f39",         // Red
+  green: "#40a02b",       // Green
+  yellow: "#df8e1d",      // Yellow
+  orange: "#fe640b",      // Peach
+  blue: "#1e66f5",        // Blue
+  magenta: "#8839ef",     // Mauve
+  cyan: "#04a5e5",        // Sky
+  black: "#4c4f69",       // Text
+  white: "#eff1f5",       // Base
+  foreground: "#4c4f69",  // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};

lib/styles/themes/catppuccin-macchiato.js

@@ -0,0 +1,31 @@
+export const theme = {
+  name: "Catppuccin Macchiato",
+  kind: "dark",
+  main: "#24273a",        // Base
+  mainAlt: "#1e2030",     // Mantle
+  minor: "#181926",       // Crust
+  red: "#ed8796",         // Red
+  green: "#a6da95",       // Green
+  yellow: "#eed49f",      // Yellow
+  orange: "#f5a97f",      // Peach
+  blue: "#8aadf4",        // Blue
+  magenta: "#c6a0f6",     // Mauve
+  cyan: "#91d7e3",        // Sky
+  black: "#24273a",       // Base
+  white: "#cad3f5",       // Text
+  foreground: "#cad3f5",  // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};

lib/styles/themes/catppuccin-mocha.js

@@ -0,0 +1,31 @@
+export const theme = {
+  name: "Catppuccin Mocha",
+  kind: "dark",
+  main: "#1e1e2e",        // Base
+  mainAlt: "#181825",     // Mantle
+  minor: "#11111b",       // Crust
+  red: "#f38ba8",         // Red
+  green: "#a6e3a1",       // Green
+  yellow: "#f9e2af",      // Yellow
+  orange: "#fab387",      // Peach
+  blue: "#89b4fa",        // Blue
+  magenta: "#cba6f7",     // Mauve
+  cyan: "#89dceb",        // Sky
+  black: "#1e1e2e",       // Base
+  white: "#cdd6f4",       // Text
+  foreground: "#cdd6f4",  // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};