Replaced Media Defaults

audio, canvas, iframe, video

scss

audio,
canvas,
iframe,
video {
  margin-bottom: var(--newline);
}

Replaced media elements get a new-line of spacing after.

img

scss

img {
  filter: brightness(var(--img-bright, var(--img-bright--default, 1)))
    contrast(var(--img-contrast, var(--img-contrast--default, 1)));
}

Adjust image brightness depending on mode & contrast

picture

scss

picture {
  display: contents;
}

The picture element shouldn’t be part of the DOM tree

source

scss

source {
  display: none;
}

The source element is never shown

audio[controls]

scss

audio[controls] {
  filter: drop-shadow(0 0 var(--half-shim) var(--shadow));
  width: 100%;
}

Audio is full-width by default.

svg

scss

svg {
  fill: var(--fill, currentColor);
  padding: 1px;
}

Unless otherwise defined, embedded SVGs will take on the color of surrounding content. Adding 1px padding helps with overflow clipping errors on rounded paths.