<script setup>
import { ElSpace, ElButton } from 'element-plus';
import "@/styles/main.css"
import { copyToClipboardThenTip } from '@/utils/systemUtils'

const colors = [
    { title: "黑色90% / 主标题文字颜色", name: "--text-primary-90-color" },
    { title: "黑色80% / 小标题文字颜色", name: "--text-primary-80-color" },
    { title: "黑色65% / 正文颜色", name: "--text-primary-65-color" },
    { title: "黑色50%", name: "--text-primary-50-color" },
    { title: "黑色10%", name: "--bg-black-10" },
    { title: "黑色5% / 分割线颜色", name: "--bg-black-5" },
    { title: "黑色2% / 灰色背景色", name: "--bg-black-2" },
    { title: "白色主色", name: "--bg-white-100" },
    { title: "主色", name: "--color-primary-100" },
]
function copyColorVar(item) {
    const color = `var(${item.name})`
    copyToClipboardThenTip(color)
}
</script>

<template>
    <el-space direction="vertical" alignment="flex-start">
        <div class="text-title-2">颜色</div>
        <el-space>
            <el-button v-for="(item, index) in colors" :key="index" :color="`var(${item.name})`"
                v-on:click="copyColorVar(item)">
                {{ item.title }}
            </el-button>
        </el-space>
    </el-space>
</template>

<style scoped></style>