Skip to content

Commit 8757be5

Browse files
langermanklangermank
authored
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
1 parent 4195245 commit 8757be5

File tree

3 files changed

+159
-58
lines changed

3 files changed

+159
-58
lines changed

‎.changeset/shy-suns-wave.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Add new color utility classes

‎docs/stories/utilities/Color.stories.jsx‎

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
title: 'Utilities/Color'
2+
title: 'Utilities/Color',
33
}
44

55
export const Text = ({}) => (
@@ -22,8 +22,32 @@ export const Text = ({}) => (
2222
</div>
2323
)
2424

25+
export const NewText = ({}) => (
26+
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '0.25rem'}}>
27+
<div class="fgColor-default">.fgColor-default</div>
28+
<div class="fgColor-muted">.fgColor-muted</div>
29+
30+
<div class="fgColor-accent mt-3">.fgColor-accent</div>
31+
<div class="fgColor-success">.fgColor-success</div>
32+
<div class="fgColor-attention">.fgColor-attention</div>
33+
<div class="fgColor-severe">.fgColor-severe</div>
34+
<div class="fgColor-danger">.fgColor-danger</div>
35+
<div class="fgColor-open">.fgColor-open</div>
36+
<div class="fgColor-closed">.fgColor-closed</div>
37+
<div class="fgColor-done">.fgColor-done</div>
38+
<div class="fgColor-sponsors">.fgColor-sponsors</div>
39+
40+
<div class="fgColor-onEmphasis fgColor-accent-emphasis p-2 rounded mt-3">.fgColor-onEmphasis</div>
41+
</div>
42+
)
43+
2544
export const TextInherit = ({}) => (
26-
<div class="color-fg-success">This text is green, <a href="#" class="color-fg-inherit">including the link</a></div>
45+
<div class="color-fg-success">
46+
This text is green,{' '}
47+
<a href="#" class="color-fg-inherit">
48+
including the link
49+
</a>
50+
</div>
2751
)
2852

2953
export const Background = ({}) => (
@@ -65,6 +89,44 @@ export const Background = ({}) => (
6589
</div>
6690
)
6791

92+
export const NewBackground = ({}) => (
93+
<div style={{display: 'inline-flex', flexDirection: 'column'}}>
94+
<div class="bgColor-default p-2 rounded mb-2">.bgColor-default</div>
95+
<div class="bgColor-inset p-2 rounded mb-2">.bgColor-inset</div>
96+
<div class="bgColor-subtle p-2 rounded mb-2">.bgColor-subtle</div>
97+
<div class="bgColor-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-emphasis</div>
98+
99+
<div class="bgColor-accent-muted p-2 rounded mb-2">.bgColor-accent-muted</div>
100+
<div class="bgColor-accent-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-accent-emphasis</div>
101+
102+
<div class="bgColor-success-muted p-2 rounded mb-2">.bgColor-success-muted</div>
103+
<div class="bgColor-success-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-success-emphasis</div>
104+
105+
<div class="bgColor-attention-muted p-2 rounded mb-2">.bgColor-attention-muted</div>
106+
<div class="bgColor-attention-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-attention-emphasis</div>
107+
108+
<div class="bgColor-severe-muted p-2 rounded mb-2">.bgColor-severe-muted</div>
109+
<div class="bgColor-severe-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-severe-emphasis</div>
110+
111+
<div class="bgColor-danger-muted p-2 rounded mb-2">.bgColor-danger-muted</div>
112+
<div class="bgColor-danger-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-danger-emphasis</div>
113+
114+
<div class="bgColor-open-muted p-2 rounded mb-2">.bgColor-open-muted</div>
115+
<div class="bgColor-open-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-open-emphasis</div>
116+
117+
<div class="bgColor-closed-muted p-2 rounded mb-2">.bgColor-closed-muted</div>
118+
<div class="bgColor-closed-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-closed-emphasis</div>
119+
120+
<div class="bgColor-done-muted p-2 rounded mb-2">.bgColor-done-muted</div>
121+
<div class="bgColor-done-emphasis fgColor-onEmphasis p-2 rounded mb-4">.bgColor-done-emphasis</div>
122+
123+
<div class="bgColor-sponsors-muted p-2 rounded mb-2">.bgColor-sponsors-muted</div>
124+
<div class="bgColor-sponsors-emphasis fgColor-onEmphasis p-2 rounded">.bgColor-sponsors-emphasis</div>
125+
126+
<div class="bgColor-transparent p-2 rounded mb-2">.bgColor-transparent</div>
127+
</div>
128+
)
129+
68130
export const Border = ({}) => (
69131
<div style={{display: 'inline-flex', flexDirection: 'column'}}>
70132
<div class="border color-border-default p-2 rounded mb-2">.color-border-default</div>
@@ -99,3 +161,37 @@ export const Border = ({}) => (
99161
<div class="border color-border-sponsors-emphasis p-2 rounded">.color-border-sponsors-emphasis</div>
100162
</div>
101163
)
164+
165+
export const NewBorder = ({}) => (
166+
<div style={{display: 'inline-flex', flexDirection: 'column'}}>
167+
<div class="border borderColor-default p-2 rounded mb-2">.borderColor-default</div>
168+
<div class="border borderColor-muted p-2 rounded mb-2">.borderColor-muted</div>
169+
170+
<div class="border borderColor-accent-muted p-2 rounded mb-2">.borderColor-accent-muted</div>
171+
<div class="border borderColor-accent-emphasis p-2 rounded mb-4">.borderColor-accent-emphasis</div>
172+
173+
<div class="border borderColor-success-muted p-2 rounded mb-2">.borderColor-success-muted</div>
174+
<div class="border borderColor-success-emphasis p-2 rounded mb-4">.borderColor-success-emphasis</div>
175+
176+
<div class="border borderColor-attention-muted p-2 rounded mb-2">.borderColor-attention-muted</div>
177+
<div class="border borderColor-attention-emphasis p-2 rounded mb-4">.borderColor-attention-emphasis</div>
178+
179+
<div class="border borderColor-severe-muted p-2 rounded mb-2">.borderColor-severe-muted</div>
180+
<div class="border borderColor-severe-emphasis p-2 rounded mb-4">.borderColor-severe-emphasis</div>
181+
182+
<div class="border borderColor-danger-muted p-2 rounded mb-2">.borderColor-danger-muted</div>
183+
<div class="border borderColor-danger-emphasis p-2 rounded mb-4">.borderColor-danger-emphasis</div>
184+
185+
<div class="border borderColor-open-muted p-2 rounded mb-2">.borderColor-open-muted</div>
186+
<div class="border borderColor-open-emphasis p-2 rounded mb-4">.borderColor-open-emphasis</div>
187+
188+
<div class="border borderColor-closed-muted p-2 rounded mb-2">.borderColor-closed-muted</div>
189+
<div class="border borderColor-closed-emphasis p-2 rounded mb-4">.borderColor-closed-emphasis</div>
190+
191+
<div class="border borderColor-done-muted p-2 rounded mb-2">.borderColor-done-muted</div>
192+
<div class="border borderColor-done-emphasis p-2 rounded mb-4">.borderColor-done-emphasis</div>
193+
194+
<div class="border borderColor-sponsors-muted p-2 rounded mb-2">.borderColor-sponsors-muted</div>
195+
<div class="border borderColor-sponsors-emphasis p-2 rounded">.borderColor-sponsors-emphasis</div>
196+
</div>
197+
)

0 commit comments

Comments
 (0)