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

22 files changed, 509 insertions, 138 deletions

diff --git a/docs/.vuepress/components/colors/all.vue b/docs/.vuepress/components/colors/all.vue
new file mode 100644
index 00000000..a2817d63
--- /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 00000000..54fd8b93
--- /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 00000000..8da2023c
--- /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 00000000..555399c6
--- /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 00000000..fbb55f7a
--- /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 00000000..4f78f128
--- /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 00000000..6a9d551f
--- /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 00000000..7db04a1f
--- /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 7baf37b0..b4e6d6cc 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 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 {
 <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 32d5af46..9f3ba52e 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -83,7 +83,7 @@ dl {
 }
 
 .quicklinks {
-  background: $gray-200;
+  background: $container-bgd;
   display: grid;
   grid-gap: 1rem;
   padding: 1rem;