Skip to content

Link > Finalise design specs

Issue to track efforts to finalise the design specs for links

Proposed link styles

The following documents the intention, rather than the prescription for the actual CSS to be used.

Class names placeholder to make it easier to read.

There are certainly better ways to achieve the same thing.

Play with the styles in context in this codepen.


// Inline links assumed the default

a {
  color: $blue-700;
  text-decoration: underline;
  text-decoration-color: rgba($blue-700, .72);   // allows underline tone to match background
  text-underline-offset: 2px;                    // we should make this a relative value, 
                                                 // as it breaks when the browser font size is changed 
  transition: background-color 100ms linear, color 100ms linear,
               border 100ms linear, text-decoration-color 100ms linear; 
                                                 // builds on existing link transition styles, adds text-decoration-color
  
  &:hover {
    color: $blue-800;
    text-decoration: underline !important;       // allows other link types to have underline on hover
                                                 // even if they have text-decoration: none for the rest state
    text-decoration-color: currentColor;
  }
  
  &:focus-visible {
    color: $blue-800;
    text-decoration: underline !important;
    text-decoration-color: currentColor;
    outline: 2px solid #428fdc;   // existing focus styles
    outline-offset: 2px;          // existing focus styles
  }
  
  &:active {
    color: $blue-900;
    text-decoration: underline;
    text-decoration-color: currentColor;
    transition: none;             // makes the click or press feel snappy
  }
}

a.ui-link {
  text-decoration: none;          // no underline in rest state
}

a.meta-link {
  text-decoration: none;
  
  &.meta-link-dark {
    color: $grey-900;
    &:hover {color: $grey-950;}
    &:active {color: $black;}
  }
  
  &.meta-link-subdued {
    color: $grey-700;
    &:hover {color: $grey-800;}
    &:active {color: $grey-900;}
  }
}

a.mention {
  padding: 0 2px;                // these are no change from existing styles
  background-color: $blue-100;
  border-radius: 4px;
  text-decoration: none;
  
  &.mention-current {
    background-color: $orange-100;
  }
}

Rational

Why blue-700
Why opacity
Why underline at all
etc
etc

Next

Unblocks

Related to

Edited by Dan MH