<template>
  <div>
    <h3>Background colors</h3>
    <div class="grid grid-cols-4 gap-8">
    <div v-for="(v,k,i) of colors" :key="`color-${i}`" class="colorBox"  :class="`bg-${k}`" >
      <div class="flex flex-col text-xs">
        <div>bg-{{k}}</div>
        <div>border-{{k}}</div>
        <div>text-{{k}}</div>
      </div>
    </div>
  </div>
  <h3>Text colors</h3>
  <div v-for="(v,k,i) of colors"  :key="`text-${i}`" class="textColor"  :class="`text-${k}`">
    <label class="text-xs font-bold text-accent">text-{{k}}</label>
    <p :class="`text-${k}`">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident dolore, odio voluptate quaerat expedita harum porro error numquam eaque laborum nobis doloribus molestiae eos ex illum tempora officiis. Consequuntur, rerum!</p>
  </div>
  </div>
</template>

<script>
  import colors from "../../colors/colorVars"
  export default {
    data() {
      return {
        colors
      }
    }
  }
</script>

<style lang="postcss" scoped>
.colorBox {
  aspect-ratio: 1/1;
  @apply  flex items-center justify-center rounded-lg border;
}
.textColor{
  @apply py-4;
}
</style>
