From 3ffd696be4750c2261efba39b64744543d4bec2a Mon Sep 17 00:00:00 2001
From: "Amir M. Mohamadi" <mail.amir2mi@gmail.com>
Date: Wed, 14 Sep 2022 00:35:24 +0430
Subject: [PATCH] Replaced pixel based font size to percent for A11Y

---
 scss/_config.scss | 4 ++--
 scss/_reset.scss  | 6 +++---
 scss/_root.scss   | 2 --
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/scss/_config.scss b/scss/_config.scss
index 8f85e93b..2e2fe86c 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -284,8 +284,8 @@ $TAB_SHOW_ANIMATION_DURATION: 300ms !default;
 $TAB_HIDE_ANIMATION_DURATION: 200ms !default;
 
 // *** Typography: font size, font family, line height
-$MIN_FONT_SIZE: 14 !default; // must be without unit
-$MAX_FONT_SIZE: 16 !default; // must be without unit
+$MIN_FONT_SIZE: 85% !default; // must be percent
+$MAX_FONT_SIZE: 100% !default; // must be percent
 $PRIMARY_FONT_FAMILY: "Nunito", sans-serif !default;
 $HEADING_FONT_FAMILY: $PRIMARY_FONT_FAMILY !default;
 $CODE_FONT_FAMILY: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
diff --git a/scss/_reset.scss b/scss/_reset.scss
index 3bc461bf..3d237192 100644
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@@ -24,17 +24,17 @@
 // *** Root
 :root {
   @include break-xs {
-    font-size: var(--#{$CSS_VAR_PFX}min-font-size-with-unit);
+    font-size: var(--#{$CSS_VAR_PFX}min-font-size);
   }
 
   $sm-bp: map-get($RESPONSIVE_BREAKPOINTS, "sm");
   $xl-bp: map-get($RESPONSIVE_BREAKPOINTS, "xl");
   @media (min-width: $sm-bp) and (max-width: $xl-bp) {
-    font-size: #{"calc( var(--#{$CSS_VAR_PFX}min-font-size-with-unit) + ( var(--#{$CSS_VAR_PFX}max-font-size) - var(--#{$CSS_VAR_PFX}min-font-size) ) * ( ( 100vw - #{$sm-bp} ) / ( #{math.div($xl-bp,1px)} - #{math.div($sm-bp,1px)} ) ) )"};
+    font-size: #{"calc( var(--#{$CSS_VAR_PFX}min-font-size) + ( var(--#{$CSS_VAR_PFX}max-font-size) - var(--#{$CSS_VAR_PFX}min-font-size) ) * ( ( 100vw - #{$sm-bp} ) / ( #{math.div($xl-bp,1px)} - #{math.div($sm-bp,1px)} ) ) )"};
   }
 
   @include break-xl-min {
-    font-size: var(--#{$CSS_VAR_PFX}max-font-size-with-unit);
+    font-size: var(--#{$CSS_VAR_PFX}max-font-size);
   }
 
   @if $SUPPORT_SMOOTH_SCROLL {
diff --git a/scss/_root.scss b/scss/_root.scss
index 50ef388a..13d0c0ba 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -9,8 +9,6 @@
   // *** Typography
   --#{$CSS_VAR_PFX}max-font-size: #{$MAX_FONT_SIZE};
   --#{$CSS_VAR_PFX}min-font-size: #{$MIN_FONT_SIZE};
-  --#{$CSS_VAR_PFX}max-font-size-with-unit: #{$MAX_FONT_SIZE + px};
-  --#{$CSS_VAR_PFX}min-font-size-with-unit: #{$MIN_FONT_SIZE + px};
 
   --#{$CSS_VAR_PFX}primary-font-family: #{$PRIMARY_FONT_FAMILY};
   --#{$CSS_VAR_PFX}heading-font-family: #{$HEADING_FONT_FAMILY};