REFERENCE
API reference
The current CSS and HTML interface for RevaCSS 1.0.0. Attribute values below come from the option manifest used by the build.
Use the guide for setup and the component API for exact hooks. The API describes implemented features, not a release-validation guarantee.
Stylesheet files
Start with one complete build: global or scoped. Do not combine both. Load the matching Glass or Veil extension afterward when needed.
| File | Purpose |
|---|---|
reva.min.css | Minified equivalent of the complete global stylesheet. |
reva.css | Complete readable global stylesheet. Recommended starting point. |
reva.tokens.css | Theme, palette and shared setting definitions. |
reva.base.css | Native element styling. Depends on token definitions. |
reva.components.css | Component bundle plus shared utilities. Depends on tokens and base. |
reva.badges.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.alerts.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.accordions.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.breadcrumbs.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.pagination.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.form-groups.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.loading.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.tabs.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.lists.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.empty-states.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.avatars.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.icons.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.switches.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.input-groups.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.skeletons.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.toolbars.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.description-lists.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.card-patterns.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.navigation.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.app-shell.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.drawers.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.timeline.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.steps.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.rating.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.calendar.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.message-thread.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.charts.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.navigation-rail.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.dropdowns.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.selects.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.selects.scoped.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.motion.css | Optional entrance motion for native popovers; load after the global core. |
reva.motion.scoped.css | Optional scoped entrance motion; load after reva.scoped.css. |
reva.glass.css | Optional global glass extension; load after the global core. |
reva.glass.scoped.css | Optional scoped glass extension; load after reva.scoped.css. |
reva.soft.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.soft.scoped.css | Component-specific styling. Load its token/base dependencies and any required shared utilities. |
reva.veil.css | Optional Veil material: diffused perimeter colour and contained contours without blur. Load after the global core. |
reva.veil.scoped.css | Optional scoped Veil material; load after reva.scoped.css. |
reva.scoped.css | Complete styling scoped to .reva boundaries. |
reva-fonts.css | Optional Manrope font declarations; copy its adjacent fonts directory. |
The generated icons directory contains individual SVG files and icons/reva.svg. See icon usage and downloads.
Standalone modules are not a replacement for common dependencies. The complete build includes shared preference utilities; modular consumers must preserve the corresponding behaviours.
Shared attribute API
Set attributes on html, a parent section, or a .reva boundary. A nearer valid value overrides only that setting for supported descendants. Unsupported values retain the nearest valid inherited setting.
| Attribute | Values | Omitted default | Targets and meaning |
|---|---|---|---|
data-palette | default · mono · sand · ocean · cobalt · citrus · violet · forest | default | Coordinated page, surface, foreground, border, link and primary colours. Light/dark follows data-theme. Success, warning and error colours stay semantic. |
data-theme | auto · light · dark | auto | Page and component colour scheme: auto follows the visitor's preference. |
data-accent | blue · violet · teal · green · orange · rose | Palette primary | Primary actions, badges, alerts, native accent controls and checked switches. Links retain their theme colour. Explicit accents reset their foreground; omitted accents follow data-palette. |
data-shape | square · subtle · rounded · pill | rounded | Styled controls, surfaces, navigation, media, code, choice labels, avatars and placeholders. |
data-fill | gradient · solid | gradient | Button, badge and alert gradients; optional glass sheen. Does not change material. |
data-density | compact · comfortable · spacious | comfortable | Control and surface padding, list and description spacing, card sections and layout spacing. |
data-depth | flat · subtle · pronounced | subtle | Action and surface shadows. Text-control inset shadows are configured with data-controls. |
data-motion | none · subtle · expressive | subtle | Action transitions, accordion expansion and chevron rotation (expressive adds a fade), press movement, decorative edges, custom spinners, switch transitions and skeleton shimmer. Reduced motion wins; native progress is browser-owned. |
data-type | compact · standard · large | standard | Page or subtree typography. |
data-border | subtle · defined · none | subtle | Styled control and surface borders, table rules and navigation boundaries. Invalid-state and forced-colour boundaries take priority. |
data-contrast | auto · more | auto | Foreground and boundary contrast; optional glass becomes opaque. System preferences retain their component-specific priority. |
data-tone | neutral · cool · warm | Palette surfaces | Override page and surface temperature without resetting the palette accent, links or foregrounds. |
data-controls | styled · minimal | styled | Text input, select and textarea backing and inset shadow. |
data-width | narrow · standard · wide | standard | Maximum width of .container. |
data-table | plain · striped · bordered | plain | Table stripes and grid lines; rule thickness follows data-border. |
data-size | small · medium · large | medium | Controls, menu actions, badges, alerts, accordion summaries, breadcrumbs, pagination, form labels, choice labels, spinners and avatars. |
data-ratio | auto · square · landscape · portrait · wide | auto | Image and video aspect ratio; auto retains natural proportions. |
data-fit | cover · contain | cover | Image, video and avatar content within constrained dimensions. |
data-gap | none · small · medium · large | medium | Spacing in .grid, .row, .stack, .accordion, .pagination, .tabs and .toolbar; combines with density. |
data-material | solid · glass · veil · soft | solid | Solid surfaces by default; optional Glass, Veil or Soft UI surfaces and actions use their matching extension. Explicit material boundaries stop another inherited material. |
data-edge | plain · gradient · shine · animated | plain | Decorative borders on buttons, .button links and cards. Shine sweeps on interaction; animated turns continuously. Native action inputs keep regular borders. |
data-variant | primary · success · warning · danger · neutral | primary | Button, action-input, .button link, badge and alert semantic colour. Primary uses the inherited accent; local legacy button classes override inherited variants, while a valid action-level attribute takes precedence. |
data-appearance | tinted · solid · outline | tinted | Badge and alert backing and border treatment. Does not configure buttons. |
data-navbar | standard · centered · floating · split | standard | Top navigation layout: standard brand and links, centered links, inset floating surface, or central brand with links on either side. Mobile retains the shared Menu button and popovers. Does not change sidebars. |
data-variant configures buttons, action inputs, .button links, badges and alerts. data-appearance configures only badges and alerts. Existing semantic button classes override inherited variants; a valid action-level variant overrides those classes. Material and fill remain separate settings.
Scope and behavioural boundaries
Each .reva boundary installs defaults. Configure the boundary itself or its descendants. CSS scope does not provide Shadow DOM isolation, and overlay markup must remain in its boundary.
The core relies on modern CSS including light-dark(), color-mix(), :has() and @scope. Native popovers are required for the top-menu interaction. Some enhancements have component-specific fallbacks; do not assume a complete legacy-browser fallback.
CSS does not supply routing, data loading, validation messages or arbitrary focus management. See behaviour and accessibility.