From 5963b8ccd53eac2848339ad0f79930336a359f20 Mon Sep 17 00:00:00 2001 From: Hatem Hosny Date: Mon, 16 Dec 2024 13:52:25 +0200 Subject: [PATCH] load catppuccin themes from CDN --- src/livecodes/editor/codejar/prism-themes.ts | 13 +- .../editor/codemirror/codemirror-themes.ts | 121 +------- src/livecodes/editor/monaco/monaco-themes.ts | 259 +----------------- src/livecodes/vendors.ts | 2 +- 4 files changed, 20 insertions(+), 375 deletions(-) diff --git a/src/livecodes/editor/codejar/prism-themes.ts b/src/livecodes/editor/codejar/prism-themes.ts index f17f48937..53fe0a1bc 100644 --- a/src/livecodes/editor/codejar/prism-themes.ts +++ b/src/livecodes/editor/codejar/prism-themes.ts @@ -3,6 +3,7 @@ import { prismOfficialThemesBaseUrl, prismThemesBaseUrl, prismThemesLaserWaveUrl, + vendorsBaseUrl, } from '../../vendors'; const changeLineNumberColor = (color: string) => @@ -24,26 +25,22 @@ export const prismThemes: Array<{ { name: 'catppuccin-latte', title: 'Catppuccin Latte', - // https://github.com/catppuccin/prismjs/blob/main/themes/latte.css - url: 'data:text/css;charset=UTF-8;base64,Y29kZVtjbGFzcyo9Imxhbmd1YWdlLSJdLApwcmVbY2xhc3MqPSJsYW5ndWFnZS0iXSB7Cgljb2xvcjogIzRjNGY2OTsKfQoKOm5vdChwcmUpID4gY29kZVtjbGFzcyo9Imxhbmd1YWdlLSJdLApwcmVbY2xhc3MqPSJsYW5ndWFnZS0iXSB7CgliYWNrZ3JvdW5kOiAjZTZlOWVmOwp9CgovKiBodHRwczovL3ByaXNtanMuY29tL3Rva2Vucy5odG1sICovCgoudG9rZW4ua2V5d29yZCB7Cgljb2xvcjogIzg4MzllZjsKfQoKLnRva2VuLmJ1aWx0aW4gewoJY29sb3I6ICNkMjBmMzk7Cn0KCi50b2tlbi5jbGFzcy1uYW1lIHsKCWNvbG9yOiAjZGY4ZTFkOwp9CgoudG9rZW4uZnVuY3Rpb24gewoJY29sb3I6ICMxZTY2ZjU7Cn0KCi50b2tlbi5ib29sZWFuLAoudG9rZW4ubnVtYmVyIHsKCWNvbG9yOiAjZmU2NDBiOwp9CgoudG9rZW4uc3RyaW5nLAoudG9rZW4uY2hhciB7Cgljb2xvcjogIzQwYTAyYjsKfQoKLnRva2VuLnN5bWJvbCB7Cgljb2xvcjogI2RmOGUxZDsKfQoKLnRva2VuLnJlZ2V4IHsKCWNvbG9yOiAjZWE3NmNiOwp9CgoudG9rZW4udXJsIHsKCWNvbG9yOiAjNDBhMDJiOwp9CgoudG9rZW4ub3BlcmF0b3IgewoJY29sb3I6ICMwNGE1ZTU7Cn0KCi50b2tlbi52YXJpYWJsZSB7Cgljb2xvcjogIzRjNGY2OTsKfQoKLnRva2VuLmNvbnN0YW50IHsKCWNvbG9yOiAjZmU2NDBiOwp9CgoudG9rZW4ucHJvcGVydHkgewoJY29sb3I6ICMxZTY2ZjU7Cn0KCi50b2tlbi5wdW5jdHVhdGlvbiB7Cgljb2xvcjogIzdjN2Y5MzsKfQoKLnRva2VuLmltcG9ydGFudCB7Cgljb2xvcjogIzg4MzllZjsKfQoKLnRva2VuLmNvbW1lbnQgewoJY29sb3I6ICM3YzdmOTM7Cn0KCi50b2tlbi50YWcgewoJY29sb3I6ICMxZTY2ZjU7Cn0KCi50b2tlbi5hdHRyLW5hbWUgewoJY29sb3I6ICNkZjhlMWQ7Cn0KCi50b2tlbi5hdHRyLXZhbHVlIHsKCWNvbG9yOiAjNDBhMDJiOwp9CgoudG9rZW4ubmFtZXNwYWNlIHsKCWNvbG9yOiAjZGY4ZTFkOwp9CgoudG9rZW4ucHJvbG9nLAoudG9rZW4uZG9jdHlwZSB7Cgljb2xvcjogIzg4MzllZjsKfQoKLnRva2VuLmNkYXRhIHsKCWNvbG9yOiAjMTc5Mjk5Owp9CgoudG9rZW4uZW50aXR5IHsKCWNvbG9yOiAjZDIwZjM5Owp9CgoudG9rZW4uYXRydWxlIHsKCWNvbG9yOiAjODgzOWVmOwp9CgoudG9rZW4uc2VsZWN0b3IgewoJY29sb3I6ICMxZTY2ZjU7Cn0KCi8qIERpZmYgKi8KCi50b2tlbi5kZWxldGVkIHsKCWNvbG9yOiAjZDIwZjM5Owp9CgoudG9rZW4uaW5zZXJ0ZWQgewoJY29sb3I6ICM0MGEwMmIKfQoKLyogT3RoZXIgKi8KCi50b2tlbi5pbXBvcnRhbnQsCi50b2tlbi5ib2xkIHsKCWZvbnQtd2VpZ2h0OiBib2xkOwp9Ci50b2tlbi5pdGFsaWMgewoJZm9udC1zdHlsZTogaXRhbGljOwp9Cg==', + url: vendorsBaseUrl + 'catppuccin/prism/latte.css', }, { name: 'catppuccin-frappe', title: 'Catppuccin Frappe', - // https://github.com/catppuccin/prismjs/blob/main/themes/frappe.css - url: 'data:text/css;charset=UTF-8;base64,Y29kZVtjbGFzcyo9Imxhbmd1YWdlLSJdLApwcmVbY2xhc3MqPSJsYW5ndWFnZS0iXSB7Cgljb2xvcjogI2M2ZDBmNTsKfQoKOm5vdChwcmUpID4gY29kZVtjbGFzcyo9Imxhbmd1YWdlLSJdLApwcmVbY2xhc3MqPSJsYW5ndWFnZS0iXSB7CgliYWNrZ3JvdW5kOiAjMjkyYzNjOwp9CgovKiBodHRwczovL3ByaXNtanMuY29tL3Rva2Vucy5odG1sICovCgoudG9rZW4ua2V5d29yZCB7Cgljb2xvcjogI2NhOWVlNjsKfQoKLnRva2VuLmJ1aWx0aW4gewoJY29sb3I6ICNlNzgyODQ7Cn0KCi50b2tlbi5jbGFzcy1uYW1lIHsKCWNvbG9yOiAjZTVjODkwOwp9CgoudG9rZW4uZnVuY3Rpb24gewoJY29sb3I6ICM4Y2FhZWU7Cn0KCi50b2tlbi5ib29sZWFuLAoudG9rZW4ubnVtYmVyIHsKCWNvbG9yOiAjZWY5Zjc2Owp9CgoudG9rZW4uc3RyaW5nLAoudG9rZW4uY2hhciB7Cgljb2xvcjogI2E2ZDE4OTsKfQoKLnRva2VuLnN5bWJvbCB7Cgljb2xvcjogI2U1Yzg5MDsKfQoKLnRva2VuLnJlZ2V4IHsKCWNvbG9yOiAjZjRiOGU0Owp9CgoudG9rZW4udXJsIHsKCWNvbG9yOiAjYTZkMTg5Owp9CgoudG9rZW4ub3BlcmF0b3IgewoJY29sb3I6ICM5OWQxZGI7Cn0KCi50b2tlbi52YXJpYWJsZSB7Cgljb2xvcjogI2M2ZDBmNTsKfQoKLnRva2VuLmNvbnN0YW50IHsKCWNvbG9yOiAjZWY5Zjc2Owp9CgoudG9rZW4ucHJvcGVydHkgewoJY29sb3I6ICM4Y2FhZWU7Cn0KCi50b2tlbi5wdW5jdHVhdGlvbiB7Cgljb2xvcjogIzk0OWNiYjsKfQoKLnRva2VuLmltcG9ydGFudCB7Cgljb2xvcjogI2NhOWVlNjsKfQoKLnRva2VuLmNvbW1lbnQgewoJY29sb3I6ICM5NDljYmI7Cn0KCi50b2tlbi50YWcgewoJY29sb3I6ICM4Y2FhZWU7Cn0KCi50b2tlbi5hdHRyLW5hbWUgewoJY29sb3I6ICNlNWM4OTA7Cn0KCi50b2tlbi5hdHRyLXZhbHVlIHsKCWNvbG9yOiAjYTZkMTg5Owp9CgoudG9rZW4ubmFtZXNwYWNlIHsKCWNvbG9yOiAjZTVjODkwOwp9CgoudG9rZW4ucHJvbG9nLAoudG9rZW4uZG9jdHlwZSB7Cgljb2xvcjogI2NhOWVlNjsKfQoKLnRva2VuLmNkYXRhIHsKCWNvbG9yOiAjODFjOGJlOwp9CgoudG9rZW4uZW50aXR5IHsKCWNvbG9yOiAjZTc4Mjg0Owp9CgoudG9rZW4uYXRydWxlIHsKCWNvbG9yOiAjY2E5ZWU2Owp9CgoudG9rZW4uc2VsZWN0b3IgewoJY29sb3I6ICM4Y2FhZWU7Cn0KCi8qIERpZmYgKi8KCi50b2tlbi5kZWxldGVkIHsKCWNvbG9yOiAjZTc4Mjg0Owp9CgoudG9rZW4uaW5zZXJ0ZWQgewoJY29sb3I6ICNhNmQxODkKfQoKLyogT3RoZXIgKi8KCi50b2tlbi5pbXBvcnRhbnQsCi50b2tlbi5ib2xkIHsKCWZvbnQtd2VpZ2h0OiBib2xkOwp9Ci50b2tlbi5pdGFsaWMgewoJZm9udC1zdHlsZTogaXRhbGljOwp9Cg==', + url: vendorsBaseUrl + 'catppuccin/prism/frappe.css', }, { name: 'catppuccin-macchiato', title: 'Catppuccin Macchiato', - // https://github.com/catppuccin/prismjs/blob/main/themes/macchiato.css - url: 'data:text/css;charset=UTF-8;base64,Y29kZVtjbGFzcyo9Imxhbmd1YWdlLSJdLApwcmVbY2xhc3MqPSJsYW5ndWFnZS0iXSB7Cgljb2xvcjogI2NhZDNmNTsKfQoKOm5vdChwcmUpID4gY29kZVtjbGFzcyo9Imxhbmd1YWdlLSJdLApwcmVbY2xhc3MqPSJsYW5ndWFnZS0iXSB7CgliYWNrZ3JvdW5kOiAjMWUyMDMwOwp9CgovKiBodHRwczovL3ByaXNtanMuY29tL3Rva2Vucy5odG1sICovCgoudG9rZW4ua2V5d29yZCB7Cgljb2xvcjogI2M2YTBmNjsKfQoKLnRva2VuLmJ1aWx0aW4gewoJY29sb3I6ICNlZDg3OTY7Cn0KCi50b2tlbi5jbGFzcy1uYW1lIHsKCWNvbG9yOiAjZWVkNDlmOwp9CgoudG9rZW4uZnVuY3Rpb24gewoJY29sb3I6ICM4YWFkZjQ7Cn0KCi50b2tlbi5ib29sZWFuLAoudG9rZW4ubnVtYmVyIHsKCWNvbG9yOiAjZjVhOTdmOwp9CgoudG9rZW4uc3RyaW5nLAoudG9rZW4uY2hhciB7Cgljb2xvcjogI2E2ZGE5NTsKfQoKLnRva2VuLnN5bWJvbCB7Cgljb2xvcjogI2VlZDQ5ZjsKfQoKLnRva2VuLnJlZ2V4IHsKCWNvbG9yOiAjZjViZGU2Owp9CgoudG9rZW4udXJsIHsKCWNvbG9yOiAjYTZkYTk1Owp9CgoudG9rZW4ub3BlcmF0b3IgewoJY29sb3I6ICM5MWQ3ZTM7Cn0KCi50b2tlbi52YXJpYWJsZSB7Cgljb2xvcjogI2NhZDNmNTsKfQoKLnRva2VuLmNvbnN0YW50IHsKCWNvbG9yOiAjZjVhOTdmOwp9CgoudG9rZW4ucHJvcGVydHkgewoJY29sb3I6ICM4YWFkZjQ7Cn0KCi50b2tlbi5wdW5jdHVhdGlvbiB7Cgljb2xvcjogIzkzOWFiNzsKfQoKLnRva2VuLmltcG9ydGFudCB7Cgljb2xvcjogI2M2YTBmNjsKfQoKLnRva2VuLmNvbW1lbnQgewoJY29sb3I6ICM5MzlhYjc7Cn0KCi50b2tlbi50YWcgewoJY29sb3I6ICM4YWFkZjQ7Cn0KCi50b2tlbi5hdHRyLW5hbWUgewoJY29sb3I6ICNlZWQ0OWY7Cn0KCi50b2tlbi5hdHRyLXZhbHVlIHsKCWNvbG9yOiAjYTZkYTk1Owp9CgoudG9rZW4ubmFtZXNwYWNlIHsKCWNvbG9yOiAjZWVkNDlmOwp9CgoudG9rZW4ucHJvbG9nLAoudG9rZW4uZG9jdHlwZSB7Cgljb2xvcjogI2M2YTBmNjsKfQoKLnRva2VuLmNkYXRhIHsKCWNvbG9yOiAjOGJkNWNhOwp9CgoudG9rZW4uZW50aXR5IHsKCWNvbG9yOiAjZWQ4Nzk2Owp9CgoudG9rZW4uYXRydWxlIHsKCWNvbG9yOiAjYzZhMGY2Owp9CgoudG9rZW4uc2VsZWN0b3IgewoJY29sb3I6ICM4YWFkZjQ7Cn0KCi8qIERpZmYgKi8KCi50b2tlbi5kZWxldGVkIHsKCWNvbG9yOiAjZWQ4Nzk2Owp9CgoudG9rZW4uaW5zZXJ0ZWQgewoJY29sb3I6ICNhNmRhOTUKfQoKLyogT3RoZXIgKi8KCi50b2tlbi5pbXBvcnRhbnQsCi50b2tlbi5ib2xkIHsKCWZvbnQtd2VpZ2h0OiBib2xkOwp9Ci50b2tlbi5pdGFsaWMgewoJZm9udC1zdHlsZTogaXRhbGljOwp9Cg==', + url: vendorsBaseUrl + 'catppuccin/prism/macchiato.css', }, { name: 'catppuccin-mocha', title: 'Catppuccin Mocha', - // https://github.com/catppuccin/prismjs/blob/main/themes/mocha.css - url: 'data:text/css;charset=UTF-8;base64,Y29kZVtjbGFzcyo9Imxhbmd1YWdlLSJdLApwcmVbY2xhc3MqPSJsYW5ndWFnZS0iXSB7Cgljb2xvcjogI2NkZDZmNDsKfQoKOm5vdChwcmUpID4gY29kZVtjbGFzcyo9Imxhbmd1YWdlLSJdLApwcmVbY2xhc3MqPSJsYW5ndWFnZS0iXSB7CgliYWNrZ3JvdW5kOiAjMTgxODI1Owp9CgovKiBodHRwczovL3ByaXNtanMuY29tL3Rva2Vucy5odG1sICovCgoudG9rZW4ua2V5d29yZCB7Cgljb2xvcjogI2NiYTZmNzsKfQoKLnRva2VuLmJ1aWx0aW4gewoJY29sb3I6ICNmMzhiYTg7Cn0KCi50b2tlbi5jbGFzcy1uYW1lIHsKCWNvbG9yOiAjZjllMmFmOwp9CgoudG9rZW4uZnVuY3Rpb24gewoJY29sb3I6ICM4OWI0ZmE7Cn0KCi50b2tlbi5ib29sZWFuLAoudG9rZW4ubnVtYmVyIHsKCWNvbG9yOiAjZmFiMzg3Owp9CgoudG9rZW4uc3RyaW5nLAoudG9rZW4uY2hhciB7Cgljb2xvcjogI2E2ZTNhMTsKfQoKLnRva2VuLnN5bWJvbCB7Cgljb2xvcjogI2Y5ZTJhZjsKfQoKLnRva2VuLnJlZ2V4IHsKCWNvbG9yOiAjZjVjMmU3Owp9CgoudG9rZW4udXJsIHsKCWNvbG9yOiAjYTZlM2ExOwp9CgoudG9rZW4ub3BlcmF0b3IgewoJY29sb3I6ICM4OWRjZWI7Cn0KCi50b2tlbi52YXJpYWJsZSB7Cgljb2xvcjogI2NkZDZmNDsKfQoKLnRva2VuLmNvbnN0YW50IHsKCWNvbG9yOiAjZmFiMzg3Owp9CgoudG9rZW4ucHJvcGVydHkgewoJY29sb3I6ICM4OWI0ZmE7Cn0KCi50b2tlbi5wdW5jdHVhdGlvbiB7Cgljb2xvcjogIzkzOTliMjsKfQoKLnRva2VuLmltcG9ydGFudCB7Cgljb2xvcjogI2NiYTZmNzsKfQoKLnRva2VuLmNvbW1lbnQgewoJY29sb3I6ICM5Mzk5YjI7Cn0KCi50b2tlbi50YWcgewoJY29sb3I6ICM4OWI0ZmE7Cn0KCi50b2tlbi5hdHRyLW5hbWUgewoJY29sb3I6ICNmOWUyYWY7Cn0KCi50b2tlbi5hdHRyLXZhbHVlIHsKCWNvbG9yOiAjYTZlM2ExOwp9CgoudG9rZW4ubmFtZXNwYWNlIHsKCWNvbG9yOiAjZjllMmFmOwp9CgoudG9rZW4ucHJvbG9nLAoudG9rZW4uZG9jdHlwZSB7Cgljb2xvcjogI2NiYTZmNzsKfQoKLnRva2VuLmNkYXRhIHsKCWNvbG9yOiAjOTRlMmQ1Owp9CgoudG9rZW4uZW50aXR5IHsKCWNvbG9yOiAjZjM4YmE4Owp9CgoudG9rZW4uYXRydWxlIHsKCWNvbG9yOiAjY2JhNmY3Owp9CgoudG9rZW4uc2VsZWN0b3IgewoJY29sb3I6ICM4OWI0ZmE7Cn0KCi8qIERpZmYgKi8KCi50b2tlbi5kZWxldGVkIHsKCWNvbG9yOiAjZjM4YmE4Owp9CgoudG9rZW4uaW5zZXJ0ZWQgewoJY29sb3I6ICNhNmUzYTEKfQoKLyogT3RoZXIgKi8KCi50b2tlbi5pbXBvcnRhbnQsCi50b2tlbi5ib2xkIHsKCWZvbnQtd2VpZ2h0OiBib2xkOwp9Ci50b2tlbi5pdGFsaWMgewoJZm9udC1zdHlsZTogaXRhbGljOwp9Cg==', + url: vendorsBaseUrl + 'catppuccin/prism/mocha.css', }, { name: 'cb', title: 'CB', url: prismThemesBaseUrl + 'prism-cb.css' }, { diff --git a/src/livecodes/editor/codemirror/codemirror-themes.ts b/src/livecodes/editor/codemirror/codemirror-themes.ts index fe2a0212e..ba8b6ca47 100644 --- a/src/livecodes/editor/codemirror/codemirror-themes.ts +++ b/src/livecodes/editor/codemirror/codemirror-themes.ts @@ -14,6 +14,7 @@ import { cm6ThemeSolarizedLightUrl, ddietrCmThemesBaseUrl, thememirrorBaseUrl, + vendorsBaseUrl, } from '../../vendors'; export const codemirrorThemes: Array<{ @@ -79,18 +80,26 @@ export const codemirrorThemes: Array<{ { name: 'catppuccin-latte', title: 'Catppuccin Latte', + url: vendorsBaseUrl + 'catppuccin/codemirror/codemirror-theme-catppuccin.js', + exportName: 'catppuccinLatte', }, { name: 'catppuccin-frappe', title: 'Catppuccin Frappe', + url: vendorsBaseUrl + 'catppuccin/codemirror/codemirror-theme-catppuccin.js', + exportName: 'catppuccinFrappe', }, { name: 'catppuccin-macchiato', title: 'Catppuccin Macchiato', + url: vendorsBaseUrl + 'catppuccin/codemirror/codemirror-theme-catppuccin.js', + exportName: 'catppuccinMacchiato', }, { name: 'catppuccin-mocha', title: 'Catppuccin Mocha', + url: vendorsBaseUrl + 'catppuccin/codemirror/codemirror-theme-catppuccin.js', + exportName: 'catppuccinMocha', }, { name: 'clouds', @@ -298,116 +307,4 @@ export const customThemes = { }, styles: [], }), - 'catppuccin-latte': createTheme({ - variant: 'light', - settings: { - background: '#eff1f5', // base - foreground: '#4c4f69', // text - caret: '#dc8a78', // rosewater - selection: '#ccd0da', // surface0 - gutterBackground: '#e6e9ef', // mantle - gutterForeground: '#4c4f69', // text - lineHighlight: '#ccd0da', // surface0 - }, - styles: [ - { tag: t.keyword, color: '#8839ef' }, // mauve - { tag: t.operator, color: '#04a5e5' }, // sky - { tag: t.string, color: '#40a02b' }, // green - { tag: t.comment, color: '#8c8fa1', fontStyle: 'italic' }, // overlay1 - { tag: t.function(t.variableName), color: '#1e66f5' }, // blue - { tag: t.number, color: '#fe640b' }, // peach - { tag: t.bool, color: '#fe640b' }, // peach - { tag: t.className, color: '#df8e1d' }, // yellow - { tag: t.constant(t.variableName), color: '#fe640b' }, // peach - { tag: t.variableName, color: '#4c4f69' }, // text - { tag: t.punctuation, color: '#04a5e5' }, // sky - { tag: t.bracket, color: '#04a5e5' }, // sky - { tag: t.typeName, color: '#1e66f5' }, // blue - { tag: t.attributeName, color: '#df8e1d' }, // red - ], - }), - 'catppuccin-frappe': createTheme({ - variant: 'dark', - settings: { - background: '#303446', // base - foreground: '#c6d0f5', // text - caret: '#f2d5cf', // rosewater - selection: '#51576d', // surface0 - gutterBackground: '#292c3c', // mantle - gutterForeground: '#c6d0f5', // text - lineHighlight: '#414559', // surface0 - }, - styles: [ - { tag: t.keyword, color: '#ca9ee6' }, // mauve - { tag: t.operator, color: '#99d1db' }, // sky - { tag: t.string, color: '#a6d189' }, // green - { tag: t.comment, color: '#838ba7', fontStyle: 'italic' }, // overlay1 - { tag: t.function(t.variableName), color: '#8caaee' }, // blue - { tag: t.number, color: '#ef9f76' }, // peach - { tag: t.bool, color: '#ef9f76' }, // peach - { tag: t.className, color: '#e5c890' }, // yellow - { tag: t.constant(t.variableName), color: '#ef9f76' }, // peach - { tag: t.variableName, color: '#c6d0f5' }, // text - { tag: t.punctuation, color: '#99d1db' }, // sky - { tag: t.bracket, color: '#99d1db' }, // sky - { tag: t.typeName, color: '#8caaee' }, // blue - { tag: t.attributeName, color: '#e5c890' }, // red - ], - }), - 'catppuccin-macchiato': createTheme({ - variant: 'dark', - settings: { - background: '#24273a', // base - foreground: '#cad3f5', // text - caret: '#f4dbd6', // rosewater - selection: '#494d64', // surface0 - gutterBackground: '#1e2030', // mantle - gutterForeground: '#cad3f5', // text - lineHighlight: '#363a4f', // surface0 - }, - styles: [ - { tag: t.keyword, color: '#c6a0f6' }, // mauve - { tag: t.operator, color: '#91d7e3' }, // sky - { tag: t.string, color: '#a6da95' }, // green - { tag: t.comment, color: '#9ca0b0', fontStyle: 'italic' }, // overlay1 - { tag: t.function(t.variableName), color: '#8aadf4' }, // blue - { tag: t.number, color: '#f5a97f' }, // peach - { tag: t.bool, color: '#f5a97f' }, // peach - { tag: t.className, color: '#eed49f' }, // yellow - { tag: t.constant(t.variableName), color: '#f5a97f' }, // peach - { tag: t.variableName, color: '#cad3f5' }, // text - { tag: t.punctuation, color: '#91d7e3' }, // sky - { tag: t.bracket, color: '#91d7e3' }, // sky - { tag: t.typeName, color: '#8aadf4' }, // blue - { tag: t.attributeName, color: '#eed49f' }, // red - ], - }), - 'catppuccin-mocha': createTheme({ - variant: 'dark', - settings: { - background: '#1e1e2e', // base - foreground: '#cdd6f4', // text - caret: '#f5e0dc', // rosewater - selection: '#45475a', // surface0 - gutterBackground: '#181825', // mantle - gutterForeground: '#cdd6f4', // text - lineHighlight: '#313244', // surface0 - }, - styles: [ - { tag: t.keyword, color: '#cba6f7' }, // mauve - { tag: t.operator, color: '#89dceb' }, // sky - { tag: t.string, color: '#a6e3a1' }, // green - { tag: t.comment, color: '#9399b2', fontStyle: 'italic' }, // overlay1 - { tag: t.function(t.variableName), color: '#89b4fa' }, // blue - { tag: t.number, color: '#fab387' }, // peach - { tag: t.bool, color: '#fab387' }, // peach - { tag: t.className, color: '#f9e2af' }, // yellow - { tag: t.constant(t.variableName), color: '#fab387' }, // peach - { tag: t.variableName, color: '#cdd6f4' }, // text - { tag: t.punctuation, color: '#89dceb' }, // sky - { tag: t.bracket, color: '#89dceb' }, // sky - { tag: t.typeName, color: '#89b4fa' }, // blue - { tag: t.attributeName, color: '#f9e2af' }, // red - ], - }), }; diff --git a/src/livecodes/editor/monaco/monaco-themes.ts b/src/livecodes/editor/monaco/monaco-themes.ts index 8118339aa..831ef0267 100644 --- a/src/livecodes/editor/monaco/monaco-themes.ts +++ b/src/livecodes/editor/monaco/monaco-themes.ts @@ -1,6 +1,6 @@ import type * as Monaco from 'monaco-editor'; import type { MonacoTheme } from '../../models'; -import { monacoThemesBaseUrl } from '../../vendors'; +import { monacoThemesBaseUrl, vendorsBaseUrl } from '../../vendors'; export const monacoThemes: Array<{ name: MonacoTheme; title: string; url?: string }> = [ { @@ -41,18 +41,22 @@ export const monacoThemes: Array<{ name: MonacoTheme; title: string; url?: strin { name: 'catppuccin-latte', title: 'Catppuccin Latte', + url: vendorsBaseUrl + 'catppuccin/monaco/latte.json', }, { name: 'catppuccin-frappe', title: 'Catppuccin Frappe', + url: vendorsBaseUrl + 'catppuccin/monaco/frappe.json', }, { name: 'catppuccin-macchiato', title: 'Catppuccin Macchiato', + url: vendorsBaseUrl + 'catppuccin/monaco/macchiato.json', }, { name: 'catppuccin-mocha', title: 'Catppuccin Mocha', + url: vendorsBaseUrl + 'catppuccin/monaco/mocha.json', }, { name: 'chrome-devtools', @@ -363,257 +367,4 @@ export const customThemes: Array<{ name: MonacoTheme; theme: Monaco.editor.IStan }, }, }, - // Color Themes from https://catppuccin.com/palette - { - name: 'catppuccin-latte', - theme: { - base: 'vs', - inherit: true, - rules: [ - { token: '', foreground: '#4c4f69' }, // Text - { token: 'keyword', foreground: '#8839ef' }, // Mauve - { token: 'string', foreground: '#40a02b' }, // Green - { token: 'number', foreground: '#fe640b' }, // Peach - { token: 'comment', foreground: '#9ca0b0' }, // Overlay 0 - { token: 'type', foreground: '#1e66f5' }, // Blue - { token: 'function', foreground: '#04a5e5' }, // Sky - { token: 'variable', foreground: '#4c4f69' }, // Text - { token: 'constant', foreground: '#fe640b' }, // Peach - { token: 'parameter', foreground: '#ea76cb' }, // Pink - { token: 'class', foreground: '#df8e1d' }, // Yellow - { token: 'operator', foreground: '#04a5e5' }, // Sky - ], - colors: { - // Editor colors - 'editor.background': '#eff1f5', // Base - 'editor.foreground': '#4c4f69', // Text - 'editor.lineHighlightBackground': '#ccd0da', // Surface0 - 'editor.selectionBackground': '#acb0be', // Surface2 - 'editor.inactiveSelectionBackground': '#ccd0da', // Surface0 - - // Editor widgets - 'editorWidget.background': '#dce0e8', // Crust - 'editorWidget.border': '#ccd0da', // Surface0 - - // Sidebar - 'sideBar.background': '#dce0e8', // Crust - 'sideBar.foreground': '#4c4f69', // Text - - // Bracket pairs - 'editorBracketHighlight.foreground1': '#dc8a78', // Rosewater - 'editorBracketHighlight.foreground2': '#7287fd', // Lavender - 'editorBracketHighlight.foreground3': '#8839ef', // Mauve - 'editorBracketHighlight.foreground4': '#df8e1d', // Yellow - 'editorBracketHighlight.foreground5': '#ea76cb', // Pink - 'editorBracketHighlight.foreground6': '#179299', // Teal - 'editorBracketHighlight.unexpectedBracket.foreground': '#d20f39', // Red - - // Gutter - 'editorGutter.background': '#eff1f5', // Base - 'editorGutter.modifiedBackground': '#1e66f5', // Blue - 'editorGutter.addedBackground': '#40a02b', // Green - 'editorGutter.deletedBackground': '#d20f39', // Red - - // Line numbers - 'editorLineNumber.foreground': '#9ca0b0', // Overlay0 - 'editorLineNumber.activeForeground': '#4c4f69', // Text - - // Cursor - 'editorCursor.foreground': '#dc8a78', // Rosewater - - // Diff editor - 'diffEditor.insertedTextBackground': '#40a02b33', // Darker Green - 'diffEditor.removedTextBackground': '#d20f3933', // Darker Red - }, - }, - }, - { - name: 'catppuccin-frappe', - theme: { - base: 'vs-dark', - inherit: true, - rules: [ - { token: '', foreground: '#c6d0f5' }, // Text - { token: 'keyword', foreground: '#ca9ee6' }, // Mauve - { token: 'string', foreground: '#a6d189' }, // Green - { token: 'number', foreground: '#ef9f76' }, // Peach - { token: 'comment', foreground: '#737994' }, // Overlay 0 - { token: 'type', foreground: '#8caaee' }, // Blue - { token: 'function', foreground: '#99d1db' }, // Sky - { token: 'variable', foreground: '#c6d0f5' }, // Text - { token: 'constant', foreground: '#ef9f76' }, // Peach - { token: 'parameter', foreground: '#f4b8e4' }, // Pink - { token: 'class', foreground: '#e5c890' }, // Yellow - { token: 'operator', foreground: '#99d1db' }, // Sky - ], - colors: { - // Editor colors - 'editor.background': '#303446', // Base - 'editor.foreground': '#c6d0f5', // Text - 'editor.lineHighlightBackground': '#414559', // Surface0 - 'editor.selectionBackground': '#51576d', // Surface2 - 'editor.inactiveSelectionBackground': '#414559', // Surface0 - - // Editor widgets - 'editorWidget.background': '#292c3c', // Crust - 'editorWidget.border': '#414559', // Surface0 - - // Sidebar - 'sideBar.background': '#292c3c', // Crust - 'sideBar.foreground': '#c6d0f5', // Text - - // Bracket pairs - 'editorBracketHighlight.foreground1': '#f2d5cf', // Rosewater - 'editorBracketHighlight.foreground2': '#babbf1', // Lavender - 'editorBracketHighlight.foreground3': '#ca9ee6', // Mauve - 'editorBracketHighlight.foreground4': '#e5c890', // Yellow - 'editorBracketHighlight.foreground5': '#f4b8e4', // Pink - 'editorBracketHighlight.foreground6': '#81c8be', // Teal - 'editorBracketHighlight.unexpectedBracket.foreground': '#e78284', // Red - - // Gutter - 'editorGutter.background': '#303446', // Base - 'editorGutter.modifiedBackground': '#8caaee', // Blue - 'editorGutter.addedBackground': '#a6d189', // Green - 'editorGutter.deletedBackground': '#e78284', // Red - - // Line numbers - 'editorLineNumber.foreground': '#737994', // Overlay0 - 'editorLineNumber.activeForeground': '#c6d0f5', // Text - - // Cursor - 'editorCursor.foreground': '#f2d5cf', // Rosewater - - // Diff editor - 'diffEditor.insertedTextBackground': '#a6d18933', // Darker Green - 'diffEditor.removedTextBackground': '#e7828433', // Darker Red - }, - }, - }, - { - name: 'catppuccin-macchiato', - theme: { - base: 'vs-dark', - inherit: true, - rules: [ - { token: '', foreground: '#cad3f5' }, // Text - { token: 'keyword', foreground: '#c6a0f6' }, // Mauve - { token: 'string', foreground: '#a6da95' }, // Green - { token: 'number', foreground: '#f5a97f' }, // Peach - { token: 'comment', foreground: '#6e738d' }, // Overlay 0 - { token: 'type', foreground: '#8aadf4' }, // Blue - { token: 'function', foreground: '#91d7e3' }, // Sky - { token: 'variable', foreground: '#cad3f5' }, // Text - { token: 'constant', foreground: '#f5a97f' }, // Peach - { token: 'parameter', foreground: '#f5bde6' }, // Pink - { token: 'class', foreground: '#eed49f' }, // Yellow - { token: 'operator', foreground: '#91d7e3' }, // Sky - ], - colors: { - // Editor colors - 'editor.background': '#24273a', // Base - 'editor.foreground': '#cad3f5', // Text - 'editor.lineHighlightBackground': '#363a4f', // Surface0 - 'editor.selectionBackground': '#494d64', // Surface2 - 'editor.inactiveSelectionBackground': '#363a4f', // Surface0 - - // Editor widgets - 'editorWidget.background': '#181926', // Crust - 'editorWidget.border': '#363a4f', // Surface0 - - // Sidebar - 'sideBar.background': '#181926', // Crust - 'sideBar.foreground': '#cad3f5', // Text - - // Bracket pairs - 'editorBracketHighlight.foreground1': '#f4dbd6', // Rosewater - 'editorBracketHighlight.foreground2': '#b7bdf8', // Lavender - 'editorBracketHighlight.foreground3': '#c6a0f6', // Mauve - 'editorBracketHighlight.foreground4': '#eed49f', // Yellow - 'editorBracketHighlight.foreground5': '#f5bde6', // Pink - 'editorBracketHighlight.foreground6': '#8bd5ca', // Teal - 'editorBracketHighlight.unexpectedBracket.foreground': '#ed8796', // Red - - // Gutter - 'editorGutter.background': '#24273a', // Base - 'editorGutter.modifiedBackground': '#8aadf4', // Blue - 'editorGutter.addedBackground': '#a6da95', // Green - 'editorGutter.deletedBackground': '#ed8796', // Red - - // Line numbers - 'editorLineNumber.foreground': '#6e738d', // Overlay0 - 'editorLineNumber.activeForeground': '#cad3f5', // Text - - // Cursor - 'editorCursor.foreground': '#f4dbd6', // Rosewater - - // Diff editor - 'diffEditor.insertedTextBackground': '#a6da9533', // Darker Green - 'diffEditor.removedTextBackground': '#ed879633', // Darker Red - }, - }, - }, - { - name: 'catppuccin-mocha', - theme: { - base: 'vs-dark', - inherit: true, - rules: [ - { token: '', foreground: '#cdd6f4' }, // Text - { token: 'keyword', foreground: '#cba6f7' }, // Mauve - { token: 'string', foreground: '#a6e3a1' }, // Green - { token: 'number', foreground: '#fab387' }, // Peach - { token: 'comment', foreground: '#6c7086' }, // Overlay 0 - { token: 'type', foreground: '#89b4fa' }, // Blue - { token: 'function', foreground: '#89dceb' }, // Sky - { token: 'variable', foreground: '#cdd6f4' }, // Text - { token: 'constant', foreground: '#fab387' }, // Peach - { token: 'parameter', foreground: '#f5c2e7' }, // Pink - { token: 'class', foreground: '#f9e2af' }, // Yellow - { token: 'operator', foreground: '#89dceb' }, // Sky - ], - colors: { - // Editor colors - 'editor.background': '#1e1e2e', // Base - 'editor.foreground': '#cdd6f4', // Text - 'editor.lineHighlightBackground': '#313244', // Surface0 - 'editor.selectionBackground': '#45475a', // Surface2 - 'editor.inactiveSelectionBackground': '#313244', // Surface0 - - // Editor widgets - 'editorWidget.background': '#181825', // Crust - 'editorWidget.border': '#313244', // Surface0 - - // Sidebar - 'sideBar.background': '#181825', // Crust - 'sideBar.foreground': '#cdd6f4', // Text - - // Bracket pairs - 'editorBracketHighlight.foreground1': '#f5e0dc', // Rosewater - 'editorBracketHighlight.foreground2': '#b4befe', // Lavender - 'editorBracketHighlight.foreground3': '#cba6f7', // Mauve - 'editorBracketHighlight.foreground4': '#f9e2af', // Yellow - 'editorBracketHighlight.foreground5': '#f5c2e7', // Pink - 'editorBracketHighlight.foreground6': '#94e2d5', // Teal - 'editorBracketHighlight.unexpectedBracket.foreground': '#f38ba8', // Red - - // Gutter - 'editorGutter.background': '#1e1e2e', // Base - 'editorGutter.modifiedBackground': '#89b4fa', // Blue - 'editorGutter.addedBackground': '#a6e3a1', // Green - 'editorGutter.deletedBackground': '#f38ba8', // Red - - // Line numbers - 'editorLineNumber.foreground': '#6c7086', // Overlay0 - 'editorLineNumber.activeForeground': '#cdd6f4', // Text - - // Cursor - 'editorCursor.foreground': '#f5e0dc', // Rosewater - - // Diff editor (future proofing) - 'diffEditor.insertedTextBackground': '#a6e3a133', // Darker Green - 'diffEditor.removedTextBackground': '#f38ba833', // Darker Red - }, - }, - }, ]; diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts index 2a2e5bd57..736c73f3e 100644 --- a/src/livecodes/vendors.ts +++ b/src/livecodes/vendors.ts @@ -4,7 +4,7 @@ import { modulesService } from './services/modules'; const { getUrl, getModuleUrl } = modulesService; export const vendorsBaseUrl = // 'http://127.0.0.1:8081/'; - /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.17.0/dist/'); + /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.18.0/dist/'); export const acornUrl = /* @__PURE__ */ getUrl('acorn@8.12.1/dist/acorn.js');