Skip to content
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

Add new yellow utilities and variables #737

Merged
merged 7 commits into from
May 14, 2019
Merged

Add new yellow utilities and variables #737

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3fe47ca
add yellow text and bg utilities and variables
broccolini Mar 19, 2019
301c71e
Change to color variables
simurai Mar 20, 2019
a0d97c4
Update docs with new yellow colors
simurai Mar 20, 2019
2fbc4e6
Add deprecation comment
simurai Mar 20, 2019
227f9f5
Add deprecation warning
simurai Mar 29, 2019
8509f68
Update warning
shawnbot May 1, 2019
28f4dce
Merge branch 'master' into brocs_test
simurai May 14, 2019
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
20 changes: 17 additions & 3 deletions pages/css/utilities/colors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,16 @@ Background colors are most commonly used for filling large blocks of content or
</div>
<div class="col-9 float-left">
<div class="container-lg clearfix">
<div class="h4">.bg-yellow-light</div>
<code>{colors.yellow[2]}, $bg-yellow-light</code>
<Swatch className="bg-yellow-light" />
<div class="col-6 float-left">
<div class="h4">.bg-yellow-dark</div>
<code>{colors.yellow[7]}, $bg-yellow-dark</code>
<Swatch className="bg-yellow-dark border-right-0" />
</div>
<div class="col-6 float-left">
<div class="h4">.bg-yellow-light</div>
<code>{colors.yellow[2]}, $bg-yellow-light</code>
<Swatch className="bg-yellow-light" />
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -172,6 +179,10 @@ You can set the color inheritance on an element by using the `text-inherit` clas
.text-orange-light on white
</div>
<span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
<div class="text-yellow mb-2">
.text-yellow on white
</div>
<span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
<div class="text-green mb-2 ml-4">
.text-green on white
</div>
Expand All @@ -198,6 +209,9 @@ You can set the color inheritance on an element by using the `text-inherit` clas
<div class="bg-green-light mb-2">
.text-gray-dark on .bg-green-light
</div>
<div class="bg-yellow-dark mb-2">
.text-gray-dark on .bg-yellow-dark
</div>
<div class="bg-yellow mb-2">
.text-gray-dark on .bg-yellow
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/support/variables/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ $bg-red-light: $red-100 !default;
$bg-white: $white !default;
$bg-yellow: $yellow-500 !default;
$bg-yellow-light: $yellow-200 !default;
$bg-yellow-dark: $yellow-700 !default;

// Text colors
$text-blue: $blue-500 !default;
Expand All @@ -66,3 +67,4 @@ $text-orange-light: $orange-600 !default;
$text-purple: $purple !default;
$text-red: $red-600 !default;
$text-white: $white !default;
$text-yellow: $yellow-800 !default;
10 changes: 7 additions & 3 deletions src/utilities/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
.bg-yellow { background-color: $bg-yellow !important; }
/* Set the background to $bg-yellow-light */
.bg-yellow-light { background-color: $bg-yellow-light !important; }
/* Set the background to $bg-yellow-dark */
.bg-yellow-dark { background-color: $bg-yellow-dark !important; }
/* Set the background to $bg-purple */
.bg-purple { background-color: $bg-purple !important; }
/* Set the background to $bg-purple-light */
Expand All @@ -51,6 +53,8 @@
.text-gray-dark { color: $text-gray-dark !important; }
/* Set the text color to $text-green */
.text-green { color: $text-green !important; }
/* Set the text color to $text-yellow */
.text-yellow { color: $text-yellow !important; }
/* Set the text color to $text-orange */
.text-orange { color: $text-orange !important; }
/* Set the text color to $text-orange-light */
Expand All @@ -62,10 +66,10 @@
/* Set the text color to inherit */
.text-inherit { color: inherit !important; }

// Text states
// These can probably all be regular utilities
// Pending states
// This will be deprecated in the future, use .text-yellow instead
.text-pending { color: $yellow-800 !important; }
// Separate text and background colors in future to improve a11y
// This will be deprecated in the future, use .bg-yellow-dark instead
simurai marked this conversation as resolved.
Show resolved Hide resolved
.bg-pending { color: $yellow-700 !important; }

// Link colors
Expand Down