StyleProvider

Sets the skin, the color mode and the brand color for everything inside it. Put one at the root of your app, and nest more for islands that look different, like a dark card or a tenant's brand.

InstallationCopy Anchor Link

Set up Camaleo once (Installation) and import the stylesheet of every skin you render, islands included. A skin without its CSS falls back to the defaults.

import { StyleProvider, useStyleScope, PortalScope, Portal, STYLE_NAMES } from "@camaleo/react";

For the whole page, a Server Component can spread styleScopeProps({ styleName, mode, brand }) on <html> instead: same attributes, no client code. See Installation for the CSS and the fonts.

AnatomyCopy Anchor Link

StyleProvider renders a <div> with data-style, data-mode and the brand tokens as inline variables. Every [data-style] element redeclares all the tokens and paints its own background, text color and font, so a nested island starts clean instead of inheriting its parent's skin. The mode and the brand, on the other hand, flow down until an island sets its own.

Popups (Menu, Select, Popover, Dialog, Drawer…) render in <body>, outside every provider. They wrap their content in a portal-scope element that copies the scope of the provider they were opened from.

ExamplesCopy Anchor Link

Every preview already sits inside a StyleProvider: the one the bar above controls. These examples nest a second one, so you can see an island next to the page around it.

In contextCopy Anchor Link

These are whole pieces of UI you can copy, with an island inside the skin you picked.

GuidelinesCopy Anchor Link

PropsCopy Anchor Link

Styling hooksCopy Anchor Link

The provider is the source of the tokens every component reads. Target its attributes to change a skin, or set a token on an island to change only that section.

/* rounder controls, only in the glass skin */
[data-style="glass"] {
  --cml-radius-control: 14px;
}

/* a quieter surface for one island */
.help-center[data-style] {
  --cml-surface: light-dark(var(--cml-brand-50), var(--cml-brand-950));
}

AccessibilityCopy Anchor Link

• Without mode, the root follows prefers-color-scheme through CSS alone (color-scheme and light-dark()), so there is no flash and no script before hydration.
• Text, focus rings and control borders pass WCAG 2.2 AA in all 13 skins, light and dark, with any brand color. The library tests this in CI.
• Forced colors (Windows high contrast) replace the skin: components keep a transparent border and an outline for focus, so they stay visible.
• Reduced motion calms every skin's transitions, and reduced transparency makes glass opaque. Both are read from the system, per island too.

RelatedCopy Anchor Link