diff --git a/MIGRATING.md b/MIGRATING.md index c8dc5eef..a5c9ca25 100644 --- a/MIGRATING.md +++ b/MIGRATING.md @@ -25,6 +25,13 @@ Most components don't need to be updated and should work without making changes. `.Label--purple` | n/a `.Label--pink` | n/a +### Counters + +[`v15`](https://primer.style/css/components/labels#counters) | `v16` +--- | --- +`.Counter--gray` | `.Counter--primary` +`.Counter--gray-light` | `.Counter--secondary` + ## Utility classes ### Text diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index 51e207ae..b88d342e 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -150,12 +150,18 @@ Use `State--small` for a state label with reduced padding a smaller font size. T ## Counters -Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, the `Counter--gray-light` with a lighter text color, and `Counter--gray` with a dark-gray background and inverse white text. When a counter is empty, its visibility will be hidden. +Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: + +1. the default `Counter`, +2. the `Counter--primary` with a stronger background color +3. and `Counter--secondary` with a more subtler text color. + +Note: When a counter is empty, its visibility will be hidden. ```html live 1 -23 -456 +23 +456 ``` Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation). diff --git a/src/labels/counters.scss b/src/labels/counters.scss index f0ca8b79..51cd73a3 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -25,12 +25,25 @@ } } +.Counter--primary { + color: var(--color-counter-primary-text); + background-color: var(--color-counter-primary-bg); +} + +.Counter--secondary { + color: var(--color-counter-secondary-text); +} + +// +// ------------------------ Deprecated ------------------------ +// Some might get replaced at some point. If possible, use functional classes. +// + .Counter--gray-light { - color: var(--color-text-tertiary); + color: var(--color-counter-secondary-text); } .Counter--gray { - color: var(--color-text-inverse); - // stylelint-disable-next-line primer/colors - background-color: var(--color-auto-gray-5); + color: var(--color-counter-primary-text); + background-color: var(--color-counter-primary-bg); }