From f11aef01efbb929c963651758d680ee09b8cd4e2 Mon Sep 17 00:00:00 2001
From: gconsidine <greg@greg-considine.com>
Date: Tue, 20 Jun 2017 10:02:47 -0400
Subject: [PATCH] Add contextual variables and update references

---
 .../edit-credentials.controller.js            |   2 +-
 .../client/lib/components/action/_index.less  |   4 +-
 .../lib/components/form/action.directive.js   |   4 +-
 .../client/lib/components/input/_index.less   |  95 ++++++-------
 .../lib/components/input/group.directive.js   |  15 +-
 .../lib/components/input/lookup.partial.html  |   2 +-
 .../client/lib/components/panel/_index.less   |   8 +-
 .../client/lib/components/popover/_index.less |  26 ++--
 awx/ui/client/lib/components/tabs/_index.less |  19 +--
 .../lib/components/tabs/tab.partial.html      |   2 +-
 awx/ui/client/lib/theme/_base-variables.less  |  67 +++++++++
 awx/ui/client/lib/theme/_common.less          |  38 ------
 .../lib/theme/_contextual-variables.less      | 128 ++++++++++++++++++
 awx/ui/client/lib/theme/_global.less          |  41 ++++++
 awx/ui/client/lib/theme/_mixins.less          |  37 ++---
 awx/ui/client/lib/theme/_variables.less       |  72 ----------
 awx/ui/client/lib/theme/index.less            |   5 +-
 17 files changed, 349 insertions(+), 216 deletions(-)
 create mode 100644 awx/ui/client/lib/theme/_base-variables.less
 delete mode 100644 awx/ui/client/lib/theme/_common.less
 create mode 100644 awx/ui/client/lib/theme/_contextual-variables.less
 create mode 100644 awx/ui/client/lib/theme/_global.less
 delete mode 100644 awx/ui/client/lib/theme/_variables.less

diff --git a/awx/ui/client/features/credentials/edit-credentials.controller.js b/awx/ui/client/features/credentials/edit-credentials.controller.js
index b7370fe7c6..421baa1808 100644
--- a/awx/ui/client/features/credentials/edit-credentials.controller.js
+++ b/awx/ui/client/features/credentials/edit-credentials.controller.js
@@ -77,7 +77,7 @@ function EditCredentialsController (models, $state, $scope) {
     };
 
     vm.form.onSaveSuccess = res => {
-        $state.go('credentials', { reload: true });
+        $state.go('credentials.edit', { credential_id: credential.get('id') }, { reload: true });
     };
 }
 
diff --git a/awx/ui/client/lib/components/action/_index.less b/awx/ui/client/lib/components/action/_index.less
index 95231f8a41..6208e2a41d 100644
--- a/awx/ui/client/lib/components/action/_index.less
+++ b/awx/ui/client/lib/components/action/_index.less
@@ -1,7 +1,7 @@
 .at-ActionGroup {
-    margin-top: @at-space-6x;
+    margin-top: @at-margin-panel;
 
     button:last-child {
-        margin-left: @at-space-5x;
+        margin-left: @at-margin-panel-inset;
     }
 }
diff --git a/awx/ui/client/lib/components/form/action.directive.js b/awx/ui/client/lib/components/form/action.directive.js
index 883e94cb89..90dbf561ef 100644
--- a/awx/ui/client/lib/components/form/action.directive.js
+++ b/awx/ui/client/lib/components/form/action.directive.js
@@ -38,14 +38,14 @@ function atFormActionController ($state) {
     vm.setCancelDefaults = () => {
         scope.text = 'CANCEL';
         scope.fill = 'Hollow';
-        scope.color = 'white';
+        scope.color = 'default';
         scope.action = () => $state.go('^');
     };
 
     vm.setSaveDefaults = () => {
         scope.text = 'SAVE';
         scope.fill = '';
-        scope.color = 'green';
+        scope.color = 'success';
         scope.action = () => form.submit();
     };
 }
diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less
index bc04b24246..166e7018db 100644
--- a/awx/ui/client/lib/components/input/_index.less
+++ b/awx/ui/client/lib/components/input/_index.less
@@ -1,17 +1,17 @@
 .at-Input {
-    .at-mixin-Placeholder(@at-gray-dark-3x);
+    .at-mixin-Placeholder(@at-color-input-placeholder);
 
-    height: @at-input-height;
-    background: @at-white;
+    height: @at-height-input;
+    background: @at-color-input-background;
     border-radius: @at-border-radius;
-    color: @at-gray-dark-5x;
+    color: @at-color-input-text;
 
     &, &:active {
-        border-color: @at-gray-dark-2x;
+        border-color: @at-color-input-border;
     }
 
     &:focus {
-        border-color: @at-blue;
+        border-color: @at-color-input-focus;
     }
 }
 
@@ -21,43 +21,43 @@
 
     & > label {
         & > input[type=checkbox] {
-            height: @at-input-height;
+            height: @at-height-input;
             margin: 0;
             padding: 0;
         }
 
         & > p {
             margin: 0;
-            padding: 0 0 0 @at-space-6x;
+            padding: 0 0 0 @at-padding-panel;
             line-height: @at-line-height-tall;
         }
     }
 }
 
 .at-InputContainer {
-    margin-top: @at-space-6x;
+    margin-top: @at-margin-panel;
 }
 
 .at-Input-button {
-    min-width: @at-input-button-width;
     display: block;
-    height: @at-input-height;
+    height: @at-height-button;
+    line-height: 1;
 
     &, &:active, &:hover, &:focus {
-        color: @at-gray-dark-3x;
-        border-color: @at-gray-dark-2x;
-        background-color: @at-white;
+        color: @at-color-button-text-default;
+        border-color: @at-color-input-border;
+        background-color: @at-color-default;
         cursor: pointer;
     }
 }
 
 .at-Input--focus {
-    border-color: @at-blue;
+    border-color: @at-color-input-focus;
 }
 
 .at-Input--rejected {
     &, &:focus {
-        border-color: @at-red;
+        border-color: @at-color-input-error;
     }
 }
 
@@ -66,7 +66,6 @@
     height: 100%;
     width: 100%;
     left: 0;
-    right: @at-input-button-width;
     z-index: -2;
     opacity: 0;
 }
@@ -77,15 +76,15 @@
 
 .at-InputGroup {
     padding: 0;
-    margin: @at-space-6x 0 0 0;
+    margin: @at-margin-panel 0 0 0;
 }
 
 .at-InputGroup-border {
     position: absolute;
-    width: @at-inset-width;
+    width: 5px;
     height: 100%;
-    background: @at-gray-dark;
-    left: -@at-inset-width;
+    background: @at-color-panel-border;
+    left: -5px;
 }
 
 .at-InputGroup-button {
@@ -93,19 +92,21 @@
 
     & > button {
         height: 100%;
+        border-right: none;
+        color: @at-color-button-text-default;
     }
 }
 
 .at-InputGroup-title {
-    .at-mixin-Heading(@at-font-size-2x);
-    margin: 0 0 0 @at-space-5x;
+    .at-mixin-Heading(@at-font-size-panel-inset-heading);
+    margin: 0 0 0 @at-margin-panel-inset;
 }
 
 .at-InputGroup-divider {
     clear: both;
     margin: 0;
     padding: 0;
-    height: @at-space-6x;
+    height: @at-height-divider;
 }
 
 .at-InputLabel {
@@ -114,17 +115,17 @@
 }
 
 .at-InputLabel-name {
-    color: @at-gray-dark-4x;
-    font-size: @at-font-size-2x;
-    font-weight: @at-font-weight;
+    color: @at-color-form-label;
+    font-size: @at-font-size-form-label;
+    font-weight: @at-font-weight-body;
     text-transform: uppercase;
 }
 
 .at-InputLabel-hint {
-    margin-left: @at-space-4x;
-    color: @at-gray-dark-3x;
-    font-size: @at-font-size;
-    font-weight: @at-font-weight;
+    margin-left: @at-margin-form-label-hint;
+    color: @at-color-input-hint;
+    font-size: @at-font-size-help-text;
+    font-weight: @at-font-weight-body;
     line-height: @at-line-height-short;
 }
 
