Add custom color theme

This is the first step and will evolve as we start building out more
the site and using the components. It is likely that we will change the
colors and theme-color maps as we create the OpenBMC styleguide.

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

1 files changed, 33 insertions, 0 deletions

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);
+}