mirror of
https://github.com/primer/css.git
synced 2024-09-20 13:17:29 +03:00
Make sure letter spacing and font weight is only set once per utility class (rely on inherited values)
This commit is contained in:
parent
c1174c75ed
commit
0e34ae90cd
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user