@workday/canvas-kit-react/dist/es6/icon/lib/AccentIcon.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent, getColor } from '@workday/canvas-kit-react/common';
import { colors } from '@workday/canvas-kit-react/tokens';
import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
import { CanvasIconTypes } from '@workday/design-assets-types';
import { Svg, svgStencil } 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. Deprecated in v11.0.0.
 */
export const accentIconStyles = ({ color = colors.blueberry500, transparent = false, }) => ({
    '& .color-500': {
        fill: getColor(color),
    },
    '& .french-vanilla-100': {
        fill: transparent ? 'transparent' : colors.frenchVanilla100,
    },
});
/**
 *  @deprecated ⚠️ `accentIconStencil` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
 */
export const accentIconStencil = createStencil({
    extends: svgStencil,
    vars: {
        color: '',
    },
    base: { name: "11sv9n", styles: "box-sizing:border-box;--size-svg-bca693:3.5rem;& .color-500{fill:var(--color-accent-icon-1046a0, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
    modifiers: {
        transparent: {
            true: { name: "17x7ss", styles: "& .french-vanilla-100{fill:transparent;}" }
        }
    }
}, "accent-icon-1046a0");
/** @deprecated Deprecated in v11 */
const transformColorNameToToken = (color) => {
    const { legacy, sana, ...baseTokens } = base;
    if (color && color in baseTokens) {
        return cssVar(baseTokens[color]);
    }
    if (color === null || color === void 0 ? void 0 : color.startsWith('--')) {
        return cssVar(color);
    }
    return color;
};
/**
 *  @deprecated ⚠️ `AccentIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
 */
export const AccentIcon = createComponent('span')({
    displayName: 'AccentIcon',
    Component: ({ transparent, size, icon, color, shouldMirror, shouldMirrorInRTL, ...elemProps }, ref, Element) => {
        return (_jsx(Svg, { src: icon, type: CanvasIconTypes.Accent, as: Element, ref: ref, ...handleCsProp(elemProps, [
                accentIconStencil({
                    color: transformColorNameToToken(color),
                    size: typeof size === 'number' ? px2rem(size) : undefined,
                    shouldMirror,
                    shouldMirrorInRTL,
                    transparent,
                }),
            ]) }));
    },
});