A utility function to get the link styles that belong on a background color.




import { Link, getLinkStylesOn } from 'pcln-design-system'

const Component = styled(Link)`
  ${props => getLinkStylesOn('primary.base')(props)};


colorShadeStringThe full palette color and shade expressed in dot notation, example primary.base.
propsObjectThe props passed to the component, must contain a theme prop.


const StyledLink = styled(Link)`
  ${props => getLinkStylesOn(props.backgroundColor)(props)}

const LinkDemo = ({ backgroundColor, children, ...props }) => (
  <Box color={backgroundColor}>
    <StyledLink backgroundColor={backgroundColor} {...props}>
Example text and light link styling
Example text and default link styling
Example text and dark link styling
<LinkDemo backgroundColor='primary.base'>light link styling</LinkDemo>

<LinkDemo backgroundColor='background.base'>default link styling</LinkDemo>

<LinkDemo backgroundColor='highlight.tone'>dark link styling</LinkDemo>

Pass a full palette color and shade to return the link styles that belong on that color. The above examples demonstrate the styles that are returned in order to make the link accessible on colors that do not meet the theme's contrast ratio (color, on-hover color, text decoration underline, and optional bold font weight).