Foundation

Theme tokens first.

Light is the default theme. Dark mode is opt-in through `data-theme="dark"` and uses the same semantic token names.

Palette

$color.palette.navy-600#2563EB
$color.palette.navy-200#E2E8F0
$color.palette.gray-600#475569
$color.palette.red-600#DC2626
$color.palette.green-600#16A34A
$color.palette.navy-900#0F172A

Themes

Light

Default theme for first load, documentation, and package examples.

Dark

Activated only by explicit user selection or `data-theme="dark"`.

Runtime

import "@hozorica/hods-react/tokens.css";

document.documentElement.dataset.theme = "light";