From b3fe8c9531fd0f46ef831b75e955ce0f32e74c5e Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Wed, 6 Jan 2016 22:56:16 -0500
Subject: [PATCH] rebrand dashboard

---
 .../src/bread-crumb/bread-crumb.block.less    |  18 +--
 .../counts/dashboard-counts.block.less        |  22 +--
 .../graphs/dashboard-graphs.block.less        |  65 +++++----
 .../graphs/dashboard-graphs.partial.html      |   1 -
 .../dashboard/lists/dashboard-list.block.less |  87 +++++++-----
 .../job-templates-list.partial.html           |   2 +-
 .../lists/jobs/jobs-list.partial.html         |   2 +-
 .../login/loginModal/loginModal.block.less    |  28 ++--
 .../login/loginModal/loginModal.partial.html  |   4 +-
 .../loginModal/loginMotalNotice.block.less    |  10 +-
 .../thirdPartySignOn.block.less               |  14 +-
 .../client/src/main-menu/main-menu.block.less |  91 ++++++++-----
 .../src/main-menu/main-menu.partial.html      |   2 +-
 .../src/shared/branding/colors.default.less   | 126 ++++++++++++++++++
 14 files changed, 328 insertions(+), 144 deletions(-)
 create mode 100644 awx/ui/client/src/shared/branding/colors.default.less

diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.block.less b/awx/ui/client/src/bread-crumb/bread-crumb.block.less
index 99edea97d5..77e4c3c2ef 100644
--- a/awx/ui/client/src/bread-crumb/bread-crumb.block.less
+++ b/awx/ui/client/src/bread-crumb/bread-crumb.block.less
@@ -1,26 +1,28 @@
+@import "../shared/branding/colors.default.less";
+
 /** @define BreadCrumb */
 
 .BreadCrumb {
     padding: 0;
     display: flex;
-    background-color: #FFFFFF;
+    background-color: @bc-bg;
     width: 100%;
     z-index: 1039;
     position: fixed;
     right: 0;
     left: 0;
-    top: 50px;
+    top: 60px;
     height: 40px;
-    border-bottom: 1px solid #e1e1e1;
+    border-bottom: 1px solid @bc-border;
 }
 .BreadCrumb.is-loggedOut {
     opacity: 0;
 }
 .BreadCrumb-menuLink {
     width: 58px;
-    border-left: 1px solid #e1e1e1;
+    border-left: 1px solid @bc-link-side;
     margin-left: auto;
-    color: #d7d7d7;
+    color: @bc-link-icon;
     flex: initial;
     display: flex;
     align-items: center;
@@ -28,11 +30,11 @@
     cursor: pointer;
 }
 .BreadCrumb-menuLink:hover {
-    background-color: #f6f6f6;
-    color: #d7d7d7;
+    background-color: @bc-link-bg-hov;
+    color: @bc-link-icon;
 }
 .BreadCrumb-menuLink.BreadCrumb-menuLinkActive {
-    color: #1678c4;
+    color: @bc-link-icon-focus;
 }
 .BreadCrumb-menuLinkImage {
     font-size: 18px;
diff --git a/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less b/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less
index 1c854a30dc..a29476fd90 100644
--- a/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less
+++ b/awx/ui/client/src/dashboard/counts/dashboard-counts.block.less
@@ -1,3 +1,5 @@
+@import "../../shared/branding/colors.default.less";
+
 /** @define DashboardCounts */
 
 .DashboardCounts {
@@ -18,8 +20,8 @@
     padding-left: 15px;
     padding-right: 15px;
     border-radius: 5px;
-    background-color: #fff;
-    border: 1px solid #e1e1e1;
+    background-color: @db-panel-bg;
+    border: 1px solid @db-panel-border;
     flex: 1 0 auto;
     max-width: ~"calc(16.6% - 15px)";
     flex-basis: ~"calc(16.6% - 15px)";
@@ -41,22 +43,22 @@
 }
 
 .DashboardCounts-buttonStyle:hover {
-    background-color: #1778c3;
-    border-color: #1778c3;
+    background-color: @db-count-succ;
+    border-color: @db-count-succ;
 
     .DashboardCounts-number,
     .DashboardCounts-label {
-        color: #fff;
+        color: @db-count-label-hov;
     }
 }
 
 .DashboardCounts-buttonStyle.is-failure:hover {
-    background-color: #ff5850;
-    border-color: #ff5850;
+    background-color: @db-count-fail;
+    border-color: @db-count-fail;
 
     .DashboardCounts-number,
     .DashboardCounts-label {
-        color: #fff;
+        color: @db-count-label-hov;
     }
 }
 
@@ -68,13 +70,13 @@
 }
 
 .DashboardCounts-number.is-failure {
-    color: #ff5850;
+    color: @db-count-fail;
 }
 
 .DashboardCounts-label {
     flex: 1;
     margin-bottom: 0px;
-    color: #848992;
+    color: @db-count-label;
     text-transform: uppercase;
     transition: color 0.2s;
 }
