Theme customizer
Pick a skin, a brand color and a few tokens, watch real components change, then take the CSS, the provider and a JSON preset with you.
Choices
- 5019.4
- 10017.2
- 20014.5
- 30011.2
- 4008.3
- 5006.2
- 6004.7accent
- 7006.7
- 8009.6
- 90012.7
- 95016.1
Each step with its text color and their contrast. Marked: the step this skin uses for --cml-accent, which is often darker than your color so text on it stays readable.
Northwind
Team workspace · 7 of 10 seats
Invite a teammate
They get access to every project in Northwind.
Plan Pro
Renews on 1 December.
People
| Name | Role | Status |
|---|---|---|
| ARAna Ribeiro | Owner | Active |
| BCBruno Costa | Editor | Away |
| CMCarla Mendes | Viewer | Active |
Contrast in this preview
Export
Only your changes, on top of the skin you picked. Keep styleName and the skin's CSS.
/* minimal with your changes, made with the Camaleo customizer.
* Import after "@camaleo/styles/base.css" and "@camaleo/styles/minimal.css".
* Unlayered on purpose: it wins over the library's cml.* layers without !important.
*/
[data-style="minimal"] {
/* No token changes: the skin as it ships. */
}
What each choice sets
Every choice writes --cml-* tokens, nothing else. Untouched choices keep the skin's own values and stay out of the file.
| Choice | Tokens |
|---|---|
| Base skin, mode, brand | styleName, mode and brand on the StyleProvider; createBrand turns the brand into --cml-brand-* |
| Control radius | --cml-radius-control, -sm, -lg and --cml-radius-field; the last stop is var(--cml-radius-pill) |
| Surface radius | --cml-radius-surface, and --cml-radius-popover at 80% of it |
| Border width | --cml-border-width, --cml-field-border-width |
| Control height | --cml-control-height, -sm, -lg, --cml-field-height, --cml-item-height, all moved by the same amount |
| Fonts | --cml-font-body, --cml-font-display |
| Shadows | --cml-shadow-surface, --cml-shadow-popover, --cml-card-shadow |
| Motion off | --cml-motion-distance: 0px, --cml-motion-scale: 1, --cml-press-translate: 0px, the values the library uses for reduced motion |
Override or new skin
Override writes your changes on [data-style="<skin>"], outside any layer. The library's CSS is all in cml.* layers, so unlayered CSS wins without !important, including over tokens the skin never sets. Keep importing the skin's CSS and passing its name.
New skin writes a skin of its own in @layer cml.style, the layer the 13 skins use: the base skin's token values with your changes on top. It copies tokens only; the base skin's scoped rules (bevels, dividers, glass blur) stay with the base skin's name. When you want the base skin's exact look, export an override. The preview always runs the file you are about to export.
The contrast pairs under the preview are measured in the rendered preview, the same way the library's matrix test reads them: text and brand text at 4.5:1, the focus ring and control borders at 3:1. See Brand color for why text on the brand always passes, and Create a skin to take a new skin further.