@stackoverflow/stacks 3.0.0-beta.23 → 3.0.0-beta.24

package/lib/components/user-card/user-card.less

@@ -8,10 +8,17 @@
     --_uc-username-p: unset;
     --_uc-username-bl: unset;
     --_uc-username-bg: unset;
-    --_uc-username-fc: unset;
+    --_uc-username-fc: var(--black-600);
     --_uc-username-d: unset;
     --_uc-username-ai: unset;
 
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline;
+        }
+    });
+
     // VARIANTS
     // SIZES
     &&__lg {
@@ -24,7 +31,7 @@
         }
 
         .s-user-card--group:has(> .s-user-card--rep) {
-            margin-top: calc(var(--su2) * -1);
+            margin-top: var(--sun2);
         }
 
         --_uc-ai: flex-start;
@@ -37,6 +44,10 @@
     }
 
     // CHILD ELEMENTS
+    a {
+        text-decoration: none;
+    }
+
     & &--bio {
         .truncation(3);
         color: var(--black-400);
@@ -82,7 +93,7 @@
     }
 
     &--username__op {
-        --_uc-username-p: calc(var(--su4) - var(--su1)) var(--su4) calc(var(--su4) - var(--su1)) var(--su4);
+        --_uc-username-p: var(--su3) var(--su4) var(--su3) var(--su4);
         --_uc-username-bg: var(--blue-100);
         --_uc-username-bl: var(--su4) solid var(--blue-300);
         --_uc-username-d: flex;

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
@@ -64,18 +64,18 @@ body {
 //  ----------------------------------------------------------------------------
 @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);
     }
 
@@ -101,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/mixins.less

