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

9 files changed, 448 insertions, 1 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/>
+
+
+