Rename -> -color (#40)

amundsen_application/static/css/_buttons-default.scss

@@ -3,12 +3,12 @@
   &:focus,
   &:not(.disabled):hover,
   &:not([disabled]):hover {
-    background-color: $gradient-1;
-    border-color: $gradient-2;
+    background-color: $brand-color-1;
+    border-color: $brand-color-2;
     outline: none;
 
     &.icon {
-     background-color: $gradient-4;
+     background-color: $brand-color-4;
     }
   }
 
@@ -52,10 +52,10 @@
     &:not(.disabled):hover,
     &:not([disabled]):hover {
       background-color: transparent;
-      color: $gradient-4;
+      color: $brand-color-4;
 
       .icon {
-        background-color: $gradient-4;
+        background-color: $brand-color-4;
       }
     }
   }
@@ -71,8 +71,8 @@
 
   &.btn-save {
     color: white;
-    background-color: $gradient-4;
-    border-color: $gradient-4;
+    background-color: $brand-color-4;
+    border-color: $brand-color-4;
     font-family: $font-family-sans-serif-bold;
     font-weight: $font-weight-sans-serif-bold;
 
@@ -80,8 +80,8 @@
     &:not(.disabled):hover,
     &:not([disabled]):hover {
       color: white;
-      background-color: $gradient-5;
-      border-color: $gradient-5;
+      background-color: $brand-color-5;
+      border-color: $brand-color-5;
     }
   }
 

amundsen_application/static/css/_icons.scss

@@ -11,7 +11,7 @@ img.icon {
   width: 24px;
 
   &.icon-color {
-    background-color: $gradient-3;
+    background-color: $brand-color-3;
   }
 
   // TODO - Add other icons here

amundsen_application/static/css/_list-group-item.scss

@@ -9,13 +9,13 @@
   padding-right: 4px;
 }
 .list-group-item:hover {
-  border-top-color: $gradient-2;
-  border-bottom-color: $gradient-2;
-  background-color: $gradient-1;
+  border-top-color: $brand-color-2;
+  border-bottom-color: $brand-color-2;
+  background-color: $brand-color-1;
 }
 .list-group-item:hover + li {
-  border-top-color: $gradient-2;
+  border-top-color: $brand-color-2;
 }
 .list-group-item:hover + li:not(:last-child) {
-  border-bottom-color: $gradient-2;
+  border-bottom-color: $brand-color-2;
 }

amundsen_application/static/css/_variables-default.scss

@@ -2,18 +2,18 @@
  The following are used in Amundsen but are not part of Bootstrap.
  These must be defined here:
 
-  $gradient-1, $gradient-2, $gradient-3, $gradient-4,
+  $brand-color-1, $brand-color-2, $brand-color-3, $brand-color-4, $brand-color-5
   $font-family-sans-serif-bold,
   $font-weight-sans-serif-bold
   */
 
 
 // Colors
-$gradient-1: #f2f5fe !default;
-$gradient-2: #cad6ff !default;
-$gradient-3: #5679ff !default;
-$gradient-4: #3250c8 !default;
-$gradient-5: #28409f !default;
+$brand-color-1: #f2f5fe !default;
+$brand-color-2: #cad6ff !default;
+$brand-color-3: #5679ff !default;
+$brand-color-4: #3250c8 !default;
+$brand-color-5: #28409f !default;
 
 $gray-base:     #000 !default;
 $gray-darker:   lighten($gray-base, 10%) !default; // #1a1a1a
@@ -62,4 +62,4 @@ $list-group-border-radius: 0 !default;
 
 
 // Labels
-$label-primary-bg: $gradient-3 !default;
+$label-primary-bg: $brand-color-3 !default;

amundsen_application/static/js/components/AnnouncementPage/styles.scss

@@ -4,7 +4,7 @@
   margin: 64px auto 48px;
 }
 .announcement-container hr {
-  border: 2px solid $gradient-4;
+  border: 2px solid $brand-color-4;
 }
 .announcement-header {
   font-size: 20px;

amundsen_application/static/js/components/BrowsePage/styles.scss

@@ -11,7 +11,7 @@ h3.header {
 }
 
 hr.header-hr {
-  border: 2px solid $gradient-4;
+  border: 2px solid $brand-color-4;
 }
 
 .browse-body {

amundsen_application/static/js/components/NavBar/styles.scss

@@ -23,11 +23,11 @@
 }
 
 .nav-bar a:hover {
-  color: $gradient-4;
+  color: $brand-color-4;
 }
 
 .nav-bar a.active {
-  color: $gradient-4;
+  color: $brand-color-4;
 }
 
 .nav-bar .nav-bar-right {

amundsen_application/static/js/components/SearchPage/SearchBar/styles.scss

@@ -10,7 +10,7 @@
   height:48px;
 }
 .search-bar:focus-within {
-  border: 2px solid $gradient-2;
+  border: 2px solid $brand-color-2;
 }
 .input-container {
   display: flex;

amundsen_application/static/js/components/SearchPage/styles.scss

@@ -29,7 +29,7 @@
  }
 .pagination>li>a,
 .pagination>li>span {
-  color: $gradient-4;
+  color: $brand-color-4;
   border: 1px solid $gray-lighter;
 }
 .pagination>.active>a,
@@ -39,8 +39,8 @@
 .pagination>.active>span:hover,
 .pagination>.active>span:focus {
   z-index: 0;
-  background-color: $gradient-4;
-  border-color: $gradient-4
+  background-color: $brand-color-4;
+  border-color: $brand-color-4
 }
 .pagination>li>a:focus,
 .pagination>li>a:hover,

amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss

@@ -54,14 +54,14 @@
       cursor: pointer;
 
       &:hover {
-        background-image: linear-gradient($gradient-1, $gradient-1, white);
+        background-image: linear-gradient($brand-color-1, $brand-color-1, white);
 
         .type {
-          color: $gradient-4;
+          color: $brand-color-4;
         }
 
         .expand-icon {
-          background-color: $gradient-4;
+          background-color: $brand-color-4;
         }
       }
     }
