primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 20:53:06 +03:00
Code Issues Projects Releases Wiki Activity

Add new color Labels (#1711)

Browse Source 
* Add new role colors to .Label

* Create kind-cycles-hope.md
This commit is contained in:
simurai 2021-10-29 02:34:29 +09:00 committed by GitHub
parent f7c44c35f8
commit bc3b94d26f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/kind-cycles-hope.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": minor
---
Add new color `Label`s

14
docs/content/components/labels.md
View File

@ -37,16 +37,22 @@ Use `Label--secondary` to create a label with a subtler text color. This label i
Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently. Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently.
- `Label--info` - `Label--accent`
- `Label--success` - `Label--success`
- `Label--warning` - `Label--attention`
- `Label--severe`
- `Label--danger` - `Label--danger`
- `Label--done`
- `Label--sponsors`
```html live ```html live
<span class="Label mr-1 Label--info">Info</span> <span class="Label mr-1 Label--accent">Accent</span>
<span class="Label mr-1 Label--success">Success</span> <span class="Label mr-1 Label--success">Success</span>
<span class="Label mr-1 Label--warning">Warning</span> <span class="Label mr-1 Label--attention">Attention</span>
<span class="Label mr-1 Label--severe">Severe</span>
<span class="Label mr-1 Label--danger">Danger</span> <span class="Label mr-1 Label--danger">Danger</span>
<span class="Label mr-1 Label--done">Done</span>
<span class="Label mr-1 Label--sponsors">Sponsors</span>
``` ```
### Label sizes ### Label sizes

25
src/labels/labels.scss
View File

@ -30,7 +30,7 @@
@include labels--inline; @include labels--inline;
} }
// Colors // Contrast
.Label--primary { .Label--primary {
color: var(--color-fg-default); color: var(--color-fg-default);
@ -42,7 +42,10 @@
border-color: var(--color-border-default); border-color: var(--color-border-default);
} }
.Label--info { // Colors
.Label--info, // TODO: deprecate
.Label--accent {
color: var(--color-accent-fg); color: var(--color-accent-fg);
border-color: var(--color-accent-emphasis); border-color: var(--color-accent-emphasis);
} }
@ -52,12 +55,28 @@
border-color: var(--color-success-emphasis); border-color: var(--color-success-emphasis);
} }
.Label--warning { .Label--warning, // TODO: deprecate
.Label--attention {
color: var(--color-attention-fg); color: var(--color-attention-fg);
border-color: var(--color-attention-emphasis); border-color: var(--color-attention-emphasis);
} }
.Label--severe {
color: var(--color-severe-fg);
border-color: var(--color-severe-emphasis);
}
.Label--danger { .Label--danger {
color: var(--color-danger-fg); color: var(--color-danger-fg);
border-color: var(--color-danger-emphasis); border-color: var(--color-danger-emphasis);
} }
.Label--done {
color: var(--color-done-fg);
border-color: var(--color-done-emphasis);
}
.Label--sponsors {
color: var(--color-sponsors-fg);
border-color: var(--color-sponsors-emphasis);
}