diff options
Diffstat (limited to 'docs/.vuepress')
| -rw-r--r-- | docs/.vuepress/components/colors/all.vue | 56 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/blues.vue | 44 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/colors.scss | 29 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/grays.vue | 73 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/greens.vue | 44 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/reds.vue | 44 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/theme.vue | 77 | ||||
| -rw-r--r-- | docs/.vuepress/components/colors/yellows.vue | 44 |
8 files changed, 411 insertions, 0 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> |