@jaredpdesigns/pasta/src/code.css

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

@layer config {

  code,
  pre {
    --bg: var(--color__contrast--extra);
    --color: white;
  }

  code {
    font-family: var(--type__family--tertiary);
    font-size: var(--type__size--s);
    line-height: var(--type__lineheight--m);

    * & {
      background-color: var(--bg);
      border-radius: var(--size__xs);
      box-decoration-break: clone;
      color: var(--color);
      padding: var(--size__xs) var(--size__s);
      word-wrap: break-word;
    }

    pre>& {
      -webkit-overflow-scrolling: touch;
      background: none;
      display: block;
      max-width: 100%;
      overflow-x: scroll;
      padding: var(--size__m);
      white-space: pre;
    }
  }

  pre {
    background-color: var(--bg);
    border-radius: var(--size__s);
    color: var(--color);

    .comment,
    .prolog,
    .doctype,
    .cdata,
    .namespace,
    .operator,
    .function {
      opacity: 0.75;
    }

    .parameter,
    .property,
    .boolean,
    .number {
      color: var(--color__primary, color-mix(in lch,
            hsl(from var(--color__eggplant) h calc(s * 1.5) l) 75%,
            var(--color__contrast--fixed)));
    }

    .selector,
    .attr-name,
    .string,
    .char,
    .builtin,
    .inserted,
    .atrule,
    .attr-value,
    .class-name,
    .regex,
    .important {
      color: var(--color__secondary, color-mix(in lch,
            hsl(from var(--color__cobalt) h calc(s * 1.5) l) 75%,
            var(--color__contrast--fixed)));
    }

    .tag,
    .constant,
    .symbol,
    .deleted,
    .keyword {
      color: var(--color__tertiary, color-mix(in lch,
            hsl(from var(--color__basil) h calc(s * 1.5) l) 75%,
            var(--color__contrast--fixed)));
    }

    .important,
    .bold {
      font-weight: bold;
    }

    .italic {
      font-style: italic;
    }
  }
}