@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

package/lib/components/vote/vote.less

@@ -0,0 +1,134 @@
+.s-vote {
+    --_vo-fd: column;
+    --_vo-child-bg: var(--black-150);
+    --_vo-child-br: unset;
+    --_vo-child-fd: var(--_vo-fd);
+    --_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
+    --_vo-child-h: unset;
+    --_vo-child-w: calc(var(--su48) + var(--su2)); // 50px
+    --_vo-child-p: unset;
+    
+    // CHILD ELEMENTS
+    &:not(&__horizontal){
+        :first-child {
+            --_vo-child-p: calc(var(--su12) + var(--su2)) 0 calc(var(--su12) - var(--su2)); // 14px 0 10px
+            --_vo-child-br: var(--br-pill) var(--br-pill) 0 0;
+        }
+        
+        :last-child {
+            --_vo-child-p: calc(var(--su12) - var(--su2)) 0 calc(var(--su12) + var(--su2)); // 10px 0 14px
+            --_vo-child-br: 0 0 var(--br-pill) var(--br-pill);
+        }
+
+        :only-child {
+            --_vo-child-br: var(--br-pill);
+            --_vo-child-g: calc(var(--su16) + var(--su4)); // 18px
+            --_vo-child-p: calc(var(--su12) + var(--su2)) 0; // 14px 0
+        }
+    }
+
+    // MODIFIERS
+    &&__expanded {
+        --_vo-child-g: var(--su2);
+        --_vo-child-p: 0;
+
+        .s-vote {
+            &--total {
+                display: none;
+            }
+            &--upvotes,
+            &--downvotes {
+                display: block;
+            }
+        }
+    }
+
+    &&__horizontal {
+        --_vo-fd: row;
+        --_vo-child-h: var(--su32);
+        --_vo-child-p: 0 var(--su4);
+        --_vo-child-w: unset;
+        
+        :first-child {
+            --_vo-child-p: 0 var(--su6) 0 calc(var(--su8) + var(--su2)); // 0 6px 0 10px
+            --_vo-child-br: var(--br-pill) 0 0 var(--br-pill);
+        }
+
+        :last-child {
+            --_vo-child-p: 0 calc(var(--su8) + var(--su2)) 0 var(--su6); // 0 10px 0 6px
+            --_vo-child-br: 0 var(--br-pill) var(--br-pill) 0;
+        }
+
+        .s-vote--votes:last-child:not(:only-child) {
+            --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 var(--su4); // 0 14px 0 4px
+        }
+
+        :only-child {
+            --_vo-child-br: var(--br-pill);
+            --_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
+            --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 calc(var(--su8) + var(--su2)); // 0 10px
+        }
+    }
+
+    // CHILD ELEMENTS
+    > button {
+        // Reset button styles
+        appearance: none;
+        -webkit-appearance: none;
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        margin: 0;
+        padding: 0;
+    }
+
+    & &--btn,
+    & > &--votes {
+        background-color: var(--_vo-child-bg);
+        border-radius: var(--_vo-child-br);
+        flex-direction: var(--_vo-child-fd);
+        gap: var(--_vo-child-g);
+        height: var(--_vo-child-h);
+        padding: var(--_vo-child-p);
+        width: var(--_vo-child-w);
+
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
+        overflow: hidden;
+        font-weight: 600;
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    & &--upvotes,
+    & &--downvotes {
+        display: none;
+    }
+
+    & &--upvotes {
+        color: var(--green-500);
+    }
+
+    & &--downvotes {
+        color: var(--red-500);
+    }
+
+    // INTERACTION
+    > button,
+    & &--btn {
+        &:focus-visible {
+            .focus-styles(true, false);
+        }
+
+        &:hover {
+            --_vo-child-bg: var(--black-200);
+        }
+    }
+
+    flex-direction: var(--_vo-fd);
+
+    display: flex;
+}

package/lib/controllers.ts

@@ -4,7 +4,6 @@ export {
     hideBanner,
     showBanner,
 } from "./components/banner/banner";
-export { ExpandableController } from "./components/expandable/expandable";
 export {
     ModalController,
     hideModal,
@@ -30,4 +29,3 @@ export {
     setTooltipText,
     TooltipController,
 } from "./components/popover/tooltip";
-export { UploaderController } from "./components/uploader/uploader";

package/lib/exports/color-sets.less

@@ -11,7 +11,8 @@
 //
 // tl;dr: don't put inline after values in this file
 
-// TODO SPARK update default values for white and black sets
+// Colors are based on the variables in Figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18798&p=f&vars=1&var-set-id=1713-5190&m=dev
+
 // White
 .set-white() {
     default: hsv(0, 0%, 100%);
@@ -30,14 +31,14 @@
 .set-black() {
     050: hsv(0, 0%, 100%);
     100: hsv(30, 1%, 97%);
-    150: hsv(30, 1%, 94%);
-    200: hsv(220, 2%, 89%);
-    225: hsv(220, 2%, 86%);
-    250: hsv(220, 4%, 82%);
-    300: hsv(220, 5%, 69%);
-    350: hsv(220, 6%, 55%);
-    400: hsv(220, 7%, 45%);
-    500: hsv(220, 8%, 30%);
+    150: hsv(40, 1%, 94%);
+    200: hsv(216, 2%, 89%);
+    225: hsv(225, 2%, 86%);
+    250: hsv(218, 4%, 82%);
+    300: hsv(218, 5%, 69%);
+    350: hsv(218, 6%, 55%);
+    400: hsv(225, 7%, 45%);
+    500: hsv(223, 9%, 30%);
     600: hsv(345, 13%, 13%);
     default: hsv(0, 0%, 0%);
 }
@@ -51,21 +52,21 @@
     300: hsv(0, 0%, 55%);
     350: hsv(0, 0%, 65%);
     400: hsv(30, 5%, 85%);
-    500: hsv(30, 4%, 95%);
+    500: hsv(27, 4%, 95%);
     600: hsv(0, 0%, 100%);
     default: hsv(0, 0%, 100%);
 }
 .set-black-hc() {
     050: hsv(0, 0%, 100%);
     100: hsv(30, 1%, 97%);
-    150: hsv(30, 1%, 94%);
-    200: hsv(210, 2%, 89%);
-    225: hsv(220, 2%, 86%);
-    250: hsv(220, 4%, 82%);
+    150: hsv(40, 1%, 94%);
+    200: hsv(216, 2%, 89%);
+    225: hsv(225, 2%, 86%);
+    250: hsv(218, 4%, 82%);
     300: hsv(229, 7%, 61%);
-    350: hsv(220, 7%, 36%);
-    400: hsv(204, 6%, 35%);
-    500: hsv(220, 8%, 30%);
+    350: hsv(214, 8%, 36%);
+    400: hsv(204, 6%, 33.5%);
+    500: hsv(223, 9%, 29.5%);
     600: hsv(345, 13%, 13%);
     default: hsv(0, 0%, 0%);
 }
@@ -79,14 +80,14 @@
     300: hsv(0, 0%, 55%);
     350: hsv(0, 0%, 65%);
     400: hsv(30, 5%, 85%);
-    500: hsv(30, 4%, 95%);
+    500: hsv(27, 4%, 95%);
     600: hsv(0, 0%, 100%);
     default: hsv(0, 0%, 100%);
 }
 
 // Orange
 .set-orange() {
-    100: hsv(22, 5%, 100%);
+    100: hsv(23, 5%, 100%);
     200: hsv(22, 26%, 100%);
     300: hsv(22, 65%, 96%);
     400: hsv(22, 92%, 91%);
@@ -94,33 +95,33 @@
     600: hsv(22, 95%, 44%);
 }
 .set-orange-dark() {
-    100: hsl(22, 80%, 25%);
-    200: hsl(22, 75%, 45%);
-    300: hsl(22, 47%, 78%);
-    400: hsl(22, 40%, 90%);
-    500: hsl(22, 30%, 99%);
-    600: hsl(22, 20%, 98%);
+    100: hsv(21, 80%, 25%);
+    200: hsv(22, 76%, 45%);
+    300: hsv(22, 47%, 78%);
+    400: hsv(22, 40%, 90%);
+    500: hsv(22, 30%, 99%);
+    600: hsv(22, 20%, 98%);
 }
 .set-orange-hc() {
-    100: hsv(22, 5%, 100%);
-    200: hsv(22, 5%, 100%);
+    100: hsv(23, 5%, 100%);
+    200: hsv(23, 5%, 100%);
     300: hsv(22, 92%, 91%);
     400: hsv(22, 98%, 59%);
-    500: hsv(22, 95%, 44%);
-    600: hsv(22, 95%, 44%);
+    500: hsv(22, 95%, 43%);
+    600: hsv(22, 95%, 43%);
 }
 .set-orange-hc-dark() {
-    100: hsv(22, 80%, 25%);
-    200: hsv(22, 80%, 25%);
-    300: hsv(22, 76%, 60%);
-    400: hsv(22, 40%, 90%);
+    100: hsv(21, 80%, 25%);
+    200: hsv(21, 80%, 25%);
+    300: hsv(22, 35%, 87%);
+    400: hsv(22, 30%, 99%);
     500: hsv(22, 20%, 98%);
     600: hsv(22, 20%, 98%);
 }
 
 // Blue
 .set-blue() {
-    100: hsv(226, 6%, 100%);
+    100: hsv(225, 6%, 100%);
     200: hsv(226, 20%, 98%);
     300: hsv(226, 45%, 97%);
     400: hsv(226, 67%, 95%);
@@ -128,41 +129,41 @@
     600: hsv(226, 85%, 40%);
 }
 .set-blue-dark() {
-    100: hsv(220, 55%, 30%);
+    100: hsv(220, 56%, 30%);
     200: hsv(220, 50%, 60%);
-    300: hsv(226, 45%, 88%);
-    400: hsv(226, 35%, 100%);
+    300: hsv(220, 45%, 88%);
+    400: hsv(220, 35%, 100%);
     500: hsv(220, 20%, 100%);
-    600: hsv(220, 10%, 100%);
+    600: hsv(221, 10%, 100%);
 }
 .set-blue-hc() {
-    100: hsv(226, 6%, 100%);
-    200: hsv(226, 6%, 100%);
+    100: hsv(225, 6%, 100%);
+    200: hsv(225, 6%, 100%);
     300: hsv(226, 67%, 95%);
     400: hsv(226, 80%, 70%);
     500: hsv(226, 85%, 40%);
     600: hsv(226, 85%, 40%);
 }
 .set-blue-hc-dark() {
-    100: hsv(220, 55%, 30%);
-    200: hsv(220, 55%, 30%);
-    300: hsv(220, 50%, 60%);
-    400: hsv(220, 35%, 100%);
-    500: hsv(220, 10%, 100%);
-    600: hsv(220, 10%, 100%);
+    100: hsv(220, 56%, 30%);
+    200: hsv(220, 56%, 30%);
+    300: hsv(220, 35%, 100%);
+    400: hsv(220, 20%, 100%);
+    500: hsv(221, 10%, 100%);
+    600: hsv(221, 10%, 100%);
 }
 
 // Green
 .set-green() {
-    100: hsv(82, 6%, 98%);
-    200: hsv(82, 30%, 95%);
-    300: hsv(82, 50%, 80%);
+    100: hsv(84, 6%, 98%);
+    200: hsv(82, 30%, 90%);
+    300: hsv(82, 46%, 75%);
     400: hsv(82, 80%, 60%);
     500: hsv(82, 90%, 45%);
     600: hsv(82, 95%, 30%);
 }
 .set-green-dark() {
-    100: hsv(82, 80%, 22%);
+    100: hsv(81, 80%, 22%);
     200: hsv(82, 55%, 45%);
     300: hsv(82, 44%, 70%);
     400: hsv(82, 40%, 90%);
@@ -170,18 +171,18 @@
     600: hsv(82, 20%, 100%);
 }
 .set-green-hc() {
-    100: hsv(82, 6%, 98%);
-    200: hsv(82, 6%, 98%);
+    100: hsv(84, 6%, 98%);
+    200: hsv(84, 6%, 98%);
     300: hsv(82, 80%, 63%);
     400: hsv(82, 93%, 38%);
     500: hsv(82, 95%, 30%);
     600: hsv(82, 95%, 30%);
 }
 .set-green-hc-dark() {
-    100: hsv(82, 80%, 22%);
-    200: hsv(82, 80%, 22%);
-    300: hsv(82, 55%, 45%);
-    400: hsv(82, 44%, 70%);
+    100: hsv(81, 80%, 22%);
+    200: hsv(81, 80%, 22%);
+    300: hsv(82, 40%, 90%);
+    400: hsv(82, 30%, 90%);
     500: hsv(82, 20%, 100%);
     600: hsv(82, 20%, 100%);
 }
@@ -193,7 +194,7 @@
     300: hsv(0, 50%, 90%);
     400: hsv(0, 75%, 75%);
     500: hsv(0, 90%, 55%);
-    600: hsv(0, 95%, 35%);
+    600: hsv(0, 96%, 35%);
 }
 .set-red-dark() {
     100: hsv(0, 71%, 20%);
@@ -208,8 +209,8 @@
     200: hsv(0, 6%, 99%);
     300: hsv(0, 75%, 75%);
     400: hsv(0, 90%, 55%);
-    500: hsv(0, 95%, 35%);
-    600: hsv(0, 95%, 35%);
+    500: hsv(0, 96%, 35%);
+    600: hsv(0, 96%, 35%);
 }
 .set-red-hc-dark() {
     100: hsv(0, 71%, 20%);
@@ -223,7 +224,7 @@
 // Yellow
 .set-yellow() {
     100: hsv(48, 8%, 99%);
-    200: hsv(48, 20%, 96%);
+    200: hsv(48, 36%, 96%);
     300: hsv(48, 94%, 93%);
     400: hsv(48, 100%, 67%);
     500: hsv(48, 100%, 50%);
@@ -234,13 +235,13 @@
     200: hsv(48, 75%, 35%);
     300: hsv(48, 55%, 65%);
     400: hsv(48, 45%, 90%);
-    500: hsv(48, 30%, 99%);
+    500: hsv(48, 30%, 89%);
     600: hsv(48, 10%, 100%);
 }
 .set-yellow-hc() {
     100: hsv(48, 8%, 99%);
     200: hsv(48, 8%, 99%);
-    300: hsv(48, 80%, 80%);
+    300: hsv(48, 100%, 67%); 
     400: hsv(48, 100%, 42%);
     500: hsv(48, 100%, 30%);
     600: hsv(48, 100%, 30%);
@@ -248,8 +249,8 @@
 .set-yellow-hc-dark() {
     100: hsv(48, 80%, 20%);
     200: hsv(48, 80%, 20%);
-    300: hsv(48, 75%, 35%);
-    400: hsv(48, 45%, 90%);
+    300: hsv(48, 45%, 90%);
+    400: hsv(48, 30%, 89%);
     500: hsv(48, 10%, 100%);
     600: hsv(48, 10%, 100%);
 }
@@ -282,17 +283,17 @@
 .set-purple-hc-dark() {
     100: hsv(252, 70%, 30%);
     200: hsv(252, 70%, 30%);
-    300: hsv(252, 65%, 50%);
-    400: hsv(252, 45%, 70%);
+    300: hsv(252, 33%, 97%);
+    400: hsv(252, 20%, 98%);
     500: hsv(252, 10%, 99%);
     600: hsv(252, 10%, 99%);
 }
 
 .set-pink() {
-    100: hsv(293, 6%, 99%);
+    100: hsv(296, 6%, 99%);
     200: hsv(293, 25%, 95%);
     300: hsv(293, 45%, 95%);
-    400: hsv(293, 68%, 91%);
+    400: hsv(292, 68%, 91%);
     500: hsv(293, 80%, 70%);
     600: hsv(293, 90%, 45%);
 }
@@ -302,23 +303,23 @@
     300: hsv(293, 35%, 78%);
     400: hsv(293, 25%, 98%);
     500: hsv(293, 18%, 99%);
-    600: hsv(293, 10%, 99%);
+    600: hsv(295, 10%, 99%);
 }
 .set-pink-hc() {
-    100: hsv(293, 6%, 99%);
-    200: hsv(293, 6%, 99%);
-    300: hsv(293, 90%, 91%);
-    400: hsv(293, 80%, 60%);
+    100: hsv(296, 6%, 99%);
+    200: hsv(296, 6%, 99%);
+    300: hsv(292, 68%, 91%);
+    400: hsv(293, 80%, 62%);
     500: hsv(293, 90%, 45%);
     600: hsv(293, 90%, 45%);
 }
 .set-pink-hc-dark() {
     100: hsv(293, 80%, 20%);
     200: hsv(293, 80%, 20%);
-    300: hsv(293, 65%, 40%);
-    400: hsv(293, 30%, 80%);
-    500: hsv(293, 10%, 99%);
-    600: hsv(293, 10%, 99%);
+    300: hsv(293, 25%, 98%);
+    400: hsv(293, 18%, 99%);
+    500: hsv(295, 10%, 99%);
+    600: hsv(295, 10%, 99%);
 }
 
 // Retaining legacy metallic colors for backward compatibility
@@ -525,7 +526,7 @@
     attribute: hsl(206, 98.5%, 29%);
     bg: hsl(0, 0%, 96.5%);
     color: var(--black-600);
-    comment: hsl(210, 8%, 43.5%);
+    comment: var(--black-400);
     deletion: var(--red-500);
     keyword: hsl(206, 98.5%, 29%);
     literal: hsl(27, 99%, 36%);
@@ -539,7 +540,7 @@
     attribute: var(--blue-400);
     bg: hsl(0, 2%, 11%);
     color: var(--black);
-    comment: hsl(0, 0%, 60%);
+    comment: var(--black-400);
     deletion: var(--red-500);
     keyword:var(--blue-400);
     literal: hsl(27, 95%, 65%);
@@ -553,7 +554,7 @@
     attribute: hsl(215, 100%, 35%);
     bg: hsl(0, 0%, 96.5%);
     color: var(--black-600);
-    comment: hsl(213, 7%, 33%);
+    comment: var(--black-400);
     deletion: var(--red-400);
     keyword: hsl(215, 100%, 35%);
     literal: hsl(16, 94%, 31%);
@@ -567,7 +568,7 @@
     attribute: hsl(200, 57%, 85%);
     bg: hsl(0, 0%, 10%);
     color: hsl(0, 0%, 100%);
-    comment: hsl(0, 0%, 99%);
+    comment: var(--black-400);
     deletion: var(--red-500);
     keyword: hsl(200, 57%, 85%);
     literal: hsl(36, 96%, 71%);
@@ -590,6 +591,27 @@
     default: var(--black);
 }
 