@@ -137,15 +138,15 @@
     margin-bottom: 0;
 
     & > input[type=checkbox] {
-        margin: 0 @at-space 0 0;
+        margin: 0 3px 0 0;
         position: relative;
-        top: @at-space;
+        top: 3px
     }
 
     & > p {
-        font-size: @at-font-size;
-        color: @at-gray-dark-4x;
-        font-weight: @at-font-weight;
+        font-size: @at-font-size-help-text;
+        color: @at-color-form-label;
+        font-weight: @at-font-weight-body;
         display: inline;
         margin: 0;
         padding: 0;
@@ -153,16 +154,16 @@
 }
 
 .at-InputMessage--rejected {
-    font-size: @at-font-size; 
-    color: @at-red;
-    margin: @at-space-3x 0 0 0;
+    font-size: @at-font-size-help-text; 
+    color: @at-color-error;
+    margin: @at-margin-input-message 0 0 0;
     padding: 0;
 }
 
 .at-InputLabel-required {
-    color: @at-red;
-    font-weight: @at-font-weight-2x;
-    font-size: @at-font-size-2x;
+    color: @at-color-error;
+    font-weight: @at-font-weight-heading;
+    font-size: @at-font-size-form-label;
     margin: 0;
 }
 
@@ -171,13 +172,13 @@
     width: 100%;
 
     & > i {
-        font-size: @at-font-size;
+        font-size: @at-font-size-button;
         position: absolute;  
         z-index: 3;
         pointer-events: none;
-        top: @at-space-4x;
-        right: @at-space-4x;
-        color: @at-gray-dark-2x;
+        top: @at-height-input / 3;
+        right: @at-height-input / 3;
+        color: @at-color-icon;
     }
 }
 
