Skip to content

Commit

Permalink
Update utilities (#1630)
Browse files Browse the repository at this point in the history 
* Update utilities

* Create proud-scissors-compete.md

* Update spacing

* Remove `-subtle` and `-muted`

Co-authored-by: Jon Rohan <yes@jonrohan.codes>
  • Loading branch information
@simurai @jonrohan
simurai and jonrohan authored Oct 8, 2021
1 parent d32e42f commit 5f7bb45
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 70 deletions.
5 changes: 5 additions & 0 deletions .changeset/proud-scissors-compete.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": major
---

Update utilities
18 changes: 9 additions & 9 deletions docs/content/support/v18-migration.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,21 +43,21 @@ See [color utility classes](/utilities/colors) for a list of all the functional

### Border

| `v16` | `v18` |
| ------------------------- | ------------------------- |
| `.color-border-primary` | `.color-border-default` |
| `.color-border-secondary` | `.color-border-muted` |
| `.color-border-tertiary` | `.color-border-default` |
| `.color-border-inverse` | n/a |
| `.color-border-info` | `.color-border-accent` |
| `.color-border-warning` | `.color-border-attention` |
| `v16` | `v18` |
| ------------------------- | ---------------------------------- |
| `.color-border-primary` | `.color-border-default` |
| `.color-border-secondary` | `.color-border-muted` |
| `.color-border-tertiary` | `.color-border-default` |
| `.color-border-inverse` | n/a |
| `.color-border-info` | `.color-border-accent-emphasis` |
| `.color-border-warning` | `.color-border-attention-emphasis` |

### Background

| `v16` | `v18` |
| --------------------------- | ------------------------------ |
| `.color-bg-canvas` | `.color-bg-default` |
| `.color-bg-canvas-inverse` | `.color-bg-neutral-emphasis` |
| `.color-bg-canvas-inverse` | `.color-bg-emphasis` |
| `.color-bg-canvas-inset` | `.color-bg-inset` |
| `.color-bg-primary` | `.color-bg-default` |
| `.color-bg-secondary` | `.color-bg-subtle` |
Expand Down
58 changes: 30 additions & 28 deletions docs/content/utilities/colors.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,40 +44,29 @@ Background colors are most commonly used for filling large blocks of content or
<div class="color-bg-default p-2 rounded mb-2">.color-bg-default</div>
<div class="color-bg-overlay p-2 rounded mb-2">.color-bg-overlay</div>
<div class="color-bg-inset p-2 rounded mb-2">.color-bg-inset</div>
<div class="color-bg-subtle p-2 rounded mb-4">.color-bg-subtle</div>
<div class="color-bg-subtle p-2 rounded mb-2">.color-bg-subtle</div>
<div class="color-bg-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-emphasis</div>

<div class="color-bg-neutral-emphasis-plus color-fg-on-emphasis p-2 rounded mb-2">.color-bg-neutral-emphasis-plus</div>
<div class="color-bg-neutral-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-neutral-emphasis</div>
<div class="color-bg-neutral-muted p-2 rounded mb-2">.color-bg-neutral-muted</div>
<div class="color-bg-neutral-subtle p-2 rounded mb-4">.color-bg-neutral-subtle</div>
<div class="color-bg-accent p-2 rounded mb-2">.color-bg-accent</div>
<div class="color-bg-accent-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-accent-emphasis</div>

<div class="color-bg-accent-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-accent-emphasis</div>
<div class="color-bg-accent-muted p-2 rounded mb-2">.color-bg-accent-muted</div>
<div class="color-bg-accent-subtle p-2 rounded mb-4">.color-bg-accent-subtle</div>
<div class="color-bg-success p-2 rounded mb-2">.color-bg-success</div>
<div class="color-bg-success-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-success-emphasis</div>

<div class="color-bg-success-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-success-emphasis</div>
<div class="color-bg-success-muted p-2 rounded mb-2">.color-bg-success-muted</div>
<div class="color-bg-success-subtle p-2 rounded mb-4">.color-bg-success-subtle</div>
<div class="color-bg-attention p-2 rounded mb-2">.color-bg-attention</div>
<div class="color-bg-attention-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-attention-emphasis</div>

<div class="color-bg-attention-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-attention-emphasis</div>
<div class="color-bg-attention-muted p-2 rounded mb-2">.color-bg-attention-muted</div>
<div class="color-bg-attention-subtle p-2 rounded mb-4">.color-bg-attention-subtle</div>
<div class="color-bg-severe p-2 rounded mb-2">.color-bg-severe</div>
<div class="color-bg-severe-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-severe-emphasis</div>

<div class="color-bg-severe-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-severe-emphasis</div>
<div class="color-bg-severe-muted p-2 rounded mb-2">.color-bg-severe-muted</div>
<div class="color-bg-severe-subtle p-2 rounded mb-4">.color-bg-severe-subtle</div>
<div class="color-bg-danger p-2 rounded mb-2">.color-bg-danger</div>
<div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-danger-emphasis</div>

<div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-danger-emphasis</div>
<div class="color-bg-danger-muted p-2 rounded mb-2">.color-bg-danger-muted</div>
<div class="color-bg-danger-subtle p-2 rounded mb-4">.color-bg-danger-subtle</div>
<div class="color-bg-done p-2 rounded mb-2">.color-bg-done</div>
<div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-done-emphasis</div>

<div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-done-emphasis</div>
<div class="color-bg-done-muted p-2 rounded mb-2">.color-bg-done-muted</div>
<div class="color-bg-done-subtle p-2 rounded mb-4">.color-bg-done-subtle</div>

<div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-sponsors-emphasis</div>
<div class="color-bg-sponsors-muted p-2 rounded mb-2">.color-bg-sponsors-muted</div>
<div class="color-bg-sponsors-subtle p-2 rounded">.color-bg-sponsors-subtle</div>
<div class="color-bg-sponsors p-2 rounded mb-2">.color-bg-sponsors</div>
<div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded">.color-bg-sponsors-emphasis</div>
```

## Border
Expand All @@ -90,12 +79,25 @@ Override default border colors with the following utilities.
<div class="border color-border-subtle p-2 rounded mb-4">.color-border-subtle</div>

<div class="border color-border-accent p-2 rounded mb-2">.color-border-accent</div>
<div class="border color-border-accent-emphasis p-2 rounded mb-4">.color-border-accent-emphasis</div>

<div class="border color-border-success p-2 rounded mb-2">.color-border-success</div>
<div class="border color-border-success-emphasis p-2 rounded mb-4">.color-border-success-emphasis</div>

<div class="border color-border-attention p-2 rounded mb-2">.color-border-attention</div>
<div class="border color-border-attention-emphasis p-2 rounded mb-4">.color-border-attention-emphasis</div>

<div class="border color-border-severe p-2 rounded mb-2">.color-border-severe</div>
<div class="border color-border-severe-emphasis p-2 rounded mb-4">.color-border-severe-emphasis</div>

<div class="border color-border-danger p-2 rounded mb-2">.color-border-danger</div>
<div class="border color-border-danger-emphasis p-2 rounded mb-4">.color-border-danger-emphasis</div>

<div class="border color-border-done p-2 rounded mb-2">.color-border-done</div>
<div class="border color-border-sponsors p-2 rounded">.color-border-sponsors</div>
<div class="border color-border-done-emphasis p-2 rounded mb-4">.color-border-done-emphasis</div>

<div class="border color-border-sponsors p-2 rounded mb-2">.color-border-sponsors</div>
<div class="border color-border-sponsors-emphasis p-2 rounded">.color-border-sponsors-emphasis</div>
```

## Link
Expand Down
6 changes: 3 additions & 3 deletions src/deprecations.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
"color-border-secondary": "color-border-muted",
"color-border-tertiary": "color-border-default",
"color-border-inverse": null,
"color-border-info": "color-border-accent",
"color-border-warning": "color-border-attention",
"color-border-info": "color-border-accent-emphasis",
"color-border-warning": "color-border-attention-emphasis",
"color-bg-canvas": "color-bg-default",
"color-bg-canvas-inverse": "color-bg-neutral-emphasis",
"color-bg-canvas-inverse": "color-bg-emphasis",
"color-bg-canvas-inset": "color-bg-inset",
"color-bg-primary": "color-bg-default",
"color-bg-secondary": "color-bg-subtle",
Expand Down
62 changes: 32 additions & 30 deletions src/utilities/colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,57 +18,59 @@

// Background

.color-bg-default { background-color: var(--color-canvas-default) !important; }
.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; }
.color-bg-inset { background-color: var(--color-canvas-inset) !important; }
.color-bg-subtle { background-color: var(--color-canvas-subtle) !important; }

