@react-awesome-query-builder/fluent
Version:
User-friendly query builder for React. Fluent 8 widgets
134 lines (130 loc) • 7.65 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.generateCssVars = exports.buildTheme = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _ui = require("@react-awesome-query-builder/ui");
var _react = require("@fluentui/react");
var _omit = _interopRequireDefault(require("lodash/omit"));
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://developer.microsoft.com/en-us/fluentui#/controls/web/themeprovider
//import pick from "lodash/pick";
var _Utils$ColorUtils = _ui.Utils.ColorUtils,
setColorOpacity = _Utils$ColorUtils.setColorOpacity,
generateCssVarsForLevels = _Utils$ColorUtils.generateCssVarsForLevels,
chroma = _Utils$ColorUtils.chroma,
isDarkColor = _Utils$ColorUtils.isDarkColor;
var _Utils$OtherUtils = _ui.Utils.OtherUtils,
logger = _Utils$OtherUtils.logger,
isTruthy = _Utils$OtherUtils.isTruthy;
var darkTheme = {
// https://github.com/microsoft/fluentui/issues/9795#issuecomment-511882323
palette: {
neutralLighterAlt: "#282828",
neutralLighter: "#313131",
neutralLight: "#3f3f3f",
neutralQuaternaryAlt: "#484848",
neutralQuaternary: "#4f4f4f",
neutralTertiaryAlt: "#6d6d6d",
neutralTertiary: "#c8c8c8",
neutralSecondary: "#d0d0d0",
neutralPrimaryAlt: "#dadada",
neutralPrimary: "#ffffff",
neutralDark: "#f4f4f4",
black: "#f8f8f8",
white: "#1f1f1f",
themePrimary: "#3a96dd",
themeLighterAlt: "#020609",
themeLighter: "#091823",
themeLight: "#112d43",
themeTertiary: "#235a85",
themeSecondary: "#3385c3",
themeDarkAlt: "#4ba0e1",
themeDark: "#65aee6",
themeDarker: "#8ac2ec",
accent: "#3a96dd"
}
};
var detectThemeMode = function detectThemeMode(theme) {
if (!theme) {
return undefined;
}
return isDarkColor(theme.semanticColors.inputBackground) ? "dark" : "light";
};
var filterBasicTheme = function filterBasicTheme(theme) {
return _objectSpread(_objectSpread({}, theme), {}, {
palette: _objectSpread({}, (0, _omit["default"])(theme.palette, ["themePrimary", "themeSecondary", "themeTertiary", "themeLighterAlt", "themeLighter", "themeLight", "themeDarkAlt", "themeDark", "themeDarker"]))
});
};
var buildTheme = exports.buildTheme = function buildTheme(config, existingTheme) {
var _config$settings$them;
var themeMode = config.settings.themeMode;
var darkMode = themeMode === "dark";
var themeConfig = (_config$settings$them = config.settings.theme) === null || _config$settings$them === void 0 ? void 0 : _config$settings$them.fluent;
var existingThemeMode = detectThemeMode(existingTheme);
var canCreateTheme = !!themeConfig || darkMode;
if (!canCreateTheme) {
return undefined;
}
var themeForMode = themeMode === "dark" ? darkTheme : undefined;
var filteredExistingTheme = existingTheme ? _objectSpread({}, (0, _omit["default"])(existingTheme, ["id"])) : undefined;
var filteredThemeForMode = themeForMode && existingThemeMode && existingThemeMode != themeMode ? filterBasicTheme(themeForMode) : undefined;
var themesToMerge = [filteredExistingTheme, filteredThemeForMode, themeConfig].filter(isTruthy);
var mergedTheme = themesToMerge.reduce(function (acc, theme) {
return acc ? (0, _react.mergeThemes)(acc, theme) : theme;
}, undefined);
// logger.log("buildTheme - fluent", {
// filteredExistingTheme,
// filteredThemeForMode,
// existingThemeMode,
// themeConfig,
// mergedTheme,
// });
return mergedTheme;
};
var generateCssVars = exports.generateCssVars = function generateCssVars(theme, config) {
var _ref, _isDarkColor, _config$settings$desi, _config$settings$desi2, _config$settings$desi3, _config$settings$desi4;
// logger.log("generateCssVars - Fluent theme", theme);
var fonts = theme.fonts,
effects = theme.effects,
semanticColors = theme.semanticColors;
var darkMode = (_ref = (_isDarkColor = isDarkColor(semanticColors.bodyBackground)) !== null && _isDarkColor !== void 0 ? _isDarkColor : isDarkColor(semanticColors.inputBackground)) !== null && _ref !== void 0 ? _ref : false;
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 cssVars = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
"--main-background": semanticColors.bodyBackground,
"--rule-background": semanticColors.cardStandoutBackground
}, generateCssVarsForLevels(darkMode, "--group-background", semanticColors.defaultStateBackground)), generateCssVarsForLevels(darkMode, "--rulegroup-background", semanticColors.defaultStateBackground)), generateCssVarsForLevels(darkMode, "--rulegroupext-background", semanticColors.defaultStateBackground)), generateCssVarsForLevels(darkMode, "--switch-background", semanticColors.defaultStateBackground)), generateCssVarsForLevels(darkMode, "--case-background", semanticColors.defaultStateBackground)), {}, {
"--rule-border-color": semanticColors.variantBorder,
"--group-border-color": darkMode ? chroma(semanticColors.inputBorder).alpha(0.3).hex() : chroma(semanticColors.inputBorder).alpha(0.3).hex(),
"--rulegroup-border-color": semanticColors.disabledBorder,
"--rulegroupext-border-color": semanticColors.disabledBorder,
"--switch-border-color": semanticColors.disabledBorder,
"--case-border-color": semanticColors.buttonBorder,
"--treeline-color": semanticColors.accentButtonBackground,
"--treeline-switch-color": semanticColors.inputBackgroundCheckedHovered,
"--main-text-color": semanticColors.bodyText,
"--main-font-family": fonts.medium.fontFamily,
"--main-font-size": fonts.medium.fontSize,
"--item-radius": effects.roundedCorner2
});
if (useShadowOnHoverItem) {
cssVars = _objectSpread(_objectSpread({}, cssVars), {}, {
"--rule-shadow-hover": effects.elevation4,
"--group-shadow-hover": effects.elevation4,
"--rulegroup-shadow-hover": effects.elevation4,
"--rulegroupext-shadow-hover": effects.elevation4
});
}
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"
});
}
return cssVars;
};