<template>
  <div>
    <span class="font-bold">colors</span>
    <ul class="mb-4">
      <li
        v-for="(v, k, idx) in colors"
        :key="idx"
        class="flex flex-1 justify-between border-b p-2"
      >
        <span class="key">(bg-,text-){{ k }}</span
        ><span class="value">{{ v }}</span>
      </li>
    </ul>
    <ul>
      <li v-for="(v, k, idx) in typography" :key="idx" class="mb-4">
        <span class="font-bold">{{ k }}</span>
        <ul>
          <li
            v-for="(cv, ck, cidx) in v"
            :key="cidx"
            class="flex flex-1 justify-between border-b p-2"
          >
            <span class="key">{{ ck }}</span
            ><span class="value">{{ cv }}</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import colors from '../../colors/colorVars'
// import typography from "../../typography/typoVars"
export default {
  name: 'SuiVariables',
  data() {
    return {
      colors,
      // typography
    }
  },
}
</script>

<style lang="scss" scoped></style>
