@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
87 lines (86 loc) • 3.21 kB
JavaScript
import { borderRadius as borderRadiusTokens, colors as colorTokens, depth as depthTokens, space as spaceTokens, type as typeTokens, } from '@workday/canvas-kit-react/tokens';
import { wrapProperty } from '@workday/canvas-kit-styling';
const getColor = (value) => {
return colorTokens[value] || wrapProperty(value);
};
const getDepth = (value) => {
return depthTokens[value];
};
const getShape = (value) => {
return borderRadiusTokens[value] || wrapProperty(value);
};
const getSpace = (value) => {
return spaceTokens[value] || wrapProperty(value);
};
const getFont = (value) => {
return (typeTokens.properties.fontFamilies[value] ||
wrapProperty(value));
};
const getFontSize = (value) => {
return (typeTokens.properties.fontSizes[value] ||
wrapProperty(value));
};
const getFontWeight = (value) => {
return (typeTokens.properties.fontWeights[value] ||
wrapProperty(value));
};
export function buildStyleFns(styleFnConfigs) {
return styleFnConfigs.reduce((styleFns = {}, styleFnConfig) => {
const styleFn = (value) => {
return styleFnConfig.properties.reduce((styles = {}, property) => {
if (styleFnConfig.system === 'color') {
return { ...styles, [property]: getColor(value) };
}
if (styleFnConfig.system === 'depth') {
// Depth tokens return the style property (box-shadow) and the value
const depthStyle = getDepth(value);
return { ...styles, ...depthStyle };
}
if (styleFnConfig.system === 'font') {
return {
...styles,
[property]: getFont(value),
};
}
if (styleFnConfig.system === 'fontSize') {
return {
...styles,
[property]: getFontSize(value),
};
}
if (styleFnConfig.system === 'fontWeight') {
return {
...styles,
[property]: getFontWeight(value),
};
}
if (styleFnConfig.system === 'shape') {
return {
...styles,
[property]: getShape(value),
};
}
if (styleFnConfig.system === 'space') {
return { ...styles, [property]: getSpace(value) };
}
return { ...styles, [property]: value };
}, {});
};
return { ...styleFns, [styleFnConfig.name]: styleFn };
}, {});
}
export function buildStylePropFn(styleFns) {
return (props) => {
let styles = {};
for (const key in props) {
if (key in props && key in styleFns) {
const styleFn = styleFns[key];
const value = props[key];
const style = styleFn(value);
styles = { ...styles, ...style };
continue;
}
}
return styles;
};
}