@stackoverflow/stacks 0.76.0 → 1.0.0-beta.0

package/lib/css/base/{_stacks-reset.less → reset.less}

@@ -1,20 +1,20 @@
-// the default CSS reset is normalize.css; other possibilities are the Eric Meyer reset, and no reset at all.
-
-#stacks-internals() {
-    #include-css-reset(meyer) {
-        @import "_stacks-reset-meyer.less";
-    }
-    #include-css-reset(normalize) {
-        @import "_stacks-reset-normalize.less";
-    }
-    /* stylelint-disable block-no-empty */
-    #include-css-reset(none) {
-    }
-    /* stylelint-enable */
-}
-
-& {
-    #stacks-internals #load-static-config();
-    #stacks-internals #include-css-reset(@css-reset);
-}
-
+// the default CSS reset is normalize.css; other possibilities are the Eric Meyer reset, and no reset at all.
+
+#stacks-internals() {
+    #include-css-reset(meyer) {
+        @import "reset-meyer.less";
+    }
+    #include-css-reset(normalize) {
+        @import "reset-normalize.less";
+    }
+    /* stylelint-disable block-no-empty */
+    #include-css-reset(none) {
+    }
+    /* stylelint-enable */
+}
+
+& {
+    #stacks-internals #load-static-config();
+    #stacks-internals #include-css-reset(@css-reset);
+}
+

package/lib/css/components/{_stacks-activity-indicator.less → activity-indicator.less}

@@ -1,45 +1,45 @@
-//
-//  STACK OVERFLOW
-//  ACTIVITY INDICATOR
-//
-//  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/
-//
-
-//  ============================================================================
-//  $   ACTIVITY INDICATOR
-//  ----------------------------------------------------------------------------
-
-.s-activity-indicator {
-    display: inline-block;
-    min-width: @su12;
-    height: @su12;
-    padding-left: @su4;
-    padding-right: @su4;
-    line-height: 1.1; // Custom line-height to satisfy 1x screens
-    background-color: var(--theme-secondary-400);
-    box-shadow: 0 0 0 @su4 var(--focus-ring);
-    border-radius: 1000px;
-    font-size: @fs-fine;
-    font-weight: 600;
-    color: @white;
-    text-transform: uppercase;
-
-    .highcontrast-mode({ color: var(--white); });
-}
-
-.s-activity-indicator__success {
-    background-color: var(--green-500);
-    box-shadow: 0 0 0 @su4 var(--focus-ring-success);
-}
-
-.s-activity-indicator__warning {
-    background-color: var(--yellow-600);
-    box-shadow: 0 0 0 @su4 var(--focus-ring-warning);
-}
-
-.s-activity-indicator__danger {
-    background-color: var(--red-500);
-    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
-}
+//
+//  STACK OVERFLOW
+//  ACTIVITY INDICATOR
+//
+//  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/
+//
+
+//  ============================================================================
+//  $   ACTIVITY INDICATOR
+//  ----------------------------------------------------------------------------
+
+.s-activity-indicator {
+    display: inline-block;
+    min-width: var(--su-static12);
+    height: var(--su-static12);
+    padding-left: var(--su4);
+    padding-right: var(--su4);
+    line-height: 1.1; // Custom line-height to satisfy 1x screens
+    background-color: var(--theme-secondary-400);
+    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
+    border-radius: 1000px;
+    font-size: var(--fs-fine);
+    font-weight: 600;
+    color: @white;
+    text-transform: uppercase;
+
+    .highcontrast-mode({ color: var(--white); });
+}
+
+.s-activity-indicator__success {
+    background-color: var(--green-500);
+    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
+}
+
+.s-activity-indicator__warning {
+    background-color: var(--yellow-600);
+    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
+}
+
+.s-activity-indicator__danger {
+    background-color: var(--red-500);
+    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
+}

package/lib/css/components/{_stacks-avatars.less → avatars.less}

