From 849413860cc3a8cbbfa7b137e6c485611cacb24a Mon Sep 17 00:00:00 2001 From: wzc520pyfm <1528857653@qq.com> Date: Wed, 27 Mar 2024 22:21:34 +0800 Subject: [PATCH] feat(plugin): add input w3cx11 color --- src/index.ts | 14 ++- src/plugin/inputHex/index.ts | 14 ++- src/plugin/inputNamed/index.ts | 42 ++++++++ src/plugin/inputNamed/w3cx11.ts | 165 ++++++++++++++++++++++++++++++++ src/type.ts | 2 - test/index.test.ts | 8 ++ 6 files changed, 235 insertions(+), 10 deletions(-) create mode 100644 src/plugin/inputNamed/index.ts create mode 100644 src/plugin/inputNamed/w3cx11.ts diff --git a/src/index.ts b/src/index.ts index edbf2e9..1406d50 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,5 @@ import { inputHex } from "./plugin/inputHex"; +import { inputNamed } from "./plugin/inputNamed"; import type { Alpha, RGB_B, RGB_G, RGB_R, TColorRGBA } from "./type"; import U from "./utils"; @@ -35,7 +36,11 @@ const Utils = { w: wrapper, }; -const parseColor = (cfg: MyColorCfg): TColorRGBA => { +type MaybeColorCfg = MyColorCfg & { + color: unknown; +}; + +const parseColor = (cfg: MaybeColorCfg): InputColor => { const { color } = cfg; if ( Array.isArray(color) && @@ -59,10 +64,12 @@ const parseColor = (cfg: MyColorCfg): TColorRGBA => { return [0, 0, 0, 0]; // default }; +type InputColor = TColorRGBA; + interface Config {} interface MyColorCfg { - color: TColorRGBA; + color: InputColor; args: [...MyColorCfg["color"], Config]; } class MyColor { @@ -115,8 +122,9 @@ mycolor.extend = (plugin: MyColorPluginFn, option?: any) => { // Install built-in plugins mycolor.extend(inputHex); +mycolor.extend(inputNamed); export { mycolor, MyColor }; export default mycolor; -export type { MyColorCfg, MyColorPlugin }; +export type { MyColorCfg, InputColor, MyColorPlugin }; diff --git a/src/plugin/inputHex/index.ts b/src/plugin/inputHex/index.ts index d92b65a..0c8c3ef 100644 --- a/src/plugin/inputHex/index.ts +++ b/src/plugin/inputHex/index.ts @@ -1,16 +1,16 @@ -import type { MyColorCfg as OriginalColorCfg, MyColorPlugin } from "../.."; -import type { TColorRGBA } from "../../type"; +import type { MyColorCfg as OColorCfg, MyColorPlugin, InputColor as OInputColor } from "../.."; +type ColorHexString = string; // should recognize hexadecimal string, like #ff3399 and #F39 interface ColorCfg { - color: string; // hex color + color: ColorHexString; } -type MyColorCfg = OriginalColorCfg & ColorCfg; +type MyColorCfg = OColorCfg & ColorCfg; const RE_HEX = /^#?([\dA-Fa-f]{6}|[\dA-Fa-f]{3})$/; const RE_HEXA = /^#?([\dA-Fa-f]{8}|[\dA-Fa-f]{4})$/; -const parseColor = (cfg: MyColorCfg): TColorRGBA => { +const parseColor = (cfg: MyColorCfg): OInputColor => { const { color } = cfg; let _hex: string | string[] = color; @@ -74,4 +74,8 @@ export const inputHex: MyColorPlugin = (_, c) => { }; }; +type InputColor = OInputColor | ColorHexString + +export type { ColorHexString, MyColorCfg, InputColor } + export default inputHex; diff --git a/src/plugin/inputNamed/index.ts b/src/plugin/inputNamed/index.ts new file mode 100644 index 0000000..c0931ba --- /dev/null +++ b/src/plugin/inputNamed/index.ts @@ -0,0 +1,42 @@ +import type { MyColorPlugin } from "../.."; +import type { InputColor as OInputColor, MyColorCfg as OColorCfg } from "../inputHex"; +import { w3cx11, type W3CX11 } from "./w3cx11"; + +interface ColorCfg { + color: W3CX11; // hex color +} + +type MyColorCfg = OColorCfg & ColorCfg; + +const parseColor = (cfg: MyColorCfg): OInputColor => { + const { color } = cfg; + const namedColor = color.toLowerCase() as W3CX11; + + if (w3cx11[namedColor]) { return w3cx11[namedColor]; } + + // parse failed, return original color + return color; +}; + +/** + * Named color plugin, support w3cx11 color + * @note must be install after inputHex plugin + */ +export const inputNamed: MyColorPlugin = (_, c) => { + const proto = c.prototype; + + const oldParse = proto.parse; + proto.parse = function (cfg: MyColorCfg) { + const color = parseColor.bind(this)(cfg); + const newCfg = { ...cfg, color }; + oldParse.bind(this)(newCfg as OColorCfg); + }; +}; + +type InputColor = OInputColor | W3CX11 + +export type { MyColorCfg, InputColor } + +export default inputNamed; + +export { type W3CX11 } from "./w3cx11"; diff --git a/src/plugin/inputNamed/w3cx11.ts b/src/plugin/inputNamed/w3cx11.ts new file mode 100644 index 0000000..9cb7b17 --- /dev/null +++ b/src/plugin/inputNamed/w3cx11.ts @@ -0,0 +1,165 @@ +/** + * X11 color names + * http://www.w3.org/TR/css3-color/#svg-color + */ +export const w3cx11 = { + aliceblue: "#f0f8ff", + antiquewhite: "#faebd7", + aqua: "#00ffff", + aquamarine: "#7fffd4", + azure: "#f0ffff", + beige: "#f5f5dc", + bisque: "#ffe4c4", + black: "#000000", + blanchedalmond: "#ffebcd", + blue: "#0000ff", + blueviolet: "#8a2be2", + brown: "#a52a2a", + burlywood: "#deb887", + cadetblue: "#5f9ea0", + chartreuse: "#7fff00", + chocolate: "#d2691e", + coral: "#ff7f50", + cornflower: "#6495ed", + cornflowerblue: "#6495ed", + cornsilk: "#fff8dc", + crimson: "#dc143c", + cyan: "#00ffff", + darkblue: "#00008b", + darkcyan: "#008b8b", + darkgoldenrod: "#b8860b", + darkgray: "#a9a9a9", + darkgreen: "#006400", + darkgrey: "#a9a9a9", + darkkhaki: "#bdb76b", + darkmagenta: "#8b008b", + darkolivegreen: "#556b2f", + darkorange: "#ff8c00", + darkorchid: "#9932cc", + darkred: "#8b0000", + darksalmon: "#e9967a", + darkseagreen: "#8fbc8f", + darkslateblue: "#483d8b", + darkslategray: "#2f4f4f", + darkslategrey: "#2f4f4f", + darkturquoise: "#00ced1", + darkviolet: "#9400d3", + deeppink: "#ff1493", + deepskyblue: "#00bfff", + dimgray: "#696969", + dimgrey: "#696969", + dodgerblue: "#1e90ff", + firebrick: "#b22222", + floralwhite: "#fffaf0", + forestgreen: "#228b22", + fuchsia: "#ff00ff", + gainsboro: "#dcdcdc", + ghostwhite: "#f8f8ff", + gold: "#ffd700", + goldenrod: "#daa520", + gray: "#808080", + green: "#008000", + greenyellow: "#adff2f", + grey: "#808080", + honeydew: "#f0fff0", + hotpink: "#ff69b4", + indianred: "#cd5c5c", + indigo: "#4b0082", + ivory: "#fffff0", + khaki: "#f0e68c", + laserlemon: "#ffff54", + lavender: "#e6e6fa", + lavenderblush: "#fff0f5", + lawngreen: "#7cfc00", + lemonchiffon: "#fffacd", + lightblue: "#add8e6", + lightcoral: "#f08080", + lightcyan: "#e0ffff", + lightgoldenrod: "#fafad2", + lightgoldenrodyellow: "#fafad2", + lightgray: "#d3d3d3", + lightgreen: "#90ee90", + lightgrey: "#d3d3d3", + lightpink: "#ffb6c1", + lightsalmon: "#ffa07a", + lightseagreen: "#20b2aa", + lightskyblue: "#87cefa", + lightslategray: "#778899", + lightslategrey: "#778899", + lightsteelblue: "#b0c4de", + lightyellow: "#ffffe0", + lime: "#00ff00", + limegreen: "#32cd32", + linen: "#faf0e6", + magenta: "#ff00ff", + maroon: "#800000", + maroon2: "#7f0000", + maroon3: "#b03060", + mediumaquamarine: "#66cdaa", + mediumblue: "#0000cd", + mediumorchid: "#ba55d3", + mediumpurple: "#9370db", + mediumseagreen: "#3cb371", + mediumslateblue: "#7b68ee", + mediumspringgreen: "#00fa9a", + mediumturquoise: "#48d1cc", + mediumvioletred: "#c71585", + midnightblue: "#191970", + mintcream: "#f5fffa", + mistyrose: "#ffe4e1", + moccasin: "#ffe4b5", + navajowhite: "#ffdead", + navy: "#000080", + oldlace: "#fdf5e6", + olive: "#808000", + olivedrab: "#6b8e23", + orange: "#ffa500", + orangered: "#ff4500", + orchid: "#da70d6", + palegoldenrod: "#eee8aa", + palegreen: "#98fb98", + paleturquoise: "#afeeee", + palevioletred: "#db7093", + papayawhip: "#ffefd5", + peachpuff: "#ffdab9", + peru: "#cd853f", + pink: "#ffc0cb", + plum: "#dda0dd", + powderblue: "#b0e0e6", + purple: "#800080", + purple2: "#7f007f", + purple3: "#a020f0", + rebeccapurple: "#663399", + red: "#ff0000", + rosybrown: "#bc8f8f", + royalblue: "#4169e1", + saddlebrown: "#8b4513", + salmon: "#fa8072", + sandybrown: "#f4a460", + seagreen: "#2e8b57", + seashell: "#fff5ee", + sienna: "#a0522d", + silver: "#c0c0c0", + skyblue: "#87ceeb", + slateblue: "#6a5acd", + slategray: "#708090", + slategrey: "#708090", + snow: "#fffafa", + springgreen: "#00ff7f", + steelblue: "#4682b4", + tan: "#d2b48c", + teal: "#008080", + thistle: "#d8bfd8", + tomato: "#ff6347", + turquoise: "#40e0d0", + violet: "#ee82ee", + wheat: "#f5deb3", + white: "#ffffff", + whitesmoke: "#f5f5f5", + yellow: "#ffff00", + yellowgreen: "#9acd32", +} as const; + +export type W3CX11 = keyof typeof w3cx11; + +export default w3cx11; diff --git a/src/type.ts b/src/type.ts index 392a12b..f4100da 100644 --- a/src/type.ts +++ b/src/type.ts @@ -1,5 +1,3 @@ -// should recognize any named color from the W3CX11 specification and hexadecimal string, like #ff3399 and #F39 -export type ColorStr = "red" | "green" | "blue" | string; export type ColorHex = number; // should recognize hexadecimal numbers, only 0 ~ 16777215 export type ColorSpace = | "rgb" diff --git a/test/index.test.ts b/test/index.test.ts index 8d9cd7f..44d2c90 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -34,4 +34,12 @@ describe("mycolor", () => { expect(mycolor("ff3399").rgba()).toEqual([255, 51, 153, 1]); expect(mycolor("ff339966").rgba()).toEqual([255, 51, 153, 0.4]); }); + it("input w3cx11 color, should get a rgba array", () => { + expect(mycolor("pink").rgba()).toEqual([255, 192, 203, 1]); + expect(mycolor("orange").rgba()).toEqual([255, 165, 0, 1]); + expect(mycolor("yellow").rgba()).toEqual([255, 255, 0, 1]); + expect(mycolor("PINK").rgba()).toEqual([255, 192, 203, 1]); + expect(mycolor("ORANGE").rgba()).toEqual([255, 165, 0, 1]); + expect(mycolor("YELLOW").rgba()).toEqual([255, 255, 0, 1]); + }); });