<template>
  <div>
    <h1>颜色示例</h1>
    <div>
      说明：暗色主题下，文字颜色和背景演示对调了，更暗和更亮对调了。本项目组只允许使用定义的颜色值
    </div>
    <ul class="list">
      <li v-for="(value, key) in colors" :key="key">
        <h2>{{ value }} {{ key }}</h2>
        <div class="color" style="width: 5em">
          <div :style="{ backgroundColor: `var(--w-${key})` }"></div>
          <div>--w-{{ key }}</div>
        </div>
        <h3>更亮的颜色</h3>
        <ul>
          <li v-for="i in 6" :key="i" class="color">
            <div
              :style="{
                backgroundColor: `var(--w-${key}-light${
                  i > 1 ? '-' + (i - 1) : ''
                })`,
              }"
            ></div>
            <div>--w-{{ key }}-light{{ i > 1 ? "-" + (i - 1) : "" }}</div>
          </li>
        </ul>
        <h3>更暗的颜色</h3>
        <ul>
          <li v-for="i in 6" :key="i" class="color">
            <div
              :style="{
                backgroundColor: `var(--w-${key}-dark${
                  i > 1 ? '-' + (i - 1) : ''
                })`,
              }"
            ></div>
            <div>--w-{{ key }}-dark{{ i > 1 ? "-" + (i - 1) : "" }}</div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script setup>
const colors = {
  main: "主题颜色",
  text: "文字颜色",
  bg: "背景颜色",
  primary: "主要颜色",
  warn: "警告颜色",
  success: "成功颜色",
  info: "信息颜色",
  error: "错误颜色",
  danger: "危险颜色",
};
</script>

<style lang="scss" scoped>
h2 {
  margin-top: 2em;
}
h3 {
  margin-top: 1em;
}
ul {
  list-style: none;
  padding-left: 1em;

  ul {
    display: flex;
    flex-wrap: wrap;
    margin: 1em;
  }
}
.color {
  margin: 0.5em 0 0 0.5em;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  & > div:first-child {
    width: 5em;
    height: 3em;
    box-shadow: 0 0 .5em 1px var(--w-text-light);
    border-radius: 0.3em;
  }
}
</style>