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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { BrandingColor, colors } from '@workday/canvas-kit-react/tokens';
import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { base as baseTokens, system } from '@workday/canvas-tokens-web';
import { CanvasIconTypes } from '@workday/design-assets-types';
import { Svg, svgStencil } from './Svg';
/**
 * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
 */
export const appletIconStyles = ({ color = BrandingColor.Blueberry, }) => {
    // Check if valid color
    if (!Object.keys(BrandingColor)
        .map(color => BrandingColor[color])
        .includes(color)) {
        throw Error(`Color "${color}" not found`);
    }
    const colorNames = {
        100: `${color}100`,
        200: `${color}200`,
        300: `${color}300`,
        400: `${color}400`,
        500: `${color}500`,
    };
    return {
        '& .color-100': {
            fill: system.color.fg.inverse,
        },
        '& .color-200': {
            fill: colors[colorNames[200]],
        },
        '& .color-300': {
            fill: colors[colorNames[300]],
        },
        '& .color-400': {
            fill: colors[colorNames[400]],
        },
        '& .color-400-alpha-20': {
            fill: colors[colorNames[400]],
        },
        '& .color-500': {
            fill: colors[colorNames[500]],
        },
    };
};
/**
 *  @deprecated ⚠️ `appletIconStencil` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
 */
export const appletIconStencil = createStencil({
    extends: svgStencil,
    vars: {
        color200: '',
        color300: '',
        color400: '',
        color500: '',
    },
    base: { name: "2fz62s", styles: "box-sizing:border-box;--size-svg-bca693:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-02002c, var(--cnvs-base-palette-blue-200, oklch(0.8627 0.0701 250.6 / 1)));}& .color-300{fill:var(--color300-applet-icon-02002c, var(--cnvs-base-palette-blue-400, oklch(0.708 0.1549 255.41 / 1)));}& .color-400{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-400-alpha-20{fill:var(--color400-applet-icon-02002c, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));}& .color-500{fill:var(--color500-applet-icon-02002c, var(--cnvs-base-palette-blue-700, oklch(0.4658 0.1562 255.5 / 1)));}" }
}, "applet-icon-02002c");
/**
 *  @deprecated ⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
 */
export const AppletIcon = createComponent('span')({
    displayName: 'AppletIcon',
    Component: ({ size, icon, color, ...elemProps }, ref, Element) => {
        const colors = color && {
            color200: baseTokens.legacy[`${color}200`],
            color300: baseTokens.legacy[`${color}300`],
            color400: baseTokens.legacy[`${color}400`],
            color500: baseTokens.legacy[`${color}500`],
        };
        return (_jsx(Svg, { src: icon, type: CanvasIconTypes.Applet, as: Element, ref: ref, ...handleCsProp(elemProps, [
                appletIconStencil({
                    ...colors,
                    size: size ? px2rem(size) : undefined,
                }),
            ]) }));
    },
    subComponents: {
        Colors: BrandingColor,
    },
});