use catppuccin package

lucko · Jan 3, 2025 · 679bba3 · 679bba3
1 parent eea70cf
commit 679bba3
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 154 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@catppuccin/palette": "^1.7.1",
     "@monaco-editor/react": "^4.6.0",
     "copy-to-clipboard": "^3.3.3",
     "history": "^5.3.0",

diff --git a/src/style/themes.ts b/src/style/themes.ts
@@ -1,10 +1,11 @@
-// todo: line numbers, {} [] brackets, types, variables, arguments
+// todo: line numbers, {} [] () brackets, types, variables, arguments
 import type { editor } from 'monaco-editor';
 
 import dracula from 'monaco-themes/themes/Dracula.json';
 import monokai from 'monaco-themes/themes/Monokai.json';
 import solarizedDark from 'monaco-themes/themes/Solarized-dark.json';
 import solarizedLight from 'monaco-themes/themes/Solarized-light.json';
+import { CatppuccinFlavor, flavors, ColorFormat } from '@catppuccin/palette';
 
 type Color = `#${string}`;
 
@@ -29,11 +30,10 @@ export interface Themes {
   'monokai': Theme;
   'solarized': Theme;
   'solarized-light': Theme;
-  'catppuccin-latte': Theme;
-  'catppuccin-frappe': Theme;
-  'catppuccin-macchiato': Theme;
-  'catppuccin-mocha': Theme;
-  'catppuccin-oled': Theme;
+  'latte': Theme;
+  'frappe': Theme;
+  'macchiato': Theme;
+  'mocha': Theme;
 }
 
 const themes: Themes = {
@@ -203,151 +203,10 @@ const themes: Themes = {
       diffDeletion: '#dc322f', // red
     }),
   },
-  'catppuccin-latte': {
-    id: 'catppuccin-latte',
-    primary: '#4c4f69', // text
-    secondary: '#eff1f5', // base
-    highlight: '#acb0be', // selection background
-    background: '#e6e9ef', // mantle
-    lightOrDark: 'light',
-    highlightedLine: {
-      color: '#dc8a78', // cursor
-      backgroundColor: '#acb0be', // selection background
-    },
-    editor: makeMonacoTheme({
-      base: 'vs',
-      colors: {
-        primary: '#4c4f69', // text
-        background: '#e6e9ef', // mantle
-        comment: '#9ca0b0', // comment
-        delimiter: '#7c7f93', // brace, delimeter
-        annotation: '#df8e1d', // class, metadata
-        constant: '#fe640b', // constant, number
-        number: '#fe640b', // constant, number
-        string: '#40a02b', // string
-        operator: '#04a5e5', // operator
-        keyword: '#8839ef', // keyword
-        type: '#df8e1d', // class, metadata
-        variable: '#4c4f69', // text
-      },
-    }),
-  },
-  'catppuccin-frappe': {
-    id: 'catppuccin-frappe',
-    primary: '#c6d0f5', // text
-    secondary: '#303446', // base
-    highlight: '#626880', // selection background
-    background: '#292c3c', // mantle
-    lightOrDark: 'dark',
-    highlightedLine: {
-      color: '#f2d5cf', // cursor
-      backgroundColor: '#626880', // selection background
-    },
-    editor: makeMonacoTheme({
-      base: 'vs-dark',
-      colors: {
-        primary: '#c6d0f5', // text
-        background: '#292c3c', // mantle
-        comment: '#737994', // comment
-        delimiter: '#949cbb', // brace, delimeter
-        annotation: '#e5c890', // class, metadata
-        constant: '#ef9f76', // constant, number
-        number: '#ef9f76', // constant, number
-        string: '#a6d189', // string
-        operator: '#99d1db', // operator
-        keyword: '#ca9ee6', // keyword
-        type: '#e5c890', // class, metadata
-        variable: '#c6d0f5', // text
-      },
-    }),
-  },
-  'catppuccin-macchiato': {
-    id: 'catppuccin-macchiato',
-    primary: '#cad3f5', // text
-    secondary: '#24273a', // base
-    highlight: '#5b6078', // selection background
-    background: '#1e2030', // mantle
-    lightOrDark: 'dark',
-    highlightedLine: {
-      color: '#f4dbd6', // cursor
-      backgroundColor: '#5b6078', // selection background
-    },
-    editor: makeMonacoTheme({
-      base: 'vs-dark',
-      colors: {
-        primary: '#cad3f5', // text
-        background: '#1e2030', // mantle
-        comment: '#6e738d', // comment
-        delimiter: '#939ab7', // brace, delimeter
-        annotation: '#eed49f', // class, metadata
-        constant: '#f5a97f', // constant, number
-        number: '#f5a97f', // constant, number
-        string: '#a6da95', // string
-        operator: '#91d7e3', // operator
-        keyword: '#c6a0f6', // keyword
-        type: '#eed49f', // class, metadata
-        variable: '#cad3f5', // text
-      },
-    }),
-  },
-  'catppuccin-mocha': {
-    id: 'catppuccin-mocha',
-    primary: '#cdd6f4', // text
-    secondary: '#1e1e2e', // base
-    highlight: '#585b70', // selection background
-    background: '#181825', // mantle
-    lightOrDark: 'dark',
-    highlightedLine: {
-      color: '#f5e0dc', // cursor
-      backgroundColor: '#585b70', // selection background
-    },
-    editor: makeMonacoTheme({
-      base: 'vs-dark',
-      colors: {
-        primary: '#cdd6f4', // text
-        background: '#181825', // mantle
-        comment: '#6c7086', // comment
-        delimiter: '#9399b2', // brace, delimeter
-        annotation: '#f9e2af', // class, metadata
-        constant: '#fab387', // constant, number
-        number: '#fab387', // constant, number
-        string: '#a6e3a1', // string
-        operator: '#89dceb', // operator
-        keyword: '#cba6f7', // keyword
-        type: '#f9e2af', // class, metadata
-        variable: '#cdd6f4', // text
-      },
-    }),
-  },
-  'catppuccin-oled': {
-    id: 'catppuccin-oled',
-    primary: '#cdd6f4', // text
-    secondary: '#020202', // base
-    highlight: '#585b70', // selection background
-    background: '#010101', // mantle
-    lightOrDark: 'dark',
-    highlightedLine: {
-      color: '#f5e0dc', // cursor
-      backgroundColor: '#585b70', // selection background
-    },
-    editor: makeMonacoTheme({
-      base: 'vs-dark',
-      colors: {
-        primary: '#cdd6f4', // text
-        background: '#010101', // mantle
-        comment: '#6c7086', // comment
-        delimiter: '#9399b2', // brace, delimeter
-        annotation: '#f9e2af', // class, metadata
-        constant: '#fab387', // constant, number
-        number: '#fab387', // constant, number
-        string: '#a6e3a1', // string
-        operator: '#89dceb', // operator
-        keyword: '#cba6f7', // keyword
-        type: '#f9e2af', // class, metadata
-        variable: '#cdd6f4', // text
-      },
-    }),
-  },
+  'latte': createCatppuccinTheme(flavors.latte),
+  'frappe': createCatppuccinTheme(flavors.frappe),
+  'macchiato': createCatppuccinTheme(flavors.macchiato),
+  'mocha': createCatppuccinTheme(flavors.mocha),
 };
 
 export default themes;
