@react-awesome-query-builder/antd/cjs/utils/theming.js

User-friendly query builder for React. AntDesign widgets

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.mergeThemes = exports.generateCssVars = exports.buildAlgorithms = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _ui = require("@react-awesome-query-builder/ui");
var _antd = require("antd");
var _pickBy = _interopRequireDefault(require("lodash/pickBy"));
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // https://ant.design/docs/react/customize-theme
// type Theme = ReturnType<typeof antdTheme.useToken>["theme"];
// type SeedToken = Parameters<typeof antdTheme["defaultAlgorithm"]>[0];
// type MapToken = ReturnType<typeof antdTheme["defaultAlgorithm"]>;

var _Utils$OtherUtils = _ui.Utils.OtherUtils,
  logger = _Utils$OtherUtils.logger,
  isTruthy = _Utils$OtherUtils.isTruthy;
var _Utils$ColorUtils = _ui.Utils.ColorUtils,
  setColorOpacity = _Utils$ColorUtils.setColorOpacity,
  generateCssVarsForLevels = _Utils$ColorUtils.generateCssVarsForLevels,
  chroma = _Utils$ColorUtils.chroma,
  isDarkColor = _Utils$ColorUtils.isDarkColor,
  isColor = _Utils$ColorUtils.isColor;
var buildAlgorithms = exports.buildAlgorithms = function buildAlgorithms(darkMode, compactMode) {
  var algorithms = [darkMode && _antd.theme.darkAlgorithm, compactMode && _antd.theme.compactAlgorithm
  // (!compactMode && !darkMode && antdTheme.defaultAlgorithm),
  ].filter(isTruthy);
  // const palette = algorithms.reduce(
  //   (tkns, algo, i) => i === 0 ? algo(tkns) : algo({} as SeedToken, tkns as MapToken),
  //   antdTheme.defaultSeed
  // ) as MapToken;
  return {
    algorithms: algorithms
  };
};
var detectTokenThemeMode = function detectTokenThemeMode(token) {
  if (!token) {
    return undefined;
  }
  return isDarkColor(token.colorBgBase) ? "dark" : "light";
};

// // Not accurate!
// const filterOutColorTokens = (token: GlobalToken) => {
//   return omitBy(token, (_tokenValue: string, tokenName: keyof GlobalToken) => {
//     return tokenName.startsWith("colorText")
//       || tokenName.startsWith("colorBg")
//       || tokenName.startsWith("colorFill")
//       || tokenName.startsWith("colorBorder")
//       || tokenName as string === "_tokenKey"
//     ;
//   }) as GlobalToken;
// };

