From 8757be584db2ddda8153566dc1906451832d3833 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 7 Dec 2023 13:54:14 -0800
Subject: [PATCH] Add new color utilities (#2564)

* add new colors

* Create shy-suns-wave.md

* fix emphasis

* add stories

* Update docs/stories/utilities/Color.stories.jsx

* Update docs/stories/utilities/Color.stories.jsx
---
 .changeset/shy-suns-wave.md              |   5 +
 docs/stories/utilities/Color.stories.jsx | 100 +++++++++++++++++++-
 src/utilities/colors.scss                | 112 +++++++++++------------
 3 files changed, 159 insertions(+), 58 deletions(-)
 create mode 100644 .changeset/shy-suns-wave.md

diff --git a/.changeset/shy-suns-wave.md b/.changeset/shy-suns-wave.md
new file mode 100644
index 0000000000..51363a496b
--- /dev/null
+++ b/.changeset/shy-suns-wave.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add new color utility classes
diff --git a/docs/stories/utilities/Color.stories.jsx b/docs/stories/utilities/Color.stories.jsx
index 058cf842e2..94d732e8fe 100644
--- a/docs/stories/utilities/Color.stories.jsx
+++ b/docs/stories/utilities/Color.stories.jsx
@@ -1,5 +1,5 @@
 export default {
-  title: 'Utilities/Color'
+  title: 'Utilities/Color',
 }
 
 export const Text = ({}) => (
@@ -22,8 +22,32 @@ export const Text = ({}) => (
   </div>
 )
 
+export const NewText = ({}) => (
+  <div style={{display: 'inline-flex', flexDirection: 'column', gap: '0.25rem'}}>
+    <div class="fgColor-default">.fgColor-default</div>
+    <div class="fgColor-muted">.fgColor-muted</div>
+
+    <div class="fgColor-accent mt-3">.fgColor-accent</div>
+    <div class="fgColor-success">.fgColor-success</div>
+    <div class="fgColor-attention">.fgColor-attention</div>
+    <div class="fgColor-severe">.fgColor-severe</div>
+    <div class="fgColor-danger">.fgColor-danger</div>
+    <div class="fgColor-open">.fgColor-open</div>
+    <div class="fgColor-closed">.fgColor-closed</div>
+    <div class="fgColor-done">.fgColor-done</div>
+    <div class="fgColor-sponsors">.fgColor-sponsors</div>
+
+    <div class="fgColor-onEmphasis fgColor-accent-emphasis p-2 rounded mt-3">.fgColor-onEmphasis</div>
+  </div>
+)
+
 export const TextInherit = ({}) => (
-  <div class="color-fg-success">This text is green, <a href="#" class="color-fg-inherit">including the link</a></div>
+  <div class="color-fg-success">
+    This text is green,{' '}
+    <a href="#" class="color-fg-inherit">
+      including the link
+    </a>
+  </div>
 )
 
 export const Background = ({}) => (
@@ -65,6 +89,44 @@ export const Background = ({}) => (
   </div>
 )
 
+export const NewBackground = ({}) => (
+  <div style={{display: 'inline-flex', flexDirection: 'column'}}>
+    <div class="bgColor-default p-2 rounded mb-2">.bgColor-default</div>
+    <div class="bgColor-inset p-2 rounded mb-2">.bgColor-inset</div>
+    <div class="bgColor-subtle p-2 rounded mb-2">.bgColor-subtle</div>
+    <div class="bgColor-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-emphasis</div>
+
+    <div class="bgColor-accent-muted p-2 rounded mb-2">.bgColor-accent-muted</div>
+    <div class="bgColor-accent-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-accent-emphasis</div>
+
+    <div class="bgColor-success-muted p-2 rounded mb-2">.bgColor-success-muted</div>
+    <div class="bgColor-success-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-success-emphasis</div>
+
+    <div class="bgColor-attention-muted p-2 rounded mb-2">.bgColor-attention-muted</div>
+    <div class="bgColor-attention-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-attention-emphasis</div>
+
+    <div class="bgColor-severe-muted p-2 rounded mb-2">.bgColor-severe-muted</div>
+    <div class="bgColor-severe-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-severe-emphasis</div>
+
+    <div class="bgColor-danger-muted p-2 rounded mb-2">.bgColor-danger-muted</div>
+    <div class="bgColor-danger-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-danger-emphasis</div>
+
+    <div class="bgColor-open-muted p-2 rounded mb-2">.bgColor-open-muted</div>
+    <div class="bgColor-open-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-open-emphasis</div>
+
+    <div class="bgColor-closed-muted p-2 rounded mb-2">.bgColor-closed-muted</div>
+    <div class="bgColor-closed-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-closed-emphasis</div>
+
+    <div class="bgColor-done-muted p-2 rounded mb-2">.bgColor-done-muted</div>
+    <div class="bgColor-done-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-done-emphasis</div>
+
+    <div class="bgColor-sponsors-muted p-2 rounded mb-2">.bgColor-sponsors-muted</div>
+    <div class="bgColor-sponsors-emphasis fgColor-onEmphasis p-2 rounded">.bgColor-sponsors-emphasis</div>
+
+    <div class="bgColor-transparent p-2 rounded mb-2">.bgColor-transparent</div>
+  </div>
+)
+
 export const Border = ({}) => (
   <div style={{display: 'inline-flex', flexDirection: 'column'}}>
     <div class="border color-border-default p-2 rounded mb-2">.color-border-default</div>
@@ -99,3 +161,37 @@ export const Border = ({}) => (
     <div class="border color-border-sponsors-emphasis p-2 rounded">.color-border-sponsors-emphasis</div>
   </div>
 )
+
+export const NewBorder = ({}) => (
+  <div style={{display: 'inline-flex', flexDirection: 'column'}}>
+    <div class="border borderColor-default p-2 rounded mb-2">.borderColor-default</div>
+    <div class="border borderColor-muted p-2 rounded mb-2">.borderColor-muted</div>
+
+    <div class="border borderColor-accent-muted p-2 rounded mb-2">.borderColor-accent-muted</div>
+    <div class="border borderColor-accent-emphasis p-2 rounded mb-4">.borderColor-accent-emphasis</div>
+
+    <div class="border borderColor-success-muted p-2 rounded mb-2">.borderColor-success-muted</div>
+    <div class="border borderColor-success-emphasis p-2 rounded mb-4">.borderColor-success-emphasis</div>
+
+    <div class="border borderColor-attention-muted p-2 rounded mb-2">.borderColor-attention-muted</div>
+    <div class="border borderColor-attention-emphasis p-2 rounded mb-4">.borderColor-attention-emphasis</div>
+
+    <div class="border borderColor-severe-muted p-2 rounded mb-2">.borderColor-severe-muted</div>
+    <div class="border borderColor-severe-emphasis p-2 rounded mb-4">.borderColor-severe-emphasis</div>
+
+    <div class="border borderColor-danger-muted p-2 rounded mb-2">.borderColor-danger-muted</div>
+    <div class="border borderColor-danger-emphasis p-2 rounded mb-4">.borderColor-danger-emphasis</div>
+
+    <div class="border borderColor-open-muted p-2 rounded mb-2">.borderColor-open-muted</div>
+    <div class="border borderColor-open-emphasis p-2 rounded mb-4">.borderColor-open-emphasis</div>
+
+    <div class="border borderColor-closed-muted p-2 rounded mb-2">.borderColor-closed-muted</div>
+    <div class="border borderColor-closed-emphasis p-2 rounded mb-4">.borderColor-closed-emphasis</div>
+
+    <div class="border borderColor-done-muted p-2 rounded mb-2">.borderColor-done-muted</div>
+    <div class="border borderColor-done-emphasis p-2 rounded mb-4">.borderColor-done-emphasis</div>
+
+    <div class="border borderColor-sponsors-muted p-2 rounded mb-2">.borderColor-sponsors-muted</div>
+    <div class="border borderColor-sponsors-emphasis p-2 rounded">.borderColor-sponsors-emphasis</div>
+  </div>
+)
diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index c366c4a0d8..6ea5a90026 100644
--- a/src/utilities/colors.scss
+++ b/src/utilities/colors.scss
@@ -1,94 +1,94 @@
 
 // Foreground
 
-.color-fg-default     { color: var(--fgColor-default, var(--color-fg-default)) !important; }
-.color-fg-muted       { color: var(--fgColor-muted, var(--color-fg-muted)) !important; }
+.color-fg-default, .fgColor-default     { color: var(--fgColor-default, var(--color-fg-default)) !important; }
+.color-fg-muted, .fgColor-muted      { color: var(--fgColor-muted, var(--color-fg-muted)) !important; }
 .color-fg-subtle      { color: var(--fgColor-muted, var(--color-fg-subtle)) !important; }
 
-.color-fg-accent    { color: var(--fgColor-accent, var(--color-accent-fg)) !important; }
-.color-fg-success   { color: var(--fgColor-success, var(--color-success-fg)) !important; }
-.color-fg-attention { color: var(--fgColor-attention, var(--color-attention-fg)) !important; }
-.color-fg-severe    { color: var(--fgColor-severe, var(--color-severe-fg)) !important; }
-.color-fg-danger    { color: var(--fgColor-danger, var(--color-danger-fg)) !important; }
-.color-fg-open      { color: var(--fgColor-open, var(--color-open-fg)) !important; }
-.color-fg-closed    { color: var(--fgColor-closed, var(--color-closed-fg)) !important; }
-.color-fg-done      { color: var(--fgColor-done, var(--color-done-fg)) !important; }
-.color-fg-sponsors  { color: var(--fgColor-sponsors, var(--color-sponsors-fg)) !important; }
+.color-fg-accent, .fgColor-accent    { color: var(--fgColor-accent, var(--color-accent-fg)) !important; }
+.color-fg-success, .fgColor-success   { color: var(--fgColor-success, var(--color-success-fg)) !important; }
+.color-fg-attention, .fgColor-attention { color: var(--fgColor-attention, var(--color-attention-fg)) !important; }
+.color-fg-severe, .fgColor-severe    { color: var(--fgColor-severe, var(--color-severe-fg)) !important; }
+.color-fg-danger, .fgColor-danger    { color: var(--fgColor-danger, var(--color-danger-fg)) !important; }
+.color-fg-open, .fgColor-open      { color: var(--fgColor-open, var(--color-open-fg)) !important; }
+.color-fg-closed, .fgColor-closed    { color: var(--fgColor-closed, var(--color-closed-fg)) !important; }
+.color-fg-done, .fgColor-done      { color: var(--fgColor-done, var(--color-done-fg)) !important; }
+.color-fg-sponsors, .fgColor-sponsors  { color: var(--fgColor-sponsors, var(--color-sponsors-fg)) !important; }
 
-.color-fg-on-emphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important; }
+.color-fg-on-emphasis, .fgColor-onEmphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important; }
 
 // Background
 
-.color-bg-default  { background-color: var(--bgColor-default, var(--color-canvas-default)) !important; }
+.color-bg-default, .bgColor-default  { background-color: var(--bgColor-default, var(--color-canvas-default)) !important; }
 .color-bg-overlay  { background-color: var(--overlay-bgColor, var(--color-canvas-overlay)) !important; }
-.color-bg-inset    { background-color: var(--bgColor-inset, var(--color-canvas-inset)) !important; }
-.color-bg-subtle   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
-.color-bg-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important; }
+.color-bg-inset, .bgColor-inset    { background-color: var(--bgColor-inset, var(--color-canvas-inset)) !important; }
+.color-bg-subtle, .bgColor-muted   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
+.color-bg-emphasis, .bgColor-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important; }
 
