1<template>
2  <div>
3    <div class="color-tile-container">
4      <div v-for="item in themeColors">
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>Color 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      themeColors: [
28        {
29          name: "primary",
30          variable: "blue",
31          hex: "#2d60e5"
32        },
33        {
34          name: "secondary",
35          variable: "gray-800",
36          hex: "#333333"
37        },
38        {
39          name: 'light',
40          variable: 'gray-100',
41          hex: '#fafafa',
42          border: true
43        },
44        {
45          name: 'dark',
46          variable: 'gray-900',
47          hex: '#161616'
48        },
49        {
50          name: 'info',
51          variable: 'blue',
52          hex: '#2d60e5'
53        },
54        {
55          name: 'success',
56          variable: 'green',
57          hex: '#0a7d06'
58        },
59        {
60          name: 'warning',
61          variable: 'yellow',
62          hex: '#efc100'
63        },
64        {
65          name: 'danger',
66          variable: 'red',
67          hex: '#da1416'
68        }
69      ]
70    };
71  }
72};
73</script>
74
75<style lang="scss">
76  @import "./colors.scss";
77</style>
78