.color-bg-neutral-emphasis-plus { background-color: var(--color-neutral-emphasis-plus) !important; }
.color-bg-neutral-emphasis { background-color: var(--color-neutral-emphasis) !important; }
.color-bg-neutral-muted { background-color: var(--color-neutral-muted) !important; }
.color-bg-neutral-subtle { background-color: var(--color-neutral-subtle) !important; }
.color-bg-default { background-color: var(--color-canvas-default) !important; }
.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; }
.color-bg-inset { background-color: var(--color-canvas-inset) !important; }
.color-bg-subtle { background-color: var(--color-canvas-subtle) !important; }
.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }

.color-bg-accent { background-color: var(--color-accent-subtle) !important; }
.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
.color-bg-accent-muted { background-color: var(--color-accent-muted) !important; }
.color-bg-accent-subtle { background-color: var(--color-accent-subtle) !important; }

.color-bg-success { background-color: var(--color-success-subtle) !important; }
.color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
.color-bg-success-muted { background-color: var(--color-success-muted) !important; }
.color-bg-success-subtle { background-color: var(--color-success-subtle) !important; }

.color-bg-attention { background-color: var(--color-attention-subtle) !important; }
.color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
.color-bg-attention-muted { background-color: var(--color-attention-muted) !important; }
.color-bg-attention-subtle { background-color: var(--color-attention-subtle) !important; }

