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
primer · Dec 7, 2023 · 8757be5 · 8757be5
1 parent 4195245
commit 8757be5
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 58 deletions.
diff --git a/.changeset/shy-suns-wave.md 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
@@ -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>
+)