@patreon/studio/module/styles/classNameForBodyText/BodyTextBundle.module.css

Patreon Studio Design System

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

.shared em {
    font-style: italic;
  }

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

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

.weightNormal strong,.weightNormal b {
    font-weight: var(--type-body-fontWeights-bold);
  }

.weightBold {
  font-weight: var(--type-body-fontWeights-bold);
}

.sizeXs {
    font-size: var(--type-body-fontSizes-xs);
  }

.sizeSm {
    font-size: var(--type-body-fontSizes-sm);
  }

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

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

@media (min-width: 588px) {

  .sizeXsBreakpointSm {
    font-size: var(--type-body-fontSizes-xs);
  }

  .sizeSmBreakpointSm {
    font-size: var(--type-body-fontSizes-sm);
  }

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

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

@media (min-width: 796px) {

  .sizeXsBreakpointMd {
    font-size: var(--type-body-fontSizes-xs);
  }

  .sizeSmBreakpointMd {
    font-size: var(--type-body-fontSizes-sm);
  }

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

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

@media (min-width: 978px) {

  .sizeXsBreakpointLg {
    font-size: var(--type-body-fontSizes-xs);
  }

  .sizeSmBreakpointLg {
    font-size: var(--type-body-fontSizes-sm);
  }

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

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

@media (min-width: 1280px) {

  .sizeXsBreakpointXl {
    font-size: var(--type-body-fontSizes-xs);
  }

  .sizeSmBreakpointXl {
    font-size: var(--type-body-fontSizes-sm);
  }

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

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

@media (min-width: 1440px) {

  .sizeXsBreakpointXxl {
    font-size: var(--type-body-fontSizes-xs);
  }

  .sizeSmBreakpointXxl {
    font-size: var(--type-body-fontSizes-sm);
  }

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

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