primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-30 11:17:05 +03:00
Code Issues Projects Releases Wiki Activity

Update utilities (#1630)

Browse Source 
* Update utilities

* Create proud-scissors-compete.md

* Update spacing

* Remove `-subtle` and `-muted`

Co-authored-by: Jon Rohan <yes@jonrohan.codes>
This commit is contained in:
simurai 2021-10-08 15:46:23 +09:00 committed by GitHub
parent d32e42f9ca
commit 5f7bb45c21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 79 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/proud-scissors-compete.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": major
---
Update utilities

18
docs/content/support/v18-migration.mdx
View File

@ -43,21 +43,21 @@ See [color utility classes](/utilities/colors) for a list of all the functional
### Border ### Border
| `v16` | `v18` | | `v16` | `v18` |
| ------------------------- | ------------------------- | | ------------------------- | ---------------------------------- |
| `.color-border-primary` | `.color-border-default` | | `.color-border-primary` | `.color-border-default` |
| `.color-border-secondary` | `.color-border-muted` | | `.color-border-secondary` | `.color-border-muted` |
| `.color-border-tertiary` | `.color-border-default` | | `.color-border-tertiary` | `.color-border-default` |
| `.color-border-inverse` | n/a | | `.color-border-inverse` | n/a |
| `.color-border-info` | `.color-border-accent` | | `.color-border-info` | `.color-border-accent-emphasis` |
| `.color-border-warning` | `.color-border-attention` | | `.color-border-warning` | `.color-border-attention-emphasis` |
### Background ### Background
| `v16` | `v18` | | `v16` | `v18` |
| --------------------------- | ------------------------------ | | --------------------------- | ------------------------------ |
| `.color-bg-canvas` | `.color-bg-default` | | `.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-canvas-inset` | `.color-bg-inset` |
| `.color-bg-primary` | `.color-bg-default` | | `.color-bg-primary` | `.color-bg-default` |
| `.color-bg-secondary` | `.color-bg-subtle` | | `.color-bg-secondary` | `.color-bg-subtle` |

58
docs/content/utilities/colors.mdx
View File

@ -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-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-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-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-accent p-2 rounded mb-2">.color-bg-accent</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-accent-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-accent-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-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-accent-emphasis</div> <div class="color-bg-success p-2 rounded mb-2">.color-bg-success</div>
<div class="color-bg-accent-muted p-2 rounded mb-2">.color-bg-accent-muted</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-accent-subtle p-2 rounded mb-4">.color-bg-accent-subtle</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-attention p-2 rounded mb-2">.color-bg-attention</div>
<div class="color-bg-success-muted p-2 rounded mb-2">.color-bg-success-muted</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-success-subtle p-2 rounded mb-4">.color-bg-success-subtle</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-severe p-2 rounded mb-2">.color-bg-severe</div>
<div class="color-bg-attention-muted p-2 rounded mb-2">.color-bg-attention-muted</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-attention-subtle p-2 rounded mb-4">.color-bg-attention-subtle</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-danger p-2 rounded mb-2">.color-bg-danger</div>
<div class="color-bg-severe-muted p-2 rounded mb-2">.color-bg-severe-muted</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-severe-subtle p-2 rounded mb-4">.color-bg-severe-subtle</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-done p-2 rounded mb-2">.color-bg-done</div>
<div class="color-bg-danger-muted p-2 rounded mb-2">.color-bg-danger-muted</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-danger-subtle p-2 rounded mb-4">.color-bg-danger-subtle</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-sponsors p-2 rounded mb-2">.color-bg-sponsors</div>
<div class="color-bg-done-muted p-2 rounded mb-2">.color-bg-done-muted</div> <div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded">.color-bg-sponsors-emphasis</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>
``` ```
## Border ## Border
@ -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-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 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 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 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 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 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-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 ## Link

6
src/deprecations.json
View File

@ -20,10 +20,10 @@
"color-border-secondary": "color-border-muted", "color-border-secondary": "color-border-muted",
"color-border-tertiary": "color-border-default", "color-border-tertiary": "color-border-default",
"color-border-inverse": null, "color-border-inverse": null,
"color-border-info": "color-border-accent", "color-border-info": "color-border-accent-emphasis",
"color-border-warning": "color-border-attention", "color-border-warning": "color-border-attention-emphasis",
"color-bg-canvas": "color-bg-default", "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-canvas-inset": "color-bg-inset",
"color-bg-primary": "color-bg-default", "color-bg-primary": "color-bg-default",
"color-bg-secondary": "color-bg-subtle", "color-bg-secondary": "color-bg-subtle",

62
src/utilities/colors.scss
View File

@ -18,43 +18,32 @@
// Background // Background
.color-bg-default { background-color: var(--color-canvas-default) !important; } .color-bg-default { background-color: var(--color-canvas-default) !important; }
.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; } .color-bg-overlay { background-color: var(--color-canvas-overlay) !important; }
.color-bg-inset { background-color: var(--color-canvas-inset) !important; } .color-bg-inset { background-color: var(--color-canvas-inset) !important; }
.color-bg-subtle { background-color: var(--color-canvas-subtle) !important; } .color-bg-subtle { background-color: var(--color-canvas-subtle) !important; }
.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !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-accent { background-color: var(--color-accent-subtle) !important; }
.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !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-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-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-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-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-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-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 // Border
@ -62,13 +51,26 @@
.color-border-muted { border-color: var(--color-border-muted) !important; } .color-border-muted { border-color: var(--color-border-muted) !important; }
.color-border-subtle { border-color: var(--color-border-subtle) !important; } .color-border-subtle { border-color: var(--color-border-subtle) !important; }
.color-border-accent { border-color: var(--color-accent-emphasis) !important; } .color-border-accent { border-color: var(--color-accent-muted) !important; }
.color-border-success { border-color: var(--color-success-emphasis) !important; } .color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
.color-border-attention { border-color: var(--color-attention-emphasis) !important; }
.color-border-severe { border-color: var(--color-severe-emphasis) !important; } .color-border-success { border-color: var(--color-success-muted) !important; }
.color-border-danger { border-color: var(--color-danger-emphasis) !important; } .color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
.color-border-done { border-color: var(--color-done-emphasis) !important; }
.color-border-sponsors { border-color: var(--color-sponsors-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 // Misc