@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
75 lines (74 loc) • 5.98 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CanvasProvider = exports.useCanvasThemeToCssVars = void 0;
const React = __importStar(require("react"));
const react_1 = require("@emotion/react");
const InputProvider_1 = require("./InputProvider");
const theming_1 = require("./theming");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
// copied from brand/_variables.css
const defaultBranding = (0, canvas_kit_styling_1.createStyles)({ name: "ojxa3", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
const mappedKeys = {
lightest: 'lightest',
light: 'light',
main: 'base',
dark: 'dark',
darkest: 'darkest',
contrast: 'accent',
};
const useCanvasThemeToCssVars = (theme, elemProps) => {
const filledTheme = (0, theming_1.useTheme)(theme);
const className = (elemProps.className || '').split(' ').concat(defaultBranding).join(' ');
const style = elemProps.style || {};
const { palette } = filledTheme.canvas;
['common', 'primary', 'error', 'alert', 'success', 'neutral'].forEach(color => {
if (color === 'common') {
// @ts-ignore
style[canvas_tokens_web_1.brand.common.focusOutline] = palette.common.focusOutline;
}
['lightest', 'light', 'main', 'dark', 'darkest', 'contrast'].forEach(key => {
// We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest.
// @ts-ignore
if (palette[color][key] !== theming_1.defaultCanvasTheme.palette[color][key]) {
// @ts-ignore
style[canvas_tokens_web_1.brand[color][mappedKeys[key]]] = palette[color][key];
}
});
});
return { ...elemProps, className, style };
};
exports.useCanvasThemeToCssVars = useCanvasThemeToCssVars;
const CanvasProvider = ({ children, theme = { canvas: theming_1.defaultCanvasTheme }, ...props }) => {
var _a;
const elemProps = (0, exports.useCanvasThemeToCssVars)(theme, props);
const cache = (0, canvas_kit_styling_1.getCache)();
return (React.createElement(react_1.CacheProvider, { value: cache },
React.createElement(react_1.ThemeProvider, { theme: theme },
React.createElement(InputProvider_1.InputProvider, null),
React.createElement("div", { dir: ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || theming_1.defaultCanvasTheme.direction, ...elemProps }, children))));
};
exports.CanvasProvider = CanvasProvider;