Add Catppuccin Colors

[Shlok-Bhakta]

What type of PR is this? (check all applicable)

• ✨ Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• ♻️ Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert
• 🌐 Internationalization / Translation

Description

This adds cappuccin colors to the editor from
https://catppuccin.com/palette

Following the spec as close as I could
https://github.com/catppuccin/catppuccin/blob/main/docs/style-guide.md

Related Tickets & Documents

Implements #686

Mobile & Desktop Screenshots/Recordings

Monaco

Catppuccin Latte

Catppuccin Frappe

Catppuccin Macchiato

Catppuccin Mocha

Codemirror

Catppuccin Latte

Catppuccin Frappe

Catppuccin Macchiato

Catppuccin Mocha

Codejar

Catppuccin Latte

Catppuccin Frappe

Catppuccin Macchiato

Catppuccin Mocha

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentations?

• 📓 docs (./docs)
• 📕 storybook (./storybook)
• 📜 README.md
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

None

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for livecodes ready!

Name	Link
🔨 Latest commit	1ac1ced
🔍 Latest deploy log	https://app.netlify.com/sites/livecodes/deploys/676015f5cefe2d00080b666e
😎 Deploy Preview	https://deploy-preview-688--livecodes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Shlok-Bhakta]

how do I not duplicate code when adding a theme? @hatemhosny

[sonarqubecloud]

Quality Gate failed

Failed conditions
5.0% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[hatemhosny]

Thank you @Shlok-Bhakta
That's very nice indeed.

I prefer to keep external dependencies (like themes), outside LiveCodes code base.
This way we keep the bundle size smaller and we can lazy-load each theme on demand from a fast CDN (e.g. jsdelivr/unpkg).
This also reduces a lot of the code duplication in this code base.

Previously, I inlined the monochrome themes because they were very simple so that they were not worth the extra URL requests.

I moved the themes you added to another repo (https://github.com/live-codes/browser-compilers) which I use for many of the dependencies like this (including language compilers, etc), and I published it to npm so that we can load these dependencies from CDNs that mirror npm. e.g. https://unpkg.com/browse/@live-codes/browser-compilers@0.18.0/dist/catppuccin/

Please check the deploy preview (https://deploy-preview-688--livecodes.netlify.app/) and if you are happy with it I will merge the PR.
Thanks a lot.

[Shlok-Bhakta]

Themes look good to me! Thank you for fixing my issue!

[hatemhosny]

Thank you, @Shlok-Bhakta
The PR is merged.
You can test it on the development build on: dev.livecodes.io

This will land in livecodes.io in the next release which is planned by the end of this week.
If you have a twitter account, please send it, so that I can give you credit there when the next version is released.
Thanks a lot and you are very welcome to keep contributing to LiveCodes ❤️

[Shlok-Bhakta]

Awesome! my twitter is @shlokbhakta

can't wait to use this theme on my blog!

[hatemhosny]

Awesome! my twitter is @shlokbhakta

can't wait to use this theme on my blog!

You may also be interested in this new feature coming in this release, which can use the new themes!