Token reference

CSS custom properties are Markup Refine's public theming API. This reference is generated directly from the stable markup-refine-lib/css source import graph, so it lists tokens that are actually defined by the package rather than a hand-maintained duplicate.

Override tokens on the nearest application root or data-mr island. Component tokens inherit normally, so an override may be scoped to one subtree without changing other Markup Refine islands.

120 stable custom properties are currently defined.

Application shell

Token	Defined by
`--mr-shell-sidebar-width`	`src/library/components/applicationShell/application-shell.css`
`--mr-shell-subbar-height`	`src/library/components/applicationShell/application-shell.css`
`--mr-shell-topbar-height`	`src/library/components/applicationShell/application-shell.css`

Buttons

Token	Defined by
`--mr-button-border-width`	`src/library/globals/variables.css`

Colors

Token	Defined by
`--mr-color-background`	`src/library/globals/variables.css`
`--mr-color-background-light-contrast`	`src/library/globals/variables.css`
`--mr-color-help`	`src/library/globals/variables.css`
`--mr-color-help-darker`	`src/library/globals/variables.css`
`--mr-color-info`	`src/library/globals/variables.css`
`--mr-color-info-darker`	`src/library/globals/variables.css`
`--mr-color-link`	`src/library/globals/variables.css`
`--mr-color-link-hover`	`src/library/globals/variables.css`
`--mr-color-link-visited`	`src/library/globals/variables.css`
`--mr-color-main-text`	`src/library/globals/variables.css`
`--mr-color-main-text-area`	`src/library/globals/variables.css`
`--mr-color-main-text-area-darker`	`src/library/globals/variables.css`
`--mr-color-negative`	`src/library/globals/variables.css`
`--mr-color-negative-darker`	`src/library/globals/variables.css`
`--mr-color-overlay`	`src/library/globals/variables.css`
`--mr-color-positive`	`src/library/globals/variables.css`
`--mr-color-positive-darker`	`src/library/globals/variables.css`
`--mr-color-primary`	`src/library/globals/variables.css`
`--mr-color-primary-darker`	`src/library/globals/variables.css`
`--mr-color-primary-lighter`	`src/library/globals/variables.css`
`--mr-color-secondary`	`src/library/globals/variables.css`
`--mr-color-secondary-darker`	`src/library/globals/variables.css`
`--mr-color-secondary-lighter`	`src/library/globals/variables.css`
`--mr-color-text-on-primary`	`src/library/globals/variables.css`
`--mr-color-text-on-primary-darker`	`src/library/globals/variables.css`
`--mr-color-text-on-secondary`	`src/library/globals/variables.css`
`--mr-color-text-primary`	`src/library/globals/variables.css`
`--mr-color-text-secondary`	`src/library/globals/variables.css`
`--mr-color-warning`	`src/library/globals/variables.css`
`--mr-color-warning-darker`	`src/library/globals/variables.css`

Controls

Token	Defined by
`--mr-control-border-width`	`src/library/globals/variables.css`
`--mr-control-font-size`	`src/library/globals/variables.css`
`--mr-control-padding`	`src/library/globals/variables.css`

Focus

Token	Defined by
`--mr-focus-outline-offset`	`src/library/globals/variables.css`
`--mr-focus-outline-style`	`src/library/globals/variables.css`
`--mr-focus-outline-width`	`src/library/globals/variables.css`

Layers

Token	Defined by
`--mr-layer-actions-border-color`	`src/library/globals/variables.css`
`--mr-layer-actions-border-width`	`src/library/globals/variables.css`
`--mr-layer-actions-gap`	`src/library/globals/variables.css`
`--mr-layer-actions-padding-block-start`	`src/library/globals/variables.css`
`--mr-layer-backdrop-blur`	`src/library/globals/variables.css`
`--mr-layer-backdrop-color`	`src/library/globals/variables.css`
`--mr-layer-closed-transform`	`src/library/components/layer/layer.css`
`--mr-layer-description-gap`	`src/library/globals/variables.css`
`--mr-layer-drawer-inline-size`	`src/library/components/applicationShell/application-shell.css` `src/library/globals/variables.css`
`--mr-layer-header-gap`	`src/library/globals/variables.css`
`--mr-layer-motion-distance`	`src/library/globals/variables.css`
`--mr-layer-motion-duration`	`src/library/globals/variables.css`
`--mr-layer-motion-easing`	`src/library/globals/variables.css`
`--mr-layer-motion-scale`	`src/library/globals/variables.css`
`--mr-layer-popover-max-block-size`	`src/library/globals/variables.css`
`--mr-layer-popover-max-inline-size`	`src/library/globals/variables.css`
`--mr-layer-popover-padding`	`src/library/globals/variables.css`
`--mr-layer-popover-radius`	`src/library/globals/variables.css`
`--mr-layer-section-gap`	`src/library/globals/variables.css`
`--mr-layer-surface-background`	`src/library/components/applicationShell/application-shell.css` `src/library/components/searchTool/search-tool.css` `src/library/globals/variables.css`
`--mr-layer-surface-border-color`	`src/library/components/searchTool/search-tool.css` `src/library/globals/variables.css`
`--mr-layer-surface-border-width`	`src/library/components/searchTool/search-tool.css` `src/library/globals/variables.css`
`--mr-layer-surface-color`	`src/library/components/searchTool/search-tool.css` `src/library/globals/variables.css`
`--mr-layer-surface-inline-size`	`src/library/globals/variables.css`
`--mr-layer-surface-max-block-size`	`src/library/globals/variables.css`
`--mr-layer-surface-max-inline-size`	`src/library/components/applicationShell/application-shell.css` `src/library/globals/variables.css`
`--mr-layer-surface-padding`	`src/library/components/applicationShell/application-shell.css` `src/library/components/searchTool/search-tool.css` `src/library/globals/variables.css`
`--mr-layer-surface-radius`	`src/library/components/applicationShell/application-shell.css` `src/library/components/searchTool/search-tool.css` `src/library/globals/variables.css`
`--mr-layer-viewport-gap`	`src/library/globals/variables.css`

