CodeBlock Light Theme

[rmatuszczakp]

Hello! I have one more question regarding the new CodeBlock component. Is there any way to use the night owl light theme :

If this is not currently supported, what would be the most straightforward way to make it work. I know we have the CustomizationProvider but it's not straightforward as to how I would use such a theme with this.

[ghost]

Hi @rmatuszczakp thanks for the discussion. Today the syntax highlighting is hard coded by our component implementation. I've started a conversation with the team about opening up an API to allow for downstream consumer style overrides for use cases like yours. Unfortunately, it doesn't appear that there are any pre-made style definitions for a night-owl-light theme so it may require building your own in a fashion similar to these.

To be even more clear, the code snippet syntax highlighting styles for CodeBlock operate orthogonally from any sort of component Customization API, and tangentially to the Paste theme API! Put another way, the Paste theme values are consumed by the hard coded styles created for the syntax highlighting here.

[rosemaryluo]

Hello! I'm the product designer working with Rafal on this.
We were very excited to hear of Paste launching the component since it's shown fairly early on in our onboarding flows and our current version is lacking syntax highlighting.

We are concerned it would be somewhat jarring on the page to use the dark themed codeblock, and this gives us pause for migrating over to using the codeblock component. I'd like to get an understanding of whether there are plans to add a light theme to codeblock on Paste in the foreseeable future or confirm that the standing recommendation is to create a custom theme / highlighting if we choose to migrate & need the light theme.
Thanks for your help!

[ghost]

thanks @rosemaryluo I shared this with the larger group. There is still some ongoing discussion around this request internal to the team so we'll leave the discussion labelled as open for now!

[nkrantz]

Hey @rmatuszczakp @rosemaryluo - thanks for providing the additional context. Although it doesn't match the light theme of the previous component you were using, I'd recommend trying out our current Code Block with the dark theme to see how it feels. We made the decision to only release the dark Code Block for a variety of reasons, including the benefit of consistency across products. If, however, you test it out and it performs poorly, we'd love for you to share some of that customer feedback with us.

Unfortunately the Customization Provider is only for use in external projects. All Twilio products using Paste should be using the Theme Provider.

[rosemaryluo]

Thanks Nora, that makes sense to me, we'll do our best to adopt the existing dark theme code block & share feedback. Minor follow up--is there a timeline for when the Figma component for the code block to be out? Wondering how far to go into creating a placeholder 😆

[serifluous]

Hey @rosemaryluo ! It's going to take a bit of time (probably around December) for us to get the Figma component out because it's a little more complex than some other components (which you're probably thinking through too 🙃 ).

IF you're looking for something just to use as a placeholder component for now, you could try copying/pasting these ones from the One Twilio stress-testing doc: https://www.figma.com/file/CdiQcSmCN1dS9BVmXixJPC/One-Twilio-Theme-Stress-Testing-Q4-2022?node-id=51%3A128871 and see if that works well enough for you and your team for now.

[rosemaryluo]

Yaaaaas that's perfect! Thanks, Sarah!

[gkushwahaTWLO]

Hello @serifluous ! Just wanted to check if there is an update on the timeline for the Figma component for the code block to be out? Thanks in advance.

[serifluous]

@gkushwahaTWLO Yes! It's currently in our new Paste components library: https://www.figma.com/file/l2qtpQVMmXzQPVB3rEAA8i/%5BNEW%5D-Paste-Components?node-id=23096%3A244448&t=V4sBKsWPe6x9NaD2-0

We're currently in the process of transitioning designers from using the existing components library to this new one because we've updated the components' visual style. You can read more about that process here: https://docs.google.com/document/d/1RACJwSG78YJtKMDgFY-VnbUzYyDqTae8nc3e-Y9a9Ho/edit#heading=h.yraoatyl7o2e

You might also notice the visual style is slightly different from what's shown on the Code Block React component. We're in the process of updating all our components, so Code Block will soon update to look like the component in the Figma file.

[smultani]

Hey Paste team, I'm curious if there has been any changes regarding light codeblocks. Within Segment, we have a lot of light colored pages that now have dark code blocks and it's pretty jarring for me to see the high contrast difference.

I don't have any data experience, but I suspect the dark code blocks are intimidating for non-technical personas that are using other parts of Segment with light backgrounds.

Could we consider a light code block approach?

[serifluous]

Hey @smultani ! Can you fill out a dependency request for this? https://airtable.com/appwvsQKyJHfnG5Sa/shrvMvL3BG6Zm0f9l and include screenshots where it feels especially intimidating?

We haven't heard of other teams getting this feedback yet, so a light Code Block isn't in our backlog right now. If you can update us with tangible research or customer feedback when you get it, that'd help us prioritize this. Thanks!