@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
82 lines (81 loc) • 3.87 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createCanvasTheme = exports.shiftColor = void 0;
const chroma_js_1 = __importDefault(require("chroma-js"));
const canvas_colors_web_1 = __importDefault(require("@workday/canvas-colors-web"));
const theme_1 = require("./theme");
const types_1 = require("./types");
const utils_1 = require("../utils");
// Should these be exported?
const deepMerge_1 = require("../utils/deepMerge");
const memoize_1 = require("../utils/memoize");
exports.shiftColor = (0, memoize_1.memoize)((hexColor, amount = 100) => {
const canvasColor = Object.keys(canvas_colors_web_1.default).find(color => canvas_colors_web_1.default[color] === hexColor);
if (canvasColor) {
const colorRegex = /([a-zAz]*)(\d{3})/g;
const match = colorRegex.exec(canvasColor);
if (match) {
const baseColor = match[1];
const shadeNumber = parseInt(match[2], 10);
const newShade = shadeNumber + amount;
if (newShade >= 100 && newShade <= 600) {
return canvas_colors_web_1.default[(baseColor + newShade)];
}
}
}
try {
const newColor = amount > 0
? (0, chroma_js_1.default)(hexColor).darken(amount / 100)
: (0, chroma_js_1.default)(hexColor).brighten(-amount / 100);
return newColor.hex();
}
catch (e) {
console.warn(`Invalid color '${hexColor}' used in theme`);
return hexColor;
}
}, (color, value) => `${color}.${value}`);
function fillPalette(defaultPalette, palette) {
if (!palette) {
return {};
}
const main = palette.main || defaultPalette.main;
const dark = palette.dark || (palette.main && (0, exports.shiftColor)(palette.main, 100)) || defaultPalette.dark;
const darkest = palette.darkest || (palette.main && (0, exports.shiftColor)(palette.main, 200)) || defaultPalette.darkest;
const light = palette.light || (palette.main && (0, exports.shiftColor)(palette.main, -100)) || defaultPalette.light;
const lightest = palette.lightest || (palette.main && (0, exports.shiftColor)(palette.main, -200)) || defaultPalette.lightest;
const contrast = palette.contrast || (0, utils_1.pickForegroundColor)(main) || defaultPalette.contrast;
return {
lightest,
light,
main,
dark,
darkest,
contrast,
};
}
function calculateCanvasTheme(partialTheme) {
const { palette = {}, breakpoints = {}, direction, ...extraFields } = partialTheme;
const { primary, alert, error, success, neutral, common = {} } = palette;
const mergeable = {
palette: {
common,
primary: fillPalette(theme_1.defaultCanvasTheme.palette.primary, primary),
alert: fillPalette(theme_1.defaultCanvasTheme.palette.alert, alert),
error: fillPalette(theme_1.defaultCanvasTheme.palette.error, error),
success: fillPalette(theme_1.defaultCanvasTheme.palette.success, success),
neutral: fillPalette(theme_1.defaultCanvasTheme.palette.neutral, neutral),
},
breakpoints,
direction: direction === types_1.ContentDirection.RTL ? direction : types_1.ContentDirection.LTR,
};
return (0, deepMerge_1.deepMerge)((0, deepMerge_1.deepMerge)({}, theme_1.defaultCanvasTheme), { ...mergeable, ...extraFields });
}
/**
* Creates a full {@link CanvasTheme} from any partial theme by deeply merging with the
* `defaultCanvasTheme` object. The function is memoized, but it is best to run this function
* only once and save the result.
*/
exports.createCanvasTheme = (0, memoize_1.memoize)(calculateCanvasTheme, (...args) => JSON.stringify(args));