ep-craft 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ep-craft",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A Vue 3 component library based on element-plus with ep- prefix",
   "type": "module",
   "main": "./dist/ep-craft.js",

package/theme-chalk/src/button.scss

@@ -16,6 +16,30 @@ $button-icon-span-gap: map.merge(
   $button-icon-span-gap
 );
 
+@mixin button-reverse-variant(
+  $text-color,
+  $border-color,
+  $hover-bg-color,
+  $active-bg-color
+) {
+  @include set-css-var-value(('button', 'text-color'), $text-color);
+  @include set-css-var-value(('button', 'bg-color'), getCssVar('color-white'));
+  @include set-css-var-value(('button', 'border-color'), $border-color);
+  @include set-css-var-value(('button', 'hover', 'text-color'), $text-color);
+  @include set-css-var-value(('button', 'hover', 'bg-color'), $hover-bg-color);
+  @include set-css-var-value(('button', 'hover', 'border-color'), $border-color);
+  @include set-css-var-value(('button', 'active', 'text-color'), $text-color);
+  @include set-css-var-value(('button', 'active', 'bg-color'), $active-bg-color);
+  @include set-css-var-value(('button', 'active', 'border-color'), $border-color);
+  @include set-css-var-value(('button', 'disabled', 'text-color'), $text-color);
+  @include set-css-var-value(('button', 'disabled', 'bg-color'), getCssVar('color-white'));
+  @include set-css-var-value(('button', 'disabled', 'border-color'), $border-color);
+
+  @include when(disabled) {
+    opacity: 0.4;
+  }
+}
+
 @include b(button) {
   @include set-component-css-var('button', $button);
 }
@@ -292,6 +316,31 @@ $button-icon-span-gap: map.merge(
     }
   }
 
