@opentiny/vue-renderless 3.26.0 → 3.28.0

package/color-select-panel/index.js

@@ -1,5 +1,11 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import colors from "./utils/color-map";
 import { Color } from "./utils/color";
+import { createContext } from "./utils/context";
+import { ColorPoint } from "./utils/color-points";
 const panelRgb = (color, alpha) => {
   const { r, g, b } = color.toRgb();
   return alpha ? `rgba(${r},${g},${b},${color.get("alpha") / 100})` : `rgb(${r},${g},${b})`;
@@ -16,7 +22,147 @@ const triggerColorUpdate = (value, emit) => {
 const triggerConfirm = (value, emit) => {
   emit("confirm", value);
 };
-const initApi = (props, state, { emit, nextTick }) => {
+const parseCustomRGBA = (str, type) => {
+  if (!str || typeof str !== "string") {
+    return [0, 0, 0, 0];
+  }
+  let content = "";
+  let match = null;
+  if (type === "hsl") {
+    match = str.match(/hsla?\(([^)]+)\)/);
+  } else if (type === "rgb") {
+    match = str.match(/rgba?\(([^)]+)\)/);
+  } else if (type === "hsv") {
+    match = str.match(/hsva?\(([^)]+)\)/);
+  }
+  if (!match || !match[1]) {
+    return [0, 0, 0, 0];
+  }
+  content = match[1];
+  const parts = content.split(",").map((item) => item.trim());
+  const result = parts.map((item, index) => {
+    if (index === 0 || index === parts.length - 1 && parts.length === 4) {
+      return parseFloat(item);
+    }
+    return item;
+  });
+  return result;
+};
+const isGrandient = (val) => {
+  if (typeof val !== "string") {
+    return false;
+  }
+  return val.trim().startsWith("linear-gradient");
+};
+const sideCornerDegreeMap = {
+  top: 0,
+  right: 90,
+  bottom: 180,
+  left: 270,
+  "top left": 315,
+  "left top": 315,
+  "top right": 45,
+  "right top": 45,
+  "bottom left": 225,
+  "left bottom": 225,
+  "bottom right": 135,
+  "right bottom": 135
+};
+const createColorPoints = (val, props, hooks, ext, bar) => {
+  if (!isGrandient(val)) {
+    return { colorPoints: [], angular: 180 };
+  }
+  const nodes = ext.parse(val);
+  let angular = 180;
+  const parseAngular = (node2) => {
+    if (node2.type === "angular") {
+      return Number.parseInt(node2.value);
+    }
+    return sideCornerDegreeMap[node2.value] || 180;
+  };
+  const parseBehavior = {
+    hex: (node2) => {
+      return new ColorPoint(new Color({ value: `#${node2.value}`, format: "hex", enableAlpha: props.alpha }), 0);
+    },
+    rgb: (node2) => {
+      if (props.alpha) {
+        return parseBehavior.rgba(__spreadProps(__spreadValues({}, node2), { type: "rgba" }));
+      }
+      return new ColorPoint(new Color({ enableAlpha: false, format: "rgb", value: `rgb(${node2.value.join(",")})` }), 0);
+    },
+    rgba: (node2) => {
+      const color = new Color({ enableAlpha: props.alpha, format: "rgba", value: `rgba(${node2.value.join(",")})` });
+      return new ColorPoint(color, 0);
+    },
+    hsl: (node2) => {
+      if (props.alpha) {
+        return parseBehavior.hsla(__spreadProps(__spreadValues({}, node2), { type: "hsla" }));
+      }
+      const color = new Color({ enableAlpha: false, format: "hsl", value: `hsl(${node2.value.join(" ")})` });
+      return new ColorPoint(color, 0);
+    },
+    hsla: (node2) => {
+      const color = new Color({ enableAlpha: props.alpha, format: "hsl", value: `hsl(${node2.value.join(" ")})` });
+      return new ColorPoint(color, 0);
+    },
+    literal: (node2) => {
+      let value = colors[node2.value] || "#00000000";
+      const color = new Color({ enableAlpha: true, format: "hex", value });
+      return new ColorPoint(color, 0);
+    },
+    "var": (node2) => {
+      hooks.warn("unsupported var ref.");
+      return parseBehavior.hex({ type: "hex", value: "#000", length: node2.length });
+    }
+  };
+  const unsupportedLengthUnit = ["em", "calc"];
+  const parseLength = (node2) => {
+    if (!node2 || !bar) {
+      return 0;
+    }
+    if (unsupportedLengthUnit.includes(node2.type)) {
+      hooks.warn(`unsupported unit ${node2.type}`);
+      return 0;
+    }
+    const barRect = bar.getBoundingClientRect();
+    const { width } = barRect;
+    const numberValue = Number.parseFloat(node2.value);
+    if (node2.type === "%") {
+      return Number.parseInt(`${numberValue / 100 * width}`);
+    }
+    if (node2.type === "px") {
+      return Number.parseInt(`${numberValue / width}`);
+    }
+    return 0;
+  };
+  const parseColotStop = (colorStop) => {
+    if (!(colorStop.type in parseBehavior)) {
+      hooks.warn(`unknown behavior ${colorStop}`);
+      throw new Error(`unknown behavior ${colorStop}`);
+    }
+    const colorPoint = parseBehavior[colorStop.type](colorStop);
+    const cursorLeft = parseLength(colorStop.length);
+    colorPoint.cursorLeft = cursorLeft;
+    return colorPoint;
+  };
+  const [node] = nodes;
+  if (node.type !== "linear-gradient") {
+    hooks.warn(`Only support linear-gradient yet.`);
+    return { colorPoints: [], angular: 180 };
+  }
+  if (!node) {
+    return { colorPoints: [], angular: 180 };
+  }
+  if (node.orientation) {
+    angular = parseAngular(node.orientation);
+  } else {
+    angular = 180;
+  }
+  const colorPoints = node.colorStops.map((colorStop) => parseColotStop(colorStop));
+  return { colorPoints, angular };
+};
+const initApi = (props, state, utils, hooks, ext) => {
+  const { emit, nextTick } = utils;
   const setShowPicker = (value) => state.showPicker = value;
   const resetColor = () => {
     nextTick(() => {
@@ -31,6 +177,12 @@ const initApi = (props, state, { emit, nextTick }) => {
     });
   };
   const submitValue = () => {
+    if (state.ctx.colorMode === "linear-gradient") {
+      updateModelValue(state.ctx.linearGardientValue, emit);
+      triggerConfirm(state.ctx.linearGardientValue, emit);
+      setShowPicker(false);
+      return;
+    }
     const value = state.color.value;
     updateModelValue(value, emit);
     triggerConfirm(value, emit);
@@ -93,10 +245,32 @@ const initApi = (props, state, { emit, nextTick }) => {
     setShowPicker(false);
   };
   const onHistoryClick = (historyColor) => {
-    state.color.fromString(historyColor);
+    if (state.ctx.colorMode === "monochrome") {
+      state.ctx.activeColor.color.fromString(historyColor);
+      return;
+    }
+    const colorString = isGrandient(historyColor) ? historyColor : `linear-gradient(90deg, #fff 0%, ${historyColor} 100%)`;
+    const colorPoints = createColorPoints(colorString, props, hooks, ext, state.ctx.bar);
+    state.ctx.colorPoints = colorPoints.colorPoints;
+    const lastPoint = colorPoints.colorPoints.at(-1);
+    if (lastPoint) {
+      state.ctx.activeColor = lastPoint;
+    }
+    state.ctx.deg = colorPoints.angular;
   };
   const onPredefineColorClick = (predefineColor) => {
-    state.color.fromString(predefineColor);
+    if (state.ctx.colorMode === "monochrome") {
+      state.color.fromString(predefineColor);
+      return;
+    }
+    const colorString = isGrandient(predefineColor) ? predefineColor : `linear-gradient(180deg, #fff 0%, ${predefineColor} 100%)`;
+    const colorPoints = createColorPoints(colorString, props, hooks, ext, state.ctx.bar);
+    state.ctx.colorPoints = colorPoints.colorPoints;
+    const lastPoint = colorPoints.colorPoints.at(-1);
+    if (lastPoint) {
+      state.ctx.activeColor = lastPoint;
+    }
+    state.ctx.deg = colorPoints.angular;
   };
   return {
     open,
@@ -114,34 +288,9 @@ const initApi = (props, state, { emit, nextTick }) => {
     onClickOutside
   };
 };
-const parseCustomRGBA = (str, type) => {
-  if (!str || typeof str !== "string") {
-    return [0, 0, 0, 0];
-  }
-  let content = "";
-  let match = null;
-  if (type === "hsl") {
-    match = str.match(/hsla?\(([^)]+)\)/);
-  } else if (type === "rgb") {
-    match = str.match(/rgba?\(([^)]+)\)/);
-  } else if (type === "hsv") {
-    match = str.match(/hsva?\(([^)]+)\)/);
-  }
-  if (!match || !match[1]) {
-    return [0, 0, 0, 0];
-  }
-  content = match[1];
-  const parts = content.split(",").map((item) => item.trim());
-  const result = parts.map((item, index) => {
-    if (index === 0 || index === parts.length - 1 && parts.length === 4) {
-      return parseFloat(item);
-    }
-    return item;
-  });
-  return result;
-};
-const initState = (props, { reactive, ref, computed }) => {
+const initState = (props, hooks, utils, ext) => {
   var _a, _b;
+  const { reactive, ref, computed } = hooks;
   const stack = ref([...(_a = props.history) != null ? _a : []]);
   const predefineStack = computed(() => props.predefine);
   const hue = ref();
@@ -155,6 +304,33 @@ const initState = (props, { reactive, ref, computed }) => {
       value: props.modelValue
     })
   );
