Update colours to corporate palette

nice-digital · Jan 25, 2017 · dc423ef · dc423ef
1 parent cb245a9
commit dc423ef
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 363 deletions.
diff --git a/src/stylesheets/components/_components-breadcrumbs.scss b/src/stylesheets/components/_components-breadcrumbs.scss
@@ -14,7 +14,7 @@
 
     &:before {
       @include nice-icon(angle-right);
-      color: get-colour(grey);
+      color: $colour-grey-1;
       margin: scut-em(0 10);
     }
 

diff --git a/src/stylesheets/components/_components-buttons.scss b/src/stylesheets/components/_components-buttons.scss
@@ -6,10 +6,10 @@
   @include remove-mz-focus-inner;
   @include font-size(0, 2.5);
   appearance: none;
-  background: get-colour(blue);
+  background: $colour-dark-grey;
   border: 0;
   border-radius: 0;
-  color: $white;
+  color: $colour-nice-white;
   cursor: pointer;
   display: inline-block;
   margin: 0 em(4) 0 0;
@@ -21,8 +21,8 @@
   &:hover,
   &:focus,
   &:active {
-    background: get-colour(grey);
-    color: $white;
+    background: $colour-rich-black;
+    color: $colour-nice-white;
     text-decoration: none;
   }
 
@@ -31,7 +31,7 @@
   }
 
   &:visited {
-    color: #fff;
+    color: $colour-nice-white;
   }
 
   // Disabled button styles
@@ -48,91 +48,53 @@
   // External links have an icon
   &[rel='external'] {
     &::after {
-      color: $white;
+      color: $colour-nice-white;
     }
 
     &:hover {
       &::after {
-        color: $white;
+        color: $colour-nice-white;
       }
     }
   }
 
-  &--xxs {
-    @include font-size(-3, 1.5);
-    padding: 0 em(10);
-  }
-
-  &--xs {
-    @include font-size(-2, 1.5);
-    padding: 0 em(12);
-  }
-
-  &--sm {
-    @include font-size(-1);
-    padding: 0 em(12);
-  }
-
-  &--lg {
-    @include font-size(1, 3);
-    padding: 0 em(16);
-  }
-
-  &--xl {
+  &--prominent {
     @include font-size(2, 4);
     padding: 0 em(20);
-  }
-
-  &--xxl {
-    @include font-size(3, 4);
-    padding: 0 em(24);
-  }
-
-  &--primary {
-    background: get-colour(green, x-dark);
-    border: 1px solid $white;
-    color: $white;
+    background: $colour-purple;
+    border: 1px solid $colour-nice-white;
+    color: $colour-nice-white;
 
     &:hover {
       text-decoration: underline;
     }
-
-    &:hover,
-    &:focus {
-      background: get-colour(green, xx-dark);
-    }
   }
 
   &--secondary {
-    background: get-colour(grey, x-light);
-    color: get-colour(grey, dark);
+    background: #666;
+    color: $colour-nice-white;
 
     &[rel='external'] {
-      &::after {
-        color: get-colour(grey, dark);
+      &:after {
+        color: $colour-nice-white;
       }
 
       &:hover {
-        &::after {
-          color: get-colour(grey, dark);
+        &:after {
+          color: $colour-nice-white;
         }
       }
     }
 
     &:hover,
     &:focus {
-      background: get-colour(grey, light);
-      color: get-colour(grey, dark);
+      background: #333;
+      color: $colour-nice-white;
       text-decoration: underline;
     }
 
-    &:active {
-      background: get-colour(grey, light);
-      color: get-colour(grey, dark);
-    }
-
     &:visited {
-      color: get-colour(grey, dark);
+      color: $colour-nice-white;
     }
   }
 }
diff --git a/src/stylesheets/components/_components-footer.scss b/src/stylesheets/components/_components-footer.scss
@@ -5,8 +5,8 @@
 /// Site footer
 .site-footer {
   @include font-size(-1);
-  background: get-colour(grey, dark);
-  color: $white;
+  background: $colour-dark-grey;
+  color: $colour-nice-white;
   margin-top: scut-em(32px);
   padding: scut-em(32px 0);
 
@@ -15,7 +15,7 @@
   }
 
   a {
-    color: $white;
+    color: $colour-nice-white;
 
     &:focus {
       color: #000;
@@ -96,25 +96,25 @@
   }
 
   &__item {
-    border-bottom: 1px solid get-colour(grey);
+    border-bottom: 1px solid $colour-grey-1;
 
     &:first-child {
-      border-top: 1px solid get-colour(grey);
+      border-top: 1px solid $colour-grey-1;
     }
 
     a {
       @include font-size(-1, 1.3);
-      color: get-colour(grey, light);
+      color: $colour-grey-3;
       display: block;
       padding: scut-em(8 0);
       text-decoration: none;
 
       &:hover {
-        color: $white;
+        color: $colour-nice-white;
       }
 
       &:focus {
-        color: $black;
+        color: $colour-text;
       }
     }
 
@@ -191,7 +191,7 @@
 
     &:focus,
     &:active {
-      color: $black;
+      color: $colour-text;
     }
   }
 }
@@ -215,7 +215,7 @@
     }
 
     &__item {
-      border-left: 1px solid $white;
+      border-left: 1px solid $colour-nice-white;
       display: inline-block;
       line-height: 1;
 

diff --git a/src/stylesheets/components/_components-global.scss b/src/stylesheets/components/_components-global.scss
@@ -34,7 +34,7 @@
   }
 
   &--panel {
-    background: get-colour(grey, xx-light);
+    background: $colour-panel;
     padding: 0 2%;
     width: auto;
   }

diff --git a/src/stylesheets/components/_components-nav.scss b/src/stylesheets/components/_components-nav.scss
@@ -20,7 +20,7 @@
       text-decoration: none;
 
       &:hover {
-        background-color: get-colour(grey, light);
+        background-color: $colour-panel;
       }
 
       &:active {
@@ -29,8 +29,8 @@
         }
       }
 
