Twilio Paste Intellisense should read from actual theme, not hard-coded values

[brandongregoryscott]

Hey team! I'm starting to dive into Paste more and I found the tokenization to be particularly time-consuming to work with, as described by the Twilio Paste Intellisense README. I had to have multiple theme files up next to my component implementation in VS Code to cross-reference the actual values of spacing/color/font tokens.

The VS Code extension is a really good starting point to get familiar with what common tokens resolve to, but after some further digging, I realized it's not reading my current theme, which is a custom Evergreen-ish theme in the Segment app. I assume it's providing values for the default Paste theme right now - looking at the implementation, all of those tokens and values are hard-coded into the extension, which obviously makes it easier for the real values to drift from what the extension is saying they are.

It would be really awesome for the extension to:

1. Read from the actual Paste theme object instead of duplicating the tokens & values in the extension itself
2. Expose a configuration setting so that any themes provided directly by Paste (i.e. dark theme, Evegreen theme, One Twilio) can be shown on hover
3. (A really nice-to-have) Expose a configuration setting so that any custom theme (i.e. one that's been built locally using generateThemeFromTokens) can be used & shown on hover

Do we think this is possible with the way the theme(s) are packaged up and exported? I'm happy to help out with this if we think it's feasible to import/reference in the extension code.

[loreina]

Hi @brandongregoryscott, thanks for the idea. I've brought this back to the team and someone will reach out shortly to follow up. Cheers!

[loreina]

Hi @brandongregoryscott,

I spoke with the team and we think this would be a great improvement to the extension! We encourage you to open a PR to contribute the improvement and our team can hop in to review it. It would also be good to connect with @gkassym who initially contributed the extension to Paste.

Let us know if you have any other questions. Thanks for helping to make Paste better!

[brandongregoryscott]

Are we OK losing the comments that are currently available in the extension? i.e. when you have hover colorBackground, it shows Background color used for containers.' - this is currently hard-coded in.

The token objects exported in @twilio-paste/design-tokens don't have this description/commentary data available (or at least they don't right now). I'm seeing these comments in the CSS files (https://unpkg.com/browse/@twilio-paste/[email protected]/dist/tokens.default.scss), but we'd need them available as actual properties in the JS/JSON to parse.

I was thinking we could also update the Paste doc site to provide deep-links to each token on this listing page: https://paste.twilio.design/tokens/list, so we could programmatically add links for each, i.e. https://paste.twilio.design/tokens/list#color-background

I opened up a PR with the changes for 1 & 2 here: #2980

[brandongregoryscott]

Another improvement we could add is rendering a little box with the fill color (SendGrid theme used in these screenshots, I believe):

[gkassym]

Hey, it would be nice 👍

[brandongregoryscott]

I'll make a follow-up PR for this so the original one is a little more focused 👍 It might be nice to expose a config setting to turn this on/off as well, since it takes up more screen real estate. I think most people will probably find it useful though. Based off of this extension that I've used before: https://github.com/mattbierner/vscode-color-info

[gloriliale]

Update: these changes have been finalized and are now a part of our repo! Thanks so much @brandongregoryscott and @gkassym! 🎉

[gkassym]

@brandongregoryscott did a great job 👏