Color Utilites
Color utilities allow you to apply color variants to any Fizz component. Colors generally have very specific use cases, so only apply color utilities as specified in a design.
Background Color
The default background color is white. Most elements have a transparent background unless otherwise specified. You can use these utility classes to apply a different background color to any element.
HTML
<div class="fizz-surface fizz-inset-square-8"><strong>.fizz-surface</strong></div>
<div class="fizz-surface-gray"><strong>.fizz-surface-gray</strong></div>
<div class="fizz-surface-red"><strong>.fizz-surface-red</strong></div>
<div class="fizz-surface-blue"><strong>.fizz-surface-blue</strong></div>
<div class="fizz-surface-teal"><strong>.fizz-surface-teal</strong></div>
<div class="fizz-surface-yellow"><strong>.fizz-surface-yellow</strong></div>
<div class="fizz-surface-green"><strong>.fizz-surface-green</strong></div>
<div class="fizz-surface-brand fizz-text-inverse"><strong>.fizz-surface-brand</strong></div>
Text Color
HTML
<div class="fizz-text-subdued"><strong>.fizz-text-subdued</strong></div>
<div class="fizz-text-brand"><strong>.fizz-text-brand</strong></div>
<div class="fizz-text-positive"><strong>.fizz-text-positive</strong></div>
<div class="fizz-text-deal"><strong>.fizz-text-deal</strong></div>
<div class="fizz-text-warning"><strong>.fizz-text-warning</strong></div>
<div class="fizz-text-negative"><strong>.fizz-text-negative</strong></div>
<div class="fizz-text-urgent"><strong>.fizz-text-urgent</strong></div>
<div class="fizz-text-inverse fizz-surface-brand"><strong>.fizz-text-inverse</strong></div>
Inheriting Color
There might be instances where you want to have some text in an <a>
element but not use the
default link color. You can use .fizz-text-inherit
to inherit the color of the anchor element's parent
($gray-800 by default).
This is a link inheriting color
HTML
<p><a href="">This is a link</a></p>
<p><a href=""
class="fizz-text-inherit">This is a link inheriting color</a></p>
Underline None
You may also want to prevent the link's underline from appearing on hover, providing some other affordance on the
container to indicate it's clickable. Use .fizz-underline-none
to remove the underline on hover.
This is a link with no underline
HTML
<p><a href=""
class="fizz-text-inherit fizz-underline-none">This is a link with no underline</a></p>
Icon Color
You can apply text color utilities to the parent of an .fizz-icon
element and the icon's fill color will
inherit that color.
The icon is the same color as the text
HTML
<div class="fizz-text-deal fizz-flex-row-8">
<svg class="fizz-icon-24"
role="img"
aria-hidden="true"
width="24"
height="24">
<use href="#tag"></use>
</svg>
<p>The icon is the same color as the text</p>
</div>