Update utilities

[simurai]

This updates the utilities.

• The muted roles are now used for borders, instead of backgrounds
• The neutral backgrounds are removed
• The .color-bg-neutral-emphasis-plus got renamed to .color-bg-emphasis and is the replacement for .color-bg-canvas-inverse in v1

Backgrounds	Borders

[changeset-bot]

🦋 Changeset detected

Latest commit: a8a9cba

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

This PR includes changesets to release 1 package

Name	Type
@primer/css	Major

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

[auareyou]

Thanks @simurai - The only thing I'd change is I would remove 'subtle' and 'muted' from the naming in color role backgrounds and borders. For example:

.color-bg-accent
.color-bg-accent-emphasis

.color-border-accent
.color-border-accent-emphasis

This one folks don't need to guess what muted or subtle is, they'll just know it's not emphasis

[colebemis]

✨

[simurai]

The only thing I'd change is I would remove 'subtle' and 'muted' from the naming in color role backgrounds and borders.
This one folks don't need to guess what muted or subtle is, they'll just know it's not emphasis

Yeah, I was debating about that too. It would make it less verbose and without the bg -> subtle, border -> muted oddity. My thinking was that when seeing .color-bg-accent I'm less sure what to expect. But with .color-bg-accent-subtle I can guess only by the name that it will be a subtle/faded color.

Another point is that when searching for color-bg-accent the results will be mixed with color-bg-accent-emphasis. Like currently when searching for color-bg-info the color-bg-info-inverse will also show up.

There might be a regex for only finding color-bg-accent and excluding color-bg-accent-emphasis? /cc @jonrohan

Anyone else with strong opinions about it? Maybe @ashygee?

[jonrohan]

There might be a regex for only finding color-bg-accent and excluding color-bg-accent-emphasis?

You can regex search like this color-bg-accent[^-] where the last character would be anything except -.

[simurai]

You can regex search like this color-bg-accent[^-] where the last character would be anything except -.

Nice. Saved for later. 👍

[simurai]

@auareyou Ok, the utility names are now updated without the -subtle and -muted for backgrounds and borders.

Here a preview. 👀