xref: /openbmc/webui-vue/docs/.vuepress/components/colors/all.vue (revision 7f970a1f20aac99dfadad94a18f5b725f9a65063) 
1<template>
2  <div>
3    <div class="color-tile-container">
4      <div v-for="item in baseColors">
5        <div
6          :style="{ backgroundColor: item.hex }"
7          :class="{ 'color-tile--border': item.border }"
8          class="color-tile"
9        ></div>
10        <dl class="color-tile-desc">
11          <dt>Variable:</dt>
12          <dd>${{ item.name }}</dd>
13        </dl>
14        <dl class="color-tile-desc">
15          <dt>Color Variable:</dt>
16          <dd>{{ item.variable }}</dd>
17        </dl>
18      </div>
19    </div>
20  </div>
21</template>
22
23<script>
24export default {
25  data() {
26    return {
27      baseColors: [
28      {
29          name: 'blue',
30          variable: '$blue-500',
31          hex: '#2d60e5'
32        },
33        {
34          name: 'green',
35          variable: '$green-500',
36          hex: '#0a7d06'
37        },
38        {
39          name: 'red',
40          variable: '$red-500',
41          hex: '#da1416'
42        },
43        {
44          name: 'yellow',
45          variable: '$yellow-500',
46          hex: '#efc100'
47        }
48      ]
49    };
50  }
51};
52</script>
53
54<style lang="scss">
55  @import "./colors.scss";
56</style>
57