@jaredpdesigns/pasta/src/reset.css

Pasta provides a great starting place for web projects. It combines light styling for common web elements, yummy!

@layer reset {

  *,
  *:before,
  *:after {
    box-sizing: border-box;
    padding: unset;
    margin: unset;
  }

  :root {
    accent-color: var(--color__highlight);
    font-family: var(--type__family--primary);
    min-height: 100%;
    min-height: -webkit-fill-available;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    background-color: var(--color__contrast);
    color: var(--color__base);
  }

  canvas,
  img,
  picture {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }

  ::selection {
    background-color: var(--color__highlight);
    color: var(--color__contrast);
  }
}

@layer helpers {
  .visually__hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  [hidden] {
    display: none;
  }
}