Use variables for typography

sippy-platform · Jul 22, 2022 · aa274ac · aa274ac
1 parent 968959d
commit aa274ac
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -43,7 +43,7 @@
   }
 }
 
-@mixin rfs($min-font-size, $max-font-size) {
+@mixin rfs($min-font-size, $max-font-size, $heading) {
   $rfs-min-vw-rem: calc((#{ $rfs-min-vw } / 16) * 1rem);
   $rfs-rise: #{ $max-font-size - $min-font-size };
   $rfs-run: calc((#{ $rfs-max-vw } / 16) - (#{ $rfs-min-vw } / 16));
@@ -53,5 +53,5 @@
   $max-font-size-rem: calc(#{ $max-font-size } * 1rem);
   $fluid-font-size-rem: calc(#{ $rfs-slope } * (100vw - #{ $rfs-min-vw-rem }) + #{ $min-font-size-rem });
 
-  font-size: clamp($min-font-size-rem, $fluid-font-size-rem, $max-font-size-rem);
+  --fs-#{$heading}: #{ clamp($min-font-size-rem, $fluid-font-size-rem, $max-font-size-rem) };
 }
diff --git a/scss/_typography.scss b/scss/_typography.scss
@@ -18,7 +18,7 @@
 // Heading, and heading classes
 @each $heading, $font-size in $font-sizes-heading {
   #{$heading} {
-    @include rfs(map-get($font-size, "min"), map-get($font-size, "max"));
+    font-size: var(--fs-#{$heading});
   }
 }
 
@@ -54,8 +54,7 @@
 
 // Text
 .lead {
-  @include rfs(map-get($font-size-lead, "min"), map-get($font-size-lead, "max"));
-
+  font-size: var(--fs-lead);
   font-weight: 600;
 }
 
@@ -67,8 +66,7 @@ small,
 // Marketing classes
 @each $marketing, $font-size in $font-sizes-marketing {
   .marketing-#{$marketing} {
-    @include rfs(map-get($font-size, "min"), map-get($font-size, "max"));
-
+    font-size: var(--fs-m#{$marketing});
     font-weight: 500;
   }
 }

diff --git a/scss/_vars.scss b/scss/_vars.scss
@@ -19,6 +19,16 @@
   --titlebar-top-safe-space: env(titlebar-area-y, 0);
   --titlebar-height: env(titlebar-area-height, 33px);
   --titlebar-width: env(titlebar-area-width, 100%);
+
+  @each $heading, $font-size in $font-sizes-heading {
+    @include rfs(map-get($font-size, "min"), map-get($font-size, "max"), $heading);
+  }
+
+  @each $marketing, $font-size in $font-sizes-marketing {
+    @include rfs(map-get($font-size, "min"), map-get($font-size, "max"), "m#{$marketing}");
+  }
+
+  @include rfs(map-get($font-size-lead, "min"), map-get($font-size-lead, "max"), "lead");
 }
 
 // Dark mode