+  const bar = ref(null);
+  const ctx = {
+    colorMode: computed(() => {
+      var _a2;
+      return (_a2 = props.colorMode) != null ? _a2 : "monochrome";
+    }),
+    activeColor: ref(new ColorPoint(color, 0)),
+    colorPoints: ref([new ColorPoint(color, 0)]),
+    linearGardientValue: ref(""),
+    bar,
+    deg: ref(180)
+  };
+  if (isGrandient(props.modelValue)) {
+    hooks.watchEffect(() => {
+      if (!bar.value) {
+        return;
+      }
+      const { colorPoints, angular } = createColorPoints(props.modelValue, props, hooks, ext, bar.value);
+      ctx.deg.value = angular;
+      ctx.colorPoints.value = colorPoints;
+      const lastPoint = colorPoints.at(-1);
+      if (lastPoint) {
+        ctx.activeColor.value = lastPoint;
+      }
+    });
+  }
+  createContext(ctx, hooks);
   const input = ref("");
   const hexInput1 = ref();
   const hexInput2 = ref();
@@ -192,7 +368,10 @@ const initState = (props, { reactive, ref, computed }) => {
     enablePredefineColor: computed(() => props.enablePredefineColor),
     enableHistory: computed(() => props.enableHistory),
     currentFormat,
-    formats: props.format
+    formats: props.format,
+    ctx,
+    isLinearGradient: computed(() => ctx.colorMode.value === "linear-gradient"),
+    linearGradient: computed(() => ctx.linearGardientValue.value)
   });
   return state;
 };
