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

// States
    '&:not(:checked):not(:disabled):not(:focus):hover ~ div:first-of-type': {
      borderColor: inputColors.hoverBorder,
    },
    '&:checked ~ div:first-of-type': {
      borderColor: colors.blueberry400,
      backgroundColor: colors.blueberry400,
    },
    '&:disabled ~ div:first-of-type': {
      borderColor: inputColors.disabled.border,
      backgroundColor: inputColors.disabled.background,
    },
    '&:disabled:checked ~ div:first-of-type': {
      borderColor: colors.blueberry200,
      backgroundColor: colors.blueberry200,
    },

    // Focus
    '&:focus, &:active': {
      outline: 'none',
    },
    '&:focus ~ div:first-of-type': {
      borderColor: colors.blueberry400,
      borderWidth: '2px',
      zIndex: 2,
      boxShadow: 'none',
    },
    '&:checked:focus ~ div:first-of-type': {
      ...focusRing(2, 2, false),
      '& span': {
        marginLeft: '-7px',

fill: iconColors.hover,
          },
        },
      };
    } else if (isDisabled && !isFocused) {
      return {
        color: colors.licorice100,
        cursor: 'default',
        '&:hover .wd-icon-fill': {
          fill: iconColors.disabled,
        },
      };
    } else {
      // Is focused or focused and disabled
      return {
        backgroundColor: isDisabled ? colors.blueberry200 : commonColors.focusBackground,
        color: typeColors.inverse,
        'span .wd-icon-fill': {
          fill: iconColors.inverse,
        },
        [`[data-whatinput='mouse'] &,
          [data-whatinput='touch'] &,
          [data-whatinput='pointer'] &`]: {
          backgroundColor: 'inherit',
          color: colors.blackPepper300,
          '&:hover': {
            backgroundColor: commonColors.hoverBackground,
            '.wd-icon-fill': {
              fill: iconColors.hover,
            },
          },
          '.wd-icon-fill': {

},

    // States
    '&:not(:checked):not(:disabled):not(:focus):hover ~ div:first-of-type': {
      borderColor: inputColors.hoverBorder,
    },
    '&:checked ~ div:first-of-type': {
      borderColor: colors.blueberry400,
      backgroundColor: colors.blueberry400,
    },
    '&:disabled ~ div:first-of-type': {
      borderColor: inputColors.disabled.border,
      backgroundColor: inputColors.disabled.background,
    },
    '&:disabled:checked ~ div:first-of-type': {
      borderColor: colors.blueberry200,
      backgroundColor: colors.blueberry200,
    },

    // Focus
    '&:focus, &:active': {
      outline: 'none',
    },
    '&:focus ~ div:first-of-type': {
      borderColor: colors.blueberry400,
      borderWidth: '2px',
      zIndex: 2,
      boxShadow: 'none',
    },
    '&:checked:focus ~ div:first-of-type': {
      ...focusRing(2, 2, false),
      '& span': {

test('accent and fill props override color if set', () => {
    const color = 'peachpuff';
    const colorHover = 'goldenrod';
    const accent = colors.blueberry200;
    const accentHover = colors.blueberry500;
    const fill = colors.cinnamon200;
    const fillHover = colors.cinnamon500;
    const componentStyle = systemIconStyles({
      color,
      colorHover,
      accent,
      accentHover,
      fill,
      fillHover,
    });
    expect(componentStyle['& .wd-icon-fill']).toHaveProperty('fill', fill);
    expect(componentStyle[':hover .wd-icon-fill']).toHaveProperty('fill', fillHover);
    expect(componentStyle['& .wd-icon-accent']).toHaveProperty('fill', accent);
    expect(componentStyle[':hover .wd-icon-accent']).toHaveProperty('fill', accentHover);
  });

systemIcon: {
      color: iconColors.standard,
      colorHover: iconColors.hover,
    },
    linkColor: colors.blackPepper400,
    linkFadeOutColor: colors.licorice200,
    currentLinkColor: colors.blueberry500,
    chipColor: colors.blueberry400,
  },
  [HeaderTheme.Blue]: {
    color: colors.frenchVanilla100,
    background: colors.gradients.blueberry,
    depth: depth['3'],
    systemIcon: {
      color: colors.frenchVanilla100,
      colorHover: colors.blueberry200,
    },
    linkColor: colors.frenchVanilla100,
    linkFadeOutColor: chroma(colors.frenchVanilla100)
      .alpha(0.5)
      .css(),
    currentLinkColor: colors.frenchVanilla100,
    chipColor: colors.frenchVanilla100,
  },
  [HeaderTheme.Transparent]: {
    color: colors.frenchVanilla100,
    background: 'transparent',
    depth: {boxShadow: 'none'},
    systemIcon: {
      color: colors.frenchVanilla100,
      colorHover: colors.blueberry200,
    },

},
    },
    ...mouseFocusBehavior({
      '&:focus ~ div:first-of-type': {
        border: `1px solid ${inputColors.border}`,
        boxShadow: 'none',
        '& span': {
          marginLeft: '-6px',
        },
      },
      '&:checked ~ div:first-of-type': {
        borderColor: colors.blueberry400,
      },
      '&:disabled:checked ~ div:first-of-type': {
        borderColor: colors.blueberry200,
        backgroundColor: colors.blueberry200,
      },
    }),
  },
  ({error}) => {
    let errorRingColor;
    let errorRingBorderColor = 'transparent';

    if (error === ErrorType.Error) {
      errorRingColor = inputColors.error.border;
    } else if (error === ErrorType.Alert) {
      errorRingColor = inputColors.warning.border;
      errorRingBorderColor = colors.cantaloupe600;
    } else {
      return;
    }

colorHover: colors.blueberry200,
    },
    linkColor: colors.frenchVanilla100,
    linkFadeOutColor: chroma(colors.frenchVanilla100)
      .alpha(0.5)
      .css(),
    currentLinkColor: colors.frenchVanilla100,
    chipColor: colors.frenchVanilla100,
  },
  [HeaderTheme.Transparent]: {
    color: colors.frenchVanilla100,
    background: 'transparent',
    depth: {boxShadow: 'none'},
    systemIcon: {
      color: colors.frenchVanilla100,
      colorHover: colors.blueberry200,
    },
    linkColor: colors.frenchVanilla100,
    linkFadeOutColor: chroma(colors.frenchVanilla100)
      .alpha(0.5)
      .css(),
    currentLinkColor: colors.frenchVanilla100,
    chipColor: colors.frenchVanilla100,
  },
};

export interface SearchThemeAttributes {
  background?: string;
  backgroundFocus?: string;
  backgroundHover?: string;
  color?: string;
  colorFocus?: string;

marginLeft: '-7px',
      },
    },
    ...mouseFocusBehavior({
      '&:focus ~ div:first-of-type': {
        border: `1px solid ${inputColors.border}`,
        boxShadow: 'none',
        '& span': {
          marginLeft: '-6px',
        },
      },
      '&:checked ~ div:first-of-type': {
        borderColor: colors.blueberry400,
      },
      '&:disabled:checked ~ div:first-of-type': {
        borderColor: colors.blueberry200,
        backgroundColor: colors.blueberry200,
      },
    }),
  },
  ({error}) => {
    let errorRingColor;
    let errorRingBorderColor = 'transparent';

    if (error === ErrorType.Error) {
      errorRingColor = inputColors.error.border;
    } else if (error === ErrorType.Alert) {
      errorRingColor = inputColors.warning.border;
      errorRingBorderColor = colors.cantaloupe600;
    } else {
      return;
    }