@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
39 lines (38 loc) • 2.85 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { colors } from '@workday/canvas-kit-react/tokens';
import { SystemIcon, systemIconStencil } from './SystemIcon';
import { createComponent, pickForegroundColor } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { transformColorNameToToken } from './Svg';
export var SystemIconCircleSize;
(function (SystemIconCircleSize) {
SystemIconCircleSize[SystemIconCircleSize["xs"] = 16] = "xs";
SystemIconCircleSize[SystemIconCircleSize["s"] = 24] = "s";
SystemIconCircleSize[SystemIconCircleSize["m"] = 32] = "m";
SystemIconCircleSize[SystemIconCircleSize["l"] = 40] = "l";
SystemIconCircleSize[SystemIconCircleSize["xl"] = 64] = "xl";
SystemIconCircleSize[SystemIconCircleSize["xxl"] = 120] = "xxl";
})(SystemIconCircleSize || (SystemIconCircleSize = {}));
export const systemIconCircleStencil = createStencil({
vars: {
containerSize: '',
background: '',
color: '',
},
base: { name: "329sl4", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-308b31, var(--cnvs-sys-color-bg-alt-soft));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-308b31, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-308b31, var(--cnvs-sys-space-x10));--size-svg-8fcab8:calc(var(--containerSize-system-icon-circle-308b31, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-3a4847:var(--color-system-icon-circle-308b31);& img{width:100%;height:100%;}" }
}, "system-icon-circle-308b31");
export const SystemIconCircle = createComponent('span')({
displayName: 'SystemIconCircle',
Component: ({ background, color, size, icon, shouldMirror, shouldMirrorInRTL, ...elemProps }, ref, Element) => {
// `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
const backgroundFallback = background && !background.startsWith('--') ? background : colors.soap200;
const iconColor = pickForegroundColor(backgroundFallback, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
return (_jsx("div", { ...mergeStyles(elemProps, systemIconCircleStencil({
containerSize: typeof size === 'number' ? px2rem(size) : size,
background: transformColorNameToToken(background),
color: color || iconColor,
})), children: _jsx(SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror, shouldMirrorInRTL: shouldMirrorInRTL }) }));
},
});