@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
42 lines (41 loc) • 3.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SystemIconCircle = exports.systemIconCircleStencil = exports.SystemIconCircleSize = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const SystemIcon_1 = require("./SystemIcon");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const Svg_1 = require("./Svg");
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 = exports.SystemIconCircleSize || (exports.SystemIconCircleSize = {}));
exports.systemIconCircleStencil = (0, canvas_kit_styling_1.createStencil)({
vars: {
containerSize: '',
background: '',
color: '',
},
base: { name: "41c50c", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-95f716, var(--cnvs-base-palette-soap-200));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-95f716, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-95f716, var(--cnvs-sys-space-x10));--size-svg-728c60:calc(var(--containerSize-system-icon-circle-95f716, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-99ce3e:var(--color-system-icon-circle-95f716);& img{width:100%;height:100%;}" }
}, "system-icon-circle-95f716");
exports.SystemIconCircle = (0, common_1.createComponent)('span')({
displayName: 'SystemIconCircle',
Component: ({ background, color, size, icon, shouldMirror, ...elemProps }, ref, Element) => {
// `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
const backgroundFallback = background && !background.startsWith('--') ? background : tokens_1.colors.soap200;
const iconColor = (0, common_1.pickForegroundColor)(backgroundFallback, 'rgba(0,0,0,0.65)', tokens_1.colors.frenchVanilla100);
return ((0, jsx_runtime_1.jsx)("div", { ...(0, layout_1.mergeStyles)(elemProps, (0, exports.systemIconCircleStencil)({
containerSize: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : size,
background: (0, Svg_1.transformColorNameToToken)(background),
color: color || iconColor,
})), children: (0, jsx_runtime_1.jsx)(SystemIcon_1.SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror }) }));
},
});