Update Sass architecture to require helper imports

- Restructuring file strucure to support single file components use of
Sass variables when imported into vuepress.
- Creating a scalable file structure using Sass best practices

Tested by building and testing both the vue web ui and the
the documentation application.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Iddcefbf305c8dac978ee24e903df33b609e395e3

36 files changed, 96 insertions, 58 deletions

diff --git a/src/assets/styles/_helpers.scss b/src/assets/styles/_helpers.scss
new file mode 100644
index 00000000..f01c00b7
--- /dev/null
+++ b/src/assets/styles/_helpers.scss
@@ -0,0 +1,3 @@
+// Import required for all single file components that use Sass variables
+@import "./bmc/helpers";
+@import "./vendor/bootstrap/helpers";
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 7e43e62b..f443799f 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,51 +1,20 @@
-@import "./variables";
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-@import "./motion";
+// BMC Helpers must be imported before Boostrap helpers to
+// take advantage of Bootstrap's use of the Sass !default
+// statement. Moving this helper after results in Boostrap
+// variables taking precedence over BMC's
+@import "./bmc/helpers";
+@import "./vendor/bootstrap/helpers";
 
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/code";
-@import "~bootstrap/scss/custom-forms";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/print";
+// BMC Base files must folow Bootstrap base files
+// to assure BMC base styles override Boostrap base files
+@import "./vendor/bootstrap/base";
+@import "./bmc/base";
 
-@import "~bootstrap-vue/src/index.scss";
+// Conmponents and Utilities from the third-party
+// libraries follow base files
+@import "./vendor/bootstrap/components";
+@import "./vendor/bootstrap/utils";
+@import "./vendor/bootstrap-vue/index";
 
