Colors

Default Colors

Yumma CSS comes with a built-in color system that allows you to easily customize the colors of your elements.

Here's a range of all the default colors from the Yumma CSS theme.

Using color utilities

Here's an example of how to use the color system to style a button:

<div className="d-g g-16 gtc-1 sm:gtc-3">
  <div className="bg-red d-16"></div>
  <div className="bg-green d-16"></div>
  <div className="bg-blue d-16"></div>
</div>

Using color shades

You can use the color shades to style your elements.

<div className="d-g g-16 gtc-1 sm:gtc-3">
  <div className="bg-indigo-3 d-16"></div>
  <div className="bg-indigo-6 d-16"></div>
  <div className="bg-indigo-9 d-16"></div>
</div>

Using opacity variants

Great for targeting opacity to different utilities.

Opacity variants are available for all color utilities, with a scale ranging from 0 to 95 in increments of 5.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="bg-indigo-3/50 d-16"></div>
  <div class="bg-indigo/25 d-16"></div>
  <div class="bg-indigo-9/20 d-16"></div>
</div>