CSS Variables

A reference table of the CSS variables a component reads, from the page’s front matter.

A CSS variables table lists the variables a component reads, with their defaults. The rows live in the page’s front matter, where tools can read them as data.

Part	Variable	Default
`MagicDrawerContent`	`--magic-drawer-height`	`75svh`
`MagicDrawerBackdrop`	`--magic-drawer-backdrop-color`	`rgba(0, 0, 0, 0.5)`

Usage

List the variables under cssVariables, then place the table.

---
cssVariables:
  - variable: --magic-drawer-height
    default: 75svh
    part: MagicDrawerContent
    description: The height of the drawer.
---

::css-variables
::

With part, the table lists only the variables of that part.

::css-variables{part="MagicDrawerBackdrop"}
::