Add open and closed roles

[simurai]

This is part of https://github.com/github/primer/issues/725 and adds 2 new roles (open + closed):

Light default	Light colorblind

Docs Preview

It also adds the following exceptions

• open -> orange
• closed -> gray

to the colorblind themes. This will make sure that the Open and Done states don't clash and the Closed state is more neutral like Draft:

Before	After

Reasoning

The new roles are needed to improve colorblind themes, see this color roles ADR.

TODO

• Add open and closed roles
• Add exception for colorblind themes:
  • Open -> orange
  • Closed -> gray

[changeset-bot]

🦋 Changeset detected

Latest commit: b01dffc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primitives/AaWWZJyagsj21nMJ7K7cs4qcJJcd
✅ Preview: https://primitives-git-add-open-closed-roles-primer.vercel.app

[github-actions]

Variables changed

--- base/dist/scss/colors/_dark.scss	2022-02-28 09:42:39.270922887 +0000
+++ dist/scss/colors/_dark.scss	2022-02-28 09:42:29.134753833 +0000
@@ -311,2 +311,10 @@
     --color-danger-subtle: rgba(248,81,73,0.15);
+    --color-open-fg: #3fb950;
+    --color-open-emphasis: #238636;
+    --color-open-muted: rgba(46,160,67,0.4);
+    --color-open-subtle: rgba(46,160,67,0.15);
+    --color-closed-fg: #f85149;
+    --color-closed-emphasis: #da3633;
+    --color-closed-muted: rgba(248,81,73,0.4);
+    --color-closed-subtle: rgba(248,81,73,0.15);
     --color-done-fg: #a371f7;
--- base/dist/scss/colors/_dark_colorblind.scss	2022-02-28 09:42:39.290923242 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2022-02-28 09:42:29.150754303 +0000
@@ -311,2 +311,10 @@
     --color-danger-subtle: rgba(195,128,0,0.15);
+    --color-open-fg: #f0883e;
+    --color-open-emphasis: #bd561d;
+    --color-open-muted: rgba(219,109,40,0.4);
+    --color-open-subtle: rgba(219,109,40,0.15);
+    --color-closed-fg: #6e7681;
+    --color-closed-emphasis: #484f58;
+    --color-closed-muted: rgba(110,118,129,0.4);
+    --color-closed-subtle: rgba(110,118,129,0.15);
     --color-done-fg: #a371f7;
--- base/dist/scss/colors/_dark_dimmed.scss	2022-02-28 09:42:39.278923029 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2022-02-28 09:42:29.138753951 +0000
@@ -311,2 +311,10 @@
     --color-danger-subtle: rgba(229,83,75,0.15);
+    --color-open-fg: #57ab5a;
+    --color-open-emphasis: #347d39;
+    --color-open-muted: rgba(70,149,74,0.4);
+    --color-open-subtle: rgba(70,149,74,0.15);
+    --color-closed-fg: #e5534b;
+    --color-closed-emphasis: #c93c37;
+    --color-closed-muted: rgba(229,83,75,0.4);
+    --color-closed-subtle: rgba(229,83,75,0.15);
     --color-done-fg: #986ee2;
--- base/dist/scss/colors/_dark_high_contrast.scss	2022-02-28 09:42:39.282923100 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2022-02-28 09:42:29.146754186 +0000
@@ -311,2 +311,10 @@
     --color-danger-subtle: rgba(255,106,105,0.15);
+    --color-open-fg: #26cd4d;
+    --color-open-emphasis: #09b43a;
+    --color-open-muted: rgba(9,180,58,0.4);
+    --color-open-subtle: rgba(9,180,58,0.15);
+    --color-closed-fg: #ff6a69;
+    --color-closed-emphasis: #ff6a69;
+    --color-closed-muted: rgba(255,106,105,0.4);
+    --color-closed-subtle: rgba(255,106,105,0.15);
     --color-done-fg: #b780ff;
--- base/dist/scss/colors/_light.scss	2022-02-28 09:42:39.246922462 +0000
+++ dist/scss/colors/_light.scss	2022-02-28 09:42:29.102752894 +0000
@@ -311,2 +311,10 @@
     --color-danger-subtle: #FFEBE9;
+    --color-open-fg: #1a7f37;
+    --color-open-emphasis: #2da44e;
+    --color-open-muted: rgba(74,194,107,0.4);
+    --color-open-subtle: #dafbe1;
+    --color-closed-fg: #cf222e;
+    --color-closed-emphasis: #cf222e;
+    --color-closed-muted: rgba(255,129,130,0.4);
+    --color-closed-subtle: #FFEBE9;
     --color-done-fg: #8250df;
--- base/dist/scss/colors/_light_colorblind.scss	2022-02-28 09:42:39.262922746 +0000
+++ dist/scss/colors/_light_colorblind.scss	2022-02-28 09:42:29.126753598 +0000
@@ -311,2 +311,10 @@
     --color-danger-subtle: #fefe48;
+    --color-open-fg: #bc4c00;
+    --color-open-emphasis: #e16f24;
+    --color-open-muted: rgba(251,143,68,0.4);
+    --color-open-subtle: #fff1e5;
+    --color-closed-fg: #6e7781;
+    --color-closed-emphasis: #6e7781;
+    --color-closed-muted: rgba(175,184,193,0.4);
+    --color-closed-subtle: #f6f8fa;
     --color-done-fg: #8250df;
--- base/dist/scss/colors/_light_high_contrast.scss	2022-02-28 09:42:39.258922675 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2022-02-28 09:42:29.118753363 +0000
@@ -311,2 +311,10 @@
     --color-danger-subtle: #fff0ee;
+    --color-open-fg: #055d20;
+    --color-open-emphasis: #117f32;
+    --color-open-muted: rgba(38,161,72,0.4);
+    --color-open-subtle: #d2fedb;
+    --color-closed-fg: #a0111f;
+    --color-closed-emphasis: #a0111f;
+    --color-closed-muted: rgba(238,90,93,0.4);
+    --color-closed-subtle: #fff0ee;
     --color-done-fg: #622cbc;