-.color-bg-accent          { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)) !important; }
-.color-bg-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
+.color-bg-accent, .bgColor-accent-muted          { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)) !important; }
+.color-bg-accent-emphasis, .bgColor-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
 
-.color-bg-success          { background-color: var(--bgColor-success-muted, var(--color-success-subtle)) !important; }
-.color-bg-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !important; }
+.color-bg-success, .bgColor-success-muted          { background-color: var(--bgColor-success-muted, var(--color-success-subtle)) !important; }
+.color-bg-success-emphasis, .bgColor-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !important; }
 
-.color-bg-attention          { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)) !important; }
-.color-bg-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
+.color-bg-attention, .bgColor-attention-muted          { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)) !important; }
+.color-bg-attention-emphasis, .bgColor-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
 
-.color-bg-severe          { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)) !important; }
-.color-bg-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
+.color-bg-severe, .bgColor-severe-muted          { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)) !important; }
+.color-bg-severe-emphasis, .bgColor-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
 
-.color-bg-danger          { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)) !important; }
-.color-bg-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
+.color-bg-danger, .bgColor-danger-muted          { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)) !important; }
+.color-bg-danger-emphasis, .bgColor-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
 
-.color-bg-open          { background-color: var(--bgColor-open-muted, var(--color-open-subtle)) !important; }
-.color-bg-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)) !important; }
+.color-bg-open, .bgColor-open-muted          { background-color: var(--bgColor-open-muted, var(--color-open-subtle)) !important; }
+.color-bg-open-emphasis, .bgColor-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)) !important; }
 
