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: 'blue-500',
30          hex: '#2d60e5'
31        }
32      ]
33    };
34  }
35};
36</script>
37
38<style lang="scss">
39  @import "./colors.scss";
40</style>
41