3 files changed, 202 insertions, 11 deletions
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
new file mode 100644
index 00000000..04351231
--- /dev/null
+++ b/src/assets/styles/_colors.scss
@@ -0,0 +1,109 @@
+// Custom Color system
+$white: #fff;
+$gray-100: #fafbfc; // gray-10
+$gray-200: #f0f2f5; // gray-20
+$gray-300: #dcdee0; // gray-30
+$gray-400: #cccccc; // gray-40
+$gray-600: #999999; // gray-60
+$gray-700: #495057; // gray-70
+$gray-800: #666666; // gray-80
+$gray-900: #333333; // gray-100
+$black: #000;
+
+$blue-10: #eff2fb;
+$blue-20: #ccd7f4;
+$blue-30: #7295f1;
+$blue-40: #2d60e5;
+$blue-50: #1d3458;
+$blue-100: #1b2834;
+$blues: (
+  "100": $blue-10,
+  "200": $blue-20,
+  "300": $blue-30,
+  "400": $blue-40,
+  "500": $blue-50,
+  "900": $blue-100
+);
+
+// Accent colors
+$teal-20: #ccf0f5;
+$teal-50: #00b6cb;
+$teal-70: #098292;
+$teals: (
+  "200": $teal-20,
+  "500": $teal-50,
+  "700": $teal-70
+);
+
+$green-50: #0a7d06;
+$green-20: #c6e8c5;
+$green-10: #ecfdf1;
+$greens: (
+  "100": $green-10,
+  "200": $green-20,
+  "500": $green-50
+);
+
+$yellow-70: #db7c00;
+$yellow-50: #fedf39;
+$yellow-20: #fff8e4;
+$yellow-10: #fff8e4;
+$yellows: (
+  "100": $yellow-10,
+  "200": $yellow-20,
+  "500": $yellow-50,
+  "700": $yellow-70
+);
+
+$red-10: #fce9e9;
+$red-20: #fad3d3;
+$red-50: #da1416;
+$reds: (
+  "100": $red-10,
+  "200": $red-20,
+  "500": $red-50
+);
+
+$blue: $blue-40;
+$red: $red-50;
+$yellow: $yellow-50;
+$green: $green-50;
+$teal: $teal-50;
+$gray: $gray-400;
+
+// 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,
+  "red": $red,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "white": $white,
+  "gray": $gray
+);
+
+$primary: $blue;
+$secondary: $gray-600;
+$success: $green;
+$info: $teal;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: $gray-800;
+
+// 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,
+  "primary-dark": $blue-100,
+  "primary-light": $blue-10,
+  "secondary": $secondary,
+  "secondary-dark": $gray-800,
+  "secondary-light": $gray-200,
+  "danger": $danger,
+  "warning": $warning,
+  "info": $info
+);
diff --git a/src/assets/styles/_functions.scss b/src/assets/styles/_functions.scss
new file mode 100644
index 00000000..8652a8b0
--- /dev/null
+++ b/src/assets/styles/_functions.scss
@@ -0,0 +1,33 @@
+// Functions for getting colors from custom maps
+// Bootstrap has a gray function and colors, but we have
+// added new theme colors and helper functions. Using
+// get-{color}($key: "100") because using the color name only
+// {color}(key: "100"} convention that bootstrap does caused
+// the compilation to fail for blue, red, and green.
+//
+// https://getbootstrap.com/docs/4.0/getting-started/theming/#functions
+
+// Blues
+@function get-blue($key: "100") {
+  @return map-get($blues, $key);
+}
+
+// Reds
+@function get-red($key: "100") {
+  @return map-get($reds, $key);
+}
+
+// Greens
+@function get-green($key: "100") {
+  @return map-get($greens, $key);
+}
+
+// Yellows
+@function get-yellow($key: "100") {
+  @return map-get($yellows, $key);
+}
+
+// Teals
+@function get-teal($key: "200") {
+  @return map-get($teals, $key);
+}
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index b128c0f1..45dec1f8 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,15 +1,64 @@
-// Custom Bootstrap variable overrides
-
-// Major Breakpoints
+// Major breakpoints using 16px base em * 16
+// xs: 0, sm: 768px, md: 1024px, lg: 1376px, xl: 1600px
+// Using em's will allow for changes if base font size is updated
+// to accommodate for responsive text. Using 0 as xs due to
+// Bootstrap requirements.
 $grid-breakpoints: (
   xs: 0,
-  sm: 480px,
-  md: 640px,
-  lg: 992px,
-  xl: 1300px
+  sm: 48em,
+  md: 64em,
+  lg: 86em,
+  xl: 100em
 );
-// $enable-rounded: false;
 
-// Include any custom overrides above
-@import "bootstrap/scss/bootstrap.scss";
-@import "bootstrap-vue/src/index.scss";
+// Required
+@import "~bootstrap/scss/functions";
+@import "./functions";
+@import "./colors";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+// Removing colors we do not have maps for or need for
+// the OpenBMC theme. There are some that are required by
+// Bootstrap keys that cannot be removed from theme colors
+// are primary, success, and danger.
+// https://getbootstrap.com/docs/4.0/getting-started/theming/#required-keys
+$grays: map-remove($grays, "500");
+$colors: map-remove($colors, "indigo", "purple", "pink", "orange", "cyan");
+$colors: map-remove($theme-colors, "light", "dark");
+
+// Optional
+@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";
+
+@import "~bootstrap-vue/src/index.scss";