@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
62 lines (61 loc) • 6.03 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { ThemeProvider, CacheProvider } from '@emotion/react';
import { defaultCanvasTheme, useTheme } from './theming';
import { brand, base } from '@workday/canvas-tokens-web';
import { getCache, maybeWrapCSSVariables, createStyles } from '@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.
*/
export const defaultBranding = createStyles({ name: "h3okz", 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%);" });
export 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 = 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') {
['focusOutline', 'alertInner', 'alertOuter', 'errorInner'].forEach(key => {
if (palette.common[key] !== defaultCanvasTheme.palette.common[key]) {
//@ts-ignore
style[brand.common.focusOutline] = maybeWrapCSSVariables(palette.common.focusOutline);
//@ts-ignore
style[brand.common.alertInner] = maybeWrapCSSVariables(palette.common.alertInner);
//@ts-ignore
style[brand.common.alertOuter] = maybeWrapCSSVariables(palette.common.alertOuter);
//@ts-ignore
style[brand.common.errorInner] = 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] !== defaultCanvasTheme.palette[color][key]) {
// @ts-ignore
style[brand[color][mappedKeys[key]]] = maybeWrapCSSVariables(palette[color][key]);
}
});
});
return { ...elemProps, className, style };
};
export const CanvasProvider = ({ children, theme = { canvas: {} }, // default to empty theme to avoid breaking changes
...props }) => {
var _a;
const { className, ...elemProps } = useCanvasThemeToCssVars(theme, props);
const cache = getCache();
const rest = { ...elemProps, ...props };
return (_jsx(CacheProvider, { value: cache, children: _jsx(ThemeProvider, { theme: theme, children: _jsx("div", { dir: ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || defaultCanvasTheme.direction, ...rest, children: children }) }) }));
};