@stackoverflow/stacks 3.0.0-beta.0 → 3.0.0-beta.2

package/lib/exports/constants-helpers.less

@@ -31,10 +31,12 @@ body {
     --zi-modals:             9000;   //  Modals
 
     // Border Radius
-    --br-sm:                 calc(var(--su-static4));
-    --br-md:                 calc(var(--su-static6));
-    --br-lg:                 calc(var(--su-static8));
+    --br-md:                 calc(var(--su-static4) + var(--su-static6)); // 10px;
     --br-circle:             50%;
+    --br-pill:               1000px;
+    // TODO SHINE Retaining legacy border radius for backward compatibility
+    --br-sm:                var(--br-md); // Retaining legacy border radius for backward compatibility
+    --br-lg:                var(--br-md); // Retaining legacy border radius for backward compatibility
 
     // Transition easings
     --te-smooth-slow:        cubic-bezier(0.25, 0.46, 0.45, 0.94);       // easeOutQuad

package/lib/exports/constants-type.less

@@ -99,44 +99,44 @@ body {
     //  $   FONT SIZES (fs-)
     //      Base font-size is 13px.
     //  ----------------------------------------------------------------------------
-    --fs-fine:           11px;
-    --fs-caption:        12px;
-    --fs-body1:          13px;
+    --fs-fine:           12px;
+    --fs-caption:        13px;
+    --fs-body1:          14px;
 
     //  Relative to the root element
-    --fs-body2:               1.153846154rem;
-    --fs-body3:               1.307692308rem;
-    --fs-subheading:          1.461538462rem;
-    --fs-title:               1.615384615rem;
-    --fs-headline1:           2.076923077rem;
-    --fs-headline2:           2.615384615rem;
-    --fs-display1:            3.307692308rem;
-    --fs-display2:            4.230769231rem;
-    --fs-display3:            5.307692308rem;
-    --fs-display4:            7.615384615rem;
+    --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.153846154em;
-    --fs-body3-relative:      1.307692308em;
-    --fs-subheading-relative: 1.461538462em;
-    --fs-title-relative:      1.615384615em;
-    --fs-headline1-relative:  2.076923077em;
-    --fs-headline2-relative:  2.615384615em;
-    --fs-display1-relative:   3.307692308em;
-    --fs-display2-relative:   4.230769231em;
-    --fs-display3-relative:   5.307692308em;
-    --fs-display4-relative:   7.615384615em;
+    --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: 13px;
+    --fs-base: 14px;
 
     //  ============================================================================
     //  $   LINE HEIGHT (lh-)
     //  ----------------------------------------------------------------------------
     // Need to remove the unit off the font-size to make line-height unitless
     // FIXME this shouldn't be public. Find a way to use unitless `--fs-base`.
-    --stacks-internals-lh-unit: 13;
+    --stacks-internals-lh-unit: 14;
 
     // Now the various line-height variables
     --lh-xs:    1;

package/lib/exports/mixins.less

@@ -242,7 +242,7 @@
 
         // md
         & when (@size = md) and (@style = br) {
-            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+            --_@{prefix}-br: calc(var(--br-md) + var(--su-static1));
             }
         & when (@size = md) and (@style = fs) {
             --_@{prefix}-fs: var(--fs-body3);
@@ -250,7 +250,7 @@
 
         // lg
         & when (@size = lg) and (@style = br) {
-            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+            --_@{prefix}-br: calc(var(--br-md) + var(--su-static1));
         }
         & when (@size = lg) and (@style = fs) {
                 --_@{prefix}-fs: var(--fs-title);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@stackoverflow/stacks",
     "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-    "version": "3.0.0-beta.0",
+    "version": "3.0.0-beta.2",
     "files": [
         "dist",
         "lib",