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);
}