Add open and closed color roles (#1948)

* Add `open` and `closed` color role

* Use new open/closed color variables

* yarn add @primer/primitives@0.0.0-202212241414

This is just temporarily to test the docs

* Add `Label--open` and `Label--closed`

* Create clever-bugs-love.md

* yarn add @primer/primitives@0.0.0-202212894219

* yarn add @primer/primitives@7.5.0

Author: simurai

.changeset/clever-bugs-love.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add `open` and `closed` color roles

docs/content/components/labels.md

@@ -42,6 +42,8 @@ Labels come in a few different functional classes. Use to communicate the conten
 - `Label--attention`
 - `Label--severe`
 - `Label--danger`
+- `Label--open`
+- `Label--closed`
 - `Label--done`
 - `Label--sponsors`
 
@@ -51,6 +53,8 @@ Labels come in a few different functional classes. Use to communicate the conten
 <span class="Label mr-1 Label--attention">Attention</span>
 <span class="Label mr-1 Label--severe">Severe</span>
 <span class="Label mr-1 Label--danger">Danger</span>
+<span class="Label mr-1 Label--open">Open</span>
+<span class="Label mr-1 Label--closed">Closed</span>
 <span class="Label mr-1 Label--done">Done</span>
 <span class="Label mr-1 Label--sponsors">Sponsors</span>
 ```

docs/content/utilities/colors.mdx

@@ -24,6 +24,8 @@ Use text color utilities to set text to a specific color. Color contrast must pa
 <div class="color-fg-attention mb-1">.color-fg-attention</div>
 <div class="color-fg-severe mb-1">.color-fg-severe</div>
 <div class="color-fg-danger mb-1">.color-fg-danger</div>
+<div class="color-fg-open mb-1">.color-fg-open</div>
+<div class="color-fg-closed mb-1">.color-fg-closed</div>
 <div class="color-fg-done mb-1">.color-fg-done</div>
 <div class="color-fg-sponsors mb-4">.color-fg-sponsors</div>
 
@@ -62,6 +64,12 @@ Background colors are most commonly used for filling large blocks of content or
 <div class="color-bg-danger p-2 rounded mb-2">.color-bg-danger</div>
 <div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-danger-emphasis</div>
 
+<div class="color-bg-open p-2 rounded mb-2">.color-bg-open</div>
+<div class="color-bg-open-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-open-emphasis</div>
+
+<div class="color-bg-closed p-2 rounded mb-2">.color-bg-closed</div>
+<div class="color-bg-closed-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-closed-emphasis</div>
+
 <div class="color-bg-done p-2 rounded mb-2">.color-bg-done</div>
 <div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-done-emphasis</div>
 
@@ -93,6 +101,12 @@ Override default border colors with the following utilities.
 <div class="border color-border-danger p-2 rounded mb-2">.color-border-danger</div>
 <div class="border color-border-danger-emphasis p-2 rounded mb-4">.color-border-danger-emphasis</div>
 
+<div class="border color-border-open p-2 rounded mb-2">.color-border-open</div>
+<div class="border color-border-open-emphasis p-2 rounded mb-4">.color-border-open-emphasis</div>
+
+<div class="border color-border-closed p-2 rounded mb-2">.color-border-closed</div>
+<div class="border color-border-closed-emphasis p-2 rounded mb-4">.color-border-closed-emphasis</div>
+
 <div class="border color-border-done p-2 rounded mb-2">.color-border-done</div>
 <div class="border color-border-done-emphasis p-2 rounded mb-4">.color-border-done-emphasis</div>
 

docs/src/stories/components/Label/Label.stories.jsx

@@ -13,7 +13,7 @@ export default {
       }
     },
     variant: {
-      options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // iterator
+      options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // iterator
       mapping: [
         '',
         'Label--primary',
@@ -23,12 +23,14 @@ export default {
         'Label--attention',
         'Label--severe',
         'Label--danger',
+        'Label--open',
+        'Label--closed',
         'Label--done',
         'Label--sponsors'
       ], // values
       control: {
         type: 'select',
-        labels: ['default', 'primary', 'secondary', 'accent', 'success', 'attention', 'severe', 'danger', 'done', 'sponsors']
+        labels: ['default', 'primary', 'secondary', 'accent', 'success', 'attention', 'severe', 'danger', 'open', 'closed', 'done', 'sponsors']
       },
       description: 'Colors',
       table: {

docs/src/stories/components/Label/LabelFeatures.stories.jsx

@@ -95,6 +95,8 @@ export const AllVariants = ({}) => (
     <LabelTemplate text="Attention" variant="Label--attention" />
     <LabelTemplate text="Severe" variant="Label--severe" />
     <LabelTemplate text="Danger" variant="Label--danger" />
+    <LabelTemplate text="Open" variant="Label--open" />
+    <LabelTemplate text="Closed" variant="Label--closed" />
     <LabelTemplate text="Done" variant="Label--done" />
     <LabelTemplate text="Sponsors" variant="Label--sponsors" />
   </>

package.json

@@ -39,7 +39,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.4.0"
+    "@primer/primitives": "7.5.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.2",

src/labels/labels.scss

@@ -71,6 +71,16 @@
   border-color: var(--color-danger-emphasis);
 }
 
+.Label--open {
+  color: var(--color-open-fg);
+  border-color: var(--color-open-emphasis);
+}
+
+.Label--closed {
+  color: var(--color-closed-fg);
+  border-color: var(--color-closed-emphasis);
+}
+
 .Label--done {
   color: var(--color-done-fg);
   border-color: var(--color-done-emphasis);

src/labels/states.scss

@@ -28,7 +28,7 @@
 
 .State--open {
   color: var(--color-fg-on-emphasis);
-  background-color: var(--color-success-emphasis);
+  background-color: var(--color-open-emphasis);
 }
 
 .State--merged {
@@ -38,7 +38,7 @@
 
 .State--closed {
   color: var(--color-fg-on-emphasis);
-  background-color: var(--color-danger-emphasis);
+  background-color: var(--color-closed-emphasis);
 }
 
 // Small

src/utilities/colors.scss

@@ -11,6 +11,8 @@
 .color-fg-attention { color: var(--color-attention-fg) !important; }
 .color-fg-severe    { color: var(--color-severe-fg) !important; }
 .color-fg-danger    { color: var(--color-danger-fg) !important; }
+.color-fg-open      { color: var(--color-open-fg) !important; }
+.color-fg-closed    { color: var(--color-closed-fg) !important; }
 .color-fg-done      { color: var(--color-done-fg) !important; }
 .color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
 
@@ -39,6 +41,12 @@
 .color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
 .color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
 
+.color-bg-open          { background-color: var(--color-open-subtle) !important; }
+.color-bg-open-emphasis { background-color: var(--color-open-emphasis) !important; }
+
+.color-bg-closed          { background-color: var(--color-closed-subtle) !important; }
+.color-bg-closed-emphasis { background-color: var(--color-closed-emphasis) !important; }
+
 .color-bg-done          { background-color: var(--color-done-subtle) !important; }
 .color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
 
@@ -66,6 +74,12 @@
 .color-border-danger          { border-color: var(--color-danger-muted) !important; }
 .color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
 
+.color-border-open          { border-color: var(--color-open-muted) !important; }
+.color-border-open-emphasis { border-color: var(--color-open-emphasis) !important; }
+
+.color-border-closed          { border-color: var(--color-closed-muted) !important; }
+.color-border-closed-emphasis { border-color: var(--color-closed-emphasis) !important; }
+
 .color-border-done          { border-color: var(--color-done-muted) !important; }
 .color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
 

yarn.lock

@@ -1148,10 +1148,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@primer/primitives@^7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.4.0.tgz#75df54a80233a432b687c0e3010e4be6bd60a82d"
-  integrity sha512-gD6yHXN7YKox/bdUNgxhoSS/WXZVaORK1r4dOAyTrdoPrLV/ucIfRInPyVcTF+Mqr0zcTFJtiMtuA5Y8CSyOEg==
+"@primer/primitives@7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.5.0.tgz#c997637bc315b3fde6d1ed22031d60d24b04d85b"
+  integrity sha512-DNAGOxFvelUz2THCZNo1EuSRbtujhY7NR02WjQvSGlbBihMeMJ5yrUYgeQyo/OGrg+HlzbwLW56OLy9PN+iqXA==
 
 "@primer/stylelint-config@^12.3.3":
   version "12.3.3"