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

an open-source color editor for designing color system

var _neutralAdvanceConfig;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import { bezier } from '@leva-ui/plugin-bezier';
import { AngleIcon, AspectRatioIcon, BlendingModeIcon, CodeIcon, ColorWheelIcon, ComponentBooleanIcon, EyeNoneIcon, HobbyKnifeIcon, OpacityIcon, PinBottomIcon, PinTopIcon, ShadowIcon, TokensIcon, TransformIcon, UpdateIcon } from '@radix-ui/react-icons';
import { folder } from 'leva';
import { merge } from 'lodash-es';
import { GenerateScale, Label } from "./..";
import { defaultEditorConfig } from "./defaultConfig";
import { jsx as _jsx } from "react/jsx-runtime";
export var getCacheEditorConfig = function getCacheEditorConfig() {
  var localConfig = localStorage.getItem('kitchen-color-config');
  var cacheConfig = localConfig ? merge(defaultEditorConfig, JSON.parse(localConfig).data) : defaultEditorConfig;
  return cacheConfig;
};
export var setForceConfig = function setForceConfig(forceConfig) {
  var _forceConfig$data;
  if (forceConfig !== null && forceConfig !== void 0 && (_forceConfig$data = forceConfig.data) !== null && _forceConfig$data !== void 0 && _forceConfig$data.generate && forceConfig !== null && forceConfig !== void 0 && forceConfig.time && forceConfig !== null && forceConfig !== void 0 && forceConfig.name) {
    var localConfig = localStorage.getItem('kitchen-color-config');
    if (localConfig) {
      var _localConfig;
      localConfig = JSON.parse(localConfig);
      if (((_localConfig = localConfig) === null || _localConfig === void 0 ? void 0 : _localConfig.name) === name) return;
    }
    localStorage.setItem('kitchen-color-config', JSON.stringify(forceConfig));
  }
};
export var cacheEditorConfig = getCacheEditorConfig();

/******************************************************
 ************************ 调色 *************************
 ******************************************************/

var defineColorConfig = function defineColorConfig(defaultColorConfig) {
  return {
    hRotate: {
      value: defaultColorConfig.hRotate,
      label: /*#__PURE__*/_jsx(Label, {
        icon: /*#__PURE__*/_jsx(ColorWheelIcon, {}),
        title: "\u8272\u76F8\u65CB\u8F6C"
      }),
      min: -360,
      max: 360,
      step: 1
    },
    cTarget: {
      value: defaultColorConfig.cTarget,
      label: /*#__PURE__*/_jsx(Label, {
        icon: /*#__PURE__*/_jsx(BlendingModeIcon, {}),
        title: "\u8272\u5EA6\u76EE\u6807"
      }),
      min: 1,
      max: 120,
      step: 1
    },
    tTarget: {
      value: defaultColorConfig.tTarget,
      min: 1,
      max: 100,
      label: /*#__PURE__*/_jsx(Label, {
        icon: /*#__PURE__*/_jsx(ShadowIcon, {}),
        title: "\u660E\u5EA6\u76EE\u6807"
      }),
      step: 1
    }
  };
};
export 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 = function defineAdvanceConfig(defaultColorConfig) {
  var _ref;
  return _ref = {}, _defineProperty(_ref, '色相曲线', folder({
    hEasing: bezier(defaultColorConfig.hEasing)
  }, {
    collapsed: true,
    color: '#8c92a4'
  })), _defineProperty(_ref, '色度曲线', folder({
    cEasing: bezier(defaultColorConfig.cEasing)
  }, {
    collapsed: true,
    color: '#8c92a4'
  })), _defineProperty(_ref, '明度曲线', folder({
    tEasing: bezier(defaultColorConfig.tEasing)
  }, {
    collapsed: true,
    color: '#8c92a4'
  })), _ref;
};
export 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)
};
export var hueConfig = {
  segment: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(ColorWheelIcon, {}),
      title: "\u8865\u507F\u533A\u95F4"
    }),
    value: cacheEditorConfig.generate.hue.segment,
    max: 360,
    min: 0,
    step: 1
  },
  multiply: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(AngleIcon, {}),
      title: "\u8865\u507F\u4E58\u9636"
    }),
    value: cacheEditorConfig.generate.hue.multiply,
    max: 1,
    min: -1
  }
};
export var neutralConfig = {
  cStart: {
    value: cacheEditorConfig.generate.neutral.cStart,
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(BlendingModeIcon, {}),
      title: "\u8272\u5EA6\u6807\u51C6"
    }),
    min: 1,
    max: 36,
    step: 1
  },
  cTarget: {
    value: cacheEditorConfig.generate.neutral.cTarget,
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(BlendingModeIcon, {}),
      title: "\u8272\u5EA6\u76EE\u6807"
    }),
    min: 1,
    max: 36,
    step: 1
  },
  standard: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(OpacityIcon, {}),
      title: "\u660E\u5EA6\u6807\u51C6"
    }),
    value: cacheEditorConfig.generate.neutral.standard
  }
};
export var neutralAdvanceConfig = (_neutralAdvanceConfig = {}, _defineProperty(_neutralAdvanceConfig, '上梯度 色度曲线', folder({
  cEasingUp: bezier(cacheEditorConfig.generate.neutral.cEasingUp)
}, {
  collapsed: true,
  color: '#8c92a4'
})), _defineProperty(_neutralAdvanceConfig, '下梯度 色度曲线', folder({
  cEasingDown: bezier(cacheEditorConfig.generate.neutral.cEasingDown)
}, {
  collapsed: true,
  color: '#8c92a4'
})), _neutralAdvanceConfig);

