@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

package/lib/components/prose/prose.less

@@ -4,7 +4,7 @@
     @pr-spacing-condensed: calc(@pr-spacing / 2); // Reduce the base spacing by half in the context of lists, etc.
     @pr-spoiler-transition: opacity 0.1s ease-in-out;
     // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_pr-fs: calc(var(--su-static16) - var(--su-static1)); // Force a font size that doesn’t change at the smallest breakpoint;
+    --_pr-fs: unset;
     --_pr-lh: 1.5;
     --_pr-blockquote-ml: 1em;
     --_pr-blockquote-mt: 0;
@@ -19,7 +19,7 @@
     --_pr-hr-bg: var(--black-225); // used for both background-color and color properties
     --_pr-img-mb: @pr-spacing;
     --_pr-kbd-bc: var(--black-300);
-    --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
+    --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
     --_pr-spoiler-cursor: pointer;
     --_pr-spoiler-after-t: 1em;
     --_pr-soiler-after-o: unset;
@@ -33,7 +33,7 @@
     .dark-mode({
         --_pr-kbd-bc: transparent;
         --_pr-kbd-btc: var(--black-400);
-        --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.8);
+        --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.8);
     });
 
     .highcontrast-mode({
@@ -46,29 +46,15 @@
     });
 
     // MODIFIERS
-    &&__xs,
-    &&__sm,
-    &&__md {
-        --_pr-h1-fs: var(--fs-headline1-relative);
-        --_pr-h2-fs: var(--fs-title-relative);
-        --_pr-h3-fs: var(--fs-subheading-relative);
-        --_pr-h4-fs: var(--fs-body3-relative);
-        --_pr-h5-fs: var(--fs-body2-relative);
-    }
-
-    &&__xs {
-        --_pr-fs: var(--fs-caption);
-        --_pr-lh: var(--lh-sm);
-    }
-
     &&__sm {
-        --_pr-fs: var(--fs-body1);
+        --_pr-h1-fs: 1.75em;
+        --_pr-h2-fs: 1.375em;
+        --_pr-h3-fs: 1.25em;
+        --_pr-h4-fs: 1.125em;
+        --_pr-h5-fs: 1em;
+        --_pr-fs: var(--fs-caption);
         --_pr-lh: var(--lh-md);
-    }
-
-    &&__md {
-        --_pr-fs: var(--fs-body3);
-        --_pr-lh: var(--lh-xl);
+        --_pr-code-fs: var(--fs-caption);
     }
 
     // CHILD ELEMENTS
@@ -77,11 +63,13 @@
             color: var(--theme-link-color, var(--theme-secondary-400)); // When contained within a link, we want the code to be link-colored
         }
 
+        // Code blocks use ems to maintain sizes relative to the surrounding text
         > code {
-            padding: var(--su2) var(--su4);
-            color: var(--black-600);
             background-color: var(--black-200);
-            border-radius: var(--br-md);
+            color: var(--black-600);
+            // TODO verify this font size is appropriate with a Windows font stack
+            font-size: .875em;
+            padding: 0.1875em 0.375em;
         }
     }
 
@@ -178,6 +166,28 @@
     }
 
     // Others child elements
+    // Base anchor styles match .s-link; use theme/fallback directly for color so hover/visited apply
+    // (see lib/components/link/link.less)
+    a:not([class]) {
+        &:active,
+        &:hover {
+            color: var(--theme-link-color-hover, var(--blue-400));
+            text-decoration: underline !important;
+        }
+        &:visited {
+            color: var(--theme-link-color-visited, var(--black-400));
+        }
+
+        &:hover:visited {
+            color: var(--theme-link-color-hover, var(--blue-400));
+            text-decoration: underline !important;
+        }
+
+        color: var(--theme-link-color, var(--black-600));
+        cursor: pointer;
+        user-select: auto;
+    }
+
     blockquote,
     q {
         quotes: none;
@@ -232,7 +242,7 @@
             margin-bottom: calc(@pr-spacing-condensed + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment
         }
 
-        margin-bottom:@pr-spacing;
+        margin-bottom: @pr-spacing;
         margin-top: 0;
     }
 
@@ -247,7 +257,7 @@
         &:before {
             background: var(--_pr-blockquote-before-bg);
 
-            border-radius: var(--su-static8);
+            border-radius: var(--su8);
             bottom: 0;
             content: "";
             display: block;
@@ -299,7 +309,7 @@
         color: var(--_pr-hr-bg); // value set for background-color reused for color intentionally
 
         border: 0;
-        height: var(--su-static1);
+        height: var(--su1);
         margin-bottom: @pr-spacing;
     }
 
