1<template> 2 <div> 3 <div class="color-tile-container"> 4 <div v-for="item in themeColors"> 5 <div 6 :style="{ backgroundColor: item.hex }" 7 :class="{ 'color-tile--border': item.border }" 8 class="color-tile" 9 ></div> 10 <dl class="color-tile-desc"> 11 <dt>Color variable:</dt> 12 <dd>${{ item.name }}</dd> 13 </dl> 14 <dl class="color-tile-desc"> 15 <dt>Color variable:</dt> 16 <dd>${{ item.variable }}</dd> 17 </dl> 18 </div> 19 </div> 20 </div> 21</template> 22 23<script> 24export default { 25 data() { 26 return { 27 themeColors: [ 28 { 29 name: "primary", 30 variable: "blue", 31 hex: "#2d60e5" 32 }, 33 { 34 name: "secondary", 35 variable: "gray-800", 36 hex: "#3f3f3f" 37 }, 38 { 39 name: 'light', 40 variable: 'gray-100', 41 hex: '#f4f4f4', 42 border: true 43 }, 44 { 45 name: 'dark', 46 variable: 'gray-900', 47 hex: '#161616' 48 }, 49 { 50 name: 'info', 51 variable: 'blue', 52 hex: '#2d60e5' 53 }, 54 { 55 name: 'success', 56 variable: 'green', 57 hex: '#0a7d06' 58 }, 59 { 60 name: 'warning', 61 variable: 'yellow', 62 hex: '#efc100' 63 }, 64 { 65 name: 'danger', 66 variable: 'red', 67 hex: '#da1416' 68 } 69 ] 70 }; 71 } 72}; 73</script> 74 75<style lang="scss"> 76 @import "./colors.scss"; 77</style> 78