Skip to content

Commit 5f7bb45

Browse files
simuraijonrohan
simurai
and
jonrohan
authored
Update utilities (#1630)
* Update utilities * Create proud-scissors-compete.md * Update spacing * Remove `-subtle` and `-muted` Co-authored-by: Jon Rohan <yes@jonrohan.codes>
1 parent d32e42f commit 5f7bb45

File tree

5 files changed

+79
-70
lines changed

5 files changed

+79
-70
lines changed

‎.changeset/proud-scissors-compete.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": major
3+
---
4+
5+
Update utilities

‎docs/content/support/v18-migration.mdx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,21 +43,21 @@ See [color utility classes](/utilities/colors) for a list of all the functional
4343

4444
### Border
4545

46-
| `v16` | `v18` |
47-
| ------------------------- | ------------------------- |
48-
| `.color-border-primary` | `.color-border-default` |
49-
| `.color-border-secondary` | `.color-border-muted` |
50-
| `.color-border-tertiary` | `.color-border-default` |
51-
| `.color-border-inverse` | n/a |
52-
| `.color-border-info` | `.color-border-accent` |
53-
| `.color-border-warning` | `.color-border-attention` |
46+
| `v16` | `v18` |
47+
| ------------------------- | ---------------------------------- |
48+
| `.color-border-primary` | `.color-border-default` |
49+
| `.color-border-secondary` | `.color-border-muted` |
50+
| `.color-border-tertiary` | `.color-border-default` |
51+
| `.color-border-inverse` | n/a |
52+
| `.color-border-info` | `.color-border-accent-emphasis` |
53+
| `.color-border-warning` | `.color-border-attention-emphasis` |
5454

5555
### Background
5656

5757
| `v16` | `v18` |
5858
| --------------------------- | ------------------------------ |
5959
| `.color-bg-canvas` | `.color-bg-default` |
60-
| `.color-bg-canvas-inverse` | `.color-bg-neutral-emphasis` |
60+
| `.color-bg-canvas-inverse` | `.color-bg-emphasis` |
6161
| `.color-bg-canvas-inset` | `.color-bg-inset` |
6262
| `.color-bg-primary` | `.color-bg-default` |
6363
| `.color-bg-secondary` | `.color-bg-subtle` |

‎docs/content/utilities/colors.mdx‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -44,40 +44,29 @@ Background colors are most commonly used for filling large blocks of content or
4444
<div class="color-bg-default p-2 rounded mb-2">.color-bg-default</div>
4545
<div class="color-bg-overlay p-2 rounded mb-2">.color-bg-overlay</div>
4646
<div class="color-bg-inset p-2 rounded mb-2">.color-bg-inset</div>
47-
<div class="color-bg-subtle p-2 rounded mb-4">.color-bg-subtle</div>
47+
<div class="color-bg-subtle p-2 rounded mb-2">.color-bg-subtle</div>
48+
<div class="color-bg-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-emphasis</div>
4849

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

54-
<div class="color-bg-accent-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-accent-emphasis</div>
55-
<div class="color-bg-accent-muted p-2 rounded mb-2">.color-bg-accent-muted</div>
56-
<div class="color-bg-accent-subtle p-2 rounded mb-4">.color-bg-accent-subtle</div>
53+
<div class="color-bg-success p-2 rounded mb-2">.color-bg-success</div>
54+
<div class="color-bg-success-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-success-emphasis</div>
5755

58-
<div class="color-bg-success-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-success-emphasis</div>
59-
<div class="color-bg-success-muted p-2 rounded mb-2">.color-bg-success-muted</div>
60-
<div class="color-bg-success-subtle p-2 rounded mb-4">.color-bg-success-subtle</div>
56+
<div class="color-bg-attention p-2 rounded mb-2">.color-bg-attention</div>
57+
<div class="color-bg-attention-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-attention-emphasis</div>
6158

62-
<div class="color-bg-attention-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-attention-emphasis</div>
63-
<div class="color-bg-attention-muted p-2 rounded mb-2">.color-bg-attention-muted</div>
64-
<div class="color-bg-attention-subtle p-2 rounded mb-4">.color-bg-attention-subtle</div>
59+
<div class="color-bg-severe p-2 rounded mb-2">.color-bg-severe</div>
60+
<div class="color-bg-severe-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-severe-emphasis</div>
6561

66-
<div class="color-bg-severe-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-severe-emphasis</div>
67-
<div class="color-bg-severe-muted p-2 rounded mb-2">.color-bg-severe-muted</div>
68-
<div class="color-bg-severe-subtle p-2 rounded mb-4">.color-bg-severe-subtle</div>
62+
<div class="color-bg-danger p-2 rounded mb-2">.color-bg-danger</div>
63+
<div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-danger-emphasis</div>
6964

70-
<div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-danger-emphasis</div>
71-
<div class="color-bg-danger-muted p-2 rounded mb-2">.color-bg-danger-muted</div>
72-
<div class="color-bg-danger-subtle p-2 rounded mb-4">.color-bg-danger-subtle</div>
65+
<div class="color-bg-done p-2 rounded mb-2">.color-bg-done</div>
66+
<div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-done-emphasis</div>
7367

74-
<div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-done-emphasis</div>
75-
<div class="color-bg-done-muted p-2 rounded mb-2">.color-bg-done-muted</div>
76-
<div class="color-bg-done-subtle p-2 rounded mb-4">.color-bg-done-subtle</div>
77-
78-
<div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-sponsors-emphasis</div>
79-
<div class="color-bg-sponsors-muted p-2 rounded mb-2">.color-bg-sponsors-muted</div>
80-
<div class="color-bg-sponsors-subtle p-2 rounded">.color-bg-sponsors-subtle</div>
68+
<div class="color-bg-sponsors p-2 rounded mb-2">.color-bg-sponsors</div>
69+
<div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded">.color-bg-sponsors-emphasis</div>
8170
```
8271

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

9281
<div class="border color-border-accent p-2 rounded mb-2">.color-border-accent</div>
82+
<div class="border color-border-accent-emphasis p-2 rounded mb-4">.color-border-accent-emphasis</div>
83+
9384
<div class="border color-border-success p-2 rounded mb-2">.color-border-success</div>
85+
<div class="border color-border-success-emphasis p-2 rounded mb-4">.color-border-success-emphasis</div>
86+
9487
<div class="border color-border-attention p-2 rounded mb-2">.color-border-attention</div>
88+
<div class="border color-border-attention-emphasis p-2 rounded mb-4">.color-border-attention-emphasis</div>
89+
9590
<div class="border color-border-severe p-2 rounded mb-2">.color-border-severe</div>
91+
<div class="border color-border-severe-emphasis p-2 rounded mb-4">.color-border-severe-emphasis</div>
92+
9693
<div class="border color-border-danger p-2 rounded mb-2">.color-border-danger</div>
94+
<div class="border color-border-danger-emphasis p-2 rounded mb-4">.color-border-danger-emphasis</div>
95+
9796
<div class="border color-border-done p-2 rounded mb-2">.color-border-done</div>
98-
<div class="border color-border-sponsors p-2 rounded">.color-border-sponsors</div>
97+
<div class="border color-border-done-emphasis p-2 rounded mb-4">.color-border-done-emphasis</div>
98+
99+
<div class="border color-border-sponsors p-2 rounded mb-2">.color-border-sponsors</div>
100+
<div class="border color-border-sponsors-emphasis p-2 rounded">.color-border-sponsors-emphasis</div>
99101
```
100102

101103
## Link

‎src/deprecations.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@
2020
"color-border-secondary": "color-border-muted",
2121
"color-border-tertiary": "color-border-default",
2222
"color-border-inverse": null,
23-
"color-border-info": "color-border-accent",
24-
"color-border-warning": "color-border-attention",
23+
"color-border-info": "color-border-accent-emphasis",
24+
"color-border-warning": "color-border-attention-emphasis",
2525
"color-bg-canvas": "color-bg-default",
26-
"color-bg-canvas-inverse": "color-bg-neutral-emphasis",
26+
"color-bg-canvas-inverse": "color-bg-emphasis",
2727
"color-bg-canvas-inset": "color-bg-inset",
2828
"color-bg-primary": "color-bg-default",
2929
"color-bg-secondary": "color-bg-subtle",

‎src/utilities/colors.scss‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -18,57 +18,59 @@
1818

1919
// Background
2020

21-
.color-bg-default { background-color: var(--color-canvas-default) !important; }
22-
.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; }
23-
.color-bg-inset { background-color: var(--color-canvas-inset) !important; }
24-
.color-bg-subtle { background-color: var(--color-canvas-subtle) !important; }
25-
26-
.color-bg-neutral-emphasis-plus { background-color: var(--color-neutral-emphasis-plus) !important; }
27-
.color-bg-neutral-emphasis { background-color: var(--color-neutral-emphasis) !important; }
28-
.color-bg-neutral-muted { background-color: var(--color-neutral-muted) !important; }
29-
.color-bg-neutral-subtle { background-color: var(--color-neutral-subtle) !important; }
21+
.color-bg-default { background-color: var(--color-canvas-default) !important; }
22+
.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; }
23+
.color-bg-inset { background-color: var(--color-canvas-inset) !important; }
24+
.color-bg-subtle { background-color: var(--color-canvas-subtle) !important; }
25+
.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
3026

