feat(code-snippet): Add tabs - #56317
Conversation
| const darkColors = { | ||
| textColor: '#e0dce5', | ||
| subText: '#80708f', | ||
| border: '#40364a', | ||
| }; |
There was a problem hiding this comment.
Rather than using raw values, why don't we use prism variables (--prism-base for text, --prism-comment for subtext, and --prism-highlight-accent for borders)? That way, we don't have switch between dark and light colors based on the dark prop (L110 below) — it's already handled via the prism-dark class name on <Wrapper /> (L113 below).
There was a problem hiding this comment.
I had it like this in my initial implementation but thought that it could be confusion as --prism-comment has a clear semantic meaning.
E.g. if someone changes the comments to be green they would expect the tab text to change too. 🤔
However, for the sake of shipping value I will change it to your proposition and merge it.
Maybe there is a better suited variable or we introduce a new one in the future?
There was a problem hiding this comment.
yeah it's not ideal, but I think it's preferable to using raw values since if in the future we change the colors in the design system we'll likely forget to also change it here.
CodeSnippet componentDark theme:

Light theme:

Light theme (

dark=true):