@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
49 lines (48 loc) • 2.43 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccentIcon = exports.accentIconStencil = exports.accentIconStyles = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const design_assets_types_1 = require("@workday/design-assets-types");
const common_1 = require("@workday/canvas-kit-react/common");
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");
/**
* @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.
*/
const accentIconStyles = ({ color = tokens_1.colors.blueberry500, transparent = false, }) => ({
'& .color-500': {
fill: (0, common_1.getColor)(color),
},
'& .french-vanilla-100': {
fill: transparent ? 'transparent' : tokens_1.colors.frenchVanilla100,
},
});
exports.accentIconStyles = accentIconStyles;
exports.accentIconStencil = (0, canvas_kit_styling_1.createStencil)({
extends: Svg_1.svgStencil,
vars: {
color: '',
},
base: { name: "2ehqkp", styles: "box-sizing:border-box;--size-svg-8fcab8:3.5rem;& .color-500{fill:var(--color-accent-icon-05e3c8, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
modifiers: {
transparent: {
true: { name: "3rzgwq", styles: "& .french-vanilla-100{fill:transparent;}" }
}
}
}, "accent-icon-05e3c8");
exports.AccentIcon = (0, common_1.createComponent)('span')({
displayName: 'AccentIcon',
Component: ({ transparent, size, icon, color, shouldMirror, shouldMirrorInRTL, ...elemProps }, ref, Element) => {
return ((0, jsx_runtime_1.jsx)(Svg_1.Svg, { src: icon, type: design_assets_types_1.CanvasIconTypes.Accent, as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
(0, exports.accentIconStencil)({
color: (0, Svg_1.transformColorNameToToken)(color),
size: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : undefined,
shouldMirror,
shouldMirrorInRTL,
transparent,
}),
]) }));
},
});