var filterBasicTokens = function filterBasicTokens(token) {
  return (0, _pickBy["default"])(token, function (tokenValue, tokenName) {
    return (
      // preserve primary color!
      tokenName === "colorPrimary"
      // seed color tokens - seems fine to reuse
      || ["colorInfo", "colorSuccess", "colorWarning", "colorError", "colorLink"].includes(tokenName)
      // non-color tokens
      || tokenName.startsWith("boxShadow") || tokenName.startsWith("font") || tokenName.startsWith("lineType") || tokenName.startsWith("motion") || typeof tokenValue !== "string"
    );
  });
};
var filterTokens = function filterTokens(token) {
  // return filterOutColorTokens(token);
  return filterBasicTokens(token);
};
var mergeThemes = exports.mergeThemes = function mergeThemes(themeMode, existingToken, themeConfig, algorithms) {
  var tokenThemeMode = detectTokenThemeMode(existingToken);
  var canInheritToken = !themeMode || !existingToken || themeMode == tokenThemeMode;
  var filteredExistingToken = existingToken ? filterTokens(existingToken) : undefined;
  var mergedTheme = _objectSpread(_objectSpread(_objectSpread({}, algorithms.length ? {
    algorithm: algorithms
  } : {}), existingToken ? {
    token: filteredExistingToken
  } : {}), {}, {
    inherit: canInheritToken
  }, themeConfig ? themeConfig : {});
  // logger.log("mergeThemes - antd", {
  //   canInheritToken,
  //   themeMode,
  //   existingToken,
  //   filteredExistingToken,
  //   themeConfig,
  //   mergedTheme,
  // });
  return mergedTheme;
};
var generateCssVars = exports.generateCssVars = function generateCssVars(token, config) {
  var _config$settings$desi, _config$settings$desi2, _config$settings$desi3, _config$settings$desi4, _token$borderRadiusLG, _token$borderRadiusSM;
  // logger.log("generateCssVars - antd token", token);
  var darkMode = isDarkColor(token.colorBgBase);
  var renderSize = config.settings.renderSize;
  var useThickLeftBorderOnHoverItem = (_config$settings$desi = (_config$settings$desi2 = config.settings.designSettings) === null || _config$settings$desi2 === void 0 ? void 0 : _config$settings$desi2.useThickLeftBorderOnHoverItem) !== null && _config$settings$desi !== void 0 ? _config$settings$desi : false;
  var useShadowOnHoverItem = (_config$settings$desi3 = (_config$settings$desi4 = config.settings.designSettings) === null || _config$settings$desi4 === void 0 ? void 0 : _config$settings$desi4.useShadowOnHoverItem) !== null && _config$settings$desi3 !== void 0 ? _config$settings$desi3 : false;
  var sizedBorderRadius;
  switch (renderSize) {
    case "large":
      sizedBorderRadius = (_token$borderRadiusLG = token === null || token === void 0 ? void 0 : token.borderRadiusLG) !== null && _token$borderRadiusLG !== void 0 ? _token$borderRadiusLG : token === null || token === void 0 ? void 0 : token.borderRadius;
      break;
    case "small":
      sizedBorderRadius = (_token$borderRadiusSM = token === null || token === void 0 ? void 0 : token.borderRadiusSM) !== null && _token$borderRadiusSM !== void 0 ? _token$borderRadiusSM : token === null || token === void 0 ? void 0 : token.borderRadius;
      break;
    case "medium":
    default:
      sizedBorderRadius = token === null || token === void 0 ? void 0 : token.borderRadius;
      break;
  }
  var cssVars = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
    "--main-background": token.colorBgContainer,
    "--rule-background": token.colorBgElevated
  }, generateCssVarsForLevels(darkMode, "--group-background", token.colorBgContainer)), generateCssVarsForLevels(darkMode, "--rulegroup-background", token.colorBgContainer)), generateCssVarsForLevels(darkMode, "--rulegroupext-background", token.colorBgContainer)), generateCssVarsForLevels(darkMode, "--switch-background", token.colorBgContainer)), generateCssVarsForLevels(darkMode, "--case-background", token.colorBgContainer)), {}, {
    "--rule-border-color": token.colorBorderSecondary,
    "--group-border-color": token.colorBorder,
    "--rulegroup-border-color": token.colorBorder,
    "--rulegroupext-border-color": token.colorBorder,
    "--switch-border-color": token.colorBorderSecondary,
    "--case-border-color": token.colorBorder,
    "--treeline-color": darkMode ? token.colorPrimaryHover : token.colorPrimaryHover,
    "--treeline-switch-color": darkMode ? token.colorInfo : token.colorInfo,
    "--treeline-disabled-color": token.colorFillSecondary,
    "--main-text-color": token.colorText,
    "--main-font-family": token.fontFamily,
    "--main-font-size": token.fontSize + "px",
    "--item-radius": sizedBorderRadius + "px",
    "--conjunctions-radius": sizedBorderRadius + "px"
  });
  if (useThickLeftBorderOnHoverItem) {
    cssVars = _objectSpread(_objectSpread({}, cssVars), {}, {
      "--rule-border-left-width-hover": "2px",
      "--group-border-left-width-hover": "2px",
      "--rulegroup-border-left-width-hover": "2px",
      "--rulegroupext-border-left-width-hover": "2px"
    });
  }
  if (useShadowOnHoverItem) {
    cssVars = _objectSpread(_objectSpread({}, cssVars), {}, {
      "--rule-shadow-hover": token.boxShadowTertiary,
      "--group-shadow-hover": token.boxShadowTertiary,
      "--rulegroup-shadow-hover": token.boxShadowTertiary,
      "--rulegroupext-shadow-hover": token.boxShadowTertiary
    });
  }
  return cssVars;
};