Layout

Token	Defined by
`--mr-cluster-align`	`src/library/globals/variables.css`
`--mr-cluster-gap`	`src/library/globals/variables.css`
`--mr-container-max-width`	`src/library/globals/variables.css`
`--mr-container-padding-inline`	`src/library/globals/variables.css`
`--mr-grid-gap`	`src/library/globals/variables.css`
`--mr-grid-min-column-size`	`src/library/globals/variables.css`
`--mr-inline-gap`	`src/library/globals/variables.css`
`--mr-stack-gap`	`src/library/globals/variables.css`

Motion

Token	Defined by
`--mr-motion-duration-fast`	`src/library/globals/variables.css`
`--mr-motion-duration-medium`	`src/library/globals/variables.css`
`--mr-motion-duration-normal`	`src/library/globals/variables.css`
`--mr-motion-duration-short`	`src/library/globals/variables.css`

Other

Token	Defined by
`--mr-overlay-blur`	`src/library/globals/variables.css`

Radii

Token	Defined by
`--mr-radius-large`	`src/library/globals/variables.css`
`--mr-radius-medium`	`src/library/globals/variables.css`

Search

Token	Defined by
`--mr-search-input-border-width`	`src/library/components/searchTool/search-tool.css`
`--mr-search-spinner-border-width`	`src/library/components/searchTool/search-tool.css`

Spacing

Token	Defined by
`--mr-space-lg`	`src/library/globals/variables.css`
`--mr-space-md`	`src/library/globals/variables.css`
`--mr-space-sm`	`src/library/globals/variables.css`
`--mr-space-xs`	`src/library/globals/variables.css`

Tooltips

Token	Defined by
`--mr-tooltip-background`	`src/library/globals/variables.css`
`--mr-tooltip-border-color`	`src/library/globals/variables.css`
`--mr-tooltip-border-width`	`src/library/globals/variables.css`
`--mr-tooltip-color`	`src/library/globals/variables.css`
`--mr-tooltip-content-gap`	`src/library/globals/variables.css`
`--mr-tooltip-control-gap`	`src/library/globals/variables.css`
`--mr-tooltip-control-inset`	`src/library/globals/variables.css`
`--mr-tooltip-control-size`	`src/library/globals/variables.css`
`--mr-tooltip-inline-size`	`src/library/globals/variables.css`
`--mr-tooltip-max-block-size`	`src/library/globals/variables.css`
`--mr-tooltip-max-inline-size`	`src/library/globals/variables.css`
`--mr-tooltip-min-inline-size`	`src/library/globals/variables.css`
`--mr-tooltip-motion-distance`	`src/library/globals/variables.css`
`--mr-tooltip-motion-duration`	`src/library/globals/variables.css`
`--mr-tooltip-motion-easing`	`src/library/globals/variables.css`
`--mr-tooltip-padding-block`	`src/library/globals/variables.css`
`--mr-tooltip-padding-inline`	`src/library/globals/variables.css`
`--mr-tooltip-pin-progress-color`	`src/library/globals/variables.css`
`--mr-tooltip-pin-progress-stroke-width`	`src/library/globals/variables.css`
`--mr-tooltip-pin-progress-track-color`	`src/library/globals/variables.css`
`--mr-tooltip-pinned-outline-color`	`src/library/globals/variables.css`
`--mr-tooltip-pinned-outline-offset`	`src/library/globals/variables.css`
`--mr-tooltip-pinned-outline-width`	`src/library/globals/variables.css`
`--mr-tooltip-radius`	`src/library/globals/variables.css`
`--mr-tooltip-shadow`	`src/library/globals/variables.css`
`--mr-tooltip-title-font-weight`	`src/library/globals/variables.css`

Typography

Token	Defined by
`--mr-font-family-mono`	`src/library/globals/variables.css`
`--mr-font-family-sans`	`src/library/globals/variables.css`
`--mr-font-family-serif`	`src/library/globals/variables.css`
`--mr-line-height-body`	`src/library/globals/variables.css`

Runtime-only custom properties

A behavior may write an internal custom property without defining it as a theme token. For example, Tooltip pin progress writes --mr-tooltip-pin-delay from the configured JavaScript pinDelay so CSS progress and behavior share one clock. Runtime-only properties are intentionally absent from the generated stable token inventory unless the stable CSS defines them as an author-overridable token.

MarkupRefineLib

Menu