@stackoverflow/stacks 1.3.6 → 1.4.1

package/lib/css/atomic/gap.less

@@ -0,0 +1,44 @@
+#stacks-internals #responsify('.g0', { --_gap-x: 0; --_gap-y: 0; });
+#stacks-internals #responsify('.g1', { --_gap-x: var(--su1); --_gap-y: var(--su1); });
+#stacks-internals #responsify('.g2', { --_gap-x: var(--su2); --_gap-y: var(--su2); });
+#stacks-internals #responsify('.g4', { --_gap-x: var(--su4); --_gap-y: var(--su4); });
+#stacks-internals #responsify('.g6', { --_gap-x: var(--su6); --_gap-y: var(--su6); });
+#stacks-internals #responsify('.g8', { --_gap-x: var(--su8); --_gap-y: var(--su8); });
+#stacks-internals #responsify('.g12', { --_gap-x: var(--su12); --_gap-y: var(--su12); });
+#stacks-internals #responsify('.g16', { --_gap-x: var(--su16); --_gap-y: var(--su16); });
+#stacks-internals #responsify('.g24', { --_gap-x: var(--su24); --_gap-y: var(--su24); });
+#stacks-internals #responsify('.g32', { --_gap-x: var(--su32); --_gap-y: var(--su32); });
+#stacks-internals #responsify('.g48', { --_gap-x: var(--su48); --_gap-y: var(--su48); });
+#stacks-internals #responsify('.g64', { --_gap-x: var(--su64); --_gap-y: var(--su64); });
+
+#stacks-internals #responsify('.gx0', { --_gap-x: 0; });
+#stacks-internals #responsify('.gx1', { --_gap-x: var(--su1); });
+#stacks-internals #responsify('.gx2', { --_gap-x: var(--su2); });
+#stacks-internals #responsify('.gx4', { --_gap-x: var(--su4); });
+#stacks-internals #responsify('.gx6', { --_gap-x: var(--su6); });
+#stacks-internals #responsify('.gx8', { --_gap-x: var(--su8); });
+#stacks-internals #responsify('.gx12', { --_gap-x: var(--su12); });
+#stacks-internals #responsify('.gx16', { --_gap-x: var(--su16); });
+#stacks-internals #responsify('.gx24', { --_gap-x: var(--su24); });
+#stacks-internals #responsify('.gx32', { --_gap-x: var(--su32); });
+#stacks-internals #responsify('.gx48', { --_gap-x: var(--su48); });
+#stacks-internals #responsify('.gx64', { --_gap-x: var(--su64); });
+
+#stacks-internals #responsify('.gy0', { --_gap-y: 0; });
+#stacks-internals #responsify('.gy1', { --_gap-y: var(--su1); });
+#stacks-internals #responsify('.gy2', { --_gap-y: var(--su2); });
+#stacks-internals #responsify('.gy4', { --_gap-y: var(--su4); });
+#stacks-internals #responsify('.gy6', { --_gap-y: var(--su6); });
+#stacks-internals #responsify('.gy8', { --_gap-y: var(--su8); });
+#stacks-internals #responsify('.gy12', { --_gap-y: var(--su12); });
+#stacks-internals #responsify('.gy16', { --_gap-y: var(--su16); });
+#stacks-internals #responsify('.gy24', { --_gap-y: var(--su24); });
+#stacks-internals #responsify('.gy32', { --_gap-y: var(--su32); });
+#stacks-internals #responsify('.gy48', { --_gap-y: var(--su48); });
+#stacks-internals #responsify('.gy64', { --_gap-y: var(--su64); });
+
+.gx0, .gx1, .gx2, .gx4, .gx6, .gx8, .gx12, .gx16, .gx24, .gx32, .gx48, .gx64,
+.gy0, .gy1, .gy2, .gy4, .gy6, .gy8, .gy12, .gy16, .gy24, .gy32, .gy48, .gy64,
+.g0, .g1, .g2, .g4, .g6, .g8, .g12, .g16, .g24, .g32, .g48, .g64 {
+  gap: var(--_gap-x, 0) var(--_gap-y, 0);
+}

