From 25531282aa3c8e3c03f7f5877c074175587f0783 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 15 Jul 2022 17:37:06 +0200
Subject: [PATCH] Refactor typography font sizes into variables

---
 client/src/styles/mixins/_typography.scss | 44 ++++++++++++++---------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/client/src/styles/mixins/_typography.scss b/client/src/styles/mixins/_typography.scss
index 068087bc..53b9ca5b 100644
--- a/client/src/styles/mixins/_typography.scss
+++ b/client/src/styles/mixins/_typography.scss
@@ -1,37 +1,46 @@
+$largest-font: toRem(64px);
+$larger-font: toRem(44px);
+$large-font-size: toRem(34px);
+$slightly-large-font-size: toRem(24px);
+$regular-font-size: toRem(18px);
+$slightly-small-font-size: toRem(16px);
+$small-font-size: toRem(14px);
+$tiny-font-size: toRem(11px);
+
 @mixin main-title {
   font-family: $sans-serif-font-family;
   font-weight: 800;
-  font-size: toRem(64px);
+  font-size: $largest-font;
 }
 
 @mixin heading-1 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(44px);
+  font-size: $larger-font;
 }
 
 @mixin heading-2 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(34px);
+  font-size: $large-font-size;
 }
 
 @mixin heading-3 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(24px);
+  font-size: $slightly-large-font-size;
 }
 
 @mixin heading-4 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
 }
 
 @mixin sub-heading {
   font-family: $sans-serif-font-family;
   font-weight: 400;
-  font-size: toRem(16px);
+  font-size: $slightly-small-font-size;
 }
 
 @mixin modal-heading {
@@ -43,18 +52,18 @@
 @mixin regular-text {
   font-family: $sans-serif-font-family;
   font-weight: 400;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
 }
 
 @mixin small-text {
   font-family: $sans-serif-font-family;
   font-weight: 400;
   //font-size: toRem(16px); todo: did this really change or is this only for the subnavigation
-  font-size: toRem(14px);
+  font-size: $small-font-size;
 }
 
 @mixin tiny-text {
-  font-size: toRem(11px);
+  font-size: $tiny-font-size;
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   color: $color-silver-dark;
@@ -62,7 +71,7 @@
 
 @mixin aside-text {
   @include regular-text;
-  font-size: toRem(14px);
+  font-size: $small-font-size;
 }
 
 @mixin aside-with-cheese {
@@ -73,19 +82,19 @@
 @mixin navigation-link {
   font-family: $sans-serif-font-family;
   color: $color-charcoal-dark;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
   font-weight: 600;
 }
 
 @mixin large-link {
   font-family: $sans-serif-font-family;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
   font-weight: 400;
 }
 
 @mixin meta-title {
   color: $color-silver-dark;
-  font-size: toRem(36px);
+  font-size: $large-font-size;
   font-weight: 300;
   font-family: $serif-font-family;
   line-height: $default-heading-line-height;
@@ -99,16 +108,19 @@
 @mixin lead-paragraph {
   font-family: $serif-font-family;
   line-height: 1.4;
-  font-size: toRem(26px);
+  font-size: $regular-font-size;
+  @include desktop {
+    font-size: $slightly-large-font-size;
+  }
 }
 
 @mixin regular-paragraph {
   font-family: $serif-font-family;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
 }
 
 @mixin link-base {
-  font-size: toRem(14px);
+  font-size: $slightly-small-font-size;
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   cursor: pointer;