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

package/lib/atomic/flex.less

@@ -1,25 +1,4 @@
-//
-//  STACK OVERFLOW
-//  FLEXBOX HELPERS
-//
-//  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/
-//
-//  TABLE OF CONTENTS
-//  • VARIABLES
-//  • MIXINS
-//  • FLEX ELEMENTS
-//  • FLEX SPACING
-//  • MODIFICATIONS
-//  • ATOMIC
-//  • DEPRECATED
-//
-//  ============================================================================
-//  --  STACKS FLEX LAYOUT MIXINS
-//  ============================================================================
-//  --  FIXED COLUMN WIDTHS
-//  ----------------------------------------------------------------------------
+@import (reference) "../base/internal.less";
 
 #stacks-internals() {
     #flex-builder-settings() {
@@ -321,19 +300,15 @@
 .ac-start { align-content: flex-start !important; }
 .ac-stretch { align-content: stretch !important; }
 
-//  --  ALIGN ITEMS
-//      Defines the default behavior for how child items align along
-//      the parent's cross axis. Think of it the cross-axis for
-//      justify-content.
-//  ----------------------------------------------------------------------------
+// Align items
 #stacks-internals #build-classes(
-    responsive,
     '.ai',
     {
         .template(@value) when (@value=start), (@value=end) { align-items: ~"flex-@{value}" !important; }
         .template(@value) when (default()) { align-items: @value !important; };
     },
-    baseline center end start stretch
+    baseline center end start stretch,
+    true
 );
 
 //  --  CENTER ITEMS
@@ -345,18 +320,15 @@
     .ai-center;
 }
 
-//  --  ALIGN SELF
-//      Allows child containers to re-align themselves regardless
-//      of the parent's main axis direction.
-//  ----------------------------------------------------------------------------
+// Align self
 #stacks-internals #build-classes(
-    responsive,
     '.as',
     {
         .template(@value) when (@value=start), (@value=end) { align-self: ~"flex-@{value}" !important; }
         .template(@value) when (default()) { align-self: @value !important; };
     },
     auto baseline center end start stretch
+    true
 );
 
 //  --  FLEX

package/lib/atomic/height.less

