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 <derick.montague@ibm.com>
Change-Id: I2ddb37f5c89c749a7303799c6f7499ddd83d5a92
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
index 02b0cae..2f961e0 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 e27984b..28bfe89 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
);
-$primary: $blue;
-$secondary: $gray-600;
-$secondary-dark: $gray-800;
-$secondary-light: $gray-200;
-$success: $green;
-$info: $teal;
-$warning: $yellow;
+// SASS Theme Color Variables
+// Can be used as variants
$danger: $red;
-$light: $gray-100;
$dark: $gray-900;
+$info: $blue;
+$light: $gray-100;
+$primary: $blue;
+$secondary: $gray-800;
+$success: $green;
+$warning: $yellow;
+
+// 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,
- "danger": $danger,
- "warning": $warning,
- "info": $info,
"dark": $dark,
- "light": $light
+ "light": $light,
+ "danger": $danger,
+ "info": $info,
+ "success": $success,
+ "warning": $warning
);
diff --git a/src/assets/styles/_form-components.scss b/src/assets/styles/_form-components.scss
index 35274e7..d9ae9d4 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 8652a8b..0000000
--- 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 b20327e..5d3b601 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 0924070..66cebda 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 069a37c..528cb80 100644
--- a/src/assets/styles/_table.scss
+++ b/src/assets/styles/_table.scss
@@ -13,6 +13,6 @@
.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 aa8d9f8..08c8256 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -157,7 +157,7 @@
}
.nav-trigger {
- fill: $white;
+ fill: $light;
width: $header-height;
height: $header-height;
transition: none;
@@ -167,8 +167,8 @@
}
&: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 173a625..48b94c3 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -195,16 +195,16 @@
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 @@
.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 d59eaec..96074ee 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -39,7 +39,11 @@
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 84adb40..ab1f296 100644
--- a/src/main.js
+++ b/src/main.js
@@ -55,7 +55,7 @@
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 bed58dc..2018720 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -142,11 +142,7 @@
<style lang="scss" scoped>
.login-container {
@include media-breakpoint-up(md) {
- background: linear-gradient(
- to right,
- var(--light) 50%,
- var(--secondary-light) 50%
- );
+ background: linear-gradient(to right, $light 50%, $container-bgd 50%);
}
}
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 32d5af4..9f3ba52 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -83,7 +83,7 @@
}
.quicklinks {
- background: $gray-200;
+ background: $container-bgd;
display: grid;
grid-gap: 1rem;
padding: 1rem;