diff --git a/.changeset/selfish-moose-suffer.md b/.changeset/selfish-moose-suffer.md new file mode 100644 index 00000000..a6cbd905 --- /dev/null +++ b/.changeset/selfish-moose-suffer.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +Marketing: optimize body typography inheritance diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss index 65e2cc34..79ab7cd0 100644 --- a/src/marketing/support/variables.scss +++ b/src/marketing/support/variables.scss @@ -62,6 +62,11 @@ $mktg-headers: ( 6: [10, 9, 9] ) !default; +// Body content +$mktg-body-spacing-threshold: 28px !default; +$mktg-body-weight-threshold: 24px !default; +$mktg-body-spacing-large: -0.01em !default; + // Body size steps $mktg-body-size-0: 48px !default; $mktg-body-size-1: 40px !default; diff --git a/src/marketing/type/typography.scss b/src/marketing/type/typography.scss index 84c29b2b..cd4276bd 100644 --- a/src/marketing/type/typography.scss +++ b/src/marketing/type/typography.scss @@ -66,28 +66,37 @@ @each $body, $sizes in $mktg-bodies { .f#{$body}-mktg { $pairing: map-get($mktg-body-pairings, nth($sizes, 1)); + $pairing-md: map-get($mktg-body-pairings, nth($sizes, 2)); + $pairing-lg: map-get($mktg-body-pairings, nth($sizes, 3)); + font-size: map-get($pairing, "size") !important; line-height: map-get($pairing, "lh") !important; - @if (map-get($pairing, "size") >= 28px) { letter-spacing: $mktg-header-spacing-default !important; } - @if (map-get($pairing, "size") >= 24px) { font-weight: $font-weight-semibold !important; } + @if (map-get($pairing, "size") >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large !important; } + @if (map-get($pairing, "size") >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold !important; } @if (nth($sizes, 1) != nth($sizes, 2)) { @include breakpoint(md) { - $pairing: map-get($mktg-body-pairings, nth($sizes, 2)); - font-size: map-get($pairing, "size") !important; - line-height: map-get($pairing, "lh") !important; - @if (map-get($pairing, "size") >= 28px) { letter-spacing: $mktg-header-spacing-default !important; } - @if (map-get($pairing, "size") >= 24px) { font-weight: $font-weight-semibold !important; } + font-size: map-get($pairing-md, "size") !important; + line-height: map-get($pairing-md, "lh") !important; + @if (map-get($pairing-md, "size") >= $mktg-body-spacing-threshold and map-get($pairing, "size") < $mktg-body-spacing-threshold) { + letter-spacing: $mktg-body-spacing-large !important; + } + @if (map-get($pairing-md, "size") >= $mktg-body-weight-threshold and map-get($pairing, "size") < $mktg-body-weight-threshold) { + font-weight: $font-weight-semibold !important; + } } } @if (nth($sizes, 2) != nth($sizes, 3)) { @include breakpoint(lg) { - $pairing: map-get($mktg-body-pairings, nth($sizes, 3)); - font-size: map-get($pairing, "size") !important; - line-height: map-get($pairing, "lh") !important; - @if (map-get($pairing, "size") >= 28px) { letter-spacing: $mktg-header-spacing-default !important; } - @if (map-get($pairing, "size") >= 24px) { font-weight: $font-weight-semibold !important; } + font-size: map-get($pairing-lg, "size") !important; + line-height: map-get($pairing-lg, "lh") !important; + @if (map-get($pairing-lg, "size") >= $mktg-body-spacing-threshold and map-get($pairing-md, "size") < $mktg-body-spacing-threshold) { + letter-spacing: $mktg-body-spacing-large !important; + } + @if (map-get($pairing-lg, "size") >= $mktg-body-weight-threshold and map-get($pairing-md, "size") < $mktg-body-weight-threshold) { + font-weight: $font-weight-semibold !important; + } } } }