diff --git a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less
index 8a5e49ab1a..12d6b1f39a 100644
--- a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less
+++ b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less
@@ -1,12 +1,13 @@
 /** @define DashboardGraphs */
 
 @import "../../shared/branding/colors.less";
+@import "../../shared/branding/colors.default.less";
 
 .DashboardGraphs {
     margin-top: 20px;
-    border: solid 1px #e1e1e1;
+    border: solid 1px @db-panel-border;
     border-radius: 5px;
-    background-color: #ffffff;
+    background-color: @db-panel-bg;
     padding-top:20px;
     padding-left: 20px;
     padding-right: 20px;
@@ -22,10 +23,10 @@
 }
 
 .DashboardGraphs-tab {
-    color: #b7b7b7;
-    background-color: #ffffff;
+    color: @btn-txt;
+    background-color: @btn-bg;
     font-size: 12px;
-    border: 1px solid #e1e1e1;
+    border: 1px solid @btn-bord;
     height: 30px;
     border-radius: 5px;
     margin-right: 20px;
@@ -49,30 +50,32 @@
 }
 
 .DashboardGraphs-tab:hover {
-    color: #b7b7b7;
-    background-color: #f6f6f6;
+    color: @btn-txt;
+    background-color: @btn-bg-hov;
     cursor: pointer;
 }
 
 .DashboardGraphs-tab:active {
-    color: #b7b7b7;
-    background-color: #d7d7d7;
+    color: @btn-txt-sel;
+    background-color: @btn-bg-sel;
     cursor: pointer;
 }
 
 .DashboardGraphs-tab:focus {
-    color: #b7b7b7;
+    color: @btn-txt-sel;
 }
 
 .DashboardGraphs-tab.is-selected {
-    color: #ffffff;
-    background-color: #d7d7d7;
+    color: @btn-txt-sel;
+    background-color: @btn-bg-sel;
+    border-color: @btn-bord-sel;
 }
 
 .DashboardGraphs-graphSection {
     display: block;
     flex: 1;
     padding-top:20px;
+    margin-bottom: -20px;
 }
 
 .DashboardGraphs-graphContainer {
@@ -86,13 +89,13 @@
 }
 
 .DashboardGraphs-filterLabelIcon{
-    color: #d7d7d7;
+    color: @db-graph-per-dd-icon;
     font-size: 14px;
     padding-top: 5px;
 }
 
 .DashboardGraphs-filterLabel{
-    color: #d7d7d7;
+    color: @db-graph-per-dd-txt;
     font-size: 12px;
     padding-right: 10px;
     padding-left: 10px;
@@ -110,12 +113,12 @@
 
 .nv-axislabel {
   font-weight: bold !important;
-  fill: #b7b7b7 !important;
+  fill: @db-graph-axis-label !important;
   font-family: 'Open Sans' !important;
 }
 
 .nv-axis text {
-   fill: #b7b7b7 !important; //rgb(169, 178, 189);
+   fill: @db-graph-axis-label !important; //rgb(169, 178, 189);
    font-family: 'Open Sans' !important;
 }
 
@@ -125,28 +128,33 @@
     flex-wrap: wrap;
 }
 