@@ -85,7 +85,7 @@
     margin-right: 8px;
   }
   .type {
-    color: $gradient-3;
+    color: $brand-color-3;
     font-size: 13px;
     margin-top: 4px;
     font-family: 'Menlo-Bold', Helvetica, Arial, sans-serif;
@@ -104,7 +104,7 @@
       font-weight: $font-weight-sans-serif-bold;
     }
     .content {
-      color: $gradient-4;
+      color: $brand-color-4;
       font-size: 14px;
     }
   }

amundsen_application/static/js/components/common/ConfirmDeleteButton/styles.scss

@@ -14,7 +14,7 @@
 }
 .delete-button button:hover,
 .delete-button button:focus {
-  color: $gradient-4;
+  color: $brand-color-4;
   opacity: 1;
 }
 

amundsen_application/static/js/components/common/EditableText/styles.scss

@@ -14,11 +14,11 @@
   .edit-link {
     opacity: 0;
     margin-left: 4px;
-    color: $gradient-3;
+    color: $brand-color-3;
     text-decoration: none;
 
     &:hover {
-      color: $gradient-4;
+      color: $brand-color-4;
     }
 
     &.no-value {
@@ -36,8 +36,8 @@
     padding: 0;
     outline: none;
     border: 0;
-    background: $gradient-1;
-    caret-color: $gradient-4;
+    background: $brand-color-1;
+    caret-color: $brand-color-4;
   }
 
   .editable-textarea:focus-within {

amundsen_application/static/js/components/common/EntityCard/EntityCardSection/styles.scss

@@ -34,23 +34,23 @@ button.edit-button {
   mask-image: url('/static/images/icons/Edit.svg');
 }
 button.edit-button:hover {
-  background-color: $gradient-4;
+  background-color: $brand-color-4;
 }
 button.active-edit-button {
   height: 24px;
   width: 24px;
   border: none;
   border-radius: 5px;
-  background-color: $gradient-1;
+  background-color: $brand-color-1;
   background-image: url('/static/images/icons/Edit_Inverted.svg');
-  -moz-box-shadow: inset 1px 1px 2px $gradient-4;
-  -webkit-box-shadow: inset 1px 1px 2px $gradient-4;
-  box-shadow: inset 1px 1px 2px $gradient-4;
+  -moz-box-shadow: inset 1px 1px 2px $brand-color-4;
+  -webkit-box-shadow: inset 1px 1px 2px $brand-color-4;
+  box-shadow: inset 1px 1px 2px $brand-color-4;
 }
 button.edit-button:focus,
 button.active-edit-button:focus {
   outline: none;
-  box-shadow: 0 0 1pt 1pt $gradient-4
+  box-shadow: 0 0 1pt 1pt $brand-color-4
 }
 
 

amundsen_application/static/js/components/common/EntityCard/styles.scss

@@ -2,7 +2,7 @@
 
 .entity-card {
   border-radius: 2px;
-  border-top: 4px solid $gradient-4;
+  border-top: 4px solid $brand-color-4;
   box-shadow: 0 0 24px -2px rgba(0, 0, 0, .2);
   padding: 32px;
 }

amundsen_application/static/js/components/common/InfoButton/styles.scss

@@ -25,5 +25,5 @@ button.info-button.small {
 }
 
 button.info-button:hover {
-    background-color: $gradient-4;
+    background-color: $brand-color-4;
 }

amundsen_application/static/js/components/common/ResourceListItem/TableListItem/styles.scss

@@ -49,6 +49,6 @@
   }
 
   &:hover img.icon {
-    background-color: $gradient-4;
+    background-color: $brand-color-4;
   }
 }

amundsen_application/static/js/components/common/Tabs/styles.scss

@@ -8,7 +8,7 @@
       &.active > a {
         &,
         &:hover {
-          color: $gradient-4;
+          color: $brand-color-4;
         }
 
         &:after {
@@ -29,7 +29,7 @@
 
         // Active tab indicator
         &:after {
-          border: 2px solid $gradient-4;
+          border: 2px solid $brand-color-4;
           bottom: 0;
           content: "";
           left: 0;