diff --git a/src/_typography.scss b/src/_typography.scss index 93bd3b64..912b59d6 100644 --- a/src/_typography.scss +++ b/src/_typography.scss @@ -73,20 +73,17 @@ $seb-font-path: $vanilla-font-basepath; @include media('>mobile') { font-size: map-get(map-get($use_heading, 'mobile'), 'size'); font-weight: map-get(map-get($use_heading, 'mobile'), 'weight'); - line-height: map-get(map-get($use_heading, 'mobile'), 'size') + - vanilla-px-to-rem(8); + line-height: map-get(map-get($use_heading, 'mobile'), 'lineHeight'); } @include media('>tablet') { font-size: map-get(map-get($use_heading, 'tablet'), 'size'); font-weight: map-get(map-get($use_heading, 'tablet'), 'weight'); - line-height: map-get(map-get($use_heading, 'tablet'), 'size') + - vanilla-px-to-rem(8); + line-height: map-get(map-get($use_heading, 'tablet'), 'lineHeight'); } @include media('>desktop') { font-size: map-get(map-get($use_heading, 'desktop'), 'size'); font-weight: map-get(map-get($use_heading, 'desktop'), 'weight'); - line-height: map-get(map-get($use_heading, 'desktop'), 'size') + - vanilla-px-to-rem(8); + line-height: map-get(map-get($use_heading, 'desktop'), 'lineHeight'); } } } diff --git a/src/_variables.scss b/src/_variables.scss index 87db6cee..87a317ff 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -36,135 +36,162 @@ $vanilla-breakpoints: ( $vanilla-font-settings-h-display: ( desktop: ( size: vanilla-px-to-rem(96), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(96 + 8) ), tablet: ( size: vanilla-px-to-rem(64), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(64 + 8) ), mobile: ( size: vanilla-px-to-rem(48), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(48 + 8) ) ) !default; // / Headline H1 font sizes $vanilla-font-settings-h1: ( desktop: ( size: vanilla-px-to-rem(48), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(48 + 8) ), tablet: ( size: vanilla-px-to-rem(40), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(40 + 8) ), mobile: ( size: vanilla-px-to-rem(32), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(32 + 8) ) ) !default; // / Headline H2 font sizes $vanilla-font-settings-h2: ( desktop: ( size: vanilla-px-to-rem(32), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(32 + 8) ), tablet: ( size: vanilla-px-to-rem(24), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(24 + 8) ), mobile: ( size: vanilla-px-to-rem(24), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(24 + 8) ) ) !default; // / Headline H3 font sizes $vanilla-font-settings-h3: ( desktop: ( size: vanilla-px-to-rem(24), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(24 + 8) ), tablet: ( size: vanilla-px-to-rem(20), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(22 + 8) ), mobile: ( size: vanilla-px-to-rem(20), - weight: 600 + weight: 600, + lineHeight: vanilla-px-to-rem(20 + 8) ) ) !default; // / Headline H4 font sizes $vanilla-font-settings-h4: ( desktop: ( size: vanilla-px-to-rem(20), - weight: 500 + weight: 500, + lineHeight: vanilla-px-to-rem(20 + 8) ), tablet: ( size: vanilla-px-to-rem(20), - weight: 500 + weight: 500, + lineHeight: vanilla-px-to-rem(20 + 8) ), mobile: ( size: vanilla-px-to-rem(20), - weight: 500 + weight: 500, + lineHeight: vanilla-px-to-rem(20 + 8) ) ) !default; // / Headline H5 font sizes $vanilla-font-settings-h5: ( desktop: ( size: vanilla-px-to-rem(16), - weight: 500 + weight: 500, + lineHeight: vanilla-px-to-rem(16 + 8) ), tablet: ( size: vanilla-px-to-rem(16), - weight: 500 + weight: 500, + lineHeight: vanilla-px-to-rem(16 + 8) ), mobile: ( size: vanilla-px-to-rem(16), - weight: 500 + weight: 500, + lineHeight: vanilla-px-to-rem(16 + 8) ) ) !default; // / Headline H6 font sizes $vanilla-font-settings-h6: ( desktop: ( size: vanilla-px-to-rem(14), - weight: 400 + weight: 400, + lineHeight: vanilla-px-to-rem(14 + 8) ), tablet: ( size: vanilla-px-to-rem(14), - weight: 400 + weight: 400, + lineHeight: vanilla-px-to-rem(14 + 8) ), mobile: ( size: vanilla-px-to-rem(14), - weight: 400 + weight: 400, + lineHeight: vanilla-px-to-rem(14 + 8) ) ) !default; // / Body Regular (Base) font size $vanilla-font-settings-body: ( desktop: ( size: vanilla-px-to-rem(16), - weight: 400 + weight: 400, + lineHeight: vanilla-px-to-rem(16 + 8) ), tablet: ( size: vanilla-px-to-rem(16), - weight: 400 + weight: 400, + lineHeight: vanilla-px-to-rem(16 + 8) ), mobile: ( size: vanilla-px-to-rem(16), - weight: 400 + weight: 400, + lineHeight: vanilla-px-to-rem(16 + 8) ) ) !default; // / Body Small font size $vanilla-font-settings-body-small: ( desktop: ( size: vanilla-px-to-rem(14), - weight: 400 + weight: 400, + lineHeight: vanilla-px-to-rem(14 + 8) ), tablet: ( size: vanilla-px-to-rem(14), - weight: 400 + weight: 400, + lineHeight: vanilla-px-to-rem(14 + 8) ), mobile: ( size: vanilla-px-to-rem(14), - weight: 400 + weight: 400, + lineHeight: vanilla-px-to-rem(14 + 8) ) ) !default;