@@ -1,52 +1,10 @@
-/* stylelint-disable indentation */
-//
-//  STACK OVERFLOW
-//  MIXINS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $   Clearfix
-//  -----------------------------------------------------------------------------
-.clearfix() {
-    &:before,
-    &:after {
-        content: "";
-        display: table;
-    }
-    &:after { clear: both; }
-}
-
-//  ============================================================================
-//  --  LIGHTMODE
-//      .light-mode-forced ensures light color scheme is used in .theme-light__forced
-//
-//      .light-mode-forced({ color: var(--black-600) });
-//
-//  ---------------------------------------------------------------------------
-
-.light-mode-forced(@rules) {
-    .theme-light__forced &,
-    body.theme-system .theme-light__forced &,
-    body.theme-dark .theme-light__forced & {
-        @rules();
-    }
-}
-
-//  ===========================================================================
-//  --  DARKMODE
-//      .darkmode renders a dark mode override behind the
-//      prefers-color-scheme: dark media query and .theme-system. It also
-//      renders the same rules outside of the media query with .theme-dark
-//
-//      Usage example:
-//
-//      .dark-mode({ background-color: var(--black-100); });
-//
-//  ---------------------------------------------------------------------------
-
+// COLOR MODE OVERRIDES
+/**
+ * Applies styles rules when dark mode is active.
+ *
+ * Usage example:
+ * .dark-mode({ background-color: var(--black-100); });
+ */
 .dark-mode(@rules) {
     body.theme-system & {
         @media (prefers-color-scheme: dark) {
@@ -61,22 +19,24 @@
     }
 }
 
-//  ===========================================================================
-//  --  HIGHCONTRAST
-//      .highcontrast-mode renders a high contrast mode override for .theme-highcontrast
-//
-//      Usage example:
-//
-//      .highcontrast-mode({ background-color: var(--black-100); });
-//
-//  ---------------------------------------------------------------------------
-
+/**
+ * Applies styles rules when high contrast mode is active.
+ *
+ * Usage example:
+ * .highcontrast-mode({ background-color: var(--black-100); });
+ */
 .highcontrast-mode(@rules) {
     body.theme-highcontrast & {
         @rules();
     }
 }
 
+/**
+ * Applies styles rules when high contrast and dark mode is active.
+ *
+ * Usage example:
+ * .highcontrast-dark-mode({ background-color: var(--black-100); });
+ */
 .highcontrast-dark-mode(@rules) {
     body.theme-highcontrast.theme-system & {
         @media (prefers-color-scheme: dark) {
@@ -88,31 +48,9 @@
     }
 }
 
-//  ===========================================================================
-//  --  FONT FACE
-//      Used to load hosted, custom webfonts. You must provide the font's
-//      full file path in the mixin. All modern browsers the WOFF file format.
-//      Will automatically add various local()s to try using already-installed
-//      fonts before downloading.
-//  ---------------------------------------------------------------------------
-/* stylelint-disable at-rule-descriptor-value-no-unknown */
-.font-face(@family, @path, @weight, @style) {
-    @font-face {
-        font-family: "@{family}";
-        font-style: @style;
-        font-weight: @weight;
-        & when (@style=italic) {
-            #stacks-internals #font-face-src(@family, @path, @weight, " Italic");
-        }
-        & when not (@style=italic) {
-            #stacks-internals #font-face-src(@family, @path, @weight, "");
-        }
-    }
-}
-/* stylelint-enable at-rule-descriptor-value-no-unknown */
-
+// FOCUS STYLES
 /**
- * Focus styles for the given context.
+ * Applies focus styles for the given context.
  *
  * Usage example:
  * .focus-styles(true, true);
@@ -122,152 +60,29 @@
  */
 .focus-styles(@inset: false, @border: false) {
     & when not (@inset) and not (@border) {
-        box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+        box-shadow: 0 0 0 var(--su2) var(--focus-neutral), 0 0 0 var(--su4) var(--focus-theme);
     }
 
     & when not (@inset) and (@border) {
         border-color: var(--focus-neutral) !important;
-        box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
+        box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme);
     }
 
     & when (@inset) and not (@border) {
-        box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+        box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral);
     }
 
     & when (@inset) and (@border) {
         border-color: var(--focus-theme) !important;
-        box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
+        box-shadow: inset 0 0 0 var(--su1) var(--focus-theme), inset 0 0 0 var(--su3) var(--focus-neutral);
     }
 
     // We include a 2px transparent outline to ensure Windows High Contrast Forced Color Mode
     // includes outlines as expected See https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
-    outline: var(--su-static2) solid transparent !important;
-}
-
-//  =============================================================================
-//  --  COLORS
-//      The following mixins let us do color math on the browser. They take a
-//      color prefix, and they expect the different values to be stored in
-//      --{prefix}-h, --{prefix}-s and --{prefix}-l
-//  -----------------------------------------------------------------------------
-
-.load-color-variables(@amount) {
-    @amountDecimal: (@amount / 100);
-    @amountPercentage: @amount * 1%;
-    @complementDecimal: 1 - @amountDecimal;
-    @additionDecimal: 1 + @amountDecimal;
-}
-
-.assemble-color(@color-prefix) {
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 var(~"--@{color-prefix}-l"));
-}
-
-// Increase the lightness of a color in the HSL color space by an absolute amount.
-.native-lighten(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 calc(var(~"--@{color-prefix}-l") + @amountPercentage));
-}
-
-// Decrease the lightness and saturation of a color in the HSL color space by absolute amounts.
-.native-darken-desaturate(@color-prefix, @darken-amount, @desaturate-amount) {
-    @darkenAmountPercentage: .load-color-variables(@darken-amount)[@amountPercentage];
-    @desaturateAmountPercentage: .load-color-variables(@desaturate-amount)[@amountPercentage];
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 calc(var(~"--@{color-prefix}-s") - @desaturateAmountPercentage),
-                 calc(var(~"--@{color-prefix}-l") - @darkenAmountPercentage));
-}
-
-
-// Decrease the lightness of a color in the HSL color space by an absolute amount.
-.native-darken(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 calc(var(~"--@{color-prefix}-l") - @amountPercentage));
-}
-
-// Mix color with white in variable proportion
-.native-tint(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @ramount: 255 * @amountDecimal;
-    @gamount: 255 * @amountDecimal;
-    @bamount: 255 * @amountDecimal;
-    @result: rgb(calc(@ramount + var(~"--@{color-prefix}-r") * @complementDecimal),
-                 calc(@gamount + var(~"--@{color-prefix}-g") * @complementDecimal),
-                 calc(@bamount + var(~"--@{color-prefix}-b") * @complementDecimal));
-}
-
-// Mix color with black in variable proportion
-.native-shade(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: rgb(calc(var(~"--@{color-prefix}-r") * @complementDecimal),
-                 calc(var(~"--@{color-prefix}-g") * @complementDecimal),
-                 calc(var(~"--@{color-prefix}-b") * @complementDecimal));
-}
-
-// Set the absolute opacity of a color.
-.native-fade(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsla(var(~"--@{color-prefix}-h"),
-                  var(~"--@{color-prefix}-s"),
-                  var(~"--@{color-prefix}-l"),
-                  @amountDecimal);
-}
-
-//  =============================================================================
-//  --  SIZE STYLES
-//      The following mixins let us generate pseudo-private custom properties
-//      for common sizes. They expect a size (@size), a prefix for the custom
-//      property (@prefix), and an array of comma-separates abbreviated styles
-//      (@styles).
-//  -----------------------------------------------------------------------------
-
-.size-styles(@size, @prefix, @styles, @index: length(@styles)) {
-    & when (@index > 0) {
-        @style: extract(@styles, @index);
-
-              // xs
-        & when (@size = xs) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-fine);
-        }
-
-        // sm
-        & when (@size = sm) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-caption);
-        }
-
-        // md
-        & when (@size = md) and (@style = br) {
-            --_@{prefix}-br: calc(var(--br-md) + var(--su-static1));
-            }
-        & when (@size = md) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-body3);
-        }
-
-        // lg
-        & when (@size = lg) and (@style = br) {
-            --_@{prefix}-br: calc(var(--br-md) + var(--su-static1));
-        }
-        & when (@size = lg) and (@style = fs) {
-                --_@{prefix}-fs: var(--fs-title);
-        }
-
-        // xl
-        & when (@size = xl) and (@style = br) {
-            --_@{prefix}-br: var(--br-md);
-        }
-        & when (@size = xl) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-headline1);
-        }
-
-        .size-styles(@size, @prefix, @styles, @index: @index - 1);
-    }
+    outline: var(--su2) solid transparent !important;
 }
 
