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

1 files changed, 74 insertions, 0 deletions

diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
new file mode 100644
index 00000000..28bfe890
--- /dev/null
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -0,0 +1,74 @@
+// SASS Color Variables
+$black: #000;
+$white: #fff;
+
+$blue-100: #eff2fb;
+$blue-500: #2d60e5;
+
+$green-100: #ecfdf1;
+$green-500: #0a7d06;
+
+$red-100: #feeeed;
+$red-500: #da1416;
+
+$yellow-100: #fff8e4;
+$yellow-500: #efc100;
+
+$gray-100: #fafafa;
+$gray-200: #f4f4f4;
+$gray-300: #dcdee0;
+$gray-400: #ccc;
+$gray-500: #b3b3b3;
+$gray-600: #999999;
+$gray-700: #666666;
+$gray-800: #333333;
+$gray-900: #161616;
+
+// SASS Base Color Variables
+$blue: $blue-500;
+$green: $green-500;
+$red: $red-500;
+$yellow: $yellow-500;
+
+// Bootstrap will generate CSS variables for
+// all of the colors in this map.
+// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
+$colors: (
+  "blue": $blue,
+  "green": $green,
+  "red": $red,
+  "yellow": $yellow,
+);
+
+// SASS Theme Color Variables
+// Can be used as variants
+$danger: $red;
+$dark: $gray-900;
+$info: $blue;
+$light: $gray-100;
+$primary: $blue;
+$secondary: $gray-800;
+$success: $green;
+$warning: $yellow;
+
+// Sass Color Variable Accents
+// Used for component styles and are
+// not available as variants
+$danger-light: $red-100;
+$info-light: $blue-100;
+$warning-light: $yellow-100;
+$success-light: $green-100;
+
+// Bootstrap will generate CSS variables for
+// all of the colors in this map.
+// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "dark": $dark,
+  "light": $light,
+  "danger": $danger,
+  "info": $info,
+  "success": $success,
+  "warning": $warning
+);