Color System

Default palette

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

Using 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>

Using color shades

Each family is one base color plus 12 shades: 1–6 lighter, 7–12 darker.

The step size is controlled by percentage.light & 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>

Using 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

   yummacss.config.mjs

   Copy

   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

   The bundler plugins & yummacss watch pick up config changes automatically.

   ​

   Copy

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

Dark mode is opt-in per color. See Dark Mode.

Custom color shades

Set theme.colors.percentage to change how far each shade steps from the base.

1. 1

   Configure custom colors

   yummacss.config.mjs

   Copy

   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

   The bundler plugins & yummacss watch pick up config changes automatically.

   page.tsx

   Copy

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