@patreon/studio/styles/classNameForDataDisplayText/DataDisplayTextBundle.module.css

Patreon Studio Design System

.shared {
  font-family: type-token("dataDisplay.fontStack");
  font-variant-numeric: lining-nums tabular-nums;
  font-variation-settings: type-token("dataDisplay.fontWidth");
  letter-spacing: type-token("dataDisplay.letterSpacing");
  line-height: type-token("dataDisplay.lineHeight");

  em {
    font-style: italic;
  }

  s {
    text-decoration: line-through;
  }
}

.weightLight {
  font-weight: type-token("dataDisplay.fontWeights.light");
}

.weightNormal {
  font-weight: type-token("dataDisplay.fontWeights.normal");
}

.weightMedium {
  font-weight: type-token("dataDisplay.fontWeights.medium");
}

@responsive {
  .sizeMd {
    font-size: type-token("dataDisplay.fontSizes.md");
  }

  .sizeLg {
    font-size: type-token("dataDisplay.fontSizes.lg");
  }

  .sizeXl {
    font-size: type-token("dataDisplay.fontSizes.xl");
  }

  .sizeXxl {
    font-size: type-token("dataDisplay.fontSizes.xxl");
  }

  .sizeXxxl {
    font-size: type-token("dataDisplay.fontSizes.xxxl");
  }
}