@stackoverflow/stacks 1.7.0 → 1.8.0

package/lib/css/components/labels.less

@@ -23,19 +23,19 @@
     // MODIFIERS
     // Sizes
     &&__sm {
-        --_la-fs: var(--fs-caption);
+        .size-styles(sm; la; @styles: fs);
     }
 
     &&__md {
-        --_la-fs: var(--fs-body3);
+        .size-styles(md; la; @styles: fs);
     }
 
     &&__lg {
-        --_la-fs: var(--fs-title);
+        .size-styles(lg; la; @styles: fs);
     }
 
     &&__xl {
-        --_la-fs: var(--fs-headline1);
+        .size-styles(xl; la; @styles: fs);
     }
 
     // CHILD ELEMENTS

package/lib/css/components/link.less

@@ -13,6 +13,21 @@ a,
 
     // STATES
     &.s-link {
+        &__danger,
+        &__grayscale,
+        &__inherit,
+        &__muted,
+        &__visited {
+            &:visited {
+                &:active,
+                &:hover {
+                    color: var(--_li-fc-hover);
+                }
+
+                color: var(--_li-fc-visited);
+            }
+        }
+
         // MODIFIERS
         &__dropdown {
             &:after {
@@ -68,17 +83,17 @@ a,
         }
     }
 
+    // MODIFIERS
+    fieldset[disabled] & {
+        box-shadow: none !important;
+        opacity: var(--_o-disabled-static);
+        pointer-events: none;
+    }
+
     // INTERACTION
     &:active,
     &:hover {
-        &,
-        &:visited {
-            color: var(--_li-fc-hover);
-        }
-    }
-
-    &:visited {
-        color: var(--_li-fc-visited);
+        color: var(--_li-fc-hover);
     }
 
     color: var(--_li-fc);

package/lib/css/components/post-summary.less

@@ -206,8 +206,12 @@
                 margin: 0 !important;
             }
 
-            padding: var(--su8) !important; // To override .s-btn class attributes
-            position: absolute !important; // To override .s-btn class attributes
+            &,
+            &.s-btn { // To override .s-btn class attributes
+                padding: var(--su8);
+                position: absolute;
+            }
+
             right: var(--su8);
             top: var(--su8);
         }
