style(line-height): update line-height to have rem units (#1933)

Kajabi · Aug 19, 2024 · 2b6bc94 · 2b6bc94
1 parent 55df194
commit 2b6bc94
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git 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
@@ -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),
 );
 
 ///