feat(colors): Add new dark swatches and color styles

- Add background modifiers [#99441746] Signed-off-by: Matt Royal <mroyal@pivotal.io>
pivotal-cf · Jul 23, 2015 · 143695b · 143695b
1 parent 04e9c58
commit 143695b
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 10 deletions.
diff --git a/src/pivotal-ui/components/colors/colors.scss b/src/pivotal-ui/components/colors/colors.scss
@@ -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">
@@ -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;

diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -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
 // -------------------------
@@ -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
 // -------------------------