REFERENCE

CSS tokens

Shared attributes are the main configuration API. Use custom properties for values that need a project-specific adjustment.

Custom properties

Area	Property	Value type	Use
Custom width	`--re-custom-max-width / --re-custom-side-padding`	Nonnegative length	Maximum page width including padding (75rem default) and per-side padding (1rem default) with data-width=custom. Padding is capped in narrow parents.
Layout	`--re-container-width / --re-container-padding`	Size / nonnegative length	Container width/padding overrides used by Full and Custom; existing width presets reset both. Navbar width remains independent.
Custom density	`--re-custom-surface-padding / --re-custom-content-space`	Nonnegative length	Base surface padding and content gaps with data-density=custom; both default to 1rem. Cards scale surface padding by 1.5.
Custom density	`--re-custom-control-density`	Nonnegative number	Control-padding multiplier with data-density=custom; default 1. Minimum control heights remain independent.
Layout	`--re-surface-space`	Nonnegative length	Base surface padding; falls back to --re-space when omitted. Local density presets reset it.
Custom shape	`--re-custom-surface-radius / --re-custom-field-radius / --re-custom-action-radius`	Nonnegative length	Independent surface, field and action corners with data-shape=custom; .75rem defaults. Local presets reset all groups.
Liquid buttons	`--re-liquid-scale-x / --re-liquid-scale-y`	Positive numbers	Pressed expansion: subtle 1.025/1.015; expressive 1.045/1.02. Motion none and reduced motion suppress expansion.
Liquid buttons	`--re-liquid-blur`	Nonnegative length	Backdrop blur radius; default 14px. Accessibility preferences disable filtering.
Liquid buttons	`--re-liquid-opacity`	Percentage	Neutral backing; default 12%. The background remains visible through the glass. Review label contrast over custom backgrounds; preference fallbacks are opaque.
Scrolling	`--re-anchor-offset`	Nonnegative length	Gap above fragment destinations; default 1rem. Sticky navbar clearance is added separately; account for custom fixed headers yourself.
Scrolling	`--re-target-duration`	Nonnegative time	Expressive fragment highlight duration; default 1.4s. Does not set native scroll speed.
Overlay motion	`--re-drawer-shift / --re-drawer-direction`	Length / 1 or -1	Drawer entrance distance and inline-end/start direction. Direction defaults to 1.
Overlay motion	`--re-popover-offset / --re-popover-scale`	Length / positive number	Numeric expressive overlay translation and scale.
Viewport	`--re-safe-top / --re-safe-right / --re-safe-bottom / --re-safe-left`	Nonnegative lengths	Physical safe-area insets, defaulting to browser env() values. Used by full-height overlays and modal bounds.
Gallery	`--re-gallery-width`	Positive length	Maximum slide width; default 24rem, bounded by the scroll container.
Scroll motion	`--re-reveal-distance`	Length	Optional expressive card entrance distance; default .75rem.
Document transitions	`--re-view-duration`	Nonnegative time	Optional navigation transition duration; defaults to inherited --re-duration.
Semantic colours	`--re-secondary / --re-secondary-end / --re-on-secondary`	Colours	Secondary action fill, gradient endpoint and foreground.
Semantic colours	`--re-success / --re-success-end / --re-on-success`	Colours	Success fill, gradient endpoint and foreground.
Semantic colours	`--re-warning / --re-warning-end / --re-on-warning`	Colours	Warning fill, gradient endpoint and foreground.
Semantic colours	`--re-danger / --re-danger-end / --re-on-danger`	Colours	Danger fill, gradient endpoint and foreground.
Semantic colours	`--re-secondary-link / --re-danger-link`	Colours	Readable secondary and danger outline/ghost text.
Charts	`--re-chart-color`	Colour	Local SVG series stroke; defaults to the primary colour.
Charts	`--re-chart-ring-width`	SVG user units	Doughnut stroke width; default 22.
Drawer	`--re-drawer-width`	Length	Inspector width; default 28rem, customisable with ordinary CSS. Bounded by the viewport.
Application layout	`--re-sidebar-width`	Length	Sidebar and mobile drawer width; 16rem fallback, bounded by viewport.
Navigation	`--re-navbar-height`	Nonnegative length	Full header clearance for anchors and keyboard focus; fallback 6rem plus twice the Floating margin. Override for taller content; the optional demo helper measures it.
Navigation	`--re-navbar-offset`	Nonnegative length	Extra sticky block-start offset; default 0px, with the top safe area added separately.
Navigation	`--re-navbar-space`	Nonnegative length	Spaced header wrapper gap; default 1rem, capped at .5rem below 48rem. Flush removes it.
Navigation	`--re-navbar-z`	Integer	Sticky header stacking level; default 30. Native top-layer overlays remain above it.
Navigation	`--re-navbar-width`	Length or percentage	Layout width; standard 100%, floating min(100% - 2rem, page width). data-navbar-width=full overrides the surface width.
Navigation	`--re-navbar-margin`	Length	Layout block margin; standard 0, floating 1rem. data-navbar-spacing=flush removes it.
Veil (deprecated)	`--re-veil-opacity`	Percentage	Surface backing; 94% default. Accessibility fallbacks use opaque backing.
Veil (deprecated)	`--re-veil-strength`	Number, 0–1	Perimeter colour and contour strength; 1 default. More contrast removes decoration.
Navigation	`--re-dropdown-width`	Length	Standalone dropdown width; 18rem fallback, bounded by viewport
Palette	`--re-bg`	Colour	Page background
Palette	`--re-surface`	Colour	Opaque component surface
Palette	`--re-surface-alt`	Colour	Secondary surface
Palette	`--re-text`	Colour	Main foreground
Palette	`--re-muted`	Colour	Supporting foreground
Palette	`--re-link`	Colour	Link foreground
Palette	`--re-line`	Colour	Surface boundary
Palette	`--re-control-line`	Colour	Control boundary
Accent	`--re-primary / --re-primary-end`	Colours	Accent stops; override both together
Accent	`--re-on-primary`	Colour	Foreground for the accent fill
Typography	`--re-font`	Font-family list	Body and control font
Typography	`--re-font-heading`	Font-family list	Optional heading override; otherwise falls back to --re-font
Layout	`--re-radius / --re-field-radius / --re-button-radius`	Length	Surface, field and action roundness. Fields fall back to --re-radius.
Layout	`--re-space / --re-gap`	Length	Base spacing
Layout	`--re-container`	Length or percentage	Maximum container width; 75rem by default, 100% with Full
Layout	`--re-column`	Length	Auto-fit grid column target; 18rem fallback
Layout	`--re-prose`	Length	Readable content width; 65ch fallback
Layout	`--re-card-padding`	Length	Optional card padding override
Material	`--re-glass-opacity`	Percentage	Glass surfaces; 32% default
Material	`--re-glass-button-opacity`	Percentage	Glass actions and small surfaces; 90% default
Material	`--re-glass-shadow`	Shadow list or none	Glass elevation and rim shadows; follows shared data-depth
Material	`--re-glass-filter`	Filter value	blur(12px) saturate(145%) default
Assets	`--re-icon-size`	Length	Icon dimensions; 1.25em fallback
Assets	`--re-icon-stroke`	Number	SVG stroke width; 1.75 fallback
Assets	`--re-avatar-size`	Length	Avatar base size; 2.75rem fallback
Content	`--re-skeleton-width / --re-skeleton-height`	Length or percentage	Placeholder width/height; 100% / 1em fallbacks
Content	`--re-description-label`	Length	Description-list label column; 12rem fallback
Navigation	`--re-menu-width`	Length	Desktop panel width; 20rem fallback
Navigation	`--re-menu-anchor`	CSS identifier	Unique menu anchor; see complete menu markup

