Merge pull request #219 from mattnickles/master

[CHI-146] Update colors to comply with new guidelines from brand
CenturyLinkCloud · Feb 21, 2019 · f28e042 · f28e042
2 parents 52c6576 + 16f3d22
commit f28e042
Show file tree

Hide file tree

Showing 65 changed files with 604 additions and 529 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+### 1.0.0 (February 22, 2019)
+
+* Updated colors to comply with new guidelines from brand team.
+
 ### 0.9.1 (January 23, 2019)
 
 * Added progress component.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@centurylink/chi",
-  "version": "0.9.1",
+  "version": "1.0.0",
   "description": "A CenturyLink CSS pattern library for building fast, reusable, and consistent responsive interfaces.",
   "license": "MIT",
   "main": "bin/chi.js",

diff --git a/src/chi/components/alert/_alert-common.scss b/src/chi/components/alert/_alert-common.scss
@@ -9,8 +9,8 @@ $states: (
     border-color: set-color(grey, 30)
   ),
   success: (
-    background-color: set-color(green, 10),
-    border-color: set-color(green, 30)
+    background-color: set-color(mint, 10),
+    border-color: set-color(mint, 30)
   ),
   danger: (
     background-color: set-color(red, 10),

diff --git a/src/chi/components/avatars/avatars.scss b/src/chi/components/avatars/avatars.scss
@@ -2,7 +2,7 @@
 @import 'variables';
 
 $avatar-sizes: (xs: 0.75rem, sm: 1rem, sm2: 1.25rem, sm3: 1.5rem, md: 2rem, lg: 4rem, xl: 6rem, xxl: 8rem);
-$avatar-colors: (grey, red, pink, purple, indigo, navy, blue, teal, emerald, green, yellow, orange, inverse);
+$avatar-colors: (grey, red, pink, purple, indigo, navy, blue, teal, mint, green, yellow, orange, inverse);
 $avatar-default-size: 'md';
 
 .chi {

diff --git a/src/chi/components/badge/badge.scss b/src/chi/components/badge/badge.scss
@@ -107,20 +107,36 @@ $badge: c-badge;
       box-shadow: initial;
     }
 
-    &.-brand {
-      background-color: $brand-color;
-      border: 0.0625rem solid $brand-color;
+    &.-primary {
+      background-color: $primary-color;
+      border: 0.0625rem solid $primary-color;
       color: set-color(white);
 
       &.-outline {
         background-color: set-color(white);
-        color: $brand-color;
+        color: $primary-color;
       }
 
       &.-flat {
         background-color: transparent;
         border-color: transparent;
-        color: $brand-color;
+        color: $primary-color;
+      }
+    }
+
+    &.-secondary {
+      background-color: $secondary-color;
+      border: 0.0625rem solid $secondary-color;
+
+      &.-outline {
+        background-color: set-color(white);
+        color: $secondary-color;
+      }
+
+      &.-flat {
+        background-color: transparent;
+        border-color: transparent;
+        color: $secondary-color;
       }
     }
 

diff --git a/src/chi/components/buttons/_button-groups-variables.scss b/src/chi/components/buttons/_button-groups-variables.scss
@@ -1,4 +1,4 @@
 @import 'mixins';
 @import 'variables';
 
-$state-colors: (brand: emerald, danger: red, info: navy, dark: grey);
+$state-colors: (brand: mint, danger: red, info: navy, dark: grey);
diff --git a/src/chi/components/buttons/_horizontal-button-groups.scss b/src/chi/components/buttons/_horizontal-button-groups.scss
@@ -7,6 +7,8 @@
     &:not(.-vertical) {
       .a-btn {
         &,
+        &.-primary,
+        &.-secondary,
         &.-brand,
         &.-danger,
         &.-info,

diff --git a/src/chi/components/buttons/_vertical-button-groups.scss b/src/chi/components/buttons/_vertical-button-groups.scss
@@ -7,6 +7,8 @@
 
       .a-btn {
         &,
+        &.-primary,
+        &.-secondary,
         &.-brand,
         &.-danger,
         &.-info,

diff --git a/src/chi/components/buttons/buttons.scss b/src/chi/components/buttons/buttons.scss
@@ -3,31 +3,43 @@
 
 $state-colors: (
   brand: (
-    color: emerald,
-    tone: 60,
-    tone-hover: 70,
-    tone-focus: 80
+    color: navy,
+    button-text-color: $text-white,
+    tone: 70,
+    tone-hover: 80,
+    tone-focus: 90
+  ),
+  primary: (
+    color: navy,
+    button-text-color: $text-white,
+    tone: 70,
+    tone-hover: 80,
+    tone-focus: 90
+  ),
+  secondary: (
+    color: mint,
+    button-text-color: $text-color,
+    tone: 40,
+    tone-hover: 50,
+    tone-focus: 60
   ),
   danger: (
     color: red,
-    tone: 60,
-    tone-hover: 70,
-    tone-focus: 80
-  ),
-  info: (
-    color: navy,
+    button-text-color: $text-white,
     tone: 60,
     tone-hover: 70,
     tone-focus: 80
   ),
   dark: (
     color: grey,
+    button-text-color: $text-white,
     tone: 90,
     tone-hover: 100,
     tone-focus: 90
   ),
   inverse: (
     color: white,
+    button-text-color: $text-white,
     tone: null,
     tone-hover: null,
     tone-focus: null
@@ -465,6 +477,7 @@ $sizes: (
     @each $color-definition in $state-colors {
       $type: nth($color-definition, 1);
       $color: map_get(nth($color-definition, 2), color);
+      $button-text-color: map_get(nth($color-definition, 2), button-text-color);
       $tone: map_get(nth($color-definition, 2), tone);
       $tone-hover: map_get(nth($color-definition, 2), tone-hover);
       $tone-focus: map_get(nth($color-definition, 2), tone-focus);
@@ -551,7 +564,7 @@ $sizes: (
           background-color: set-color($color, $tone);
           border: $border solid set-color($color, $tone);
           box-shadow: 0 1px 1px 0 rgba(set-color(black), 0.04);
-          color: set-color(white);
+          color: set-color($button-text-color);
 
           .a-icon {
             color: inherit;
@@ -587,10 +600,10 @@ $sizes: (
           &.-outline {
             background-color: set-color(white);
             border: $border solid set-color($color, $tone);
-            color: set-color($color, 60);
+            color: set-color($color, $tone);
 
             .a-spinner__icon .path {
-              stroke: set-color($color, 60);
+              stroke: set-color($color, $tone);
             }
 
             &:hover,

diff --git a/src/chi/components/card/card.scss b/src/chi/components/card/card.scss
@@ -127,8 +127,8 @@
     }
 
     &.-active {
-      border: 0.0625rem solid $brand-color;
-      box-shadow: 0 0 0 0.0625rem $brand-color;
+      border: 0.0625rem solid $secondary-color;
+      box-shadow: 0 0 0 0.0625rem $secondary-color;
     }
 
     &.-empty {
@@ -142,7 +142,7 @@
         justify-content: center;
 
         & .a-icon {
-          margin-bottom: 1rem;
+          margin: 0.5rem 0;
         }
       }
     }

diff --git a/src/chi/components/dropdown/dropdown.scss b/src/chi/components/dropdown/dropdown.scss
@@ -201,6 +201,7 @@
           background: url("./icon-check-alt.svg") no-repeat right 1rem center;
           background-size: 1rem 1rem;
           color: $brand-color;
+          font-weight: 600;
           padding-right: 3rem;
         }
 

diff --git a/src/chi/components/dropdown/icon-check-alt.svg b/src/chi/components/dropdown/icon-check-alt.svg
diff --git a/src/chi/components/footer/footer.scss b/src/chi/components/footer/footer.scss
@@ -80,7 +80,7 @@
           color: set-color(white);
 
           &:hover {
-            color: $brand-color;
+            color: $secondary-color;
           }
         }
       }
@@ -89,10 +89,10 @@
         color: set-color(grey, 50);
 
         & a {
-          color: set-color(grey, 50);
+          color: set-color(white);
 
           &:hover {
-            color: $brand-color;
+            color: $secondary-color;
           }
         }
       }

diff --git a/src/chi/components/header/header.scss b/src/chi/components/header/header.scss
@@ -99,17 +99,20 @@
         color: set-color(grey, 50);
       }
 
-      .a-tabs li {
-        & > a {
-          color: set-color(white);
+      .a-tabs {
+        li {
+          & > a {
+            color: set-color(white);
 
-          &:hover {
-            color: $brand-color;
+            &:hover {
+              color: $secondary-color;
+            }
           }
         }
 
-        &.-active > a {
-          color: $brand-color;
+        &:not(.-vertical):not(.-responsive):not(.-sliding) > li.-active > a {
+          color: $secondary-color;
+          border-bottom-color: $secondary-color;
         }
       }
     }

diff --git a/src/chi/components/html-select/html-select.scss b/src/chi/components/html-select/html-select.scss
@@ -101,7 +101,7 @@ $sizes: (
       &:focus,
       &.-focus {
         border-color: $focus-color;
-        box-shadow: 0 0 0 3px rgba($focus-color, 0.3);
+        box-shadow: 0 0 0 1px rgba($focus-color, 1);
       }
 
       &[disabled] {
@@ -130,7 +130,7 @@ $sizes: (
 
         &:focus,
         &.-focus {
-          box-shadow: 0 0 0 3px rgba(set-color(red, 50), 0.2);
+          box-shadow: 0 0 0 1px rgba(set-color(red, 50), 1);
         }
       }
     }

diff --git a/src/chi/components/input-number/_input-wrapper.scss b/src/chi/components/input-number/_input-wrapper.scss
@@ -182,7 +182,7 @@ $m-inputNumber: (
     }
 
     & > button {
-      color: $brand-color;
+      color: $text-color;
       display: block;
       height: map-get(map-get($m-inputNumber, md), button-height);
 

diff --git a/src/chi/components/input-number/_input.scss b/src/chi/components/input-number/_input.scss
@@ -76,7 +76,7 @@ $sizes: (
         &:focus,
         &.-focus {
           border-color: $focus-color;
-          box-shadow: 0 0 0 3px rgba($focus-color, 0.3);
+          box-shadow: 0 0 0 1px rgba($focus-color, 1);
         }
 
         &[disabled],
@@ -107,7 +107,7 @@ $sizes: (
 
           &:focus,
           &.-focus {
-            box-shadow: 0 0 0 3px rgba(set-color(red, 50), 0.2);
+            box-shadow: 0 0 0 1px rgba(set-color(red, 50), 1);
           }
         }
       }

diff --git a/src/chi/components/input-text/_input.scss b/src/chi/components/input-text/_input.scss
@@ -10,7 +10,7 @@
       &.a-input {
         border: 0.0625rem solid set-color(grey, 30);
         border-radius: $border-radius;
-        color: set-color(grey, 90);
+        color: $text-color;
         display: block;
         font-size: map-get(map-get($sizes, md), font-size);
         height: map-get(map-get($sizes, md), height);;
@@ -32,7 +32,7 @@
         &:focus,
         &.-focus {
           border-color: $focus-color;
-          box-shadow: 0 0 0 3px rgba($focus-color, 0.3);
+          box-shadow: 0 0 0 1px rgba($focus-color, 1);
         }
 
         &[disabled],
@@ -73,7 +73,7 @@
 
             &:focus,
             &.-focus {
-              box-shadow: 0 0 0 3px rgba(set-color(map-get($state-colors, $type), 50), 0.2);
+              box-shadow: 0 0 0 1px rgba(set-color(map-get($state-colors, $type), 50), 1);
             }
           }
         }

diff --git a/src/chi/components/picker/picker.scss b/src/chi/components/picker/picker.scss
@@ -77,9 +77,9 @@ $sizes: (
 
           &:checked {
             & + label {
-              border: solid 0.0625rem $brand-color;
-              box-shadow: inset 0 0 0 0.0625rem $brand-color;
-              color: $brand-color;
+              border: solid 0.0625rem $secondary-color;
+              box-shadow: inset 0 0 0 0.0625rem $secondary-color;
+              color: $text-color;
               font-weight: 600;
             }
           }

diff --git a/src/chi/components/steps/steps.scss b/src/chi/components/steps/steps.scss
@@ -127,12 +127,18 @@
       background-color: set-color(black);
 
       & > li {
+        color: $secondary-color;
+
         &::before {
           border: 0.125rem solid set-color(black);
         }
 
         & a {
-          color: $brand-color;
+          color: $secondary-color;
+        }
+
+        & > .a-steps__line {
+          border-color: $secondary-color;
         }
       }
     }

diff --git a/src/chi/components/tables/tables.scss b/src/chi/components/tables/tables.scss
@@ -113,7 +113,7 @@ $sizes: (
     & tbody {
       tr {
         &.-row--success {
-          background-color: set-color(green, 10);
+          background-color: set-color(mint, 10);
         }
 
         &.-row--warning {
@@ -125,7 +125,7 @@ $sizes: (
         }
 
         &.-row--info {
-          background-color: set-color(blue, 10);
+          background-color: set-color(navy, 10);
         }
 
         &[disabled] {