+// SIZING
 /**
  * Generate base and responsive atomic sizing classes.
  *
@@ -310,7 +125,6 @@
     );
 }
 
-
 /**
  * Generate atomic sizing classes using predefined SU (spacing unit) values.
  *
@@ -338,68 +152,3 @@
         1 2 3 4 5 6 7 8 9 10 11 12
     );
 }
-
-//  =============================================================================
-//  --  WEBKIT AUTOFILL
-//  -----------------------------------------------------------------------------
-.webkit-autofill() {
-    &:-webkit-autofill {
-        &:focus {
-            border-color: var(--blue-400);
-            // Since the box shadow is overwritten to show a background, we have to re-add the focus outline
-            -webkit-box-shadow: 0 0 0 1000px var(--blue-200) inset, 0 0 0 var(--su-static4) var(--focus-ring);
-        }
-
-        -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-200) inset; // This acts as a background color by stretching an inset box shadow across the input
-        -webkit-text-fill-color: var(--black);
-        border-color: var(--blue-400);
-        transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser.
-    }
-
-    &::-webkit-contacts-auto-fill-button {
-        background-color: var(--black); // In Safari, make the autocomplete button darkmode-aware
-    }
-
-}
-
-//  ===========================================================================
-//  Internals only beyond this point -- helpers for .font-face()
-//  ---------------------------------------------------------------------------
-
-
-#stacks-internals() {
-
-    // Generate all common variants for local names that this font face may have.
-    // The CSS spec (Font Module Level 3, Section 4.3) says to use "only the Postscript
-    // name or the full font name".
-    // For example, given the family "Comic Sans MS", weight 800, italic, we're
-    // trying these local names:
-    //
-    // - Comic Sans MS Extra Bold Italic
-    // - ComicSansMS-ExtraBoldItalic
-    // - Comic Sans MS 800 Italic
-    // - ComicSansMS-800Italic
-    //
-    // For the weight 400 we also include the un-weight-postfixed name ("Comic Sans MS Italic").
-
-    #font-face-src(@family, @path, @weight, @style-postfix) {
-        @index: round(@weight/100);
-        @weight-names: "Thin", "Extra Light", "Light", "Regular", "Medium", "Semi Bold", "Bold", "Extra Bold", "Black";
-        @weight-name: extract(@weight-names, @index);
-        #stacks-internals #font-face-src-postfix(@family, @path, "@{weight-name}", @weight, @style-postfix);
-    }
-
-    #font-face-src-postfix(@family, @path, @postfix-name, @postfix-number, @style-postfix) {
-        @family-nospace: replace(@family, " ", "");
-        @postfix-name-nospace: replace("@{postfix-name}@{style-postfix}", " ", "");
-        @postfix-number-nospace: replace("@{postfix-number}@{style-postfix}", " ", "");
-
-        & when (@postfix-name="Regular") {
-            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), local("@{family}@{style-postfix}"), @path format("woff");
-        }
-
-        & when not (@postfix-name="Regular") {
-            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), @path format("woff");
-        }
-    }
-}

package/lib/stacks-static.less

@@ -5,14 +5,52 @@
 @import "base/icon.less";
 @import "input-utils.less";
 
-//  --  COMPONENTS
+// LESS CONSTANTS AND MIXINS
+@import "exports/exports.less";
+
+// CUSTOM PROPERTIES
+@import "atomic/sizing.less";
+
+// FOUNDATIONAL CLASSES
+@import "atomic/color.less";
+@import "atomic/typography.less";
+
+// ATOMIC CLASSES
+@import "atomic/backgrounds.less";
+@import "atomic/borders.less";
+@import "atomic/border-radius.less";
+@import "atomic/box-shadow.less";
+@import "atomic/box-sizing.less";
+@import "atomic/current-color.less";
+@import "atomic/cursors.less";
+@import "atomic/display.less";
+@import "atomic/flex.less";
+@import "atomic/floats.less";
+@import "atomic/gap.less";
+@import "atomic/grid.less";
+@import "atomic/height.less";
+@import "atomic/interactivity.less";
+@import "atomic/lists.less";
+@import "atomic/margin.less";
+@import "atomic/object-fit.less";
+@import "atomic/opacity.less";
+@import "atomic/outline.less";
+@import "atomic/overflow.less";
+@import "atomic/padding.less";
+@import "atomic/positioning.less";
+@import "atomic/truncation.less";
+@import "atomic/vertical-alignment.less";
+@import "atomic/visibility.less";
+@import "atomic/width.less";
+@import "atomic/z-index.less";
+
+// COMPONENTS
 @import "components/activity-indicator/activity-indicator.less";
 @import "components/anchor/anchor.less";
 @import "components/avatar/avatar.less";
 @import "components/badge/badge.less";
 @import "components/banner/banner.less";
 @import "components/bling/bling.less";
-@import "components/block-link/block-link.less";
 @import "components/breadcrumbs/breadcrumbs.less";
 @import "components/button/button.less";
 @import "components/button-group/button-group.less";
@@ -53,23 +91,6 @@
 @import "components/user-card/user-card.less";
 @import "components/vote/vote.less";
 
-// LESS CONSTANTS AND MIXINS
-@import "exports/exports.less";
-
-//  --  ATOMIC CLASSES
-@import "atomic/border.less";
-@import "atomic/color.less";
-@import "atomic/flex.less";
-@import "atomic/gap.less";
-@import "atomic/grid.less";
-@import "atomic/height.less";
-@import "atomic/positioning.less";
-@import "atomic/spacing.less";
-@import "atomic/sizing.less";
-@import "atomic/typography.less";
-@import "atomic/misc.less";
-@import "atomic/width.less";
-
 /* stylelint-disable */
 #stacks-internals #screen-lg({
     #stacks-internals-collect-large();