@@ -295,6 +299,10 @@
 
         &--stats-item {
             &:not(.s-badge) {
+                &.is-deleted {
+                    color: var(--white);
+                }
+
                 align-items: center;
                 border: var(--su1) solid transparent;
                 display: inline-flex;

package/lib/css/components/select.less

@@ -0,0 +1,148 @@
+.s-select {
+    --_se-arrow-bc: currentColor transparent;
+    --_se-arrow-size: var(--su-static4); // Constant
+    --_se-select-bc: var(--bc-darker);
+    --_se-select-bc-focus: var(--theme-secondary-300);
+    --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+    --_se-select-bg: var(--white);
+    --_se-select-br: var(--br-sm);
+    --_se-select-fc: var(--black);
+    --_se-select-px: 0.7em;
+    --_se-select-py: 0.6em;
+    --_se-select-fs: var(--fs-body1);
+
+    // CONTEXTUAL STYLES
+    @supports (-webkit-overflow-scrolling: touch) {
+        --_se-select-fs: 16px; // 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
+    }
+
+    // MODIFIERS
+    .input-states({
+        position: relative;
+    });
+
+    .validation-states(se-select);
+
+    .is-disabled & {
+        --_se-arrow-bc: var(--bc-darker) 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;
+    }
+
+    &&__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;
+    }
+
+    // CHILD ELEMENTS
+    select&,
+    & > select {
+        .webkit-autofill();
+    }
+
+    &:before,
+    &:after { // menu arrows
+        border-color: var(--_se-arrow-bc);
+        border-style: solid;
+        border-width: var(--_se-arrow-size);
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        right: calc(var(--su-static12) + var(--su-static1));
+        z-index: var(--zi-selected);
+    }
+
+    &:after {
+        border-bottom-width: 0;
+        top: calc(50% + var(--su-static1));
+    }
+
+    &:before {
+        border-top-width: 0;
+        top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
+    }
+
+    > select { // Menu
+        // CONTEXTUAL STYLES
+        fieldset[disabled] &,
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: var(--_o-disabled-static);
+        }
+
+        &[readonly],
+        .is-readonly & { // [1]
+            --_se-select-bc: var(--bc-light);
+            --_se-select-bg: var(--black-050);
+            --_se-select-fc: var(--black-200);
+
+            .highcontrast-mode({
+                --_se-select-fc: var(--fc-light);
+            });
+
+            cursor: not-allowed;
+        }
+
+        // CHILD ELEMENTS
+        &::-moz-focus-inner {
+            outline: none !important;
+        }
+
+        // INTERACTION
+        &:focus {
+            .highcontrast-mode({
+                --_se-select-bc-focus: var(--black);
+            });
+
+            border-color: var(--_se-select-bc-focus);
+            box-shadow: var(--_se-select-bs-focus);
+
+            color: var(--black);
+            outline: 0;
+        }
+
+        background-color: var(--_se-select-bg);
+        border: var(--su-static1) solid var(--_se-select-bc);
+        border-radius: var(--_se-select-br);
+        color: var(--_se-select-fc);
+        font-size: var(--_se-select-fs);
+        padding: var(--_se-select-py) var(--_se-select-px);
+
+        appearance: none;
+        font-family: inherit;
+        height: 100%; // Fill the height of its parent
+        line-height: var(--lh-sm);
+        outline: 0;
+        padding-right: var(--su32);
+        position: relative; // This prevents Firefox from requiring a second click to select options
+        width: 100%;
+    }
+
+    .s-input-icon {
+        right: var(--su32);
+    }
+
+    color: var(--fc-dark);
+    position: relative;
+}
+
+// [1] The readonly attribute is not supported on select elements
+//      See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
+//      and https://github.com/StackExchange/Stacks/pull/1040#discussion_r931144086

package/lib/css/components/tags.less

@@ -42,12 +42,12 @@
     // MODIFIERS
     // Sizes
     &&__xs {
-        --_ta-fs: var(--fs-fine);
+        .size-styles(xs; ta; @styles: fs);
         --_ta-lh: 1.4;
         --_ta-px: var(--su2);
     }
     &&__sm {
-        --_ta-fs: var(--fs-caption);
+        .size-styles(sm; ta; @styles: fs);
         --_ta-lh: 1.5;
     }
     &&__md {
@@ -56,7 +56,7 @@
         --_ta-lh: 1.733333333;
     }
     &&__lg {
-        --_ta-br: calc(var(--br-sm) + 1px);
+        --_ta-br: calc(var(--br-sm) + var(--su-static1));
         --_ta-fs: var(--fs-subheading);
         --_ta-lh: 1.684210526;
         --_ta-px: var(--su6);

package/lib/css/components/toggle-switches.less

@@ -5,6 +5,14 @@
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-500);
 
+    fieldset[disabled] & {
+        &,
+        & label {
+            cursor: not-allowed;
+            opacity: var(--_o-disabled-static);
+        }
+    }
+
     &&__multiple { // TODO split single and multiple toggle into two seperate components
         input[type="radio"] {
             &:checked {

package/lib/css/exports/mixins.less

@@ -88,17 +88,6 @@
     }
 }
 
-//  ===========================================================================
-//  --  APPEARANCE
-//      Use this to overwrite the default appearance properties
-//  ---------------------------------------------------------------------------
-.appearance(@all) {
-    -webkit-appearance: @all;
-    -moz-appearance: @all;
-    appearance: @all;
-}
-
-
 //  ===========================================================================
 //  --  FONT FACE
 //      Used to load hosted, custom webfonts. You must provide the font's
@@ -194,6 +183,79 @@
                   @amountDecimal);
 }
 
