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: '#f4f4f4', 31 border: true 32 }, 33 { 34 variable: 'gray-200', 35 hex: '#e6e6e6' 36 }, 37 { 38 variable: 'gray-300', 39 hex: '#d8d8d8' 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: '#3f3f3f' 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