@fpxfd/next/lib/typography/index.css

A configurable component library for web built on React.

.next-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  top: 0;
  margin: -1px;
}

.next-typography {
  color: #545d75;
  color: var(--typography-text-color, #545d75);
}
.next-typography-title {
  font-weight: 600;
  font-weight: var(--typography-title-font-weight, 600);
  margin-bottom: 0.5em;
}
.next-typography + .next-typography-title {
  margin-top: 1.2em;
}
.next-typography-paragraph {
  color: #545d75;
  color: var(--typography-text-color, #545d75);
  margin-bottom: 1em;
  font-size: 14px;
  font-size: var(--typography-paragraph-font-size, 14px);
  line-height: 1.5;
  line-height: var(--typography-paragraph-line-height, 1.5);
}
.next-typography mark {
  padding: 0;
  background: #f9a256;
  background: var(--typography-text-mark-background, #f9a256);
  color: #545d75;
  color: var(--typography-text-mark-color, #545d75);
}
.next-typography strong {
  font-weight: 600;
  font-weight: var(--typography-text-strong-font-weight, 600);
}
.next-typography code {
  background-color: #eef1f6;
  background-color: var(--typography-text-code-background, #eef1f6);
  color: #545d75;
  color: var(--typography-text-code-color, #545d75);
  border: 1px solid #eef1f6;
  border: 1px solid var(--typography-text-code-border-color, #eef1f6);
  margin: 0 0.2em;
  padding: 0.2em 0.4em 0.1em;
  font-size: 85%;
  border-radius: 3px;
  border-radius: var(--typography-text-code-corner, 3px);
}
.next-typography ul,
.next-typography ol {
  margin: 0 0 1em 0;
  padding: 0;
}
.next-typography li {
  list-style-type: circle;
  margin: 0 0 0 20px;
  padding: 0 0 0 4px;
}
.next-typography a {
  text-decoration: none;
}
.next-typography a:link {
  color: #005adc;
  color: var(--color-link-1, #005adc);
}
.next-typography a:visited {
  color: #a9aeba;
  color: var(--color-link-2, #a9aeba);
}
.next-typography a:hover {
  color: #1461cc;
  color: var(--color-link-3, #1461cc);
}
.next-typography a:active {
  text-decoration: underline;
  color: #1461cc;
  color: var(--color-link-3, #1461cc);
}

h1.next-typography-title {
  font-size: 24px;
  font-size: var(--typography-title-h1-font-size, 24px);
}

h2.next-typography-title {
  font-size: 20px;
  font-size: var(--typography-title-h2-font-size, 20px);
}

h3.next-typography-title {
  font-size: 16px;
  font-size: var(--typography-title-h3-font-size, 16px);
}

h4.next-typography-title {
  font-size: 16px;
  font-size: var(--typography-title-h4-font-size, 16px);
}

h5.next-typography-title {
  font-size: 14px;
  font-size: var(--typography-title-h5-font-size, 14px);
}

h6.next-typography-title {
  font-size: 12px;
  font-size: var(--typography-title-h6-font-size, 12px);
}