@@ -311,7 +321,7 @@
     }
 
     kbd {
-        border: var(--su-static1) solid var(--_pr-kbd-bc);
+        border: var(--su1) solid var(--_pr-kbd-bc);
         border-top-color: var(--_pr-kbd-btc, var(--_pr-kbd-bc));
         box-shadow: var(--_pr-kbd-bs);
 
@@ -325,7 +335,7 @@
         margin: 0 0.1em;
         overflow-wrap: break-word;
         padding: 0.1em 0.6em;
-        text-shadow: 0 var(--su-static1) 0 var(--white);
+        text-shadow: 0 var(--su1) 0 var(--white);
     }
 
     li {
@@ -342,6 +352,10 @@
     p {
         --_pr-img-mb: 0;
 
+        a:not([class]) {
+            text-decoration: underline;
+        }
+
         margin-bottom: @pr-spacing;
     }
 
@@ -403,7 +417,7 @@
 
         > * {
             opacity: var(--_pr-soiler-child-o);
-            transition: @pr-spoiler-transition;
+            transition: var(--_pr-spoiler-transition);
             visibility: var(--_pr-soiler-child-visibility); // hidden elements don't respond to mouse events, but still retain their space
         }
 
@@ -412,7 +426,7 @@
         background: var(--black-150);
         border-radius: var(--br-md);
         color: var(--black-600);
-        min-height: var(--su-static48); // TODO: Let's find a solution that doesn't have a magic number
+        min-height: var(--su48); // TODO: Let's find a solution that doesn't have a magic number
     }
 
     .youtube-embed { // [2]
@@ -434,7 +448,7 @@
         width: 100%;
     }
 
-    font-size: var(--_pr-fs); // Force a font size that doesn’t change at the smallest breakpoint
+    font-size: var(--_pr-fs);
     line-height: var(--_pr-lh);
 
     overflow-wrap: break-word;

package/lib/components/select/select.less

@@ -1,17 +1,17 @@
 .s-select {
-    --_se-arrow-bc: currentColor transparent;
-    --_se-arrow-size: var(--su-static4); // Constant
+    --_se-arrow-fc: currentColor;
     --_se-select-bc: var(--bc-darker);
     --_se-select-bg: var(--white);
     --_se-select-br: var(--br-md);
     --_se-select-fc: var(--black);
     --_se-select-px: 0.7em;
-    --_se-select-py: 0.6em;
+    --_se-select-py: var(--su8);
     --_se-select-fs: var(--fs-body1);
+    --_se-select-lh: var(--lh-base);
 
     // CONTEXTUAL STYLES
     @supports (-webkit-overflow-scrolling: touch) {
-        --_se-select-fs: var(--su-static16); // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
+        --_se-select-fs: var(--su16); // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
         --_se-select-px: 0.55em; // Compensate for the larger font size so we generally keep the input the same size
         --_se-select-py: 0.4em; // Compensate for the larger font size so we generally keep the input the same size
     }
@@ -23,58 +23,62 @@
 
     .validation-states(se-select);
 
-    .is-disabled & {
-        --_se-arrow-bc: var(--bc-dark) transparent;
-    }
-
     &&__sm {
-        .size-styles(sm; se-select; @styles: fs);
-        // --_se-select-fs: var(--fs-caption);
-    }
-
-    &&__md {
-        .size-styles(md; se-select; @styles: br, fs);
-        --_se-select-py: 0.5em;
+        --_se-select-fs: var(--fs-caption);
+        --_se-select-lh: var(--lh-sm);
+        --_se-select-py: calc(var(--su6) - var(--su1) / 2);
     }
 
     &&__lg {
-        .size-styles(lg; se-select; @styles: br, fs);
-        --_se-select-px: 0.6em;
-        --_se-select-py: 0.45em;
-    }
-
-    &&__xl {
-        .size-styles(xl; se-select; @styles: br, fs);
-        --_se-select-px: 0.5em;
-        --_se-select-py: 0.4em;
+        --_se-select-fs: var(--fs-body3);
+        --_se-select-lh: var(--lh-lg);
     }
 
     // CHILD ELEMENTS
     select&,
     & > select {
-        .webkit-autofill();
+        // TODO: Investigate if this is still needed.
+        &:-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(--su4) 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
+        }
     }
 
