UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

71 lines (70 loc) 3.4 kB
"use strict"; var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { if (k2 === undefined) k2 = k; var desc = Object.getOwnPropertyDescriptor(m, k); if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { desc = { enumerable: true, get: function() { return m[k]; } }; } Object.defineProperty(o, k2, desc); }) : (function(o, m, k, k2) { if (k2 === undefined) k2 = k; o[k2] = m[k]; })); var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { Object.defineProperty(o, "default", { enumerable: true, value: v }); }) : function(o, v) { o["default"] = v; }); var __importStar = (this && this.__importStar) || function (mod) { if (mod && mod.__esModule) return mod; var result = {}; if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); __setModuleDefault(result, mod); return result; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.AccentIcon = exports.accentIconStencil = exports.accentIconStyles = void 0; const React = __importStar(require("react")); 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: "ojxa12", 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: "ojxa13", styles: "& .french-vanilla-100{fill:transparent;}" } } } }, "accent-icon-f47b2a"); exports.AccentIcon = (0, common_1.createComponent)('span')({ displayName: 'AccentIcon', Component: ({ transparent, size, icon, color, shouldMirror, ...elemProps }, ref, Element) => { return (React.createElement(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, transparent, }), ]) })); }, });