@@ -0,0 +1,22 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+// `height` properties
+.generate-sizing('.h', height, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px');
+.generate-su-sizing('.hs', height); // Static sizing units
+#stacks-internals #responsify('.h100', { height: 100% !important; });
+#stacks-internals #responsify('.h-auto', { height: auto !important; });
+#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
+
+// `min-height` properties
+.generate-sizing('.hmn', min-height, 0, 'px', false, true);
+.generate-su-sizing('.hmn', min-height); // Static sizing units
+#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
+#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
+#stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; });
+
+// `max-height` properties
+.generate-su-sizing('.hmx', max-height); // Static sizing units
+#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
+#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
+#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });

package/lib/atomic/misc.less

@@ -67,6 +67,26 @@
 //  ----------------------------------------------------------------------------
 .bg-image-none { background-image: none !important; }
 
+.bg-loading {
+    animation: loadingBgAnimation 1.5s ease-out infinite;
+    animation-delay: 1ms;
+}
+
+@keyframes loadingBgAnimation {
+    0% {
+        background-color: var(--black-150);
+        opacity: 1;
+    }
+    50% {
+        background-color: var(--black-100);
+        opacity: 0.7;
+    }
+    100% {
+        background-color: var(--black-150);
+        opacity: 1;
+    }
+}
+
 .bg-confetti-animated {
     background-repeat: repeat-x;
     background-position: top -10px center;
@@ -155,21 +175,6 @@
     user-select: none !important;
 }
 
-//  ============================================================================
-//  $  USER DRAG
-//  ----------------------------------------------------------------------------
-.ud-auto {
-    -webkit-user-drag: auto !important;
-    -moz-user-drag: auto !important;
-    -ms-user-drag: auto !important;
-}
-
-.ud-none {
-    -webkit-user-drag: none !important;
-    -moz-user-drag: none !important;
-    -ms-user-drag: none !important;
-}
-
 //  ============================================================================
 //  $  VISIBILITY
 //  ----------------------------------------------------------------------------
@@ -179,6 +184,7 @@
     // Borrowed from Wordpress
     // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
     border: 0;
+    /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */
     clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
     clip-path: inset(50%);
     height: var(--su-static1);

package/lib/atomic/positioning.less

@@ -0,0 +1,34 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@percent-values: 50 100;
+
+// POSITIONING
+// Inset
+.generate-sizing('.i', inset, @px-values, 'px');
+
+//  Top
+.generate-sizing('.t', top, @px-values, 'px', true);
+.generate-sizing('.tn', top, @px-values-negative, 'px', true, true);
+.generate-sizing('.t', top, @percent-values, 'percent', true);
+.generate-sizing('.tn', top, @percent-values, 'percent', true, true);
+
+// Right
+.generate-sizing('.r', right, @px-values, 'px', true);
+.generate-sizing('.rn', right, @px-values-negative, 'px', true, true);
+.generate-sizing('.r', right, @percent-values, 'percent', true);
+.generate-sizing('.rn', right, @percent-values, 'percent', true, true);
+
+// Bottom
+.generate-sizing('.b', bottom, @px-values, 'px', true);
+.generate-sizing('.bn', bottom, @px-values-negative, 'px', true, true);
+.generate-sizing('.b', bottom, @percent-values, 'percent', true);
+.generate-sizing('.bn', bottom, @percent-values, 'percent', true, true);
+
+// Left
+.generate-sizing('.l', left, @px-values, 'px', true);
+.generate-sizing('.ln', left, @px-values-negative, 'px', true, true);
+.generate-sizing('.l', left, @percent-values, 'percent', true);
+.generate-sizing('.ln', left, @percent-values, 'percent', true, true);

package/lib/atomic/sizing.less

@@ -0,0 +1,76 @@
+@import (reference) "../base/internal.less";
+
+// SIZING UNITS CSS CUSTOM PROPERTIES
+body {
+    --su0: 0;
+    --su1: clamp(1px, 0.063rem, 0.063rem); // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px).
+    --su2: 0.125rem;
+    --su4: 0.25rem;
+    --su6: 0.375rem;
+    --su8: 0.5rem;
+    --su12: 0.75rem;
+    --su16: 1rem;
+    --su24: 1.5rem;
+    --su32: 2rem;
+    --su48: 3rem;
+    --su64: 4rem;
+    --su96: 6rem;
+    --su128: 8rem;
+    --su256: 16rem;
+    --su344: 21.5rem;
+    --su448: 28rem;
+    --su512: 32rem;
+    --su640: 40rem;
+    --su768: 48rem;
+    --su848: 53rem;
+    --su960: 60rem;
+    --su1024: 64rem;
+    --su1120: 70rem;
+    --su1280: 80rem;
+    --su-max: var(--su1280);
+    --s-full: 79rem; // Legacy sizing units for Stacks v2
+    --s-step: calc(var(--s-full) / 12); // Legacy sizing units for Stacks v2
+
+    // Negative sizing
+    // This is a common subset sizing units for negative values
+    --sun1: calc(var(--su1) * -1);
+    --sun2: calc(var(--su2) * -1);
+    --sun4: calc(var(--su4) * -1);
+    --sun6: calc(var(--su6) * -1);
+    --sun8: calc(var(--su8) * -1);
+    --sun12: calc(var(--su12) * -1);
+    --sun16: calc(var(--su16) * -1);
+    --sun24: calc(var(--su24) * -1);
+    --sun32: calc(var(--su32) * -1);
+    --sun48: calc(var(--su48) * -1);
+    --sun64: calc(var(--su64) * -1);
+    --sun96: calc(var(--su96) * -1);
+    --sun128: calc(var(--su128) * -1);
+
+    // Static (aka px) sizing units
+    --su-static0: 0px;
+    --su-static1: 1px;
+    --su-static2: 2px;
+    --su-static4: 4px;
+    --su-static6: 6px;
+    --su-static8: 8px;
+    --su-static12: 12px;
+    --su-static16: 16px;
+    --su-static24: 24px;
+    --su-static32: 32px;
+    --su-static48: 48px;
+    --su-static64: 64px;
+    --su-static96: 96px;
+    --su-static128: 128px;
+    --su-static256: 256px;
+    --su-static344: 344px;
+    --su-static448: 448px;
+    --su-static512: 512px;
+    --su-static640: 640px;
+    --su-static768: 768px;
+    --su-static848: 848px;
+    --su-static960: 960px;
+    --su-static1024: 1024px;
+    --su-static1120: 1120px;
+    --su-static1280: 1280px;
+}

package/lib/atomic/spacing.less

@@ -1,98 +1,58 @@
 @import (reference) "../base/internal.less";
-@import (reference) "../exports/spacing-mixins.less";
+@import (reference) "../exports/mixins.less";
 
-// SPACING UNITS CSS CUSTOM PROPERTIES
-body {
-    --su-base: 1;
-    --su-static0: 0px;
-    --su-static1: 1px;
-    --su-static2: 2px;
-    --su-static4: 4px;
-    --su-static6: 6px;
-    --su-static8: 8px;
-    --su-static12: 12px;
-    --su-static16: 16px;
-    --su-static24: 24px;
-    --su-static32: 32px;
-    --su-static48: 48px;
-    --su-static64: 64px;
-    --su-static96: 96px;
-    --su-static128: 128px;
-
-    --su0: var(--su-static0);
-    // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px).
-    --su1: clamp(var(--su-static1), calc(var(--su-static1) * var(--su-base)), calc(var(--su-static1) * var(--su-base)));
-    --su2: calc(var(--su-static2) * var(--su-base));
-    --su4: calc(var(--su-static4) * var(--su-base));
-    --su6: calc(var(--su-static6) * var(--su-base));
-    --su8: calc(var(--su-static8) * var(--su-base));
-    --su12: calc(var(--su-static12) * var(--su-base));
-    --su16: calc(var(--su-static16) * var(--su-base));
-    --su24: calc(var(--su-static24) * var(--su-base));
-    --su32: calc(var(--su-static32) * var(--su-base));
-    --su48: calc(var(--su-static48) * var(--su-base));
-    --su64: calc(var(--su-static64) * var(--su-base));
-    --su96: calc(var(--su-static96) * var(--su-base));
-    --su128: calc(var(--su-static128) * var(--su-base));
-}
+@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@percent-values: 50 100;
 
 // MARGIN
-//  Margin
 .m-auto { margin: auto !important; }
-.generate-spacing('.m', margin, true);
-.generate-spacing('.m', margin, true, percent);
+.generate-sizing('.m', margin, @px-values, 'px', true);
+.generate-sizing('.mn', margin, @px-values-negative, 'px', true, true);
+.generate-sizing('.m', margin, @percent-values, 'percent', true);
+.generate-sizing('.mn', margin, @percent-values, 'percent', true, true);
 
 //  Margin top
 .mt-auto { margin-top: auto !important; }
-.generate-spacing('.mt', margin-top, true);
-.generate-spacing('.mt', margin-top, true, percent);
+.generate-sizing('.mt', margin-top, @px-values, 'px', true);
+.generate-sizing('.mtn', margin-top, @px-values-negative, 'px', true, true);
+.generate-sizing('.mt', margin-top, @percent-values, 'percent', true);
+.generate-sizing('.mtn', margin-top, @percent-values, 'percent', true, true);
 
 //  Margin right
 .mr-auto { margin-right: auto !important; }
-.generate-spacing('.mr', margin-right, true);
-.generate-spacing('.mr', margin-right, true, percent);
+.generate-sizing('.mr', margin-right, @px-values, 'px', true);
+.generate-sizing('.mrn', margin-right, @px-values-negative, 'px', true, true);
+.generate-sizing('.mr', margin-right, @percent-values, 'percent', true);
+.generate-sizing('.mrn', margin-right, @percent-values, 'percent', true, true);
 
 //  Margin bottom
 .mb-auto { margin-bottom: auto !important; }
-.generate-spacing('.mb', margin-bottom, true);
-.generate-spacing('.mb', margin-bottom, true, percent);
+.generate-sizing('.mb', margin-bottom, @px-values, 'px', true);
+.generate-sizing('.mbn', margin-bottom, @px-values-negative, 'px', true, true);
+.generate-sizing('.mb', margin-bottom, @percent-values, 'percent', true);
+.generate-sizing('.mbn', margin-bottom, @percent-values, 'percent', true, true);
 
 //  Margin left
 .ml-auto { margin-left: auto !important; }
-.generate-spacing('.ml', margin-left, true);
-.generate-spacing('.ml', margin-left, true, percent);
+.generate-sizing('.ml', margin-left, @px-values, 'px', true);
+.generate-sizing('.mln', margin-left, @px-values-negative, 'px', true, true);
+.generate-sizing('.ml', margin-left, @percent-values, 'percent', true);
+.generate-sizing('.mln', margin-left, @percent-values, 'percent', true, true);
 
 //  Margin x-axis, y-axis
 .mx-auto { margin-left: auto !important; margin-right: auto !important; }
 .my-auto { margin-top: auto !important; margin-bottom: auto !important; }
-.generate-spacing('.mx'; margin-left, margin-right; true);
-.generate-spacing('.my'; margin-top, margin-bottom; true);
+.generate-sizing('.mx'; margin-left, margin-right; @px-values; 'px'; true);
+.generate-sizing('.mxn'; margin-left, margin-right; @px-values-negative; 'px'; true; true);
+.generate-sizing('.my'; margin-top, margin-bottom; @px-values; 'px'; true);
+.generate-sizing('.myn'; margin-top, margin-bottom; @px-values-negative; 'px'; true; true);
 
 // PADDING
-.generate-spacing('.p', padding);
-.generate-spacing('.pt', padding-top);
-.generate-spacing('.pr', padding-right);
-.generate-spacing('.pb', padding-bottom);
-.generate-spacing('.pl', padding-left);
-.generate-spacing('.px'; padding-left, padding-right);
-.generate-spacing('.py'; padding-top, padding-bottom);
-
-// POSITIONING
-// Inset
-.generate-spacing('.i', inset);
-
-//  Top
-.generate-spacing('.t', top, true);
-.generate-spacing('.t', top, true, percent);
-
-// Right
-.generate-spacing('.r', right, true);
-.generate-spacing('.r', right, true, percent);
-
-// Bottom
-.generate-spacing('.b', bottom, true);
-.generate-spacing('.b', bottom, true, percent);
-
-// Left
-.generate-spacing('.l', left, true);
-.generate-spacing('.l', left, true, percent);
+.generate-sizing('.p', padding, @px-values, 'px', true);
+.generate-sizing('.pt', padding-top, @px-values, 'px', true);
+.generate-sizing('.pr', padding-right, @px-values, 'px', true);
+.generate-sizing('.pb', padding-bottom, @px-values, 'px', true);
+.generate-sizing('.pl', padding-left, @px-values, 'px', true);
+.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'; true);
+.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'; true);

package/lib/atomic/typography.less

@@ -26,19 +26,58 @@ p {
 //  $   TEXT SIZES
 //  ----------------------------------------------------------------------------
 //  Declare font sizes
-.fs-display4 { font-size: var(--fs-display4) !important; }
-.fs-display3 { font-size: var(--fs-display3) !important; }
-.fs-display2 { font-size: var(--fs-display2) !important; }
-.fs-display1 { font-size: var(--fs-display1) !important; }
-.fs-headline2 { font-size: var(--fs-headline2) !important; }
-.fs-headline1 { font-size: var(--fs-headline1) !important; }
-.fs-title { font-size: var(--fs-title) !important; }
-.fs-subheading { font-size: var(--fs-subheading) !important; }
-.fs-body3 { font-size: var(--fs-body3) !important; }
-.fs-body2 { font-size: var(--fs-body2) !important; }
-.fs-body1 { font-size: var(--fs-body1) !important; }
-.fs-caption { font-size: var(--fs-caption) !important; }
-.fs-fine { font-size: var(--fs-fine) !important; }
+.fs-display4 {
+    font-size: var(--fs-display4) !important;
+    line-height: 1.18;
+}
+.fs-display3 {
+    font-size: var(--fs-display3) !important;
+    line-height: 1.20;
+}
+.fs-display2 {
+    font-size: var(--fs-display2) !important;
+    line-height: 1.28;
+}
+.fs-display1 {
+    font-size: var(--fs-display1) !important;
+    line-height: 1.34;
+}
+.fs-headline2 {
+    font-size: var(--fs-headline2) !important;
+    line-height: 1.40;
+}
+.fs-headline1 {
+    font-size: var(--fs-headline1) !important;
+    line-height: 1.40;
+}
+.fs-title {
+    font-size: var(--fs-title) !important;
+    line-height: 1.40;
+}
+.fs-subheading {
+    font-size: var(--fs-subheading) !important;
+    line-height: 1.40;
+}
+.fs-body3 {
+    font-size: var(--fs-body3) !important;
+    line-height: 1.40;
+}
+.fs-body2 {
+    font-size: var(--fs-body2) !important;
+    line-height: 1.40;
+}
+.fs-body1 {
+    font-size: var(--fs-body1) !important;
+    line-height: 1.40;
+}
+.fs-caption {
+    font-size: var(--fs-caption) !important;
+    line-height: 1.40;
+}
+.fs-fine {
+    font-size: var(--fs-fine) !important;
+    line-height: 1.36;
+}
 
 #stacks-internals #screen-sm({
     .fs-display4 { font-size: calc(var(--fs-display4) * .43) !important; } // 43px

package/lib/atomic/width.less

@@ -0,0 +1,27 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+// `width` properties
+.generate-sizing('.w', width, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px');
+.generate-su-sizing('.ws', width); // Static sizing units
+.generate-sizing('.w', width, 10 20 30 40 60 70 80 90, 'percent');
+.generate-sizing('.w', width, 25 50 75 100, 'percent', true); // responsive
+#stacks-internals #responsify('.w33', { width: calc(100% / 3) !important; });
+#stacks-internals #responsify('.w66', { width: calc(100% / 3 * 2) !important; });
+#stacks-internals #responsify('.w-auto', { width: auto !important; });
+#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
+
+// `min-width` properties
+.generate-sizing('.wmn', min-width, 0, 'px');
+.generate-su-sizing('.wmn', min-width); // Static sizing units
+.generate-sizing('.wmn', min-width, 25 50 75, 'percent');
+#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
+#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
+#stacks-internals #responsify('.wmn-screen', { min-width: 100vw !important; });
+
+// `max-width` properties
+.generate-su-sizing('.wmx', max-width); // Static sizing units
+.generate-sizing('.wmx', max-width, 25 50 75, 'percent');
+#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
+#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
+#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });

package/lib/base/body.less

@@ -20,20 +20,18 @@ html,
 body {
     color: var(--theme-body-font-color, var(--black-600));
     font-family: var(--theme-body-font-family);
-    font-size: var(--fs-base);
     line-height: var(--lh-base);
 }
 
 body {
+    background-color: var(--theme-background-color, var(--white));
     box-sizing: border-box;
+    font-size: var(--fs-body1);
     min-height: 100%;
-    background-color: var(--theme-background-color, var(--white));
 
     *,
     *:before,
     *:after {
         box-sizing: inherit;
     }
-
-    // TODO SHINE set max width here
 }

package/lib/base/configuration-static.less

@@ -13,14 +13,14 @@
 //      legal options are `meyer` for the Eric Meyer reset, and `none` if no CSS reset should be compiled in.
 //
 //
-// #stacks-config-static { @breakpoints: 1264px, 980px, 640px; }
+// #stacks-config-static { @breakpoints: 92.25rem, 71.875rem, 48.75rem; }
 //
 //      @breakpoints is a list of values "optional_selector1, large_breakpoint1, medium_breakpoint1, small_breakpoint1, optional_selector2, ..."
 //
 //      Example:
 //
 //          @breakpoints:
-//              1264px, 980px, 640px,
+//              92.25rem, 71.875rem, 48.75rem,
 //              'html.smaller_breakpoints', 1164px, 880px, 540px,
 //              'html.even_smaller_breakpoints', 200px, 100px, 50px;
 //
@@ -37,7 +37,7 @@
 //              ...
 //          </html>
 //
-//      With the example @breakpoints setting from above, this <div> will be hidden below 1264px even though the smaller_breakpoints class
+//      With the example @breakpoints setting from above, this <div> will be hidden below 92.25rem even though the smaller_breakpoints class
 //      is on the root element, because the selector-free breakpoint group still applies.
 //
 //      Any selector, if given, MUST select the root (html) element.

package/lib/base/internal.less

@@ -164,12 +164,10 @@
     //  ---------------------------------------------------------------------------
 
 
-    #build-classes(@class-prefix, @rules, @values) {
-        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, false, @values);
-    }
-    #build-classes(responsive, @class-prefix, @rules, @values) {
-        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, true, @values);
+    #build-classes(@class-prefix, @rules, @values, @responsive: false) {
+        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, @responsive, @values);
     }
