Colors & Theming
The package ships a single token file — h2o-library/dist/styles/index.css — that defines every --* color used by components. Values are HSL triplets without the hsl() wrapper (for example 225 91% 59%) so you can write hsl(var(--primary)) or hsl(var(--primary) / 0.5) for alpha.
See Getting Started for importing that stylesheet alongside h2o-library/dist/index.css.
Quick theming
- Load the library tokens once near your app root (already covered in Getting Started).
- Override variables in your own CSS: set light defaults under
:rootand dark defaults under.dark(or any selector you use for dark mode). - Toggle dark mode the same way as Tailwind’s
darkMode: ['class']: add or remove thedarkclass on<html>(or a wrapper that wraps themed UI).
/* app/globals.css — example only */
:root {
--primary: 225 91% 59%;
--background: 0 0% 98%;
}
.dark {
--primary: 225 85% 62%;
--background: 0 0% 7%;
}No rebuild of the library is required — components read the variables at runtime.
Radius tokens
Non-color layout tokens live in the same file: --radius-sm, --radius-md, --radius-lg, --radius-full. Override them alongside colors if you want rounder or sharper corners globally.
Tailwind in your app
Map the same CSS variables into tailwind.config or globals.css (tailwind V4), (for bg-primary, text-muted-200, etc.).
Tailwind is not required to use the library.
Opacity modifiers
The library uses alpha-modified colors for interactive states, overlays, as the tokens are shipped as HSL triplets without the hsl() wrapper. Use hsl(var(--primary) / 0.5) to apply 50% opacity, for example.
- The Opacity examples section below has interactive swatches to help you visualize how that works in practice.
- tailwind's built-in opacity modifiers (for example
bg-primary/50) work too, as long as you have the variables mapped in your config.
Palette reference
Swatches reflect your current theme on this site. Click a swatch or button to copy. Headings below match the semantic groups in the library stylesheet.
Primary
Brand-blue scale powering interactive elements, CTAs, and focus indicators.
primary-disabled
primary-muted
primary
primary-200
primary-300
primary-400
primary-foreground
Success
Green scale for positive feedback, confirmations, and healthy status indicators.
success-bg
success
success-200
success-300
Warning
Amber scale for caution states, pending items, and advisory messages.
warning-bg
warning
warning-200
warning-300
Destructive
Red scale for errors, destructive actions, and critical alerts.
destructive-bg
destructive
destructive-200
destructive-300
Neutral / Muted
Grayscale tokens for borders, dividers, placeholder text, and subtle surfaces. Values change in dark mode.
muted-25
muted-50
muted
muted-200
Surface & layout
Semantic page and container tokens from the library stylesheet. All are theme-aware.
background
foreground
card
popover
border
input
Tailwind quick reference
Examples from this documentation app — your project may map variables differently. Common utility prefixes: bg-, text-, border-, ring-, and so on.
| Token | CSS variable | Common uses | Preview |
|---|---|---|---|
primary | --primary | bg-, text-, border- | |
primary-foreground | --primary-foreground | text- | |
primary-disabled | --primary-disabled | bg- | |
primary-200 | --primary-200 | bg-, text- | |
background | --background | bg- | |
foreground | --foreground | text- | |
muted | --muted | bg-, text-, border- | |
card | --card | bg- | |
popover | --popover | bg- | |
border | --border | border-, divide- | |
input | --input | bg- |
Opacity examples
Interactive swatches using bg-primary with alpha:
bg-primary/100 · bg-primary/75 · bg-primary/50 · bg-primary/30 · bg-primary/20 · bg-primary/10 · bg-primary/5