-.color-bg-closed          { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)) !important; }
-.color-bg-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
+.color-bg-closed, .bgColor-closed-muted          { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)) !important; }
+.color-bg-closed-emphasis, .bgColor-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
 
-.color-bg-done          { background-color: var(--bgColor-done-muted, var(--color-done-subtle)) !important; }
-.color-bg-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)) !important; }
+.color-bg-done, .bgColor-done-muted          { background-color: var(--bgColor-done-muted, var(--color-done-subtle)) !important; }
+.color-bg-done-emphasis, .bgColor-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)) !important; }
 
-.color-bg-sponsors          { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)) !important; }
-.color-bg-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
+.color-bg-sponsors, .bgColor-sponsors-muted          { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)) !important; }
+.color-bg-sponsors-emphasis, .bgColor-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
-.color-bg-transparent { background-color: transparent !important; }
+.color-bg-transparent, .bgColor-transparent { background-color: transparent !important; }
 
 // Border
 
-.color-border-default { border-color: var(--borderColor-default, var(--color-border-default)) !important; }
-.color-border-muted   { border-color: var(--borderColor-muted, var(--color-border-muted)) !important; }
+.color-border-default, .borderColor-default { border-color: var(--borderColor-default, var(--color-border-default)) !important; }
+.color-border-muted, .borderColor-muted   { border-color: var(--borderColor-muted, var(--color-border-muted)) !important; }
 .color-border-subtle  { border-color: var(--borderColor-muted, var(--color-border-subtle)) !important; }
 
