From 679bba3e0b053e3ddadc553104f02e29a40d4773 Mon Sep 17 00:00:00 2001 From: mudkipdev Date: Fri, 3 Jan 2025 11:00:53 -0700 Subject: [PATCH] use catppuccin package --- package.json | 1 + src/style/themes.ts | 216 +++++++++++++------------------------------- yarn.lock | 36 +++++++- 3 files changed, 99 insertions(+), 154 deletions(-) diff --git a/package.json b/package.json index 8f1b0bd..9735041 100644 --- 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 index ec469b8..1267060 100644 --- 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 = { + [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 + }; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 3eec2a4..5235a42 100644 --- 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 @@ workbox-window@6.6.1: "@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==