diff options
author | Derick Montague <derick.montague@ibm.com> | 2019-11-28 02:26:29 +0300 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2020-01-21 21:32:58 +0300 |
commit | d415d97af75dc6b77718103b3763f8d62460e147 (patch) | |
tree | a118ff1226cfbd667fac7c5fa2b6aeaf027c9e8e /src/assets/styles/_colors.scss | |
parent | 42c1989301a81ebaa4733f403fcdc6c0a5368f11 (diff) | |
download | webui-vue-d415d97af75dc6b77718103b3763f8d62460e147.tar.xz |
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
Diffstat (limited to 'src/assets/styles/_colors.scss')
-rw-r--r-- | src/assets/styles/_colors.scss | 109 |
1 files changed, 109 insertions, 0 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 +); |