Merge pull request #2899 from hashicorp/jbs-ui-color

UI: use new pink hues for active/primary btns

ui/index.html

@@ -98,7 +98,7 @@
     <div class="row">
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
         <div class="text-center vertical-center">
-          <img src="static/loading-cylon-purple.svg" width="384" height="48">
+          <img src="static/loading-cylon-pink.svg" width="384" height="48">
           <p><small>Loading...</small></p>
         </div>
       </div>
@@ -340,7 +340,7 @@
     <div class="row">
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
         <div class="text-center vertical-center">
-          <img src="static/loading-cylon-purple.svg" width="384" height="48">
+          <img src="static/loading-cylon-pink.svg" width="384" height="48">
           <p><small>Loading...</small></p>
         </div>
       </div>

ui/static/loading-cylon-pink.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#9e84c5" preserveAspectRatio="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#d68ab2" preserveAspectRatio="none">
   <path opacity="0.8" transform="translate(0 0)" d="M2 14 V18 H6 V14z">
     <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
   </path>

ui/style-guide.html

@@ -80,8 +80,8 @@
           <hr>
           <ul class="list-unstyled">
             <li>
-              <div style="width: 75px; height: 75px; display:inline-block;" class="bg-purple"></div>
-              <div style="width: 75px; height: 75px; display:inline-block" class="bg-light-purple"></div>
+              <div style="width: 75px; height: 75px; display:inline-block;" class="bg-pink"></div>
+              <div style="width: 75px; height: 75px; display:inline-block" class="bg-light-pink"></div>
             </li>
             <li>
               <div style="width: 75px; height: 75px; display:inline-block" class="bg-red"></div>

ui/styles/_buttons.scss

@@ -32,13 +32,13 @@
     }
 
     &.btn-primary {
-        color: $purple-dark;
+        color: $pink-dark;
         background-color: transparent;
-        border: 2px solid $purple;
+        border: 2px solid $pink;
 
         &:hover {
-            background-color: $light-purple;
-            color: darken($purple, 10%);
+            background-color: $light-pink;
+            color: darken($pink, 10%);
         }
     }
 
@@ -78,13 +78,13 @@
 
 
     &.active {
-        color: $purple-dark;
+        color: $pink-dark;
         background-color: transparent;
-        border: 2px solid $purple;
+        border: 2px solid $pink;
 
         &:hover {
-            background-color: $light-purple;
-            color: darken($purple, 10%);
+            background-color: $light-pink;
+            color: darken($pink, 10%);
         }
 
         &.btn-noactive {

ui/styles/_lists.scss

@@ -115,11 +115,11 @@
 
     &.active {
         @include transition(border-color .1s linear);
-        border-color: $purple;
+        border-color: $pink;
 
         .list-bar, .list-bar-horizontal {
             @include transition(background-color .1s linear);
-            background-color: $purple;
+            background-color: $pink;
         }
     }
 

ui/styles/_panels.scss

@@ -117,15 +117,15 @@
 
     &.active {
         >.panel-heading {
-            border-color: $purple;
+            border-color: $pink;
         }
 
         @include transition(border-color .1s linear);
-        border-color: $purple;
+        border-color: $pink;
 
         .panel-bar {
         @include transition(background-color .1s linear);
-            background-color: $purple;
+            background-color: $pink;
         }
     }
 }

ui/styles/_type.scss

@@ -5,26 +5,26 @@ body {
 }
 
 a {
-    color: $purple;
+    color: $pink;
     font-weight: 600;
     @include transition(color .2s ease-in-out);
 
     &:hover {
         text-decoration: none;
-        color: darken($purple, 10%);
+        color: darken($pink, 10%);
     }
 
     &.subtle {
         color: inherit;
 
         &:hover {
-            color: $purple;
+            color: $pink;
         }
     }
 }
 
 code {
-    color: $purple-dark;
+    color: $pink-dark;
     background-color: $gray-background;
 }
 

ui/styles/_variables.scss

@@ -12,10 +12,12 @@ $red-darker:                #b03c44;
 $tan:                       #f0f0e5;
 $consul-gray:               #909090;
 $consul-footer-gray:        #d7d4d7;
+$pink-dark:                 #d62783;
+$pink:                      lighten($pink-dark, 20%);
+$light-pink:                #f9f3f7;
 $purple-dark:               #69499a;
 $purple:                    lighten($purple-dark, 20%);
 $light-purple:              #f7f3f9;
-
 $green-faded:               #BBF085;
 $green-dark:                #86B457;
 $red-faded:                 $red;

ui/styles/base.scss

@@ -73,7 +73,7 @@ a {
 
 .row {
     &.colored {
-        background-color: $light-purple;
+        background-color: $light-pink;
     }
 }
 
@@ -82,12 +82,12 @@ a {
 }
 
 
-.bg-purple {
-    background-color: $purple;
+.bg-pink {
+    background-color: $pink;
 }
 
-.bg-light-purple {
-    background-color: $light-purple;
+.bg-light-pink {
+    background-color: $light-pink;
 }
 
 .bg-orange {