/******************************************************
 ************************ 色板 *************************
 ******************************************************/

export var patternConfig = {
  isolateDark: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(ComponentBooleanIcon, {}),
      title: "\u4EAE\u6697\u4E3B\u8272\u5206\u79BB"
    }),
    value: cacheEditorConfig.system.pattern.isolateDark
  },
  isFliterStep: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(HobbyKnifeIcon, {}),
      title: "\u5F00\u542F\u68AF\u5EA6\u7B5B\u9009"
    }),
    value: cacheEditorConfig.system.pattern.isFliterStep
  },
  displayFliterStep: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(EyeNoneIcon, {}),
      title: "\u53EA\u663E\u793A\u7B5B\u9009\u540E\u68AF\u5EA6"
    }),
    value: cacheEditorConfig.system.pattern.displayFliterStep,
    render: function render(get) {
      return get('isFliterStep');
    }
  }
};
export var stepConfig = {
  up: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(PinTopIcon, {}),
      title: "\u5411\u4E0A\u68AF\u5EA6"
    }),
    value: cacheEditorConfig.generate.step.up,
    step: 1,
    min: 1
  },
  down: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(PinBottomIcon, {}),
      title: "\u5411\u4E0B\u68AF\u5EA6"
    }),
    value: cacheEditorConfig.generate.step.down,
    step: 1,
    min: 1
  }
};

/******************************************************
 ************************ 视图 *************************
 ******************************************************/