Other component-internal variables implement derived colours and state. Prefer the shared attributes and documented properties above; component-internal variables may change between versions.

Default palette: monochrome foundations and Blue Teal accent

The values below come from the palette manifest. Choose a different coordinated set with data-palette. Tone, local theme and glass material can alter effective component colours.

Property	Light	Dark
`--re-bg`	`#FAFAFA`	`#101010`
`--re-surface`	`#FFFFFF`	`#191919`
`--re-text`	`#111111`	`#F5F5F5`
`--re-surface-alt`	`#EDEDED`	`#292929`
`--re-primary`	`#1F6E8C`	`#2E8A99`
`--re-on-primary`	`#FFFFFF`	`#111111`
`--re-line`	`#D4D4D4`	`#414141`
`--re-primary-end`	`#195E78`	`#57ACB8`
`--re-link`	`#1F6E8C`	`#65BBC7`
`--re-muted`	`#4C4C4C`	`#BEBEBE`
`--re-control-line`	`#7C7C7C`	`#929292`

Semantic role tokens

Property	Light	Dark
`--re-secondary`	`#4B5563`	`#BFC8CD`
`--re-secondary-end`	`#3D4652`	`#CDD5D9`
`--re-on-secondary`	`#FFFFFF`	`#111111`
`--re-secondary-link`	`#4B5563`	`#BFC8CD`
`--re-success`	`#256B4E`	`#78B99B`
`--re-success-end`	`#1D573F`	`#8EC9AD`
`--re-on-success`	`#FFFFFF`	`#111111`
`--re-danger`	`#A63D4F`	`#D98B97`
`--re-danger-end`	`#8C3041`	`#E39EAA`
`--re-on-danger`	`#FFFFFF`	`#111111`
`--re-danger-link`	`#A63D4F`	`#D98B97`
`--re-warning`	`#E6BC63`	`#E6BC63`
`--re-warning-end`	`#D5A94E`	`#F0CB7C`
`--re-on-warning`	`#111111`	`#111111`

Override on the configured boundary

Global application values can live on :root. Scoped overrides belong on .reva or a descendant. Explicit shared attributes can install their own local token values, so place custom overrides where they should take precedence.

:root {
  --re-primary: #7041cf;
  --re-primary-end: #5228a4;
  --re-on-primary: #fff;
}
.reva.product-panel {
  --re-container: 60rem;
  --re-card-padding: 1.25rem;
}

Changing a colour does not automatically produce a readable palette. Review foregrounds, gradients, borders and glass backgrounds together. Opacity properties take percentages rather than decimal numbers.

Foundation token source · Palette token manifest (2 palettes) · Attribute option manifest