Component usage

Values that must use the theme

Public component chrome uses shared roles for backgrounds, text, borders, focus rings, control states, status colors, elevation, fonts, spacing, and radii. This lets a product change its appearance at one boundary without patching each component.

The repository audit rejects raw web UI colors in public component source. Use a semantic utility such as bg-control, text-text-muted, or Tailwind's shadow-md instead.

Compose layout primitives

Container is the single-child boundary that binds theme geometry and surfaces in one place. It resolves padding, gap, margin, radius, border, background, text color, and elevation from shared theme metrics.

• Container.Stack builds on Container, adds flex direction and alignment, and accepts a list of children.
• Card composes a surfaced Container with a stack containing header, content, and footer slots.
• surface="overlay" provides floating geometry for content such as the Select options menu.

Share interactive control shapes

Container has no hover, focus, active, or checked behavior. Button, Input, and the Select trigger remain native interactive elements and share one Tailwind variants definition for their heights, corner radii, padding, text sizes, colors, and interaction states. Checkbox keeps a separate checked-state contract.

Components still own their behavior. Select alone owns listbox placement, option navigation, and selection while reusing the same trigger shape as Input and Button.

Deliberate exceptions

Some colors describe content rather than the application theme and must remain stable:

• user-selected drawing and canvas colors
• syntax-highlighting colors
• diagnostic overlays in developer tools
• label colors supplied as fixture or product data
• the white paper surface of a rendered PDF

These exceptions are narrow and checked by file. They are not a general escape hatch for component chrome.

Native components

React Native cannot consume CSS variables, so native components read the equivalent values from designTokens or designTokenThemes. The default native chat theme is derived from the shared dark theme and can still be overridden through its typed theme object.