package/lib/css/atomic/grid.less

@@ -1,38 +1,3 @@
-//
-//  STACK OVERFLOW
-//  GRID
-//
-//  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
-//  • GAP
-//  • GRID FLOW
-//  • GRID COLUMN TEMPLATES
-//  • COLUMN SPANS
-//  • ROW SPANS
-//
-
-//  ============================================================================
-//  $   GAP
-//      Insert spaces or gutters in between grid items
-//      When this is available in flex layouts, this can be separated
-//      into its own section and documentation
-//  ----------------------------------------------------------------------------
-#stacks-internals #responsify('.g0', { gap: 0 });
-#stacks-internals #responsify('.g1', { gap: var(--su1) });
-#stacks-internals #responsify('.g2', { gap: var(--su2) });
-#stacks-internals #responsify('.g4', { gap: var(--su4); });
-#stacks-internals #responsify('.g6', { gap: var(--su6); });
-#stacks-internals #responsify('.g8', { gap: var(--su8); });
-#stacks-internals #responsify('.g12', { gap: var(--su12); });
-#stacks-internals #responsify('.g16', { gap: var(--su16); });
-#stacks-internals #responsify('.g24', { gap: var(--su24); });
-#stacks-internals #responsify('.g32', { gap: var(--su32); });
-#stacks-internals #responsify('.g48', { gap: var(--su48); });
-#stacks-internals #responsify('.g64', { gap: var(--su64); });
-
 //  ============================================================================
 //  $   GRID FLOW
 //  ----------------------------------------------------------------------------

package/lib/css/components/_styles-template.less

@@ -0,0 +1,75 @@
+// This is an example of the expected structure for component-specific styles
+// In some cases, deviations from this structure are warranted if we need to maintain a legacy structure
+.s-component-name {
+    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    // --_{component-abbreviation}-{property-shorthand}: {value};
+    --_cn-bg: var(--blue-500);
+    --_cn-h: var(--su-static16);
+    --_cn-fd: row-reverse;
+    // VARIANT CUSTOM PROPERTIES
+    // --_{component-abbreviation}-{property-shorthand}-{variant-name}: {value};
+    --_cn-fc-filled: var(--green-500);
+    // CHILD COMPONENT CUSTOM PROPERTIES
+    // --_{component-abreviation}-{child-component-name}-{property-shorthand}: {value};
+    --_cn-image-bg: var(--red-500);
+
+    // CONTEXTUAL STYLES
+    // These may include themes/modes, responsive styles, or modifications based on parent containers
+    .highcontrast-mode({
+        --_cn-bg: var(--black-400);
+
+        .s-avatar--letter {
+            --_cn-image-bg: var(--white);
+        }
+    });
+    .s-special-parent & {
+        --_cn-bg: transparent;
+    }
+
+    // MODIFIERS
+    // Modifiers are considered to be classes that can be combined with other modifiers outside of their respective groupings without collisions
+    // Sizes
+    &&__xs {
+        --_cn-h: var(--su-static2);
+    }
+    &&__sm {
+        --_cn-h: var(--su-static12);
+    }
+    // Orientation
+    &&__vertical {
+        --_cn-fd: column;
+    }
+
+    // VARIANTS
+    // Variants are expected to be used exclusive of one another. In other words, you should only use one variant class at a time
+    &&__info {
+        --_cn-bg: var(--yellow-100);
+
+        &.s-component-name__filled {
+            --_cn-bg-filled: var(--yellow-800);
+        }
+    }
+
+    // CHILD ELEMENTS
+    &--image {
+        background-color: var(--_cn-image-bg);
+    }
+
+    // INTERACTION
+    .is-selected {
+        --_cn-bg: var(--orange-200);
+    }
+    &:hover {
+        --_cn-bg: var(--_black-050);
+    }
+
+    // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    background-color: var(--_cn-bg-filled, var(--_cn-bg));
+    flex-direction: var(--_cn-fd);
+    height: var(--_cn-h);
+
+    // STATIC COMPONENT STYLES
+    display: flex;
+    position: relative;
+    vertical-align: bottom;
+}

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

