色彩主题
eda-element-ui 组件大量使用了 CSS 变量来控制样式，这使得主题定制更加灵活。
你可以通过覆盖这些 CSS 变量来修改按钮的默认样式。
使用示例
vue
<script setup lang="ts">
import YqButton from "eda-element-ui"; // 重命名为 YqElementButton 以避免命名冲突
</script>
<template>
<div>
<YqButton class="use_color">直接使用变量</YqButton>
</div>
</template>
<style scoped lang="scss">
.use_color {
background-color: var(--yq-color-primary-light-3);
}
</style>核心主题色 (Primary Themes)
| SCSS 变量名称 | 颜色值 (Hex) | 描述 | 可视化示意 |
|---|---|---|---|
--yq-color-primary | #409eff | 主要主题色，用于按钮、链接、激活状态等 |  |
--yq-color-success | #67c23a | 成功色，用于成功提示、积极操作等 |  |
--yq-color-warning | #e6a23c | 警告色，用于警告提示、潜在风险等 |  |
--yq-color-danger | #f56c6c | 危险色，用于错误提示、删除操作等 |  |
--yq-color-info | #909399 | 信息色，用于中性提示、非关键信息等 |  |
主色调的明暗变化 (Light & Dark Variations):
这些变量通常用于按钮的 hover、active 状态，或者提供更柔和的颜色选项。
--yq-color-primary-light-3to--yq-color-primary-light-9:--yq-color-primary-light-3(混合 white 30%)--yq-color-primary-light-5(混合 white 50%)--yq-color-primary-light-7(混合 white 70%)--yq-color-primary-light-8(混合 white 80%)--yq-color-primary-light-9(混合 white 90%)- 可视化： 颜色会逐渐变浅，接近白色。
--yq-color-primary-dark-2:--yq-color-primary-dark-2(混合 black 20%)- 可视化： 颜色会比主色调更深一些。
其他主题色 (
success,warning,danger,info) 也有类似的light-#和dark-2变量。
背景色 (Background Colors)
| SCSS 变量名称 | 颜色值 (Hex) | 描述 | 可视化示意 |
|---|---|---|---|
--yq-bg-color | #ffffff | 默认的白色背景，通常用于卡片、弹窗内层 |  |
--yq-bg-color-page | #f2f3f5 | 页面背景色，比白色稍灰，提供页面层级感 |  |
--yq-bg-color-overlay | #ffffff | 覆盖层背景色，可能与 --yq-bg-color 相同 | |
--yq-fill-color | #f0f2f5 | 填充色，用于输入框、容器等 |  |
--yq-fill-color-light | #f5f7fa | 浅填充色 |  |
--yq-fill-color-lighter | #fafafa | 更浅的填充色 |  |
--yq-fill-color-extra-light | #fafcff | 非常浅的填充色 |  |
--yq-fill-color-dark | #ebedf0 | 深填充色 |  |
--yq-fill-color-darker | #e6e8eb | 更深的填充色 |  |
--yq-fill-color-blank | #ffffff | 空白填充色，通常用于需要纯白背景的元素 | |
文本颜色 (Text Colors)
| SCSS 变量名称 | 颜色值 (Hex) | 描述 | 可视化示意 |
|---|---|---|---|
--yq-text-color-primary | #303133 | 主要文本颜色，最深 |  |
--yq-text-color-regular | #606266 | 常规文本颜色，中等深 |  |
--yq-text-color-secondary | #909399 | 次要文本颜色，较浅 |  |
--yq-text-color-placeholder | #a8abb2 | 输入框占位符文本颜色 |  |
--yq-text-color-disabled | #c0c4cc | 禁用状态下的文本颜色，最浅 |  |
边框颜色与样式 (Border Colors & Styles)
| SCSS 变量名称 | 颜色值 (Hex) | 描述 | 可视化示意 |
|---|---|---|---|
--yq-border-color | #dcdfe6 | 默认边框颜色 |  |
--yq-border-color-light | #e4e7ed | 较浅的边框颜色 |  |
--yq-border-color-lighter | #ebeef5 | 更浅的边框颜色 |  |
--yq-border-color-extra-light | #f2f6fc | 非常浅的边框颜色 |  |
--yq-border-color-dark | #d4d7de | 较深的边框颜色 |  |
--yq-border-color-darker | #cdd0d6 | 更深的边框颜色 |  |
--yq-border-color-hover | var(--yq-text-color-disabled) | hover 状态下边框颜色（引用文本禁用色） |  |
--yq-border | 1px solid var(--yq-border-color) | 复合边框样式 | - |
--yq-border-width | 1px | 边框宽度 | - |
--yq-border-style | solid | 边框样式 | - |
--yq-border-radius-base | 4px | 基础圆角 | - |
--yq-border-radius-small | 2px | 小圆角 | - |
--yq-border-radius-round | 20px | 圆角按钮的圆角 | - |
--yq-border-radius-circle | 100% | 圆形按钮的圆角 | - |
字体相关 (Font Related)
| SCSS 变量名称 | 值 | 描述 |
|---|---|---|
--yq-font-size-base | 14px | 基础字体大小 |
--yq-font-size-small | 13px | 小号字体大小 |
--yq-font-size-extra-small | 12px | 特小号字体大小 |
--yq-font-size-medium | 16px | 中号字体大小 |
--yq-font-size-large | 18px | 大号字体大小 |
--yq-font-size-extra-large | 20px | 特大号字体大小 |
--yq-font-family | ..." | 字体堆栈 |
--yq-font-weight-primary | 500 | 主要字体粗细（Semibold） |
禁用状态 (Disabled State)
| SCSS 变量名称 | 颜色值 (Hex) | 描述 | 可视化示意 |
|---|---|---|---|
--yq-disabled-bg-color | var(--yq-fill-color-light) | 禁用背景色 | (同 Fill Light Gray) |
--yq-disabled-text-color | var(--yq-text-color-placeholder) | 禁用文本颜色 | (同 Text Placeholder) |
--yq-disabled-border-color | var(--yq-border-color-light) | 禁用边框颜色 | (同 Border Light) |
动画相关 (Animation Related)
| SCSS 变量名称 | 值 | 描述 |
|---|---|---|
--yq-transition-duration | .3s | 默认过渡动画时长 |
--yq-transition-duration-fast | .2s | 快速过渡动画时长 |