New Tokens: Code Color Scheme

[bennypowers]

We need a code syntax color scheme for prism, and alternatively for vim/v****e

[coreyvickery]

@bennypowers Does this refer to colors for syntax highlighting?

[bennypowers]

yes, so we could use it for markdown highlighting, code playgrounds, snippets, and editor color themes, whathaveyou

[coreyvickery]

@bennypowers This is in progress, I am working with other design teams to try and unify one color scheme. It would be great to see examples of the things you need these values for even if they are quick screenshots.

[bennypowers]

https://github.com/PrismJS/prism-themes

[bennypowers]

I'd recommend starting by defining terminal ascii colours, for example this version of Catppuccin Mocha for Black Box terminal

from there we can then do a prism syntax theme, treesitter syntax theme (e.g. that same catppuccin theme for neovim)

[coreyvickery]

@bennypowers I think I can provide you with values because we are moving on to creating rh-code-block.

https://github.com/RedHat-UX/red-hat-design-system/issues/328

[bennypowers]

I added this to 1.0 milestone, since it's WIP

[bennypowers]

We need this for demo playgrounds as well (spin this out into a new issue later on)

[coreyvickery]

@bennypowers How would you like me to deliver this information to you? Do you need the hex color codes and token names? Anything else?

[bennypowers]

yeah that should do. you're welcome to start a pr if you're interested

[bennypowers]

Here are some token (by which i mean programming language token, not design token) names from prism.js, loosely sorted into three groups by order of importance

comment
property
keyword
tag
class-name
boolean
constant
punctuation
number
attr-name
string
symbol
variable
operator
attr-value
function
regex

namespace
deleted
selector
char
builtin
inserted
entity
url
atrule
important

prolog
doctype
cdata

I get the sense that if we assign token (design tokens) to these, that's pretty much job done.

TODO: demo codepen for Corey to muck about with, featuring:

• HTML/JS/CSS
• Bash
• Markdown
• Go
• Rust
• JSON
• YAML

[coreyvickery]

@marionnegp Tagging you to take over.

[coreyvickery]

@bennypowers @nikkimk Current colors, see screens 3 and 9.

https://xd.adobe.com/view/c4cc943e-618d-4fbe-8ab2-8e29fd135393-919f/

Let me know if you have specific questions about where to apply them.

[bennypowers]

are those existing crayon colours?

[markcaron]

Feel free to disagree, but as for the language support, I'd say...

Need first

1. HTML/JS/CSS
2. Bash
3. Typescript
4. Markdown
5. JSON
6. YAML

Next set

1. PHP
2. Python
3. Java
4. Twig
5. C#
6. Go
7. Rust

And anything else forgetting.