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/docs/.vuepress/components/colors/all.vue b/docs/.vuepress/components/colors/all.vue
new file mode 100644
index 0000000..a2817d6
--- /dev/null
+++ b/docs/.vuepress/components/colors/all.vue
@@ -0,0 +1,56 @@
+<template>
+ <div>
+ <div class="color-tile-container">
+ <div v-for="item in baseColors">
+ <div
+ :style="{ backgroundColor: item.hex }"
+ :class="{ 'color-tile--border': item.border }"
+ class="color-tile"
+ ></div>
+ <dl class="color-tile-desc">
+ <dt>Variable:</dt>
+ <dd>${{ item.name }}</dd>
+ </dl>
+ <dl class="color-tile-desc">
+ <dt>Color Variable:</dt>
+ <dd>{{ item.variable }}</dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ baseColors: [
+ {
+ name: 'blue',
+ variable: '$blue-500',
+ hex: '#2d60e5'
+ },
+ {
+ name: 'green',
+ variable: '$green-500',
+ hex: '#0a7d06'
+ },
+ {
+ name: 'red',
+ variable: '$red-500',
+ hex: '#da1416'
+ },
+ {
+ name: 'yellow',
+ variable: '$yellow-500',
+ hex: '#efc100'
+ }
+ ]
+ };
+ }
+};
+</script>
+
+<style lang="scss">
+ @import "./colors.scss";
+</style>
diff --git a/docs/.vuepress/components/colors/blues.vue b/docs/.vuepress/components/colors/blues.vue
new file mode 100644
index 0000000..54fd8b9
--- /dev/null
+++ b/docs/.vuepress/components/colors/blues.vue
@@ -0,0 +1,44 @@
+<template>
+ <div>
+ <div class="color-tile-container">
+ <div v-for="color in colors">
+ <div
+ :style="{ backgroundColor: color.hex }"
+ :class="{ 'color-tile--border': color.border }"
+ class="color-tile"
+ ></div>
+ <dl class="color-tile-desc">
+ <dt>Color variable:</dt>
+ <dd>${{ color.variable }}</dd>
+ </dl>
+ <dl class="color-tile-desc">
+ <dt>Hex:</dt>
+ <dd>{{ color.hex }}</dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ colors: [
+ {
+ variable: 'blue-100',
+ hex: '#eff2fb',
+ },
+ {
+ variable: 'blue-500',
+ hex: '#2d60e5'
+ }
+ ]
+ };
+ }
+};
+</script>
+
+<style lang="scss">
+ @import "./colors.scss";
+</style>
diff --git a/docs/.vuepress/components/colors/colors.scss b/docs/.vuepress/components/colors/colors.scss
new file mode 100644
index 0000000..8da2023
--- /dev/null
+++ b/docs/.vuepress/components/colors/colors.scss
@@ -0,0 +1,29 @@
+.color-tile-container {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ margin: 1rem 0;
+ }
+
+ .color-tile {
+ display: block;
+ height: 140px;
+
+ &--border {
+ border: 1px dashed #ccc;
+ }
+ }
+
+ .color-tile-desc {
+ margin: 0.5rem 0;
+ }
+
+ .color-tile-desc dt {
+ display: inline;
+ font-weight: bold;
+ }
+
+ .color-tile-desc dd {
+ display: inline;
+ margin: 0;
+ }
\ No newline at end of file
diff --git a/docs/.vuepress/components/colors/grays.vue b/docs/.vuepress/components/colors/grays.vue
new file mode 100644
index 0000000..555399c
--- /dev/null
+++ b/docs/.vuepress/components/colors/grays.vue
@@ -0,0 +1,73 @@
+<template>
+ <div>
+ <div class="color-tile-container">
+ <div v-for="color in colors">
+ <div
+ :style="{ backgroundColor: color.hex }"
+ :class="{ 'color-tile--border': color.border }"
+ class="color-tile"
+ ></div>
+ <dl class="color-tile-desc">
+ <dt>Color variable:</dt>
+ <dd>${{ color.variable }}</dd>
+ </dl>
+ <dl class="color-tile-desc">
+ <dt>Hex:</dt>
+ <dd>{{ color.hex }}</dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ colors: [
+ {
+ variable: 'gray-100',
+ hex: '#fafafa',
+ border: true
+ },
+ {
+ variable: 'gray-200',
+ hex: '#f4f4f4'
+ },
+ {
+ variable: 'gray-300',
+ hex: '#dcdee0'
+ },
+ {
+ variable: 'gray-400',
+ hex: '#cccccc'
+ },
+ {
+ variable: 'gray-500',
+ hex: '#b3b3b3'
+ },
+ {
+ variable: 'gray-600',
+ hex: '#999999'
+ },
+ {
+ variable: 'gray-700',
+ hex: '#666666'
+ },
+ {
+ variable: 'gray-800',
+ hex: '#333333'
+ },
+ {
+ variable: 'gray-900',
+ hex: '#161616'
+ }
+ ]
+ };
+ }
+};
+</script>
+
+<style lang="scss">
+ @import "./colors.scss";
+</style>
diff --git a/docs/.vuepress/components/colors/greens.vue b/docs/.vuepress/components/colors/greens.vue
new file mode 100644
index 0000000..fbb55f7
--- /dev/null
+++ b/docs/.vuepress/components/colors/greens.vue
@@ -0,0 +1,44 @@
+<template>
+ <div>
+ <div class="color-tile-container">
+ <div v-for="color in colors">
+ <div
+ :style="{ backgroundColor: color.hex }"
+ :class="{ 'color-tile--border': color.border }"
+ class="color-tile"
+ ></div>
+ <dl class="color-tile-desc">
+ <dt>Color variable:</dt>
+ <dd>${{ color.variable }}</dd>
+ </dl>
+ <dl class="color-tile-desc">
+ <dt>Hex:</dt>
+ <dd>{{ color.hex }}</dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ colors: [
+ {
+ variable: 'green-100',
+ hex: '#ecfdf1',
+ },
+ {
+ variable: 'green-500',
+ hex: '#0a7d06'
+ }
+ ]
+ };
+ }
+};
+</script>
+
+<style lang="scss">
+ @import "./colors.scss";
+</style>
diff --git a/docs/.vuepress/components/colors/reds.vue b/docs/.vuepress/components/colors/reds.vue
new file mode 100644
index 0000000..4f78f12
--- /dev/null
+++ b/docs/.vuepress/components/colors/reds.vue
@@ -0,0 +1,44 @@
+<template>
+ <div>
+ <div class="color-tile-container">
+ <div v-for="color in colors">
+ <div
+ :style="{ backgroundColor: color.hex }"
+ :class="{ 'color-tile--border': color.border }"
+ class="color-tile"
+ ></div>
+ <dl class="color-tile-desc">
+ <dt>Color variable:</dt>
+ <dd>${{ color.variable }}</dd>
+ </dl>
+ <dl class="color-tile-desc">
+ <dt>Hex:</dt>
+ <dd>{{ color.hex }}</dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ colors: [
+ {
+ variable: 'red-100',
+ hex: '#feeeed',
+ },
+ {
+ variable: 'red-500',
+ hex: '#da1416'
+ }
+ ]
+ };
+ }
+};
+</script>
+
+<style lang="scss">
+ @import "./colors.scss";
+</style>
diff --git a/docs/.vuepress/components/colors/theme.vue b/docs/.vuepress/components/colors/theme.vue
new file mode 100644
index 0000000..6a9d551
--- /dev/null
+++ b/docs/.vuepress/components/colors/theme.vue
@@ -0,0 +1,77 @@
+<template>
+ <div>
+ <div class="color-tile-container">
+ <div v-for="item in themeColors">
+ <div
+ :style="{ backgroundColor: item.hex }"
+ :class="{ 'color-tile--border': item.border }"
+ class="color-tile"
+ ></div>
+ <dl class="color-tile-desc">
+ <dt>Color variable:</dt>
+ <dd>${{ item.name }}</dd>
+ </dl>
+ <dl class="color-tile-desc">
+ <dt>Color variable:</dt>
+ <dd>${{ item.variable }}</dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ themeColors: [
+ {
+ name: "primary",
+ variable: "blue",
+ hex: "#2d60e5"
+ },
+ {
+ name: "secondary",
+ variable: "gray-800",
+ hex: "#333333"
+ },
+ {
+ name: 'light',
+ variable: 'gray-100',
+ hex: '#fafafa',
+ border: true
+ },
+ {
+ name: 'dark',
+ variable: 'gray-900',
+ hex: '#161616'
+ },
+ {
+ name: 'info',
+ variable: 'blue',
+ hex: '#2d60e5'
+ },
+ {
+ name: 'success',
+ variable: 'green',
+ hex: '#0a7d06'
+ },
+ {
+ name: 'warning',
+ variable: 'yellow',
+ hex: '#efc100'
+ },
+ {
+ name: 'danger',
+ variable: 'red',
+ hex: '#da1416'
+ }
+ ]
+ };
+ }
+};
+</script>
+
+<style lang="scss">
+ @import "./colors.scss";
+</style>
diff --git a/docs/.vuepress/components/colors/yellows.vue b/docs/.vuepress/components/colors/yellows.vue
new file mode 100644
index 0000000..7db04a1
--- /dev/null
+++ b/docs/.vuepress/components/colors/yellows.vue
@@ -0,0 +1,44 @@
+<template>
+ <div>
+ <div class="color-tile-container">
+ <div v-for="color in colors">
+ <div
+ :style="{ backgroundColor: color.hex }"
+ :class="{ 'color-tile--border': color.border }"
+ class="color-tile"
+ ></div>
+ <dl class="color-tile-desc">
+ <dt>Color variable:</dt>
+ <dd>${{ color.variable }}</dd>
+ </dl>
+ <dl class="color-tile-desc">
+ <dt>Hex:</dt>
+ <dd>{{ color.hex }}</dd>
+ </dl>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ colors: [
+ {
+ variable: 'yellow-100',
+ hex: '#fff8e4',
+ },
+ {
+ variable: 'yellow-500',
+ hex: '#efc100'
+ }
+ ]
+ };
+ }
+};
+</script>
+
+<<style lang="scss">
+ @import "./colors.scss";
+</style>
diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md
index 7baf37b..b4e6d6c 100644
--- a/docs/guide/guidelines/colors.md
+++ b/docs/guide/guidelines/colors.md
@@ -1 +1,37 @@
-# Colors
\ No newline at end of file
+# Colors
+This color palette has been agreed upon by the OpenBMC community and differs from the Bootstrap color patterns. The OpenBMC palette includes custom hex values, along with additional blue, green, red, and yellow color variables used as accent colors for components. The `.scss` component files use these accent colors to override default styles set by the Bootstrap library.
+
+- [Learn more about downstream customization](/themes/)
+- [Open an issue in the OpenBMC webui-vue repo](https://github.com/openbmc/webui-vue/issues/new) to request a change
+- [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)
+
+## Grays
+<colors-grays/>
+
+## Blues
+<colors-blues/>
+
+## Greens
+<colors-greens/>
+
+## Reds
+<colors-reds/>
+
+## Yellows
+<colors-yellows/>
+
+## All Colors
+`All Colors` is the term Bootstrap uses to describe the colors that make up the `colors` map. These colors and the Grays color variables define the `theme-colors` map colors.
+
+[Learn more about the Bootstrap color maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors).
+<colors-all/>
+
+## Theme Colors
+The theme colors are keys in the `theme-colors` map. Bootstrap-Vue has a variant prop that accepts any of the `theme-colors` keys to set the theme of a component.
+
+[Learn more about the Bootstrap theme-colors maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors).
+
+<colors-theme/>
+
+
+
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;