Skip to content

Commit

Permalink
feat(colors): Add new dark swatches and color styles
Browse files Browse the repository at this point in the history
- Add background modifiers

[#99441746]

Signed-off-by: Matt Royal <mroyal@pivotal.io>
  • Loading branch information
Spencer Hurst authored and matt-royal committed Jul 23, 2015
1 parent 04e9c58 commit 143695b
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 10 deletions.
86 changes: 79 additions & 7 deletions src/pivotal-ui/components/colors/colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -129,13 +129,54 @@ $tabs-active-bg-color: $gray-2;
<p class="mvn">dark-3</p>
</div>
</div>
<div class="chip"></div>
<div class="chip"></div>
<div class="chip"></div>
<div class="chip"></div>
<div class="chip"></div>
<div class="chip"></div>
<div class="chip"></div>
<div class="chip">
<div class="chip-color bg-dark-4"></div>
<div class="chip-color-name">
<p class="mvn">dark-4</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-dark-5"></div>
<div class="chip-color-name">
<p class="mvn">dark-5</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-dark-6"></div>
<div class="chip-color-name">
<p class="mvn">dark-6</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-dark-7"></div>
<div class="chip-color-name">
<p class="mvn">dark-7</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-dark-8"></div>
<div class="chip-color-name">
<p class="mvn">dark-8</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-dark-9"></div>
<div class="chip-color-name">
<p class="mvn">dark-9</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-dark-10"></div>
<div class="chip-color-name">
<p class="mvn">dark-10</p>
</div>
</div>
<div class="chip">
<div class="chip-color bg-dark-11"></div>
<div class="chip-color-name">
<p class="mvn">dark-11</p>
</div>
</div>
</div>
<div class="color-chip-row">
Expand Down Expand Up @@ -401,6 +442,37 @@ $tabs-active-bg-color: $gray-2;
background-color: $dark-3 !important;
}

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

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

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

.bg-dark-7{
background-color: $dark-7 !important;
}

.bg-dark-8{
background-color: $dark-8 !important;
}

.bg-dark-9{
background-color: $dark-9 !important;
}

.bg-dark-10{
background-color: $dark-10 !important;
}

.bg-dark-11{
background-color: $dark-11 !important;
}
// Reds
.bg-error-1{
background-color: $error-1 !important;
Expand Down
22 changes: 19 additions & 3 deletions src/pivotal-ui/components/pui-variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,17 @@ $blue-5: #c3f4ff;
// Navy
// -------------------------

$navy-1: #243640;
$navy-2: #3f484f;
$navy-3: #525c63;
$navy-1: #232B2F;
$navy-2: #243641;
$navy-3: #3D4A51;
$navy-4: #4F6069;
$navy-5: #607580;
$navy-6: #788E9A;
$navy-7: #A2B1B9;
$navy-8: #C5CED3;
$navy-9: #DFE5E8;
$navy-10: #EAEDEF;
$navy-11: #F5F6F7;

// Red
// -------------------------
Expand Down Expand Up @@ -122,6 +130,14 @@ $gray-lighter: lighten(#000, 93.5%) !default; // #eee bootstrap only
$dark-1: $navy-1;
$dark-2: $navy-2;
$dark-3: $navy-3;
$dark-4: $navy-4;
$dark-5: $navy-5;
$dark-6: $navy-6;
$dark-7: $navy-7;
$dark-8: $navy-8;
$dark-9: $navy-9;
$dark-10: $navy-10;
$dark-11: $navy-11;

// Brand colors
// -------------------------
Expand Down

0 comments on commit 143695b

Please sign in to comment.