0.5.3

v0.5.3

compare changes

🚀 特性

• 颜色解析工具修改为按需使用 (23244b4)

❤️ 贡献者

• Whitekite (@Colourlessglow)

0.5.2

v0.5.2

compare changes

🩹 修复

• 修复 generate 方法重载时类型声明错误 (ecca661)

❤️ 贡献者

• Whitekite (@Colourlessglow)

0.5.1

v0.5.1

compare changes

🚀 特性

• generate 方法增加类型推导，在使用 list 参数时，精确的返回string[] 类型，反之返回 string 类型 (8fed1fe)

🏡 框架

• Update .gitignore (ddad79b)

❤️ 贡献者

• Whitekite (@Colourlessglow)

0.5.0

ArcoDesign Color

Fork from @arco-design/color

Committed to ESM first, in vite similar tools, you can skip dependency pre-bundling

ArcoDesign Color Utils.

For a given color, a gradient swatch containing ten colors is generated with an algorithm. This works for both light and dark modes.

Usage

npm i @vrx-arco/theme-colors

import { generate, getPresetColors } from '@vrx-arco/theme-colors';

console.log(generate('#123456'));

console.log(getPresetColors());
// {
//   red: {...},
//   orangered: {...},
//   orange: {...},
//   gold: {...},
//   yellow: {...},
//   lime: {...},
//   green: {...},
//   cyan: {...},
//   blue: {...},
//   arcoblue: {...},
//   purple: {...},
//   pinkpurple: {...},
//   magenta: {...},
//   gray: {...}
// }

API

generate(color: string, options: Object);

options.index {number | 1-10}

Index (starting from 1) of the gradient colors to be generated.

options.list {boolean}

Whether to generate color array containing the ten colors.

options.dark

Whether to generate colors for dark mode.

options.format {'hex' | 'rgb' | 'hsl'}

Color format.

getPresetColors {Function}

Contains 14 preset sets of colors.

• red
• orangered
• orange
• gold
• yellow
• lime
• green
• cyan
• blue
• arcoblue
• purple
• pinkpurple
• magenta
• gray

const { red } = getPresetColors();

console.log(red.light);
console.log(red.dark);
console.log(red.primary);

getRgbStr(color: string)

For a given color, get the r, g, b value in string

getRgbStr('#F53F3F') // 245,63,63

⚠️FAQ

The generated color palette is different from @arco-design/color

• In order to achieve pure ESM, the color parsing tool is replaced by @ctrl/tinycolor used in ant-design and element. There are slight differences in precision in color calculation, and slight differences in the actual generated colors, but the difference is not big in actual display.
• In subsequent versions, the color package used by the original project @arco-design/color may be rewritten to keep the returned data consistent

---

ArcoDesign Color

Fork from @arco-design/color

致力于 ESM 优先，在 vite 类似工具中，可以跳过依赖预构建

ArcoDesign Color Utils.

根据给定颜色通过算法生成指定包含十个颜色的梯度色板，也可生成暗色模式下包含十个颜色的色板。

Usage

npm i @vrx-arco/theme-colors

import { generate, presetColor } from '@vrx-arco/theme-colors';

console.log(generate('#123456'));

console.log(presetColor);
// {
//   red: {...},
//   orangered: {...},
//   orange: {...},
//   gold: {...},
//   yellow: {...},
//   lime: {...},
//   green: {...},
//   cyan: {...},
//   blue: {...},
//   arcoblue: {...},
//   purple: {...},
//   pinkpurple: {...},
//   magenta: {...},
//   gray: {...}
// }

API

generate(color: string, options: Object);

options.index {number | 1-10}

生成 10 个梯度色中的第几个颜色。

options.list {boolean}

生成包含十个颜色的梯度颜色数组。

options.dark

生成暗色色板的颜色。

options.format {'hex' | 'rgb' | 'hsl'}

生成颜色的格式。

getPresetColors {Function}

包含了预设的 14 组颜色，包括一组中性灰。

• red
• orangered
• orange
• gold
• yellow
• lime
• green
• cyan
• blue
• arcoblue
• purple
• pinkpurple
• magenta
• gray

const { red } = getPresetColors();

console.log(red.light);
console.log(red.dark);
console.log(red.primary);

getRgbStr(color: string)

获得指定颜色的三通道 r, g, b 字符串。

getRgbStr('#F53F3F') // 245,63,63

⚠️常见问题

生成的色板与@arco-design/color存在差异

• 为了达到纯 ESM 的目的，颜色解析工具替换为在 ant-design 与 element 中使用的 @ctrl/tinycolor。颜色计算中精度存在细微差别,实际生成的颜色存在细微差别，但在实际显示中相差不大。
• 在后续版本中，为了保持返回数据一致，可能会将原项目@arco-design/color使用的 color 包进行改写