src/utils/mixins.js
function underlinedLink(linkColor = colors.textPrimary) {
  const underlineOffset = 2;
  const underlineWeight = 1;
  const backgroundColor = colors.bgPrimary;
  const underlineColor = rgba(linkColor, 0.4);

  return {
    color: linkColor,
    position: "relative",
    textDecoration: "none",
    transition: `color ${timing.fast} ease`,

    // Draw the underline with a background gradient
    backgroundImage: `linear-gradient(
      to top,
      transparent,
      transparent ${underlineOffset}px,
      ${underlineColor} ${underlineOffset}px,
      ${underlineColor} ${(underlineOffset + underlineWeight)}px,
      transparent ${(underlineOffset + underlineWeight)}px
    )`,

    // Create breaks in the underline
    textShadow: `-1px -1px 0 ${backgroundColor},
      1px -1px 0 ${backgroundColor},
      -1px 1px 0 ${backgroundColor},
      1px 1px 0 ${backgroundColor}`,
  };
}
function underlinedLink(linkColor = colors.textPrimary) {
  const underlineOffset = 2;
  const underlineWeight = 1;
  const backgroundColor = colors.bgPrimary;
  const underlineColor = rgba(linkColor, 0.4);

  return {
    color: linkColor,
    position: "relative",
    textDecoration: "none",
    transition: `color ${timing.fast} ease`,

    // Draw the underline with a background gradient
    backgroundImage: `linear-gradient(
      to top,
      transparent,
      transparent ${underlineOffset}px,
      ${underlineColor} ${underlineOffset}px,
      ${underlineColor} ${(underlineOffset + underlineWeight)}px,
      transparent ${(underlineOffset + underlineWeight)}px
    )`,

    // Create breaks in the underline
    textShadow: `-1px -1px 0 ${backgroundColor},
      1px -1px 0 ${backgroundColor},
      -1px 1px 0 ${backgroundColor},
      1px 1px 0 ${backgroundColor}`,
  };
}
function underlinedLink ( linkColor = colors . textPrimary ) { const underlineOffset = 2 ; const underlineWeight = 1 ; const backgroundColor = colors . bgPrimary ; const underlineColor = rgba ( linkColor , 0.4 ) ; return { color : linkColor , position : "relative" , textDecoration : "none" , transition : ` ${ timing . fast } ` , // Draw the underline with a background gradient backgroundImage : ` ${ underlineOffset } ${ underlineColor } ${ underlineOffset } ${ underlineColor } ${ ( underlineOffset + underlineWeight ) } ${ ( underlineOffset + underlineWeight ) } ` , // Create breaks in the underline textShadow : ` ${ backgroundColor } ${ backgroundColor } ${ backgroundColor } ${ backgroundColor } ` , } ; }
Creates a nicely underlined hyperlink
@param  {String} linkColor Link color
@return {Object}           CSS styles object
Creates a nicely underlined hyperlink