Marketing: optimize body typography inheritance

[tobiasahlin]

This PR introduces no visual changes, but optimizes the CSS output for marketing's typography body utility classes. By making sure that no values are being set if it's not necessary to set them, we avoid outputting some redundant CSS properties.

The logic behind this can definitely be refined further, but this brings the logic and setup behind the header and the body utility classes to parity. Would love to clean up the logic in another PR 🙏

CSS output, before (76 rows):

.f0-mktg {
  font-size: 28px !important;
  line-height: 40px !important;
  letter-spacing: -.01em !important;
  font-weight: 500 !important
}
@media (min-width: 768px) {
  .f0-mktg {
    font-size: 40px !important;
    line-height: 52px !important;
    letter-spacing: -.01em !important;
    font-weight: 500 !important
  }
}
@media (min-width: 1012px) {
  .f0-mktg {
    font-size: 48px !important;
    line-height: 64px !important;
    letter-spacing: -.01em !important;
    font-weight: 500 !important
  }
}
.f1-mktg {
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 500 !important
}
@media (min-width: 768px) {
  .f1-mktg {
    font-size: 28px !important;
    line-height: 40px !important;
    letter-spacing: -.01em !important;
    font-weight: 500 !important
  }
}
@media (min-width: 1012px) {
  .f1-mktg {
    font-size: 32px !important;
    line-height: 44px !important;
    letter-spacing: -.01em !important;
    font-weight: 500 !important
  }
}
.f2-mktg {
  font-size: 20px !important;
  line-height: 28px !important
}
@media (min-width: 1012px) {
  .f2-mktg {
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 500 !important
  }
}
.f3-mktg {
  font-size: 16px !important;
  line-height: 24px !important
}
@media (min-width: 768px) {
  .f3-mktg {
    font-size: 20px !important;
    line-height: 28px !important
  }
}
.f4-mktg {
  font-size: 16px !important;
  line-height: 24px !important
}
.f5-mktg {
  font-size: 14px !important;
  line-height: 20px !important
}
.f6-mktg {
  font-size: 12px !important;
  line-height: 20px !important
}

CSS output, after (69 rows):

.f0-mktg {
  font-size: 28px !important;
  line-height: 40px !important;
  letter-spacing: -.01em !important;
  font-weight: 500 !important
}
@media (min-width: 768px) {
  .f0-mktg {
    font-size: 40px !important;
    line-height: 52px !important
  }
}
@media (min-width: 1012px) {
  .f0-mktg {
    font-size: 48px !important;
    line-height: 64px !important
  }
}
.f1-mktg {
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 500 !important
}
@media (min-width: 768px) {
  .f1-mktg {
    font-size: 28px !important;
    line-height: 40px !important;
    letter-spacing: -.01em !important
  }
}
@media (min-width: 1012px) {
  .f1-mktg {
    font-size: 32px !important;
    line-height: 44px !important
  }
}
.f2-mktg {
  font-size: 20px !important;
  line-height: 28px !important
}
@media (min-width: 1012px) {
  .f2-mktg {
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 500 !important
  }
}
.f3-mktg {
  font-size: 16px !important;
  line-height: 24px !important
}
@media (min-width: 768px) {
  .f3-mktg {
    font-size: 20px !important;
    line-height: 28px !important
  }
}
.f4-mktg {
  font-size: 16px !important;
  line-height: 24px !important
}
.f5-mktg {
  font-size: 14px !important;
  line-height: 20px !important
}
.f6-mktg {
  font-size: 12px !important;
  line-height: 20px !important
}

[changeset-bot]

🦋 Changeset detected

Latest commit: e092c25

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR