How to use @instructure/ui-color-utils - 10 common examples

const tagVariant = function (style, {
    borderColor,
    borderRadius,
    borderStyle,
    borderWidth,
    hoverColor,
    iconColor,
    iconHoverColor,
    mainColor,
    textColor
  }) {
    return {
      [`${style}BackgroundHover`]: hoverColor || darken(mainColor, 5),
      [`${style}Background`]: mainColor,
      [`${style}BorderColor`]: borderColor,
      // For 'pill'-style rounded corners
      // https://stackoverflow.com/questions/22578979/border-radius-50-vs-border-radius-999em
      [`${style}BorderRadius`]: borderRadius || '999rem',
      [`${style}BorderStyle`]: borderStyle || borders.style,
      [`${style}BorderWidth`]: borderWidth || borders.widthSmall,
      [`${style}Color`]: textColor,
      [`${style}IconColor`]: iconColor || textColor,
      [`${style}IconHoverColor`]: iconHoverColor || iconColor || textColor
    }
  }

export default function generator ({ colors, typography, borders, spacing }) {
  return {
    fontFamily: typography.fontFamily,
    fontWeight: typography.fontWeightNormal,
    color: colors.textLink,
    textDecoration: 'underline',
    textDecorationOutsideText: 'none',

    focusOutlineWidth: borders.widthMedium,
    focusOutlineColor: colors.borderBrand,
    focusOutlineStyle: borders.style,

    hoverColor: darken(colors.textLink, 10),
    hoverTextDecoration: 'underline',

    colorInverse: colors.textLight,
    focusInverseOutlineColor: colors.borderLightest,
    focusInverseIconOutlineColor: colors.borderLightest,

    iconSize: '1.125em', /* make icon slightly larger than inherited font-size */
    iconPlusTextMargin: spacing.xxSmall
  }
}

export default function generator ({ colors, typography, spacing, forms }) {
  return {
    minWidth: '12.5rem',

    handleSize: '1.5rem',
    handleBackground: colors.backgroundBrand,
    handleShadowColor: darken(colors.borderBrand, 15),

    handleHoverBackground: colors.backgroundBrand,

    handleFocusBackground: colors.backgroundBrand,
    handleFocusOutlineColor: alpha(colors.borderBrand, 40),
    handleFocusOutlineWidth: '0.75em',

    trackBackground: colors.backgroundDark,

    valueBackground: colors.backgroundDarkest,
    valueColor: colors.textLightest,
    valueFontFamily: typography.fontFamily,
    valueFontWeight: typography.fontWeightNormal,

    valueSmallFontSize: typography.fontSizeSmall,
    valueSmallPadding: `0 ${spacing.xSmall}`,

render () {
    const color = '#0084D1'
    return (
       { this._button = c }}
        variant={this.props.variant}
        theme={{
          iconColor: color,
          iconFocusBoxShadow: `inset 0 0 0 1px ${color}`,
          iconHoverColor: color,
          linkColor: color,
          linkHoverColor: darken(color, 10)
        }}
      />
    )
  }
}

generator.canvas = function (variables) {
  return {
    handleBackground: variables['ic-brand-primary'],
    handleShadowColor: darken(variables['ic-brand-primary'], 15),
    handleFocusOutlineColor: alpha(variables['ic-brand-primary'], 40),
    handleHoverBackground: variables['ic-brand-primary'],
    handleFocusBackground: variables['ic-brand-primary'],
    valueBackground: variables['ic-brand-font-color-dark']
  }
}

generator['canvas'] = function (variables) {
  return {
    focusBorder: `${focusOutline} ${variables['ic-brand-primary']}`,

    ghostBorderColor: variables['ic-brand-button--primary-bgd'],
    ghostColor: variables['ic-brand-button--primary-bgd'],
    ghostHoverBackground: alpha(variables['ic-brand-button--primary-bgd'], 10),
    ghostActiveBoxShadow: `inset 0 0 1px 1px ${alpha(variables['ic-brand-button--primary-bgd'], 20)}`,

    linkColor: variables['ic-link-color'],
    linkHoverColor: darken(variables['ic-link-color'], 10),

    iconHoverColor: variables['ic-brand-primary'],
    iconFocusBoxShadow: `${focusShadow} ${variables['ic-brand-primary']}`,

    ...buttonVariant(
      'primary',
      variables['ic-brand-button--primary-bgd'],
      variables['ic-brand-button--primary-text']
    ),

    ...buttonVariant(
      'circlePrimary',
      variables['ic-brand-button--primary-bgd'],
      variables['ic-brand-button--primary-text']
    )
  }

smallPadding: spacing.xSmall,
    smallFontSize: typography.fontSizeSmall,

    mediumHeight: forms.inputHeightMedium,
    mediumPadding: spacing.small,
    mediumFontSize: typography.fontSizeMedium,

    largeHeight: forms.inputHeightLarge,
    largePadding: spacing.medium,
    largeFontSize: typography.fontSizeLarge,

    focusBorder: `${focusOutline} ${colors.borderBrand}`,
    focusShadow: 'none',

    lightBackground: colors.backgroundLightest,
    lightBorderColor: darken(colors.borderLight, 10),
    lightBorderStyle: borders.style,
    lightColor: colors.textDarkest,
    lightHoverBackground: darken(colors.backgroundLightest, 5),
    lightActiveBackground: colors.backgroundLightest,
    lightActiveBoxShadow: `${activeShadow} ${darken(colors.borderLightest, 25)}`,

    ghostBackground: 'transparent',
    ghostBorderColor: colors.borderBrand,
    ghostBorderStyle: borders.style,
    ghostColor: colors.textBrand,
    ghostHoverBackground: alpha(colors.backgroundBrand, 10),
    ghostActiveBackground: 'transparent',
    ghostActiveBoxShadow: `inset 0 0 1px 1px ${alpha(colors.borderBrand, 20)}`,

    ghostInverseBackground: 'transparent',
    ghostInverseBorderColor: colors.borderLightest,

const buttonVariant = function (style, mainColor, textColor) {
  return {
    [`${style}Background`]: mainColor,
    [`${style}BorderColor`]: darken(mainColor, 10),
    [`${style}Color`]: textColor,
    [`${style}HoverBackground`]: darken(mainColor, 10),
    [`${style}ActiveBackground`]: darken(mainColor, 10),
    [`${style}ActiveBoxShadow`]: `${activeShadow} ${darken(mainColor, 20, 0.45)}`
  }
}

const buttonVariant = function (style, mainColor, textColor) {
  return {
    [`${style}Background`]: mainColor,
    [`${style}BorderColor`]: darken(mainColor, 10),
    [`${style}Color`]: textColor,
    [`${style}HoverBackground`]: darken(mainColor, 10),
    [`${style}ActiveBackground`]: darken(mainColor, 10),
    [`${style}ActiveBoxShadow`]: `${activeShadow} ${darken(mainColor, 20, 0.45)}`
  }
}

export default function ({ colors, borders, spacing, typography, stacking }) {
  return {
    fontFamily: typography.fontFamilyMonospace,
    fontSize: typography.fontSizeSmall,
    background: colors.backgroundLight,
    border: `${borders.widthSmall} solid ${colors.borderLight}`,
    borderRadius: borders.radiusMedium,
    focusBorderColor: colors.borderBrand,
    focusBoxShadow: `inset 0 0 0 1px ${colors.borderLightest}`,
    horizontalPadding: spacing.xSmall,
    verticalPadding: spacing.xxSmall,
    color: colors.textDarkest,
    lineNumberColor: colors.textDark,
    gutterBorder: colors.borderLight,
    gutterBackground: darken(colors.backgroundLight, 5),
    gutterMarkerColor: colors.textBrand,
    gutterMarkerSubtleColor: colors.textDark,
    cursorColor: colors.textDarkest,
    secondaryCursorColor: colors.textDark,
    rulerColor: colors.borderDark,
    matchingBracketOutline: colors.textDark,
    nonMatchingBracketColor: colors.textDanger,
    matchingTagBackground: 'rgba(255, 150, 0, 0.3)',
    activeLineBackground: darken(colors.backgroundLight, 5),
    selectedBackground: darken(colors.backgroundLight, 15),
    fatCursorBackground: colors.backgroundSuccess,
    fatCursorMarkBackground: 'rgba(20, 255, 20, 0.5)',
    searchingBackground: 'rgba(255, 255, 0, 0.4)',
    zIndex: stacking.above,

    quoteColor: colors.textSuccess,