ADR 0001 Pure CSS with BEM and CSS variables

Status

Accepted

Context

The library ships reusable React components for multiple consumers. Styling must stay framework-agnostic, themable, and easy to override without coupling to a CSS-in-JS runtime.

Decision

Use plain CSS files colocated with components, BEM-style class names with the cl- prefix, and design tokens as CSS variables (see src/styles/main.css). Light/dark themes switch via a root class (e.g. .cl-components-dark-theme).

Consequences

• No runtime style injection; smaller bundle and simpler SSR story.
• Consumers can override tokens or classes without ejecting from a style engine.
• Class name discipline is enforced by convention and linting, not by a single styled API.