diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss index d2fd68e1f5..327d9b6065 100644 --- a/packages/sage-assets/lib/stylesheets/core/_typography.scss +++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss @@ -32,15 +32,15 @@ $-headings-margin-bottom: sage-spacing(sm); --sage-font-size-h1: #{map-get($sage-font-sizes, 5xl)}; // Line heights - --sage-line-height-body-xs: 1.425; - --sage-line-height-body-sm: 1.425; - --sage-line-height-body: 1.425; - --sage-line-height-h6: 1.25; - --sage-line-height-h5: 1.25; - --sage-line-height-h4: 1.25; - --sage-line-height-h3: 1.25; - --sage-line-height-h2: 1.25; - --sage-line-height-h1: 1.25; + --sage-line-height-body-xs: #{map-get($sage-line-heights, xs)}; + --sage-line-height-body-sm: #{map-get($sage-line-heights, sm)}; + --sage-line-height-body: #{map-get($sage-line-heights, md)}; + --sage-line-height-h6: #{map-get($sage-line-heights, lg)}; + --sage-line-height-h5: #{map-get($sage-line-heights, lg)}; + --sage-line-height-h4: #{map-get($sage-line-heights, xl)}; + --sage-line-height-h3: #{map-get($sage-line-heights, xl)}; + --sage-line-height-h2: #{map-get($sage-line-heights, 2xl)}; + --sage-line-height-h1: #{map-get($sage-line-heights, 3xl)}; } // Responsive adjustments are currently TBD diff --git a/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss b/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss index be60da054c..287b7f6683 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss @@ -10,15 +10,15 @@ /// See core/_typography.scss for where these are primarily implemented. /// $sage-line-heights: ( - xs: sage-baseline(3.5), // 14 - sm: sage-baseline(4), // 16 - md: sage-baseline(4.5), // 18 - lg: sage-baseline(5), // 20 - xl: sage-baseline(5.5), // 22 - 2xl: sage-baseline(6.5), // 26 - 3xl: sage-baseline(7), // 28 - 4xl: sage-baseline(8), // 32 - 5xl: sage-baseline(9), // 36 + xs: rem(18px), + sm: rem(18px), + md: rem(20px), + lg: rem(20px), + xl: rem(22px), + 2xl: rem(26px), + 3xl: rem(28px), + 4xl: rem(32px), + 5xl: rem(36px), ); ///