Color Families

Yumma CSS provides 19 color families, each with 13 shades.

Use Color Utilities

Apply color system utilities to style your elements.

<div className="bg-red …"></div>
<div className="bg-green …"></div>
<div className="bg-blue …"></div>

Use Color Shades

Each color family generates 13 values from a single base hex. The base color has no suffix. Shades 1–6 mix progressively more white, and shades 7–12 mix progressively more black.

| Suffix | Direction | |--------|-----------| | 1-6 | Lightest | | (none) | Base | | 7-12 | Darkest |

The step size is controlled by percentage.light and percentage.dark in your config. Both default to 14.

<div className="bg-red-5 …"></div>
<div className="bg-green-5 …"></div>
<div className="bg-blue-5 …"></div>

Use Opacity Modifiers

Target specific opacity values across color utilities. Opacity variants range from 0 to 95 in increments of 5.

<div className="bg-indigo-3/80 …"></div>
<div className="bg-indigo/60 …"></div>
<div className="bg-indigo-9/40 …"></div>

Custom Colors

Extend or override the default palette using the theme.colors configuration option.

1. 1

   Configure custom colors

   import { defineConfig } from "yummacss";
   
   export default defineConfig({
     theme: {
       colors: {
         background: "#f5f6f7", // add new color family
         blue: "#1a73e8", // overrides the default blue.
       },
     },
   });
   

2. 2

   Use custom colors

   You will need to restart the dev server to see the changes.

   <div className="bg-background …">
     <h1 className="c-blue …">Good evening</h1>
   </div>
   

Custom Color Shades

Override the default shade percentages using the theme.colors.percentage configuration option. The compiler automatically generates color shades (from 1 to 12) using the defined percentage.light and percentage.dark values.

1. 1

   Configure custom colors

   import { defineConfig } from "yummacss";
   
   export default defineConfig({
     theme: {
       colors: {
         background: "#f5f6f7",
         blue: "#1a73e8",
       },
       percentage: {
         light: 16, // default is 14
         dark: 16, // default is 14
       },
     },
   });
   

2. 2

   Use custom colors

   You will need to restart the dev server to see the changes.

   <div className="bg-background-6 …">
     <h1 className="c-blue-5 …">Good evening</h1>
   </div>