From 7f970a1f20aac99dfadad94a18f5b725f9a65063 Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Mon, 2 Mar 2020 17:56:09 -0600 Subject: Remove unused colors from color palette The color palette has been stripped down to a maximum of two colors shades per palette. This works for our design since components use a base color with a lighter color as an accent color. This change reduces the amount of CSS generated by Bootstrap when the CSS is compiled. Github Story: https://github.com/openbmc/webui-vue/issues/2 Signed-off-by: Derick Montague Change-Id: I2ddb37f5c89c749a7303799c6f7499ddd83d5a92 --- src/assets/styles/_buttons.scss | 5 +- src/assets/styles/_colors.scss | 121 ++++++++----------------- src/assets/styles/_form-components.scss | 2 +- src/assets/styles/_functions.scss | 33 ------- src/assets/styles/_modal.scss | 2 +- src/assets/styles/_obmc-custom.scss | 1 - src/assets/styles/_table.scss | 2 +- src/components/AppHeader/AppHeader.vue | 6 +- src/components/AppNavigation/AppNavigation.vue | 10 +- src/components/Global/StatusIcon.vue | 6 +- src/main.js | 2 +- src/views/Login/Login.vue | 6 +- src/views/Overview/OverviewQuickLinks.vue | 2 +- 13 files changed, 61 insertions(+), 137 deletions(-) delete mode 100644 src/assets/styles/_functions.scss (limited to 'src') diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss index 02b0caea..2f961e00 100644 --- a/src/assets/styles/_buttons.scss +++ b/src/assets/styles/_buttons.scss @@ -7,12 +7,11 @@ } .btn-primary { - fill: $white; + fill: currentColor; } .btn-secondary { - fill: $white; - @extend .btn-secondary-dark; + fill: currentColor; } .btn-link { diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss index e27984bc..28bfe890 100644 --- a/src/assets/styles/_colors.scss +++ b/src/assets/styles/_colors.scss @@ -1,115 +1,74 @@ -// Custom Color system +// 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: #cccccc; -$gray-500: #B3B3B3; +$gray-400: #ccc; +$gray-500: #b3b3b3; $gray-600: #999999; $gray-700: #666666; $gray-800: #333333; $gray-900: #161616; -$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; +// 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, - "green": $green, - "teal": $teal, - "white": $white, - "gray": $gray ); +// SASS Theme Color Variables +// Can be used as variants +$danger: $red; +$dark: $gray-900; +$info: $blue; +$light: $gray-100; $primary: $blue; -$secondary: $gray-600; -$secondary-dark: $gray-800; -$secondary-light: $gray-200; +$secondary: $gray-800; $success: $green; -$info: $teal; $warning: $yellow; -$danger: $red; -$light: $gray-100; -$dark: $gray-900; + +// 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, - "primary-dark": $blue-100, - "primary-light": $blue-10, "secondary": $secondary, - "secondary-dark": $secondary-dark, - "secondary-light": $secondary-light, + "dark": $dark, + "light": $light, "danger": $danger, - "warning": $warning, "info": $info, - "dark": $dark, - "light": $light + "success": $success, + "warning": $warning ); diff --git a/src/assets/styles/_form-components.scss b/src/assets/styles/_form-components.scss index 35274e70..d9ae9d40 100644 --- a/src/assets/styles/_form-components.scss +++ b/src/assets/styles/_form-components.scss @@ -17,7 +17,7 @@ .custom-control-label, .form-control { //important needed to override validation colors on radio labels - color: $gray-900 !important; + color: $dark !important; font-size: 16px; border-color: $gray-400 !important; &.is-invalid, diff --git a/src/assets/styles/_functions.scss b/src/assets/styles/_functions.scss deleted file mode 100644 index 8652a8b0..00000000 --- a/src/assets/styles/_functions.scss +++ /dev/null @@ -1,33 +0,0 @@ -// 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/_modal.scss b/src/assets/styles/_modal.scss index b20327e7..5d3b6014 100644 --- a/src/assets/styles/_modal.scss +++ b/src/assets/styles/_modal.scss @@ -1,7 +1,7 @@ .modal-header { .close { font-weight: normal; - color: $gray-900; + color: $dark; opacity: 1; } } \ No newline at end of file diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 09240705..66cebda2 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -1,6 +1,5 @@ @import "./variables"; @import "~bootstrap/scss/functions"; -@import "./functions"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; @import "./motion"; diff --git a/src/assets/styles/_table.scss b/src/assets/styles/_table.scss index 069a37c3..528cb805 100644 --- a/src/assets/styles/_table.scss +++ b/src/assets/styles/_table.scss @@ -13,6 +13,6 @@ table { .thead-light.thead-light { th { border: none; - color: $gray-900; + color: $dark; } } \ No newline at end of file diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index aa8d9f8b..08c82565 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -157,7 +157,7 @@ export default { } .nav-trigger { - fill: $white; + fill: $light; width: $header-height; height: $header-height; transition: none; @@ -167,8 +167,8 @@ export default { } &:hover { - fill: $white; - background-color: $gray-900; + fill: $light; + background-color: $dark; } @include media-breakpoint-up($responsive-layout-bp) { diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 173a6259..48b94c3d 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -195,16 +195,16 @@ svg { font-weight: $headings-font-weight; padding-left: $spacer; // defining consistent padding for links and buttons padding-right: $spacer; - color: $secondary-dark; + color: $secondary; &:hover { background-color: $primary-nav-hover; - color: $secondary-dark; + color: $dark; } &:focus { box-shadow: $btn-focus-box-shadow; - color: $secondary-dark; + color: $dark; } } @@ -212,8 +212,8 @@ svg { .nav-link--current:hover, .nav-link--current:focus { font-weight: $headings-font-weight; - background-color: $secondary-dark; - color: $secondary-light; + background-color: $secondary; + color: $light; cursor: default; &::before { diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index d59eaec2..96074ee6 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -39,7 +39,11 @@ export default { fill: $danger; } &.secondary { - fill: $secondary; + fill: $gray-600; + + svg { + transform: rotate(-45deg); + } } &.warning { fill: $warning; diff --git a/src/main.js b/src/main.js index 84adb408..ab1f2967 100644 --- a/src/main.js +++ b/src/main.js @@ -55,7 +55,7 @@ Vue.use(AlertPlugin); Vue.use(BadgePlugin); Vue.use(ButtonPlugin); Vue.use(BVConfigPlugin, { - BFormText: { textVariant: 'black' }, + BFormText: { textVariant: 'secondary' }, BTable: { headVariant: 'light', footVariant: 'light' diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index bed58dc6..2018720c 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -142,11 +142,7 @@ export default {