refactor: Update shared base styles

1 files changed, 21 insertions, 10 deletions

diff --git a/apps/web-shared/src/styles/custom-style/_typography.scss b/apps/web-shared/src/styles/custom-style/_typography.scss
index d0bb431..3bf56a6 100644
--- a/apps/web-shared/src/styles/custom-style/_typography.scss
+++ b/apps/web-shared/src/styles/custom-style/_typography.scss
@@ -8,25 +8,25 @@
 
 :root {
   // font family
-  //--font-primary: Inter, system-ui, sans-serif;
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
   // font size
-  --text-base-size: 1.25rem; // body font-size
-  --text-scale-ratio: 1.1; // multiplier used to generate the type scale values 👇
+  --text-base-size: 1rem; // body font-size
+  --text-scale-ratio: 1.2; // multiplier used to generate the type scale values 👇
   
   // line-height
-  --body-line-height: 1.2;
-  --heading-line-height: 1.34;
+  --body-line-height: 1.4;
+  --heading-line-height: 1;
   
   // capital letters - used in combo with the lhCrop mixin
   --font-primary-capital-letter: 1;
 
   // unit - don't modify unless you want to change the typography unit (e.g., from Rem to Em units)
-  --text-unit: var(--text-base-size); // if Em units → --text-unit: var(--text-base-size);
+  --text-unit: var(--text-base-size); // if Em units → --text-unit: 1em;
 }
 
 :root, * {
+  // type scale
   --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
   --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
   --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
@@ -37,6 +37,14 @@
   --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
 }
 
+
+@include breakpoint(md) {
+  :root {
+    --text-base-size: 1.25rem;
+    --text-scale-ratio: 1.25;
+  }
+}
+
 body {
   font-family: var(--font-primary);
 }
@@ -64,10 +72,13 @@ mark {
 }
 
 .text-component {
-  --text-unit: 1em;
-  --space-unit: 1em;
   --line-height-multiplier: 1;
   --text-space-y-multiplier: 1;
+  
+  > * { // use Em units
+    --text-unit: 1em;
+    --space-unit: 1em;
+  }
 
   blockquote {
     padding-left: 1em;
@@ -89,4 +100,4 @@ mark {
 .article { // e.g., blog posts
   --body-line-height: 1.58; // set body line-height
   --text-space-y-multiplier: 1.2; // control vertical spacing
-}
+}
\ No newline at end of file