Installation

  yarn add @chewy/kib-foundations

Import

  @use '~@chewy/kib-foundations/src/link';
@mixin link($highlight-visited) { ... }@mixin link($highlight-visited) { 
  @if not $highlight-visited {
    #{common.get-property-name('link', 'visited', 'primary')}: settings.$color;
  }

  color: settings.$color;
  background-color: transparent;
  // Default: underline (web standard)
  text-decoration: underline;
  text-decoration-skip: objects;
  text-decoration-skip-ink: auto;
  // Inherit font-weight from parent (makes links bold within strong text)
  font-weight: inherit;

  // Touch devices: remove underline and use strong font weight
  @media (hover: none) and (pointer: coarse) {
    @include typography.style-as('product-text-1', 'strong');
    text-decoration: none;
  }

  @if $highlight-visited {
    &:visited {
      color: settings.$visited-color;

      @media (hover: none) and (pointer: coarse) {
        text-decoration: none;
      }
    }
  }

  &:hover {
    color: settings.$hover-color;
    text-decoration: underline;

    @media (hover: none) and (pointer: coarse) {
      @include typography.style-as('product-text-1', 'strong');
      text-decoration: underline;
    }
  }

  &:active {
    color: settings.$pressed-color;
    text-decoration: underline;

    @media (hover: none) and (pointer: coarse) {
      @include typography.style-as('product-text-1', 'strong');
      text-decoration: underline;
    }
  }

  &:focus,
  &:focus-visible {
    outline-color: settings.$color;
    outline-offset: settings.$focus-outline-offset;

    @media (hover: none) and (pointer: coarse) {
      text-decoration: underline;
    }
  }
 }
Description

Standard navigation link styles generator

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$highlight-visited

true - Adds styles for visited links.

Bool none
Requires
@mixin link-reset() { ... }@mixin link-reset() { 
  display: inline;
  padding: 0;
  appearance: none;
  background-color: transparent;
  border: 0;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;

  @include link;
 }
Description

link style reset

Parameters

None.

Requires
$color: color.get('link', 'active', 'primary') !default;
Description

Link text color

Type

Color

Used by
$visited-color: color.get('link', 'visited', 'primary') !default;
Description

Link visited text color

Type

Color

Used by
$hover-color: color.get('link', 'hover', 'primary') !default;
Description

Link hover text color

Type

Color

Used by
$pressed-color: color.get('link', 'pressed', 'primary') !default;
Description

Link pressed text color

Type

Color

Used by
$focus-outline-offset: spacing.get('s1') !default;
Description

Link focus outline offset

Type

Number

$disabled-opacity: 0.5 !default;
Description

Link disabled opacity

Type

Number