+// brand colors
+.set-brand() {
+    default: #FF5E00;
+    black: #201C1D;
+    off-white: #F0EFEE;
+    blue-light: #C6D1E1;
+    blue: #5074EF;
+    blue-dark: #00165E;
+    brown-light: #998B7A;
+    green: #86AF25;
+    green-dark: #263603;
+    orange-medium: #6E1527;
+    orange-dark: #31070F;
+    pink: #F39FFF;
+    pink-dark: #4D1955;
+    purple: #9D9CFF;
+    purple-dark: #390A91;
+    yellow: #FFCC00;
+    yellow-dark: #423101;
+}
+
 // Color sets
 .sets-mode() {
     light: .sets-light();
@@ -611,6 +633,7 @@
     gold: .set-gold();
     silver: .set-silver();
     bronze: .set-bronze();
+    brand: .set-brand();
 }
 
 .sets-dark() {
@@ -681,6 +704,7 @@
     focus-ring: .set-focus-ring();
     highlight: .set-highlight();
     scrollbar: .set-scrollbar();
+    brand: .set-brand();
 }
 
 .sets-utility-dark() {
@@ -691,6 +715,7 @@
     focus-ring: .set-focus-ring-dark();
     highlight: .set-highlight-dark();
     scrollbar: .set-scrollbar-dark();
+    brand: .set-brand();
 }
 
 .sets-utility-hc() {
@@ -701,6 +726,7 @@
     focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc();
     scrollbar: .set-scrollbar-hc();
+    brand: .set-brand();
 }
 
 .sets-utility-dark-hc() {
@@ -711,6 +737,7 @@
     focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc-dark();
     scrollbar: .set-scrollbar-hc-dark();
+    brand: .set-brand();
 }
 
 // Theme values