+
     #build-classes-with-start-index(@class-prefix, @rules, @start-index, @responsive, @values) when (@start-index <= length(@values)) {
         @val: extract(@values, @start-index);
         & when (isnumber(@val)) {

package/lib/base/reset-normalize.less

@@ -375,7 +375,7 @@ textarea {
 
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
-  outline-offset: calc(var(--su-static2) * -1); // -2px - /* 2 */
+  outline-offset: var(--sun2);
 }
 
 /**

package/lib/components/activity-indicator/activity-indicator.less

@@ -4,34 +4,18 @@
     --_ai-min-size: var(--su-static16);
     --_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
 
-    .highcontrast-mode({
-        --_ai-bg: var(--theme-secondary-500);
-    });
-
     // VARIANTS
     &&__danger {
         --_ai-bg: var(--red-400);
-
-        .highcontrast-mode({
-            --_ai-bg: var(--red-500);
-        });
     }
 
     &&__success {
         --_ai-bg: var(--green-400);
 
-        .highcontrast-mode({
-            --_ai-bg: var(--green-500);
-        });
     }
 
     &&__warning {
         --_ai-bg: var(--yellow-400);
-
-        .highcontrast-mode({
-            --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
-            --_ai-fc: var(--white);
-        });
     }
 
     &&__sm {
@@ -45,7 +29,7 @@
     min-height: var(--_ai-min-size);
     padding: var(--_ai-p);
 
-    border-radius: 1000px;
+    border-radius: var(--br-pill);
     display: inline-flex;
     font-size: var(--fs-fine);
     font-weight: 600;

package/lib/components/avatar/avatar.less

@@ -58,9 +58,9 @@
 
     // CHILD ELEMENTS
     & &--badge {
-        bottom: calc(var(--su-static4) * -1); // -4px
+        bottom: var(--sun4);
         position: absolute;
-        right: calc(var(--su-static4) * -1); // -4px
+        right: var(--sun4);
         -webkit-transform: scale(var(--_av-scale-badge));
         transform: scale(var(--_av-scale-badge));
     }