@@ -453,3 +312,58 @@ export function addExtraColors(
   );
   return theme;
 }
+
+export function createCatppuccinTheme(flavor: CatppuccinFlavor): Theme {
+  const color = (color: ColorFormat) => color.hex as Color;
+  const nameToId: Record<string, string> = {
+    [flavors.latte.name]: 'latte',
+    [flavors.frappe.name]: 'frappe',
+    [flavors.macchiato.name]: 'macchiato',
+    [flavors.mocha.name]: 'mocha',
+  };
+
+  const editorTheme = makeMonacoTheme({
+    base: flavor.dark ? 'vs-dark' : 'vs',
+    colors: {
+      // Monaco
+      primary: color(flavor.colors.text),
+      background: color(flavor.colors.mantle),
+      string: color(flavor.colors.green),
+      comment: color(flavor.colors.overlay0),
+      delimiter: color(flavor.colors.overlay2),
+      annotation: color(flavor.colors.yellow),
+      constant: color(flavor.colors.peach),
+      number: color(flavor.colors.peach),
+      operator: color(flavor.colors.sky),
+      keyword: color(flavor.colors.mauve),
+      type: color(flavor.colors.yellow),
+      variable: color(flavor.colors.text),
+
+      // Log Files
+      logDate: color(flavor.colors.mauve),
+      logInfo: color(flavor.colors.green),
+      logWarning: color(flavor.colors.yellow),
+      logError: color(flavor.colors.red),
+      logException: color(flavor.colors.yellow),
+
+      // Diff Files
+      diffMeta: color(flavor.colors.sky),
+      diffAddition: color(flavor.colors.green),
+      diffDeletion: color(flavor.colors.red),
+    }
+  });
+
+  return {
+    id: nameToId[flavor.name],
+    lightOrDark: flavor.dark ? 'dark' : 'light',
+    primary: color(flavor.colors.text),
+    secondary: color(flavor.colors.base),
+    highlight: color(flavor.colors.surface0),
+    background: color(flavor.colors.mantle),
+    highlightedLine: {
+      color: color(flavor.colors.rosewater),
+      backgroundColor: color(flavor.colors.surface2)
+    },
+    editor: editorTheme
+  };
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1086,6 +1086,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@catppuccin/palette@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@catppuccin/palette/-/palette-1.7.1.tgz#c7cd165dcc1fc025a05ac138a4749b2279cf115e"
+  integrity sha512-aRc1tbzrevOTV7nFTT9SRdF26w/MIwT4Jwt4fDMc9itRZUDXCuEDBLyz4TQMlqO9ZP8mf5Hu4Jr6D03NLFc6Gw==
+
 "@csstools/normalize.css@*":
   version "12.1.1"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.1.1.tgz#f0ad221b7280f3fc814689786fd9ee092776ef8f"
@@ -8727,7 +8732,16 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8831,7 +8845,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9907,7 +9928,16 @@ [email protected]:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==