diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
index 0b7b518..1d28f2a 100644
--- a/src/assets/styles/bmc/custom/_alert.scss
+++ b/src/assets/styles/bmc/custom/_alert.scss
@@ -2,7 +2,7 @@
     display: flex;
     padding: $spacer;
     border-width: 0 0 0 3px;
-    color: $gray-800;
+    color: gray("800");
     margin-bottom: $spacer;
 
     &.small {
@@ -45,20 +45,20 @@
     }
 
     &.alert-info {
-      border-left-color: $info;
+      border-left-color: theme-color("info");
       background-color: $info-light;
-      fill: $info;
+      fill: theme-color("info");
     }
 
     &.alert-danger {
-      border-left-color: $danger;
+      border-left-color: theme-color("danger");
       background-color: $danger-light;
-      fill: $danger;
+      fill: theme-color("danger");
     }
 
     &.alert-warning {
-      border-left-color: $warning;
+      border-left-color: theme-color("warning");
       background-color: $warning-light;
-      fill: $warning;
+      fill: theme-color("warning");
     }
   }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_badge.scss b/src/assets/styles/bmc/custom/_badge.scss
index 7acd73a..87b96e6 100644
--- a/src/assets/styles/bmc/custom/_badge.scss
+++ b/src/assets/styles/bmc/custom/_badge.scss
@@ -17,5 +17,5 @@
 
 .badge-primary {
   background-color: $info-light;
-  color: $info;
+  color: theme-color("info");
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 39a4aaa..5a6a11b 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,7 +1,7 @@
 dt,
 legend,
 label {
-  color: $gray-800;
+  color: gray("800");
   font-size: 14px;
   font-weight: 400;
 }
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index b9b8073..3f11130 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -21,23 +21,23 @@
 }
 
 .btn-link {
-  fill: $primary;
+  fill: theme-color("primary");
   text-decoration: none !important;
 
   &:focus {
     box-shadow: $btn-focus-box-shadow;
   }
   &:hover {
-    fill: darken($primary, 15%);
+    fill: darken(theme-color("primary"), 15%);
   }
 }
 
 .btn:disabled {
-  color: $gray-600;
+  color: gray("600");
   fill: currentColor;
 
   &:not(.btn-link) {
-    border-color: $gray-400;
-    background-color: $gray-400;
+    border-color: gray("400");
+    background-color: gray("400");
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss
index bf7572e..641e4ed 100644
--- a/src/assets/styles/bmc/custom/_calendar.scss
+++ b/src/assets/styles/bmc/custom/_calendar.scss
@@ -2,7 +2,7 @@
   .btn {
     &:hover {
       background: none;
-      color: $dark;
+      color: theme-color("dark");
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 8d3ed9e..1195f6c 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -1,11 +1,11 @@
 .form-text {
   margin-top: -$spacer / 4;
   margin-bottom: $spacer / 2;
-  color: $gray-800;
+  color: gray("800");
 }
 
 .col-form-label {
-  color: $gray-800;
+  color: gray("800");
   font-size: 14px;
 }
 
@@ -17,12 +17,12 @@
 .custom-control-label,
 .form-control {
   //important needed to override validation colors on radio labels
-  color: $dark !important;
+  color: theme-color("dark") !important;
   font-size: 16px;
-  border-color: $gray-400 !important;
+  border-color: gray("400") !important;
   &.is-invalid,
   &:invalid {
-    border-bottom: 2px solid $danger !important;
+    border-bottom: 2px solid theme-color("danger") !important;
   }
 }
 
@@ -31,7 +31,7 @@
     & + .custom-control-label {
       // Disabled label for checkbox, radio,
       // switch bootstrap form components
-      color: $gray-700!important;
+      color: gray("700")!important;
     }
   }
 }
@@ -46,11 +46,11 @@
   white-space: nowrap;
   margin-right: -$spacer;
   &.btn-link-primary {
-    color: $primary;
+    color: theme-color("primary");
     fill: currentColor;
   }
 }
 
 .form-background {
-  background-color: $container-bgd;
+  background-color: gray("200");
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_modal.scss b/src/assets/styles/bmc/custom/_modal.scss
index 5d3b601..a34a11b 100644
--- a/src/assets/styles/bmc/custom/_modal.scss
+++ b/src/assets/styles/bmc/custom/_modal.scss
@@ -1,7 +1,7 @@
 .modal-header {
   .close {
     font-weight: normal;
-    color: $dark;
+    color: theme-color("dark");
     opacity: 1;
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_pagination.scss b/src/assets/styles/bmc/custom/_pagination.scss
index 4fed21b..0c2ac85 100644
--- a/src/assets/styles/bmc/custom/_pagination.scss
+++ b/src/assets/styles/bmc/custom/_pagination.scss
@@ -12,9 +12,9 @@
 
 .b-pagination {
   .page-item.active button {
-    color: $dark;
+    color: theme-color("dark");
     background-color: $white;
     border-color: $border-color;
-    box-shadow: inset 0px -3px $primary;
+    box-shadow: inset 0px -3px theme-color("primary");
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index b20feb0..52bdcff 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -3,20 +3,20 @@
   z-index: $zindex-dropdown;
 
   td {
-    border-top: 1px solid $gray-300;
-    border-bottom: 1px solid $gray-300;
+    border-top: 1px solid gray("300");
+    border-bottom: 1px solid gray("300");
     &:first-of-type {
-      border-left: 1px solid $gray-300;
+      border-left: 1px solid gray("300");
     }
     &:last-of-type {
-      border-right: 1px solid $gray-300;
+      border-right: 1px solid gray("300");
     }
   }
 
   // thead-light added for specificiy
   .thead-light th {
     border: none;
-    color: $dark;
+    color: theme-color("dark");
   }
 
   .status-icon svg {
@@ -34,7 +34,7 @@
   }
 
   .b-table-details {
-    background-color: $light;
+    background-color: theme-color("light");
     td {
       padding-left: calc(50px + (#{$table-cell-padding} * 2));
     }
@@ -57,7 +57,7 @@
       width: 50px;
     }
     svg {
-      fill: $dark;
+      fill: theme-color("dark");
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index 9295b17..c3e91b8 100644
--- a/src/assets/styles/bmc/custom/_toasts.scss
+++ b/src/assets/styles/bmc/custom/_toasts.scss
@@ -14,31 +14,31 @@
 .toast-header {
   background-color: inherit!important; //override specificity
   border: none;
-  color: $dark!important; //override specificity
+  color: theme-color("dark")!important; //override specificity
   padding-bottom: 0;
 }
 
 .toast-body {
-  color: $dark;
+  color: theme-color("dark");
   padding-top: 0;
 }
 
 .b-toast-success .toast {
-  border-left-color: $success!important;
+  border-left-color: theme-color("success")!important;
   background-color: $success-light;
 }
 
 .b-toast-info .toast {
-  border-left-color: $info!important;
+  border-left-color: theme-color("info")!important;
   background-color: $info-light;
 }
 
 .b-toast-danger .toast {
-  border-left-color: $danger!important;
+  border-left-color: theme-color("danger")!important;
   background-color: $danger-light;
 }
 
 .b-toast-warning .toast {
-  border-left-color: $warning!important;
+  border-left-color: theme-color("warning")!important;
   background-color: $warning-light;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index cbee2df..ea300ec 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -8,6 +8,4 @@
 // OpenBMC Custom Variables
 $responsive-layout-bp: lg;
 $header-height: 56px;
-$navigation-width: 300px;
-$container-bgd: $gray-200;
-$primary-nav-hover: $gray-300;
\ No newline at end of file
+$navigation-width: 300px;
\ No newline at end of file
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index a69d6d9..7f18e1d 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -179,7 +179,7 @@
   }
 
   .nav-item {
-    fill: $light;
+    fill: theme-color('light');
   }
 
   .navbar {
@@ -194,7 +194,7 @@
 
     .helper-menu {
       @include media-breakpoint-down(sm) {
-        background-color: $gray-800;
+        background-color: gray('800');
         width: 100%;
         justify-content: flex-end;
 
@@ -217,7 +217,7 @@
   }
 
   .nav-trigger {
-    fill: $light;
+    fill: theme-color('light');
     width: $header-height;
     height: $header-height;
     transition: none;
@@ -227,12 +227,12 @@
     }
 
     &:hover {
-      fill: $light;
-      background-color: $dark;
+      fill: theme-color('light');
+      background-color: theme-color('dark');
     }
 
     &.open {
-      background-color: $gray-800;
+      background-color: gray('800');
     }
 
     @include media-breakpoint-up($responsive-layout-bp) {
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 175b0aa..37f0f71 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -212,16 +212,16 @@
   font-weight: $headings-font-weight;
   padding-left: $spacer; // defining consistent padding for links and buttons
   padding-right: $spacer;
-  color: $secondary;
+  color: theme-color('secondary');
 
   &:hover {
-    background-color: $primary-nav-hover;
-    color: $dark;
+    background-color: gray('300');
+    color: theme-color('dark');
   }
 
   &:focus {
     box-shadow: $btn-focus-box-shadow;
-    color: $dark;
+    color: theme-color('dark');
   }
 }
 
@@ -229,8 +229,8 @@
 .nav-link--current:hover,
 .nav-link--current:focus {
   font-weight: $headings-font-weight;
-  background-color: $secondary;
-  color: $light;
+  background-color: theme-color('secondary');
+  color: theme-color('light');
   cursor: default;
 
   &::before {
@@ -240,7 +240,7 @@
     bottom: 0;
     left: 0;
     width: 4px;
-    background-color: $primary;
+    background-color: theme-color('primary');
   }
 }
 
@@ -252,7 +252,7 @@
   left: 0;
   z-index: $zindex-fixed;
   overflow-y: auto;
-  background-color: $container-bgd;
+  background-color: gray('200');
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;
   @include media-breakpoint-down(md) {
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index 5811998..6f44a3a 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -31,7 +31,7 @@
     content: '';
     display: block;
     width: 100px;
-    border: 1px solid $gray-300;
+    border: 1px solid gray('300');
     margin-top: 10px;
   }
 }
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index b4be463..c385740 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -59,6 +59,6 @@
   left: 10px;
   top: 12px;
   z-index: 4;
-  stroke: $gray-400;
+  stroke: gray('400');
 }
 </style>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 05b9669..2fbbd6c 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -79,7 +79,7 @@
 
 .toolbar-content {
   height: $toolbar-height;
-  background-color: $primary;
+  background-color: theme-color('primary');
   color: $white;
   position: absolute;
   left: 0;
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index bb89f25..8dd741c 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -32,7 +32,11 @@
 
 .login-container {
   @include media-breakpoint-up(md) {
-    background: linear-gradient(to right, $light 50%, $container-bgd 50%);
+    background: linear-gradient(
+      to right,
+      theme-color('light') 50%,
+      gray('200') 50%
+    );
   }
 }
 
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 5dd71ee..d3a1940 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -106,7 +106,7 @@
 }
 
 .quicklinks {
-  background: $container-bgd;
+  background: gray('200');
   display: grid;
   grid-gap: 1rem;
   padding: 1rem;