import { colors as colorTokens , CanvasColor } from '@workday/canvas-kit-react/tokens' ; export type ColorTokens = typeof colorTokens ; /** style props to for color properties */ export type ColorStyleProps = { /** sets `background` property */ background ? : CanvasColor | ( string & { } ) ; /** sets `background-color` property */ backgroundColor ? : CanvasColor | ( string & { } ) ; /** sets `background-image` property */ backgroundImage ? : string ; /** sets `color` property */ color ? : CanvasColor | ( string & { } ) ; } ; const getBackground = ( value ) => ( { background : colorTokens [ value ] || value , } ) ; const getBackgroundColor = ( value ) => ( { backgroundColor : colorTokens [ value ] || value , } ) ; const getBackgroundImage = ( value ) => ( { backgroundImage : value , } ) ; const getColor = ( value ) => ( { color : colorTokens [ value ] || value , } ) ; const colorProps = { background : getBackground , backgroundColor : getBackgroundColor , backgroundImage : getBackgroundImage , color : getColor , } ; example export function color < P extends ColorStyleProps > ( props ) { let styles = { } ; for ( const key in props ) { if ( key in colorProps ) { const value = props [ key as keyof ColorStyleProps ] as CanvasColor | string ; const colorFn = colorProps [ key as keyof ColorStyleProps ] ; const style = colorFn ( value ) ; styles = { ... styles , ... style } ; } } return styles ; }