texture

<!-- aria-hidden and pointer-events: none — this is decoration. It must never
     intercept a click, and a screen reader must never meet it.

     The layer is position: fixed with a negative z-index, so it sits behind
     the page and does not scroll. Everything else here is demo dressing. -->
<div class="sk-texture" data-texture="dots" aria-hidden="true"></div>

<div class="sk-texture__content">
  <h3 class="sk-texture__title">Dots, behind everything</h3>
  <p class="sk-texture__text">
    The ink is a <code>color-mix()</code> of the text colour, so it inverts
    with the theme on its own — there is no dark-mode rule in the stylesheet.
  </p>
  <p class="sk-texture__text">
    <code>data-texture</code> also takes <code>grid</code> and
    <code>glow</code>. There is deliberately no <code>noise</code>: it is the
    one pattern CSS cannot draw without an embedded SVG filter.
  </p>
</div>

/* .sk-texture — a fixed decorative layer behind everything.

   THE IDEA WORTH STEALING FROM THIS FILE: the ink colour is not chosen, it is
   MIXED FROM THE TEXT COLOUR. A decoration picked as a literal needs a second
   value for dark mode and a media query to switch them; one mixed from a token
   inverts on its own when the scheme flips, because the token already did.
   There is no dark-mode block in this file and there does not need to be one.

   aria-hidden in the markup, pointer-events: none and a negative z-index here:
   this is decoration, and it must never intercept a click or reach the
   accessibility tree.

   Specs:
   - color-mix() ........... https://drafts.csswg.org/css-color-5/#color-mix
   - radial-gradient() ..... https://drafts.csswg.org/css-images-3/#radial-gradients
   - repeating-linear-gradient
                             https://drafts.csswg.org/css-images-3/#repeating-gradients */

/* Public theme knobs (ADR 0011). Read, never declared. */
.sk-texture {
  --_color: var(--sk-texture-color, color-mix(in oklab, var(--sk-color-text) 7%, transparent));
  --_size: var(--sk-texture-size, 1.75rem);
  --_opacity: var(--sk-texture-opacity, 1);

  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: var(--_opacity);
  pointer-events: none;
}

/* Dots: one radial-gradient stop, tiled by background-size. The dot is a
   sixth of the cell, which reads as texture rather than as pattern. */
.sk-texture[data-texture="dots"] {
  background-image: radial-gradient(circle at center, var(--_color) 16%, transparent 17%);
  background-size: var(--_size) var(--_size);
}

/* Grid: two repeating gradients, one per axis. Hairlines rather than a
   border, so the cell size is the only thing a consumer has to think about. */
.sk-texture[data-texture="grid"] {
  background-image:
    repeating-linear-gradient(to right, var(--_color) 0 1px, transparent 1px var(--_size)),
    repeating-linear-gradient(to bottom, var(--_color) 0 1px, transparent 1px var(--_size));
}

/* Glow: a single soft radial wash. --_size is a radius here rather than a
   cell, which is the one place the token means something different per
   variant — the README says so. */
.sk-texture[data-texture="glow"] {
  background-image: radial-gradient(
    circle at 50% 0%,
    var(--_color) 0,
    transparent calc(var(--_size) * 20)
  );
}

/* ---------------------------------------------------------------------------
   Presentation, not behaviour

   The demo needs something in front of the texture to prove it sits behind.
   Delete this when applying .sk-texture to your own page.
--------------------------------------------------------------------------- */

.sk-texture__content {
  display: grid;
  gap: var(--sk-space-xs);
  max-inline-size: 30rem;
  padding: var(--sk-space-lg);
}

.sk-texture__title {
  font-size: var(--sk-text-lg);
  letter-spacing: var(--sk-tracking-tight);
}

.sk-texture__text {
  margin: 0;
  color: var(--sk-color-text-muted);
  font-size: var(--sk-text-sm);
}