diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-03-03 02:56:09 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-10 22:50:53 +0300 |
commit | 7f970a1f20aac99dfadad94a18f5b725f9a65063 (patch) | |
tree | 319b6441aaaf6d8521cbf3fe35ce6c94d32878ee /docs/.vuepress/components/colors/theme.vue | |
parent | c05ff648da07d8e2221d67eac83b6c6581d371a0 (diff) | |
download | webui-vue-7f970a1f20aac99dfadad94a18f5b725f9a65063.tar.xz |
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
Diffstat (limited to 'docs/.vuepress/components/colors/theme.vue')
-rw-r--r-- | docs/.vuepress/components/colors/theme.vue | 77 |
1 files changed, 77 insertions, 0 deletions
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> |