@stackoverflow/stacks 1.2.0 → 1.3.2

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

@@ -12,13 +12,29 @@
 //  ----------------------------------------------------------------------------
 
 .s-activity-indicator {
+    --_focus-ring: var(--focus-ring);
+    --_bg-color: var(--theme-secondary-400);
+
+    &.s-activity-indicator__success {
+        --_bg-color: var(--green-500);
+        --_focus-ring: var(--focus-ring-success);
+    }
+    &.s-activity-indicator__warning {
+        --_bg-color: var(--yellow-600);
+        --_focus-ring: var(--focus-ring-warning);
+    }
+    &.s-activity-indicator__danger {
+        --_bg-color: var(--red-500);
+        --_focus-ring: var(--focus-ring-error);
+    }
+
     display: inline-block;
     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(--theme-secondary-400);
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
+    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;
@@ -27,18 +43,3 @@
 
     .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/avatars.less

@@ -16,11 +16,52 @@
 //  ----------------------------------------------------------------------------
 
 .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(--su-static16);
-    height: var(--su-static16);
-    border-radius: var(--br-sm);
+    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%;
@@ -29,6 +70,7 @@
     .highcontrast-mode({
         background-color: var(--black);
         box-shadow: 0 0 0 1px var(--black);
+        color: var(--white);
 
         .s-avatar--letter {
             color: var(--white);
@@ -38,7 +80,7 @@
     .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-size: var(--_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;
@@ -54,136 +96,14 @@
         position: absolute;
         right: -4px;
         bottom: -4px;
+        -webkit-transform: scale(var(--_scale-badge));
+        transform: scale(var(--_scale-badge));
     }
 
     .s-avatar--image {
-        width: var(--su-static16);
-        height: var(--su-static16);
-        border-radius: var(--br-sm);
+        width: var(--_size);
+        height: var(--_size);
+        border-radius: var(--_br);
         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));
-        }
-    }
 }

package/lib/css/components/badges.less

@@ -192,6 +192,8 @@
         color: @white;
         background-color: var(--red-500);
         border-color: transparent;
+
+        .highcontrast-mode({ color: var(--white); });
     }
 }
 

package/lib/css/components/breadcrumbs.less

@@ -11,7 +11,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: start;
-    color: var(--black-150);
+    color: var(--black-200);
     font-size: var(--fs-caption);
 
     .s-breadcrumbs--item {
@@ -26,7 +26,7 @@
         margin-right: var(--su4);
         margin-left: var(--su4);
 
-        .highcontrast-mode({ color: var(--black-350); });
+        .highcontrast-mode({ color: var(--fc-light); });
 
         #stacks-internals #screen-sm({
             margin-right: var(--su2);
@@ -35,10 +35,10 @@
     }
 
     .s-breadcrumbs--link {
-        color: var(--black-350);
+        color: var(--fc-light);
 
         &:hover {
-            color: var(--black-600);
+            color: var(--fc-medium);
         }
     }
 }

package/lib/css/components/buttons.less

@@ -74,7 +74,7 @@
         }
 
         &[disabled] {
-            opacity: 0.5;
+            opacity: var(--_o-disabled-static);
             pointer-events: none;
             box-shadow: none !important;
         }
