kitchen-color-studio/lib/ColorStudio/config.js

an open-source color editor for designing color system

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name2 in all)
    __defProp(target, name2, { get: all[name2], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/ColorStudio/config.tsx
var config_exports = {};
__export(config_exports, {
  advanceConfig: () => advanceConfig,
  cacheEditorConfig: () => cacheEditorConfig,
  colorConfig: () => colorConfig,
  colorTypes: () => colorTypes,
  defineGenerateConfig: () => defineGenerateConfig,
  editConfig: () => editConfig,
  genDisplapConfig: () => genDisplapConfig,
  genScales: () => genScales,
  getCacheEditorConfig: () => getCacheEditorConfig,
  hueConfig: () => hueConfig,
  neutralAdvanceConfig: () => neutralAdvanceConfig,
  neutralConfig: () => neutralConfig,
  patternConfig: () => patternConfig,
  setForceConfig: () => setForceConfig,
  stepConfig: () => stepConfig,
  threeConfig: () => threeConfig,
  tokenConfig: () => tokenConfig
});
module.exports = __toCommonJS(config_exports);
var import_plugin_bezier = require("@leva-ui/plugin-bezier");
var import_react_icons = require("@radix-ui/react-icons");
var import_leva = require("leva");
var import_lodash_es = require("lodash-es");
var import__ = require("../index");
var import_defaultConfig = require("./defaultConfig");
__reExport(config_exports, require("./defaultConfig"), module.exports);
var getCacheEditorConfig = () => {
  const localConfig = localStorage.getItem("kitchen-color-config");
  const cacheConfig = localConfig ? (0, import_lodash_es.merge)(import_defaultConfig.defaultEditorConfig, JSON.parse(localConfig).data) : import_defaultConfig.defaultEditorConfig;
  return cacheConfig;
};
var setForceConfig = (forceConfig) => {
  var _a;
  if (((_a = forceConfig == null ? void 0 : forceConfig.data) == null ? void 0 : _a.generate) && (forceConfig == null ? void 0 : forceConfig.time) && (forceConfig == null ? void 0 : forceConfig.name)) {
    let localConfig = localStorage.getItem("kitchen-color-config");
    if (localConfig) {
      localConfig = JSON.parse(localConfig);
      if ((localConfig == null ? void 0 : localConfig.name) === name)
        return;
    }
    localStorage.setItem("kitchen-color-config", JSON.stringify(forceConfig));
  }
};
var cacheEditorConfig = getCacheEditorConfig();
var defineColorConfig = (defaultColorConfig) => ({
  hRotate: {
    value: defaultColorConfig.hRotate,
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.ColorWheelIcon, null), title: "色相旋转" }),
    min: -360,
    max: 360,
    step: 1
  },
  cTarget: {
    value: defaultColorConfig.cTarget,
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.BlendingModeIcon, null), title: "色度目标" }),
    min: 1,
    max: 120,
    step: 1
  },
  tTarget: {
    value: defaultColorConfig.tTarget,
    min: 1,
    max: 100,
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.ShadowIcon, null), title: "明度目标" }),
    step: 1
  }
});
var colorConfig = {
  lightUp: defineColorConfig(cacheEditorConfig.generate.light.up),
  lightDown: defineColorConfig(cacheEditorConfig.generate.light.down),
  darkUp: defineColorConfig(cacheEditorConfig.generate.dark.up),
  darkDown: defineColorConfig(cacheEditorConfig.generate.dark.down)
};
var defineAdvanceConfig = (defaultColorConfig) => ({
  ["色相曲线"]: (0, import_leva.folder)(
    {
      hEasing: (0, import_plugin_bezier.bezier)(defaultColorConfig.hEasing)
    },
    { collapsed: true, color: "#8c92a4" }
  ),
  ["色度曲线"]: (0, import_leva.folder)(
    {
      cEasing: (0, import_plugin_bezier.bezier)(defaultColorConfig.cEasing)
    },
    { collapsed: true, color: "#8c92a4" }
  ),
  ["明度曲线"]: (0, import_leva.folder)(
    {
      tEasing: (0, import_plugin_bezier.bezier)(defaultColorConfig.tEasing)
    },
    { collapsed: true, color: "#8c92a4" }
  )
});
var advanceConfig = {
  lightUp: defineAdvanceConfig(cacheEditorConfig.generate.light.up),
  lightDown: defineAdvanceConfig(cacheEditorConfig.generate.light.down),
  darkUp: defineAdvanceConfig(cacheEditorConfig.generate.dark.up),
  darkDown: defineAdvanceConfig(cacheEditorConfig.generate.dark.down)
};
var hueConfig = {
  segment: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.ColorWheelIcon, null), title: "补偿区间" }),
    value: cacheEditorConfig.generate.hue.segment,
    max: 360,
    min: 0,
    step: 1
  },
  multiply: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.AngleIcon, null), title: "补偿乘阶" }),
    value: cacheEditorConfig.generate.hue.multiply,
    max: 1,
    min: -1
  }
};
var neutralConfig = {
  cStart: {
    value: cacheEditorConfig.generate.neutral.cStart,
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.BlendingModeIcon, null), title: "色度标准" }),
    min: 1,
    max: 36,
    step: 1
  },
  cTarget: {
    value: cacheEditorConfig.generate.neutral.cTarget,
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.BlendingModeIcon, null), title: "色度目标" }),
    min: 1,
    max: 36,
    step: 1
  },
  standard: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.OpacityIcon, null), title: "明度标准" }),
    value: cacheEditorConfig.generate.neutral.standard
  }
};
var neutralAdvanceConfig = {
  ["上梯度 色度曲线"]: (0, import_leva.folder)(
    {
      cEasingUp: (0, import_plugin_bezier.bezier)(cacheEditorConfig.generate.neutral.cEasingUp)
    },
    { collapsed: true, color: "#8c92a4" }
  ),
  ["下梯度 色度曲线"]: (0, import_leva.folder)(
    {
      cEasingDown: (0, import_plugin_bezier.bezier)(cacheEditorConfig.generate.neutral.cEasingDown)
    },
    { collapsed: true, color: "#8c92a4" }
  )
};
var patternConfig = {
  isolateDark: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.ComponentBooleanIcon, null), title: "亮暗主色分离" }),
    value: cacheEditorConfig.system.pattern.isolateDark
  },
  isFliterStep: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.HobbyKnifeIcon, null), title: "开启梯度筛选" }),
    value: cacheEditorConfig.system.pattern.isFliterStep
  },
  displayFliterStep: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.EyeNoneIcon, null), title: "只显示筛选后梯度" }),
    value: cacheEditorConfig.system.pattern.displayFliterStep,
    render: (get) => get("isFliterStep")
  }
};
var stepConfig = {
  up: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.PinTopIcon, null), title: "向上梯度" }),
    value: cacheEditorConfig.generate.step.up,
    step: 1,
    min: 1
  },
  down: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.PinBottomIcon, null), title: "向下梯度" }),
    value: cacheEditorConfig.generate.step.down,
    step: 1,
    min: 1
  }
};
var editConfig = {
  isolateEdit: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.ComponentBooleanIcon, null), title: "亮暗调节分离" }),
    value: cacheEditorConfig.system.edit.isolateEdit
  }
};
var colorTypes = ["mix", "hex", "hct", "rgb", "hsl", "hsv", "cts"];
var genDisplapConfig = (button) => ({
  colorType: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.TokensIcon, null), title: "色彩空间" }),
    value: "hct",
    options: colorTypes
  },
  " ": button,
  showDetail: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.AspectRatioIcon, null), title: "详细模式" }),
    value: true
  }
});
var threeConfig = {
  threeZoom: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.TransformIcon, null), title: "模型尺寸" }),
    value: 8,
    min: 1,
    max: 100,
    step: 1
  },
  hueZoom: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.EyeNoneIcon, null), title: "色相缩放" }),
    value: 3.6,
    min: 1,
    max: 10,
    step: 1
  },
  autoRotate: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.UpdateIcon, null), title: "自动旋转" }),
    value: true
  },
  showFloor: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.EyeNoneIcon, null), title: "显示辅助线" }),
    value: true
  }
};
var tokenConfig = {
  isolateDarkToken: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.ComponentBooleanIcon, null), title: "亮暗变量分离" }),
    value: true
  },
  colorType: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.TokensIcon, null), title: "色彩空间" }),
    value: "mix",
    options: ["mix", "hex", "rgb", "hsl"]
  },
  codeType: {
    label: /* @__PURE__ */ React.createElement(import__.Label, { icon: /* @__PURE__ */ React.createElement(import_react_icons.CodeIcon, null), title: "变量格式" }),
    value: "css",
    options: ["css", "less", "scss", "js"]
  }
};
var defineGenerateConfig = ({
  edit,
  step,
  hue,
  neutral,
  neutralAdvance,
  lightUp,
  lightUpAdvance,
  lightDown,
  lightDownAdvance,
  darkUp,
  darkUpAdvance,
  darkDown,
  darkDownAdvance
}) => {
  const config = {
    step,
    hue,
    neutral: { ...neutral, ...neutralAdvance },
    light: {
      up: { ...lightUp, ...lightUpAdvance },
      down: { ...lightDown, ...lightDownAdvance }
    },
    dark: {
      up: edit.isolateEdit ? { ...darkUp, ...darkUpAdvance } : { ...lightDown, ...lightDownAdvance },
      down: edit.isolateEdit ? { ...darkDown, darkDownAdvance } : { ...lightUp, ...lightUpAdvance }
    }
  };
  return JSON.parse(JSON.stringify(config));
};
var genScales = (color, config) => {
  const { system, stepFliter, generate } = config;
  const { pattern } = system;
  const scaleGeneration = new import__.GenerateScale(generate);
  let scales = {
    light: scaleGeneration.gen(color.color, { theme: "light", neutral: color.type === "neutral" }),
    dark: scaleGeneration.gen(pattern.isolateDark ? color.darkColor : color.color, {
      theme: "dark",
      neutral: color.type === "neutral"
    })
  };
  const rawScales = scales;
  if (pattern.isFliterStep && pattern.displayFliterStep && (stepFliter == null ? void 0 : stepFliter.length) > 0) {
    scales = {
      light: scales.light.filter((_, index) => stepFliter.includes(index)),
      dark: scales.dark.filter((_, index) => stepFliter.includes(index))
    };
  }
  return {
    scales,
    color: rawScales.light[generate.step.up],
    darkColor: rawScales.dark[generate.step.up]
  };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  advanceConfig,
  cacheEditorConfig,
  colorConfig,
  colorTypes,
  defineGenerateConfig,
  editConfig,
  genDisplapConfig,
  genScales,
  getCacheEditorConfig,
  hueConfig,
  neutralAdvanceConfig,
  neutralConfig,
  patternConfig,
  setForceConfig,
  stepConfig,
  threeConfig,
  tokenConfig,
  ...require("./defaultConfig")
});