1<template>
2  <div>
3    <div class="color-tile-container">
4      <div v-for="color in colors">
5        <div
6          :style="{ backgroundColor: color.hex }"
7          :class="{ 'color-tile--border': color.border }"
8          class="color-tile"
9        ></div>
10        <dl class="color-tile-desc">
11          <dt>Color variable:</dt>
12          <dd>${{ color.variable }}</dd>
13        </dl>
14        <dl class="color-tile-desc">
15          <dt>Hex:</dt>
16          <dd>{{ color.hex }}</dd>
17        </dl>
18      </div>
19    </div>
20  </div>
21</template>
22
23<script>
24export default {
25  data() {
26    return {
27      colors: [
28        {
29          variable: 'gray-100',
30          hex: '#fafafa',
31          border: true
32        },
33        {
34          variable: 'gray-200',
35          hex: '#f4f4f4'
36        },
37        {
38          variable: 'gray-300',
39          hex: '#dcdee0'
40        },
41        {
42          variable: 'gray-400',
43          hex: '#cccccc'
44        },
45        {
46          variable: 'gray-500',
47          hex: '#b3b3b3'
48        },
49        {
50          variable: 'gray-600',
51          hex: '#999999'
52        },
53        {
54          variable: 'gray-700',
55          hex: '#666666'
56        },
57        {
58          variable: 'gray-800',
59          hex: '#333333'
60        },
61        {
62          variable: 'gray-900',
63          hex: '#161616'
64        }
65      ]
66    };
67  }
68};
69</script>
70
71<style lang="scss">
72  @import "./colors.scss";
73</style>
74