LEARN

Styling and inheritance

Configure appearance on html or a parent section. Native elements and component classes consume those shared settings wherever they apply.

What inherits?

Theme, accent, shape, density and other shared attributes supply tokens or scoped styling. They affect documented targets, not every HTML element indiscriminately. Width affects containers; ratio affects media; variant affects actions, badges and alerts.

The nearest valid explicit value wins for its setting. An unsupported value leaves the nearest valid ancestor's setting in effect. Omitted settings use the shipped defaults. Values are not copied into child HTML attributes.

Override only what differs

Both cards inherit the theme and shape. The warning alert changes only its semantic colour.

Shared settings

Success: Your profile is complete.

Warning: Verify your email.

<section class="stack" data-theme="dark" data-shape="rounded"
         data-accent="teal" data-variant="success">
  <article class="card">
    <h3>Shared settings</h3>
    <div class="alert">Success: Your profile is complete.</div>
  </article>
  <article class="card">
    <div class="alert" data-variant="warning">Warning: Verify your email.</div>
  </article>
</section>

Palette examples and override rules: configure data-palette on html or a parent. A nearer palette installs its complete colour set. On one element, explicit data-accent and data-tone override its primary and surface colours.

Classes identify patterns

A native button already identifies its element. A generic div needs class="alert" to identify an alert pattern. Shared attributes then configure supported descendants.

Buttons, action inputs, .button links, badges and alerts share data-variant. Existing secondary, danger and warning button classes remain local overrides of parent variants. A valid variant directly on the action takes precedence over those classes. outline and ghost remain presentation classes. data-appearance still configures only badges and alerts. There are no rv- utility shortcuts yet; the rv- SVG symbol prefix is separate.

Shared size is consumed once for controls inside sized form labels and for spinners or badges inside actions. Explicit child size settings remain local overrides. Circular spinners retain their indicator shape; avatar aspect ratio stays square independently of the chosen boundary shape.

See the exact hook and supported options for each component.

Override with ordinary CSS

The framework uses ordered CSS layers: tokens, base, components and utilities. Application styles outside a layer can override normal layered declarations. Load your custom stylesheet after RevaCSS for a clear project convention.

:root {
  --re-primary: #7041cf;
  --re-primary-end: #5228a4;
  --re-on-primary: #fff;
}
.project-card {
  max-inline-size: 40rem;
}

Define both accent stops and a readable foreground when replacing colours. Scoped builds need custom properties on the .reva boundary or inside it because the boundary installs its own defaults. See CSS token reference.

Theme is a colour mode. Palette is a coordinated colour family; Default uses Blue Teal, and Mono is optional. Material is a surface treatment. data-fill="solid" removes gradients; data-material="solid" stops inherited Glass or Veil. These settings serve different purposes. Veil adds diffused perimeter colour and layered contours without backdrop blur.