maverick-wave 5.30.0 → 5.32.0

package/src/partials/utilities-container.html

@@ -1,553 +0,0 @@
-<h3 class="mw-section-subtitle">Utilities</h3>
-<p class="mw-text-muted mw-text-measure">
-  The classes that do exactly one thing: spacing, flex, display, text,
-  elevation, aspect ratio. Worth checking before writing a rule of your own -
-  most one-off styles in an application turn out to be a utility that already
-  exists.
-</p>
-
-<div class="mw-grid-3-lg">
-  <div>
-    <h3 class="mw-mb-4">Spacing Utilities</h3>
-    <div class="mw-card mw-card-simple mw-mb-0">No margin bottom</div>
-    <div class="mw-card mw-card-simple mw-mb-2">Small margin bottom</div>
-    <div class="mw-card mw-card-simple mw-mb-4">Medium margin bottom</div>
-    <div class="mw-card mw-card-simple mw-mb-6">Large margin bottom</div>
-
-    <div class="mw-card mw-card-simple mw-p-2">Small padding</div>
-    <div class="mw-card mw-card-simple mw-p-4 mw-mt-4">Medium padding</div>
-    <div class="mw-card mw-card-simple mw-p-6 mw-mt-4">Large padding</div>
-
-    <h4 class="mw-mt-6 mw-mb-2">Auto Margins</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-3">
-      Every margin utility also takes <code>auto</code> -
-      <code>mw-mx-auto</code> centers a block, <code>mw-ml-auto</code> pushes a
-      flex item to the far side.
-    </p>
-
-    <div class="mw-card mw-card-simple mw-mb-4">
-      <div
-        class="mw-card mw-card-simple mw-corner-plain mw-mx-auto"
-        style="width: 60%"
-      >
-        mw-mx-auto
-      </div>
-    </div>
-
-    <div
-      class="mw-card mw-card-simple mw-corner-plain mw-d-flex mw-items-center mw-gap-3"
-    >
-      <span>Left</span>
-      <span class="mw-tag mw-tag-primary mw-ml-auto">mw-ml-auto</span>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Display & Flex Utilities</h3>
-
-    <div class="mw-card mw-card-simple mw-mb-4">
-      <h4 class="mw-mb-2">Flex Row</h4>
-      <div class="mw-d-flex mw-justify-between mw-gap-3">
-        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 1</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 2</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 3</div>
-      </div>
-    </div>
-
-    <div class="mw-card mw-card-simple mw-mb-4">
-      <h4 class="mw-mb-2">Flex Column</h4>
-      <div class="mw-d-flex mw-flex-column mw-gap-3">
-        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 1</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 2</div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">Item 3</div>
-      </div>
-    </div>
-
-    <div class="mw-card mw-card-simple mw-mb-4">
-      <h4 class="mw-mb-2">Alignment</h4>
-      <div
-        class="mw-d-flex mw-justify-center mw-items-center mw-gap-3"
-        style="height: 90px"
-      >
-        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">
-          Centered
-        </div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">
-          Centered
-        </div>
-      </div>
-    </div>
-
-    <div class="mw-card mw-card-simple">
-      <h4 class="mw-mb-2">Align Self</h4>
-      <p class="mw-text-muted mw-text-sm mw-mb-3">
-        <code>mw-items-*</code> sets the rule for the whole container,
-        <code>mw-self-*</code> lets a single child break out of it.
-      </p>
-      <div class="mw-d-flex mw-items-stretch mw-gap-3" style="height: 130px">
-        <div class="mw-card mw-card-simple mw-p-2 mw-corner-plain">stretch</div>
-        <div
-          class="mw-card mw-card-simple mw-p-2 mw-self-start mw-corner-plain"
-        >
-          start
-        </div>
-        <div
-          class="mw-card mw-card-simple mw-p-2 mw-self-center mw-corner-plain"
-        >
-          center
-        </div>
-        <div class="mw-card mw-card-simple mw-p-2 mw-self-end mw-corner-plain">
-          end
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Gap Utilities</h3>
-    <div class="mw-card mw-card-simple">
-      <h4 class="mw-mb-3">Different Gap Sizes (from 0 - 14)</h4>
-
-      <div class="mw-mb-4">
-        <p class="mw-mb-2">Small gap (gap-2)</p>
-        <div class="mw-d-flex mw-gap-2 mw-flex-wrap">
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-        </div>
-      </div>
-
-      <div class="mw-mb-4">
-        <p class="mw-mb-2">Medium gap (gap-4)</p>
-        <div class="mw-d-flex mw-gap-4 mw-flex-wrap">
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-        </div>
-      </div>
-
-      <div>
-        <p class="mw-mb-2">Large gap (gap-7)</p>
-        <div class="mw-d-flex mw-gap-7 mw-flex-wrap">
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-          <div class="mw-card mw-card-simple mw-corner-plain">Item</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Split Rows</h3>
-<p class="mw-text-muted">
-  The most common row in any interface: what it is on the left, the value or the
-  action on the right. <code>mw-row-split</code> wraps, so on a narrow screen
-  the right half drops below instead of squashing the left one.
-  <code>mw-row-split-center</code> switches from baseline to center alignment,
-  for a row that mixes text with a button or an icon.
-</p>
-<div class="mw-grid-2-lg">
-  <div class="mw-card mw-card-simple">
-    <div class="mw-row-split mw-mb-4">
-      <strong>Invoice 2026-0042</strong>
-      <span class="mw-text-currency">1,204.50</span>
-    </div>
-    <div class="mw-row-split mw-mb-4">
-      <span class="mw-text-muted">Due date</span>
-      <span>19.09.2026</span>
-    </div>
-    <div class="mw-row-split">
-      <span class="mw-text-muted">Status</span>
-      <span class="mw-tag mw-tag-neutral">XRechnung</span>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-simple">
-    <div class="mw-row-split mw-row-split-center mw-mb-4">
-      <h4>Team members</h4>
-      <button type="button" class="mw-btn mw-btn-sm mw-btn-primary">
-        <i class="fas fa-plus"></i>
-        Add
-      </button>
-    </div>
-    <div class="mw-row-split mw-row-split-center">
-      <span><i class="fas fa-user mw-mr-2"></i>Alex Fischer</span>
-      <button
-        type="button"
-        class="mw-btn-mini mw-btn-mini-danger"
-        aria-label="Remove Alex Fischer"
-      >
-        <i class="fas fa-times"></i>
-      </button>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Numbers</h3>
-<p class="mw-text-muted">
-  <code>mw-text-numeric</code> gives fixed-width digits and nothing else - for a
-  clock, a counter or an ID that must not jitter while it changes.
-  <code>mw-text-currency</code> adds right alignment and prevents wrapping
-  mid-number, which is what a money column in a table wants.
-</p>
-<div class="mw-card mw-card-simple">
-  <div class="mw-row-split mw-mb-4">
-    <span>Elapsed <code>mw-text-numeric</code></span>
-    <span class="mw-text-numeric">00:11:38</span>
-  </div>
-  <div class="mw-row-split">
-    <span>Total <code>mw-text-currency</code></span>
-    <span class="mw-text-currency">15,930.25</span>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Screen Reader Only</h3>
-<p class="mw-text-muted">
-  <code>mw-sr-only</code> hides text visually but keeps it in the accessibility
-  tree - the label an icon-only button still owes its user.
-  <code>display: none</code> would not do: it drops the element out of that tree
-  as well. The two buttons below look identical; only one of them says what it
-  does.
-</p>
-<div class="mw-card mw-card-simple">
-  <div class="mw-d-flex mw-items-center mw-gap-4">
-    <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
-      <i class="fas fa-trash"></i>
-      <span class="mw-sr-only">Delete invoice 2026-0042</span>
-    </button>
-    <code>&lt;span class="mw-sr-only"&gt;Delete invoice&lt;/span&gt;</code>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Tooltips</h3>
-<p class="mw-text-muted">
-  Put <code>data-tooltip="..."</code> on any element - pure CSS, no script
-  needed. The bubble sits above the element on hover or keyboard focus and long
-  text wraps instead of running off in one endless line. It reaches outside a
-  card, because cards only clip their content when they carry a ribbon. What
-  does still cut it off: a scroll container, and the edge of the screen.
-</p>
-<p class="mw-text-muted">
-  Add <code>mw-tooltip-below</code> to put it underneath instead - for a control
-  in a fixed header, where above is off the screen.
-  <code>mw-tooltip-end</code> and <code>mw-tooltip-start</code> line the bubble
-  up with that edge of the trigger rather than centring it, for a trigger close
-  to the side of the screen. The two axes combine, and the arrow keeps pointing
-  at the trigger by itself.
-</p>
-<div class="mw-card mw-card-simple">
-  <p class="mw-mb-4">
-    Works on inline elements too:
-    <a href="#utilities" data-tooltip="A link">a link</a>,
-    <code data-tooltip="Some code">a code span</code> or
-    <i class="fas fa-circle-info" data-tooltip="An icon"></i> an icon.
-  </p>
-  <div class="mw-d-flex mw-gap-4 mw-flex-wrap">
-    <button
-      type="button"
-      class="mw-btn mw-btn-outline"
-      data-tooltip="Hover or focus me"
-    >
-      A button
-    </button>
-    <span class="mw-tag mw-tag-primary" data-tooltip="Tags work as well">
-      Tag
-    </span>
-    <span
-      class="mw-tag mw-tag-success"
-      data-tooltip="Long text wraps at 280px instead of running off the screen in one endless line"
-    >
-      Long text
-    </span>
-    <button
-      type="button"
-      class="mw-btn mw-btn-outline mw-tooltip-below"
-      data-tooltip="This one sits underneath"
-    >
-      Below
-    </button>
-    <button
-      type="button"
-      class="mw-btn mw-btn-outline mw-tooltip-end"
-      data-tooltip="Right edge on the trigger's right edge"
-    >
-      End
-    </button>
-    <button
-      type="button"
-      class="mw-btn mw-btn-outline mw-tooltip-below mw-tooltip-end"
-      data-tooltip="Both at once, no extra rule needed"
-    >
-      Below + end
-    </button>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Text Overflow &amp; Wrapping</h3>
-<p class="mw-text-muted mw-text-measure">
-  The two ways a long string is cut short, and they are not interchangeable:
-  <code>mw-text-truncate</code> is one line ending in an ellipsis,
-  <code>mw-text-clamp-2</code> through <code>-5</code> is that many lines ending
-  in one. Truncation carries <code>min-width: 0</code> with it, which is the
-  reason it "does not work" nine times out of ten inside a flex row.
-</p>
-<div class="mw-grid-2 mw-gap-6">
-  <div class="mw-card mw-card-simple">
-    <h4 class="mw-text-medium mw-mb-2"><code>mw-text-truncate</code></h4>
-    <p class="mw-text-truncate">
-      One line only: this sentence is far longer than the box it has been given
-      and ends in an ellipsis rather than wrapping.
-    </p>
-    <h4 class="mw-text-medium mw-mb-2 mw-mt-5">
-      <code>mw-text-clamp-2</code>
-    </h4>
-    <p class="mw-text-clamp-2">
-      Two lines and then an ellipsis. This paragraph runs on for long enough
-      that the third line is cut off, which is what a card preview or a list
-      subtitle wants when the copy is not yours to control.
-    </p>
-    <h4 class="mw-text-medium mw-mb-2 mw-mt-5">
-      <code>mw-text-break</code>
-    </h4>
-    <p class="mw-text-break">
-      https://example.com/a/very/long/url/that/has/no/spaces/in/it/at/all/and/would/otherwise/push/the/page/sideways
-    </p>
-  </div>
-  <div class="mw-card mw-card-simple">
-    <h4 class="mw-text-medium mw-mb-2">
-      <code>mw-text-balance</code> and <code>mw-text-pretty</code>
-    </h4>
-    <p class="mw-text-muted mw-text-sm">
-      Headings get <code>balance</code> by default - it evens the lines out so
-      no headline leaves one word alone on the last one. Paragraphs get
-      <code>pretty</code>, which only prevents the orphan. Both are on already;
-      the classes are for anything the framework does not style itself.
-    </p>
-    <h4 class="mw-text-medium mw-mb-2 mw-mt-5">
-      <code>mw-text-eyebrow</code>
-    </h4>
-    <p class="mw-text-eyebrow mw-mb-1">Release notes</p>
-    <h4 class="mw-mb-0">The kicker above a heading</h4>
-    <h5 class="mw-text-medium mw-mb-2 mw-mt-5">
-      <code>mw-text-measure</code>
-    </h5>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">
-      Caps a column at 68 characters. Past roughly 75 the eye loses the start of
-      the next line on the way back, which is why a full-width paragraph on a
-      desktop is harder to read than a narrow one.
-    </p>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Elevation</h3>
-<p class="mw-text-muted mw-text-measure">
-  The same five-step ramp every component uses, as classes. Each level is two
-  shadows: a tight contact layer that gives the box weight, and a wide ambient
-  one that says how high it floats. One layer alone reads as a blur behind the
-  box - the pair reads as light. <code>mw-elevation-0</code> is explicitly flat,
-  for taking something off the page it normally floats above.
-</p>
-<div class="mw-grid-3 mw-gap-6">
-  <div class="mw-card mw-card-simple mw-elevation-1">
-    <h4 class="mw-text-medium mw-mb-1">1 &middot; resting</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">
-      Inputs, tags, small controls.
-    </p>
-  </div>
-  <div class="mw-card mw-card-simple mw-elevation-2">
-    <h4 class="mw-text-medium mw-mb-1">2 &middot; raised</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">Cards and panels at rest.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-elevation-3">
-    <h4 class="mw-text-medium mw-mb-1">3 &middot; floating</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">A card under the pointer.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-elevation-4">
-    <h4 class="mw-text-medium mw-mb-1">4 &middot; overlay</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">Dropdowns, popovers, drawer.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-elevation-5">
-    <h4 class="mw-text-medium mw-mb-1">5 &middot; modal</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">The dialog over everything.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-elevation-0">
-    <h4 class="mw-text-medium mw-mb-1">0 &middot; flat</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">Explicitly on the page.</p>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Glow</h3>
-<p class="mw-text-muted mw-text-measure">
-  The other half of the lighting model: elevation says how far a surface floats
-  above the page, a glow says it is the thing giving off the light. Two layers
-  like elevation, and both without an offset - light does not fall downwards,
-  which is the whole difference between this and a coloured shadow. For the one
-  element on a screen that has to be looked at first, and for nothing else. Bare
-  <code>mw-glow</code> is the primary one.
-</p>
-<div class="mw-grid-3 mw-gap-6">
-  <div class="mw-card mw-card-simple mw-glow-primary">
-    <h4 class="mw-text-medium mw-mb-1">primary</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">The brand, and the default.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-glow-secondary">
-    <h4 class="mw-text-medium mw-mb-1">secondary</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">The second brand tone.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-glow-info">
-    <h4 class="mw-text-medium mw-mb-1">info</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">Something worth reading.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-glow-success">
-    <h4 class="mw-text-medium mw-mb-1">success</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">It worked - say so once.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-glow-warning">
-    <h4 class="mw-text-medium mw-mb-1">warning</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">Check this before going on.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-glow-danger">
-    <h4 class="mw-text-medium mw-mb-1">danger</h4>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">
-      The one that cannot be undone.
-    </p>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Responsive Display</h3>
-<p class="mw-text-muted mw-text-measure">
-  Mobile-first and min-width, like everything else here.
-  <code>mw-d-md-flex</code> means "flex from the md breakpoint up", and the
-  unprefixed class beside it is what applies below that - the pair
-  <code>mw-d-none mw-d-md-flex</code> is hidden on a phone and a row from a
-  tablet on. Variants exist for <code>sm</code>, <code>md</code>,
-  <code>lg</code> and <code>xl</code>.
-</p>
-<div class="mw-card mw-card-simple">
-  <div class="mw-row-split mw-row-split-center">
-    <code>mw-hide-mobile</code>
-    <span class="mw-hide-mobile mw-badge mw-badge-success">visible now</span>
-    <span class="mw-hide-desktop mw-badge mw-badge-muted">hidden below md</span>
-  </div>
-  <hr class="mw-divider" />
-  <div class="mw-row-split mw-row-split-center">
-    <code>mw-hide-desktop</code>
-    <span class="mw-hide-desktop mw-badge mw-badge-success">visible now</span>
-    <span class="mw-hide-mobile mw-badge mw-badge-muted"
-      >hidden from md up</span
-    >
-  </div>
-  <p class="mw-text-muted mw-text-sm mw-mt-4 mw-mb-0">
-    Resize the window past 768px to see the two swap.
-  </p>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Aspect Ratio</h3>
-<p class="mw-text-muted mw-text-measure">
-  Reserves the box before the image inside it has loaded, which is the whole
-  point: without it the page reflows when the picture arrives and everything
-  below jumps. The child fills the box and crops rather than stretching.
-  <code>mw-aspect-square</code>, <code>-video</code>, <code>-wide</code>,
-  <code>-portrait</code>, <code>-photo</code>.
-</p>
-<div class="mw-grid-3 mw-gap-4">
-  <div
-    class="mw-aspect-square mw-card mw-card-simple mw-d-flex mw-items-center mw-justify-center"
-  >
-    <code>square</code>
-  </div>
-  <div
-    class="mw-aspect-video mw-card mw-card-simple mw-d-flex mw-items-center mw-justify-center"
-  >
-    <code>video</code>
-  </div>
-  <div
-    class="mw-aspect-photo mw-card mw-card-simple mw-d-flex mw-items-center mw-justify-center"
-  >
-    <code>photo</code>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Squircle Corners</h3>
-<p class="mw-text-muted mw-text-measure">
-  <code>mw-squircle</code> draws the framework silhouette with a superellipse
-  instead of a circular arc - same four radii, fuller curve. Opt-in, because
-  <code>corner-shape</code> only lands in Chromium so far; everywhere else the
-  card below is simply the normal one.
-</p>
-<div class="mw-grid-2 mw-gap-6">
-  <div class="mw-card mw-card-simple">
-    <strong>Default</strong>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">Circular corner radii.</p>
-  </div>
-  <div class="mw-card mw-card-simple mw-squircle">
-    <strong>mw-squircle</strong>
-    <p class="mw-text-muted mw-text-sm mw-mb-0">
-      Superellipse, corner accent follows.
-    </p>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Site-wide Variants</h3>
-<p class="mw-text-muted mw-text-measure">
-  Twelve classes on <code>&lt;html&gt;</code> retune the whole look without
-  touching markup. They stack, and the palette button in the corner switches all
-  of them live - the box at the bottom of that panel prints the setup a project
-  would carry, and reads it back: paste one in to see someone else's.
-</p>
-<ul class="mw-list mw-list-dot mw-text-measure">
-  <li>
-    <code>mw-corners-even</code> - drops the surface signature; every panel
-    becomes an evenly rounded box
-  </li>
-  <li>
-    <code>mw-accent-single</code> - one brand colour instead of two,
-    <code>mw-btn-secondary</code> turns outline
-  </li>
-  <li>
-    <code>mw-shadows-flat</code> - elevation 1-3 to <code>none</code>, dropdown
-    and modal keep theirs
-  </li>
-  <li>
-    <code>mw-surfaces-flush</code> - cards, panels and footer on the page
-    colour, held by their border
-  </li>
-  <li>
-    <code>mw-hover-static</code> - no hover travels; colour and border still
-    respond
-  </li>
-  <li>
-    <code>mw-scroll-static</code> - no scroll entrance;
-    <code>mw-reveal</code> blocks sit where they land
-  </li>
-  <li>
-    <code>mw-sections-plain</code> - the hatch behind
-    <code>mw-section-alternate</code> collapses into the page colour
-  </li>
-  <li><code>mw-headings-caps</code> - h1 to h3 in capitals</li>
-  <li>
-    <code>mw-btn-pill</code> - fully rounded buttons, form fields keep their
-    radius
-  </li>
-  <li>
-    <code>mw-btn-square</code> - the other end of that axis: buttons cut to a
-    hard corner while the page keeps its radius
-  </li>
-  <li>
-    <code>mw-btn-tactile</code> - filled buttons stand on a darker edge and sink
-    onto it when pressed
-  </li>
-  <li>
-    <code>mw-btn-glass</code> - filled buttons become tinted glass with a lit
-    top edge
-  </li>
-</ul>
-<p class="mw-text-muted mw-text-measure">
-  Five properties do the rest: <code>--mw-radius-scale</code> multiplies every
-  radius and <code>--mw-root-font-size</code> the whole rem scale, plus
-  <code>--mw-font-family-heading</code>, <code>--mw-container-width</code> and
-  <code>--mw-section-padding-block</code>.
-</p>