1*7f970a1fSDerick Montague<template> 2*7f970a1fSDerick Montague <div> 3*7f970a1fSDerick Montague <div class="color-tile-container"> 4*7f970a1fSDerick Montague <div v-for="color in colors"> 5*7f970a1fSDerick Montague <div 6*7f970a1fSDerick Montague :style="{ backgroundColor: color.hex }" 7*7f970a1fSDerick Montague :class="{ 'color-tile--border': color.border }" 8*7f970a1fSDerick Montague class="color-tile" 9*7f970a1fSDerick Montague ></div> 10*7f970a1fSDerick Montague <dl class="color-tile-desc"> 11*7f970a1fSDerick Montague <dt>Color variable:</dt> 12*7f970a1fSDerick Montague <dd>${{ color.variable }}</dd> 13*7f970a1fSDerick Montague </dl> 14*7f970a1fSDerick Montague <dl class="color-tile-desc"> 15*7f970a1fSDerick Montague <dt>Hex:</dt> 16*7f970a1fSDerick Montague <dd>{{ color.hex }}</dd> 17*7f970a1fSDerick Montague </dl> 18*7f970a1fSDerick Montague </div> 19*7f970a1fSDerick Montague </div> 20*7f970a1fSDerick Montague </div> 21*7f970a1fSDerick Montague</template> 22*7f970a1fSDerick Montague 23*7f970a1fSDerick Montague<script> 24*7f970a1fSDerick Montagueexport default { 25*7f970a1fSDerick Montague data() { 26*7f970a1fSDerick Montague return { 27*7f970a1fSDerick Montague colors: [ 28*7f970a1fSDerick Montague { 29*7f970a1fSDerick Montague variable: 'blue-500', 30*7f970a1fSDerick Montague hex: '#2d60e5' 31*7f970a1fSDerick Montague } 32*7f970a1fSDerick Montague ] 33*7f970a1fSDerick Montague }; 34*7f970a1fSDerick Montague } 35*7f970a1fSDerick Montague}; 36*7f970a1fSDerick Montague</script> 37*7f970a1fSDerick Montague 38*7f970a1fSDerick Montague<style lang="scss"> 39*7f970a1fSDerick Montague @import "./colors.scss"; 40*7f970a1fSDerick Montague</style> 41