Add correct fallbacks to State label (#2156)

primer · Jul 25, 2023 · 5f80972 · 5f80972
1 parent 9005b5c
commit 5f80972
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/brave-shirts-hug.md b/.changeset/brave-shirts-hug.md
@@ -0,0 +1,7 @@
+---
+"@primer/view-components": patch
+---
+
+Add correct fallbacks to `State` label
+
+<!-- Changed components: _none_ -->
diff --git a/app/components/primer/beta/counter.pcss b/app/components/primer/beta/counter.pcss
@@ -9,7 +9,7 @@
   line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
   color: var(--fgColor-default);
   text-align: center;
-  background-color: var(--bgColor-neutral-muted);
+  background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
   border: var(--borderWidth-thin) solid var(--counter-borderColor);
   border-radius: 2em;
 

diff --git a/app/components/primer/beta/state.pcss b/app/components/primer/beta/state.pcss
@@ -24,17 +24,17 @@
 
 .State--open {
   color: var(--fgColor-onEmphasis);
-  background-color: var(--bgColor-open-emphasis);
+  background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));
 }
 
 .State--merged {
   color: var(--fgColor-onEmphasis);
-  background-color: var(--bgColor-done-emphasis);
+  background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));
 }
 
 .State--closed {
   color: var(--fgColor-onEmphasis);
-  background-color: var(--bgColor-closed-emphasis);
+  background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));
 }
 
 /* Small 24px */