How to use the @workday/canvas-kit-react-core.colors.soap300 function in @workday/canvas-kit-react-core

render() {
    const {buttonRef, variant, altText, size, url, onClick, ...elemProps} = this.props;

    const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;

    return (
      
        {url ? (
          <img alt="{altText}" src="{url}">
        ) : (

import {Header} from '@workday/canvas-kit-labs-react-header';
import {Button, IconButton} from '@workday/canvas-kit-react-button';
import {AvatarButton} from '@workday/canvas-kit-react-avatar';
import SidePanel from '../index';

interface SidePanelState {
  open: boolean;
}

const ListItem = styled('li')({
  display: 'flex',
  listStyle: 'none',
  alignItems: 'end',
  cursor: 'pointer',
  '&:hover': {
    backgroundColor: colors.soap300,
  },
});
const ListTitle = styled('span')({
  ...type.h4,
  paddingLeft: 24,
});
const UnorderedList = styled('ul')({
  paddingLeft: 0,
});

const listItemOpen = css({
  padding: '15px 24px',
  marginLeft: '-24px',
  marginRight: '-24px',
});

},
  },
  ({background}) => ({
    background: background,
  }),
  ({size}) => ({
    width: size,
    height: size,
  })
);

export default class SystemIconCircle extends React.Component {
  static Size = SystemIconCircleSize;

  static defaultProps = {
    background: colors.soap300,
    size: SystemIconCircleSize.l,
  };

  render() {
    const {background, size, icon, ...elemProps} = this.props;

    const iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)');
    const iconSize = size * 0.625;

    return (
      
        
      
    );
  }
}

case TableRowState.Selected:
        return {
          'th, td': [
            makeColoredRow(colors.blueberry100, colors.blueberry500),
            {
              '&:after': {
                zIndex: 2,
              },
            },
          ],
        };
      default:
        return {
          '&:hover': {
            'th, td': {
              backgroundColor: colors.soap300,
            },
          },
          '&:focus': {
            outline: 'none',
            'th, td': [
              makeColoredRow(colors.blueberry100, colors.blueberry500),
              {
                '&:after': {
                  zIndex: 2,
                },
              },
            ],
          },
        };
    }
  }

render() {
    const {variant, altText, size, url, ...elemProps} = this.props;

    const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
    return (
      
        {url ? (
          <img alt="{altText}" src="{url}">
        ) : (
          
        )}
      
    );
  }
}

({themeColor, collapse}) => {
    const inputColors = getInputColors(themeColor, collapse!);

    const focusStyles = {
      '&:not([disabled])': {
        '&:focus, &:active': {
          outline: 'none',
          boxShadow: inputColors.focusBoxShadow,
          background: inputColors.focusBackground,
          color: colors.blackPepper300,
          '&::placeholder': {
            color: colors.licorice300,
          },
        },
        '&:hover': {
          background: themeColor === HeaderTheme.White && !collapse ? colors.soap300 : undefined,
        },
      },
    };

    const collapseStyles = collapse
      ? {
          ...type.h3,
          fontWeight: 400,
          background: 'transparent',
          padding: `${spacing.xs} 0`,
          margin: `${spacing.xs} ${spacing.s}`,
          maxWidth: 'unset',
          width: `calc(100% - ${spacing.l} - ${spacing.xl})`,
          '&::-webkit-search-cancel-button': {
            display: 'none',
          },

borderColor: colors.blueberry400,
          ...getFillSelector(colors.frenchVanilla100),
          ...getAccentSelector(colors.frenchVanilla100),
        };
      case IconButtonVariant.Square:
        return {
          '&:focus:hover, &:focus, &:active': {
            backgroundColor: 'transparent',
            ...getFillSelector(colors.blueberry400),
            ...getAccentSelector(colors.blueberry400),
          },
          '&:not([disabled]):focus': {
            ...(toggled ? focusRing(2, 0) : {}),
          },
          '&:hover, &:focus:hover': {
            backgroundColor: colors.soap300,
          },
          backgroundColor: colors.frenchVanilla100,
          ...getFillSelector(colors.blueberry400),
          ...getAccentSelector(colors.blueberry400),
        };
      case IconButtonVariant.Circle:
        return {
          '&:active': {
            ...getFillSelector(colors.blueberry400),
            ...getAccentSelector(colors.frenchVanilla100),
          },
          ...getBackgroundSelector(colors.blueberry400),
          ...getFillSelector(colors.blueberry400),
          ...getAccentSelector(colors.frenchVanilla100),
        };
      case IconButtonVariant.CircleFilled:

export const searchThemes: SearchThemes = {
  [SearchTheme.Transparent]: {
    background: 'rgba(0, 0, 0, 0)',
    backgroundFocus: 'rgba(0, 0, 0, 0)',
    color: colors.blackPepper300,
    colorFocus: colors.blackPepper300,
    placeholderColor: colors.licorice300,
    placeholderColorFocus: colors.licorice300,
    boxShadow: 'none',
    boxShadowFocus: 'none',
  },
  [SearchTheme.Light]: {
    background: colors.soap200,
    backgroundFocus: colors.soap200,
    backgroundHover: colors.soap300,
    color: colors.blackPepper300,
    placeholderColor: colors.licorice300,
    boxShadow: 'none',
    boxShadowFocus: focusRing().boxShadow,
  },
  [SearchTheme.Dark]: {
    background: 'rgba(0, 0, 0, 0.2)',
    backgroundFocus: colors.frenchVanilla100,
    color: colors.frenchVanilla100,
    colorFocus: colors.blackPepper300,
    placeholderColor: colors.frenchVanilla100,
    placeholderColorFocus: colors.licorice300,
    boxShadow: 'none',
  },
};