antd-color-editor/lib/genScalesByConfig/demo/index.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 name in all)
    __defProp(target, name, { get: all[name], 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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/genScalesByConfig/demo/index.tsx
var demo_exports = {};
__export(demo_exports, {
  default: () => demo_default
});
module.exports = __toCommonJS(demo_exports);
var import_antd_color_editor = require("../..");
var demo_default = () => {
  const data = (0, import_antd_color_editor.genScalesByConfig)({
    colorList: [
      {
        color: "#1677FF",
        darkColor: "#1677FF",
        id: "Primary",
        title: "Primary",
        type: "normal"
      },
      {
        color: "#1677FF",
        darkColor: "#1677FF",
        id: "Neutral",
        title: "Neutral",
        type: "neutral"
      },
      {
        color: "#da4a45",
        darkColor: "#da4a45",
        id: "Red",
        title: "Red",
        type: "normal"
      }
    ],
    generate: {
      dark: {
        down: {
          cEasing: [0, 0, 1, 1],
          cTarget: 5,
          hEasing: [0, 0, 1, 1],
          hRotate: -10,
          tEasing: [0, 0, 1, 1],
          tTarget: 98
        },
        up: {
          cEasing: [0, 0, 1, 1],
          cTarget: 50,
          hEasing: [0, 0, 1, 1],
          hRotate: 20,
          tEasing: [0, 0, 1, 1],
          tTarget: 10
        }
      },
      hue: {
        multiply: -0.5,
        segment: [100, 200]
      },
      light: {
        down: {
          cEasing: [0, 0, 1, 1],
          cTarget: 50,
          hEasing: [0, 0, 1, 1],
          hRotate: 20,
          tEasing: [0, 0, 1, 1],
          tTarget: 10
        },
        up: {
          cEasing: [0, 0, 1, 1],
          cTarget: 5,
          hEasing: [0, 0, 1, 1],
          hRotate: -10,
          tEasing: [0, 0, 1, 1],
          tTarget: 98
        }
      },
      neutral: {
        cEasingDown: [0, 0, 1, 1],
        cEasingUp: [0, 0, 1, 1],
        cStart: 15,
        cTarget: 10,
        standard: "#888888"
      },
      step: {
        down: 5,
        up: 5
      }
    },
    stepFliter: [],
    system: {
      edit: {
        isolateEdit: false
      },
      pattern: {
        displayFliterStep: false,
        isFliterStep: false,
        isolateDark: false
      }
    }
  });
  return /* @__PURE__ */ React.createElement(import_antd_color_editor.JsonView, { data });
};