Use open/closed colors for StateLabel (#3041)

* Update StateLabel to open/closed colors * Create .changeset/unlucky-books-sort.md * test(vrt): update snapshots * test(vrt): update snapshots * Revert "test(vrt): update snapshots" This reverts commit c53a8da. * test(vrt): update snapshots * test(e2e): add exceptions for dark_colorblind theme --------- Co-authored-by: simurai <simurai@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: joshblack <joshblack@users.noreply.github.com>
primer · Mar 24, 2023 · e5f1330 · e5f1330
1 parent c67fb24
commit e5f1330
Show file tree

Hide file tree

Showing 36 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/unlucky-books-sort.md b/.changeset/unlucky-books-sort.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Use open/closed colors for `StateLabel`
diff --git a/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png b/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png b/...Header.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png
diff --git a/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png
diff --git a/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png b/...eader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png
diff --git a/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png
diff --git a/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/...shots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png
diff --git a/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png
diff --git a/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/...hots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png
diff --git a/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png
diff --git a/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/...eHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png
diff --git a/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/...Header.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png
diff --git a/.../StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-colorblind-linux.png b/.../StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-colorblind-linux.png
diff --git a/.../StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-tritanopia-linux.png b/.../StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-tritanopia-linux.png
diff --git a/...StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-colorblind-linux.png b/...StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-colorblind-linux.png
diff --git a/...StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-tritanopia-linux.png b/...StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-tritanopia-linux.png
diff --git a/...s/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-colorblind-linux.png b/...s/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-colorblind-linux.png
diff --git a/...s/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-tritanopia-linux.png b/...s/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-tritanopia-linux.png
diff --git a/.../StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-colorblind-linux.png b/.../StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-colorblind-linux.png
diff --git a/.../StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-tritanopia-linux.png b/.../StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-tritanopia-linux.png
diff --git a/...s/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-colorblind-linux.png b/...s/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-colorblind-linux.png
diff --git a/...s/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-tritanopia-linux.png b/...s/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-tritanopia-linux.png
diff --git a/.../StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-colorblind-linux.png b/.../StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-colorblind-linux.png
diff --git a/.../StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-tritanopia-linux.png b/.../StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-tritanopia-linux.png
diff --git a/...ponents/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png b/...ponents/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png
diff --git a/...ponents/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png b/...ponents/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png
diff --git a/...onents/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png b/...onents/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png
diff --git a/...onents/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png b/...onents/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png
diff --git a/...eNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png b/...eNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png
diff --git a/...eNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png b/...eNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png
diff --git a/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png b/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png
diff --git a/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png b/...Nav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png
diff --git a/e2e/components/PageHeader.test.ts b/e2e/components/PageHeader.test.ts
@@ -98,6 +98,7 @@ test.describe('PageHeader', () => {
             rules: {
               'color-contrast': {
                 enabled:
+                  theme !== 'dark_colorblind' &&
                   theme !== 'dark_dimmed' &&
                   theme !== 'light' &&
                   theme !== 'light_colorblind' &&
@@ -138,6 +139,7 @@ test.describe('PageHeader', () => {
             rules: {
               'color-contrast': {
                 enabled:
+                  theme !== 'dark_colorblind' &&
                   theme !== 'dark_dimmed' &&
                   theme !== 'light' &&
                   theme !== 'light_colorblind' &&

diff --git a/e2e/components/UnderlineNav.test.ts b/e2e/components/UnderlineNav.test.ts
@@ -63,7 +63,7 @@ test.describe('UnderlineNav', () => {
 
           // These themes currently have a contrast violation due to
           // `StateLabel`
-          const denylist = new Set(['light', 'light_colorblind', 'light_tritanopia', 'dark_dimmed'])
+          const denylist = new Set(['light', 'light_colorblind', 'light_tritanopia', 'dark_colorblind', 'dark_dimmed'])
 
           await expect(page).toHaveNoViolations({
             rules: {

diff --git a/src/StateLabel/StateLabel.tsx b/src/StateLabel/StateLabel.tsx
@@ -38,19 +38,19 @@ const colorVariants = variant({
       color: 'fg.onEmphasis',
     },
     pullClosed: {
-      backgroundColor: 'danger.emphasis',
+      backgroundColor: 'closed.emphasis',
       color: 'fg.onEmphasis',
     },
     pullMerged: {
       backgroundColor: 'done.emphasis',
       color: 'fg.onEmphasis',
     },
     issueOpened: {
-      backgroundColor: 'success.emphasis',
+      backgroundColor: 'open.emphasis',
       color: 'fg.onEmphasis',
     },
     pullOpened: {
-      backgroundColor: 'success.emphasis',
+      backgroundColor: 'open.emphasis',
       color: 'fg.onEmphasis',
     },
     draft: {