@patreon/studio/module/styles/classNameForDataHeadingText/DataHeadingTextBundle.module.css

Patreon Studio Design System

.shared {
  font-family: var(--type-dataHeading-fontStack);
  font-feature-settings: lining-nums tabular-nums;
  font-variant-numeric: lining-nums tabular-nums;
  font-variation-settings: var(--type-dataHeading-fontWidth);
  letter-spacing: var(--type-dataHeading-letterSpacing);
  line-height: var(--type-dataHeading-lineHeight);
}

.shared em {
    font-style: italic;
  }

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

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

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

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

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

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

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

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

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

@media (min-width: 588px) {

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

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

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

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

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

@media (min-width: 796px) {

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

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

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

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

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

@media (min-width: 978px) {

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

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

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

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

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

@media (min-width: 1280px) {

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

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

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

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

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

@media (min-width: 1440px) {

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

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

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

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

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