+//  =============================================================================
+//  --  SIZE STYLES
+//      The following mixins let us generate pseudo-private custom properties
+//      for common sizes. They expect a size (@size), a prefix for the custom
+//      property (@prefix), and an array of comma-separates abbreviated styles
+//      (@styles).
+//  -----------------------------------------------------------------------------
+
+.size-styles(@size, @prefix, @styles, @index: length(@styles)) {
+    & when (@index > 0) {
+        @style: extract(@styles, @index);
+
+              // xs
+        & when (@size = xs) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-fine);
+        }
+
+        // sm
+        & when (@size = sm) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-caption);
+        }
+
+        // md
+        & when (@size = md) and (@style = br) {
+            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+            }
+        & when (@size = md) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-body3);
+        }
+
+        // lg
+        & when (@size = lg) and (@style = br) {
+            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+        }
+        & when (@size = lg) and (@style = fs) {
+                --_@{prefix}-fs: var(--fs-title);
+        }
+
+        // xl
+        & when (@size = xl) and (@style = br) {
+            --_@{prefix}-br: var(--br-md);
+        }
+        & when (@size = xl) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-headline1);
+        }
+
+        .size-styles(@size, @prefix, @styles, @index: @index - 1);
+    }
+}
+
+//  =============================================================================
+//  --  WEBKIT AUTOFILL
+//  -----------------------------------------------------------------------------
+.webkit-autofill() {
+    &:-webkit-autofill {
+        &:focus {
+            border-color: var(--blue-300);
+            // 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-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
+        }
+
+        -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) 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-300);
+        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
+    }
+
+}
+
 //  ===========================================================================
 //  Internals only beyond this point -- helpers for .font-face()
 //  ---------------------------------------------------------------------------

package/lib/css/input-utils.less

@@ -0,0 +1,44 @@
+.input-states(@rules) {
+    .is-disabled &,
+    .is-readonly &,
+    .has-success &,
+    .has-error &,
+    .has-warning & {
+        @rules();
+    }
+};
+
+.validation-states(@prefix, @error: {}, @success: {}, @warning: {}) {
+    .has-error &,
+    .has-success &,
+    .has-warning & {
+        --_@{prefix}-bc-focus: ~"var(--_@{prefix}-bc)";
+    }
+
+    .has-error & {
+        --_@{prefix}-bc: var(--red-400);
+        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
+        @error();
+    }
+
+    .has-success & {
+        --_@{prefix}-bc: var(--green-400);
+        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
+        @success();
+    }
+
+    .has-warning & {
+        --_@{prefix}-bc: var(--yellow-600);
+        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
+        @warning();
+    }
+}
+
+.is-disabled,
+.is-readonly,
+.has-success,
+.has-error,
+.has-warning {
+    position: relative;
+}
+

package/lib/css/stacks-static.less

@@ -1,22 +1,11 @@
-//
-//  STACK OVERFLOW
-//  STATIC STACK ELEMENTS
-//
-//  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/
-//
-//  This is where all the magic happens.
-//
-//  ============================================================================
-//  $   STATIC ELEMENTS
-//      The following items are elements which we DO NOT allow communities
-//      to modify via variables.
-//  ----------------------------------------------------------------------------
+// stacks-static.less contains styles which we DO NOT allow communities to modify via variables
+// BASE
 @import "base/reset.less";
+@import "base/fieldset.less";
 @import "base/icons.less";
+@import "input-utils.less";
 
-//  --  COMPONENTS
+// COMPONENTS
 @import "components/activity-indicator.less";
 @import "components/anchors.less";
 @import "components/award-bling.less";
@@ -28,7 +17,9 @@
 @import "components/breadcrumbs.less";
 @import "components/button-groups.less";
 @import "components/cards.less";
+@import "components/checkboxes-radios.less";
 @import "components/code-blocks.less";
+@import "components/description.less";
 @import "components/expandable.less";
 @import "components/inputs.less";
 @import "components/labels.less";
@@ -44,6 +35,7 @@
 @import "components/post-summary.less";
 @import "components/progress-bars.less";
 @import "components/prose.less";
+@import "components/select.less";
 @import "components/sidebar-widgets.less";
 @import "components/spinner.less";
 @import "components/table.less";
@@ -53,10 +45,10 @@
 @import "components/uploader.less";
 @import "components/user-cards.less";
 
-//  --  LESS CONSTANTS AND MIXINS
+// LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";
 
-//  --  ATOMIC CLASSES
+// ATOMIC CLASSES
 @import "atomic/borders.less";
 @import "atomic/colors.less";
 @import "atomic/flex.less";
@@ -78,20 +70,18 @@
     #stacks-internals-collect-small();
 });
 
-// We need printing styles to be last so they can override all other styles.
-.print\:d-block {
-    @media print {
+@media print { // We need printing styles to be last so they can override all other styles.
+    .print\:d-block & {
         display: block !important;
     }
-}
-
-.print\:d-none {
-    @media print {
+    .print\:d-none & {
         display: none !important;
     }
 }
 /* stylelint-enable */
 
-//  --  CONFIG
+// CONFIG
 @import "base/configuration-static.less";
 @import "base/internals.less";
+
+// [1] The following items are elements which we DO NOT allow communities to modify via variables.

package/lib/test/s-avatar.a11y.test.ts

@@ -0,0 +1,77 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import "../ts/index";
+
+// TODO abstract to a helper file… maybe create a helper function to test in all themes
+const colorThemes = ["theme-dark", "theme-light"];
+const baseThemes = ["", "theme-highcontrast"];
+
+const avatarStyles = {
+    sizes: ["24", "32", "48", "64", "96", "128"],
+    children: ["image", "letter"],
+};
+
+const makeTest = ({ testid, theme, classes, child = "" }) => {
+    it(`a11y: ${testid} should be accessible`, async () => {
+        await fixture(html`<a
+            href="#"
+            class="s-avatar${classes}"
+            data-testid="${testid}"
+        >
+            <div
+                class="${child === "letter" ? "s-avatar--letter" : "d-none"}"
+                aria-hidden="true"
+            >
+                S
+            </div>
+            <img
+                class="${child === "image" ? "s-avatar--image" : "d-none"}"
+                src="https://picsum.photos/48"
+                alt="team logo"
+            />
+            <span class="v-visible-sr">Stack Overflow</span>
+        </a>`);
+
+        document.body.className = "";
+        document.body.classList.add(...theme);
+        const avatar = screen.getByTestId(testid);
+        // TODO add conditional option for high contrast mode to test against AAA
+        await expect(avatar).to.be.accessible();
+    });
+};
+
+// TODO move to test utils
+const buildTestid = (arr) => arr.filter(Boolean).join("-");
+
+describe("s-avatar", () => {
+    // Test default, high contrast themes
+    baseThemes.forEach((baseTheme) => {
+        // Test light, dark theme
+        colorThemes.forEach((colorTheme) => {
+            const theme = [baseTheme, colorTheme].filter(Boolean);
+            const testidBase = buildTestid(["s-avatar", ...theme]);
+
+            // Test each size
+            ["", ...avatarStyles.sizes].forEach((size) => {
+                const sizeClasses = size ? ` s-avatar__${size}` : "";
+                const classesSize = ` ${sizeClasses}`;
+                const testidSize = buildTestid([testidBase, size]);
+
+                // Test each size with each child
+                ["", ...avatarStyles.children].forEach((child) => {
+                    const testidChildren = buildTestid([
+                        testidSize,
+                        `with-${child}`,
+                    ]);
+
+                    makeTest({
+                        child,
+                        classes: classesSize,
+                        testid: testidChildren,
+                        theme,
+                    });
+                });
+            });
+        });
+    });
+});