From 7f970a1f20aac99dfadad94a18f5b725f9a65063 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
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 <derick.montague@ibm.com>
Change-Id: I2ddb37f5c89c749a7303799c6f7499ddd83d5a92
---
 docs/.vuepress/components/colors/all.vue     | 56 ++++++++++++++++++++
 docs/.vuepress/components/colors/blues.vue   | 44 ++++++++++++++++
 docs/.vuepress/components/colors/colors.scss | 29 +++++++++++
 docs/.vuepress/components/colors/grays.vue   | 73 ++++++++++++++++++++++++++
 docs/.vuepress/components/colors/greens.vue  | 44 ++++++++++++++++
 docs/.vuepress/components/colors/reds.vue    | 44 ++++++++++++++++
 docs/.vuepress/components/colors/theme.vue   | 77 ++++++++++++++++++++++++++++
 docs/.vuepress/components/colors/yellows.vue | 44 ++++++++++++++++
 8 files changed, 411 insertions(+)
 create mode 100644 docs/.vuepress/components/colors/all.vue
 create mode 100644 docs/.vuepress/components/colors/blues.vue
 create mode 100644 docs/.vuepress/components/colors/colors.scss
 create mode 100644 docs/.vuepress/components/colors/grays.vue
 create mode 100644 docs/.vuepress/components/colors/greens.vue
 create mode 100644 docs/.vuepress/components/colors/reds.vue
 create mode 100644 docs/.vuepress/components/colors/theme.vue
 create mode 100644 docs/.vuepress/components/colors/yellows.vue

(limited to 'docs/.vuepress/components/colors')

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>
-- 
cgit v1.2.3