From 200ddb37b048e5746fa8f2dfd06226343d21d8ea Mon Sep 17 00:00:00 2001 From: mudkipdev Date: Wed, 15 Nov 2023 19:33:13 -0700 Subject: [PATCH 1/6] add catppuccin theme --- src/style/themes.ts | 121 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) diff --git a/src/style/themes.ts b/src/style/themes.ts index e328a35..5f21e1c 100644 --- a/src/style/themes.ts +++ b/src/style/themes.ts @@ -1,3 +1,4 @@ +// todo: line numbers, {} [] brackets, types, variables, arguments import type { editor } from 'monaco-editor'; import dracula from 'monaco-themes/themes/Dracula.json'; @@ -28,6 +29,10 @@ export interface Themes { 'monokai': Theme; 'solarized': Theme; 'solarized-light': Theme; + 'catppuccin-latte': Theme; + 'catppuccin-frappe': Theme; + 'catppuccin-macchiato': Theme; + 'catppuccin-mocha': Theme; } const themes: Themes = { @@ -197,6 +202,122 @@ 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 + }, + }), + }, }; export default themes; From e763e94397f37502906723807d74516336ad7b75 Mon Sep 17 00:00:00 2001 From: mudkipdev Date: Wed, 15 Nov 2023 19:39:11 -0700 Subject: [PATCH 2/6] add unofficial oled palette --- src/style/themes.ts | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/src/style/themes.ts b/src/style/themes.ts index 5f21e1c..331d826 100644 --- a/src/style/themes.ts +++ b/src/style/themes.ts @@ -33,6 +33,7 @@ export interface Themes { 'catppuccin-frappe': Theme; 'catppuccin-macchiato': Theme; 'catppuccin-mocha': Theme; + 'catppuccin-oled': Theme; } const themes: Themes = { @@ -263,7 +264,7 @@ const themes: Themes = { 'catppuccin-macchiato': { id: 'catppuccin-macchiato', primary: '#cad3f5', // text - secondary: '#24273a', // base + secondary: '#5b6078', // base highlight: '#5b6078', // selection background background: '#1e2030', // mantle lightOrDark: 'dark', @@ -318,6 +319,35 @@ const themes: Themes = { }, }), }, + '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 + }, + }), + }, }; export default themes; From 9612ef26de1c6649ed78357e8da921a2f68f2506 Mon Sep 17 00:00:00 2001 From: mudkipdev Date: Wed, 15 Nov 2023 19:42:15 -0700 Subject: [PATCH 3/6] undo accidental change --- src/style/themes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style/themes.ts b/src/style/themes.ts index 331d826..ec469b8 100644 --- a/src/style/themes.ts +++ b/src/style/themes.ts @@ -264,7 +264,7 @@ const themes: Themes = { 'catppuccin-macchiato': { id: 'catppuccin-macchiato', primary: '#cad3f5', // text - secondary: '#5b6078', // base + secondary: '#24273a', // base highlight: '#5b6078', // selection background background: '#1e2030', // mantle lightOrDark: 'dark', From 8a59f0c41608eadc1edd88a851d5dbb1d1dbd45c Mon Sep 17 00:00:00 2001 From: mudkipdev Date: Fri, 3 Jan 2025 11:00:53 -0700 Subject: [PATCH 4/6] 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== From a465a8268d949cfbb04772875d2b655ae6d0d12c Mon Sep 17 00:00:00 2001 From: mudkipdev Date: Fri, 3 Jan 2025 11:47:25 -0700 Subject: [PATCH 5/6] fix bracket colors (needs refactor --- src/style/themes.ts | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/src/style/themes.ts b/src/style/themes.ts index 1267060..a3c7b54 100644 --- a/src/style/themes.ts +++ b/src/style/themes.ts @@ -1,4 +1,3 @@ -// todo: line numbers, {} [] () brackets, types, variables, arguments import type { editor } from 'monaco-editor'; import dracula from 'monaco-themes/themes/Dracula.json'; @@ -8,6 +7,7 @@ import solarizedLight from 'monaco-themes/themes/Solarized-light.json'; import { CatppuccinFlavor, flavors, ColorFormat } from '@catppuccin/palette'; type Color = `#${string}`; +type Extra = Record; export interface Theme { id: string; @@ -74,7 +74,7 @@ const themes: Themes = { diffAddition: '#3fb950', // green.3 diffDeletion: '#f85149', // red.4 }, - }), + }, {}), }, 'light': { id: 'light', @@ -113,7 +113,7 @@ const themes: Themes = { diffAddition: '#2da44e', // green.4 diffDeletion: '#cf222e', // red.5 }, - }), + }, {}), }, 'dracula': { id: 'dracula', @@ -241,7 +241,8 @@ interface MonacoThemeProps { } export function makeMonacoTheme( - props: MonacoThemeProps + props: MonacoThemeProps, + extra: Extra ): editor.IStandaloneThemeData { const colors = Object.fromEntries( Object.entries(props.colors).map(([key, color]) => [ @@ -250,6 +251,13 @@ export function makeMonacoTheme( ]) ) as Record; + let editorColors: Extra = { + 'editor.background': `#${colors.background}`, + 'editor.foreground': `#${colors.primary}`, + }; + + editorColors = { ...editorColors, ...extra }; + return { base: props.base, inherit: true, @@ -284,10 +292,7 @@ export function makeMonacoTheme( { token: 'addition.diff', foreground: colors.diffAddition }, { token: 'deletion.diff', foreground: colors.diffDeletion }, ], - colors: { - 'editor.background': `#${colors.background}`, - 'editor.foreground': `#${colors.primary}`, - }, + colors: editorColors }; } @@ -329,7 +334,7 @@ export function createCatppuccinTheme(flavor: CatppuccinFlavor): Theme { primary: color(flavor.colors.text), background: color(flavor.colors.mantle), string: color(flavor.colors.green), - comment: color(flavor.colors.overlay0), + comment: color(flavor.colors.overlay2), delimiter: color(flavor.colors.overlay2), annotation: color(flavor.colors.yellow), constant: color(flavor.colors.peach), @@ -351,6 +356,10 @@ export function createCatppuccinTheme(flavor: CatppuccinFlavor): Theme { diffAddition: color(flavor.colors.green), diffDeletion: color(flavor.colors.red), } + }, { + "editorBracketHighlight.foreground1": color(flavor.colors.overlay2), + "editorBracketHighlight.foreground2": color(flavor.colors.overlay2), + "editorBracketHighlight.foreground3": color(flavor.colors.overlay2) }); return { From a1d5bf23026241780c94d75024ad2f2db5a88528 Mon Sep 17 00:00:00 2001 From: Luck Date: Sun, 5 Jan 2025 10:50:48 +0000 Subject: [PATCH 6/6] prettier formatting --- src/style/themes.ts | 185 +++++++++++++++++++++++--------------------- 1 file changed, 96 insertions(+), 89 deletions(-) diff --git a/src/style/themes.ts b/src/style/themes.ts index a3c7b54..6c76f72 100644 --- a/src/style/themes.ts +++ b/src/style/themes.ts @@ -1,13 +1,13 @@ import type { editor } from 'monaco-editor'; +import { CatppuccinFlavor, ColorFormat, flavors } from '@catppuccin/palette'; 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}`; -type Extra = Record; +type ColorRecord = Record; export interface Theme { id: string; @@ -50,31 +50,34 @@ const themes: Themes = { backgroundColor: '#161b22', // canvas.overlay }, - editor: makeMonacoTheme({ - base: 'vs-dark', - colors: { - primary: '#c9d1d9', // fg.default - background: '#0d1117', // canvas.default - comment: '#8b949e', - delimiter: '#d2a8ff', - annotation: '#a5d6ff', - constant: '#ff7b72', - number: '#f2cc60', - string: '#79c0ff', - operator: '#ff7b72', - keyword: '#ff7b72', - type: '#ffa657', - variable: '#ffa657', - logInfo: '#3fb950', // green.3 - logError: '#f85149', // red.4 - logWarning: '#d29922', // yellow.3 - logDate: '#33B3AE', // teal.3 - logException: '#f8e3a1', // yellow.0 - diffMeta: '#33B3AE', // teal.3 - diffAddition: '#3fb950', // green.3 - diffDeletion: '#f85149', // red.4 + editor: makeMonacoTheme( + { + base: 'vs-dark', + colors: { + primary: '#c9d1d9', // fg.default + background: '#0d1117', // canvas.default + comment: '#8b949e', + delimiter: '#d2a8ff', + annotation: '#a5d6ff', + constant: '#ff7b72', + number: '#f2cc60', + string: '#79c0ff', + operator: '#ff7b72', + keyword: '#ff7b72', + type: '#ffa657', + variable: '#ffa657', + logInfo: '#3fb950', // green.3 + logError: '#f85149', // red.4 + logWarning: '#d29922', // yellow.3 + logDate: '#33B3AE', // teal.3 + logException: '#f8e3a1', // yellow.0 + diffMeta: '#33B3AE', // teal.3 + diffAddition: '#3fb950', // green.3 + diffDeletion: '#f85149', // red.4 + }, }, - }, {}), + {} + ), }, 'light': { id: 'light', @@ -89,31 +92,34 @@ const themes: Themes = { backgroundColor: '#e0f6ff', }, - editor: makeMonacoTheme({ - base: 'vs', - colors: { - primary: '#000000', - background: '#ffffff', - comment: '#708090', - delimiter: '#999999', - annotation: '#999999', - constant: '#990055', - number: '#990055', - string: '#669900', - operator: '#9a6e3a', - keyword: '#0077aa', - type: '#DD4A68', - variable: '#ee9900', - logInfo: '#2da44e', // green.4 - logError: '#cf222e', // red.5 - logWarning: '#d4a72c', // yellow.3 - logDate: '#136061', // teal.6 - logException: '#7d4e00', // yellow.6 - diffMeta: '#136061', // teal.6 - diffAddition: '#2da44e', // green.4 - diffDeletion: '#cf222e', // red.5 + editor: makeMonacoTheme( + { + base: 'vs', + colors: { + primary: '#000000', + background: '#ffffff', + comment: '#708090', + delimiter: '#999999', + annotation: '#999999', + constant: '#990055', + number: '#990055', + string: '#669900', + operator: '#9a6e3a', + keyword: '#0077aa', + type: '#DD4A68', + variable: '#ee9900', + logInfo: '#2da44e', // green.4 + logError: '#cf222e', // red.5 + logWarning: '#d4a72c', // yellow.3 + logDate: '#136061', // teal.6 + logException: '#7d4e00', // yellow.6 + diffMeta: '#136061', // teal.6 + diffAddition: '#2da44e', // green.4 + diffDeletion: '#cf222e', // red.5 + }, }, - }, {}), + {} + ), }, 'dracula': { id: 'dracula', @@ -242,7 +248,7 @@ interface MonacoThemeProps { export function makeMonacoTheme( props: MonacoThemeProps, - extra: Extra + extraColors: ColorRecord ): editor.IStandaloneThemeData { const colors = Object.fromEntries( Object.entries(props.colors).map(([key, color]) => [ @@ -251,13 +257,11 @@ export function makeMonacoTheme( ]) ) as Record; - let editorColors: Extra = { + const editorColors: ColorRecord = { 'editor.background': `#${colors.background}`, 'editor.foreground': `#${colors.primary}`, }; - editorColors = { ...editorColors, ...extra }; - return { base: props.base, inherit: true, @@ -292,7 +296,7 @@ export function makeMonacoTheme( { token: 'addition.diff', foreground: colors.diffAddition }, { token: 'deletion.diff', foreground: colors.diffDeletion }, ], - colors: editorColors + colors: { ...editorColors, ...extraColors }, }; } @@ -327,40 +331,43 @@ export function createCatppuccinTheme(flavor: CatppuccinFlavor): Theme { [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.overlay2), - 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), + 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.overlay2), + 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), + // 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), + // Diff Files + diffMeta: color(flavor.colors.sky), + diffAddition: color(flavor.colors.green), + diffDeletion: color(flavor.colors.red), + }, + }, + { + 'editorBracketHighlight.foreground1': color(flavor.colors.overlay2), + 'editorBracketHighlight.foreground2': color(flavor.colors.overlay2), + 'editorBracketHighlight.foreground3': color(flavor.colors.overlay2), } - }, { - "editorBracketHighlight.foreground1": color(flavor.colors.overlay2), - "editorBracketHighlight.foreground2": color(flavor.colors.overlay2), - "editorBracketHighlight.foreground3": color(flavor.colors.overlay2) - }); + ); return { id: nameToId[flavor.name], @@ -371,8 +378,8 @@ export function createCatppuccinTheme(flavor: CatppuccinFlavor): Theme { background: color(flavor.colors.mantle), highlightedLine: { color: color(flavor.colors.rosewater), - backgroundColor: color(flavor.colors.surface2) + backgroundColor: color(flavor.colors.surface2), }, - editor: editorTheme + editor: editorTheme, }; -} \ No newline at end of file +}