@@ -188,7 +189,7 @@
 }
 
 .at-InputSelect-select {
-    height: @at-input-height;
+    height: @at-height-input;
     cursor: pointer;
     position: absolute;
     z-index: 1;
diff --git a/awx/ui/client/lib/components/input/group.directive.js b/awx/ui/client/lib/components/input/group.directive.js
index 5ffb8029b1..550cd1c0ef 100644
--- a/awx/ui/client/lib/components/input/group.directive.js
+++ b/awx/ui/client/lib/components/input/group.directive.js
@@ -49,7 +49,6 @@ function AtInputGroupController ($scope, $compile) {
 
         vm.insert(group);
         state._group = group;
-        vm.compile(group);
     };
 
     vm.createComponentConfigs = inputs => {
@@ -138,20 +137,22 @@ function AtInputGroupController ($scope, $compile) {
     vm.createComponent = (input, index) => {
         let tabindex = Number(scope.tab) + index;
         let col = input._expand ? 12 : scope.col;
-
-        return angular.element(
+        let component = angular.element(
             `<${input._component} col="${col}" tab="${tabindex}"
                 state="${state._reference}._group[${index}]">
             </${input._component}>`
         );
+
+        $compile(component)(scope.$parent)
+
+        return component;
     };
 
     vm.createDivider = () => {
-        return angular.element('<at-divider></at-divider>');
-    };
+        let divider = angular.element('<at-divider></at-divider>');
+        $compile(divider[0])(scope.$parent);
 
-    vm.compile = group => {
-        group.forEach(component => $compile(component._element[0])(scope.$parent));
+        return divider;
     };
 
     vm.clear = () => {
diff --git a/awx/ui/client/lib/components/input/lookup.partial.html b/awx/ui/client/lib/components/input/lookup.partial.html
index d5f0ca89b7..05239176ca 100644
--- a/awx/ui/client/lib/components/input/lookup.partial.html
+++ b/awx/ui/client/lib/components/input/lookup.partial.html
@@ -4,7 +4,7 @@
 
         <div class="input-group">
             <span class="input-group-btn">
-                <button class="btn at-ButtonHollow--white at-Input-button"
+                <button class="btn at-ButtonHollow--default at-Input-button"
                         ng-disabled="state._disabled || form.disabled"
                         ng-click="vm.search()">
                     <i class="fa fa-search"></i>
diff --git a/awx/ui/client/lib/components/panel/_index.less b/awx/ui/client/lib/components/panel/_index.less
index dd5e8cc234..bc30b323d0 100644
--- a/awx/ui/client/lib/components/panel/_index.less
+++ b/awx/ui/client/lib/components/panel/_index.less
@@ -1,7 +1,7 @@
 .at-Panel {
-    margin: @at-space-6x 0 0 0;
-    padding: @at-space-6x;
-    border-color: @at-gray-dark;
+    margin: @at-margin-panel 0 0 0;
+    padding: @at-padding-panel;
+    border-color: @at-color-panel-border;
 }
 
 .at-Panel-heading {
@@ -20,6 +20,6 @@
 }
 
 .at-Panel-headingTitle {
-    .at-mixin-Heading(@at-font-size-3x);
+    .at-mixin-Heading(@at-font-size-panel-heading);
     text-transform: none;
 }
diff --git a/awx/ui/client/lib/components/popover/_index.less b/awx/ui/client/lib/components/popover/_index.less
index dd40fdd99a..b770a4cd47 100644
--- a/awx/ui/client/lib/components/popover/_index.less
+++ b/awx/ui/client/lib/components/popover/_index.less
@@ -1,5 +1,5 @@
 .at-Popover {
-    padding: 0 0 0 @at-space-3x;
+    padding: 0 0 0 5px;
 }
 
 .at-Popover--inline {
@@ -8,7 +8,7 @@
 
 .at-Popover-icon {
     .at-mixin-ButtonIcon();  
-    font-size: @at-font-size-4x;
+    font-size: @at-font-size-icon;
     padding: 0;
     margin: 0;
 }
@@ -17,35 +17,35 @@
     visibility: hidden;
     opacity: 0;
     color: @at-white;
-    background-color: @at-gray-dark-4x;
-    max-width: @at-popover-width;
-    padding: @at-space-4x;
+    background-color: @at-color-body-background-dark;
+    max-width: @at-popover-maxwidth;
+    padding: @at-padding-popover;
     height: auto;
     position: fixed;
     z-index: 2000;
-    margin: 0 0 0 @at-space-6x;
+    margin: 0 0 0 18px;
     border-radius: @at-border-radius;
     box-shadow: 0 5px 10px rgba(0,0,0, 0.2);
     transition: opacity .15s linear;
-    font-weight: @at-font-weight
+    font-weight: @at-font-weight-body;
 }
 
 .at-Popover-arrow {
-    color: @at-gray-dark-4x;
+    color: @at-color-body-background-dark;
     position: fixed;
     z-index: 1999;
     padding: 0;
-    margin: @at-space-4x 0 0 @at-space;
+    margin: 8px 0 0 3px;
 }
 
 .at-Popover-title {
-    .at-mixin-Heading(@at-font-size);
-    color: @at-white;
-    margin-bottom: @at-space-4x;
+    .at-mixin-Heading(@at-font-size-body);
+    color: @at-color-body-text-dark;
+    margin-bottom: @at-margin-popover;
 }
 
 .at-Popover-text {
     margin: 0;
     padding: 0;
-    font-size: @at-font-size;
+    font-size: @at-font-size-body;
 }
diff --git a/awx/ui/client/lib/components/tabs/_index.less b/awx/ui/client/lib/components/tabs/_index.less
index a95293942a..4956444576 100644
--- a/awx/ui/client/lib/components/tabs/_index.less
+++ b/awx/ui/client/lib/components/tabs/_index.less
@@ -1,26 +1,27 @@
 .at-TabGroup {
-    margin-top: @at-space-6x;
+    margin-top: @at-margin-panel;
 }
 
 .at-Tab {
-    margin: 0 @at-space-5x 0 0;
-    font-size: @at-font-size;
+    margin: 0 @at-margin-item-column 0 0;
+    font-size: @at-font-size-body;
+    line-height: 1;
 }
 
 .at-Tab--active {
     &, &:hover, &:active, &:focus {
-        color: @at-white;
-        background-color: @at-gray-dark-3x;
-        border-color: @at-gray-dark-3x;
+        color: @at-color-tab-text-default-active;
+        background-color: @at-color-tab-default-active;
+        border-color: @at-color-tab-border-default-active;
         cursor: default;
     }
 }
 
 .at-Tab--disabled {
     &, &:hover, &:active, &:focus {
-        background-color: @at-white;
-        color: @at-gray-dark-2x;
-        border-color: @at-gray-dark-2x;
+        background-color: @at-color-tab-default-disabled;
+        color: @at-color-tab-text-default-disabled;
+        border-color: @at-color-tab-border-default-disabled;
         opacity: 0.65;
         cursor: not-allowed;
     }
diff --git a/awx/ui/client/lib/components/tabs/tab.partial.html b/awx/ui/client/lib/components/tabs/tab.partial.html
index eb8ea75f11..263a5d1d96 100644
--- a/awx/ui/client/lib/components/tabs/tab.partial.html
+++ b/awx/ui/client/lib/components/tabs/tab.partial.html
@@ -1,4 +1,4 @@
-<button class="btn at-ButtonHollow--white at-Tab"
+<button class="btn at-ButtonHollow--default at-Tab"
         ng-attr-disabled="{{ state._disabled || undefined }}"
         ng-class="{ 'at-Tab--active': state._active, 'at-Tab--disabled': state._disabled }"
         ng-click="vm.go()">
diff --git a/awx/ui/client/lib/theme/_base-variables.less b/awx/ui/client/lib/theme/_base-variables.less
new file mode 100644
index 0000000000..3726a74726
--- /dev/null
+++ b/awx/ui/client/lib/theme/_base-variables.less
@@ -0,0 +1,67 @@
+/**
+ * All base variables used. These should only be referenced by the contextual variables defined 
+ * in the _contextual-variables.less file. In development, unless you are intentionally making a 
+ * fundamental change, these variables should not be modified, removed, or added to.
+ *
+ * These variables should not be used directly in development of components or features. If an
+ * alias doesn't exist for the context you're working within, check with UX to create a new alias
+ * or to define a more applicable alias.
+ *
+ * The goal is for UX to define the contexts for the contextual variables, so it's easy to make 
+ * modifications like, "Change heading text to be smaller" or "Make all warnings a lighter shade  
+ * of orange"
+ *
+ * 1. Colors
+ * 2. Typography
+ * 3. Layout
+ *
+ */
+
+// 1. Colors --------------------------------------------------------------------------------------
+
+@at-gray-light-3x: #fcfcfc;
+@at-gray-light-2x: #f2f2f2;
+@at-gray-light: #ebebeb;
+@at-gray: #e1e1e1;
+@at-gray-dark: #d7d7d7;
+@at-gray-dark-2x: #b7b7b7;
+@at-gray-dark-3x: #848992;
+@at-gray-dark-4x: #707070;
+@at-gray-dark-5x: #161b1f;
+
+@at-white: #ffffff;
+@at-white-hover: #f2f2f2;
+
+@at-blue: #337ab7;
+@at-blue-hover: #286090;
+
+@at-green: #5cb85c;
+@at-green-hover: #449D44;
+
+@at-orange: #f0ad4e;
+@at-orange-hover: #ec971f;
+
+@at-red: #d9534f;
+@at-red-hover: #c9302c;
+
+@at-red-bright: #ff0000;
+@at-red-bright-hover: #d81f1f;
+
+// 2. Typography ----------------------------------------------------------------------------------
+
+@at-font-size: 12px;
+@at-font-size-2x: 13px;
+@at-font-size-3x: 14px;
+@at-font-size-4x: 16px;
+@at-font-size-5x: 20px;
+
+@at-font-weight: 400;
+@at-font-weight-2x: 700;
+
+// 3. Layout --------------------------------------------------------------------------------------
+
+@at-space: 5px;
+@at-space-2x: 10px;
+@at-space-3x: 15px;
+@at-space-4x: 20px;
+
diff --git a/awx/ui/client/lib/theme/_common.less b/awx/ui/client/lib/theme/_common.less
deleted file mode 100644
index bfd3fc7f48..0000000000
--- a/awx/ui/client/lib/theme/_common.less
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * For styles that are used in more than one place throughout the application.
- *
- * 1. Buttons
- *
- */
-
-// 1. Buttons -------------------------------------------------------------------------------------
-
-.at-Button--green {
-    .at-mixin-Button();
-    .at-mixin-ButtonColor('at-green', 'at-white');
-
-    &[disabled] {
-        background: @at-gray-dark;
-    }
-}
- 
-.at-Button--blue {
-    .at-mixin-Button();
-    .at-mixin-ButtonColor('at-blue', 'at-white');
-}
-
-.at-Button--red {
-    .at-mixin-Button();
-    .at-mixin-ButtonColor('at-red', 'at-white');
-}
-
-.at-ButtonHollow--white { 
-    .at-mixin-Button();
-    .at-mixin-ButtonHollow('at-gray-dark-3x', 'at-gray-dark-2x');
-    border-color: @at-gray-dark;
-}
-
-.at-ButtonIcon {
-    padding: @at-space-2x @at-space-4x;
-    font-size: @at-font-size-3x;
-}
diff --git a/awx/ui/client/lib/theme/_contextual-variables.less b/awx/ui/client/lib/theme/_contextual-variables.less
new file mode 100644
index 0000000000..c70a0c34d9
--- /dev/null
+++ b/awx/ui/client/lib/theme/_contextual-variables.less
@@ -0,0 +1,128 @@
+/**
+ * All variables used in the UI. Use these variables directly during the development of components
+ * and features. Be sure the context of the variable name applies to the work that's being done.
+ * For example, it wouldn't make sense to use `@at-input-height` to describe the height of a 
+ * button. Either add an alias if it makes sense to use the same base variable, or add a new 
+ * base variable to reference.
+ *
+ * Keep in mind the goal is to be able to modify an item by referencing its context instead of 
+ * an arbitrary variable name. For example, tt should be a simple change when an ask comes in to 
+ * "increase the height of inputs"
+ *
+ * 1. Colors
+ * 2. Typography
+ * 3. Layout
+ * 4. Misc 
+ * 
+ */
+
+// 1. Colors --------------------------------------------------------------------------------------
+
+@at-color-default: @at-white;
+@at-color-default-hover: @at-white-hover;
+
+@at-color-unreachable: @at-red-bright;
+@at-color-unreachable-hover: @at-red-bright-hover;
+
+@at-color-error: @at-red;
+@at-color-error-hover: @at-red-hover;
+
+@at-color-warning: @at-orange;
+@at-color-warning-hover: @at-orange-hover;
+
+@at-color-info: @at-blue;
+@at-color-info-hover: @at-blue-hover;
+
+@at-color-success: @at-green;
+@at-color-success-hover: @at-green-hover;
+
+@at-color-disabled: @at-gray-dark;
+
+@at-color-body-background-dark: @at-gray-dark-4x;
+@at-color-body-text-dark: @at-white;
+@at-color-body-background: @at-gray-light-3x;
+@at-color-body-text: @at-gray-dark-4x;
+
+@at-color-button-border-default: @at-gray-dark-2x;
+@at-color-button-text-default: @at-gray-dark-4x;
+
+@at-color-tab-default-active: @at-gray-dark-2x;
+@at-color-tab-border-default-active: @at-gray-dark-2x;
+@at-color-tab-text-default-active: @at-white;
+
+@at-color-tab-default-disabled: @at-white;
+@at-color-tab-border-default-disabled: @at-gray-dark-2x;
+@at-color-tab-text-default-disabled: @at-gray-dark-4x;
+
+@at-color-form-label: @at-gray-dark-4x;
+
+@at-color-input-border: @at-gray-dark-2x;
+@at-color-input-error: @at-color-error;
+@at-color-input-focus: @at-color-info;
+@at-color-input-placeholder: @at-gray-dark-3x;
+@at-color-input-hint: @at-gray-dark-3x;
+@at-color-input-text: @at-gray-dark-5x;
+@at-color-input-background: @at-white;
+
+@at-color-icon: @at-gray-dark-2x;
+@at-color-icon-hover: @at-gray-dark-3x;
+
+@at-color-panel-heading: @at-gray-dark-4x;
+@at-color-panel-border: @at-gray-dark;
+
+@at-color-table-header-background: @at-gray-light;
+@at-color-line-separator: @at-gray;
+
+// 2. Typography ----------------------------------------------------------------------------------
+
+@at-font-size-help-text: @at-font-size;
+@at-font-size-button: @at-font-size;
+
+@at-font-size-form-label: @at-font-size-2x;
+
+@at-font-size-breadcrumb: @at-font-size-3x;
+@at-font-size-input: @at-font-size-3x;
+@at-font-size-panel-heading: @at-font-size-3x;
+@at-font-size-navigation: @at-font-size-3x;
+@at-font-size-table-heading: @at-font-size-3x;
+@at-font-size-body: @at-font-size-3x;
+@at-font-size-panel-inset-heading: @at-font-size-2x;
+
+@at-font-size-icon: @at-font-size-4x;
+@at-font-size-menu-icon: @at-font-size-5x;
+
+@at-font-weight-body: @at-font-weight;
+@at-font-weight-heading: @at-font-weight-2x;
+
+// 3. Layout --------------------------------------------------------------------------------------
+
+@at-padding-button-horizontal: @at-space-2x;
+@at-padding-button-vertical: @at-space;
+@at-padding-inset: @at-space-3x;
+@at-padding-panel: @at-space-4x;
+@at-padding-popover: @at-space-2x;
+
+@at-margin-input-message: @at-space;
+@at-margin-item-column: @at-space-3x;
+@at-margin-panel: @at-space-4x;
+@at-margin-panel-inset: @at-space-3x;
+@at-margin-popover: @at-space-2x;
+@at-margin-tag: @at-space-2x;
+@at-margin-form-label: @at-space;
+@at-margin-form-label-hint: @at-space-2x;
+
+@at-margin-top-search-key: @at-space-2x;
+
+@at-height-divider: @at-margin-panel;
+@at-height-input: 30px;
+@at-height-button: 30px;
+@at-height-tab: 30px;
+
+// 4. Misc ----------------------------------------------------------------------------------------
+
+@at-border-radius: 5px;
+@at-popover-maxwidth: 320px;
+@at-line-height-short: 0.9;
+@at-line-height-tall: 2;
+@at-line-height: 24px;
+
diff --git a/awx/ui/client/lib/theme/_global.less b/awx/ui/client/lib/theme/_global.less
new file mode 100644
index 0000000000..b4081067c5
--- /dev/null
+++ b/awx/ui/client/lib/theme/_global.less
@@ -0,0 +1,41 @@
+/**
+ * For styles that are used in more than one place throughout the application.
+ *
+ * 1. Buttons
+ *
+ */
+
+// 1. Buttons -------------------------------------------------------------------------------------
+
+.at-Button--success {
+    .at-mixin-Button();
+    .at-mixin-ButtonColor('at-color-success', 'at-color-default');
+
+    &[disabled] {
+        background: @at-color-disabled;
+    }
+}
+ 
+.at-Button--info {
+    .at-mixin-Button();
+    .at-mixin-ButtonColor('at-color-info', 'at-color-default');
+}
+
+.at-Button--error {
+    .at-mixin-Button();
+    .at-mixin-ButtonColor('at-color-error', 'at-color-default');
+}
+
+.at-ButtonHollow--default { 
+    .at-mixin-Button();
+    .at-mixin-ButtonHollow(
+        'at-color-default',
+        'at-color-button-border-default',
+        'at-color-button-text-default'
+    );
+}
+
+.at-ButtonIcon {
+    padding: 4px @at-padding-button-horizontal;
+    font-size: @at-font-size-body;
+}
diff --git a/awx/ui/client/lib/theme/_mixins.less b/awx/ui/client/lib/theme/_mixins.less
index 845a9ae030..6cf28822ac 100644
--- a/awx/ui/client/lib/theme/_mixins.less
+++ b/awx/ui/client/lib/theme/_mixins.less
@@ -11,9 +11,9 @@
 }
 
 .at-mixin-Heading (@size) {
-    color: @at-gray-dark-4x;
+    color: @at-color-body-text;
     font-size: @size;
-    font-weight: @at-font-weight-2x;
+    font-weight: @at-font-weight-heading;
     line-height: @at-line-height-short;
     text-transform: uppercase;
     margin: 0;
@@ -21,12 +21,13 @@
 }
 
 .at-mixin-Button () {
-    height: @at-input-height;
-    padding: @at-space-2x @at-space-4x;
-    font-size: @at-font-size;
+    height: @at-height-input;
+    padding: @at-padding-button-vertical @at-padding-button-horizontal;
+    font-size: @at-font-size-body;
+    line-height: 1;
 }
 
-.at-mixin-ButtonColor (@background, @color, @hover: '@{background}--hover') {
+.at-mixin-ButtonColor (@background, @color, @hover: '@{background}-hover') {
     background-color: @@background;
 
     &, &:hover, &:focus {
@@ -42,21 +43,23 @@
     }
 }
 
-.at-mixin-ButtonHollow (@color, @accent) {
-    background-color: @at-white;
-    color: @@color;
-    border-color: @@color;
+.at-mixin-ButtonHollow (@bg, @border, @text) {
+    @hover: '@{bg}-hover';
+
+    background-color: @@bg;
+    color: @@text;
+    border-color: @@border;
 
     &:hover, &:active {
-        color: @@color;
-        background-color: @at-white--hover;
+        color: @@text;
+        background-color: @@hover;
         box-shadow: none;
     }
 
     &:focus {
-        color: @at-white;
-        background-color: @@accent;
-        border-color: @@accent;
+        color: @@text;
+        background-color: @@hover;
+        border-color: @@border;
         cursor: default;
     }
 
@@ -67,14 +70,14 @@
 
 .at-mixin-ButtonIcon () {
     line-height: @at-line-height-short;
-    color: @at-gray-dark-2x;
+    color: @at-color-icon;
 
     & > i {
         cursor: pointer;
     }
 
     & > i:hover {
-        color: @at-gray-dark-3x;
+        color: @at-color-icon-hover
     }
 }
 
diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less
deleted file mode 100644
index f8ad4086e7..0000000000
--- a/awx/ui/client/lib/theme/_variables.less
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * All variables used in the UI.
- *
- * 1. Colors
- * 2. Typography
- * 3. Layout
- * 4. Input
- * 5. Misc 
- */
-
-// 1. Colors --------------------------------------------------------------------------------------
-@at-gray-light-5x: #fcfcfc;
-@at-gray-light-4x: #fafafa;
-@at-gray-light-3x: #f6f6f6;
-@at-gray-light-2x: #f2f2f2;
-@at-gray-light: #ebebeb;
-@at-gray: #e1e1e1;
-@at-gray-dark: #d7d7d7;
-@at-gray-dark-2x: #b7b7b7;
-@at-gray-dark-3x: #848992;
-@at-gray-dark-4x: #707070;
-@at-gray-dark-5x: #161b1f;
-
-@at-white: #ffffff;
-@at-white--hover: #f2f2f2;
-
-@at-blue: #337ab7;
-@at-blue--hover: #286090;
-
-@at-green: #5cb85c;
-@at-green--hover: #449D44;
-
-@at-yellow: #f0ad4e;
-@at-yellow--hover: #ec971f;
-
-@at-red: #d9534f;
-@at-red--hover: #c9302c;
-
-@at-redAlert: #ff0000;
-@at-redAlert--hover: #d81f1f;
-
-// 2. Typography ----------------------------------------------------------------------------------
-@at-font-size: 12px;
-@at-font-size-2x: 13px;
-@at-font-size-3x: 14px;
-@at-font-size-4x: 16px;
-
-@at-font-weight: 400;
-@at-font-weight-2x: 700;
-@at-font-weight-3x: 900;
-
-@at-line-height-short: 0.9;
-@at-line-height-tall: 2;
-@at-line-height: 24px;
-
-// 3. Layout --------------------------------------------------------------------------------------
-@at-space: 3px;
-@at-space-2x: 4px;
-@at-space-3x: 5px;
-@at-space-4x: 10px;
-@at-space-5x: 15px;
-@at-space-6x: 20px;
-
-// 4. Input ---------------------------------------------------------------------------------------
-@at-input-button-width: 72px;
-@at-input-height: 30px;
-
-// 5. Misc ----------------------------------------------------------------------------------------
-@at-border-radius: 5px;
-@at-popover-width: 320px;
-@at-inset-width: 5px;
-
diff --git a/awx/ui/client/lib/theme/index.less b/awx/ui/client/lib/theme/index.less
index a7aeddaaca..14c6bc1890 100644
--- a/awx/ui/client/lib/theme/index.less
+++ b/awx/ui/client/lib/theme/index.less
@@ -1,8 +1,9 @@
 // App-wide styles 
-@import '_variables';
+@import '_base-variables';
+@import '_contextual-variables';
 @import '_mixins';
 @import '_utility';
-@import '_common';
+@import '_global';
 
 // Aggregated component and feature specific styles
 @import '../components/_index';