From 66d395de0d7f0976b30c9bd2e821bfd09e9a163b Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:10:04 -0800
Subject: [PATCH 1/6] add new colors

---
 src/utilities/colors.scss | 112 +++++++++++++++++++-------------------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index c366c4a0d8..44645e258c 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { 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-muted { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 // Misc
 
-.color-fg-inherit {
+.color-fg-inherit, .fgColor-inherit {
   color: inherit !important;
 }

From 8c925d8e947df88ade8254593476c21534844330 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:11:43 -0800
Subject: [PATCH 2/6] Create shy-suns-wave.md

---
 .changeset/shy-suns-wave.md | 5 +++++
 1 file changed, 5 insertions(+)
 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

From 4818319034ed903f10717166d5975ea372d58708 Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:13:38 -0800
Subject: [PATCH 3/6] fix emphasis

---
 src/utilities/colors.scss | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index 44645e258c..6ea5a90026 100644
--- a/src/utilities/colors.scss
+++ b/src/utilities/colors.scss
@@ -29,28 +29,28 @@
 .color-bg-accent-emphasis, .bgColor-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-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-muted { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !important; }
+.color-bg-success-emphasis, .bgColor-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-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-muted { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
+.color-bg-attention-emphasis, .bgColor-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-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-muted { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
+.color-bg-severe-emphasis, .bgColor-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-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-muted { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
+.color-bg-danger-emphasis, .bgColor-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-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-muted { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)) !important; }
+.color-bg-open-emphasis, .bgColor-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-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-muted { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
+.color-bg-closed-emphasis, .bgColor-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-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-muted { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)) !important; }
+.color-bg-done-emphasis, .bgColor-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-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-muted { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
+.color-bg-sponsors-emphasis, .bgColor-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 .color-bg-transparent, .bgColor-transparent { background-color: transparent !important; }
 
@@ -61,31 +61,31 @@
 .color-border-subtle  { border-color: var(--borderColor-muted, var(--color-border-subtle)) !important; }
 
 .color-border-accent, .borderColor-accent-muted          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
-.color-border-accent-emphasis, .borderColor-accent-muted { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
+.color-border-accent-emphasis, .borderColor-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-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-muted { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; }
+.color-border-success-emphasis, .borderColor-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-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-muted { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
+.color-border-attention-emphasis, .borderColor-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-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-muted { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
+.color-border-severe-emphasis, .borderColor-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-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-muted { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
+.color-border-danger-emphasis, .borderColor-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-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-muted { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)) !important; }
+.color-border-open-emphasis, .borderColor-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-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-muted { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
+.color-border-closed-emphasis, .borderColor-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-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-muted { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)) !important; }
+.color-border-done-emphasis, .borderColor-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-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-muted { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
+.color-border-sponsors-emphasis, .borderColor-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 // Misc
 

From b60ec18715f7f0d650026442a3187eb2896f2b8a Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:54:29 -0800
Subject: [PATCH 4/6] add stories

---
 docs/stories/utilities/Color.stories.jsx | 107 ++++++++++++++++++++++-
 1 file changed, 105 insertions(+), 2 deletions(-)

diff --git a/docs/stories/utilities/Color.stories.jsx b/docs/stories/utilities/Color.stories.jsx
index 058cf842e2..e1dc4cd53b 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,39 @@ 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-subtle">.fgColor-subtle</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-success">
+      This text is green,{' '}
+      <a href="#" class="fgColor-inherit">
+        including the link
+      </a>
+    </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 +96,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 +168,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>
+)

From 4e4b2620064fa04cf67820067674acb38cc46704 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 7 Dec 2023 12:14:41 -0800
Subject: [PATCH 5/6] Update docs/stories/utilities/Color.stories.jsx

---
 docs/stories/utilities/Color.stories.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/stories/utilities/Color.stories.jsx b/docs/stories/utilities/Color.stories.jsx
index e1dc4cd53b..5bc22e50fe 100644
--- a/docs/stories/utilities/Color.stories.jsx
+++ b/docs/stories/utilities/Color.stories.jsx
@@ -26,7 +26,6 @@ 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-subtle">.fgColor-subtle</div>
 
     <div class="fgColor-accent mt-3">.fgColor-accent</div>
     <div class="fgColor-success">.fgColor-success</div>

From 78872612c9193b73ec3d1e4c69723872854d7031 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 7 Dec 2023 12:14:46 -0800
Subject: [PATCH 6/6] Update docs/stories/utilities/Color.stories.jsx

---
 docs/stories/utilities/Color.stories.jsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/docs/stories/utilities/Color.stories.jsx b/docs/stories/utilities/Color.stories.jsx
index 5bc22e50fe..94d732e8fe 100644
--- a/docs/stories/utilities/Color.stories.jsx
+++ b/docs/stories/utilities/Color.stories.jsx
@@ -36,12 +36,6 @@ export const NewText = ({}) => (
     <div class="fgColor-closed">.fgColor-closed</div>
     <div class="fgColor-done">.fgColor-done</div>
     <div class="fgColor-sponsors">.fgColor-sponsors</div>
-    <div class="fgColor-success">
-      This text is green,{' '}
-      <a href="#" class="fgColor-inherit">
-        including the link
-      </a>
-    </div>
 
     <div class="fgColor-onEmphasis fgColor-accent-emphasis p-2 rounded mt-3">.fgColor-onEmphasis</div>
   </div>