@@ -1,189 +1,189 @@
-//
-//  STACK OVERFLOW
-//  AVATARS
-//
-//  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
-//  • AVATARS
-//  • TEAM AVATARS
-//
-
-//  ============================================================================
-//  $   TEAM AVATARS
-//  ----------------------------------------------------------------------------
-
-.s-avatar {
-    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
-    position: relative;
-    width: @su16;
-    height: @su16;
-    border-radius: @br-sm;
-    background-color: @white; // Force a white background color for when we have transparent avatars
-    background-repeat: no-repeat;
-    background-size: 100%;
-    vertical-align: bottom; // Make our avatars play more nicely with text next to it.
-
-    .highcontrast-mode({
-        background-color: var(--black);
-        box-shadow: 0 0 0 1px var(--black);
-
-        .s-avatar--letter {
-            color: var(--white);
-        }
-    });
-
-    .s-avatar--letter {
-        display: block; // Make sure we're treating the letter as a block-level element
-        color: @white; // Force a light appearance of text rendering
-        font-size: 11px; // Force a font size so the avatar text doesn't get smaller as the window resizes
-        font-weight: bold;
-        line-height: 1.4; // Guards against some line-height trolling from the parent
-        text-align: center;
-        text-transform: uppercase; // Force uppercase in avatars when team name is lowercase
-        // We don't need text selection on our letter
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    .s-avatar--badge {
-        position: absolute;
-        right: -4px;
-        bottom: -4px;
-    }
-
-    .s-avatar--image {
-        width: @su16;
-        height: @su16;
-        border-radius: @br-sm;
-        display: block;
-    }
-
-    &.s-avatar__24 {
-        width: @su24;
-        height: @su24;
-
-        .s-avatar--letter {
-            font-size: 16px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(1.1);
-            transform: scale(1.1);
-        }
-
-        .s-avatar--image {
-            width: @su24;
-            height: @su24;
-        }
-    }
-
-    &.s-avatar__32 {
-        width: @su32;
-        height: @su32;
-        border-radius: @br-md;
-
-        .s-avatar--letter {
-            font-size: 22px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(1.3);
-            transform: scale(1.3);
-        }
-
-        .s-avatar--image {
-            width: @su32;
-            height: @su32;
-            border-radius: @br-md;
-        }
-    }
-
-    &.s-avatar__48 {
-        width: @su48;
-        height: @su48;
-        border-radius: @br-md;
-
-        .s-avatar--letter {
-            font-size: 34px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(1.6);
-            transform: scale(1.6);
-        }
-
-        .s-avatar--image {
-            width: @su48;
-            height: @su48;
-            border-radius: @br-md;
-        }
-    }
-
-    &.s-avatar__64 {
-        width: @su64;
-        height: @su64;
-        border-radius: @br-lg;
-
-        .s-avatar--letter {
-            font-size: 44px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(2.4);
-            transform: scale(2.4);
-        }
-
-        .s-avatar--image {
-            width: @su64;
-            height: @su64;
-            border-radius: @br-lg;
-        }
-    }
-
-    &.s-avatar__96 {
-        width: @su96;
-        height: @su96;
-        border-radius: @br-lg + @br-sm;
-
-        .s-avatar--letter {
-            font-size: 66px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(3);
-            transform: scale(3);
-        }
-
-        .s-avatar--image {
-            width: @su96;
-            height: @su96;
-            border-radius: @br-lg + @br-sm;
-        }
-    }
-
-    &.s-avatar__128 {
-        width: @su128;
-        height: @su128;
-        border-radius: @br-lg + @br-lg;
-
-        .s-avatar--letter {
-            font-size: 88px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(3);
-            transform: scale(3);
-        }
-
-        .s-avatar--image {
-            width: @su128;
-            height: @su128;
-            border-radius: @br-lg + @br-lg;
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  AVATARS
+//
+//  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
+//  • AVATARS
+//  • TEAM AVATARS
+//
+
+//  ============================================================================
+//  $   TEAM AVATARS
+//  ----------------------------------------------------------------------------
+
+.s-avatar {
+    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
+    position: relative;
+    width: var(--su-static16);
+    height: var(--su-static16);
+    border-radius: var(--br-sm);
+    background-color: @white; // Force a white background color for when we have transparent avatars
+    background-repeat: no-repeat;
+    background-size: 100%;
+    vertical-align: bottom; // Make our avatars play more nicely with text next to it.
+
+    .highcontrast-mode({
+        background-color: var(--black);
+        box-shadow: 0 0 0 1px var(--black);
+
+        .s-avatar--letter {
+            color: var(--white);
+        }
+    });
+
+    .s-avatar--letter {
+        display: block; // Make sure we're treating the letter as a block-level element
+        color: @white; // Force a light appearance of text rendering
+        font-size: 11px; // Force a font size so the avatar text doesn't get smaller as the window resizes
+        font-weight: bold;
+        line-height: 1.4; // Guards against some line-height trolling from the parent
+        text-align: center;
+        text-transform: uppercase; // Force uppercase in avatars when team name is lowercase
+        // We don't need text selection on our letter
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    .s-avatar--badge {
+        position: absolute;
+        right: -4px;
+        bottom: -4px;
+    }
+
+    .s-avatar--image {
+        width: var(--su-static16);
+        height: var(--su-static16);
+        border-radius: var(--br-sm);
+        display: block;
+    }
+
+    &.s-avatar__24 {
+        width: var(--su-static24);
+        height: var(--su-static24);
+
+        .s-avatar--letter {
+            font-size: 16px; // Force the font size regardless of the parent
+        }
+
+        .s-avatar--badge {
+            -webkit-transform: scale(1.1);
+            transform: scale(1.1);
+        }
+
+        .s-avatar--image {
+            width: var(--su-static24);
+            height: var(--su-static24);
+        }
+    }
+
+    &.s-avatar__32 {
+        width: var(--su-static32);
+        height: var(--su-static32);
+        border-radius: var(--br-md);
+
+        .s-avatar--letter {
+            font-size: 22px; // Force the font size regardless of the parent
+        }
+
+        .s-avatar--badge {
+            -webkit-transform: scale(1.3);
+            transform: scale(1.3);
+        }
+
+        .s-avatar--image {
+            width: var(--su-static32);
+            height: var(--su-static32);
+            border-radius: var(--br-md);
+        }
+    }
+
+    &.s-avatar__48 {
+        width: var(--su-static48);
+        height: var(--su-static48);
+        border-radius: var(--br-md);
+
+        .s-avatar--letter {
+            font-size: 34px; // Force the font size regardless of the parent
+        }
+
+        .s-avatar--badge {
+            -webkit-transform: scale(1.6);
+            transform: scale(1.6);
+        }
+
+        .s-avatar--image {
+            width: var(--su-static48);
+            height: var(--su-static48);
+            border-radius: var(--br-md);
+        }
+    }
+
+    &.s-avatar__64 {
+        width: var(--su-static64);
+        height: var(--su-static64);
+        border-radius: var(--br-lg);
+
+        .s-avatar--letter {
+            font-size: 44px; // Force the font size regardless of the parent
+        }
+
+        .s-avatar--badge {
+            -webkit-transform: scale(2.4);
+            transform: scale(2.4);
+        }
+
+        .s-avatar--image {
+            width: var(--su-static64);
+            height: var(--su-static64);
+            border-radius: var(--br-lg);
+        }
+    }
+
+    &.s-avatar__96 {
+        width: var(--su-static96);
+        height: var(--su-static96);
+        border-radius: calc(var(--br-lg) + var(--br-sm));
+
+        .s-avatar--letter {
+            font-size: 66px; // Force the font size regardless of the parent
+        }
+
+        .s-avatar--badge {
+            -webkit-transform: scale(3);
+            transform: scale(3);
+        }
+
+        .s-avatar--image {
+            width: var(--su-static96);
+            height: var(--su-static96);
+            border-radius: calc(var(--br-lg) + var(--br-sm));
+        }
+    }
+
+    &.s-avatar__128 {
+        width: var(--su-static128);
+        height: var(--su-static128);
+        border-radius: calc(var(--br-lg) + var(--br-lg));
+
+        .s-avatar--letter {
+            font-size: 88px; // Force the font size regardless of the parent
+        }
+
+        .s-avatar--badge {
+            -webkit-transform: scale(3);
+            transform: scale(3);
+        }
+
+        .s-avatar--image {
+            width: var(--su-static128);
+            height: var(--su-static128);
+            border-radius: calc(var(--br-lg) + var(--br-lg));
+        }
+    }
+}