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

// This is necessary because we're using max-width: 100% in the CheckboxCheck container
      // in order for the Checkbox to render properly on IE 11
      marginLeft: '-6px',
      transition: 'margin 200ms ease',
    },
  },
  ({checked}) => ({
    opacity: checked ? 1 : 0,
    transform: checked ? 'scale(1)' : 'scale(0.5)',
  })
);

const IndeterminateBox = styled('div')({
  width: '10px',
  height: '2px',
  backgroundColor: canvas.colors.frenchVanilla100,
});

const CheckboxLabel = styled('label')<{disabled?: boolean}>(
  {
    ...canvas.type.body,
    paddingLeft: checkboxLabelDistance,
  },
  ({disabled}) => (disabled ? {color: inputColors.disabled.text} : {cursor: 'pointer'})
);

export default class Checkbox extends React.Component {
  static ErrorType = ErrorType;

  public static defaultProps = {
    checked: false,
    label: '',

labelIcon?: string;
  labelIconActive?: string;
  labelIconDisabled?: string;
  labelIconFocus?: string;
  labelIconHover?: string;
}

export type ButtonColorCollection = {[key in AllButtonVariants]: GenericButtonColors | null};

export const ButtonColors: ButtonColorCollection = {
  // TODO (beta button): remove in favor of beta buttons, consider moving from design-assets too
  [DeprecatedButtonVariant.Primary]: canvas.buttonColors.primary,
  [DeprecatedButtonVariant.Secondary]: canvas.buttonColors.secondary,
  [DeprecatedButtonVariant.Delete]: {
    ...canvas.buttonColors.delete,
    focusBorder: canvas.colors.cinnamon500,
    activeBorder: canvas.colors.cinnamon500,
  },
  [ButtonVariant.Primary]: {
    background: canvas.colors.blueberry400,
    border: 'transparent',
    text: canvas.colors.frenchVanilla100,
    activeBackground: canvas.colors.blueberry600,
    activeBorder: 'transparent',
    activeText: canvas.colors.frenchVanilla100,
    disabledBackground: canvas.colors.blueberry200,
    disabledBorder: 'transparent',
    disabledText: canvas.colors.frenchVanilla100,
    focusBackground: canvas.colors.blueberry400,
    focusBorder: 'transparent',
    focusText: canvas.colors.frenchVanilla100,
    hoverBackground: canvas.colors.blueberry500,

({diagonal, topPosition, width}) => {
    const backgroundPositionAnimation = keyframes({
      from: {
        left: `-${diagonal}px`,
      },
      to: {
        left: `${diagonal + width}px`,
      },
    });

    return {
      animation: `${backgroundPositionAnimation} ${DURATION}s ease-in-out infinite`,
      background: `linear-gradient(130deg, rgba(255,255,255,0) ${TRANSPARENCY_POSITION}%, ${
        canvas.colors.frenchVanilla100
      }, rgba(255,255,255,0)  ${TRANSPARENCY_POSITION + WHITE_SHEEN_WIDTH}%)`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: `${diagonal}px ${diagonal}px`,
      width: diagonal,
      height: diagonal,
      top: topPosition,
      position: 'absolute',
    };
  }
);

private readonly createTextLines = () => {
    const {lineCount} = this.props;
    const lines = [];

    const lineProps = {
      backgroundColor: canvas.colors.soap200,
      borderRadius: TEXT_BORDER_RADIUS,
      height: '21px',
      width: '100%',
    };

    for (let i = 0; i < lineCount; i++) {
      lines.push(

export default function focusRing(
  ringWidth: number = 2,
  separationWidth: number = 0,
  animate: boolean = true,
  inset: boolean = false,
  innerShadowColor: string = canvas.colors.frenchVanilla100,
  outerShadowColor: string = canvas.commonColors.focusOutline,
  memoizeCalculation: boolean = true
): CSSObject {
  const argsToPass: FocusRingParams = {
    ringWidth,
    separationWidth,
    animate,
    inset,
    innerShadowColor,
    outerShadowColor,
  };

  if (memoizeCalculation) {
    return memoizedFocusRing(argsToPass);
  }

}>(({width, height, borderRadius}) => {
  return {
    width: width ? width : '100%',
    height: height ? height : '100%',
    borderRadius: borderRadius ? borderRadius : 0,
    backgroundColor: canvas.colors.soap200,
    marginBottom: BOTTOM_MARGIN,
  };
});

transform: scale(1);
}`;

type LoadingDotProps = {
  /**
   * The animation-delay value, in ms, for the loading dots.
   */
  animationDelay: number;
};

/**
 * The actual loading dot div.
 */
const LoadingAnimationDot = styled('div')(
  {
    backgroundColor: canvas.colors.soap400,
    width: canvas.spacing.s,
    height: canvas.spacing.s,
    fontSize: '0px',
    borderRadius: borderRadius.circle,
    transform: 'scale(0)',
    display: 'inline-block',
    marginRight: canvas.spacing.xxs,
    animationName: keyframesLoading,
    animationDuration: '1400ms',
    animationIterationCount: 'infinite',
    animationTimingFunction: 'ease-in-out',
    animationFillMode: 'both',
    '&:last-child': {
      marginRight: 0,
    },
  },

labelIconHover: canvas.colors.frenchVanilla100,
    labelIconActive: canvas.colors.frenchVanilla100,
    labelIconFocus: canvas.colors.frenchVanilla100,
    labelIconDisabled: canvas.colors.frenchVanilla100,
  },
  [ButtonVariant.Secondary]: {
    background: canvas.colors.soap200,
    border: 'transparent',
    text: canvas.colors.blackPepper400,
    activeBackground: canvas.colors.soap500,
    activeBorder: 'transparent',
    activeText: canvas.colors.blackPepper400,
    disabledBackground: canvas.colors.soap100,
    disabledBorder: 'transparent',
    disabledText: canvas.colors.licorice100,
    focusBackground: canvas.colors.soap200,
    focusBorder: 'transparent',
    focusText: canvas.colors.blackPepper400,
    hoverBackground: canvas.colors.soap400,
    hoverBorder: 'transparent',
    hoverText: canvas.colors.blackPepper400,
    labelIcon: canvas.colors.licorice200,
    labelIconHover: canvas.colors.licorice500,
    labelIconActive: canvas.colors.licorice500,
    labelIconFocus: canvas.colors.licorice200,
    labelIconDisabled: canvas.colors.soap600,
    labelData: canvas.colors.blackPepper400,
    labelDataDisabled: canvas.colors.licorice100,
  },
  [ButtonVariant.Delete]: {
    background: canvas.colors.cinnamon500,
    border: canvas.colors.cinnamon500,