From d415d97af75dc6b77718103b3763f8d62460e147 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Wed, 27 Nov 2019 17:26:29 -0600
Subject: 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
---
 src/assets/styles/_colors.scss      | 109 ++++++++++++++++++++++++++++++++++++
 src/assets/styles/_functions.scss   |  33 +++++++++++
 src/assets/styles/_obmc-custom.scss |  71 +++++++++++++++++++----
 3 files changed, 202 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/styles/_colors.scss
 create mode 100644 src/assets/styles/_functions.scss

(limited to 'src')

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";
-- 
cgit v1.2.3