-    &:before,
-    &:after { // menu arrows
-        border-color: var(--_se-arrow-bc);
-        border-style: solid;
-        border-width: var(--_se-arrow-size);
+    &:after { // Chevron16UpDown icon
+        background-color: currentColor;
         content: "";
+        height: var(--su16);
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13.06 10 8 15.06 2.94 10 4 8.94l.53.53L8 12.94l3.47-3.47.53-.53zm0-4L12 7.06l-.53-.53L8 3.06 4.53 6.53 4 7.06 2.94 6 8 .94z'/%3E%3C/svg%3E");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
         pointer-events: none;
         position: absolute;
-        right: calc(var(--su-static12) + var(--su-static1));
+        right: calc(var(--su32) - var(--su24));
+        top: 50%;
+        transform: translateY(-50%);
+        width: var(--su16);
         z-index: var(--zi-selected);
     }
 
-    &:after {
-        border-bottom-width: 0;
-        top: calc(50% + var(--su-static1));
-    }
+    .is-disabled & {
+        --_se-arrow-fc: var(--bc-dark);
 
-    &:before {
-        border-top-width: 0;
-        top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
+        &:after {
+            background-color: var(--_se-arrow-fc);
+        }
     }
 
     > select { // Menu
@@ -82,7 +86,8 @@
         fieldset[disabled] &,
         &[disabled] {
             cursor: not-allowed;
-            opacity: var(--_o-disabled-static);
+            --_se-select-fc: var(--black-300);
+            --_se-select-bg: var(--black-100);
         }
 
         &[readonly],
@@ -109,7 +114,7 @@
         }
 
         background-color: var(--_se-select-bg);
-        border: var(--su-static1) solid var(--_se-select-bc);
+        border: var(--su1) solid var(--_se-select-bc);
         border-radius: var(--_se-select-br);
         color: var(--_se-select-fc);
         font-size: var(--_se-select-fs);
@@ -118,7 +123,7 @@
         appearance: none;
         font-family: inherit;
         height: 100%; // Fill the height of its parent
-        line-height: var(--lh-sm);
+        line-height: var(--_se-select-lh);
         outline: 0;
         padding-right: var(--su32);
         position: relative; // This prevents Firefox from requiring a second click to select options

package/lib/components/sidebar-widget/sidebar-widget.less

@@ -1,218 +1,48 @@
-.s-sidebarwidget {
-    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_sw-bc: var(--bc-medium);
-
-    // MODIFIERS
-    &:not(.s-anchors) {
-        a:not(.button):not(.s-tag):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
-            &,
-            &:visited {
-                color: var(--black-600);
-            }
-        }
-    }
-
-    // VARIANTS
-    .alternate-color(blue);
-    .alternate-color(yellow);
-    .alternate-color(green);
+@headings: h1, h2, h3, h4, h5, h6;
 
+.s-sidebarwidget {
     // CHILD ELEMENTS
-    & &--action {
-        color: var(--blue-400);
-        font-size: var(--fs-body1);
-        font-weight: normal;
-        margin-left: auto;
-    }
-
-    & &--content {
-        &:not(table) {
-            &:not(.s-sidebarwidget__items),
-            &:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
-                display: flex;
-            }
-        }
-
-        + .s-sidebarwidget--content {
-            border-top: var(--su-static1) solid var(--bc-light);
-        }
-
-        &.s-sidebarwidget__items {
-            &,
-            &.s-sidebarwidget__block-items .s-sidebarwidget--item {
-                display: block;
-            }
-
-            padding: var(--su6) var(--su16); // the items themselves provide part of the spacing, so the content padding needs to account for that
+    & &--content {        
+        .s-sidebarwidget--action {
+            font-size: var(--fs-fine);
+            margin-left: var(--su16);
+            align-self: flex-start;
         }
 
-        &:active {
-            outline: none;
-        }
-        
-
-        margin: 0;
-        padding: var(--su16);
+        display: flex;
+        padding: var(--su12) 0 var(--su16) 0;
+        font-size: var(--fs-body2);
     }
 
     & &--header {
-        &:first-child {
-            border-top: none;
-        }
-
-        + .s-expandable:not(.is-expanded) {
-            margin-bottom: var(--su16);
-        }
-
-        &.s-sidebarwidget {
-            &__expanding-control {
-                &:before {
-                    border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-                    border-left-color: var(--black-400);
-                    border-right-width: 0;
-                    content: '';
-                    float: left;
-                    margin-right: var(--su12);
-                    margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px); // 1.3 is our standard line height
-                    transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
-                }
-
-                &[aria-expanded='true']:before {
-                    transform: rotate(90deg);
-                }
-
-                cursor: pointer;
-            }
-
-            &__small-bold-text {
-                .s-sidebarwidget--action {
-                    font-weight: normal;
-                    line-height: calc(var(--lh-base) * var(--fs-caption)); // line-height should be the same as in the outside element, so the header and action baselines line up
-                }
-
-                font-size: var(--fs-caption);
-                font-weight: bold;
-            }
+        > @{headings} {
+            margin: 0;
+            padding-right: var(--su6);
+            font-size: var(--fs-body1);
+            font-weight: 500;
         }
 
-        &:active {
-            outline: none;
+        .s-sidebarwidget--action {
+            margin-left: auto;
         }
 
         align-items: center;
-        border-top: var(--su-static1) solid var(--bc-light);
-        color: var(--black-600);
         display: flex;
-        font-size: var(--fs-body2);
-        font-weight: bold;
-        justify-content: flex-start;
-        line-height: var(--lh-xs);
-        margin: 0;
-        padding: var(--su16) var(--su16) 0;
+        padding: var(--su4) 0;
     }
 
-    & &--item {
-        &,
-        & > :first-child {
-            &[aria-current="true"],
-            &[aria-current="page"] {
-                &:before {
-                    border-left-color: var(--theme-primary);
-                    border-left-style: solid;
-                    border-left-width: calc(var(--su-static1) * 3); // 3px
-                    content: '';
-                    height: calc(100% + var(--su16));
-                    left: 0;
-                    margin-left: calc(var(--su16) * -1 - var(--su-static1)); // the orange selection indicator overlaps with the widget border
-                    margin-top: calc(var(--su16) / 2 * -1);
-                    position: absolute;
-                }
-
-                a { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
-                    &,
-                    &:visited {
-                        color: inherit;
-                    }
-                }
-
-                color: var(--black);
-                font-weight: bold;
-                position: relative;
-            }
+    & &--footer {
+        .s-sidebarwidget--action {
+            flex: 1;
         }
-
-        margin: var(--su12) 0;
-    }
-
-    & &--subnav {
-        li {
-            &[aria-current="page"],
-            &[aria-current="true"] {
-                a {
-                    &,
-                    &:visited {
-                        color: inherit;
-                    }
-                }
-
-                #stacks-internals #bullet-arrow(var(--theme-primary));
-                color: var(--black);
-                font-weight: bold;
-            }
-
-            #stacks-internals #bullet-arrow(var(--black-225));
-            background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2); // 0 ((1.2em - 10) / 2)
-            background-repeat: no-repeat;
-            background-size: auto calc(var(--su-static8) + var(--su-static2)); // auto 10px
-            margin-top: var(--su-static12);
-            padding-left: var(--su-static16);
-        }
-
-        list-style-type: none;
-        margin-left: var(--su8);
-        padding-left: 0;
+        
+        display: flex;
+        font-size: var(--fs-body2);
     }
 
-    & table&--content&__items {
-        tr.s-sidebarwidget--item {
-            td {
-                padding: 0;
-            }
-
-            display: table-row;
-        }
-
-        border-collapse: separate;
-        border-spacing: var(--su16) var(--su12);
-        padding: var(--su6) 0 0;
+    & &--action:is(a, button) {
+        white-space: nowrap;
     }
 
-    background-color: var(--white);
-    border: var(--su-static1) solid var(--_sw-bc);
-    border-radius: var(--br-md);
     font-size: var(--fs-body1);
-}
-
-// COLOR ALTERNATIVES
-.alternate-color(@name) {
-    &.s-sidebarwidget__@{name} {
-        --_sw-bc: var(~"--@{name}-300");
-
-        .highcontrast-mode({
-            --_sw-bc: var(~"--@{name}-500");
-        });
-
-        &:after,
-        .s-sidebarwidget--content + .s-sidebarwidget--content,
-        .s-sidebarwidget--header {
-            border-color: var(--_sw-bc);
-        }
-
-        .s-sidebarwidget--header {
-            color: var(--fc-medium);
-        }
-
-        background-color: var(~"--@{name}-100");
-        border-color: var(--_sw-bc);
-    }
 }