fix(font-size): properly set rem values

.changeset/four-planets-own.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks": patch
+---
+
+Fix rem font size values

packages/stacks-classic/lib/base/body.less

@@ -20,7 +20,7 @@ html,
 body {
     color: var(--theme-body-font-color, var(--black-600));
     font-family: var(--theme-body-font-family);
-    font-size: var(--fs-base);
+    font-size: var(--fs-body1);
     line-height: var(--lh-base);
 }
 

packages/stacks-classic/lib/components/popover/popover.less

@@ -3,7 +3,7 @@
     --_po-bc: var(--bc-medium);
     --_po-bs: var(--bs-md);
     --_po-d: none;
-    --_po-wmn: 12rem;
+    --_po-wmn: 10.5rem;
     --_po-w: 100%;
     // content
     // --_po-topbar-height assumes the topbar height based on topbar styles
@@ -51,7 +51,7 @@
     border-radius: var(--br-md);
     color: var(--fc-dark);
     font-size: var(--fs-body1);
-    max-width: 24rem;
+    max-width: 21rem;
     padding: var(--su12);
     position: absolute;
     white-space: normal; // Guard against popovers being in a container with white-space: nowrap. Without this, the content pops *out* of the popover.

packages/stacks-classic/lib/components/post-summary/post-summary.less

@@ -270,8 +270,8 @@
             font-size: var(--fs-body3);
             font-weight: normal;
             line-height: var(--lh-md);
-            margin-bottom: 0.3846rem;
-            margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
+            margin-bottom: 0.3365rem;
+            margin-top: -0.125rem; // Optical alignment to compensate for title's containing block
             padding-right: var(--su24);
         }
 

packages/stacks-classic/lib/components/prose/prose.less

@@ -49,11 +49,11 @@
     &&__xs,
     &&__sm,
     &&__md {
-        --_pr-h1-fs: var(--fs-headline1-relative);
-        --_pr-h2-fs: var(--fs-title-relative);
-        --_pr-h3-fs: var(--fs-subheading-relative);
-        --_pr-h4-fs: var(--fs-body3-relative);
-        --_pr-h5-fs: var(--fs-body2-relative);
+        --_pr-h1-fs: 1.75em;
+        --_pr-h2-fs: 1.375em;
+        --_pr-h3-fs: 1.25em;
+        --_pr-h4-fs: 1.125em;
+        --_pr-h5-fs: 1em;
     }
 
     &&__xs {

packages/stacks-classic/lib/components/toast/toast.less

@@ -13,7 +13,7 @@
 
     .s-notice {
         box-shadow: var(--bs-sm);
-        max-width: 44rem;
+        max-width: 38.5rem;
         padding-bottom: var(--su8);
         padding-top: var(--su8);
         pointer-events: all;

packages/stacks-classic/lib/exports/constants-helpers.less

@@ -52,7 +52,7 @@ body {
     --transition-time:                   var(--default-transition-duration);
 
     // Sizing
-    --s-full: 97.2307692rem; // Based on a pixel size of 1264px;
+    --s-full: 79rem; // Based on a pixel size of 1264px;
     --s-step: calc(var(--s-full) / 12);
 }
 

packages/stacks-classic/lib/exports/constants-type.less

@@ -88,48 +88,30 @@
     Menlo, Monaco, Consolas, // A few sensible system font choices
     monospace; // The final fallback for rendering in monospace.
 
-html,
+html {
+    font-size: 100%;
+}
+
 body {
     --ff-sans: @ff-sans;
     --ff-serif: @ff-serif;
     --ff-mono: @ff-mono;
     --theme-body-font-family: var(--ff-sans);
 
-    //  ============================================================================
-    //  $   FONT SIZES (fs-)
-    //      Base font-size is 13px.
-    //  ----------------------------------------------------------------------------
-    --fs-fine:           12px;
-    --fs-caption:        13px;
-    --fs-body1:          14px;
-
-    //  Relative to the root element
-    --fs-body2:               1.143rem; // 16px
-    --fs-body3:               1.286rem; // 18px
-    --fs-subheading:          1.429rem; // 20px
-    --fs-title:               1.571rem; // 22px
-    --fs-headline1:           2rem;     // 28px
-    --fs-headline2:           2.571rem; // 36px
-    --fs-display1:            3.286rem; // 46px
-    --fs-display2:            4.143rem; // 58px
-    --fs-display3:            5.143rem; // 72px
-    --fs-display4:            7.143rem; // 100px
-
-    //  Relative to the parent
-    --fs-body2-relative:      1.143rem; // 16px
-    --fs-body3-relative:      1.286rem; // 18px
-    --fs-subheading-relative: 1.429rem; // 20px
-    --fs-title-relative:      1.571rem; // 22px
-    --fs-headline1-relative:  2rem;     // 28px
-    --fs-headline2-relative:  2.571rem; // 36px
-    --fs-display1-relative:   3.286rem; // 46px
-    --fs-display2-relative:   4.143rem; // 58px
-    --fs-display3-relative:   5.143rem; // 72px
-    --fs-display4-relative:   7.143rem; // 100px
-
-    // this value is not using spacing units because the calc involved results
-    // in unexpected sizing. I'm not sure why, honestly.
-    --fs-base: 14px;
+    // All rem values are relative to the font size applied to <html> (16px by default).
+    --fs-fine:          0.75rem;    // 12px
+    --fs-caption:       0.8125rem;  // 13px
+    --fs-body1:         0.875rem;   // 14px (base font size applied to <body>)
+    --fs-body2:         1rem;       // 16px
+    --fs-body3:         1.125rem;   // 18px
+    --fs-subheading:    1.25rem;    // 20px
+    --fs-title:         1.375rem;   // 22px
+    --fs-headline1:     1.75rem;    // 28px
+    --fs-headline2:     2.25rem;    // 36px
+    --fs-display1:      2.875rem;      // 46px
+    --fs-display2:      3.625rem;   // 58px
+    --fs-display3:      4.5rem;     // 72px
+    --fs-display4:      6.25rem;    // 100px
 
     //  ============================================================================
     //  $   LINE HEIGHT (lh-)

packages/stacks-docs/assets/less/stacks-documentation.less

@@ -252,7 +252,7 @@
     > pre.s-code-block {
         border-radius: var(--br-md) var(--br-md) 0 0;
         border: 1px solid var(--bc-medium);
-        max-height: 24rem;
+        max-height: 21rem;
 
         .dark-mode({
             border-color: var(--bc-lighter);