-.color-border-accent          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
-.color-border-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
+.color-border-accent, .borderColor-accent-muted          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
+.color-border-accent-emphasis, .borderColor-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
 
-.color-border-success          { border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; }
-.color-border-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; }
+.color-border-success, .borderColor-success-muted          { border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; }
+.color-border-success-emphasis, .borderColor-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; }
 
-.color-border-attention          { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)) !important; }
-.color-border-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
+.color-border-attention, .borderColor-attention-muted          { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)) !important; }
+.color-border-attention-emphasis, .borderColor-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
 
-.color-border-severe          { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)) !important; }
-.color-border-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
+.color-border-severe, .borderColor-severe-muted          { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)) !important; }
+.color-border-severe-emphasis, .borderColor-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
 
-.color-border-danger          { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; }
-.color-border-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
+.color-border-danger, .borderColor-danger-muted          { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; }
+.color-border-danger-emphasis, .borderColor-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
 
-.color-border-open          { border-color: var(--borderColor-open-muted, var(--color-open-muted)) !important; }
-.color-border-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)) !important; }
+.color-border-open, .borderColor-open-muted          { border-color: var(--borderColor-open-muted, var(--color-open-muted)) !important; }
+.color-border-open-emphasis, .borderColor-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)) !important; }
 
-.color-border-closed          { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)) !important; }
-.color-border-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
+.color-border-closed, .borderColor-closed-muted          { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)) !important; }
+.color-border-closed-emphasis, .borderColor-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
 
-.color-border-done          { border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; }
-.color-border-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)) !important; }
+.color-border-done, .borderColor-done-muted          { border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; }
+.color-border-done-emphasis, .borderColor-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)) !important; }
 
-.color-border-sponsors          { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)) !important; }
-.color-border-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
+.color-border-sponsors, .borderColor-sponsors-muted          { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)) !important; }
+.color-border-sponsors-emphasis, .borderColor-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 // Misc
 
-.color-fg-inherit {
+.color-fg-inherit, .fgColor-inherit {
   color: inherit !important;
 }