@@ -230,14 +409,19 @@ const initWatch = (state, props, { nextTick, watch }, { emit }) => {
     }
   );
   watch(
-    () => state.currentColor,
+    () => [state.currentColor, state.linearGradient],
     () => {
-      state.input = state.currentColor;
-      const result = parseCustomRGBA(state.currentColor, state.currentFormat);
-      state.hexInput4 = Math.ceil(Number(result[0]));
-      state.hexInput5 = result[1];
-      state.hexInput6 = result[2];
-      state.hexInput7 = `${(Number(result[3]) || 1) * 100}%`;
+      if (state.isLinearGradient) {
+        state.input = state.linearGradient;
+        return;
+      } else {
+        state.input = state.currentColor;
+        const result = parseCustomRGBA(state.currentColor, state.currentFormat);
+        state.hexInput4 = Math.ceil(Number(result[0]));
+        state.hexInput5 = result[1];
+        state.hexInput6 = result[2];
+        state.hexInput7 = `${(Number(result[3]) || 1) * 100}%`;
+      }
       triggerColorUpdate(state.input, emit);
     },
     { flush: "sync" }

package/color-select-panel/linear-gradient/index.js

@@ -0,0 +1,131 @@
+import "../../chunk-G2ADBYYC.js";
+import { ColorPoint } from "../utils/color-points";
+import { getClientXY } from "../utils/getClientXY";
+import { Color } from "../utils/color";
+import { draggable } from "../utils/use-drag";
+import { isNullOrEmpty } from "@opentiny/utils";
+const LINEAR_GRADIENT_BAR = "linearGradientBar";
+const THUMB = "thumb";
+const useLinearGradient = (state, hooks, utils, context) => {
+  const { vm } = utils;
+  const { nextTick } = hooks;
+  const activePoint = context.activeColor;
+  const addPoint = (point) => {
+    context.colorPoints.value.push(point);
+  };
+  const getPos = (event) => {
+    if (!vm) {
+      return 0;
+    }
+    const el = vm.$refs[LINEAR_GRADIENT_BAR];
+    const rect = el.getBoundingClientRect();
+    const { clientX } = getClientXY(event);
+    return Math.min(Math.max(clientX - rect.left, 0), rect.width);
+  };
+  const onDrag = (event) => {
+    if (!vm) {
+      return 0;
+    }
+    activePoint.value.cursorLeft = getPos(event);
+  };
+  const getActivePoint = () => {
+    return activePoint;
+  };
+  const onClickBar = (event) => {
+    const active = getActivePoint();
+    const newPoint = new ColorPoint(
+      new Color({
+        enableAlpha: active.value.color.enableAlpha,
+        format: active.value.color.format,
+        value: active.value.color.value
+      }),
+      active.value.cursorLeft
+    );
+    const left = getPos(event);
+    newPoint.cursorLeft = left;
+    addPoint(newPoint);
+    setActivePoint(newPoint);
+    nextTick(() => {
+      const lastColorPointElement = vm.$refs[THUMB].at(-1);
+      if (!lastColorPointElement) {
+        return;
+      }
+      draggable(lastColorPointElement, {
+        drag(event2) {
+          onDrag(event2);
+        },
+        end(event2) {
+          onDrag(event2);
+        }
+      });
+    });
+  };
+  const setActivePoint = (point) => {
+    activePoint.value = point;
+  };
+  const onThumbMouseDown = (event, point) => {
+    setActivePoint(point);
+    const el = event.target;
+    draggable(el, {
+      drag(event2) {
+        onDrag(event2);
+      },
+      end(event2) {
+        onDrag(event2);
+      }
+    });
+  };
+  const getRelativePos = (points) => {
+    const bar = vm.$refs[LINEAR_GRADIENT_BAR];
+    if (!bar) {
+      return 0;
+    }
+    const rect = bar.getBoundingClientRect();
+    return Number.parseInt((points.cursorLeft / rect.width * 100).toFixed(0));
+  };
+  const toString = () => {
+    const colors = context.colorPoints.value.map((point) => {
+      return [point.color.value, getRelativePos(point)];
+    }).sort((a, b) => a[1] - b[1]).map(([colorValue, pos]) => {
+      return [colorValue, `${pos}%`].join(" ");
+    }).join(",");
+    return `linear-gradient(${context.deg.value}deg, ${colors})`;
+  };
+  hooks.watchEffect(() => {
+    if (isNullOrEmpty(context.deg.value)) {
+      return;
+    }
+    context.linearGardientValue.value = toString();
+    state.linearGradientBarBackground = toString().replace(`${context.deg.value}deg`, "90deg");
+  });
+  hooks.onMounted(() => {
+    const elements = vm.$refs[THUMB];
+    if (!elements || !elements.length) {
+      return;
+    }
+    elements.forEach((el) => {
+      draggable(el, {
+        drag(event) {
+          onDrag(event);
+        },
+        end(event) {
+          onDrag(event);
+        }
+      });
+    });
+    context.bar.value = vm.$refs[LINEAR_GRADIENT_BAR];
+  });
+  return { onClickBar, onThumbMouseDown, toString };
+};
+const initState = (hooks) => {
+  const { ref, reactive } = hooks;
+  const linearGradientBarBackground = ref("");
+  const state = reactive({ linearGradientBarBackground });
+  return state;
+};
+export {
+  LINEAR_GRADIENT_BAR,
+  THUMB,
+  initState,
+  useLinearGradient
+};

package/color-select-panel/linear-gradient/vue.js

@@ -0,0 +1,21 @@
+import "../../chunk-G2ADBYYC.js";
+import { useContext } from "../utils/context";
+import { initState, useLinearGradient } from ".";
+const api = ["context", "onClickBar", "onThumbMouseDown", "state"];
+const renderless = (_, hooks, utils) => {
+  const { reactive } = hooks;
+  const context = useContext(hooks);
+  const state = initState(hooks);
+  const { onClickBar, onThumbMouseDown } = useLinearGradient(state, hooks, utils, context);
+  const api2 = reactive({
+    state,
+    context,
+    onClickBar,
+    onThumbMouseDown
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/color-select-panel/sv-select/index.js

@@ -1,12 +1,15 @@
 import "../../chunk-G2ADBYYC.js";
 import { getClientXY } from "../utils/getClientXY";
-const initState = (props, { ref, computed, reactive }) => {
+import { useContext } from "../utils/context";
+const initState = (props, hooks) => {
+  const { ref, computed, reactive } = hooks;
+  const context = useContext(hooks);
   const cursorTop = ref(0);
   const cursorLeft = ref(0);
   const bg = ref("hsl(0, 100%, 50%)");
   const colorValue = computed(() => {
-    const hue = props.color.get("hue");
-    const value = props.color.get("value");
+    const hue = context.activeColor.value.color.get("hue");
+    const value = context.activeColor.value.color.get("value");
     return { hue, value };
   });
   const state = reactive({
@@ -17,21 +20,21 @@ const initState = (props, { ref, computed, reactive }) => {
   });
   return state;
 };
-const useUpdate = (state, props, wrapper) => {
+const useUpdate = (state, props, wrapper, context) => {
   return () => {
     const el = wrapper.value;
     if (!el) {
       return;
     }
-    const sat = props.color.get("sat");
-    const value = props.color.get("value");
+    const sat = context.activeColor.value.color.get("sat");
+    const value = context.activeColor.value.color.get("value");
     const { clientWidth: width, clientHeight: height } = el;
     state.cursorLeft = sat * width / 100;
     state.cursorTop = (100 - value) * height / 100;
-    state.bg = `hsl(${props.color.get("hue")}, 100%, 50%)`;
+    state.bg = `hsl(${context.activeColor.value.color.get("hue")}, 100%, 50%)`;
   };
 };
-const useDrag = (state, wrapper, props, { emit }) => {
+const useDrag = (state, wrapper, props, { emit }, context) => {
   return (event) => {
     const el = wrapper.value;
     const rect = el.getBoundingClientRect();
@@ -47,7 +50,7 @@ const useDrag = (state, wrapper, props, { emit }) => {
     const s = left / rect.width * 100;
     const v = 100 - top / rect.height * 100;
     emit("svUpdate", { s, v });
-    props.color.set({
+    context.activeColor.value.color.set({
       sat: s,
       value: v
     });

package/color-select-panel/sv-select/vue.js

@@ -1,14 +1,16 @@
 import "../../chunk-G2ADBYYC.js";
 import { draggable } from "../utils/use-drag";
 import { initState, initWatch, useDrag, useUpdate } from "./index";
+import { useContext } from "../utils/context";
 const api = ["state", "wrapper", "cursor"];
 const renderless = (props, hooks, utils) => {
+  const ctx = useContext(hooks);
   const state = initState(props, hooks);
   const { ref, onMounted } = hooks;
   const { emit } = utils;
   const wrapper = ref();
-  const update = useUpdate(state, props, wrapper);
-  const onDrag = useDrag(state, wrapper, props, utils);
+  const update = useUpdate(state, props, wrapper, ctx);
+  const onDrag = useDrag(state, wrapper, props, utils, ctx);
   initWatch(state, update, hooks);
   onMounted(() => {
     const drag = {

package/color-select-panel/utils/color-map.js

@@ -0,0 +1,154 @@
+import "../../chunk-G2ADBYYC.js";
+var color_map_default = {
+  "black": "#000000",
+  "silver": "#c0c0c0",
+  "gray": "#808080",
+  "white": "#ffffff",
+  "maroon": "#800000",
+  "red": "#ff0000",
+  "purple": "#800080",
+  "fuchsia": "#ff00ff",
+  "green": "#008000",
+  "lime": "#00ff00",
+  "olive": "#808000",
+  "yellow": "#ffff00",
+  "navy": "#000080",
+  "blue": "#0000ff",
+  "teal": "#008080",
+  "aqua": "#00ffff",
+  "aliceblue": "#f0f8ff",
+  "antiquewhite": "#faebd7",
+  "aquamarine": "#7fffd4",
+  "azure": "#f0ffff",
+  "beige": "#f5f5dc",
+  "bisque": "#ffe4c4",
+  "blanchedalmond": "#ffebcd",
+  "blueviolet": "#8a2be2",
+  "brown": "#a52a2a",
+  "burlywood": "#deb887",
+  "cadetblue": "#5f9ea0",
+  "chartreuse": "#7fff00",
+  "chocolate": "#d2691e",
+  "coral": "#ff7f50",
+  "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",
+  "gainsboro": "#dcdcdc",
+  "ghostwhite": "#f8f8ff",
+  "gold": "#ffd700",
+  "goldenrod": "#daa520",
+  "greenyellow": "#adff2f",
+  "grey": "#808080",
+  "honeydew": "#f0fff0",
+  "hotpink": "#ff69b4",
+  "indianred": "#cd5c5c",
+  "indigo": "#4b0082",
+  "ivory": "#fffff0",
+  "khaki": "#f0e68c",
+  "lavender": "#e6e6fa",
+  "lavenderblush": "#fff0f5",
+  "lawngreen": "#7cfc00",
+  "lemonchiffon": "#fffacd",
+  "lightblue": "#add8e6",
+  "lightcoral": "#f08080",
+  "lightcyan": "#e0ffff",
+  "lightgoldenrodyellow": "#fafad2",
+  "lightgray": "#d3d3d3",
+  "lightgreen": "#90ee90",
+  "lightgrey": "#d3d3d3",
+  "lightpink": "#ffb6c1",
+  "lightsalmon": "#ffa07a",
+  "lightseagreen": "#20b2aa",
+  "lightskyblue": "#87cefa",
+  "lightslategray": "#778899",
+  "lightslategrey": "#778899",
+  "lightsteelblue": "#b0c4de",
+  "lightyellow": "#ffffe0",
+  "limegreen": "#32cd32",
+  "linen": "#faf0e6",
+  "magenta": "#ff00ff",
+  "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",
+  "oldlace": "#fdf5e6",
+  "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",
+  "rebeccapurple": "#663399",
+  "rosybrown": "#bc8f8f",
+  "royalblue": "#4169e1",
+  "saddlebrown": "#8b4513",
+  "salmon": "#fa8072",
+  "sandybrown": "#f4a460",
+  "seagreen": "#2e8b57",
+  "seashell": "#fff5ee",
+  "sienna": "#a0522d",
+  "skyblue": "#87ceeb",
+  "slateblue": "#6a5acd",
+  "slategray": "#708090",
+  "slategrey": "#708090",
+  "snow": "#fffafa",
+  "springgreen": "#00ff7f",
+  "steelblue": "#4682b4",
+  "tan": "#d2b48c",
+  "thistle": "#d8bfd8",
+  "tomato": "#ff6347",
+  "turquoise": "#40e0d0",
+  "violet": "#ee82ee",
+  "wheat": "#f5deb3",
+  "whitesmoke": "#f5f5f5",
+  "yellowgreen": "#9acd32"
+};
+export {
+  color_map_default as default
+};