3 files changed, 100 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
+);
diff --git a/src/assets/styles/bmc/helpers/_motion.scss b/src/assets/styles/bmc/helpers/_motion.scss
new file mode 100644
index 00000000..55a3eed9
--- /dev/null
+++ b/src/assets/styles/bmc/helpers/_motion.scss
@@ -0,0 +1,14 @@
+$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
+$duration--fast-02: 110ms; //Micro-interactions such as fade
+$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
+$duration--moderate-02: 240ms; //Expansion, system communication, toast
+$duration--slow-01: 400ms; //Large expansion, important system notifications
+$duration--slow-02: 700ms; //Background dimming
+
+// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing
+$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
+$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
+$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
+$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
+$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
+$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
+\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
new file mode 100644
index 00000000..f59cfc1c
--- /dev/null
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -0,0 +1,12 @@
+@import "./colors";
+
+// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss
+$enable-rounded: false;
+$enable-validation-icons: false;
+
+// 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