Skip to content

Add new color utilities #2564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Dec 7, 2023
Merged

Add new color utilities #2564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
66d395d
add new colors
langermank Dec 7, 2023
8c925d8
Create shy-suns-wave.md
langermank Dec 7, 2023
4818319
fix emphasis
langermank Dec 7, 2023
8e847fa
Merge branch 'upstream-utilities' of https://github.com/primer/css in…
langermank Dec 7, 2023
b60ec18
add stories
langermank Dec 7, 2023
4e4b262
Update docs/stories/utilities/Color.stories.jsx
langermank Dec 7, 2023
7887261
Update docs/stories/utilities/Color.stories.jsx
langermank Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/shy-suns-wave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

Add new color utility classes
100 changes: 98 additions & 2 deletions docs/stories/utilities/Color.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default {
title: 'Utilities/Color'
title: 'Utilities/Color',
}

export const Text = ({}) => (
Expand All @@ -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 = ({}) => (
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
)
Loading