Colors ΒΆ
Sass variables are available for standard colors and gradients.
Plain colors
Variables
Note that we intentionally avoid true black (#000000
)
because of its unnatural appearance on locally dimmed
LED screens. Please prefer $natural-black
instead.
$natural-black
$darker-gray
$dark-gray
$gray
$light-gray
$lighter-gray
$white
$ted-red
Class Names
When possible, use class names to apply colors. The following class names can be used, with the mnemonics "bg" for background and "fg" for foreground.
fg-black
fg-dark-gray
fg-natural-black
fg-darker-gray
fg-dark-gray
fg-gray
fg-light-gray
fg-lighter-gray
fg-white
fg-red
bg-black--75
bg-black--66
bg-black--50
bg-black--33
bg-black--25
bg-black--10
bg-black
bg-darker-gray
bg-dark-gray
bg-gray
bg-light-gray
bg-lighter-gray
bg-white
bg-red
fg-black--hover
fg-darker-gray--hover
fg-dark-gray--hover
fg-gray--hover
fg-light-gray--hover
fg-lighter-gray--hover
fg-white--hover
fg-red--hover
bg-black--hover
bg-darker-gray--hover
bg-dark-gray--hover
bg-gray--hover
bg-light-gray--hover
bg-lighter-gray--hover
bg-white--hover
bg-red--hover
Gradients
Use these variables with the standard CSS background-image
property. For example:
background-image: $ted-red-grad;
$ted-red-grad
$light-grad
$dark-grad