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
-
A11y action > Update Link component documentati... (#880 - closed) -
Define usage guidelines for text styles for emp... (#1217 - closed) -
Underline text links in markdown (gitlab-org/gitlab-ui#1084) -
Link: Update state colors used (#1536) -
Using icons in links (#1554)
Related to
Edited by Dan MH