primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-23 14:13:14 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1382 from primer/tobiasahlin/optimize-marketing-body-inheritence

Browse Source 
Marketing: optimize body typography inheritance
This commit is contained in:
simurai 2021-05-06 17:41:49 +09:00 committed by GitHub
commit 7dce045fbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/selfish-moose-suffer.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Marketing: optimize body typography inheritance

5
src/marketing/support/variables.scss
View File

@ -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;

33
src/marketing/type/typography.scss
View File

@ -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;
}
}
}
}