27+
.color-bg-accent { background-color: var(--color-accent-subtle) !important; }
3128
.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
32-
.color-bg-accent-muted { background-color: var(--color-accent-muted) !important; }
33-
.color-bg-accent-subtle { background-color: var(--color-accent-subtle) !important; }
3429

30+
.color-bg-success { background-color: var(--color-success-subtle) !important; }
3531
.color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
36-
.color-bg-success-muted { background-color: var(--color-success-muted) !important; }
37-
.color-bg-success-subtle { background-color: var(--color-success-subtle) !important; }
3832

33+
.color-bg-attention { background-color: var(--color-attention-subtle) !important; }
3934
.color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
40-
.color-bg-attention-muted { background-color: var(--color-attention-muted) !important; }
41-
.color-bg-attention-subtle { background-color: var(--color-attention-subtle) !important; }
4235

36+
.color-bg-severe { background-color: var(--color-severe-subtle) !important; }
4337
.color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
44-
.color-bg-severe-muted { background-color: var(--color-severe-muted) !important; }
45-
.color-bg-severe-subtle { background-color: var(--color-severe-subtle) !important; }
4638

39+
.color-bg-danger { background-color: var(--color-danger-subtle) !important; }
4740
.color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
48-
.color-bg-danger-muted { background-color: var(--color-danger-muted) !important; }
49-
.color-bg-danger-subtle { background-color: var(--color-danger-subtle) !important; }
5041

