From 308b376a77a67667ff86a456cc05daff0e72e5f2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 6 Jul 2019 09:22:45 +0200
Subject: [PATCH] Refactor theming, improve color contrast relationships
 between text and background

---
 .../galaxy/scripts/components/PluginList.vue  |   6 +-
 client/galaxy/scripts/layout/page.js          |   4 +-
 .../galaxy/scripts/mvc/workflow/workflow.js   |   8 +-
 client/galaxy/style/scss/base.scss            | 426 +++++++-----------
 client/galaxy/style/scss/charts.scss          |   7 +-
 client/galaxy/style/scss/dataset.scss         |  12 +-
 client/galaxy/style/scss/frame.scss           |   2 +-
 client/galaxy/style/scss/history.scss         |  37 +-
 client/galaxy/style/scss/job.scss             |   4 +-
 client/galaxy/style/scss/library.scss         |   2 +-
 client/galaxy/style/scss/list-item.scss       |  14 +-
 client/galaxy/style/scss/overrides.scss       |  45 +-
 client/galaxy/style/scss/theme/blue.scss      |  50 +-
 client/galaxy/style/scss/ui.scss              |  22 +-
 client/galaxy/style/scss/ui/icon-btn.scss     |   1 -
 client/galaxy/style/scss/ui/search-input.scss |   5 +-
 client/galaxy/style/scss/upload.scss          |   1 +
 17 files changed, 296 insertions(+), 350 deletions(-)

diff --git a/client/galaxy/scripts/components/PluginList.vue b/client/galaxy/scripts/components/PluginList.vue
index 2f70becf0c7..a9402ed4fdf 100644
--- a/client/galaxy/scripts/components/PluginList.vue
+++ b/client/galaxy/scripts/components/PluginList.vue
@@ -20,15 +20,15 @@
                             <div v-else class="ui-thumbnails-icon fa fa-eye" />
                         </td>
                         <td>
-                            <div class="ui-thumbnails-title font-weight-bold text-dark">{{ plugin.html }}</div>
-                            <div class="ui-thumbnails-text text-dark">{{ plugin.description }}</div>
+                            <div class="ui-thumbnails-title font-weight-bold">{{ plugin.html }}</div>
+                            <div class="ui-thumbnails-text">{{ plugin.description }}</div>
                         </td>
                     </tr>
                     <tr v-if="!fixed">
                         <td />
                         <td v-if="plugin.name == name">
                             <div v-if="hdas && hdas.length > 0">