export var editConfig = {
  isolateEdit: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(ComponentBooleanIcon, {}),
      title: "\u4EAE\u6697\u8C03\u8282\u5206\u79BB"
    }),
    value: cacheEditorConfig.system.edit.isolateEdit
  }
};
export var colorTypes = ['mix', 'hex', 'hct', 'rgb', 'hsl', 'hsv', 'cts'];
export var genDisplapConfig = function genDisplapConfig(button) {
  return {
    colorType: {
      label: /*#__PURE__*/_jsx(Label, {
        icon: /*#__PURE__*/_jsx(TokensIcon, {}),
        title: "\u8272\u5F69\u7A7A\u95F4"
      }),
      value: 'hct',
      options: colorTypes
    },
    ' ': button,
    showDetail: {
      label: /*#__PURE__*/_jsx(Label, {
        icon: /*#__PURE__*/_jsx(AspectRatioIcon, {}),
        title: "\u8BE6\u7EC6\u6A21\u5F0F"
      }),
      value: true
    }
  };
};
export var threeConfig = {
  threeZoom: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(TransformIcon, {}),
      title: "\u6A21\u578B\u5C3A\u5BF8"
    }),
    value: 8,
    min: 1,
    max: 100,
    step: 1
  },
  hueZoom: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(EyeNoneIcon, {}),
      title: "\u8272\u76F8\u7F29\u653E"
    }),
    value: 3.6,
    min: 1,
    max: 10,
    step: 1
  },
  autoRotate: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(UpdateIcon, {}),
      title: "\u81EA\u52A8\u65CB\u8F6C"
    }),
    value: true
  },
  showFloor: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(EyeNoneIcon, {}),
      title: "\u663E\u793A\u8F85\u52A9\u7EBF"
    }),
    value: true
  }
};
export var tokenConfig = {
  isolateDarkToken: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(ComponentBooleanIcon, {}),
      title: "\u4EAE\u6697\u53D8\u91CF\u5206\u79BB"
    }),
    value: true
  },
  colorType: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(TokensIcon, {}),
      title: "\u8272\u5F69\u7A7A\u95F4"
    }),
    value: 'mix',
    options: ['mix', 'hex', 'rgb', 'hsl']
  },
  codeType: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(CodeIcon, {}),
      title: "\u53D8\u91CF\u683C\u5F0F"
    }),
    value: 'css',
    options: ['css', 'less', 'scss', 'js']
  }
};

/******************************************************
 ******************* Define Config ********************
 ******************************************************/

export var defineGenerateConfig = function defineGenerateConfig(_ref2) {
  var edit = _ref2.edit,
    step = _ref2.step,
    hue = _ref2.hue,
    neutral = _ref2.neutral,
    neutralAdvance = _ref2.neutralAdvance,
    lightUp = _ref2.lightUp,
    lightUpAdvance = _ref2.lightUpAdvance,
    lightDown = _ref2.lightDown,
    lightDownAdvance = _ref2.lightDownAdvance,
    darkUp = _ref2.darkUp,
    darkUpAdvance = _ref2.darkUpAdvance,
    darkDown = _ref2.darkDown,
    darkDownAdvance = _ref2.darkDownAdvance;
  var config = {
    step: step,
    hue: hue,
    neutral: _objectSpread(_objectSpread({}, neutral), neutralAdvance),
    light: {
      up: _objectSpread(_objectSpread({}, lightUp), lightUpAdvance),
      down: _objectSpread(_objectSpread({}, lightDown), lightDownAdvance)
    },
    dark: {
      up: edit.isolateEdit ? _objectSpread(_objectSpread({}, darkUp), darkUpAdvance) : _objectSpread(_objectSpread({}, lightDown), lightDownAdvance),
      down: edit.isolateEdit ? _objectSpread(_objectSpread({}, darkDown), {}, {
        darkDownAdvance: darkDownAdvance
      }) : _objectSpread(_objectSpread({}, lightUp), lightUpAdvance)
    }
  };
  return JSON.parse(JSON.stringify(config));
};
export var genScales = function genScales(color, config) {
  var system = config.system,
    stepFliter = config.stepFliter,
    generate = config.generate;
  var pattern = system.pattern;
  var scaleGeneration = new GenerateScale(generate);
  var 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'
    })
  };
  var rawScales = scales;
  if (pattern.isFliterStep && pattern.displayFliterStep && (stepFliter === null || stepFliter === void 0 ? void 0 : stepFliter.length) > 0) {
    scales = {
      light: scales.light.filter(function (_, index) {
        return stepFliter.includes(index);
      }),
      dark: scales.dark.filter(function (_, index) {
        return stepFliter.includes(index);
      })
    };
  }
  return {
    scales: scales,
    color: rawScales.light[generate.step.up],
    darkColor: rawScales.dark[generate.step.up]
  };
};
export * from "./defaultConfig";