@@ -151,15 +151,13 @@
         }
 
         .s-btn--badge {
-            opacity: 0.5;
+            opacity: var(--_o-disabled);
             display: inline-block;
             border-radius: var(--br-sm);
             padding: var(--su2) calc(var(--su4) - var(--su1));
             font-size: var(--fs-caption);
             line-height: var(--lh-xs);
             background-color: currentColor;
-
-            .highcontrast-mode({ opacity: 0.8; });
         }
 
         .s-btn--number {
@@ -197,7 +195,11 @@
         border-color: var(--theme-button-filled-border-color);
         box-shadow: inset 0 1px 0 0 hsla(0, 0, 100%, 0.7);
 
-        .dark-mode({ box-shadow: none; });
+        .dark-mode({
+            &:not(:focus) {
+                box-shadow: none;
+            }
+        });
 
         &:hover,
         &:focus,
@@ -278,7 +280,11 @@
             border-color: transparent;
             box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
-            .dark-mode({ box-shadow: none; });
+            .dark-mode({
+                &:not(:focus) {
+                    box-shadow: none;
+                }
+            });
 
             .highcontrast-mode({
                 background-color: var(--black-400);
@@ -380,7 +386,11 @@
             border-color: transparent;
             box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
-            .dark-mode({ box-shadow: none; });
+            .dark-mode({
+                &:not(:focus) {
+                    box-shadow: none;
+                }
+            });
 
             .highcontrast-mode({
                 color: var(--white);
@@ -440,15 +450,19 @@
         box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
         .dark-mode({
-            box-shadow: none;
+            &:not(:focus) {
+                box-shadow: none;
+            }
 
             &:not(.is-selected) {
+                background-color: var(--theme-secondary-300);
                 color: var(--black);
             }
         });
         .highcontrast-mode({
             &:not(.is-selected) {
                 border-color: transparent;
+                background-color: var(--theme-secondary-400);
                 color: var(--white);
             }
         });
@@ -560,7 +574,7 @@
     .s-btn__unset:focus {
         padding: 0;
         border: none;
-        outline: none;
+        outline: initial;
         font: unset;
         border-radius: 0;
         color: unset;
@@ -575,7 +589,7 @@
         padding: 0;
         border: none;
         border-radius: 0;
-        outline: none;
+        outline: initial;
         font: inherit;
         background: none;
         box-shadow: none;
@@ -600,6 +614,14 @@
         }
     }
 
+    .s-btn__unset,
+    .s-btn__link {
+        &:focus,
+        &:focus-visible {
+            outline-style: auto;
+        }
+    }
+
     .s-btn__icon {
         //  -- BUTTONS WITH ICONS
         //  ------------------------------------------------------------------------
@@ -616,50 +638,12 @@
     }
 
     //  $$  Loading Icon
-    //      Adds a loading icon into the button
+    //      see spinner.less for full implementation
     //  ----------------------------------------------------------------------------
-    .s-btn {
-        &.is-loading {
-            padding-left: 2.2em;
-
-            &:before {
-                content: "";
-                position: absolute;
-                opacity: 0.3;
-                left: 0.6em;
-                top: calc(50% - 0.6em);
-                width: 1.23076923em;
-                height: 1.23076923em;
-                border-width: 2px;
-                border-style: solid;
-                border-color: currentColor;
-                border-radius: var(--br-circle);
-            }
-
-            &:after {
-                content: "";
-                position: absolute;
-                left: 0.6em;
-                top: calc(50% - 0.6em);
-                width: 1.23076923em;
-                height: 1.23076923em;
-                border-width: 2px;
-                border-style: solid;
-                border-color: transparent;
-                border-left-color: currentColor;
-                border-radius: var(--br-circle);
-                animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
-                // see spinner.less for an explanation of the following two
-                filter: invert(0); // (*)
-                transform-origin: 50% 50% 1px; // (*)
-            }
-
-            .svg-icon:first-child {
-                margin-left: -23px;
-                // If the first thing in the button is an icon, let's hide it on loading
-                // We only want to modify the visibility, since we still want it to have shape and keep the same layout.
-                opacity: 0;
-            }
-        }
+    .s-btn.is-loading  .svg-icon:first-child {
+        margin-left: -23px;
+        // If the first thing in the button is an icon, let's hide it on loading
+        // We only want to modify the visibility, since we still want it to have shape and keep the same layout.
+        opacity: 0;
     }
 }

package/lib/css/components/empty-states.less

@@ -0,0 +1,15 @@
+.s-empty-state {
+    color: var(--fc-light);
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+
+    p {
+        font-size: var(--fs-body1);
+        margin-bottom: var(--su12);
+
+        strong {
+            color: var(--fc-dark);
+        }
+    }
+}