Colors

Overview

Instead of applying fixed Tailwind palette classes like:

• text-red-500
• bg-green-600
• border-blue-700 etc.

It is recommended to rely on semantic color classes. Semantic colors are mapped to design tokens and automatically adapt when themes change.

For example,

• text-primary
• bg-subtle
• border-light etc.

This approach prevents dependence on specific palette values (blue-500, green-600, etc.). Instead, components reference semantic roles (primary, secondary, warning), making the UI easier to maintain, brand, and theme.

Behind the scenes, each semantic color class points to a CSS variable. Updating or overriding that variable updates the color everywhere it’s used.

List of colors

Hummingbird provides a minimal but complete set of color roles:

How to use

Use semantic color classes like:

• bg-primary
• text-muted
• border-base

These classes use theme’s color variables, so the UI stays consistent when customizing or switching themes.

<button class="bg-primary text-contrast hover:bg-primary-dark">
  Button
</button>

<p class="text-muted">Muted paragraph text</p>

<div class="border border-base bg-default p-4">
  Card with subtle border
</div>

Customize color

Override any color by redefining its CSS variable inside a @theme block after importing Hummingbird:

@import "tailwindcss";
@import "@hummingbirdui/hummingbird";

@theme {
--background-color-subtle: #eff2f8;
--color-primary: #0074e6;
--color-primary-dark: #001c38;
}