PimentCSS: Colors

Overview

PimentCSS uses a Caribbean / Antilles palette in OKLCH (tokens/colors.css), mapped to components through semantic variables (tokens/semantic.css). Each step exposes a CSS variable and a preview class .palette__chip--*.

Palette	Role	Default step
`primary`	Lagoon teal, actions, links, focus	`600`
`accent`	Sunset mango, highlights	`500`
`neutral`	Warm sand / night, surfaces & text	`500`
`information`	Lagoon cyan, info UI	`500`
`success` / `warning` / `error`	Feedback states	`500`

Prerequisites

PimentCSS installed, Installation (npm, CDN, or Sass).
OKLCH support, modern browsers; hex fallbacks ship when $enable-hex-fallback is on.
Color mode, set data-theme on <html> or use the doc header toggle to validate dark semantics.

Canonical tokens

Edit tokens/colors.css for palette steps, then tokens/semantic.css for how components consume them. Regenerate preview CSS with npm run generate:palettes.

/* tokens/colors.css, primary lagoon */
:root {
  --primary-600: oklch(48% 0.13 195);
  --primary-default: var(--primary-600);
}

/* tokens/semantic.css, light mode */
:root {
  --surface-action: var(--primary-600);
  --text-on-action: var(--neutral-100);
}

Semantic contrast pairs

Prefer these tokens in components. Each card shows background + foreground with a live contrast ratio (WCAG 2.2 / RGAA: ≥ 4.5:1 for normal text). Failed pairs are outlined in red, adjust semantics, not only raw palette steps.

--surface-page + --text-body (body)

--surface-action + --text-on-action (primary button)

--surface-elevated + --text-body (card)

--surface-information + --text-on-information

--surface-error + --text-error (alert surface)

--error-100 + --error-700 (inline error)

--primary-600 + --neutral-100 (action step)

--border-default border token

OKLCH palettes

Every swatch lists its OKLCH value (canonical source). CSS variable: --{palette}-{step}. Preview class: .palette__chip--{palette}-{step}.

Steps 100–300 suit backgrounds; 600–900 for text on light surfaces. Re-check after theme changes.

Usage in CSS

Use semantic variables in components; reserve raw steps for illustrations or charts.

.card {
  background: var(--surface-elevated);
  color: var(--text-body);
  border: 1px solid var(--border-default);
}

.btn-brand {
  background: var(--surface-action);
  color: var(--text-on-action);
}

.badge-info {
  background: var(--surface-information);
  color: var(--text-on-information);
}

Live components

Information

Success

Semantic colors applied.

Generate & build

Edit palette source

Update OKLCH values in tokens/colors.css. Keep light and dark semantic mappings aligned.
```
# tokens/colors.css
```
Regenerate palettes & docs

Refreshes styles/palettes.css, swatch HTML, and Sass palette maps.
```
npm run generate:palettes
```
Rebuild distribution CSS

Produces dist/pimentcss.min.css for npm and the documentation site.
```
npm run build:css
```

Accessibility (RGAA / WCAG)

See the full guide on Accessibility. Customize tokens on Customization.

Next steps

Customization

Override Sass variables and regenerate palettes.

Theme toggle

Switch data-theme in your shell.

Typography

Zodiak & Plus Jakarta Sans scale.

Buttons

Primary, secondary, and focus styles.