Add better Structure colors

ui/app/styles/components/box-label.scss

@@ -1,12 +1,15 @@
 label.box-label {
   cursor: pointer;
 }
+
 .box-label {
   @extend .box;
   @extend .is-centered;
   @extend .is-gapless;
+  border-color: $grey-light;
   border-radius: 3px;
   text-decoration: none;
+  transition: box-shadow $speed;
   width: 100%;
 
   > div:first-child {
@@ -16,8 +19,17 @@ label.box-label {
   &.is-column {
     @extend .is-flex-column;
   }
+
   &.is-selected {
-    box-shadow: 0 0 0 1px $blue;
+    box-shadow: $box-link-hover-shadow, $box-shadow-middle;
+
+    .icon {
+      color: $grey;
+    }
+  }
+
+  .icon {
+    color: $grey-light;
   }
 
   input[type=radio] {
@@ -25,7 +37,7 @@ label.box-label {
   }
 
   input[type=radio] + label {
-    border: 1px solid $grey;
+    border: 1px solid $grey-light;
     border-radius: 50%;
     cursor: pointer;
     display: block;

ui/app/styles/components/linked-block.scss

@@ -7,7 +7,7 @@
   &:focus,
   &:active {
     position: relative;
-    box-shadow: $box-link-hover-shadow, $box-shadow-middle;
+    box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow, $box-shadow-middle;
   }
 }
 

ui/app/styles/components/list-pagination.scss

@@ -2,7 +2,7 @@
   @extend .has-slim-padding;
   position: relative;
   top: 1px;
-  background-color: $grey-lighter;
+  background-color: $grey-lightest;
   margin-bottom: $size-4;
 
   a {

ui/app/styles/components/sidebar.scss

@@ -55,7 +55,7 @@
   }
 
   .menu-label {
-    color: $grey;
+    color: $grey-light;
     font-weight: $font-weight-semibold;
     font-size: $size-small;
     line-height: 1;

ui/app/styles/core.scss

@@ -1,4 +1,5 @@
-// Start with Bulma variables as a foundation
+// Start with Structure & Bulma variables as a foundation
+@import "./utils/colors";
 @import "bulma/sass/utilities/initial-variables";
 
 // Override variables where appropriate
@@ -7,7 +8,6 @@
 // Utils
 @import "./utils/mixins";
 @import "./utils/animations";
-@import "./utils/colors";
 
 // Bring in the rest of Bulma
 @import "bulma/bulma";

ui/app/styles/core/buttons.scss

@@ -131,7 +131,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
     color: $blue;
 
     &:hover {
-      background-color: $grey-lighter;
+      background-color: $grey-lightest;
     }
   }
 

ui/app/styles/core/footer.scss

@@ -1,4 +1,5 @@
 .footer {
+  background-color: transparent;
   border-top: $base-border;
   padding: $size-3 1.5rem;
   margin-top: auto;

ui/app/styles/core/forms.scss

@@ -70,20 +70,16 @@ label {
 .input,
 .textarea,
 .select select {
+  border-color: $grey-light;
+  color: $grey-dark;
+  padding-left: $size-8;
+  padding-right: $size-8;
   @include until($desktop) {
     font-size: 16px;
   }
   &::placeholder {
     opacity: 0.5;
   }
-  border-color: $grey-light;
-  color: $grey-dark;
-  padding-left: $size-8;
-  padding-right: $size-8;
-
-  .has-background-grey-lighter & {
-    background-color: $white;
-  }
 }
 
 .input,
@@ -98,7 +94,7 @@ label {
 }
 .input[disabled],
 .textarea[disabled] {
-  border-color: $grey-lighter;
+  border-color: $grey-lightest;
   background-color: $white-ter;
   color: $grey-light;
 }
@@ -142,7 +138,7 @@ label {
 
 .input,
 .textarea {
-  box-shadow: none;
+  box-shadow: 0 4px 1px rgba($black, 0.06) inset;
 
   @each $name, $pair in $colors {
     $color: nth($pair, 1);
@@ -179,12 +175,21 @@ label {
   }
 }
 
-.select {
+.select select {
-  &:not(.is-multiple)::after {
+  background-color: $ui-gray-050;
-    border-width: 2px;
+  box-shadow: 0 3px 1px rgba($black, 0.12);
-    margin-top: 0;
+}
-    transform: rotate(-45deg) translateY(-50%);
+
-  }
+.select:not(.is-multiple)::after {
+  border-color: $black;
+  border-width: 2px;
+  margin-top: 0;
+  transform: translateY(25%) rotate(-45deg);
+}
+
+.select:not(.is-multiple)::before {
+  @extend .select:not(.is-multiple)::after;
+  transform: translateY(-75%) rotate(135deg);
 }
 
 .field:not(:last-child) {
@@ -242,7 +247,7 @@ label {
   }
   .checkbox {
     @include input;
-    background-color: $dark-white;
+    background-color: $grey-lightest;
     @each $name, $pair in $colors {
       $color: nth($pair, 1);
       &.is-#{$name} {

ui/app/styles/core/gradients.scss

@@ -1,3 +1,3 @@
 .has-dark-vault-gradient {
-  background: linear-gradient(to right, $vault-grey-dark, $vault-grey);
+  background: linear-gradient(to right, $vault-gray-dark, $vault-gray);
 }

ui/app/styles/core/message.scss

@@ -5,21 +5,21 @@
 
   &.is-warning {
     .message-body {
-      color: $dark-yellow;
+      color: $yellow-darkest;
       padding: 0.75rem 1.25rem;
     }
   }
 
   &.is-highlight {
-    background: $light-yellow;
+    background: $yellow-lightest;
     .message-body {
       border: none;
-      box-shadow: 0 0 0 1px $orange;
+      box-shadow: 0 0 0 1px $yellow;
-      color: $dark-yellow;
+      color: $yellow-darkest;
     }
     .has-text-highlight,
     .close-button {
-      color: $orange;
+      color: $yellow;
     }
     .title,
     code {
@@ -27,8 +27,8 @@
       color: inherit;
     }
     .content .button {
-      border-color: $orange;
+      border-color: $yellow;
-      color: $dark-yellow;
+      color: $yellow-darkest;
     }
   }
 

ui/app/styles/core/notification.scss

@@ -35,10 +35,10 @@
   &.is-warning {
     .title,
     .delete {
-      color: $dark-yellow;
+      color: $yellow-darkest;
     }
     border-color: $orange;
-    color: $dark-yellow;
+    color: $yellow-darkest;
   }
 
   & > .delete {

ui/app/styles/core/tabs.scss

@@ -6,7 +6,7 @@
 
   @include until($tablet) {
     position: relative;
-    background-color: $grey;
+    background-color: $vault-gray-800;
     flex: 0 0 100%;
     height: 3rem;
   }
@@ -42,8 +42,5 @@
     color: $white;
     background: rgba($black, 0.25);
     border-radius: 4px;
-    @include until($tablet) {
-      background: rgba($grey-dark, 0.75);
-    }
   }
 }

ui/app/styles/core/tags.scss

@@ -1,26 +1,14 @@
 .tag:not(body) {
   background-color: $ui-gray-100;
   border-radius: 2px;
-  color: $grey-dark;
+  color: $grey;
   height: auto;
   padding: 0 $size-10;
   margin-right: 0.5rem;
   font-weight: normal;
 
   code {
-    color: $grey-dark;
+    color: $grey;
-  }
-}
-
-.tag.is-outlined {
-  border: 1px solid currentColor;
-}
-
-.tag.is-inverted {
-  border-color: $grey;
-  background: none;
-  code {
-    color: $grey-dark;
   }
 }
 

ui/app/styles/utils/_bulma_variables.scss

@@ -1,34 +1,20 @@
-$vault-grey: #6a7786;
+// Color overrides
-
+$light: $grey-lightest;
-// ui colors
-$blue: #1563ff;
-
-//
-$orange: #f9bb2d;
-$light-orange: rgb(255, 254, 218);
-$light-yellow: #fffbee;
-$dark-yellow: #614903;
-$light-red: #fff5f8;
-$dark-red: #c84034;
-$light-blue: #e2eafa;
-$dark-blue: #1563ff;
-$light-blue: rgb(218, 234, 247);
-$dark-green: #36ae40;
-$light-green: rgb(244, 250, 236);
-$light-white: #f9f8fe;
-$dark-white: #f9f9f9;
-$white-ter: rgba($white, .5);
-$white-bis: $dark-white;
-
-// Primary colors
-$success: $dark-green;
-$danger: $dark-red;
-$warning: $light-yellow;
 $primary: $grey-dark;
+$link: $blue;
+$text: $grey-darkest;
+$info: $blue;
+$success: $green;
+$warning: $yellow;
+$danger: $red;
+$black-bis: $ui-gray-900;
+$black-ter: $ui-gray-700;
+$grey-darker: $ui-gray-900;
+$grey-lighter: $ui-gray-050;
+$white-ter: rgba($white, .5);
+$white-bis: $ui-gray-050;
 $code: $grey-dark;
 $code-background: transparent;
-$info: $dark-blue;
-$light: $grey-lighter;
 $border: $grey-light;
 
 $hr-margin: 1rem 0;
@@ -52,7 +38,7 @@ $font-weight-semibold: 600;
 $font-weight-bold: 700;
 
 //input
-$input-background-color: $dark-white;
+$input-background-color: $white;
 $input-focus-background-color: $white;
 $input-border-color: $grey;
 
@@ -70,9 +56,6 @@ $box-shadow-high: 0 12px 5px -7px rgba($black, 0.08),
 $box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06),
   0 16px 16px -4px rgba($black, 0.20);
 
-$link: $blue;
-$text: $black;
-
 $breadcrumb-item-color: $blue;
 $breadcrumb-item-separator-color: rgba($blue, 0.5);
 $breadcrumb-item-active-color: $black;
@@ -85,13 +68,17 @@ $menu-item-hover-color: $white;
 $progress-bar-background-color: lighten($grey-light, 15%);
 
 $base-border: 1px solid $grey-light;
+$component-border: 1px solid $grey;
+$layout-border: $base-border;
 
 //menu
 $menu-item-hover-color: $text;
-$menu-item-hover-background-color: $grey-lighter;
+$menu-item-hover-background-color: $grey-lightest;
 $menu-item-active-color: $link;
 $menu-item-active-background-color: transparent;
 
+$box-link-hover-shadow: 0 0 0 1px $grey-light;
+
 // animations
 $speed: 150ms;
 $speed-slow: $speed * 2;

ui/app/styles/utils/_colors.scss

@@ -1,33 +1,93 @@
 // Colors that will eventually be in Structure package
 
 // Vault Gray
-$vault-gray-050: #E9EEF5;
+$vault-gray-050: #F7FAFC;
-$vault-gray-100: #DAE2ED;
+$vault-gray-100: #EBEEF5;
-$vault-gray-200: #BCC8D6;
+$vault-gray-200: #D3DBE6;
-$vault-gray-300: #9BAABA;
+$vault-gray-300: #B4BDCC;
-$vault-gray-400: #828F9E;
+$vault-gray-400: #949FB0;
-$vault-gray-500: #6A7786;
+$vault-gray-500: #7C8797;
-$vault-gray-600: #515D6B;
+$vault-gray-600: #5A6370;
-$vault-gray-700: #3D4854;
+$vault-gray-700: #3C434D;
-$vault-gray-800: #242B33;
+$vault-gray-800: #1D2126;
-$vault-gray-900: #11161C;
+$vault-gray-900: #060708;
-
+$vault-gray: $vault-gray-500;
-$vault-grey: $vault-gray-500;
+$vault-gray-dark: $vault-gray-700;
-$vault-grey-dark: $vault-gray-700;
 
 // UI Gray
 $ui-gray-050: #F7F8FA;
 $ui-gray-100: #EBEEF2;
-$ui-gray-200: #DCE0E6;
 $ui-gray-300: #BAC1CC;
-$ui-gray-400: #8E96A3;
 $ui-gray-500: #6a7786;
-$ui-gray-600: #626873;
 $ui-gray-700: #525761;
-$ui-gray-800: #373A42;
 $ui-gray-900: #1F2124;
-
+$grey-lightest: $ui-gray-050;
-$grey-lighter: $ui-gray-050;
 $grey-light: $ui-gray-300;
 $grey: $ui-gray-500;
 $grey-dark: $ui-gray-700;
+$grey-darkest: $ui-gray-900;
+
+// Blue
+$blue-050: #F0F5FF;
+$blue-100: #BFD4FF;
+$blue-300: #5B92FF;
+$blue-500: #1563ff;
+$blue-700: #0E40A3;
+$blue-900: #061B46;
+$blue-lightest: $blue-050;
+$blue-light: $blue-300;
+$blue: $blue-500;
+$blue-dark: $blue-700;
+$blue-darkest: $blue-900;
+
+// Red
+$red-050: #F9ECEE;
+$red-100: #EFC7CC;
+$red-300: #DB7D88;
+$red-500: #C73445;
+$red-700: #7F222C;
+$red-900: #370F13;
+$red-lightest: $red-050;
+$red-light: $red-300;
+$red: $red-500;
+$red-dark: $red-700;
+$red-darkest: $red-900;
+
+// Green
+$green-050: #ECF7ED;
+$green-100: #C6E9C9;
+$green-300: #7ACC81;
+$green-500: #2EB039;
+$green-700: #1E7125;
+$green-900: #0D3010;
+$green-lightest: $green-050;
+$green-light: $green-300;
+$green: $green-500;
+$green-dark: $green-700;
+$green-darkest: $green-900;
+
+// Orange
+$orange-050: #FEF4EC;
+$orange-100: #FDE0C8;
+$orange-300: #FBB77F;
+$orange-500: #FA8F37;
+$orange-700: #A05C23;
+$orange-900: #45270F;
+$orange-lightest: $orange-050;
+$orange-light: $orange-300;
+$orange: $orange-500;
+$orange-dark: $orange-700;
+$orange-darkest: $orange-900;
+
+// Yellow
+$yellow-050: #FFFBED;
+$yellow-100: #FDEEBA;
+$yellow-300: #FBD95E;
+$yellow-500: #FAC402;
+$yellow-700: #A07D02;
+$yellow-900: #453601;
+$yellow-lightest: $yellow-050;
+$yellow-light: $yellow-300;
+$yellow: $yellow-500;
+$yellow-dark: $yellow-700;
+$yellow-darkest: $yellow-900;

ui/app/templates/components/identity/item-aliases.hbs

@@ -1,5 +1,5 @@
 {{#each (if model.alias.id (array model.alias) model.aliases) as |item|}}
-  {{#linked-block
+    {{#linked-block
     "vault.cluster.access.identity.aliases.show"
     item.id
     "details"

ui/app/templates/components/secret-list-header.hbs

@@ -17,7 +17,7 @@
     <p.levelLeft>
       <h1 class="title is-3">
         {{model.id}}
-        <span class="tag is-outlined is-inverted has-text-grey-dark is-font-mono">
+        <span class="tag">
           {{or options.displayName (capitalize model.type)}}
         </span>
         {{#if (eq model.options.version 2)}}

ui/app/templates/partials/replication/enable.hbs

@@ -35,7 +35,7 @@
     {{#if initialReplicationMode}}
       {{#if (eq initialReplicationMode 'dr')}}
         <h3 class="title is-flex-center is-5 is-marginless">
-          {{i-con class="has-text-grey is-medium" glyph="replication" size=24}}
+          {{i-con class="is-medium" glyph="replication" size=24}}
           Disaster Recovery (DR) Replication
         </h3>
         <p class="help has-text-grey-dark">
@@ -43,7 +43,7 @@
         </p>
       {{else if (eq initialReplicationMode 'performance')}}
         <h3 class="title is-flex-center is-5 is-marginless">
-          {{i-con class="has-text-grey is-medium" glyph="perf-replication" size=20}}
+          {{i-con class="is-medium" glyph="perf-replication" size=20}}
           Performance Replication
         </h3>
           {{#if (not version.hasPerfReplication)}}
@@ -68,7 +68,7 @@
           <label for="dr" class="box-label is-column {{if (eq replicationMode 'dr') 'is-selected'}}">
             <div>
               <h3 class="box-label-header title is-6">
-                {{i-con class="has-text-grey is-medium" glyph="replication" size=24}}
+                {{i-con class="is-medium" glyph="replication" size=24}}
                 Disaster Recovery (DR)
               </h3>
               <p class="help has-text-grey-dark">
@@ -90,18 +90,18 @@
           <label for="performance" class="box-label is-column {{if (eq replicationMode 'performance') 'is-selected'}}">
             <div>
               <h3 class="box-label-header title is-6">
-                {{i-con class="has-text-grey is-medium" glyph="perf-replication" size=20}}
+                {{i-con class="is-medium" glyph="perf-replication" size=20}}
                  Performance
                  {{#if (not version.hasPerfReplication)}}
                    {{edition-badge edition="Premium"}}
                  {{/if}}
               </h3>
               {{#if (not version.hasPerfReplication)}}
-                <p class="help has-text-grey-dark">
+                <p class="help is-mediu-dark">
                   Performance Replication is a feature of {{#upgrade-link pageName="Performance Replication"}}Vault Enterprise Premium{{/upgrade-link}}
                 </p>
               {{else}}
-                <p class="help has-text-grey-dark">
+                <p class="help -dark">
                   Performance replication scales workloads horizontally across clusters to make requests faster. Local secondaries handle read requests but forward writes to the primary to be handled.
                 </p>
               {{/if}}

ui/app/templates/vault/cluster/secrets/backends.hbs

@@ -13,7 +13,7 @@
 </PageHeader>
 
 {{#each supportedBackends as |backend|}}
-  {{#linked-block
+    {{#linked-block
     "vault.cluster.secrets.backend.list-root"
     backend.id
     class="box is-sideless is-marginless has-pointer"