@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
67 lines (66 loc) • 6.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CanvasProvider = exports.useCanvasThemeToCssVars = exports.defaultBranding = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@emotion/react");
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");
const mappedKeys = {
lightest: 'lightest',
lighter: 'lighter',
light: 'light',
main: 'base',
dark: 'dark',
darkest: 'darkest',
contrast: 'accent',
};
/**
* If you wish to reset the theme to the default, apply this class on the CanvasProvider.
*/
exports.defaultBranding = (0, canvas_kit_styling_1.createStyles)({ name: "1y14f5", styles: "--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-amber-400);--cnvs-brand-common-alert-outer:var(--cnvs-base-palette-amber-500);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-red-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blue-500);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-slate-800);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-slate-700);--cnvs-brand-neutral-base:var(--cnvs-base-palette-slate-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-slate-200);--cnvs-brand-neutral-lighter:var(--cnvs-base-palette-slate-50);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-slate-25);--cnvs-brand-success-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-800);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-700);--cnvs-brand-success-base:var(--cnvs-base-palette-green-600);--cnvs-brand-success-light:var(--cnvs-base-palette-green-200);--cnvs-brand-success-lighter:var(--cnvs-base-palette-green-50);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-25);--cnvs-brand-error-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-error-darkest:var(--cnvs-base-palette-red-800);--cnvs-brand-error-dark:var(--cnvs-base-palette-red-700);--cnvs-brand-error-base:var(--cnvs-base-palette-red-600);--cnvs-brand-error-light:var(--cnvs-base-palette-red-200);--cnvs-brand-error-lighter:var(--cnvs-base-palette-red-50);--cnvs-brand-error-lightest:var(--cnvs-base-palette-red-25);--cnvs-brand-alert-accent:var(--cnvs-base-palette-neutral-900);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-amber-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-amber-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-amber-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-amber-200);--cnvs-brand-alert-lighter:var(--cnvs-base-palette-amber-50);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-amber-25);--cnvs-brand-primary-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blue-800);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blue-700);--cnvs-brand-primary-base:var(--cnvs-base-palette-blue-600);--cnvs-brand-primary-light:var(--cnvs-base-palette-blue-200);--cnvs-brand-primary-lighter:var(--cnvs-base-palette-blue-50);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blue-25);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
const useCanvasThemeToCssVars = (
/**
* @deprecated ⚠️ `theme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
*/
theme, elemProps) => {
const filledTheme = (0, theming_1.useTheme)(theme);
const className = (elemProps.className || '').split(' ').concat(exports.defaultBranding).join(' ');
const style = elemProps.style || {};
const { palette } = filledTheme.canvas;
['common', 'primary', 'error', 'alert', 'success', 'neutral'].forEach(color => {
if (color === 'common') {
['focusOutline', 'alertInner', 'alertOuter', 'errorInner'].forEach(key => {
if (palette.common[key] !== theming_1.defaultCanvasTheme.palette.common[key]) {
//@ts-ignore
style[canvas_tokens_web_1.brand.common.focusOutline] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common.focusOutline);
//@ts-ignore
style[canvas_tokens_web_1.brand.common.alertInner] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common.alertInner);
//@ts-ignore
style[canvas_tokens_web_1.brand.common.alertOuter] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common.alertOuter);
//@ts-ignore
style[canvas_tokens_web_1.brand.common.errorInner] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common.errorInner);
}
});
}
['lightest', 'lighter', '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]]] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette[color][key]);
}
});
});
return { ...elemProps, className, style };
};
exports.useCanvasThemeToCssVars = useCanvasThemeToCssVars;
const CanvasProvider = ({ children, theme = { canvas: {} }, // default to empty theme to avoid breaking changes
...props }) => {
var _a;
const { className, ...elemProps } = (0, exports.useCanvasThemeToCssVars)(theme, props);
const cache = (0, canvas_kit_styling_1.getCache)();
const rest = { ...elemProps, ...props };
return ((0, jsx_runtime_1.jsx)(react_1.CacheProvider, { value: cache, children: (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)("div", { dir: ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || theming_1.defaultCanvasTheme.direction, ...rest, children: children }) }) }));
};
exports.CanvasProvider = CanvasProvider;