feat(plugin): add input w3cx11 color

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 };

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;

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";

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;

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"

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]);
+  });
 });