-@import "./alerts";
-@import "./badge";
-@import "./bootstrap-grid";
-@import "./buttons";
-@import "./dropdown";
-@import "./form-components";
-@import "./modal";
-@import "./table";
-@import "./toast";
-@import "./typography";
\ No newline at end of file
+// Vendor overrides must be the last file imported
+@import "./vendor-overrides/bootstrap/index";
diff --git a/src/assets/styles/_typography.scss b/src/assets/styles/bmc/_base.scss
index 39a4aaa7..39a4aaa7 100644
--- a/src/assets/styles/_typography.scss
+++ b/src/assets/styles/bmc/_base.scss
diff --git a/src/assets/styles/bmc/_helpers.scss b/src/assets/styles/bmc/_helpers.scss
new file mode 100644
index 00000000..bec209be
--- /dev/null
+++ b/src/assets/styles/bmc/_helpers.scss
@@ -0,0 +1,3 @@
+@import "./helpers/colors";
+@import "./helpers/variables";
+@import "./helpers/motion";
\ No newline at end of file
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index 28bfe890..28bfe890 100644
--- a/src/assets/styles/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
diff --git a/src/assets/styles/_motion.scss b/src/assets/styles/bmc/helpers/_motion.scss
index 55a3eed9..55a3eed9 100644
--- a/src/assets/styles/_motion.scss
+++ b/src/assets/styles/bmc/helpers/_motion.scss
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index f59cfc1c..f59cfc1c 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/vendor-overrides/bootstrap/_alert.scss
index 0b7b518a..0b7b518a 100644
--- a/src/assets/styles/_alerts.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_alert.scss
diff --git a/src/assets/styles/_badge.scss b/src/assets/styles/vendor-overrides/bootstrap/_badge.scss
index 68e7482f..68e7482f 100644
--- a/src/assets/styles/_badge.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_badge.scss
diff --git a/src/assets/styles/_bootstrap-grid.scss b/src/assets/styles/vendor-overrides/bootstrap/_bootstrap-grid.scss
index 7ad7c81b..7ad7c81b 100644
--- a/src/assets/styles/_bootstrap-grid.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_bootstrap-grid.scss
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/vendor-overrides/bootstrap/_buttons.scss
index b9b8073b..b9b8073b 100644
--- a/src/assets/styles/_buttons.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_buttons.scss
diff --git a/src/assets/styles/_dropdown.scss b/src/assets/styles/vendor-overrides/bootstrap/_dropdown.scss
index 0eb310f6..0eb310f6 100644
--- a/src/assets/styles/_dropdown.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_dropdown.scss
diff --git a/src/assets/styles/_form-components.scss b/src/assets/styles/vendor-overrides/bootstrap/_forms.scss
index 8d3ed9e4..8d3ed9e4 100644
--- a/src/assets/styles/_form-components.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_forms.scss
diff --git a/src/assets/styles/vendor-overrides/bootstrap/_index.scss b/src/assets/styles/vendor-overrides/bootstrap/_index.scss
new file mode 100644
index 00000000..d7634db9
--- /dev/null
+++ b/src/assets/styles/vendor-overrides/bootstrap/_index.scss
@@ -0,0 +1,11 @@
+// OpenBMC Global Style Overrides of out of the box
+// Bootstrap styles
+@import "./alert";
+@import "./badge";
+@import "./bootstrap-grid";
+@import "./buttons";
+@import "./dropdown";
+@import "./forms";
+@import "./modal";
+@import "./tables";
+@import "./toasts";
\ No newline at end of file
diff --git a/src/assets/styles/_modal.scss b/src/assets/styles/vendor-overrides/bootstrap/_modal.scss
index 5d3b6014..5d3b6014 100644
--- a/src/assets/styles/_modal.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_modal.scss
diff --git a/src/assets/styles/_table.scss b/src/assets/styles/vendor-overrides/bootstrap/_tables.scss
index 2372d257..2372d257 100644
--- a/src/assets/styles/_table.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_tables.scss
diff --git a/src/assets/styles/_toast.scss b/src/assets/styles/vendor-overrides/bootstrap/_toasts.scss
index 9295b17e..9295b17e 100644
--- a/src/assets/styles/_toast.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_toasts.scss
diff --git a/src/assets/styles/vendor/bootstrap-vue/_index.scss b/src/assets/styles/vendor/bootstrap-vue/_index.scss
new file mode 100644
index 00000000..c10e1f05
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap-vue/_index.scss
@@ -0,0 +1 @@
+@import "~bootstrap-vue/src/index";
diff --git a/src/assets/styles/vendor/bootstrap/_base.scss b/src/assets/styles/vendor/bootstrap/_base.scss
new file mode 100644
index 00000000..1af03449
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap/_base.scss
@@ -0,0 +1,4 @@
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/type";
\ No newline at end of file
diff --git a/src/assets/styles/vendor/bootstrap/_components.scss b/src/assets/styles/vendor/bootstrap/_components.scss
new file mode 100644
index 00000000..8341cdc1
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap/_components.scss
@@ -0,0 +1,26 @@
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/tooltip";
\ No newline at end of file
diff --git a/src/assets/styles/vendor/bootstrap/_helpers.scss b/src/assets/styles/vendor/bootstrap/_helpers.scss
new file mode 100644
index 00000000..1055578b
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap/_helpers.scss
@@ -0,0 +1,3 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
\ No newline at end of file
diff --git a/src/assets/styles/vendor/bootstrap/_utils.scss b/src/assets/styles/vendor/bootstrap/_utils.scss
new file mode 100644
index 00000000..f0b5c44a
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap/_utils.scss
@@ -0,0 +1,2 @@
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
\ No newline at end of file
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index d937293d..2ad208fc 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -141,6 +141,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 .link-skip-nav {
   position: absolute;
   top: -60px;
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 2f56c28f..7a8389fb 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -142,6 +142,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import 'src/assets/styles/helpers';
+
 svg {
   fill: currentColor;
   height: 1.2rem;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index 8396bd5b..91bf346f 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -11,6 +11,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 main {
   width: 100%;
   height: 100%;
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index dcd85e61..58119986 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -18,6 +18,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 .page-section {
   margin-bottom: $spacer * 2;
 }
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index 17c08849..c4a97754 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -23,6 +23,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 .page-title {
   margin-bottom: $spacer * 2;
 }
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 11143212..655d57b0 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -30,6 +30,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 .status-icon {
   vertical-align: text-bottom;
   &.success {
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index d466d4e0..8d264fb4 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -84,6 +84,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 p {
   font-size: 1.2rem;
 }
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 331f0076..b49b3154 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -67,6 +67,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 $toolbar-height: 46px;
 
 .toolbar-container {
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 8edc338d..6950e338 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -54,6 +54,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 .app-container {
   display: grid;
   grid-template-columns: 100%;
diff --git a/src/views/Control/ServerPowerOperations/BootSettings.vue b/src/views/Control/ServerPowerOperations/BootSettings.vue
index c912749f..0558a1b4 100644
--- a/src/views/Control/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Control/ServerPowerOperations/BootSettings.vue
@@ -142,7 +142,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 .boot-settings {
-  background-color: $gray-200;
+  background-color: gray('200');
 }
 </style>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index c15e5f53..d373be22 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -145,6 +145,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 .login-container {
   @include media-breakpoint-up(md) {
     background: linear-gradient(to right, $light 50%, $container-bgd 50%);
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index bf8e2132..9ddf49d1 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -126,6 +126,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
 .quicklinks-section {
   margin-bottom: $spacer * 2;
   margin-left: $spacer * -1;
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 3a0b9cfe..da56b5d1 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -80,6 +80,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 dd,
 dl {
   margin: 0;
diff --git a/vue.config.js b/vue.config.js
index 882944fa..c681f470 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,15 +1,6 @@
 const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = {
-  css: {
-    loaderOptions: {
-      scss: {
-        prependData: `
-          @import "@/assets/styles/_obmc-custom.scss";
-        `
-      }
-    }
-  },
   devServer: {
     https: true,
     proxy: {