REFERENCE
API reference
The current CSS and HTML interface for RevaCSS 2.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 opening/closing motion for native popovers and dialogs; load after the global core. |
reva.motion.scoped.css | Optional scoped overlay 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.button-materials.css | Optional action-only solid, glass, veil, soft and liquid materials; load after the core. |
reva.button-materials.scoped.css | Optional action-only materials inside .reva; load after the scoped core. |
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 | 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 · custom | rounded | Styled controls, surfaces, navigation, media, code, choice labels, avatars and placeholders. Custom uses --re-custom-surface-radius, --re-custom-field-radius and --re-custom-action-radius (nonnegative lengths; .75rem defaults). Local presets reset all three groups. |
data-fill | gradient · solid | gradient | Button, badge and alert gradients; optional glass sheen. Does not change material. |
data-density | compact · comfortable · spacious · custom | comfortable | Control and surface padding, list and description spacing, card sections and layout spacing. Custom separates surface padding (--re-custom-surface-padding, 1rem), control padding multiplier (--re-custom-control-density, 1), and content spacing (--re-custom-content-space, 1rem). Minimum control heights are preserved; local presets reset all groups. |
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 · full · custom | standard | Page-container width. Narrow, Standard and Wide cap .container at 48rem, 75rem and 90rem. Full fills the parent with 1rem side padding. Custom uses --re-custom-max-width (75rem) and --re-custom-side-padding (1rem); max width includes padding, which is reduced in narrow containers. Local presets reset width/padding. Navbar width is configured separately. |
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 or Soft UI surfaces and actions use their matching extension. Veil is deprecated and retained for existing sites. 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-navbar-position | static · sticky | static | Static follows normal document flow. Sticky keeps the outer header at block-start of its scroll container; layout, palette and material remain independent. Put the wrapper in the scrolling page, outside short sections. |
data-navbar-spacing | flush · spaced | spaced | Flush removes the wrapper gap and Floating margins so a sticky bar meets the safe top edge. Spaced adds wrapper breathing room, reduced on small screens, and retains Floating margins. |
data-navbar-width | contained · full | contained | Contained follows the shared page width and navbar layout. Full fills its parent with a navbar surface while aligning its contents to the shared page width. Use a page-wide wrapper to reach both screen edges; app-shell toolbars retain their grid column. |
data-button-material | default · solid · glass · veil · soft · liquid | default | Optional button material extension. Default follows data-material at the action; explicit choices override general material for actions only. Liquid is transparent neutral glass without accent tint; movement follows data-motion. Veil is deprecated and retained for existing sites. |
data-font | manrope · system | manrope | Body text, headings and native controls. Manrope is the framework default with system-ui/sans-serif fallback; its font stylesheet is optional. System uses system-ui/sans-serif even when Manrope is loaded. A local preset resets this choice; code remains monospace and --re-font-heading remains an optional heading override. |
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.