-      &::after {
-        background-color: get-colour(blue);
+      &:after {
+        background-color: $colour-text;
         bottom: 0;
         content: '';
         display: none;
@@ -41,56 +41,4 @@
       }
     }
   }
-
-  &__tabs {
-    .active {
-      a {
-        &::after {
-          display: block;
-        }
-      }
-    }
-  }
-
-  &__pills {
-    .active {
-      a {
-        background-color: get-colour(blue, x-light);
-        color: $white;
-      }
-    }
-  }
-
-  &__tabs,
-  &__pills {
-    &--justified {
-      li {
-        text-align: center;
-      }
-
-      // one item
-      li:first-child:nth-last-child(1) {
-        width: 100%;
-      }
-
-      // two items
-      li:first-child:nth-last-child(2),
-      li:first-child:nth-last-child(2) ~ li {
-        width: 50%;
-      }
-
-      // three items
-      li:first-child:nth-last-child(3),
-      li:first-child:nth-last-child(3) ~ li {
-        width: 33.3333%;
-      }
-
-      // four items
-      li:first-child:nth-last-child(4),
-      li:first-child:nth-last-child(4) ~ li {
-        width: 25%;
-      }
-    }
-  }
-
 }
diff --git a/src/stylesheets/components/_components-navbar.scss b/src/stylesheets/components/_components-navbar.scss
@@ -4,7 +4,7 @@
 
 .navbar {
   @extend .nav;
-  background-color: get-colour(grey, x-light);
+  background-color: $colour-grey-3;
 
   @media print {
     display: none;
@@ -18,8 +18,8 @@
   &__nav {
     .active {
       a {
-        &::after {
-          background-color: get-colour(orange);
+        &:after {
+          background-color: $colour-nice-teal;
           display: block;
         }
       }

diff --git a/src/stylesheets/components/_components-panel.scss b/src/stylesheets/components/_components-panel.scss
@@ -9,7 +9,7 @@
   padding: 1em;
 
   &--dark {
-    background: get-colour(grey, mid-dark);
-    color: $white;
+    background: $colour-panel-dark;
+    color: $colour-nice-white;
   }
 }
diff --git a/src/stylesheets/components/_components-phase.scss b/src/stylesheets/components/_components-phase.scss
@@ -44,8 +44,8 @@
 ///
 /// @see .phase-banner
 .phase-tag {
-  background-color: get-colour(grey, mid-dark);
-  color: $white;
+  background-color: $colour-grey-1;
+  color: $colour-nice-white;
   display: inline-block;
   font-weight: 700;
   letter-spacing: 1px;
@@ -55,22 +55,22 @@
   vertical-align: middle;
 
   @media print {
-    @include important(background, $black);
-    @include important(color, $white);
+    @include important(background, $colour-true-black);
+    @include important(color, $colour-true-white);
   }
 
   &--alpha {
     background-color: $colour-alpha;
-    color: $white;
+    color: $colour-nice-white;
   }
 
   &--beta {
     background-color: $colour-beta;
-    color: $white;
+    color: $colour-nice-white;
   }
 
   &--live {
     background-color: $colour-live;
-    color: $white;
+    color: $colour-nice-white;
   }
 }
diff --git a/src/stylesheets/components/_components-tables.scss b/src/stylesheets/components/_components-tables.scss
@@ -18,7 +18,7 @@ table {
   td {
     //@include core-19;
     border-bottom: 1px solid $colour-border;
-    color: $black;
+    color: $colour-text;
     padding: em(12, 19) em(20, 19) em(9, 19) 0;
     text-align: left;
   }

diff --git a/src/stylesheets/helpers/_helpers-print.scss b/src/stylesheets/helpers/_helpers-print.scss
@@ -38,7 +38,7 @@
 
     * {
       @include important(text-shadow, none);
-      @include important(color, $black); // Black prints faster: h5bp.com/s
+      @include important(color, $colour-true-black); // Black prints faster: h5bp.com/s
       @include important(background, transparent);
       @include important(box-shadow, none);
     }