visbug-lib/app/demo/typography.css

<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href

h1,h2,h3 {
  font-family: "Google Sans", system-ui;
  font-weight: lighter;
  line-height: 1.2;
  margin: 0;
}

small {
  color: var(--mid-grey);
}

a {
  color: var(--theme-color);

  &[href]:not(:hover) {
    text-decoration: none;
  }
}

[text-styles] {
  padding: 0 2rem 2rem;
}

[bad-contrast] {
  padding: 1rem 2rem;
  background:  hsl(0,0%,40%);
  color: hsl(0,0%,70%);
}

[good-contrast] {
  padding: 1rem 2rem;
  font-weight: bold;
  background:  black;
  color: white;
}