Skip to content

Commit

Permalink
feat(colors): add new brand appropriate yellows
Browse files Browse the repository at this point in the history 
Also, removed yellows that we don't use at all

BREAKING CHANGE: Any use of prior yellow colors as background or text
colors that were not already variables referenced elsewhere (see:
alerts) will be broken with this change
  • Loading branch information
@jefflembeck
jefflembeck committed Jun 22, 2016
1 parent be5d1f1 commit 39951f0
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 62 deletions.
50 changes: 21 additions & 29 deletions src/pivotal-ui/components/colors/colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,18 @@ $tabs-active-bg-color: $gray-2;
<p class="mvn">npm-brand-turquoise</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-npm-brand-yellow-1"></div>
<div class="chip-color-name">
<p class="mvn">npm-brand-yellow</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-npm-brand-yellow-2"></div>
<div class="chip-color-name">
<p class="mvn">npm-brand-yellow-2</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-npm-warm-1"></div>
<div class="chip-color-name">
Expand Down Expand Up @@ -496,24 +508,6 @@ $tabs-active-bg-color: $gray-2;
<p class="mvn">warn-3</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-warn-4"></div>
<div class="chip-color-name">
<p class="mvn">warn-4</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-warn-5"></div>
<div class="chip-color-name">
<p class="mvn">warn-5</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-warn-6"></div>
<div class="chip-color-name">
<p class="mvn">warn-6</p>
</div>
</div>
<div class="chip"></div>
<div class="chip"></div>
<div class="chip"></div>
Expand Down Expand Up @@ -578,6 +572,15 @@ $tabs-active-bg-color: $gray-2;
background-color: $npm-brand-turquoise !important;
}

.bg-npm-brand-yellow-1 {
background-color: $npm-brand-yellow-1 !important;
}

.bg-npm-brand-yellow-2 {
background-color: $npm-brand-yellow-2 !important;
}


// warm
.bg-npm-warm-1 {
background-color: $npm-warm-1 !important;
Expand Down Expand Up @@ -853,17 +856,6 @@ $tabs-active-bg-color: $gray-2;
background-color: $warn-3 !important;
}

.bg-warn-4{
background-color: $warn-4 !important;
}

.bg-warn-5{
background-color: $warn-5 !important;
}

.bg-warn-6{
background-color: $warn-6 !important;
}

// Greens
.bg-success-1{
Expand Down
23 changes: 11 additions & 12 deletions src/pivotal-ui/components/pui-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,11 +146,13 @@ $green-6: #EDFFD9;
// Yellow
// -------------------------
$yellow-1: #806613;
$yellow-2: #997B17;
$yellow-3: #B38F1B;
$yellow-4: #CCA41F;
$yellow-5: #E6B822;
$yellow-6: #FFF6D9;
$yellow-2: #B38F1B;
$yellow-3: #FFF6D9;
$yellow-4: #fcef00;
$yellow-5: #E0CA00;

$npm-brand-yellow-1: $yellow-4;
$npm-brand-yellow-2: $yellow-5;

// Orange
// -------------------------
Expand Down Expand Up @@ -246,9 +248,6 @@ $error-6: $red-6;
$warn-1: $yellow-1;
$warn-2: $yellow-2;
$warn-3: $yellow-3;
$warn-4: $yellow-4;
$warn-5: $yellow-5;
$warn-6: $yellow-6;

// Success
// -------------------------
Expand Down Expand Up @@ -629,7 +628,7 @@ $notifications-bell-default-size: $font-size-h2;
$notifications-bell-default-color: $neutral-6;
$notifications-badge-default-bg: $brand-8;
$notifications-badge-font-weight: 900;
$notifications-alert-default-color: $warn-3;
$notifications-alert-default-color: $warn-2;


// COMPONENT VARIABLES
Expand Down Expand Up @@ -964,7 +963,7 @@ $state-info-bg: #e2df80;
$state-info-border: #c0b84d;

$state-warning-text: $warn-1; // bootstrap uses this for both border and text color
$state-warning-bg: $warn-6;
$state-warning-bg: $warn-3;
$state-warning-border: $warn-1;

$state-danger-text: $error-4; // bootstrap uses this for both border and text color
Expand Down Expand Up @@ -1061,7 +1060,7 @@ $alert-info-bg: $accent-6 !default;
$alert-info-text: $accent-2;
$alert-info-border: #8AC0C4 !default;

$alert-warning-bg: $warn-6;
$alert-warning-bg: $warn-3;
$alert-warning-text: $warn-1;
$alert-warning-border: $warn-1;

Expand Down Expand Up @@ -1278,7 +1277,7 @@ $close-text-shadow: 0 1px 0 #fff !default;
// ------------------------
$code-color: null !default;
$code-background-dark: $dark-2;
$code-color-dark: $warn-3;
$code-color-dark: $warn-2;
$code-bg: $neutral-10 !default;
$code-border-radius: 3px;
$code-chrome-border-radius: 6px;
Expand Down
21 changes: 0 additions & 21 deletions src/pivotal-ui/components/typography/typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -706,24 +706,6 @@ Here's a table of all the color classes.
<td class="bg-dark-2"> <p class="type-warn-3">Type warn 3</p> </td>
<td> <code>.type-warn-3</code> </td>
</tr>
<tr>
<td class="bg-neutral-11"> <p class="type-warn-4">Type warn 4</p> </td>
<td class="bg-npm-blue-2"> <p class="type-warn-4">Type warn 4</p> </td>
<td class="bg-dark-2"> <p class="type-warn-4">Type warn 4</p> </td>
<td> <code>.type-warn-4</code> </td>
</tr>
<tr>
<td class="bg-neutral-11"> <p class="type-warn-5">Type warn 5</p> </td>
<td class="bg-npm-blue-2"> <p class="type-warn-5">Type warn 5</p> </td>
<td class="bg-dark-2"> <p class="type-warn-5">Type warn 5</p> </td>
<td> <code>.type-warn-5</code> </td>
</tr>
<tr>
<td class="bg-neutral-11"> <p class="type-warn-6">Type warn 6</p> </td>
<td class="bg-npm-blue-2"> <p class="type-warn-6">Type warn 6</p> </td>
<td class="bg-dark-2"> <p class="type-warn-6">Type warn 6</p> </td>
<td> <code>.type-warn-6</code> </td>
</tr>
</table>
*/
Expand Down Expand Up @@ -830,9 +812,6 @@ Here's a table of all the color classes.
.type-warn-1 { color: $warn-1 !important; }
.type-warn-2 { color: $warn-2 !important; }
.type-warn-3 { color: $warn-3 !important; }
.type-warn-4 { color: $warn-4 !important; }
.type-warn-5 { color: $warn-5 !important; }
.type-warn-6 { color: $warn-6 !important; }

// green type

Expand Down

0 comments on commit 39951f0

Please sign in to comment.