From 67b124d13571b5ba62c4b8326b950bb61705fb88 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 8 Feb 2022 11:36:39 -0500 Subject: [PATCH] Update line-height behavior to respect token value, size headings relative to body text (#291) * Normalize heading line-heights **Why**: - So that assigned line-heights match expectations based upon [the available token options](https://github.com/uswds/uswds/blob/61a0d99f0e6b36c3758948ba6ac46140abc5e585/src/stylesheets/theme/_uswds-theme-typography.scss#L363-L371), not influenced by either font family or scale - So that heading line-heights can be smaller than body content, but only in the case that the actual value would be greater than that of body text (and in all other cases, using the body line-height for headings) * Update CHANGELOG.md --- CHANGELOG.md | 2 + src/scss/core/mixins/_all.scss | 1 + src/scss/core/mixins/_typography.scss | 54 +++++++++++++++++++++++++++ src/scss/functions/_lh.scss | 26 +++++++++++++ src/scss/packages/_required.scss | 17 ++++++++- 5 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 src/scss/core/mixins/_all.scss create mode 100644 src/scss/core/mixins/_typography.scss create mode 100644 src/scss/functions/_lh.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 18e7b913..61b6104a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ### Improvements +- Line height calculations are improved such that the [desired token size](https://github.com/uswds/uswds/blob/61a0d99f0e6b36c3758948ba6ac46140abc5e585/src/stylesheets/theme/_uswds-theme-typography.scss#L363-L371) will always apply regardless of font family or scale. + - In the case of headings, line-height will fall back to the configured body line-height if the resulting actual line-height would be smaller than body content when using the heading scale. - The Process List component no longer applies vertical padding which would affect its layout relative to surrounding content. ([#290](https://github.com/18F/identity-style-guide/pull/290)) ## 6.3.1 diff --git a/src/scss/core/mixins/_all.scss b/src/scss/core/mixins/_all.scss new file mode 100644 index 00000000..3be796ae --- /dev/null +++ b/src/scss/core/mixins/_all.scss @@ -0,0 +1 @@ +@import 'typography'; diff --git a/src/scss/core/mixins/_typography.scss b/src/scss/core/mixins/_typography.scss new file mode 100644 index 00000000..447059b1 --- /dev/null +++ b/src/scss/core/mixins/_typography.scss @@ -0,0 +1,54 @@ +/* +---------------------------------------- +typeset() +---------------------------------------- +Replaces USWDS typeset to set heading +line-height as the maximum between the +default heading line-height and the body +line-height when considering font-size +---------------------------------------- +*/ + +@mixin typeset( + $family: $theme-body-font-family, + $scale: $theme-body-font-size, + $line-height-scale: $theme-body-line-height +) { + @if type-of($family) == 'list' { + $list: $family; + $family: if(nth($list, 1), nth($list, 1), null); + $scale: if(nth($list, 2), nth($list, 2), null); + $line-height: if(nth($list, 3), nth($list, 3), null); + } + $family: if($family == null, $theme-body-font-family, $family); + $scale: if($scale == null, $theme-body-font-size, $scale); + $line-height-scale: if($line-height-scale == null, $theme-body-line-height, $line-height-scale); + + $font-size: font-size($family, $scale); + $line-height: lh($family, $line-height-scale); + + font-family: ff($family); + font-size: $font-size; + @if ( + $family == 'heading' and $font-size * $line-height < 1rem * lh('body', $theme-body-line-height) + ) { + $line-height: lh($family, $theme-body-line-height); + } + line-height: $line-height; +} + +/* +---------------------------------------- +h6() +---------------------------------------- +Replaces USWDS h6 to set heading family +---------------------------------------- +*/ + +@mixin h6 { + @include typeset('heading', $theme-h6-font-size, $theme-heading-line-height); + + font-weight: fw('normal'); + letter-spacing: ls('ls-1'); + text-transform: uppercase; +} diff --git a/src/scss/functions/_lh.scss b/src/scss/functions/_lh.scss new file mode 100644 index 00000000..25481e0a --- /dev/null +++ b/src/scss/functions/_lh.scss @@ -0,0 +1,26 @@ +/* +---------------------------------------- +line-height() +lh() +---------------------------------------- +Replaces USWDS lh to remove line-height +normalization behavior +---------------------------------------- +*/ + +@function lh($props...) { + $props: unpack($props); + + @if not(length($props) == 2) { + @error 'lh() needs both a valid face and line height token ' + + 'in the format `lh(FACE, HEIGHT)`.'; + } + + $scale: smart-quote(nth($props, 2)); + + @if not map-get($system-line-height, $scale) { + @return error-not-token($scale, 'line-height', $system-line-height); + } + + @return map-get($system-line-height, $scale); +} diff --git a/src/scss/packages/_required.scss b/src/scss/packages/_required.scss index b6aa8221..fcf5c93f 100644 --- a/src/scss/packages/_required.scss +++ b/src/scss/packages/_required.scss @@ -4,7 +4,22 @@ @import '../uswds-theme/color'; @import '../uswds-theme/utilities'; @import '../uswds-theme/components'; -@import '../uswds/packages/required'; +@import '../uswds/settings/settings-general'; +@import '../uswds/settings/settings-typography'; +@import '../uswds/settings/settings-color'; +@import '../uswds/settings/settings-spacing'; +@import '../uswds/settings/settings-utilities'; +@import '../uswds/settings/settings-components'; +@import '../uswds/core/functions'; +@import '../functions/lh'; +@import '../uswds/core/system-tokens'; +@import '../uswds/core/variables'; +@import '../uswds/core/properties'; +@import '../uswds/core/mixins/all'; +@import '../core/mixins/all'; +@import '../uswds/core/placeholders/all'; +@import '../uswds/core/deprecated'; +@import '../uswds/core/notifications'; @import '../functions/asset-path'; @import '../functions/focus'; @import '../uswds/utilities/palettes/all';