@@ -1,45 +1,35 @@
-//
-//  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 {
-    --_focus-ring: var(--focus-ring);
-    --_bg-color: var(--theme-secondary-400);
+    --_ai-focus-ring: var(--focus-ring);
+    --_ai-bg: var(--theme-secondary-400);
+    --_ai-fc: @white;
 
-    &.s-activity-indicator__success {
-        --_bg-color: var(--green-500);
-        --_focus-ring: var(--focus-ring-success);
+    .highcontrast-mode({ --_ai-fc: var(--white); });
+
+    // VARIANTS
+    &&__success {
+        --_ai-bg-color: var(--green-500);
+        --_ai-focus-ring: var(--focus-ring-success);
     }
-    &.s-activity-indicator__warning {
-        --_bg-color: var(--yellow-600);
-        --_focus-ring: var(--focus-ring-warning);
+    &&__warning {
+        --_ai-bg-color: var(--yellow-600);
+        --_ai-focus-ring: var(--focus-ring-warning);
     }
-    &.s-activity-indicator__danger {
-        --_bg-color: var(--red-500);
-        --_focus-ring: var(--focus-ring-error);
+    &&__danger {
+        --_ai-bg-color: var(--red-500);
+        --_ai-focus-ring: var(--focus-ring-error);
     }
 
+    background-color: var(--_ai-bg);
+    box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);
+    color: var(--_ai-fc);
+
+    border-radius: 1000px;
     display: inline-block;
+    font-size: var(--fs-fine);
+    font-weight: 600;
+    line-height: 1.1; // Custom line-height to satisfy 1x screens
     min-width: var(--su-static12);
     min-height: var(--su-static12);
     padding: var(--su2) var(--su4);
-    line-height: 1.1; // Custom line-height to satisfy 1x screens
-    background-color: var(--_bg-color);
-    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); });
 }

package/lib/css/components/avatars.less

@@ -1,71 +1,9 @@
-//
-//  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 {
-    --_size: var(--su-static16);
-    --_br: var(--br-sm);
-    --_fs-letter: calc(var(--su-static12) - var(--su-static1));
-    --_scale-badge: 1;
-
-    &.s-avatar__24 {
-        --_size: var(--su-static24);
-        --_fs-letter: var(--su-static16);
-        --_scale-badge: 1.1;
-    }
-    &.s-avatar__32 {
-        --_size: var(--su-static32);
-        --_br: var(--br-md);
-        --_fs-letter: calc(var(--su-static24) - var(--su-static2));
-        --_scale-badge: 1.3;
-    }
-    &.s-avatar__48 {
-        --_size: var(--su-static48);
-        --_br: var(--br-md);
-        --_fs-letter: calc(var(--su-static32) + var(--su-static2));
-        --_scale-badge: 1.6;
-    }
-    &.s-avatar__64 {
-        --_size: var(--su-static64);
-        --_br: var(--br-lg);
-        --_fs-letter: calc(var(--su-static48) - var(--su-static4));
-        --_scale-badge: 2.4;
-    }
-    &.s-avatar__96 {
-        --_size: var(--su-static96);
-        --_br: calc(var(--br-lg) + var(--br-sm));
-        --_fs-letter: calc(var(--su-static64) + var(--su-static2));
-        --_scale-badge: 3;
-    }
-    &.s-avatar__128 {
-        --_size: var(--su-static128);
-        --_br: calc(var(--br-lg) + var(--br-sm));
-        --_fs-letter: calc(var(--su-static96) - var(--su-static8));
-        --_scale-badge: 3;
-    }
-
-    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
-    position: relative;
-    width: var(--_size);
-    height: var(--_size);
-    border-radius: var(--_br);
-    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.
+    --_av-size: var(--su-static16);
+    --_av-bg: @white; // Force a white background color for when we have transparent avatars
+    --_av-br: var(--br-sm);
+    --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
+    --_av-scale-badge: 1;
 
     .highcontrast-mode({
         background-color: var(--black);
@@ -77,10 +15,65 @@
         }
     });
 
