[WIP/Prototype]: NewToken component

[lukasoppermann]

Describe your changes here.

Closes # (type the issue number after # if applicable; otherwise remove this line)

Screenshots

Please provide before/after screenshots for any visual changes

Merge checklist

• [ ] Added/updated tests
• [ ] Added/updated documentation
• [ ] Changes are SSR compatible
• [ ] Tested in Chrome
• [ ] Tested in Firefox
• [ ] Tested in Safari
• [ ] Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 4a77cf68accdc38ec54114682b727a9d8b5f380b

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	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

[github-actions[bot]]

size-limit report 📦

Path	Size
dist/browser.esm.js	104.2 KB (0%)
dist/browser.umd.js	104.74 KB (0%)

[mperrotti]

We have a major release coming up. Instead of adding a new token component, we could just modify the existing one.

[lukasoppermann]

We have a major release coming up. Instead of adding a new token component, we could just modify the existing one.

yes, that's the plan. I just want to keep the old stuff around for now, while I am prototyping.

The goal is to merge this with the current tokens in one way or another.

@mperrotti when is this major release?

[maximedegreve]

I've noticed that in dark mode the contrast isn't enough for background in some instances. For example the purple here.

[lukasoppermann]

I've noticed that in dark mode the contrast isn't enough for background in some instances.

Just updated the colors to the latest version:

All step 0 colors have a ~ 1.1:1 contrast with the bg. This slightly improves contrast e.g. for the purple, but is still low contrast. This is currently by design because those same colors are used for things like the banners and the colors are (visually) higher contrast when bigger:

I think the question here is what we want overall. We could of courser increase contrast to 1.2:1 but this would increase it for things like the banner as well. (In light mode we use a 1.2:1 contrast because it visually is less intense and dark mode at github was historically low contrast).

Another option would be to use step 1 instead. But what do we do for light mode? Increasing it to step 1 as well would be very strong. Using different steps feels a bit untidy but could also be a fine solution, as long as we add a comment in code.

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.