.color-bg-severe { background-color: var(--color-severe-subtle) !important; }
.color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
.color-bg-severe-muted { background-color: var(--color-severe-muted) !important; }
.color-bg-severe-subtle { background-color: var(--color-severe-subtle) !important; }

.color-bg-danger { background-color: var(--color-danger-subtle) !important; }
.color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
.color-bg-danger-muted { background-color: var(--color-danger-muted) !important; }
.color-bg-danger-subtle { background-color: var(--color-danger-subtle) !important; }

.color-bg-done { background-color: var(--color-done-subtle) !important; }
.color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
.color-bg-done-muted { background-color: var(--color-done-muted) !important; }
.color-bg-done-subtle { background-color: var(--color-done-subtle) !important; }

.color-bg-sponsors { background-color: var(--color-sponsors-subtle) !important; }
.color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
.color-bg-sponsors-muted { background-color: var(--color-sponsors-muted) !important; }
.color-bg-sponsors-subtle { background-color: var(--color-sponsors-subtle) !important; }

// Border

.color-border-default { border-color: var(--color-border-default) !important; }
.color-border-muted { border-color: var(--color-border-muted) !important; }
.color-border-subtle { border-color: var(--color-border-subtle) !important; }

.color-border-accent { border-color: var(--color-accent-emphasis) !important; }
.color-border-success { border-color: var(--color-success-emphasis) !important; }
.color-border-attention { border-color: var(--color-attention-emphasis) !important; }
.color-border-severe { border-color: var(--color-severe-emphasis) !important; }
.color-border-danger { border-color: var(--color-danger-emphasis) !important; }
.color-border-done { border-color: var(--color-done-emphasis) !important; }
.color-border-sponsors { border-color: var(--color-sponsors-emphasis) !important; }
.color-border-accent { border-color: var(--color-accent-muted) !important; }
.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }

.color-border-success { border-color: var(--color-success-muted) !important; }
.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }

.color-border-attention { border-color: var(--color-attention-muted) !important; }
.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }

.color-border-severe { border-color: var(--color-severe-muted) !important; }
.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }

.color-border-danger { border-color: var(--color-danger-muted) !important; }
.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }

.color-border-done { border-color: var(--color-done-muted) !important; }
.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }

.color-border-sponsors { border-color: var(--color-sponsors-muted) !important; }
.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }

// Misc

Expand Down

0 comments on commit 5f7bb45

Please sign in to comment.