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: 'green-100',
30          hex: '#ecfdf1',
31        },
32        {
33          variable: 'green-500',
34          hex: '#0a7d06'
35        }
36      ]
37    };
38  }
39};
40</script>
41
42<style lang="scss">
43  @import "./colors.scss";
44</style>
45