diff --git a/.changeset/unlucky-books-sort.md b/.changeset/unlucky-books-sort.md new file mode 100644 index 00000000000..65741705a71 --- /dev/null +++ b/.changeset/unlucky-books-sort.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Use open/closed colors for `StateLabel` diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png index d5bc35b6cda..19f8c114e76 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png index d5bc35b6cda..cf2ec62c9af 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png index ff6392d8c65..74cef4c79d5 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png index ff6392d8c65..a23a27e8ee0 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png index d5bc35b6cda..19f8c114e76 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png index d5bc35b6cda..cf2ec62c9af 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png index ff6392d8c65..74cef4c79d5 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png index ff6392d8c65..a23a27e8ee0 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png index 2400cd30e97..a35579909bc 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png index 2400cd30e97..0e9a3d24c2a 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png index 7bbbc40807e..c10dde43f91 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png index 7bbbc40807e..d838e504c4b 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-colorblind-linux.png index bd0154250dc..2f2a7c48d79 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-tritanopia-linux.png index bd0154250dc..fd58fb1aad4 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-colorblind-linux.png index 707c37a5d09..1db11b08f33 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-tritanopia-linux.png index 707c37a5d09..5dc5ce6c367 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Issue-Opened-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-colorblind-linux.png index 7617cd8102b..2d6cef6d79f 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-tritanopia-linux.png index 7b98b608ad2..2d6cef6d79f 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-colorblind-linux.png index 37ceda02744..b4d2412fd97 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-tritanopia-linux.png index bc943fd6ce0..b4d2412fd97 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Closed-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-colorblind-linux.png index e8e463872b1..9bf3fe8973a 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-tritanopia-linux.png index e8e463872b1..3cf25c2cfb6 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-colorblind-linux.png index 192e54816d0..18a3ab48c06 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-tritanopia-linux.png index 192e54816d0..5b761117844 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Pull-Opened-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png index 6e4128c2665..c70c5244efd 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png index 6e4128c2665..728f399967d 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png index 2d2c349112e..f5904882203 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png index 2d2c349112e..2b628f5c3c2 100644 Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png index cb51a3fed41..37abfdad5d9 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png index cb51a3fed41..002ced188f3 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png index 719f902a19a..64898f47951 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png index 719f902a19a..1f2c1f1d516 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png differ diff --git a/e2e/components/PageHeader.test.ts b/e2e/components/PageHeader.test.ts index ab330e81b26..e19dddf0b30 100644 --- 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 index f773f5d16d9..341bae11433 100644 --- 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 index cf063c9e65d..31940eaaf3e 100644 --- a/src/StateLabel/StateLabel.tsx +++ b/src/StateLabel/StateLabel.tsx @@ -38,7 +38,7 @@ const colorVariants = variant({ color: 'fg.onEmphasis', }, pullClosed: { - backgroundColor: 'danger.emphasis', + backgroundColor: 'closed.emphasis', color: 'fg.onEmphasis', }, pullMerged: { @@ -46,11 +46,11 @@ const colorVariants = variant({ color: 'fg.onEmphasis', }, issueOpened: { - backgroundColor: 'success.emphasis', + backgroundColor: 'open.emphasis', color: 'fg.onEmphasis', }, pullOpened: { - backgroundColor: 'success.emphasis', + backgroundColor: 'open.emphasis', color: 'fg.onEmphasis', }, draft: {