这个项目是一个用于构建主题配色的工具
项目中的色彩混合算法参考了 dart-sass's mixColor 算法
主题色的计算公式为:
mix('#FFF', primary, i * 10) // i from 0 to 9
次要颜色的计算公式为:
mix('#FFF', color, '0') // secondary color
mix('#FFF', color, '80%') // secondary light color
mix('#FFF', color, '90%') // secondary lighter color
yarn add @element-plus/colors
npm install @element-plus/colors
import { generateColors } from '@element-plus/colors'
const { primary, success, warning, danger, error, info } = generateColors('#409eff')
// or
// const { primary, success, warning, danger, error, info } = generateColors({ primary: '#409eff' })
console.log(primary)
// [
// 'rgba(64, 158, 255, 1)',
// 'rgba(83, 168, 255, 1)',
// 'rgba(102, 177, 255, 1)',
// 'rgba(121, 187, 255, 1)',
// 'rgba(140, 197, 255, 1)',
// 'rgba(160, 207, 255, 1)',
// 'rgba(179, 216, 255, 1)',
// 'rgba(198, 226, 255, 1)',
// 'rgba(217, 236, 255, 1)',
// 'rgba(236, 245, 255, 1)'
// ]
console.log(success)
// [
// 'rgba(103, 194, 58, 1)',
// 'rgba(225, 243, 216, 1)',
// 'rgba(240, 249, 235, 1)'
// ]
console.log(warning)
// [
// 'rgba(230, 162, 60, 1)',
// 'rgba(250, 236, 216, 1)',
// 'rgba(253, 246, 236, 1)'
// ]
console.log(danger)
// [
// 'rgba(245, 108, 108, 1)',
// 'rgba(253, 226, 226, 1)',
// 'rgba(254, 240, 240, 1)'
// ]
console.log(error)
// [
// 'rgba(245, 108, 108, 1)',
// 'rgba(253, 226, 226, 1)',
// 'rgba(254, 240, 240, 1)'
// ]
console.log(info)
// [
// 'rgba(144, 147, 153, 1)',
// 'rgba(233, 233, 235, 1)',
// 'rgba(244, 244, 245, 1)'
// ]
我们提供了一些预设的配色方案,你可以通过presetPalettes
或者 paletteName
导入它们,所有的paletteName
都会在下方列出
import { presetPalettes } from '@element-plus/colors'
// or
import { chalk } from '@element-plus/colors'
console.log(presetPalettes)
// {
// chalk: {
// primary: [...]
// success: [...]
// warning: [...]
// danger: [...]
// error: [...]
// info: [...]
// }
// }
console.log(chalk)
// {
// primary: [...]
// success: [...]
// warning: [...]
// danger: [...]
// error: [...]
// info: [...]
// }
chalk是element-plus默认的配色方案
{
"primary": "#409EFF",
"success": "#67C23A",
"warning": "#E6A23C",
"danger": "#F56C6C",
"error": "#F56C6C",
"info": "#909399"
}
options可以是一个字符串或者对象,如果options是一个字符串那么将会被视为主题色。
如果options是一个对象,请参考以下的配置项:
// 任何非法的色彩值将会被默认颜色覆盖
interface ColorOptions {
primary?: string
success?: string
warning?: string
// 如果只提供了error和danger它们其中一个,那么将会自动覆盖给缺失的那一个
danger?: string
error: string[]
info?: string
}
如果未提供一个合法的options,那么函数将会返回默认的配色方案(也就是chalk)
interface OutputColors {
primary: string[]
success: string[]
warning: string[]
danger: string[]
error: string[]
info: string[]
}
yarn dev
同时显示覆盖率
yarn dev:coverage