@@ -93,4 +114,4 @@
 
 // CONFIG
 @import "base/configuration-static.less";
-@import "base/internal.less";
+@import "base/internal.less";

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.23",
+    "version": "3.0.0-beta.24",
     "files": [
         "dist",
         "lib",

package/lib/atomic/border.less

@@ -1,121 +0,0 @@
-#stacks-internals #responsify('.ba', { .bas-solid; .baw1; });
-#stacks-internals #responsify('.bt', { .bts-solid; .btw1; });
-#stacks-internals #responsify('.br', { .brs-solid; .brw1; });
-#stacks-internals #responsify('.bb', { .bbs-solid; .bbw1; });
-#stacks-internals #responsify('.bl', { .bls-solid; .blw1; });
-.bx { .bls-solid; .brs-solid; .bxw1; }
-.by { .bts-solid; .bbs-solid; .byw1; }
-
-//  ============================================================================
-//  $   WIDTH
-//  ----------------------------------------------------------------------------
-//  $$  All Sides
-#stacks-internals #responsify('.baw0', { border-width: 0 !important; });
-.baw1 { border-width: var(--su-static1) !important; }
-.baw2 { border-width: var(--su-static2) !important; }
-.baw3 { border-width: var(--su-static4) !important; }
-
-//  $$  Top Border
-#stacks-internals #responsify('.btw0', { border-top-width: 0 !important; });
-.btw1 { border-top-width: var(--su-static1) !important; }
-.btw2 { border-top-width: var(--su-static2) !important; }
-.btw3 { border-top-width: var(--su-static4) !important; }
-
-//  $$  Right Border
-#stacks-internals #responsify('.brw0', { border-right-width: 0 !important; });
-.brw1 { border-right-width: var(--su-static1) !important; }
-.brw2 { border-right-width: var(--su-static2) !important; }
-.brw3 { border-right-width: var(--su-static4) !important; }
-
-//  $$  Bottom Border
-#stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; });
-.bbw1 { border-bottom-width: var(--su-static1) !important; }
-.bbw2 { border-bottom-width: var(--su-static2) !important; }
-.bbw3 { border-bottom-width: var(--su-static4) !important; }
-
-//  $$  Left Border
-#stacks-internals #responsify('.blw0', { border-left-width: 0 !important; });
-.blw0 { border-left-width: 0 !important; }
-.blw1 { border-left-width: var(--su-static1) !important; }
-.blw2 { border-left-width: var(--su-static2) !important; }
-.blw3 { border-left-width: var(--su-static4) !important; }
-
-//  $$  Y-Axis Border
-.byw0 { .btw0; .bbw0; }
-.byw1 { .btw1; .bbw1; }
-.byw2 { .btw2; .bbw2; }
-.byw3 { .btw3; .bbw3; }
-
-//  $$  X-Axis Border
-.bxw0 { .brw0; .blw0; }
-.bxw1 { .brw1; .blw1; }
-.bxw2 { .brw2; .blw2; }
-.bxw3 { .brw3; .blw3; }
-
-
-//  ============================================================================
-//  $   STYLE
-//  ============================================================================
-//  $$  All sides
-.bas-solid { border-style: solid !important; }
-.bas-dashed { border-style: dashed !important; }
-
-//  $$  Top Border
-.bts-solid { border-top-style: solid !important; }
-.bts-dashed { border-top-style: dashed !important; }
-
-//  $$  Right Border
-.brs-solid { border-right-style: solid !important; }
-.brs-dashed { border-right-style: dashed !important; }
-
-//  $$  Bottom Border
-.bbs-solid { border-bottom-style: solid !important; }
-.bbs-dashed { border-bottom-style: dashed !important; }
-
-//  $$  Left Border
-.bls-solid { border-left-style: solid !important; }
-.bls-dashed { border-left-style: dashed !important; }
-
-
-//  ============================================================================
-//  $   BORDER RADIUS
-//  ----------------------------------------------------------------------------
-//  $$  All Sides
-.bar-md { border-radius: var(--br-md) !important; }
-.bar-circle { border-radius: var(--br-circle) !important; }
-.bar-pill { border-radius: var(--br-pill) !important; }
-
-//  $$  Top Left Corner
-.btlr0 { border-top-left-radius: 0 !important; }
-.btlr-md { border-top-left-radius: var(--br-md) !important; }
-
-//  $$  Top Right Corner
-.btrr0 { border-top-right-radius: 0 !important; }
-.btrr-md { border-top-right-radius: var(--br-md) !important; }
-
-//  $$  Bottom Left Corner
-.bblr0 { border-bottom-left-radius: 0 !important; }
-.bblr-md { border-bottom-left-radius: var(--br-md) !important; }
-
-//  $$  Bottom Right Corner
-.bbrr0 { border-bottom-right-radius: 0 !important; }
-.bbrr-md { border-bottom-right-radius: var(--br-md) !important; }
-
-//  $$  Top Corners
-.btr0 { .btlr0; .btrr0; }
-.btr-md { .btlr-md; .btrr-md; }
-
-//  $$  Right Corners
-.brr0 { .btrr0; .bbrr0; }
-.brr-md { .btrr-md; .bbrr-md; }
-
-//  $$  Bottom Corners
-.bbr0 { .bblr0; .bbrr0; }
-.bbr-md { .bblr-md; .bbrr-md; }
-
-//  $$  Left Corners
-.blr0 { .btlr0; .bblr0; }
-.blr-md { .btlr-md; .bblr-md; }
-
-//  $$  All Sides
-#stacks-internals #responsify('.bar0', { border-radius: 0 !important; });