@patreon/studio/module/styles/classNameForDisplayText/DisplayTextBundle.module.css

Patreon Studio Design System

.shared {
  font-family: var(--type-display-fontStack);
  letter-spacing: var(--type-display-letterSpacing);
  line-height: var(--type-display-lineHeight);
}

.shared em {
    font-style: italic;
  }

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

.weightLight {
  font-weight: var(--type-display-fontWeights-light);
}

.weightNormal {
  font-weight: var(--type-display-fontWeights-normal);
}

.weightMedium {
  font-weight: var(--type-display-fontWeights-medium);
}

.sizeMd {
    font-size: var(--type-display-fontSizes-md);
  }

.sizeLg {
    font-size: var(--type-display-fontSizes-lg);
  }

.sizeXl {
    font-size: var(--type-display-fontSizes-xl);
  }

.sizeXxl {
    font-size: var(--type-display-fontSizes-xxl);
  }

.sizeXxxl {
    font-size: var(--type-display-fontSizes-xxxl);
  }

@media (min-width: 588px) {

  .sizeMdBreakpointSm {
    font-size: var(--type-display-fontSizes-md);
  }

  .sizeLgBreakpointSm {
    font-size: var(--type-display-fontSizes-lg);
  }

  .sizeXlBreakpointSm {
    font-size: var(--type-display-fontSizes-xl);
  }

  .sizeXxlBreakpointSm {
    font-size: var(--type-display-fontSizes-xxl);
  }

  .sizeXxxlBreakpointSm {
    font-size: var(--type-display-fontSizes-xxxl);
  }
}

@media (min-width: 796px) {

  .sizeMdBreakpointMd {
    font-size: var(--type-display-fontSizes-md);
  }

  .sizeLgBreakpointMd {
    font-size: var(--type-display-fontSizes-lg);
  }

  .sizeXlBreakpointMd {
    font-size: var(--type-display-fontSizes-xl);
  }

  .sizeXxlBreakpointMd {
    font-size: var(--type-display-fontSizes-xxl);
  }

  .sizeXxxlBreakpointMd {
    font-size: var(--type-display-fontSizes-xxxl);
  }
}

@media (min-width: 978px) {

  .sizeMdBreakpointLg {
    font-size: var(--type-display-fontSizes-md);
  }

  .sizeLgBreakpointLg {
    font-size: var(--type-display-fontSizes-lg);
  }

  .sizeXlBreakpointLg {
    font-size: var(--type-display-fontSizes-xl);
  }

  .sizeXxlBreakpointLg {
    font-size: var(--type-display-fontSizes-xxl);
  }

  .sizeXxxlBreakpointLg {
    font-size: var(--type-display-fontSizes-xxxl);
  }
}

@media (min-width: 1280px) {

  .sizeMdBreakpointXl {
    font-size: var(--type-display-fontSizes-md);
  }

  .sizeLgBreakpointXl {
    font-size: var(--type-display-fontSizes-lg);
  }

  .sizeXlBreakpointXl {
    font-size: var(--type-display-fontSizes-xl);
  }

  .sizeXxlBreakpointXl {
    font-size: var(--type-display-fontSizes-xxl);
  }

  .sizeXxxlBreakpointXl {
    font-size: var(--type-display-fontSizes-xxxl);
  }
}

@media (min-width: 1440px) {

  .sizeMdBreakpointXxl {
    font-size: var(--type-display-fontSizes-md);
  }

  .sizeLgBreakpointXxl {
    font-size: var(--type-display-fontSizes-lg);
  }

  .sizeXlBreakpointXxl {
    font-size: var(--type-display-fontSizes-xl);
  }

  .sizeXxlBreakpointXxl {
    font-size: var(--type-display-fontSizes-xxl);
  }

  .sizeXxxlBreakpointXxl {
    font-size: var(--type-display-fontSizes-xxxl);
  }
}