primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-20 13:17:29 +03:00
Code Issues Projects Releases Wiki Activity

Make sure letter spacing and font weight is only set once per utility class (rely on inherited values)

Browse Source
This commit is contained in:
Tobias Ahlin 2021-05-04 13:58:12 +02:00
parent c1174c75ed
commit 0e34ae90cd
2 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,10 @@ $font-mktg: $body-font !default;
$mktg-font-feature-settings: 'ss02' on, 'ss01' on !default;
$mktg-header-spacing-large: -0.03em !default;
$mktg-header-spacing-default: -0.01em !default;
$mktg-header-spacing-threshold: 48px !default;
$mktg-header-weight-large: 800 !default;
$mktg-header-weight-default: 600 !default;
$mktg-header-weight-threshold: 24px !default;
// Header size steps
$mktg-h-size-0: 96px !default;

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

@ -15,27 +15,36 @@
@each $header, $sizes in $mktg-headers {
.h#{$header}-mktg {
$pairing: map-get($mktg-header-pairings, nth($sizes, 1));
$pairing-md: map-get($mktg-header-pairings, nth($sizes, 2));
$pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3));
font-size: map-get($pairing, "size") !important;
line-height: map-get($pairing, "lh") !important;
@if (map-get($pairing, "size") >= 24px) { font-weight: 800 !important; }
@if (map-get($pairing, "size") >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
@if (nth($sizes, 1) != nth($sizes, 2)) {
@include breakpoint(md) {
$pairing: map-get($mktg-header-pairings, nth($sizes, 2));
font-size: map-get($pairing, "size") !important;
line-height: map-get($pairing, "lh") !important;
@if (map-get($pairing, "size") >= 48px) { letter-spacing: $mktg-header-spacing-large; }
@if (map-get($pairing, "size") >= 24px) { font-weight: 800 !important; }
font-size: map-get($pairing-md, "size") !important;
line-height: map-get($pairing-md, "lh") !important;
@if (map-get($pairing-md, "size") >= $mktg-header-spacing-threshold and map-get($pairing, "size") < $mktg-header-spacing-threshold) {
letter-spacing: $mktg-header-spacing-large;
}
@if (map-get($pairing-md, "size") >= $mktg-header-weight-threshold and map-get($pairing, "size") < $mktg-header-weight-threshold) {
font-weight: $mktg-header-weight-large !important;
}
}
}
@if (nth($sizes, 2) != nth($sizes, 3)) {
@include breakpoint(lg) {
$pairing: map-get($mktg-header-pairings, nth($sizes, 3));
font-size: map-get($pairing, "size") !important;
line-height: map-get($pairing, "lh") !important;
@if (map-get($pairing, "size") >= 48px) { letter-spacing: $mktg-header-spacing-large; }
@if (map-get($pairing, "size") >= 24px) { font-weight: 800 !important; }
font-size: map-get($pairing-lg, "size") !important;
line-height: map-get($pairing-lg, "lh") !important;
@if (map-get($pairing-lg, "size") >= $mktg-header-spacing-threshold and map-get($pairing-md, "size") < $mktg-header-spacing-threshold) {
letter-spacing: $mktg-header-spacing-large;
}
@if (map-get($pairing-lg, "size") >= $mktg-header-weight-threshold and map-get($pairing-md, "size") < $mktg-header-weight-threshold) {
font-weight: $mktg-header-weight-large !important;
}
}
}
}