42+
.color-bg-done { background-color: var(--color-done-subtle) !important; }
5143
.color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
52-
.color-bg-done-muted { background-color: var(--color-done-muted) !important; }
53-
.color-bg-done-subtle { background-color: var(--color-done-subtle) !important; }
5444

45+
.color-bg-sponsors { background-color: var(--color-sponsors-subtle) !important; }
5546
.color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
56-
.color-bg-sponsors-muted { background-color: var(--color-sponsors-muted) !important; }
57-
.color-bg-sponsors-subtle { background-color: var(--color-sponsors-subtle) !important; }
5847

5948
// Border
6049

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

65-
.color-border-accent { border-color: var(--color-accent-emphasis) !important; }
66-
.color-border-success { border-color: var(--color-success-emphasis) !important; }
67-
.color-border-attention { border-color: var(--color-attention-emphasis) !important; }
68-
.color-border-severe { border-color: var(--color-severe-emphasis) !important; }
69-
.color-border-danger { border-color: var(--color-danger-emphasis) !important; }
70-
.color-border-done { border-color: var(--color-done-emphasis) !important; }
71-
.color-border-sponsors { border-color: var(--color-sponsors-emphasis) !important; }
54+
.color-border-accent { border-color: var(--color-accent-muted) !important; }
55+
.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
56+
57+
.color-border-success { border-color: var(--color-success-muted) !important; }
58+
.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
59+
60+
.color-border-attention { border-color: var(--color-attention-muted) !important; }
61+
.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }
62+
63+
.color-border-severe { border-color: var(--color-severe-muted) !important; }
64+
.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }
65+
66+
.color-border-danger { border-color: var(--color-danger-muted) !important; }
67+
.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
68+
69+
.color-border-done { border-color: var(--color-done-muted) !important; }
70+
.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
71+
72+
.color-border-sponsors { border-color: var(--color-sponsors-muted) !important; }
73+
.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }
7274

7375
// Misc
7476

0 commit comments

Comments
 (0)