mirror of
https://github.com/primer/css.git
synced 2024-11-26 23:56:04 +03:00
Update utilities (#1630)
* 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
GitHub
parent
d32e42f9ca
commit
5f7bb45c21
5
.changeset/proud-scissors-compete.md
Normal file
5
.changeset/proud-scissors-compete.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": major
|
||||
---
|
||||
|
||||
Update utilities
|
||||
@ -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` |
|
||||
|
||||
@ -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
|
||||
@ -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
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -18,43 +18,32 @@
|
||||
|
||||
// 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
|
||||
|
||||
@ -62,13 +51,26 @@
|
||||
.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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user