@plangrid/structure/modules/font.css

CSS structure library

/* Compose like "font-os font-xl" */
.font-os {
  font-family: var(--family-os);
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
}

.font-c {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  text-transform: none }

.font-b {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none }

.font-xxs {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase }

.font-xs {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: none }

.font-s {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  text-transform: none }

.font-m {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  text-transform: none }

.font-l {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.125;
  text-transform: none }

.font-xl {
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  text-transform: none }

.family-inherit { font-family: inherit }
.family-os { font-family: var(--family-os) }

.unbold { font-weight: 400 }
.semibold { font-weight: 600 }
.bold { font-weight: 700 }

.weight-inherit { font-weight: inherit }
.weight-light { font-weight: 300 }
.weight-normal { font-weight: 400 }
.weight-semibold { font-weight: 600 }
.weight-bold { font-weight: 700 }

.size-inherit { font-size: inherit }
.size-body { font-size: 14px }
.size-caption { font-size: 12px }

/* Deprecated heading sizers */
.size-h1 { font-size: 42px } /* 44px => 42px */
.size-h2 { font-size: 32px } /* 36px => 32px */
.size-h3 { font-size: 26px } /* 28px => 26px */
.size-h4 { font-size: 20px } /* 24px => 20px */

/* Deprecated keyword sizers */
.size-coarse { font-size: 20px }
.size-text { font-size: 16px }
.size-fine { font-size: 14px }

/* Constant sizers to favor */
.size-12px { font-size: 12px }
.size-14px { font-size: 14px }
.size-16px { font-size: 16px }
.size-20px { font-size: 20px }
.size-26px { font-size: 26px }
.size-32px { font-size: 32px }
.size-42px { font-size: 42px }
.size-collapse { font-size: 0 }

.line-initial { line-height: normal }
.line-inherit { line-height: inherit }
.line-single { line-height: 1 }
.line-subcompact { line-height: 1.125 }
.line-compact { line-height: 1.25 }
.line-passing { line-height: 1.5 }
.line-double { line-height: 2 }
.line-collapse { line-height: 0 }

.font-collapse {
  font-size: 0;
  line-height: 0;
}

.case-none { text-transform: none }
.case-upper { text-transform: uppercase }
.case-lower { text-transform: lowercase }
.case-proper { text-transform: capitalize }

.letter-upper::first-letter { text-transform: uppercase }
.letter-lower::first-letter { text-transform: lowercase }

.underline-none { text-decoration: none }
.underline-focus:focus,
.underline-hover:hover,
.underline { text-decoration: underline }

.ws-normal { white-space: normal }
.ws-nowrap { white-space: nowrap }
.ws-pre { white-space: pre }
.ws-pre-wrap { white-space: pre-wrap }
.ws-pre-line { white-space: pre-line }