@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
44 lines (43 loc) • 2.04 kB
JavaScript
import * as React from 'react';
import { colors } from '@workday/canvas-kit-react/tokens';
import { CanvasIconTypes } from '@workday/design-assets-types';
import { createComponent, getColor } from '@workday/canvas-kit-react/common';
import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { base } from '@workday/canvas-tokens-web';
import { Svg, svgStencil, transformColorNameToToken } from './Svg';
/**
* @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead.
*/
export const accentIconStyles = ({ color = colors.blueberry500, transparent = false, }) => ({
'& .color-500': {
fill: getColor(color),
},
'& .french-vanilla-100': {
fill: transparent ? 'transparent' : colors.frenchVanilla100,
},
});
export const accentIconStencil = createStencil({
extends: svgStencil,
vars: {
color: '',
},
base: { name: "d5h412", styles: "box-sizing:border-box;--size-svg-a30d66:3.5rem;& .color-500{fill:var(--color-accent-icon-f47b2a, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
modifiers: {
transparent: {
true: { name: "d5h413", styles: "& .french-vanilla-100{fill:transparent;}" }
}
}
}, "accent-icon-f47b2a");
export const AccentIcon = createComponent('span')({
displayName: 'AccentIcon',
Component: ({ transparent, size, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
return (React.createElement(Svg, { src: icon, type: CanvasIconTypes.Accent, as: Element, ref: ref, ...handleCsProp(elemProps, [
accentIconStencil({
color: transformColorNameToToken(color),
size: typeof size === 'number' ? px2rem(size) : undefined,
shouldMirror,
transparent,
}),
]) }));
},
});