+  @include m(rePrimary) {
+    @include button-reverse-variant(
+      getCssVar('color-primary'),
+      #e5e6eb,
+      #f5f8ff,
+      #e5edff
+    );
+  }
+
+  @include m(reSuccess) {
+    @include button-reverse-variant(#12b886, #12b886, #f3fbf9, #e7f8f3);
+  }
+
+  @include m(reDanger) {
+    @include button-reverse-variant(#f14646, #f14646, #fff5f5, #ffc9c9);
+  }
+
+  @include m(reWarning) {
+    @include button-reverse-variant(#f57f00, #f57f00, #fff6eb, #ffe8cc);
+  }
+
+  @include m(reInfo) {
+    @include button-reverse-variant(#1d1f29, #e5e6eb, #f7f8fa, #f2f3f5);
+  }
+
   @each $size in (large, small, mini) {
     @include m($size) {
       @include set-css-var-value(

package/theme-chalk/src/common/var.scss

@@ -19,22 +19,40 @@ $colors: map.deep-merge(
     'white': #ffffff,
     'black': #000000,
     'primary': (
-      'base': #409eff,
+      'base': #1c64fd,
+      'light-3': #4480ff,
+      'light-5': rgba(28, 100, 253, 0.4),
+      'dark-2': #164ed1,
     ),
     'success': (
-      'base': #67c23a,
+      'base': #12b886,
+      'light-3': #59cdaa,
+      'light-5': rgba(18, 184, 134, 0.4),
+      'dark-2': #0f956c,
     ),
     'warning': (
-      'base': #e6a23c,
+      'base': #f57f00,
+      'light-3': #ffa94d,
+      'light-5': rgba(245, 127, 0, 0.4),
+      'dark-2': #d05706,
     ),
     'danger': (
-      'base': #f56c6c,
+      'base': #f14646,
+      'light-3': #fb7c7c,
+      'light-5': rgba(241, 70, 70, 0.4),
+      'dark-2': #dc2c2c,
     ),
     'error': (
-      'base': #f56c6c,
+      'base': #f14646,
+      'light-3': #fb7c7c,
+      'light-5': rgba(241, 70, 70, 0.4),
+      'dark-2': #dc2c2c,
     ),
     'info': (
-      'base': #909399,
+      'base': #f2f3f5,
+      'light-3': #e5e6eb,
+      'light-5': rgba(242, 243, 245, 0.4),
+      'dark-2': #c9cbd4,
     ),
   ),
   $colors
@@ -98,8 +116,8 @@ $color-info: map.get($colors, 'info', 'base') !default;
 $text-color: () !default;
 $text-color: map.merge(
   (
-    'primary': #303133,
-    'regular': #606266,
+    'primary': #1d1f29,
+    'regular': #1d1f29,
     'secondary': #909399,
     'placeholder': #a8abb2,
     'disabled': #c0c4cc,
@@ -815,8 +833,8 @@ $button-font-size: map.merge(
   (
     'large': getCssVar('font-size', 'base'),
     'default': getCssVar('font-size', 'base'),
-    'small': 12px,
-    'mini': 12px,
+    'small': getCssVar('font-size', 'base'),
+    'mini': getCssVar('font-size', 'extra-small'),
   ),
   $button-font-size
 );

package/dist/components/button/EpButton.vue.js

@@ -1,171 +0,0 @@
-import { defineComponent as Z, useSlots as j, inject as G, computed as a, ref as oo, Text as eo, openBlock as d, createBlock as m, resolveDynamicComponent as C, mergeProps as to, withCtx as x, createElementBlock as T, Fragment as ro, renderSlot as _, unref as N, normalizeClass as K, createCommentVNode as A } from "vue";
-import { ElIcon as lo } from "element-plus/es/components/icon/index.mjs";
-import { useFormSize as no, useFormDisabled as ao } from "element-plus/es/components/form/src/hooks/use-form-common-props.mjs";
-import { useFormItem as so } from "element-plus/es/components/form/src/hooks/use-form-item.mjs";
-import { useGlobalConfig as io } from "element-plus/es/components/config-provider/src/hooks/use-global-config.mjs";
-import { buttonGroupContextKey as co } from "element-plus/es/components/button/src/constants.mjs";
-import { buttonEmits as uo, buttonProps as vo } from "./button.js";
-import { TinyColor as po } from "../../node_modules/@ctrl/tinycolor/dist/module/index.js";
-const b = "el", k = "button", So = /* @__PURE__ */ Z({
-  name: "EpButton",
-  __name: "EpButton",
-  props: vo,
-  emits: uo,
-  setup(U, { expose: q, emit: H }) {
-    const w = lo, e = U, J = H, h = j(), L = (o = "") => o ? `${b}-${k}-${o}` : `${b}-${k}`, B = (o) => o ? `${b}-${k}--${o}` : "", i = (o, r = !0) => o && r ? `is-${o}` : "", l = (o) => `--${b}-${k}-${o}`, g = (o) => `--${b}-${o}`, y = (o) => {
-      const r = {};
-      for (const n in o) o[n] && (r[`--${b}-${k}-${n}`] = o[n]);
-      return r;
-    }, u = G(co, void 0), v = io("button"), { form: S } = so(), I = no(a(() => u == null ? void 0 : u.size)), c = ao(), E = oo(), z = a(
-      () => {
-        var o;
-        return e.type || (u == null ? void 0 : u.type) || ((o = v.value) == null ? void 0 : o.type) || "";
-      }
-    ), M = a(
-      () => {
-        var o;
-        return e.autoInsertSpace ?? ((o = v.value) == null ? void 0 : o.autoInsertSpace) ?? !1;
-      }
-    ), F = a(() => {
-      var o;
-      return e.plain ?? ((o = v.value) == null ? void 0 : o.plain) ?? !1;
-    }), O = a(() => {
-      var o;
-      return e.round ?? ((o = v.value) == null ? void 0 : o.round) ?? !1;
-    }), V = a(() => {
-      var o;
-      return e.text ?? ((o = v.value) == null ? void 0 : o.text) ?? !1;
-    }), Q = a(() => {
-      var o;
-      return e.dashed ?? ((o = v.value) == null ? void 0 : o.dashed) ?? !1;
-    }), R = a(() => e.tag === "button" ? {
-      ariaDisabled: c.value || e.loading,
-      disabled: c.value || e.loading,
-      autofocus: e.autofocus,
-      type: e.nativeType
-    } : {}), D = a(() => {
-      var r;
-      const o = (r = h.default) == null ? void 0 : r.call(h);
-      if (M.value && (o == null ? void 0 : o.length) === 1) {
-        const n = o[0];
-        if ((n == null ? void 0 : n.type) === eo) {
-          const t = n.children;
-          return new RegExp("^\\p{Unified_Ideograph}{2}$", "u").test(t.trim());
-        }
-      }
-      return !1;
-    }), W = (o) => {
-      if (c.value || e.loading) {
-        o.stopPropagation();
-        return;
-      }
-      e.nativeType === "reset" && (S == null || S.resetFields()), J("click", o);
-    };
-    function s(o, r = 20) {
-      return o.mix("#141414", r).toString();
-    }
-    const X = a(() => {
-      let o = {}, r = e.color;
-      if (r) {
-        const n = r.match(/var\((.*?)\)/);
-        n && (r = window.getComputedStyle(window.document.documentElement).getPropertyValue(n[1]));
-        const t = new po(r), p = e.dark ? t.tint(20).toString() : s(t, 20);
-        if (F.value)
-          o = y({
-            "bg-color": e.dark ? s(t, 90) : t.tint(90).toString(),
-            "text-color": r,
-            "border-color": e.dark ? s(t, 50) : t.tint(50).toString(),
-            "hover-text-color": `var(${g("color-white")})`,
-            "hover-bg-color": r,
-            "hover-border-color": r,
-            "active-bg-color": p,
-            "active-text-color": `var(${g("color-white")})`,
-            "active-border-color": p
-          }), c.value && (o[l("disabled-bg-color")] = e.dark ? s(t, 90) : t.tint(90).toString(), o[l("disabled-text-color")] = e.dark ? s(t, 50) : t.tint(50).toString(), o[l("disabled-border-color")] = e.dark ? s(t, 80) : t.tint(80).toString());
-        else if (e.link || V.value) {
-          const f = e.dark ? s(t, 30) : t.tint(30).toString();
-          if (o = y({
-            "text-color": r,
-            "hover-text-color": f,
-            "active-text-color": p
-          }), e.link && (o[l("hover-link-text-color")] = f, o[l("active-color")] = p), c.value) {
-            const $ = e.dark ? s(t, 50) : t.tint(50).toString();
-            o[l("disabled-bg-color")] = "transparent", o[l("disabled-text-color")] = $, o[l("disabled-border-color")] = "transparent";
-          }
-        } else {
-          const f = e.dark ? s(t, 30) : t.tint(30).toString(), $ = t.isDark() ? `var(${g("color-white")})` : `var(${g("color-black")})`;
-          if (o = y({
-            "bg-color": r,
-            "text-color": $,
-            "border-color": r,
-            "hover-bg-color": f,
-            "hover-text-color": $,
-            "hover-border-color": f,
-            "active-bg-color": p,
-            "active-border-color": p
-          }), c.value) {
-            const P = e.dark ? s(t, 50) : t.tint(50).toString();
-            o[l("disabled-bg-color")] = P, o[l("disabled-text-color")] = e.dark ? "rgba(255, 255, 255, 0.5)" : `var(${g("color-white")})`, o[l("disabled-border-color")] = P;
-          }
-        }
-      }
-      return o;
-    }), Y = a(() => [
-      L(),
-      B(z.value),
-      B(I.value),
-      i("disabled", c.value),
-      i("loading", e.loading),
-      i("plain", F.value),
-      i("round", O.value),
-      i("circle", e.circle),
-      i("text", V.value),
-      i("dashed", Q.value),
-      i("link", e.link),
-      i("has-bg", e.bg)
-    ]);
-    return q({
-      ref: E,
-      size: I,
-      type: z,
-      disabled: c,
-      shouldAddSpace: D
-    }), (o, r) => (d(), m(C(o.tag), to({
-      ref_key: "_ref",
-      ref: E
-    }, R.value, {
-      class: Y.value,
-      style: X.value,
-      onClick: W
-    }), {
-      default: x(() => [
-        o.loading ? (d(), T(ro, { key: 0 }, [
-          o.$slots.loading ? _(o.$slots, "loading", { key: 0 }) : (d(), m(N(w), {
-            key: 1,
-            class: K("is-loading")
-          }, {
-            default: x(() => [
-              (d(), m(C(o.loadingIcon)))
-            ]),
-            _: 1
-          }))
-        ], 64)) : o.icon || o.$slots.icon ? (d(), m(N(w), { key: 1 }, {
-          default: x(() => [
-            o.icon ? (d(), m(C(o.icon), { key: 0 })) : _(o.$slots, "icon", { key: 1 })
-          ]),
-          _: 3
-        })) : A("", !0),
-        o.$slots.default ? (d(), T("span", {
-          key: 2,
-          class: K({ "el-button__text--expand": D.value })
-        }, [
-          _(o.$slots, "default")
-        ], 2)) : A("", !0)
-      ]),
-      _: 3
-    }, 16, ["class", "style"]));
-  }
-});
-export {
-  So as default
-};

package/dist/components/button/EpButton2.vue.js

@@ -1,4 +0,0 @@
-import f from "./EpButton.vue.js";
-export {
-  f as default
-};

package/dist/components/button/button.js

@@ -1,95 +0,0 @@
-import { Loading as e } from "@element-plus/icons-vue";
-const o = [
-  "default",
-  "primary",
-  "success",
-  "warning",
-  "info",
-  "danger",
-  "text",
-  ""
-], n = ["button", "submit", "reset"], l = {
-  /** 按钮尺寸 */
-  size: {
-    type: String,
-    values: ["", "large", "default", "small", "mini"]
-  },
-  /** 是否禁用 */
-  disabled: {
-    type: Boolean,
-    default: void 0
-  },
-  /** 按钮类型 */
-  type: {
-    type: String,
-    values: o,
-    default: ""
-  },
-  /** 图标组件 */
-  icon: {
-    type: [String, Object, Function]
-  },
-  /** 原生 button 类型 */
-  nativeType: {
-    type: String,
-    values: n,
-    default: "button"
-  },
-  /** 是否为加载中状态 */
-  loading: Boolean,
-  /** 自定义加载中图标组件 */
-  loadingIcon: {
-    type: [String, Object, Function],
-    default: () => e
-  },
-  /** 是否为朴素按钮 */
-  plain: {
-    type: Boolean,
-    default: void 0
-  },
-  /** 是否为文字按钮 */
-  text: {
-    type: Boolean,
-    default: void 0
-  },
-  /** 是否为链接按钮 */
-  link: Boolean,
-  /** 文字按钮背景色是否常亮 */
-  bg: Boolean,
-  /** 原生 autofocus */
-  autofocus: Boolean,
-  /** 是否为圆角按钮 */
-  round: {
-    type: Boolean,
-    default: void 0
-  },
-  /** 是否为圆形按钮 */
-  circle: Boolean,
-  /** 是否为虚线按钮 */
-  dashed: {
-    type: Boolean,
-    default: void 0
-  },
-  /** 自定义按钮颜色，自动计算 hover 和 active 颜色 */
-  color: String,
-  /** 暗黑模式，将 color 自动转换为暗黑模式颜色 */
-  dark: Boolean,
-  /** 是否在两个中文字符之间自动插入空格 */
-  autoInsertSpace: {
-    type: Boolean,
-    default: void 0
-  },
-  /** 自定义元素标签 */
-  tag: {
-    type: [String, Object],
-    default: "button"
-  }
-}, i = {
-  click: (t) => t instanceof MouseEvent
-};
-export {
-  i as buttonEmits,
-  n as buttonNativeTypes,
-  l as buttonProps,
-  o as buttonTypes
-};

package/dist/node_modules/@ctrl/tinycolor/dist/module/conversion.js

@@ -1,134 +0,0 @@
-import { bound01 as i, pad2 as h } from "./util.js";
-function T(n, o, t) {
-  return {
-    r: i(n, 255) * 255,
-    g: i(o, 255) * 255,
-    b: i(t, 255) * 255
-  };
-}
-function g(n, o, t) {
-  n = i(n, 255), o = i(o, 255), t = i(t, 255);
-  const e = Math.max(n, o, t), c = Math.min(n, o, t);
-  let r = 0, a = 0;
-  const s = (e + c) / 2;
-  if (e === c)
-    a = 0, r = 0;
-  else {
-    const u = e - c;
-    switch (a = s > 0.5 ? u / (2 - e - c) : u / (e + c), e) {
-      case n:
-        r = (o - t) / u + (o < t ? 6 : 0);
-        break;
-      case o:
-        r = (t - n) / u + 2;
-        break;
-      case t:
-        r = (n - o) / u + 4;
-        break;
-    }
-    r /= 6;
-  }
-  return { h: r, s: a, l: s };
-}
-function M(n, o, t) {
-  return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? n + (o - n) * (6 * t) : t < 1 / 2 ? o : t < 2 / 3 ? n + (o - n) * (2 / 3 - t) * 6 : n;
-}
-function k(n, o, t) {
-  let e, c, r;
-  if (n = i(n, 360), o = i(o, 100), t = i(t, 100), o === 0)
-    c = t, r = t, e = t;
-  else {
-    const a = t < 0.5 ? t * (1 + o) : t + o - t * o, s = 2 * t - a;
-    e = M(s, a, n + 1 / 3), c = M(s, a, n), r = M(s, a, n - 1 / 3);
-  }
-  return { r: e * 255, g: c * 255, b: r * 255 };
-}
-function l(n, o, t) {
-  n = i(n, 255), o = i(o, 255), t = i(t, 255);
-  const e = Math.max(n, o, t), c = Math.min(n, o, t);
-  let r = 0;
-  const a = e, s = e - c, u = e === 0 ? 0 : s / e;
-  if (e === c)
-    r = 0;
-  else {
-    switch (e) {
-      case n:
-        r = (o - t) / s + (o < t ? 6 : 0);
-        break;
-      case o:
-        r = (t - n) / s + 2;
-        break;
-      case t:
-        r = (n - o) / s + 4;
-        break;
-    }
-    r /= 6;
-  }
-  return { h: r, s: u, v: a };
-}
-function H(n, o, t) {
-  n = i(n, 360) * 6, o = i(o, 100), t = i(t, 100);
-  const e = Math.floor(n), c = n - e, r = t * (1 - o), a = t * (1 - c * o), s = t * (1 - (1 - c) * o), u = e % 6, f = [t, a, r, r, s, t][u], m = [s, t, t, a, r, r][u], d = [r, r, s, t, t, a][u];
-  return { r: f * 255, g: m * 255, b: d * 255 };
-}
-function S(n, o, t, e) {
-  const c = [
-    h(Math.round(n).toString(16)),
-    h(Math.round(o).toString(16)),
-    h(Math.round(t).toString(16))
-  ];
-  return e && c[0].startsWith(c[0].charAt(1)) && c[1].startsWith(c[1].charAt(1)) && c[2].startsWith(c[2].charAt(1)) ? c[0].charAt(0) + c[1].charAt(0) + c[2].charAt(0) : c.join("");
-}
-function W(n, o, t, e, c) {
-  const r = [
-    h(Math.round(n).toString(16)),
-    h(Math.round(o).toString(16)),
-    h(Math.round(t).toString(16)),
-    h(x(e))
-  ];
-  return c && r[0].startsWith(r[0].charAt(1)) && r[1].startsWith(r[1].charAt(1)) && r[2].startsWith(r[2].charAt(1)) && r[3].startsWith(r[3].charAt(1)) ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0) + r[3].charAt(0) : r.join("");
-}
-function p(n, o, t, e) {
-  const c = n / 100, r = o / 100, a = t / 100, s = e / 100, u = 255 * (1 - c) * (1 - s), f = 255 * (1 - r) * (1 - s), m = 255 * (1 - a) * (1 - s);
-  return { r: u, g: f, b: m };
-}
-function y(n, o, t) {
-  let e = 1 - n / 255, c = 1 - o / 255, r = 1 - t / 255, a = Math.min(e, c, r);
-  return a === 1 ? (e = 0, c = 0, r = 0) : (e = (e - a) / (1 - a) * 100, c = (c - a) / (1 - a) * 100, r = (r - a) / (1 - a) * 100), a *= 100, {
-    c: Math.round(e),
-    m: Math.round(c),
-    y: Math.round(r),
-    k: Math.round(a)
-  };
-}
-function x(n) {
-  return Math.round(parseFloat(n) * 255).toString(16);
-}
-function C(n) {
-  return A(n) / 255;
-}
-function A(n) {
-  return parseInt(n, 16);
-}
-function R(n) {
-  return {
-    r: n >> 16,
-    g: (n & 65280) >> 8,
-    b: n & 255
-  };
-}
-export {
-  p as cmykToRgb,
-  x as convertDecimalToHex,
-  C as convertHexToDecimal,
-  k as hslToRgb,
-  H as hsvToRgb,
-  R as numberInputToObject,
-  A as parseIntFromHex,
-  y as rgbToCmyk,
-  S as rgbToHex,
-  g as rgbToHsl,
-  l as rgbToHsv,
-  T as rgbToRgb,
-  W as rgbaToHex
-};

package/dist/node_modules/@ctrl/tinycolor/dist/module/css-color-names.js

@@ -1,153 +0,0 @@
-const e = {
-  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",
-  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",
-  goldenrod: "#daa520",
-  gold: "#ffd700",
-  gray: "#808080",
-  green: "#008000",
-  greenyellow: "#adff2f",
-  grey: "#808080",
-  honeydew: "#f0fff0",
-  hotpink: "#ff69b4",
-  indianred: "#cd5c5c",
-  indigo: "#4b0082",
-  ivory: "#fffff0",
-  khaki: "#f0e68c",
-  lavenderblush: "#fff0f5",
-  lavender: "#e6e6fa",
-  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",
-  lime: "#00ff00",
-  limegreen: "#32cd32",
-  linen: "#faf0e6",
-  magenta: "#ff00ff",
-  maroon: "#800000",
-  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",
-  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"
-};
-export {
-  e as names
-};