Styling and inheritance

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.

Choose the font

Choose Customize → Typography and controls → Font. Default (Manrope) preserves the framework font; System uses the device UI font. Set data-font="system" on html or a section, and use data-font="manrope" for a local reset. Text, headings and native controls inherit it, while code remains monospace. The optional reva-fonts.css and adjacent font files supply Manrope; if the family is unavailable, the system fallback is used. An explicit --re-font-heading remains available for separate headings. Choices persist between documentation and demos and are included in downloaded HTML. The core remains CSS-only.

Choose your own corners

Select Customize → Surfaces → Shape → Custom. Link surface, field and action radiuses or edit them independently. Use sliders or numeric values in rem; zero creates square corners. Choices persist across documentation and demo pages. CSS exports and starting HTML work without the editor scripts.

/* Load after RevaCSS and use data-shape="custom". */
@layer re.tokens {
  :where([data-shape="custom"], :scope[data-shape="custom"]) {
    --re-custom-surface-radius: 1rem;
    --re-custom-field-radius: .4rem;
    --re-custom-action-radius: 3rem;
  }
}

Each group defaults to .75rem. Surface corners use --re-radius; styled text fields use --re-field-radius, falling back to the surface radius; buttons, badges and existing action-shaped components use --re-button-radius. These controls do not replace native checkbox/radio geometry. Local Square, Subtle, Rounded or Pill boundaries reset the three groups. Frame and Flush navbar rules retain their intentional square corners.

Choose your own spacing

Select Customize → Layout → Density → Custom. Link the values or edit surface padding, control padding and content spacing independently with sliders or numeric inputs. Surface padding and content spacing use rem; control padding is a multiplier of each control’s normal comfortable padding. Cards multiply base surface padding by 1.5. Minimum control heights and safe-area padding remain in place.

/* Load after RevaCSS and use data-density="custom". */
@layer re.tokens {
  :where([data-density="custom"], :scope[data-density="custom"]) {
    --re-custom-surface-padding: 1.2rem;
    --re-custom-control-density: .8;
    --re-custom-content-space: .6rem;
  }
}

Each group defaults to 1. Surface padding affects cards, preformatted code, fieldsets, disclosures, dialogs, drawers, sidebars, shell headers and empty states. Content spacing controls the existing shared margins and gaps; individual components retain their own proportions. Local Compact, Comfortable and Spacious presets reset all groups. The separate Gap setting scales layout gaps, and explicit component padding or gap overrides still take precedence. Editor choices persist across pages; exported CSS and starting HTML work without JavaScript.

Full and custom page widths

Use data-width="full" for containers that fill their parent and retain 1rem side padding. Choose Customize → Layout → Page width → Custom to set a maximum width and side padding in rem. Maximum width includes padding; narrow containers reduce excessive side padding to keep content space. Narrow, Standard and Wide retain their existing 48rem, 75rem and 90rem caps and outer gutters.

/* Load after RevaCSS and use data-width="custom". */
@layer re.tokens {
  :where([data-width="custom"], :scope[data-width="custom"]) {
    --re-custom-max-width: 80rem;
    --re-custom-side-padding: 2rem;
  }
}

Use a .container inside the configured parent. Local width presets reset maximum width and padding. Navbar width remains controlled by data-navbar-width; a full navbar surface stays full while its content follows the page width. Reading-width limits such as .prose remain independent. Choices persist across pages and are included in CSS exports and downloaded starting HTML.

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.