package/lib/exports/constants-helpers.less

@@ -31,7 +31,7 @@ body {
     --zi-modals:             9000;   //  Modals
 
     // Border Radius
-    --br-md:                 calc(var(--su-static4) + var(--su-static6)); // 10px
+    --br-md:                 calc(var(--su4) + var(--su6)); // 10px
     --br-circle:             50%;
     --br-pill:               1000px;
     // TODO SHINE Retaining legacy border radius for backward compatibility
@@ -50,36 +50,32 @@ body {
 
     --default-transition-duration:       0.1s;
     --transition-time:                   var(--default-transition-duration);
-
-    // Sizing
-    --s-full: 97.2307692rem; // Based on a pixel size of 1264px;
-    --s-step: calc(var(--s-full) / 12);
 }
 
 //  ============================================================================
 //  $   RESPONSIVE BREAKPOINTS
 //  ----------------------------------------------------------------------------
-@breakpoint-lg: 1264px;
-@breakpoint-md: 980px;
-@breakpoint-sm: 640px;
+@breakpoint-lg: 92.25rem; // 1476px
+@breakpoint-md: 71.875rem; // 1150px
+@breakpoint-sm: 48.75rem; // 780px
 
 //  ============================================================================
 //  $   SCROLLBAR STYLING
 //  ----------------------------------------------------------------------------
 @scrollbar-styles: {
     &::-webkit-scrollbar {
-        width: calc(var(--su-static12) - var(--su-static2));
-        height: calc(var(--su-static12) - var(--su-static2));
+        width: calc(var(--su12) - var(--su2));
+        height: calc(var(--su12) - var(--su2));
         background-color: transparent;
     }
 
     &::-webkit-scrollbar-track {
-        border-radius: calc(var(--su-static12) - var(--su-static2));
+        border-radius: calc(var(--su12) - var(--su2));
         background-color: transparent;
     }
 
     &::-webkit-scrollbar-thumb {
-        border-radius: calc(var(--su-static12) - var(--su-static2));
+        border-radius: calc(var(--su12) - var(--su2));
         background-color: var(--scrollbar);
     }
 
@@ -105,6 +101,6 @@ body {
     // Show focus styles on keyboard focus.
     &:focus-visible {
         outline: none;
-        box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
+        box-shadow: 0 0 0 var(--su4) var(--focus-ring-muted);
     }
 }

package/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-)