INN-3033: make code editor support tailwind/system color schema and overrides

[jacobheric]

Description

Code editor was previously hard coded to use a dark theme. Now it will use the tailwind/system color scheme by default and also support the ability to override the color scheme per use. This is useful for things like the current function view in the dashboard that we still want dark despite the fact that the dashboard itself use a light color scheme.

Here the webhooks editor gets the default light:

And the function editor is overriden to dark

Motivation

Type of change (choose one)

• [x ] Chore (refactors, upgrades, etc.)
• Bug fix (non-breaking change that fixes an issue)
• Security fix (non-breaking change that fixes a potential vulnerability)
• Docs
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality not to work as expected)

Checklist

• [ x] I've linked any associated issues to this PR.
• [ x] I've tested my own changes.

https://linear.app/inngest/issue/INN-3033/add-light-theme-to-code-block

Check our Pull Request Guidelines

[linear]

INN-3033 Add light theme to Code Block

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 16, 2024 1:15pm

[jacobheric]

There are a couple visual quirks to the editor that light mode exposed (see lower border corners). I'll clean those up.

[jacobheric]

Do we want to make the editor toolbar light as well? I've left it dark for now as it more or less matches the rest of the current design.

[anafilipadealmeida]

Do we want to make the editor toolbar light as well? I've left it dark for now as it more or less matches the rest of the current design.

It's a great question. Yes! In light mode, the border of the entire block should be border-slate-200, we should replace the backgrounds by bg-white, and text and description text-white by text-slate-700. We can ignore the button colors for now

[jacobheric]

I believe I've addressed all the items we talked about in review with the exception of the transparent scrollbars. I couldn't find any easy way to do that via monaco options so I just let that be for now.

Updates are:

1. use figma colors for all light theme attributes
2. update header to respect light theme
3. use outline buttons that support dark/light in header
4. remove manual dark override and instead update helper dark detector to find any parent level tailwind dark class
5. fixe broken border corners on all editors after the first

They now look like:

[jacobheric]

This was the cause of the broken borders as it was not adding this class when there were more than one editor on the page. So instead I just removed it and applied this globally via css, see above.

[anafilipadealmeida]

Looking good @jacobheric ! Left a few small comments 🙂

[jacobheric]

Thanks @anafilipadealmeida for the careful review, I think I've addressed all your comments! Let me know if you see anything else.

Also, I see I'm getting an invalid dom nesting error now that I've switched to the new buttons. I'll give that a look and fix before we merge.

[jacobheric]

@anafilipadealmeida, the dom nesting error I was getting was because I added tooltips to our buttons. Rendering the tooltip trigger button as a child element prevents this nesting. I clicked around after making this change and all the tooltips seem to be working as expected.

[anafilipadealmeida]

Thank you for all the hard work, looking great! Left a final small comment, but approving this already!