You can use any color from the _colors.css file to style text and background colors for hover and focus states.
Examples
Underline links and animate to color
To keep the default underline, but animate the color transition, combine classes from skins and skins-pseudo.
Change text color on hover
<a href="#" class="link b blue hover-black">hover-black</a>
<a href="#" class="link b black hover-near-black">hover-near-black</a>
<a href="#" class="link b black hover-dark-gray">hover-dark-gray</a>
<a href="#" class="link b black hover-mid-gray">hover-mid-gray</a>
<a href="#" class="link b black hover-gray">hover-gray</a>
<a href="#" class="link b black hover-silver">hover-silver</a>
<a href="#" class="link b black hover-light-silver">hover-light-silver</a>
<a href="#" class="link b black hover-moon-gray">hover-moon-gray</a>
<a href="#" class="link b black hover-light-gray">hover-light-gray</a>
<a href="#" class="link b black hover-near-white">hover-near-white</a>
<a href="#" class="link b black hover-white">hover-white</a>
<a href="#" class="link b black hover-transparent">hover-transparent</a>
<a href="#" class="link b black hover-dark-red">hover-dark-red</a>
<a href="#" class="link b black hover-red">hover-red</a>
<a href="#" class="link b black hover-light-red">hover-light-red</a>
<a href="#" class="link b black hover-orange">hover-orange</a>
<a href="#" class="link b black hover-gold">hover-gold</a>
<a href="#" class="link b black hover-yellow">hover-yellow</a>
<a href="#" class="link b black hover-light-yellow">hover-light-yellow</a>
<a href="#" class="link b black hover-purple">hover-purple</a>
<a href="#" class="link b black hover-light-purple">hover-light-purple</a>
<a href="#" class="link b black hover-dark-pink">hover-dark-pink</a>
<a href="#" class="link b black hover-hot-pink">hover-hot-pink</a>
<a href="#" class="link b black hover-pink">hover-pink</a>
<a href="#" class="link b black hover-light-pink">hover-light-pink</a>
<a href="#" class="link b black hover-dark-green">hover-dark-green</a>
<a href="#" class="link b black hover-green">hover-green</a>
<a href="#" class="link b black hover-light-green">hover-light-green</a>
<a href="#" class="link b black hover-navy">hover-navy</a>
<a href="#" class="link b black hover-dark-blue">hover-dark-blue</a>
<a href="#" class="link b black hover-blue">hover-blue</a>
<a href="#" class="link b black hover-light-blue">hover-light-blue</a>
<a href="#" class="link b black hover-lightest-blue">hover-lightest-blue</a>
<a href="#" class="link b black hover-washed-blue">hover-washed-blue</a>
<a href="#" class="link b black hover-washed-green">hover-washed-green</a>
<a href="#" class="link b black hover-washed-yellow">hover-washed-yellow</a>
<a href="#" class="link b black hover-washed-red">hover-washed-red</a>
Background color transition on hover
<a href="#" class="link b blue pv2 db bg-animate hover-bg-black">bg-animate hover-bg-black</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-near-black">bg-animate hover-bg-near-black</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-gray">bg-animate hover-bg-dark-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-mid-gray">bg-animate hover-bg-mid-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-gray">bg-animate hover-bg-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-silver">bg-animate hover-bg-silver</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-silver">bg-animate hover-bg-light-silver</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-moon-gray">bg-animate hover-bg-moon-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-gray">bg-animate hover-bg-light-gray</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-near-white">bg-animate hover-bg-near-white</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-white">bg-animate hover-bg-white</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-transparent">bg-animate hover-bg-transparent</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-red">bg-animate hover-bg-dark-red</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-red">bg-animate hover-bg-red</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-red">bg-animate hover-bg-light-red</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-orange">bg-animate hover-bg-orange</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-gold">bg-animate hover-bg-gold</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-yellow">bg-animate hover-bg-yellow</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-yellow">bg-animate hover-bg-light-yellow</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-purple">bg-animate hover-bg-purple</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-purple">bg-animate hover-bg-light-purple</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-pink">bg-animate hover-bg-dark-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-hot-pink">bg-animate hover-bg-hot-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-pink">bg-animate hover-bg-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-pink">bg-animate hover-bg-light-pink</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-green">bg-animate hover-bg-dark-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-green">bg-animate hover-bg-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-green">bg-animate hover-bg-light-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-navy">bg-animate hover-bg-navy</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-dark-blue">bg-animate hover-bg-dark-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-blue">bg-animate hover-bg-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-light-blue">bg-animate hover-bg-light-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-lightest-blue">bg-animate hover-bg-lightest-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-blue">bg-animate hover-bg-washed-blue</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-green">bg-animate hover-bg-washed-green</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-yellow">bg-animate hover-bg-washed-yellow</a>
<a href="#" class="link b black pv2 db bg-animate hover-bg-washed-red">bg-animate hover-bg-washed-red</a>
<%= name %>
v<%= moduleVersion %> <%= moduleSize %>- Declarations
- <%= moduleObj.declarations.total %>
- Selectors
- <%= moduleObj.selectors.total %>
- Max. Specificity Score
- <%= moduleObj.selectors.specificity.max %>
- Size of Avg. Rule
- <%= moduleObj.rules.size.average %>
Source code
src/_skins-pseudo.css
<%= srccss %>
<%= navDocs %>