REFERENCE / EXAMPLES
Data attributes
Choose a setting on the page or a local section. All core settings inherit through the subtree and affect their supported descendants. Set defaults once on html, then add local attributes only for exceptions.
Light and dark use the same component defaults with different palettes. Configure only what you need to change. For the model behind these examples, read styling and inheritance.
Configure the whole page once
Use the global stylesheet and set defaults on html. Native controls, tables and images follow them automatically; layout settings affect the existing layout classes.
Open a page with defaults on html · Dark version
Defaults and supported targets
The attribute API reference is the single table of accepted values, omitted defaults and supported targets. This page shows working HTML for each setting.
Settings apply where meaningful: size affects documented controls and components, width affects containers, and fit affects media. A theme does not inject attributes into children. Native validation, focus and system preferences retain their documented behaviour.
Inherited defaults and local exceptions
This demo applies those six defaults to its surrounding section. No attributes are repeated on the inherited controls, table or image. The final section resets individual settings.
Inherited page defaults
The controls, tables, layouts and images below need no repeated settings.
| Project | Status |
|---|---|
| Website | Ready |
| Docs | In review |
Local exceptions
| Item | State |
|---|---|
| One | Ready |
| Two | Ready |
For the scoped stylesheet, configure its top-level .reva boundary or a section within it. Each .reva boundary starts with its own defaults. Optional material still requires the glass stylesheet. Settings control appearance, not labels, semantic structure or interaction behavior.
Inherited and local settings
The nearest explicit setting wins. Put page-wide defaults on html; override them on a section or individual component.
data-palette
Coordinated colours for pages, surfaces, text, links, borders and primary actions. Values: default, mono, sand, ocean, cobalt, citrus, violet, forest. Default: default. Scope: inherited. See Themes / Colour palettes for every light and dark example.
Local Mono
data-theme
Page, text, links, surfaces and native controls; auto follows device colours. Default: auto. Scope: Inherited.
Auto
A local theme setting.
Light
A local theme setting.
Dark
A local theme setting.
data-accent
Primary buttons and native checkbox, radio, range, progress and meter accents; links retain their readable theme colour. Default: the selected palette primary. Explicit values also install the matching primary foreground. Scope: Inherited.
data-shape
Buttons, text controls, cards, menus, disclosures, fieldsets, dialogs, popovers, tables, images, videos and code. Default: rounded. Scope: Inherited.
Square
A local shape setting.
Subtle
A local shape setting.
Rounded
A local shape setting.
Pill
A local shape setting.
data-fill
Button gradients and optional glass sheen. Default: gradient. Scope: Inherited.
data-density
Surface padding, control padding, table cells and layout spacing. Default: comfortable. Scope: Inherited.
Compact
A local density setting.
Comfortable
A local density setting.
Spacious
A local density setting.
data-depth
Buttons, cards, fieldsets, disclosures, dialogs, popovers, menus and desktop panels; control inset shadows use data-controls. Default: subtle. Scope: Inherited.
Flat
A local depth setting.
Subtle
A local depth setting.
Pronounced
A local depth setting.
data-motion
Button transitions, press movement and decorative edge animation; reduced-motion preference wins. Default: subtle. Scope: Inherited.
data-type
Page and subtree typography. Default: standard. Scope: Inherited.
Compact
A local type setting.
Standard
A local type setting.
Large
A local type setting.
data-border
Styled control and surface borders, table rules and menu panel separators; invalid and forced-colour boundaries win. Default: subtle. Scope: Inherited.
Subtle
A local border setting.
Defined
A local border setting.
None
A local border setting.
data-contrast
Readable text and boundary colours; optional glass becomes opaque; device high-contrast preference wins. Default: auto. Scope: Inherited.
Auto
A local contrast setting.
More
A local contrast setting.
data-tone
Neutral, cool or warm page and surface backgrounds. Default: the selected palette surfaces. Explicit values change surfaces without resetting palette foregrounds or primary colours. Scope: Inherited.
Neutral
A local tone setting.
Cool
A local tone setting.
Warm
A local tone setting.
data-controls
Text input, select and textarea fill and inset shadow. Default: styled. Scope: Inherited.
data-width
Content width of .container. Default: standard. Scope: Inherited; affects .container.
data-table
Table stripes and grid lines; grid thickness follows data-border. Default: plain. Scope: Inherited; affects tables.
| Item | State |
|---|---|
| One | Ready |
| Two | Review |
| Item | State |
|---|---|
| One | Ready |
| Two | Review |
| Item | State |
|---|---|
| One | Ready |
| Two | Review |
data-size
Buttons, inputs, selects, textareas, .button links and menu actions; native touch target minimums remain. Default: medium. Scope: Inherited; affects controls and menu actions.
data-ratio
Image and video aspect ratio; auto retains natural proportions. Default: auto. Scope: Inherited; affects images and videos.
data-fit
Image and video content within constrained dimensions. Default: cover. Scope: Inherited; affects constrained images and videos.
data-gap
Spacing in .grid, .row and .stack; combines with density. Default: medium. Scope: Inherited; affects .grid, .row and .stack.
data-edge
Decorative gradient border; shine sweeps on hover/focus, animated turns continuously; motion, border and contrast settings apply. Native input buttons retain regular borders. Default: plain. Scope: Inherited; affects buttons, .button links and .card.
data-material
Buttons, button links, native action inputs and supported surfaces; glass requires the optional stylesheet; solid stops inherited glass. Default: solid. Scope: Inherited material scope; optional glass stylesheet.
Solid
A local material setting.
Glass
A local material setting.
data-variant
Inherited semantic colour for buttons, action inputs, .button links, badges and alerts. Default: primary. Local action attributes override parent settings; existing semantic button classes remain local overrides unless the action supplies a valid variant.
Approved
Success: Your changes have been saved.
data-appearance
Inherited badge and alert appearance. Place this setting on html or a parent; children only need their component class. Default: tinted.