varify all colors in ansible-ui

awx/ui/client/legacy-styles/ansible-ui.less

@@ -104,9 +104,9 @@ a:focus {
 }
 /* Old style TB default button with grey background */
 .btn-grey {
-  color: #333;
+  color: @default-data-txt;
-  background-color: #ccc;
+  background-color: @d7grey;
-  border-color: #ccc;
+  border-color: @d7grey;
 }
 
 .btn-grey:hover {
@@ -217,7 +217,7 @@ i:active,
     height: 46px;
     padding-top: 10px;
     text-align: right;
-    border-top: 1px solid #A6C9E2;
+    border-top: 1px solid @default-border;
     margin-top: 5px;
     a {
         margin-right: 8px;
@@ -230,16 +230,16 @@ i:active,
     top: 0;
     left: 0;
     display: none;
-    border: 1px solid #e5e5e5;
+    border: 1px solid @default-border;
     border-radius: 4px;
-    box-shadow: 3px 3px 6px 0 #666;
+    box-shadow: 3px 3px 6px 0 @default-dark;
     padding: 0 10px 15px 8px;
     background-color: @white;
     z-index: 200;
 }
 
 #configure-schedules-title {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid @default-border;
     padding-bottom: 8px;
     margin-bottom: 10px;
     margin-top: 0;
@@ -321,7 +321,7 @@ i:active,
 
 .success-badge {
   color: @default-bg;
-  background-color: #5cb85c;
+  background-color: @default-succ;
 }
 
 .bold-text .checkbox-inline {
@@ -345,7 +345,7 @@ textarea.allowresize {
   width: 138px;
   height: 50px;
   text-align:center;
-  color: #eee;
+  color: @d7grey;
   background-color: @black;
   border: 1px solid @grey;
   border-radius: 6px;
@@ -455,7 +455,7 @@ textarea.allowresize {
 }
 
 hr {
-  border-color: #e3e3e3;
+  border-color: @default-border;
 }
 
 .help {
@@ -507,13 +507,13 @@ td.actions {
 }
 
 .btn .caret {
-  border-top-color: #696969;
+  border-top-color: @default-icon;
 }
 
 .btn-light {
-  color: #333;
+  color: @default-data-txt;
-  background-color: #ddd;
+  background-color: @d7grey;
-  border-color: #ddd;
+  border-color: @d7grey;
 }
 
 .refresh-grp {
@@ -530,9 +530,9 @@ td.actions {
 }
 
 .btn-light:hover {
-  color: #333;
+  color: @d7grey;
-  background-color: #ccc;
+  background-color: @default-icon;
-  border-color: #ccc;
+  border-color: @default-icon;
 }
 
 /* Make a div or any element behave like pre. Use in conjunction with .mono-space */
@@ -562,7 +562,7 @@ dd {
 
 #navbar-container, .main-menu {
   width: 100%;
-  background-color: @black;
+  background-color: @default-dark;
 }
 
 .text-justify {
@@ -750,7 +750,7 @@ legend {
           background-color: @default-bg;
           color: #428bca;
           border-color: none;
-          border: 1px solid #428bca;
+          border: 1px solid @default-link;
       }
   }
 
@@ -828,10 +828,10 @@ select.page-size {
     margin-bottom: 15px;
     font-size: 14px;
     font-weight: bold;
-    background-color: #f5f5f5;
+    background-color: @default-no-items-bord;
-    border: 1px solid #d8d8d8;
+    border: 1px solid @d7grey;
     border-radius: 6px;
-    box-shadow: 3px 3px 4px 0 #808080;
+    box-shadow: 3px 3px 4px 0 @default-icon;
 
     .breadcrumb {
       display: inline-block;
@@ -1007,11 +1007,11 @@ input[type="checkbox"].checkbox-no-label {
 .table-summary thead > tr > td,
 .table-summary tbody > tr > td,
 .table-summary tfoot > tr > td {
-  border-top: 1px solid #ccc;
+  border-top: 1px solid @d7grey;
 }
 
 .table-summary thead > tr > th {
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid @d7grey;
 }
 
 /* Table without row borders */
@@ -1060,7 +1060,7 @@ input[type="checkbox"].checkbox-no-label {
   .active-failures-true a:active,
   .job-failed,
   .job-error {
-    color: #da4f49;
+    color: @default-err;
   }
 
   .icon-failures-true a:hover {
@@ -1069,7 +1069,7 @@ input[type="checkbox"].checkbox-no-label {
 
   .job-failures-true {
     padding-top: 5px;
-    color: #da4f49;
+    color: @default-err;
   }
 
   .job-event-status,
@@ -1298,11 +1298,11 @@ input[type="checkbox"].checkbox-no-label {
 /* end */
 
   .field-success {
-    color: #5bb75b;
+    color: @default-succ;
   }
 
   .field-success input {
-    border-color: #5bb75b;
+    border-color: @default-succ;
   }
 
   .field-failure {
@@ -1374,8 +1374,8 @@ input[type="checkbox"].checkbox-no-label {
 
       input[readonly],
       textarea[readonly] {
-          background-color: #FBFBFB;
+          background-color: @default-border;
-          border: 1px solid #E0E0E0;
+          border: 1px solid @default-icon;
       }
 
       .fa-external-link {
@@ -1389,8 +1389,8 @@ input[type="checkbox"].checkbox-no-label {
           color: @white;
       }
       .free-button:hover {
-          background-color: #E64F48;
+          background-color: @default-err-hov;
-          border: 1px solid #E64F48;
+          border: 1px solid @default-err-hov;
           color: @white;
       }
   }
@@ -1452,8 +1452,8 @@ input[type="checkbox"].checkbox-no-label {
 
   .active-row {
      background-color: @white;
-     border-bottom: 1px solid #ddd;
+     border-bottom: 1px solid @default-tertiary-bg;
-     border-right: 1px solid #ddd;
+     border-right: 1px solid @default-tertiary-bg;
   }
 
   .node-toggle, .node-no-toggle {
@@ -1577,7 +1577,7 @@ a.btn-disabled:hover {
 }
 
 .list-header .icon-sort {
-  color: #ccc;
+  color: @default-icon;
 }
 
 .list-header .icon-sort-down,
@@ -1616,7 +1616,7 @@ tr td button i {
   margin-top: 0;
   margin-bottom: 10px;
   font-weight: bold;
-  border-bottom: 1px solid #d8d8d8;
+  border-bottom: 1px solid @default-border;
 }
 
 .modal-backdrop,
@@ -1633,8 +1633,8 @@ tr td button i {
 
 .modal-header {
   padding: 15px 10px;
-  color: #2078be;
+  color: @default-link;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid @default-border;
   -webkit-border-top-right-radius: 3px;
      -moz-border-top-right-radius: 3px;
           border-top-right-radius: 3px;
@@ -1921,7 +1921,7 @@ tr td button i {
 }
 
 .stdout-panel-body {
-    background-color: #e9e9e9;
+    background-color: @default-list-header-bg;
 }
 
 .job-stdout-panel {
@@ -2023,7 +2023,7 @@ tr td button i {
 
 .form-control {
     border-color: @d7grey;
-    background-color: #f6f6f6;
+    background-color: @default-no-items-bord;
     color: @default-data-txt;
     transition: border-color 0.3s;
     box-shadow: none;
@@ -2039,12 +2039,12 @@ tr td button i {
 
 .form-control:active, .form-control:focus {
     box-shadow: none;
-    border-color: #167ec4;
+    border-color: @default-link;
 }
 
 .form-control:active + .select2 .select2-selection, .form-control:focus + .select2 .select2-selection {
     box-shadow: none !important;
-    border-color: #167ec4 !important;
+    border-color: @default-link !important;
 }
 
 .form-control.ng-dirty.ng-invalid, .form-control.ng-dirty.ng-invalid:focus {
@@ -2079,13 +2079,13 @@ tr td button i {
 
 .select2-container--default .select2-selection--single {
     background-color: @field-secondary-bg;
-    border: 1px solid #aaa;
+    border: 1px solid @d7grey;
     border-radius: 4px;
 }
 
 .select2-container--default .select2-selection--multiple {
     background-color: @field-secondary-bg;
-    border: 1px solid #aaa;
+    border: 1px solid @d7grey;
     border-radius: 4px;
     cursor: text;
 }
@@ -2105,7 +2105,7 @@ input[type=file]:focus, input[type=radio]:focus, input[type=checkbox]:focus {
 }
 
 .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
-    border-color: #5CB85C;
+    border-color: @default-succ;
 }
 
 a {