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.

.fizz-surface

.fizz-surface-gray

.fizz-surface-gray-inverse

.fizz-surface-red

.fizz-surface-blue

.fizz-surface-teal

.fizz-surface-yellow

.fizz-surface-green

.fizz-surface-brand

.fizz-surface-brand-secondary

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>
<div class="fizz-surface-brand-secondary fizz-text-inverse">
  <strong>.fizz-surface-brand-secondary</strong>
</div>

Text Color

.fizz-text-body

.fizz-text-subdued

.fizz-text-brand

.fizz-text-interactive

.fizz-text-positive

.fizz-text-deal

.fizz-text-warning

.fizz-text-negative

.fizz-text-urgent

.fizz-text-inverse

HTML

<div class="fizz-text-body"><strong>.fizz-text-subdued</strong></div>
<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

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"
       viewBox="0 0 24 24">
    <path
          d="m21.41 11.58-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42ZM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7Z">
    </path>
  </svg>
  <p>The icon is the same color as the text</p>
</div>