feat: theme tokens

[bennypowers]

Added theme tokens, for responsive theming.

IMPORTANT!

👉 PLEASE SEE RedHat-UX/red-hat-design-system#1792 👈

Notes to reviewers

Let's give a think about the new token names. for things like --rh-color-border-subtle, it's easy to just chop of the -on-light|dark suffix, but for --rh-color-interactive-blue|purple-lighest|darkest etc, I had to get a bit creative:

rh-surface#theme-link-demo {
  & a {
    color: var(--rh-color-interactive-blue-normal);
    &:hover,
    &:focus-within
    &:active { color: var(--rh-color-interactive-blue-emphasized); }
    &:visited {
      color: var(--rh-color-interactive-purple-normal);
      &:hover,
      &:focus-within
      &:active { color: var(--rh-color-interactive-purple-emphasized); }
    }
  }
}

TODO

• implement icon and status tokens
• update docs
• ensure css output is legal (no multiple color values)
• ensure editor snippets make sense
• update token syntax to work well with sd's dtcg transforms

[changeset-bot]

🦋 Changeset detected

Latest commit: 6a41135

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@rhds/tokens	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for red-hat-design-tokens ready!

Name	Link
🔨 Latest commit	6a41135
🔍 Latest deploy log	https://app.netlify.com/sites/red-hat-design-tokens/deploys/66d702859e9dc20008debc48
😎 Deploy Preview	https://deploy-preview-138--red-hat-design-tokens.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bennypowers]

should also implement icon status tokens from #127. edit: done

[marionnegp]

@bennypowers, if you're looking to change up some of the more difficult-to-theme token names, @coreyvickery had some ideas in this Red Hat Color Usage Reference spreadsheet. Check out the interactive tokens section, which should help with the theming and would get rid of purple and blue in the names.

[coreyvickery]

Please advise if the spreadsheet is up to date

@bennypowers It is now, but with your recent Slack message, I think this can be the last thing the designers work with in that spreadsheet until we all figure out how to work in the repo like you want us to.

[bennypowers]

ok @coreyvickery and @marionnegp I think this is ready for review. Please carefully check the deploy preview, especially the colour tokens, and make sure everything's correct. it would be really nice to get some more prose on the status tokens and what they mean, too - i tried my best but i'm not sure i really captured the idea

[bennypowers]

@marionnegp @coreyvickery so i think i'll merge this tomorrow and cut a prerelease so we can test this in RHDS. We'll still be able to make any changes we need before officially releasing 2.1