-    .s-avatar--letter {
+    // VARIANTS
+    // Sizes
+    &&__32,
+    &&__48 {
+        --_av-br: var(--br-md);
+    }
+    &&__96,
+    &&__128 {
+        --_av-br: calc(var(--br-lg) + var(--br-sm));
+        --_av-scale-badge: 3;
+    }
+    &&__24 {
+        --_av-size: var(--su-static24);
+        --_av-fs-letter: var(--su-static16);
+        --_av-scale-badge: 1.1;
+    }
+    &&__32 {
+        --_av-size: var(--su-static32);
+        --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
+        --_av-scale-badge: 1.3;
+    }
+    &&__48 {
+        --_av-size: var(--su-static48);
+        --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
+        --_av-scale-badge: 1.6;
+    }
+    &&__64 {
+        --_av-size: var(--su-static64);
+        --_av-br: var(--br-lg);
+        --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
+        --_av-scale-badge: 2.4;
+    }
+    &&__96 {
+        --_av-size: var(--su-static96);
+        --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
+    }
+    &&__128 {
+        --_av-size: var(--su-static128);
+        --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
+    }
+
+    // CHILD ELEMENTS
+    & &--badge {
+        bottom: calc(var(--su-static4) * -1); // -4px
+        position: absolute;
+        right: calc(var(--su-static4) * -1); // -4px
+        -webkit-transform: scale(var(--_av-scale-badge));
+        transform: scale(var(--_av-scale-badge));
+    }
+    & &--image {
+        border-radius: var(--_av-br);
+        display: block;
+        height: var(--_av-size);
+        width: var(--_av-size);
+    }
+    & &--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: var(--_fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
+        font-size: var(--_av-fs-letter); // 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;
@@ -92,18 +85,14 @@
         user-select: none;
     }
 
-    .s-avatar--badge {
-        position: absolute;
-        right: -4px;
-        bottom: -4px;
-        -webkit-transform: scale(var(--_scale-badge));
-        transform: scale(var(--_scale-badge));
-    }
+    background-color: var(--_av-bg); 
+    border-radius: var(--_av-br);
+    height: var(--_av-size);
+    width: var(--_av-size);
 
-    .s-avatar--image {
-        width: var(--_size);
-        height: var(--_size);
-        border-radius: var(--_br);
-        display: block;
-    }
+    background-repeat: no-repeat;
+    background-size: 100%;
+    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
+    position: relative;
+    vertical-align: bottom; // Make our avatars play more nicely with text next to it.
 }

package/lib/css/components/award-bling.less

@@ -0,0 +1,29 @@
+.s-award-bling {
+    --_ab-before-bg: unset;
+
+    // VARIANTS
+    &&__gold {
+        --_ab-before-bg: var(--gold);
+    }
+    &&__silver {
+        --_ab-before-bg: var(--silver);
+    }
+    &&__bronze {
+        --_ab-before-bg: var(--bronze);
+    }
+
+    // CHILD ELEMENTS
+    &:before {
+        background-color: var(--_ab-before-bg);
+
+        border-radius: 100%;
+        content: "";
+        margin-right: var(--su4);
+        height: var(--su8);
+        width: var(--su8);
+    }
+
+    align-items: center;
+    color: inherit;
+    display: flex;
+}