-                                <div class="font-weight-bold text-dark">Select a dataset to visualize:</div>
+                                <div class="font-weight-bold">Select a dataset to visualize:</div>
                                 <div class="ui-select">
                                     <select class="select" v-model="selected">
                                         <option v-for="file in hdas" :key="file.id" :value="file.id">{{
diff --git a/client/galaxy/scripts/layout/page.js b/client/galaxy/scripts/layout/page.js
index af6b5c2ee99..bc7ccbf3462 100644
--- a/client/galaxy/scripts/layout/page.js
+++ b/client/galaxy/scripts/layout/page.js
@@ -172,8 +172,8 @@ const View = Backbone.View.extend({
             `<div id="everything">
                 <div id="background"/>
                 <div id="masthead"/>
-                <div id="messagebox"/>
-                <div id="inactivebox" class="panel-warning-message" />
+                <div id="messagebox" class="full-message"/>
+                <div id="inactivebox" class="full-message panel-warning-message" />
                 <div id="columns">
                     <div id="left" class="unified-panel"/>
                     <div id="center" />
diff --git a/client/galaxy/scripts/mvc/workflow/workflow.js b/client/galaxy/scripts/mvc/workflow/workflow.js
index 9530a6836f1..9359208cbc5 100644
--- a/client/galaxy/scripts/mvc/workflow/workflow.js
+++ b/client/galaxy/scripts/mvc/workflow/workflow.js
@@ -158,12 +158,12 @@ const WorkflowItemView = Backbone.View.extend({
                         <a class="dropdown-item" href="${getAppRoot()}api/workflows/${
                 this.model.id
             }/download?format=json-download">Download</a>
-                        <a class="dropdown-item" id="copy-workflow">Copy</a>
-                        <a class="dropdown-item" id="rename-workflow">Rename</a>
+                        <a class="dropdown-item" href="javascript:void(0)" id="copy-workflow">Copy</a>
+                        <a class="dropdown-item" href="javascript:void(0)" id="rename-workflow">Rename</a>
                         <a class="dropdown-item" href="${getAppRoot()}workflow/display_by_id?id=${
                 this.model.id
             }">View</a>
-                        <a class="dropdown-item" id="delete-workflow">Delete</a>
+                        <a class="dropdown-item" href="javascript:void(0)" id="delete-workflow">Delete</a>
                     </div>`;
         } else {
             return `<div class="dropdown-menu">
@@ -171,7 +171,7 @@ const WorkflowItemView = Backbone.View.extend({
                 "owner"
             )}&slug=${this.model.get("slug")}">View</a>
                         <a class="dropdown-item" href="${getAppRoot()}workflows/run?id=${this.model.id}">Run</a>
-                        <a class="dropdown-item" id="copy-workflow">Copy</a>
+                        <a class="dropdown-item" href="javascript:void(0)" id="copy-workflow">Copy</a>
                         <a class="dropdown-item link-confirm-shared-${
                             this.model.id
                         }" href="${getAppRoot()}workflow/sharing?unshare_me=True&id=${this.model.id}">Remove</a></li>
diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index de554e1ae58..653b7f3544c 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -10,19 +10,9 @@
 $fa-font-path: "../../../node_modules/font-awesome/fonts/";
 @import "../../../node_modules/font-awesome/scss/font-awesome.scss";
 
-.fa-icon {
-    // TODO: remove fa-icon and replace with fa
-    @extend .fa;
-}
-
 @import "select2.scss";
 @import "jquery.rating.scss";
 
-/* fix for zero width select2 - remove when fixed there */
-.select2-minwidth {
-    min-width: 256px;
-}
-
 // galaxy sub-components
 @import "reports";
 @import "frame.scss";
@@ -38,7 +28,21 @@ $fa-font-path: "../../../node_modules/font-awesome/fonts/";
 @import "message.scss";
 @import "toolshed.scss";
 
-// Mixins
+// ==== Select2 ====
+/* fix for zero width select2 - remove when fixed there */
+.select2-minwidth {
+    min-width: 256px;
+}
+
+.select2-drop-active,
+.select2-drop-above.select2-drop-active {
+    border: $border-default;
+    .select2-search {
+        @extend .pt-1;
+    }
+}
+
+// ==== Mixins ====
 @mixin user-select($select) {
     -webkit-touch-callout: #{$select};
     @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
@@ -47,17 +51,6 @@ $fa-font-path: "../../../node_modules/font-awesome/fonts/";
     #{user-select}: #{$select};
 }
 
-.unselectable {
-    @include user-select(none);
-}
-
-.parent-width {
-    //TODO: check out box-sizing w/ bs4
-    //@include box-sizing(border-box);
-    width: 100%;
-    *width: 90%;
-}
-
 @mixin border-radius($radius) {
     // from font-awesome 3.0
     -webkit-border-radius: $radius;
@@ -65,121 +58,117 @@ $fa-font-path: "../../../node_modules/font-awesome/fonts/";
     border-radius: $radius;
 }
 
-// ==== Real (basic) styles ====
+// ==== Basic styles ====
+
+body {
+    @extend .m-2;
+}
+
+.unselectable {
+    @include user-select(none);
+}
+
+.parent-width {
+    @extend .w-100;
+}
 
 .clear {
     @include clearfix();
 }
 
-body {
+// ==== Page layout styles ====
+
+.full-content {
+    @extend .m-0;
+    @extend .p-0;
+    @extend .w-100;
+    @extend .h-100;
+    @extend .overflow-hidden;
+    @extend .position-absolute;
     background: $body-bg;
     color: $text-color;
-    margin: 10px;
+}
 
-    // For panel layout pages
-    &.full-content {
-        overflow: hidden;
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-    }
+.full-message {
+    @extend .w-100;
+    @extend .overflow-hidden;
+    height: $panel-message-height !important;
+    border-bottom: solid $border-color 1px;
+    font-size: 90%;
+    display: none;
+}
+
+#everything {
+    @extend .d-flex;
+    @extend .flex-column;
+    @extend .full-content;
+}
+
+#columns {
+    @extend .position-relative;
+    flex: 1;
+}
+
+#background {
+    @extend .full-content;
+    z-index: -1;
+}
+
+// Used for dragging panels, popup menus, to deal with capturing clicks in iframes
+#dd-helper {
+    @extend .full-content;
+    opacity: 0;
+    z-index: 900; // Bootstrap elements start at 1000
+    display: none;
 }
 
 // ==== Panel layout styles ====
 
-// Layout the paneled UI using flexbox.
-
-#everything {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#columns {
-    // Fill extra space in parent
-    flex: 1;
-    // Allow columns to be absolutely positioned inside
-    position: relative;
-}
-
-#background {
-    position: absolute;
-    background: #fff;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#messagebox {
-    width: 100%;
-    height: $panel-message-height !important;
-    overflow: hidden;
-    border-bottom: solid $border-default-color 1px;
-    font-size: 90%;
-    display: none;
-}
-
-#inactivebox {
-    width: 100%;
-    height: $panel-message-height !important;
-    overflow: hidden;
-    border-bottom: solid $border-default-color 1px;
-    font-size: 90%;
-    display: none;
-}
-
-// Panels
 #left,
 #center,
 #right {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    overflow: hidden;
-    background: white;
+    @extend .position-absolute;
+    @extend .h-100;
+    @extend .overflow-hidden;
 }
 #left {
+    @extend .unified-panel;
     left: 0px;
     width: $panel-width;
     border-right: $layout-border;
 }
 #right {
+    @extend .unified-panel;
     right: 0px;
     width: $panel-width;
     border-left: $layout-border;
 }
+#right > .unified-panel-footer {
+    .drag {
+        left: 0;
+    }
+}
 #center {
+    @extend .overflow-hidden;
     left: $panel-width;
     right: $panel-width;
-    overflow: hidden;
     .center-container {
-        position: absolute;
-        width: 100%;
-        height: 100%;
+        @extend .position-absolute;
+        @extend .w-100;
+        @extend .h-100;
         .center-panel {
+            @extend .position-absolute;
+            @extend .w-100;
+            @extend .h-100;
+            @extend .overflow-auto;
             display: none;
-            position: absolute;
-            width: 100%;
-            height: 100%;
             padding: $margin-h $margin-v;
-            overflow: auto;
-            background: $brand-white;
+            background: $white;
         }
         .center-frame {
-            position: absolute;
-            width: 100%;
-            height: 100%;
+            @extend .position-absolute;
+            @extend .w-100;
+            @extend .h-100;
         }
     }
     // Replaces unnecessary if/then logic in base_panels.mako
@@ -191,50 +180,58 @@ body {
     }
 }
 
-#left,
-#right,
-.unified-panel {
-    background: $panel-bg-color;
-    display: flex;
-    flex-direction: column;
-}
+// ==== Unified panel styles ====
 
+.unified-panel {
+    display: flex;
+    @extend .flex-column;
+    background: $panel-bg-color;
+}
 .unified-panel-header {
     @extend .unselectable;
-    @extend .mx-3;
+    @extend .px-3;
+    @extend .d-flex;
     height: $panel_header_height;
     font-size: 1rem;
     font-weight: bold;
-    display: flex;
     align-items: center;
     color: $panel-header-text-color;
+    background: $panel-bg-header-color;
     a {
         color: $panel-header-text-color;
     }
     .unified-panel-header-inner {
-        width: 100%;
+        @extend .w-100;
         align-items: center;
         justify-content: space-between;
     }
     .panel-header-buttons {
+        @extend .float-right;
         order: 9999;
-        float: right;
         .panel-header-button {
             text-align: center;
             &:not(:last-child) {
                 @extend .mr-2;
             }
             &:hover {
-                color: $brand-info;
+                color: $text-color;
             }
         }
     }
 }
-
 .unified-panel-controls {
     @extend .px-3;
 }
-
+.unified-panel-body {
+    @extend .p-0;
+    @extend .w-100;
+    @extend .h-100;
+    @extend .overflow-auto;
+    flex: 1;
+}
+.unified-panel-body-background {
+    background: none repeat scroll 0 0 $panel-bg-color;
+}
 .unified-panel-footer {
     @extend .unselectable;
     position: relative;
@@ -262,15 +259,9 @@ body {
     }
 }
 
-#right > .unified-panel-footer {
-    .drag {
-        left: 0;
-    }
-}
-
 // Needs to be outside panel to show when hidden
 .panel-collapse {
-    @extend .fa-icon;
+    @extend .fa;
     $border-color: darken($panel-footer-bg-color, 20%);
     font-size: 4/3em;
     cursor: pointer;
@@ -315,35 +306,6 @@ body {
     }
 }
 
-.menu-bg {
-    background: whiteSmoke top repeat-x;
-}
-
-div.unified-panel-body {
-    width: 100%;
-    height: 100%;
-    padding: 0px;
-    flex: 1;
-    overflow: auto;
-}
-
-div.unified-panel-body-background {
-    background: none repeat scroll 0 0 $panel-bg-color;
-}
-
-// Used for dragging panels, popup menus, to deal with capturing clicks in iframes
-#dd-helper {
-    background: white;
-    opacity: 0;
-    z-index: 900; // Bootstrap elements start at 1000
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: none;
-}
-
 // Messages for message box, slightly different style
 
 .panel-error-message,
@@ -379,10 +341,11 @@ div.unified-panel-body-background {
     }
 }
 
-// Masthead
+// ==== Masthead ====
+
 #masthead {
-    padding: 0;
-    margin-bottom: 0px;
+    @extend .p-0;
+    @extend .mb-0;
     background-color: $brand-dark;
     height: $masthead-height;
     .navbar-nav {
@@ -395,48 +358,47 @@ div.unified-panel-body-background {
             align-items: center;
             &.active {
                 background: darken($brand-dark, 10%);
+                .nav-link {
+                    color: $white;
+                }
             }
             .nav-link {
                 cursor: pointer;
                 text-decoration: none;
+                color: $gray-300;
                 &:hover {
-                    color: $dropdown-link-active-color;
+                    color: $brand-toggle;
                 }
                 &.nav-icon {
                     font-size: 1.7em;
                 }
                 &.toggle {
-                    color: $dropdown-link-active-color;
+                    color: $brand-toggle;
                 }
             }
             .nav-note {
-                font-weight: bold;
-                font-size: 10px;
-                position: relative;
-                right: 5px;
-                top: 10px;
-                color: $dropdown-link-active-color;
-                width: 0px;
+                @extend .font-weight-bold;
+                @extend .position-relative;
+                right: 0.4rem;
+                top: 0.7rem;
+                font-size: 0.7rem;
+                color: $brand-toggle;
+                width: 0;
             }
         }
     }
     .navbar-brand {
-        position: absolute;
-        left: 0;
-        // top: 0;
+        @extend .position-absolute;
+        @extend .font-weight-bold;
+        left: 0.3rem;
+        top: 0;
         font-family: verdana;
-        font-weight: bold;
-        font-size: 20px;
-        // line-height: 1;
-        color: $white;
-        // Override margin and padding due to shorter navbar height
-        padding: 5px 20px 12px;
-        margin-left: -15px;
+        font-size: 1.25rem;
+        color: $gray-300;
         text-decoration: none;
         .navbar-brand-image {
             display: inline;
             width: 26px;
-            // vertical-align: top;
             margin-left: 0.35em;
             border: none;
         }
@@ -446,9 +408,10 @@ div.unified-panel-body-background {
     }
 }
 
+// ==== Quota meter styles ====
+
 .quota-meter-container {
     position: absolute;
-    // top: 0;
     right: 0;
     height: 32px;
 }
@@ -528,11 +491,11 @@ div.metadataFormBody div.metadataFormTitle {
 
 div.metadataFormDisabled div.metadataFormTitle {
     background: #eee;
-    border-color: $border-default-color;
+    border-color: $border-color;
 }
 
 div.metadataFormDisabled {
-    border-color: $border-default-color;
+    border-color: $border-color;
 }
 
 div.metadataHelpBody {
@@ -552,11 +515,11 @@ div.toolFormBody div.toolFormTitle {
 
 div.toolFormDisabled div.toolFormTitle {
     background: #f5f5f5;
-    border-color: $border-default-color;
+    border-color: $border-color;
 }
 
 div.toolFormDisabled {
-    border-color: $border-default-color;
+    border-color: $border-color;
 }
 
 div.toolHelp {
@@ -693,18 +656,6 @@ div.form-row-input label {
     margin-bottom: 10px;
 }
 
-// Selects
-select {
-    padding: 2px;
-    font-size: $font-size-base;
-    line-height: $line-height-base;
-}
-
-select,
-input,
-textarea {
-    font: inherit;
-}
 
 .form-row {
     select,
@@ -718,23 +669,6 @@ textarea {
     display: block;
 }
 
-textarea,
-input[type="text"],
-input[type="password"] {
-    font-size: $font-size-base;
-    line-height: $line-height-base;
-}
-
-// Always style buttons and submits as bootstrap buttons
-input[type="submit"],
-button {
-    @extend .btn;
-    @extend .btn-secondary;
-    &.btn-primary {
-        @extend .btn-primary;
-    }
-}
-
 // Messages
 
 .errormessagelarge,
@@ -792,8 +726,6 @@ button {
     padding: 5px;
     padding-left: 25px;
     min-height: 15px;
-    //border: 1px solid $error_message_border;
-    //background-color: $error_message_bg;
     background-image: url(../../images/error_small.png);
     background-repeat: no-repeat;
     background-position: 5px 6px;
@@ -923,55 +855,49 @@ div.debug {
 }
 
 // Data grid style
-
 .grid-table {
-    width: 100%;
+    @extend .w-100;
 }
 .grid-header {
-    padding-bottom: 1em;
-}
-.grid-header h2 {
-    margin: 0;
-    margin-bottom: 0.5em;
+    @extend .mb-2;
 }
 .grid-header .title {
-    font-weight: bold;
+    @extend .font-weight-bold;
 }
 .grid {
-    padding-top: 1em;
+    @extend .pt-2;
+    @extend .w-100;
     border-collapse: collapse;
-    width: 100%;
 }
 .grid tbody td {
-    line-height: $line-height-base;
-    border-top: solid #dddddd 1px;
-    border-bottom: solid #dddddd 1px;
-    padding: 5px;
+    @extend .border-top;
+    @extend .border-bottom;
+    @extend .p-1;
 }
 .grid tbody td:empty {
-    padding: 0;
+    @extend .p-0;
 }
 .grid thead tr {
     height: 2em;
 }
 .grid thead th {
+    @extend .p-1;
+    @extend .border-top;
+    @extend .border-bottom;
     line-height: $line-height-base;
-    background: $table-heading-bg;
-    color: contrast($table-heading-bg);
-    border-top: solid $table-border-color 1px;
-    border-bottom: solid $table-border-color 1px;
-    padding: 5px;
+    background: $brand-light;
+    color: $text-color;
     text-align: left;
     white-space: nowrap;
 }
 .grid tfoot td {
-    background-color: #f8f8f8;
-    border-top: solid #dddddd 1px;
-    border-bottom: solid #dddddd 1px;
-    padding: 5px;
+    @extend .border-top;
+    @extend .border-bottom;
+    @extend .p-1;
+    background-color: $brand-light;
 }
 .grid .current {
-    background-color: #eeeeff;
+    background-color: lighten($brand-success, 20%);
 }
 
 // Pulled out of grid base
@@ -1077,32 +1003,25 @@ ul.manage-table-actions li {
 }
 
 .state-progress {
-    border: 1px solid gray;
-    position: relative;
-
-    margin-top: 2px;
-    margin-bottom: 1px;
-
+    @extend .position-relative;
+    @extend .m-1;
+    border: $border-default;
     .info {
-        color: $black;
-        background: $white;
+        color: $text-color;
+        background: $body-bg;
     }
-
     .new {
         background: $state-default-bg;
     }
-
     .running {
         background: $state-running-bg;
     }
-
     .ok {
         background: $state-success-bg;
     }
-
     .note {
-        margin-left: 1em;
-        position: absolute;
+        @extend .position-absolute;
+        @extend .ml-2;
     }
 }
 
@@ -1170,6 +1089,7 @@ a.btn {
 }
 a.action-button {
     color: $btn-default-color;
+    background: $btn-default-bg;
     text-decoration: none;
 }
 .action-button > img {
@@ -1370,7 +1290,7 @@ div.permissionContainer {
 
 .editable-text:hover {
     cursor: text;
-    border: dotted $border-default-color 1px;
+    border: dotted $border-color 1px;
 }
 
 .icon-button.multiinput {
@@ -1753,7 +1673,7 @@ div.toolSectionWrapper {
     @extend .fa;
     @extend .fa-circle;
     @extend .mt-1;
-    color: $white;
+    color: $brand-light;
     position: absolute;
     z-index: 1500;
     > icon {
@@ -1791,7 +1711,7 @@ div.toolSectionWrapper {
 }
 .mark-terminal {
     cursor: pointer;
-    color: darken($border-default-color, 20%);
+    color: $gray-500;
     &.mark-terminal-active {
         color: $brand-success;
     }
diff --git a/client/galaxy/style/scss/charts.scss b/client/galaxy/style/scss/charts.scss
index 93b42b8c966..49bd3e765c2 100644
--- a/client/galaxy/style/scss/charts.scss
+++ b/client/galaxy/style/scss/charts.scss
@@ -1,4 +1,5 @@
 .charts-client {
+    background: $body-bg;
     .charts-buttons {
         @extend .float-right;
         position: absolute;
@@ -7,7 +8,7 @@
         width: 170px;
         top: 4px;
         .btn {
-            background: white;
+            background: $body-bg;
             color: $panel-header-text-color;
             border: none;
             .icon {
@@ -60,8 +61,8 @@
         float: left;
         width: 30%;
         height: 100vh;
-        padding-bottom: 32px;
-        padding-top: 32px;
+        padding-bottom: 40px;
+        padding-top: 40px;
         overflow: hidden;
         display: flex;
         flex-direction: column;
diff --git a/client/galaxy/style/scss/dataset.scss b/client/galaxy/style/scss/dataset.scss
index 28a28b04dfa..b5911bcf944 100644
--- a/client/galaxy/style/scss/dataset.scss
+++ b/client/galaxy/style/scss/dataset.scss
@@ -4,7 +4,7 @@
 // ---------------------------------------------------------------------------- dataset states
 //.dataset .state-icon {
 .state-icon {
-    @extend .fa-icon;
+    @extend .fa;
     display: inline-block;
     margin-right: 4px;
     vertical-align: middle;
@@ -309,17 +309,15 @@
             @extend %vertical-spacing;
             .annotation {
                 @extend %info-section;
-                //white-space: pre-line;
                 white-space: pre-wrap;
                 overflow: auto;
             }
             // fake placeholder for editable text annotation
             .annotation:empty:after {
-                position: relative;
-                top: -4px;
-                font-size: 10px;
-                font-style: italic;
-                color: grey;
+                @extend .position-relative;
+                @extend .font-italic;
+                @extend .h6;
+                color: $gray-500;
                 //TODO: move out for localization
                 content: "Click here to edit annotation";
             }
diff --git a/client/galaxy/style/scss/frame.scss b/client/galaxy/style/scss/frame.scss
index ef956308d4a..6bbcd84b5f3 100644
--- a/client/galaxy/style/scss/frame.scss
+++ b/client/galaxy/style/scss/frame.scss
@@ -1,5 +1,5 @@
 $frame-zindex: 1000;
-$frame-default-border: $border-default-color;
+$frame-default-border: $border-color;
 
 .galaxy-frame {
     .corner {
diff --git a/client/galaxy/style/scss/history.scss b/client/galaxy/style/scss/history.scss
index 4e4686de8d8..fb9a768934e 100644
--- a/client/galaxy/style/scss/history.scss
+++ b/client/galaxy/style/scss/history.scss
@@ -39,13 +39,13 @@
         .annotation-display {
             display: none;
             margin-bottom: 8px;
+            color: $gray-500;
             .prompt {
                 display: block;
                 margin: 0px;
                 padding: 0px;
                 font-size: 90%;
                 font-weight: normal;
-                color: #555;
             }
             .prompt:after {
                 content: ":";
@@ -66,7 +66,7 @@
                 top: -4px;
                 font-size: 10px;
                 font-style: italic;
-                color: grey;
+                color: $gray-500;
                 //TODO: move out for localization
                 content: "Click here to edit annotation";
             }
@@ -77,13 +77,11 @@
                 width: 100%;
             }
         }
-
         .list-pagination {
             width: 100%;
             text-align: center;
             margin: 0;
             border-top: 1px solid $btn-default-border;
-
             button {
                 margin: 0;
                 padding: 0;
@@ -98,7 +96,6 @@
                 -moz-appearance: none;
                 -webkit-appearance: none;
                 appearance: none;
-
                 margin: 0;
                 padding: 0;
                 width: 48%;
@@ -107,7 +104,6 @@
                 box-shadow: none;
                 text-align: center;
                 text-align-last: center;
-
                 &:focus {
                     outline: none;
                 }
@@ -123,7 +119,7 @@
                 border-radius: 0px;
                 background: transparent;
                 &.pages {
-                    color: grey;
+                    color: $gray-500;
                     text-decoration: underline;
                 }
                 &:hover,
@@ -135,7 +131,6 @@
                     text-decoration: none;
                 }
             }
-
             &:hover > *:not([disabled]) {
                 color: $btn-default-color;
             }
@@ -145,7 +140,7 @@
     // the help text that appears above the drop target
     .history-drop-target-help {
         margin: 10px 10px 4px 10px;
-        color: grey;
+        color: $gray-500;
         font-size: 80%;
         font-style: italic;
         text-align: center;
@@ -163,7 +158,7 @@
         overflow-y: auto;
 
         &:not(:empty) {
-            border-top: 1px solid $border-default-color;
+            border-top: 1px solid $border-color;
         }
         &:empty {
             flex-grow: 0 !important;
@@ -183,7 +178,7 @@
         width: 100%;
         padding: 16px;
         text-align: center;
-        color: grey;
+        color: $text-color;
     }
 
     .history-content.dataset,
@@ -427,7 +422,7 @@
     & > .header,
     & > .footer {
         width: 100%;
-        background-color: lightgrey;
+        background-color: $white;
         .btn {
             height: 21px;
         }
@@ -466,7 +461,6 @@
     // the header/footers controls
     .control-column {
         margin-top: 4px;
-
         .btn {
             @extend .btn-sm;
         }
@@ -477,9 +471,8 @@
         .header-info {
             display: inline-block;
             padding: 2px 4px 2px 4px;
-            color: grey;
+            color: $gray-500;
         }
-
         &.control-column-right,
         &.control-column-left {
             margin-right: 8px;
@@ -512,7 +505,7 @@
     .middle {
         min-width: 100%;
         margin: 0px 0px 0px 0px;
-        background-color: white;
+        background-color: $white;
         padding: $mph-column_gap 0px;
     }
 
@@ -524,7 +517,7 @@
         &:first-child {
             position: fixed;
             z-index: 10;
-            background-color: white;
+            background-color: $white;
             width: $mph-column_width + $mph-column_gap;
             padding-left: $mph-column_gap;
 
@@ -544,7 +537,7 @@
         .panel-controls {
             width: 100%;
             height: ($mph-controls_height + 4);
-            background-color: white;
+            background-color: $white;
 
             .btn {
                 @extend .btn-sm;
@@ -557,20 +550,17 @@
             }
             .current-label {
                 display: inline-block;
-                color: grey;
+                color: $gray-500;
                 padding-left: 2px;
                 margin-top: 2px;
             }
         }
         .history-panel {
             width: 100%;
-
             border: $mph-border_width solid grey;
             border-radius: 3px 3px 0px 0px;
             background-color: $panel-bg-color;
-
             overflow: auto;
-
             & > .controls .subtitle {
                 min-height: 15px;
                 margin: -4px 0px 8px;
@@ -578,7 +568,6 @@
                     content: ", ";
                 }
             }
-
             & > .controls .list-pagination {
                 // text a bit smaller for all
                 font-size: 90%;
@@ -597,7 +586,7 @@
         transform-origin: left top 0;
         margin-left: 16px;
         white-space: nowrap;
-        color: grey;
+        color: $gray-500;
         span {
             // space btwn icon and text
             margin-right: 8px;
diff --git a/client/galaxy/style/scss/job.scss b/client/galaxy/style/scss/job.scss
index a855e1c6274..789f3a6507e 100644
--- a/client/galaxy/style/scss/job.scss
+++ b/client/galaxy/style/scss/job.scss
@@ -1,6 +1,6 @@
 // ---------------------------------------------------------------------------- generic panel list items
 .job.list-item {
-    border: 1px solid $border-default-color;
+    border: 1px solid $border-color;
 
     .title-bar {
         .subtitle {
@@ -45,7 +45,7 @@
                 .list-item {
                     border: 0px;
                     border-radius: 0px;
-                    border-top: 1px solid $border-default-color;
+                    border-top: 1px solid $border-color;
                     &:last-child {
                     }
                 }
diff --git a/client/galaxy/style/scss/library.scss b/client/galaxy/style/scss/library.scss
index ca7b392c029..503c3e1a969 100644
--- a/client/galaxy/style/scss/library.scss
+++ b/client/galaxy/style/scss/library.scss
@@ -83,7 +83,7 @@
         color: $brand-light;
     }
     tr.table-primary td a {
-        color: $brand-white;
+        color: $white;
     }
     a.dark {
         color: white;
diff --git a/client/galaxy/style/scss/list-item.scss b/client/galaxy/style/scss/list-item.scss
index d5fe3b18b02..9d13120df35 100644
--- a/client/galaxy/style/scss/list-item.scss
+++ b/client/galaxy/style/scss/list-item.scss
@@ -13,11 +13,11 @@ $vertical-gap: 8px;
 
 %help-text {
     font-weight: normal;
-    color: #555;
+    color: $gray-700;
 }
 
 .list-item {
-    border: 1px solid $border-default-color;
+    border: 1px solid $border-color;
 
     .vertical-spacing {
         @extend %vertical-spacing;
@@ -51,7 +51,7 @@ $vertical-gap: 8px;
     .help-text {
         @extend %help-text;
         font-weight: normal;
-        color: #555;
+        color: $gray-700;
     }
 
     .selector {
@@ -88,14 +88,14 @@ $vertical-gap: 8px;
             text-decoration: underline;
         }
         .subtitle {
-            color: #777;
+            color: $gray-500;
             font-size: 90%;
             a {
                 color: inherit;
             }
         }
         .state-description {
-            color: #777;
+            color: $gray-500;
             font-size: 90%;
             a {
                 color: inherit;
@@ -156,7 +156,7 @@ $vertical-gap: 8px;
             }
         }
         .subtitle {
-            color: #777;
+            color: $gray-500;
             font-size: 90%;
             a {
                 color: inherit;
@@ -225,7 +225,7 @@ $vertical-gap: 8px;
     background: white;
     padding: 4px;
     .list-items {
-        border: 1px solid $border-default-color;
+        border: 1px solid $border-color;
         border-radius: 3px;
         .list-item {
             &:first-child {
diff --git a/client/galaxy/style/scss/overrides.scss b/client/galaxy/style/scss/overrides.scss
index 481e1143590..945d22f99f9 100644
--- a/client/galaxy/style/scss/overrides.scss
+++ b/client/galaxy/style/scss/overrides.scss
@@ -25,7 +25,7 @@ pre {
 }
 
 .btn-secondary {
-    border: 1px solid $border-default-color;
+    border: $border-default;
 }
 
 .popover .popover-body {
@@ -38,6 +38,12 @@ pre {
     }
 }
 
+.dropdown-item, .dropdown-header {
+    color: $text-color;
+}
+
+// Input fields
+
 input[type="checkbox"],
 input[type="radio"] {
     margin-left: 0.5ex;
@@ -45,6 +51,35 @@ input[type="radio"] {
     float: left;
 }
 
+select {
+    padding: 2px;
+    font-size: $font-size-base;
+    line-height: $line-height-base;
+}
+
+select,
+input,
+textarea {
+    font: inherit;
+}
+
+textarea,
+input[type="text"],
+input[type="password"] {
+    font-size: $font-size-base;
+    line-height: $line-height-base;
+}
+
+// Always style buttons and submits as bootstrap buttons
+input[type="submit"],
+button {
+    @extend .btn;
+    @extend .btn-secondary;
+    &.btn-primary {
+        @extend .btn-primary;
+    }
+}
+
 // Modal -- wider by default, scroll like Trello
 
 .modal-dialog {
@@ -64,6 +99,14 @@ input[type="radio"] {
     @extend .mb-2;
 }
 
+.tabbable {
+    .nav-tabs {
+        .nav-item {
+            cursor: pointer;
+        }
+    }
+}
+
 // Don't make blockquotes very large since they're often used in the toolform
 // and this does not look nice to have a quoted portion of a tool's help
 // documentation be rendered 150% larger.
diff --git a/client/galaxy/style/scss/theme/blue.scss b/client/galaxy/style/scss/theme/blue.scss
index a6d2e196b6d..a62149b8548 100644
--- a/client/galaxy/style/scss/theme/blue.scss
+++ b/client/galaxy/style/scss/theme/blue.scss
@@ -7,22 +7,27 @@ $brand-warning: #fe7f02;
 $brand-danger: #e31a1e;
 $brand-light: #f8f9fa;
 $brand-dark: #2c3143;
-$brand-white: #fff;
 $brand-toggle: gold;
 
-// Grays from Bootstrap 4 _variables.scss
-$white: $brand-white;
+// Light grays for backgrounds
+$white: lighten($brand-light, 5%); // body background
 $gray-100: $brand-light;
-$gray-200: darken($gray-100, 5%); // welcome background
-$gray-300: darken($gray-100, 10%);
-$gray-400: darken($gray-100, 20%); // input borders
-$gray-500: darken($gray-100, 40%);
-$gray-600: darken($gray-100, 60%); // text-muted
-$gray-700: darken($gray-100, 70%);
-$gray-800: darken($gray-100, 80%);
-$gray-900: darken($gray-100, 90%); // text-regular
+$gray-200: darken($brand-light, 5%); // welcome background
+$gray-300: darken($brand-light, 10%);
+
+// Dark grays for text colors
+$gray-900: $brand-dark; // text-regular
+$gray-800: lighten($gray-900, 10%);
+$gray-700: lighten($gray-900, 10%);
+$gray-600: lighten($gray-900, 10%); // text-muted
+$gray-500: lighten($gray-900, 10%);
+$gray-400: lighten($gray-900, 60%); // default borders
 $black: $brand-dark;
 
+// Text colors
+$text-color: $gray-900;
+$text-muted: $gray-600;
+
 // These variables don't actually determine the colors in Bootstrap 4, instead
 // they use a map called $theme-colors, so here we override that
 $theme-colors: ();
@@ -84,19 +89,22 @@ $h6-font-size: $font-size-base * 0.85; // default 1
 // Increase contrast of dropdown items
 $dropdown-link-hover-color: $brand-light;
 $dropdown-link-hover-bg: $brand-primary;
-$dropdown-link-active-color: $brand-toggle;
+
+// Color of input elements
+$input-color: $text-color;
+$input-color-placeholder: $text-muted;
 
 // Galaxy Variables (not used by bootstrap)
 $body-bg: $white;
-$text-color: $gray-900;
 
 // Masthead
 $masthead-height: 3rem;
 
 // Side panels
-$panel-bg-color: $gray-100;
+$panel-bg-color: $brand-light;
 $panel-text-color: $text-color;
 $panel-header-text-color: $text-color;
+$panel-bg-header-color: $panel-bg-color;
 $panel-footer-bg-color: $panel-bg-color;
 $panel-message-height: 2.5rem;
 $panel-width: 18rem;
@@ -115,13 +123,13 @@ $layout-border: none;
 $border-radius-base: 0.1875rem;
 $border-radius-large: 0.3125rem;
 $border-radius-extralarge: 1rem;
-$border-default-color: $gray-400;
-$border-default: 1px solid $border-default-color;
+$border-color: $gray-400;
+$border-default: 1px solid $border-color;
 
 // Buttons
 $btn-default-color: $text-color;
 $btn-default-bg: $gray-200;
-$btn-default-border: $border-default-color;
+$btn-default-border: $border-color;
 
 // Forms
 $form-heading-bg: $panel-bg-color;
@@ -130,17 +138,17 @@ $form-border: darken($form-heading-bg, 20%);
 // Table
 $table-heading-bg: $panel-bg-color;
 $table-bg-accent: darken($panel-bg-color, 5%);
-$table-border-color: darken($table-heading-bg, 20%);
+$table-border-color: $gray-400;
 
 // Additional state colors
 $state-default-bg: $gray-200;
-$state-default-border: $border-default-color;
+$state-default-border: $border-color;
 $state-paused-bg: lighten($brand-info, 50%);
 $state-running-bg: lighten($brand-warning, 40%);
-$state-running-border: $border-default-color;
+$state-running-border: $border-color;
 
 // Workflow editor
-$workflow-editor-bg: $brand-white;
+$workflow-editor-bg: $white;
 $workflow-overview-bg: $gray-200;
 
 // Margins
diff --git a/client/galaxy/style/scss/ui.scss b/client/galaxy/style/scss/ui.scss
index 8688b25bd28..0ab97646b40 100644
--- a/client/galaxy/style/scss/ui.scss
+++ b/client/galaxy/style/scss/ui.scss
@@ -84,13 +84,6 @@ $ui-margin-horizontal-large: $margin-v * 2;
     cursor: pointer;
 }
 
-// tabs
-.tabbable {
-    .nav-item {
-        cursor: pointer;
-    }
-}
-
 // thumbnails
 .ui-thumbnails {
     .ui-thumbnails-item {
@@ -105,7 +98,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
             height: 86px;
             font-size: 4em;
             padding: 20px 26px;
-            color: lighten($brand-primary, 10%);
+            color: $text-color;
         }
         .ui-thumbnails-text {
             word-wrap: break-word;
@@ -253,9 +246,9 @@ $ui-margin-horizontal-large: $margin-v * 2;
 
 // popovers
 .popover {
-    max-width: 700px;
+    max-width: 70%;
     .popover-header {
-        color: $brand-white;
+        color: $brand-light;
         background-color: $brand-primary;
         i {
             @extend .float-right;
@@ -477,12 +470,3 @@ $ui-margin-horizontal-large: $margin-v * 2;
     border: 2px solid $state-success-bg;
     background: lighten($state-success-bg, 10%) !important;
 }
-
-// select2 adjustments
-.select2-drop-active,
-.select2-drop-above.select2-drop-active {
-    border: 1px solid $border-default-color;
-    .select2-search {
-        @extend .pt-1;
-    }
-}
diff --git a/client/galaxy/style/scss/ui/icon-btn.scss b/client/galaxy/style/scss/ui/icon-btn.scss
index 106f681df42..0bafffa2bd0 100644
--- a/client/galaxy/style/scss/ui/icon-btn.scss
+++ b/client/galaxy/style/scss/ui/icon-btn.scss
@@ -1,7 +1,6 @@
 $icon-btn-size: 22px;
 $icon-btn-margin: 2px;
 $icon-btn-color: $btn-default-color;
-
 $icon-btn-bg: $btn-default-bg;
 $icon-btn-border: $btn-default-border;
 
diff --git a/client/galaxy/style/scss/ui/search-input.scss b/client/galaxy/style/scss/ui/search-input.scss
index 1b35779a931..38fdfc97130 100644
--- a/client/galaxy/style/scss/ui/search-input.scss
+++ b/client/galaxy/style/scss/ui/search-input.scss
@@ -1,5 +1,8 @@
 .search-input {
     @extend .mb-2;
+    ::placeholder {
+        color: $gray-500;
+    }
     .search-clear,
     .search-loading {
         @extend .mr-2;
@@ -28,7 +31,7 @@
         border: $border-default;
         @include border-radius($border-radius-extralarge);
         max-width: auto;
-        background: $brand-white;
+        background: $white;
     }
     .search-query:focus {
         border-color: $brand-info;
diff --git a/client/galaxy/style/scss/upload.scss b/client/galaxy/style/scss/upload.scss
index 01712bbcf37..79ffeb983ca 100644
--- a/client/galaxy/style/scss/upload.scss
+++ b/client/galaxy/style/scss/upload.scss
@@ -39,6 +39,7 @@
 
 .upload-input {
     font-size: $font-size-base;
+    color: $text-color;
     height: 20px;
     line-height: 18px;
 }