Theming

Use the panel in the bottom-right corner of any Application UI page to try combinations against real blocks. When you like what you see, Copy CSS gives you exactly the rules below, filled in with your choices.

You usually will not need to run this. Every Application UI block names the theme as a dependency, so your first block install pulls it in and later ones reuse it.

Every themed value is a variable with its designed value baked in as the fallback. A block dropped into a project that has never installed the theme still renders exactly as it does here, because the fallback fires. Theming is additive: it is never a prerequisite, and deleting the variables later is safe.

Blocks never write a raw corner value. They reference a rung, and the rungs are offset from --rb-radius by a fixed number of pixels rather than a ratio. That is what keeps nested corners correct: a card inset by a 4px gutter sits exactly one rung softer than its container at every setting, so the arcs stay concentric whether you pick 0 or 26.

There is little point going above 26px. A browser clamps a corner at half the shorter side, and every control in the system is 40px or shorter, so 26 already renders them as full stadiums. Higher values only round large surfaces, which starts clipping content.

Set both halves of the pair. --rb-accent-fg is the text and icon colour that rides on top of the accent, and it is a separate variable because a mid-tone accent needs dark text where a deep one needs white. Hover states are derived from the accent automatically, so there is nothing else to override.

Light and dark usually want different values: a colour with enough contrast on white is normally too dark on near-black. The panel picks a matched pair for each of its presets, which is a reasonable starting point even if you replace the hues.

Surfaces, borders and body text use Tailwind’s neutral scale, so you retint the whole interface by redefining that scale rather than anything of ours. This one is warmed toward mauve:

Keep the lightness of each step and change only the chroma and hue. The system leans on the contrast between adjacent steps to separate a card from the page behind it, and flattening that is the quickest way to make an interface look muddy.

No block declares a font family, so they take whatever your body text uses. Type sizes are set in pixels rather than rem within a block, so switching families changes the voice without disturbing any of the density work.

Useful for an admin area that should feel distinct from the product, or for embedding a block inside a host application with its own rounding. Declare the variables on any ancestor and everything beneath it re-resolves.