+.DashboardGraphs-filterDropdownText,
+.DashboardGraphs-filterDropdownText:hover,
+.DashboardGraphs-filterDropdownText:focus,
+.DashboardGraphs-filterDropdownText:active {
+    color: @db-graph-per-dd-txt;
+}
+
 .DashboardGraphs-filterDropdownText {
     flex: initial;
-    color: #b7b7b7;
-    background-color: #ffffff;
+    background-color: @db-graph-per-dd-bg;
     font-size: 12px;
     text-transform: uppercase;
     white-space: nowrap;
     padding-right: 10px;
     padding-left: 10px;
     height: 20px;
-    border: 1px solid #e1e1e1;
+    border: 1px solid @db-graph-per-dd-bord;
     border-radius: 5px;
     transition: background-color 0.2s;
 }
 
 .DashboardGraphs-filterDropdownText:hover {
-    color: #b7b7b7;
-    background-color: #f6f6f6;
+    background-color: @db-graph-per-dd-bg-hov;
 }
 
 .DashboardGraphs-filterIcon{
-    color: #d7d7d7;
+    color: @db-graph-per-dd-icon;
     font-size: 14px;
     width: 20px;
     padding-left:10px;
@@ -183,14 +191,14 @@
 }
 
 .DashboardGraphs-statusFilter{
-    color: #b7b7b7;
-    background-color: #ffffff;
+    color: @btn-txt;
+    background-color: @btn-bg;
     font-size: 12px;
     text-transform: uppercase;
     padding-right: 10px;
     padding-left: 10px;
     height: 20px;
-    border: 1px solid #e1e1e1;
+    border: 1px solid @btn-bord;
     border-radius: 5px;
     transition: background-color 0.2s;
     margin-left: 10px;
@@ -199,12 +207,13 @@
 
 .DashboardGraphs-statusFilter:hover{
     cursor: pointer;
-    background-color: #f6f6f6;
+    background-color: @btn-bg-hov;
 }
 
 .DashboardGraphs-statusFilter.is-selected {
-    color: #ffffff;
-    background-color: #d7d7d7;
+    color: @btn-txt-sel;
+    background-color: @btn-bg-sel;
+    border-color: @btn-bord-sel;
 }
 
 .DashboardGraphs-hostStatusLabel--successful{
diff --git a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html
index d8b7f49206..f7bb5bd7b7 100644
--- a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html
+++ b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html
@@ -11,7 +11,6 @@
             Host Status
         </div>
         <div class="DashboardGraphs-graphToolbar" ng-show="!hostStatusSelected">
-            <i class="fa fa-filter DashboardGraphs-filterLabelIcon"></i>
             <div class="DashboardGraphs-filterLabel">Period</div>
             <div class="DashboardGraphs-periodDropdown">
                 <a id="period-dropdown" role="button"
diff --git a/awx/ui/client/src/dashboard/lists/dashboard-list.block.less b/awx/ui/client/src/dashboard/lists/dashboard-list.block.less
index 9ae23d1c0b..aa02e5fb1c 100644
--- a/awx/ui/client/src/dashboard/lists/dashboard-list.block.less
+++ b/awx/ui/client/src/dashboard/lists/dashboard-list.block.less
@@ -1,15 +1,17 @@
 /** @define DashboardList */
 
+@import "../../shared/branding/colors.default.less";
+
 .DashboardList {
     flex: 1;
 }
 .DashboardList--noJobTemplates {
-    color: #8d8d8d;
+    color: @db-list-empty-txt;
 }
 
 .DashboardList-header {
     display: flex;
-    border-bottom: 1px solid #e1e1e1;
+    border-bottom: 1px solid @db-list-header-bord;
     height: 50px;
 }
 
@@ -18,17 +20,22 @@
     margin: 0px;
     font-size: 14px;
     font-weight: bold;
-    color: #b7b7b7;
+    color: @db-list-header-txt;
     height: 50px;
     line-height: 50px;
     white-space: nowrap;
     padding-left: 20px;
 }
+
+.DashboardList-tableHeaderIcon {
+    color: @db-list-header-icon;
+}
+
 .DashboardList-viewAll {
-    color: #b7b7b7;
-    background-color: #ffffff;
+    color: @btn-txt;
+    background-color: @btn-bg;
     font-size: 12px;
-    border: 1px solid #e1e1e1;
+    border: 1px solid @btn-bord;
     border-radius: 5px;
     margin-right: 15px;
     margin-top: 10px;
@@ -41,12 +48,12 @@
 }
 
 .DashboardList-viewAll:hover {
-    color: #b7b7b7;
-    background-color: #f6f6f6;
+    color: @btn-txt;
+    background-color: @btn-bg-hov;
 }
 
 .DashboardList-viewAll:focus {
-    color: #b7b7b7;
+    color: @btn-txt;
 }
 
 .DashboardList-container {
@@ -55,31 +62,31 @@
     padding: 20px;
 }
 
-.DashboardList-table{
+.DashboardList-table {
     width: 100%;
     table-layout: fixed;
 }
 
-.DashboardList-tableHeader{
+.DashboardList-tableHeader {
     height: 30px;
     font-size: 14px;
     font-weight: normal;
     text-transform: uppercase;
-    color: #ffffff;
-    background-color: #d7d7d7;
+    color: @db-list-header-txt;
+    background-color: @db-list-header-bg;
 }
 
-.DashboardList-tableHeader--name{
+.DashboardList-tableHeader--name {
     border-top-left-radius: 5px;
     padding-left: 15px;
 }
 
-.DashboardList-tableHeader--activity{
+.DashboardList-tableHeader--activity {
     width: 205px;
     padding-left:20px
 }
 
-.DashboardList-tableHeader--time{
+.DashboardList-tableHeader--time {
     width: 190px;
     padding-left:20px;
     padding-right: 15px;
@@ -87,21 +94,21 @@
     text-align: right;
 }
 
-.DashboardList-tableHeader--actions{
+.DashboardList-tableHeader--actions {
     border-top-right-radius: 5px;
     width: 90px;
     padding-right: 15px;
     text-align: right;
 }
 
-.DashboardList-tableRow{
+.DashboardList-tableRow {
     height: 50px;
     font-size: 14px;
-    color: #161b1f;
+    color: @db-list-item;
 }
 
-.DashboardList-tableRow--evenRow{
-    background-color: #f6f6f6;
+.DashboardList-tableRow--evenRow {
+    background-color: @db-list-alt-item-bg;
 }
 
 .DashboardList-status{
@@ -109,11 +116,11 @@
 }
 
 .DashboardList-status--success{
-    color: #5bbdbf;
+    color: @default-succ;
 }
 
 .DashboardList-status--failed{
-    color: #ff5850;
+    color: @default-err;
 }
 
 .DashboardList-nameCell {
@@ -125,10 +132,10 @@
 }
 
 .DashboardList-nameContainer {
-    color: #1678c4;
+    color: @default-link;
 }
 
-.DashboardList-activityCell{
+.DashboardList-activityCell {
     padding-right: 20px;
     padding-left: 20px;
 }
@@ -141,31 +148,37 @@
 }
 
 .DashboardList-nameContainer:hover {
-    color: #5ca6db;
+    color: @default-link-hov;
     cursor: pointer;
 }
 
-.DashboardList-actionButtonCell{
+.DashboardList-actionButtonCell {
     padding-top:10px;
     padding-right: 15px;
     display:flex;
     justify-content: flex-end;
 }
 
-.DashboardList-actionButton{
+.DashboardList-actionButton {
     font-size: 16px;
     height: 30px;
     width: 30px;
-    color: #b7b7b7;
-    background-color: #ffffff;
-    border: 1px solid #e1e1e1;
+    color: @db-list-action-icon;
+    background-color: @db-list-actn-bg;
+    border: 1px solid @db-list-actn-bord;
     border-radius: 50%;
-    transition: background-color 0.2s, border-color 0.2s;;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
 }
 
-.DashboardList-actionButton:hover{
-    background-color: #1678c4;
-    color: #ffffff;
+.DashboardList-tableRow--evenRow > .DashboardList-actionButtonCell > .DashboardList-actionButton {
+    background-color: @db-list-actn-alt-bg;
+    border: 1px solid @db-list-actn-alt-bord;
+}
+
+.DashboardList-actionButton:hover {
+    background-color: @db-list-actn-bg-hov !important;
+    border: 1px solid @db-list-actn-bord-hov !important;
+    color: @db-list-actn-icn-hov;
     border: none;
 }
 
@@ -179,6 +192,6 @@
     border: 1px solid #1678c4;
 }
 
-.DashboardList-noJobs{
-    color: #b7b7b7;
+.DashboardList-noJobs {
+    color: @db-list-empty-txt;
 }
diff --git a/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html b/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html
index e445d43673..4c57f4b60c 100644
--- a/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html
+++ b/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html
@@ -13,7 +13,7 @@
                 <th class="DashboardList-tableHeader DashboardList-tableHeader--name"
                     ng-click="sort('job_templates','name')">
                         Title
-                    <i class="fa fa-sort-up"></i>
+                    <i class="DashboardList-tableHeaderIcon fa fa-sort-up"></i>
                 </th>
                 <th class="DashboardList-tableHeader DashboardList-tableHeader--activity">
                   Activity
diff --git a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html
index 9f39c9ca2e..4c4c770387 100644
--- a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html
+++ b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html
@@ -10,7 +10,7 @@
     <div class="DashboardList-container">
         <table class="DashboardList-table">
            <tr>
-              <th class="DashboardList-tableHeader DashboardList-tableHeader--name" ng-click="sort('job_templates','name')">Title <i class="fa fa-sort-up"></i></th>
+              <th class="DashboardList-tableHeader DashboardList-tableHeader--name" ng-click="sort('job_templates','name')">Title <i class="DashboardList-tableHeaderIcon fa fa-sort-up"></i></th>
               <th class="DashboardList-tableHeader DashboardList-tableHeader--time">Time</th>
            </tr>
            <tr class="DashboardList-tableRow"
diff --git a/awx/ui/client/src/login/loginModal/loginModal.block.less b/awx/ui/client/src/login/loginModal/loginModal.block.less
index aad5f43633..e0a1ce11f6 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.block.less
+++ b/awx/ui/client/src/login/loginModal/loginModal.block.less
@@ -1,3 +1,5 @@
+@import "../../shared/branding/colors.default.less";
+
 /** @define LoginModal */
 .LoginModal-backDrop {
     width: 100vw;
@@ -8,7 +10,7 @@
     z-index: 1041;
     opacity: 0;
     transition: 0.5s opacity;
-    background: #000;
+    background: @login-backdrop;
 }
 
 .LoginModal-backDrop.is-loggedOut {
@@ -26,7 +28,7 @@
     margin-right: auto;
     border: 0;
     box-shadow: none;
-    background-color: #fff;
+    background-color: @login-bg;
     border-radius: 4px;
     opacity: 0;
     transition: opacity 0.5s;
@@ -41,7 +43,7 @@
 
 .LoginModal-header {
     text-align: center;
-    background-color: #167ec4;
+    background-color: @login-header-bg;
     border-bottom: 0;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
@@ -68,12 +70,12 @@
     margin-bottom: 15px;
     font-size: 16px;
     font-weight: normal;
-    color: #161b1f;
+    color: @login-alert;
     transition: opacity 0.2s;
 }
 
 .LoginModal-alert--error {
-    color: #ff5850;
+    color: @login-alert-error;
     padding-bottom: 4px;
 }
 
@@ -110,10 +112,16 @@
 }
 
 .LoginModal-label {
-    color: #b7b7b7;
+    color: @field-label;
     font-weight: 400;
 }
 
+.LoginModal-field {
+    color: @field-input-text;
+    background-color: @field-bg;
+    border: 1px solid @field-border;
+}
+
 .LoginModal-footer {
     display: flex;
     flex-wrap: wrap-reverse;
@@ -138,12 +146,12 @@
 
 .LoginModal-signInButton {
     transition: background-color 0.2s;
-    background-color: #5bbdbf;
-    color: #fff;
+    background-color: @submit-button-bg;
+    color: @submit-button-text;
 }
 
 .LoginModal-signInButton:hover,
 .LoginModal-signInButton:focus {
-    color: #fff;
-    background-color: #7bced0;
+    color: @submit-button-text;
+    background-color: @submit-button-bg-hov;
 }
diff --git a/awx/ui/client/src/login/loginModal/loginModal.partial.html b/awx/ui/client/src/login/loginModal/loginModal.partial.html
index 67a976f800..3b0b1f0f21 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.partial.html
+++ b/awx/ui/client/src/login/loginModal/loginModal.partial.html
@@ -35,7 +35,7 @@
                         </label>
                         <div class="col-md-12">
                             <input type="text" name="login_username"
-                                class="form-control"
+                                class="form-control LoginModal-field"
                                 ng-model="login_username"
                                 id="login-username"
                                 autocomplete="off" required>
@@ -56,7 +56,7 @@
                             <input type="password"
                                 name="login_password"
                                 id="login-password"
-                                class="form-control"
+                                class="form-control LoginModal-field"
                                 ng-model="login_password" required
                                 autocomplete="off">
                             <div class="error"
diff --git a/awx/ui/client/src/login/loginModal/loginMotalNotice.block.less b/awx/ui/client/src/login/loginModal/loginMotalNotice.block.less
index 66c3d76361..e1aa42d397 100644
--- a/awx/ui/client/src/login/loginModal/loginMotalNotice.block.less
+++ b/awx/ui/client/src/login/loginModal/loginMotalNotice.block.less
@@ -1,3 +1,5 @@
+@import "../../shared/branding/colors.default.less";
+
 /** @define LoginModalNotice */
 .LoginModalNotice {
     font-size: 12px;
@@ -7,15 +9,15 @@
     padding-top: 10px;
     margin-bottom: 15px;
     border-radius: 4px;
-    border: 1px solid #e1e1e1;
-    background-color: #fff;
-    color: #848992;
+    border: 1px solid @login-notice-border;
+    background-color: @login-notice-bg;
+    color: @login-notice-text;
     overflow-y: scroll;
     overflow-x: visible;
 }
 
 .LoginModalNotice-title {
-    color: #b7b7b7;
+    color: @login-notice-title;
     font-weight: bold;
     padding-bottom: 4px;
     font-size: 14px;
diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less
index be6591b3fd..f3f50157c0 100644
--- a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less
+++ b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less
@@ -1,3 +1,5 @@
+@import "../../../shared/branding/colors.default.less";
+
 /** @define ThirdPartySignOn */
 
 .ThirdPartySignOn {
@@ -7,7 +9,7 @@
 
 .ThirdPartySignOn-label {
     flex: initial;
-    color: #b7b7b7;
+    color: @third-party-label;
 }
 
 .ThirdPartySignOn-item {
@@ -20,22 +22,22 @@
     height: 30px;
     width: 30px;
     border-radius: 50%;
-    color: #ccc;
-    background-color: #fff;
+    color: @third-party-btn-text;
+    background-color: @third-party-btn-bg;
     border: 0;
     padding: 0;
 }
 
 .ThirdPartySignOn-button--error {
-    color: #ff5850;
+    color: @third-party-error;
 }
 
 .ThirdPartySignOn-button:hover {
-    color: #e1e1e1;
+    color: @third-party-btn-hov;
 }
 
 .ThirdPartySignOn-button--error:hover {
-    color: #FF1105;
+    color: @third-party-error-hov;
 }
 
 .ThirdPartySignOn-icon {
diff --git a/awx/ui/client/src/main-menu/main-menu.block.less b/awx/ui/client/src/main-menu/main-menu.block.less
index 423622a1a2..5e9b342c2c 100644
--- a/awx/ui/client/src/main-menu/main-menu.block.less
+++ b/awx/ui/client/src/main-menu/main-menu.block.less
@@ -1,21 +1,26 @@
+@import "../shared/branding/colors.default.less";
+
 /** @define MainMenu */
 
 .MainMenu {
     padding: 0;
     display: flex;
-    background-color: #167ec4;
+    background-color: @menu-bg;
+    border-bottom: 1px solid @menu-btm;
     width: 100%;
     z-index: 1040;
     position: fixed;
     right: 0;
     left: 0;
     top: 0;
+    height: 60px;
+    align-items: stretch;
 }
 
 .MainMenu-logo,
 .MainMenu-item {
-    color: #fff;
-    background-color: #167ec4;
+    color: @menu-link;
+    background-color: @menu-link-bg;
 }
 
 .MainMenu-logoImage {
@@ -32,10 +37,14 @@
     flex: initial;
 }
 
+.MainMenu-itemImage {
+    color: @menu-link-icon;
+}
+
 .MainMenu-socket {
     transition: background-color 0.2s, color 0.2s, border-bottom 0.1s, padding-top 0.1s;
-    color: #fff;
-    background: url(assets/socket_background.png) #167ec4;
+    color: @menu-link-icon;
+    background: url(assets/socket_background.png) @menu-bg;
     background-size: 55px 52px;
     background-repeat: no-repeat;
     order: 0;
@@ -46,7 +55,7 @@
     display: flex;
     align-items: center;
     border: 0;
-    border-left: 1px solid #509ad3;
+    border-left: 1px solid @menu-link-sides;
     cursor: default;
 }
 
@@ -68,19 +77,14 @@
         display: none;
     }
 
-    .MainMenu {
-        height: 50px;
-        align-items: stretch;
-    }
-
     .MainMenu-logo {
         flex: initial;
         padding: 0;
         display: flex;
         align-items: center;
         border: 0;
-        border-bottom: 0px solid #fff;
-        border-right: 1px solid #509ad3;
+        border-bottom: 0;
+        border-right: 1px solid @menu-link-sides;
     }
 
     .MainMenu-item {
@@ -88,14 +92,14 @@
         flex: initial;
         padding-top: 0px;
         border: 0;
-        border-bottom: 0px solid #fff;
+        border-bottom: 0px solid @menu-link-btm-hov;
         display: flex;
         align-items: center;
     }
 
     // Set up elements based on if their layout in the menu bar
     .MainMenu-item--left {
-        border-right: 1px solid #509ad3;
+        border-right: 1px solid @menu-link-sides;
     }
 
     .MainMenu-item--left:hover,
@@ -111,7 +115,7 @@
     }
 
     .MainMenu-item--right {
-        border-left: 1px solid #509ad3;
+        border-left: 1px solid @menu-link-sides;
         order: 1;
     }
 
@@ -126,29 +130,47 @@
     .MainMenu-item:hover,
     .MainMenu-item.is-currentRoute {
         padding-top: 5px;
-        border-bottom: 5px solid #fff;
+        border-bottom: 5px solid @menu-link-btm-hov;
     }
 
     .MainMenu-itemText--username {
         padding-left: 13px;
+        margin-top: -4px;
     }
 
     .MainMenu-itemImage {
         font-size: 20px;
     }
 
+    .MainMenu-itemImage--settings {
+        margin-top: -1px;
+    }
+
     .MainMenu-itemImage--user {
         font-size: 21px;
         margin-right: -5px;
+        margin-top: -1px;
     }
 
     .MainMenu-itemImage--docs {
         font-size: 21px;
         margin-top: -2px;
     }
+
+    .MainMenu-item.is-currentRoute {
+        background-color: @menu-link-bg-hov;
+    }
 }
 
 @media screen and (max-width: @menu-breakpoint) {
+    .MainMenu-logo {
+        height: 60px;
+    }
+
+    .MainMenu-logoImage {
+        margin-top: 5px;
+    }
+
     .MainMenu-item--notMobile {
         display: none;
     }
@@ -160,7 +182,7 @@
 
     .MainMenu-logo {
         flex: 1;
-        border-bottom: 1px solid #509ad3;
+        border-bottom: 1px solid @menu-link-btm;
         order: 0;
     }
 
@@ -189,13 +211,22 @@
         padding-top: 15px;
         padding-bottom: 15px;
         order: 1;
-        border-bottom: 1px solid #509ad3;
+        border-bottom: 1px solid @menu-link-btm;
+    }
+
+    .MainMenu-item.is-currentRoute {
+        font-weight: bold;
+        background-color: @menu-link-bg;
+    }
+
+    .MainMenu-item:hover {
+        background-color: @menu-link-bg-hov;
     }
 
     .MainMenu-toggle {
         transition: background-color 0.2s;
-        color: #fff;
-        background-color: #167ec4;
+        color: @menu-link-icon;
+        background-color: @menu-link-bg;
         order: 0;
         flex: initial;
         padding-top: 3px;
@@ -205,12 +236,12 @@
         display: flex;
         align-items: center;
         border: 0;
-        border-left: 1px solid #509ad3;
-        border-bottom: 1px solid #509ad3;
+        border-left: 1px solid @menu-link-btm;
+        border-bottom: 1px solid @menu-link-btm;
     }
 
     .MainMenu-socket {
-        border-bottom: 1px solid #509ad3;
+        border-bottom: 1px solid @menu-link-btm;
     }
 
     .MainMenu-toggleImage {
@@ -225,17 +256,7 @@
 .MainMenu-item:hover,
 .MainMenu-logo:hover,
 .MainMenu-item.is-currentRoute {
-    color: #fff;
-}
-
-.MainMenu-item.is-currentRoute {
-    background-color: #509ad3;
-}
-
-.MainMenu-toggle:hover,
-.MainMenu-item:hover,
-.MainMenu-logo:hover {
-    background-color: #5bbdbf;
+    color: @menu-link;
 }
 
 // item on
diff --git a/awx/ui/client/src/main-menu/main-menu.partial.html b/awx/ui/client/src/main-menu/main-menu.partial.html
index 6969e8951d..44f9600cb3 100644
--- a/awx/ui/client/src/main-menu/main-menu.partial.html
+++ b/awx/ui/client/src/main-menu/main-menu.partial.html
@@ -133,7 +133,7 @@
         data-placement="bottom"
         data-trigger="hover"
         data-container="body">
-        <i class="MainMenu-itemImage fa fa-cog"
+        <i class="MainMenu-itemImage MainMenu-itemImage--settings fa fa-cog"
             alt="Settings">
         </i>
     </a>
diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less
new file mode 100644
index 0000000000..a006a2f021
--- /dev/null
+++ b/awx/ui/client/src/shared/branding/colors.default.less
@@ -0,0 +1,126 @@
+// default base colors
+@default-interface-txt: #848992;
+@default-data-txt:      #161B1F;
+@default-icon:          #B7B7B7;
+@default-icon-hov:      #D7D7D7; // also selected button
+@default-border:        #E8E8E8;
+@default-second-border: #E1E1E1;
+@default-bg:            #FFFFFF; // also slected btn txt
+@default-secondary-bg:  #FCFCFC; // page/input field bg, just adds depth
+@default-tertiary-bg:   #FAFAFA; // hover bg, alt-list
+@default-err:           #FF5850;
+@default-err-hov:       #FF1105;
+@default-succ:          #3CB878;
+@default-succ-hov:      #60D66F;
+@default-link:          #1678C4;
+@default-link-hov:      #4498DA;
+
+// layout
+@page-bg:               @default-secondary-bg;
+
+// buttons
+@btn-bg:                @default-bg;
+@btn-bord:              @default-border;
+@btn-txt:               @default-interface-txt;
+@btn-bg-hov:            @default-tertiary-bg;
+@btn-bg-sel:            @default-icon-hov;
+@btn-bord-sel:          @default-icon-hov;
+@btn-txt-sel:           @default-bg;
+
+// tooltups
+@tooltip-bg:            @default-interface-txt;
+@tooltip-txt:           @default-bg;
+
+// login modal
+@login-alert:           @default-interface-txt;
+@login-backdrop:        #000000;
+@login-bg:              @default-bg;
+@login-header-bg:       @default-bg;
+@login-alert-error:     @default-err;
+
+// login modal notice
+@login-notice-title:    @default-interface-txt;
+@login-notice-bg:       @default-secondary-bg;
+@login-notice-border:   @default-secondary-bg;
+@login-notice-text:     #707070;
+
+// login modal third party auth
+@third-party-label:     @default-interface-txt;
+@third-party-btn-bg:    @default-bg;
+@third-party-btn-hov:   @default-icon-hov;
+@third-party-btn-text:  @default-icon;
+@third-party-error:     @default-err;
+@third-party-error-hov: @default-err-hov;
+
+// forms
+@field-label:           @default-interface-txt;
+@field-input-text:      @default-data-txt;
+@field-bg:              @default-tertiary-bg;
+@field-border:          @default-second-border;
+@submit-button-text:    @default-bg;
+@submit-button-bg:      @default-succ;
+@submit-button-bg-hov:  @default-succ-hov;
+
+// footer
+@copyright-text:        @default-interface-txt;
+
+// main menu
+@menu-bg:               @default-bg;
+@menu-btm:              @default-border;
+@menu-link-bg:          @default-bg;
+@menu-link:             @default-interface-txt;
+@menu-link-sides:       @default-bg;
+@menu-link-bg-hov:      @default-tertiary-bg;
+@menu-link-sides-hov:   @default-tertiary-bg;
+@menu-link-btm:         @default-border;
+@menu-link-btm-hov:     @default-border;
+@menu-link-icon:        @default-icon;
+
+// breadcrumbs
+@bc-bg:                 @default-bg;
+@bc-text:               @default-interface-txt;
+@bc-border:             @default-border;
+@bc-link-icon:          @default-icon;
+@bc-link-bg-hov:        @default-tertiary-bg;
+@bc-link-icon-focus:    @default-link;
+@bc-link-side:          @default-border;
+
+// dashboard
+@db-panel-bg:           @default-bg;
+@db-panel-border:       @default-border;
+
+// dashboard counts
+@db-count-succ:         @default-link;
+@db-count-fail:         @default-err;
+@db-count-label:        @default-interface-txt;
+@db-count-label-hov:    @default-bg;
+
+// dashboard graphs
+@db-graph-period-label: @default-interface-txt;
+@db-graph-per-dd-txt:   @default-interface-txt;
+@db-graph-per-dd-icon:  @default-icon;
+@db-graph-per-dd-bord:  @default-border;
+@db-graph-per-dd-bg:    @default-bg;
+@db-graph-per-dd-bg-hov:@default-tertiary-bg;
+@db-graph-axis:         @default-border;
+@db-graph-axis-label:   @default-interface-txt;
+
+// dashboard lists
+@db-list-empty-txt:     @default-interface-txt;
+@db-list-header-bord:   @default-bg;
+@db-list-header-bg:     #EBEBEB;
+@db-list-header-txt:    @default-interface-txt;
+@db-list-header-icon:   @default-icon;
+@db-list-item:          @default-data-txt;
+@db-list-item-link:     @default-link;
+@db-list-item-link-hov: @default-link-hov;
+@db-list-item-bg:       @default-bg;
+@db-list-alt-item-bg:   @default-tertiary-bg;
+@db-list-action-icon:   @default-icon;
+@db-list-actn-bg:       @default-bg;
+@db-list-actn-bord:     @default-bg;
+@db-list-actn-alt-bg:   @default-tertiary-bg;
+@db-list-actn-alt-bord: @default-tertiary-bg;
+@db-list-actn-icn-hov:  @default-bg;
+@db-list-actn-bg-hov:   @default-link;
+@db-list-actn-bord-hov: @default-link;