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

package/lib/exports/color-sets.less

@@ -591,6 +591,27 @@
     default: var(--black);
 }
 
+// brand colors
+.set-brand() {
+    default: #FF5E00;
+    black: #201C1D;
+    off-white: #F0EFEE;
+    blue-light: #C6D1E1;
+    blue: #5074EF;
+    blue-dark: #00165E;
+    brown-light: #998B7A;
+    green: #86AF25;
+    green-dark: #263603;
+    orange-medium: #6E1527;
+    orange-dark: #31070F;
+    pink: #F39FFF;
+    pink-dark: #4D1955;
+    purple: #9D9CFF;
+    purple-dark: #390A91;
+    yellow: #FFCC00;
+    yellow-dark: #423101;
+}
+
 // Color sets
 .sets-mode() {
     light: .sets-light();
@@ -612,6 +633,7 @@
     gold: .set-gold();
     silver: .set-silver();
     bronze: .set-bronze();
+    brand: .set-brand();
 }
 
 .sets-dark() {
@@ -682,6 +704,7 @@
     focus-ring: .set-focus-ring();
     highlight: .set-highlight();
     scrollbar: .set-scrollbar();
+    brand: .set-brand();
 }
 
 .sets-utility-dark() {
@@ -692,6 +715,7 @@
     focus-ring: .set-focus-ring-dark();
     highlight: .set-highlight-dark();
     scrollbar: .set-scrollbar-dark();
+    brand: .set-brand();
 }
 
 .sets-utility-hc() {
@@ -702,6 +726,7 @@
     focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc();
     scrollbar: .set-scrollbar-hc();
+    brand: .set-brand();
 }
 
 .sets-utility-dark-hc() {
@@ -712,6 +737,7 @@
     focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc-dark();
     scrollbar: .set-scrollbar-hc-dark();
+    brand: .set-brand();
 }
 
 // Theme values

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@stackoverflow/stacks",
     "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-    "version": "3.0.0-beta.29",
+    "version": "3.0.0-beta.30",
     "files": [
         "dist",
         "lib",

package/dist/components/expandable/expandable.d.ts

@@ -1,17 +0,0 @@
-import * as Stacks from "../../stacks";
-export declare class ExpandableController extends Stacks.StacksController {
-    private isCollapsed;
-    private events;
-    private isCheckable;
-    private isRadio;
-    private lastKeydownClickTimestamp;
-    initialize(): void;
-    _isCollapsedForClickable(): boolean;
-    _isCollapsedForCheckable(): boolean;
-    get controlledExpandables(): HTMLElement[];
-    _dispatchShowHideEvent(isShow: boolean): void;
-    _toggleClass(doAdd: boolean): void;
-    listener(e: Event): void;
-    connect(): void;
-    disconnect(): void;
-}

package/dist/components/uploader/uploader.d.ts

@@ -1,48 +0,0 @@
-import * as Stacks from "../../stacks";
-export declare class UploaderController extends Stacks.StacksController {
-    static targets: string[];
-    readonly inputTarget: HTMLInputElement;
-    readonly previewsTarget: HTMLElement;
-    readonly uploaderTarget: HTMLElement;
-    private boundDragEnter;
-    private boundDragLeave;
-    private static readonly FILE_DISPLAY_LIMIT;
-    private static readonly MAX_FILE_SIZE;
-    connect(): void;
-    disconnect(): void;
-    /**
-     * Handles rendering the file preview state on input change
-     */
-    handleInput(): void;
-    /**
-     * Resets the Uploader to initial state
-     */
-    reset(): void;
-    /**
-     * Set hide/show and disabled state on elements depending on preview state
-     * @param  {boolean} shouldPreview - Uploader is entering a preview state
-     */
-    private handleVisible;
-    /**
-     * Adds a DOM element to preview a selected file
-     * @param  {FilePreview} file
-     */
-    private addFilePreview;
-    /**
-     * Toggles display and disabled state for select elements on valid input
-     * @param  {boolean} active - Uploader is in active state (typically on 'dragenter')
-     */
-    private handleUploaderActive;
-    /**
-     * Converts the file data into a data URL
-     * @param  {File} file
-     * @returns an object containing a FilePreview object
-     */
-    private fileToDataURL;
-    /**
-     * Gets an array of FilePreviews from a FileList
-     * @param  {FileList|[]} files
-     * @returns an array of FilePreview objects from a FileList
-     */
-    private getDataURLs;
-}

package/lib/components/breadcrumbs/breadcrumbs.less

@@ -1,41 +0,0 @@
-.s-breadcrumbs {
-    --_br-divider-px: var(--su4);
-    --_br-link-fc: var(--fc-light);
-
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        --_br-divider-px: var(--su2);
-    });
-
-    // CHILD ELEMENTS
-    & &--divider {
-        .highcontrast-mode({
-            color: var(--fc-light);
-        });
-
-        margin-left: var(--_br-divider-px);
-        margin-right: var(--_br-divider-px);
-    }
-
-    & &--item {
-        align-items: center;
-        display: flex;
-        flex-wrap: nowrap;
-        margin-bottom: var(--su2);
-        margin-top: var(--su2);
-    }
-
-    & &--link {
-        color: var(--_br-link-fc);
-
-        &:hover {
-            --_br-link-fc: var(--fc-medium);
-        }
-    }
-
-    align-items: flex-start;
-    color: var(--black-300);
-    display: flex;
-    flex-wrap: wrap;
-    font-size: var(--fs-caption);
-}

package/lib/components/button-group/button-group.less

@@ -1,82 +0,0 @@
-.s-btn-group {
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        .s-btn {
-            --_bu-px: 0.4em;
-
-            &.s-btn__dropdown {
-                padding-right: 1.2em;
-
-                &:after {
-                    right: var(--_bu-px);
-                }
-            }
-        }
-    }, @force-selector: true);
-
-    // CHILD ELEMENTS
-    form {
-        display: flex;
-        margin-right: var(--sun1);
-    }
-
-    //  --_bu-py values set below to ensure btn-group height matches same-sized button height
-    // See https://github.com/StackEng/StackOverflow/pull/18992#pullrequestreview-1947490680
-    .s-btn {
-        --_bu-br: var(--br-md);
-        --_bu-bc-hover: transparent;
-        --_bu-px: calc(var(--su12) - var(--su1)); // 11px
-        --_bu-py: calc(var(--su6) + 0.65px); // 6.65px
-
-        &.s-btn__xs {
-            --_bu-px: calc(var(--su8) - var(--su1)); // 7px
-            --_bu-py: calc(var(--su2) + 0.9px); // 2.9px
-        }
-
-        &.s-btn__sm {
-            --_bu-px: calc(var(--su8) + var(--su1)); // 9px
-            --_bu-py: calc(var(--su4) + (var(--su2) - 0.15px)); // 5.85px
-        }
-
-        &.s-btn__md {
-            --_bu-px: var(--su12);
-            --_bu-py: calc(var(--su8) + 0.15px); // 8.15px
-        }
-
-        &.is-selected,
-        &--radio:checked + .s-btn {
-            font-weight: bold;
-        }
-
-        .s-btn--badge {
-            // set negative margins so button height isn't affect by badge
-            margin-bottom: -100%;
-            margin-top: -100%;
-            font-weight: normal;
-        }
-
-        & .s-btn--text {
-            &:before {
-                content: attr(data-text);
-                font-weight: bold;
-                height: 0;
-                pointer-events: none;
-                user-select: none;
-                visibility: hidden;
-            }
-
-            display: inline-flex;
-            flex-direction: column;
-        }
-
-        font-weight: 400;
-        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
-    }
-
-    // STATIC COMPONENT STYLES
-    border: var(--su1) solid var(--black-300);
-    border-radius: var(--br-md);
-    display: inline-flex;
-    flex-wrap: wrap;
-    padding: var(--su3);
-}

package/lib/components/card/card.less

@@ -1,37 +0,0 @@
-.s-card {
-    --_ca-bc: var(--bc-medium);
-
-    // CONTEXTUAL STYLES
-    a& {
-        text-decoration: none !important;
-    }
-
-    // VARIANTS
-    &&__muted {
-        --_ca-bc: var(--bc-light);
-
-        //  Dim only the first child card content
-        > * {
-            opacity: 0.65;
-
-            .dark-mode({
-                opacity: 0.7;
-            });
-
-            .highcontrast-mode({
-                opacity: 0.75;
-            });
-        }
-    }
-
-    // CHILD ELEMENTS
-    > :last-child {
-        margin-bottom: 0;
-    }
-
-    border: var(--su1) solid var(--_ca-bc);
-
-    background-color: var(--white);
-    border-radius: var(--br-md);
-    padding: var(--su12);
-}

package/lib/components/expandable/expandable.less

@@ -1,119 +0,0 @@
-.s-expandable { // [1]
-    // COMPONENT-SPECIFIC CONSTANTS
-    @ex-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-    @ex-min-expected-height: 10px;
-    @ex-transition-duration: 100ms;
-    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_ex-after-h: 10px;
-    --_ex-after-hmx: 0;
-    --_ex-after-transition:
-        height @ex-transition-duration linear,
-        max-height 0s @ex-transition-duration linear;
-    --_ex-content-hmx: 1000000px;
-    --_ex-content-mb: 0;
-    --_ex-content-o: unset;
-    --_ex-content-transform: unset;
-    --_ex-content-transition:
-        margin-bottom @ex-transition-duration cubic-bezier(0, 0, 0, 1),
-        transform @ex-transition-duration cubic-bezier(1, 0, 1, 1),
-        opacity @ex-transition-duration cubic-bezier(1, 0, 1, 1);
-    --_ex-content-v: unset;
-
-    &:not(.is-expanded) {
-        --_ex-after-h: 0;
-        --_ex-after-hmx: @ex-min-expected-height;
-        --_ex-after-transition: height @ex-min-expected-height linear;
-        --_ex-content-hmx: 0;
-        --_ex-content-mb: -1500px;
-        --_ex-content-o: 0;
-        --_ex-content-transform: scaleY(0);
-        --_ex-content-transition:
-            margin-bottom @ex-transition-duration cubic-bezier(1, 0, 1, 1),
-            visibility 0s @ex-transition-duration,
-            max-height 0s @ex-transition-duration,
-            transform @ex-transition-duration cubic-bezier(0, 1, 1, 1),
-            opacity @ex-transition-duration cubic-bezier(0, 1, 1, 1);
-        --_ex-content-v: hidden;
-
-        & .s-expandable--content {
-            @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
-                --_ex-content-o: 0;
-                --_ex-content-transform: none;
-            }
-        }
-
-        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-        overflow: hidden;
-        transition: none;
-    }
-
-    &:after {
-        height: var(--_ex-after-h);
-        max-height: var(--_ex-after-hmx);
-        transition: var(--_ex-after-transition);
-
-        -ms-flex-preferred-size: 0;
-        content: '';
-        flex-basis: 0;
-    }
-
-    & &--content {
-        max-height: var(--_ex-content-hmx);
-        margin-bottom: var(--_ex-content-mb);
-        opacity: var(--_ex-content-o);
-        -webkit-transform: var(--_ex-content-transform);
-        transform: var(--_ex-content-transform);
-        visibility: var(--_ex-content-v);
-
-        -ms-flex-preferred-size: 100%;
-        flex-basis: 100%;
-        -webkit-transform-origin: 0 0;
-        transform-origin: 0 0;
-        transition: var(--_ex-content-transition);
-    }
-
-    align-items: flex-start; // see comment above
-    display: flex;
-    -webkit-clip-path: @ex-clip-path;
-    clip-path: @ex-clip-path;
-    transition: clip-path 0s var(--_ex-transition-duration), -webkit-clip-path 0s var(--_ex-transition-duration);
-}
-
-// [1] see http://stackoverflow.com/a/43965099 for how this works:
-
-// Notes on the clip-path stuff: What we would really like is overflow: hidden during the transition,
-// but not when the element is expanded. Unfortunately, although the CSS spec provides for it, there's
-// no browser support yet for transitioning non-interpolatable properties, and therefore we cannot say
-// "change overflow to visible *after* the transition".
-//
-// So we use clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%), which is essentially the same
-// as overflow: hidden, but unlike overflow, clip-path is interpolatable -- but only if the opposite state
-// is also a polygon, and has the same vertice count. So our version of overflow: visible is a rectangle
-// of 2x2 million pixels, which should be enough for everybody (TM).
-//
-// At the time of writing, clip-path works in Chrome, Firefox Beta, and Safari (with vendor prefix).
-//
-// In browsers that do not support this yet, we have to have another way to prevent the expandable content
-// from being visible below the bottom edge during the transition, and the best I could come up with is
-// transitioning to scaleY(0) with a timing function that's faster than the height-reducing transitions.
-// This does kinda look like a deliberate effect, even more so if we also transition to transparency
-// (which we therefore do), so I feel it's an okay fallback.
-//
-// We still set overflow to hidden in the collapsed state (which also applies to the collapsing transition),
-// we just can't do that for the expanding transition.
-//
-// A major drawback of clip-path is that even though the content is clipped (not visible), it will still
-// contribute to the document height. This caused a jumping around of the scrollbar (and possibly even
-// of the viewport) when the expandable was at the bottom of the page, because once the negative bottom
-// margin of the -expandable-group exceeds the actual height, any additional pixels were added on to the
-// bottom. The fix is to set the -expandable-group's flex alignment to flex-start, which forces the
-// (no longer visible) element itself to remain at the top, thereby forcing the excess pixels to be added
-// above the top, not below the bottom. And because extending content above the document top will not do
-// anything to the document height, there is no jumping during the transition.
-// see "@ex-transition-duration"
-
-// Per the answer referenced above, the component can only guarantee smooth transitions if above a minimum
-// height and can only guarantee the element will be hidden is below a maximimum height.
-// The minimum height has been set at 10px because that's below the height of a single line of text in an s-description.
-// see "@ex-min-expected-height" and "--_ex-content-mb"

package/lib/components/expandable/expandable.ts

@@ -1,238 +0,0 @@
-import * as Stacks from "../../stacks";
-
-// Radio buttons only trigger a change event when they're *checked*, but not when
-// they're *unchecked*. Therefore, if we have an active `s-expandable-control` in
-// the document, we listen for change events on *all* radio buttons and find any
-// other radio buttons in the same `name` group, triggering a custom event on all
-// of them so the controller can re-evaluate.
-//
-// We're keeping a count of how many of these controllers are connected to the DOM,
-// so only have this global listener when we actually need it.
-const RADIO_OFF_EVENT = "s-expandable-control:radio-off";
-
-function globalChangeListener(e: UIEvent) {
-    const target = e.target;
-    if (
-        !(target instanceof HTMLInputElement) ||
-        target.nodeName !== "INPUT" ||
-        target.type !== "radio"
-    ) {
-        return;
-    }
-    document
-        .querySelectorAll('input[type="radio"][name="' + target.name + '"]')
-        .forEach(function (other) {
-            if (other === e.target) {
-                return;
-            }
-            let customEvent;
-            try {
-                customEvent = new Event(RADIO_OFF_EVENT);
-            } catch {
-                // Internet Explorer
-                customEvent = document.createEvent("Event");
-                customEvent.initEvent(RADIO_OFF_EVENT, true, true);
-            }
-            other.dispatchEvent(customEvent);
-        });
-}
-
-let refCount = 0;
-function globalChangeListenerRequired(required: boolean) {
-    if (required) {
-        refCount++;
-        if (refCount === 1) {
-            document.body.addEventListener(
-                "change",
-                globalChangeListener as EventListener
-            );
-        }
-    } else {
-        refCount--;
-        if (refCount === 0) {
-            document.body.removeEventListener(
-                "change",
-                globalChangeListener as EventListener
-            );
-        }
-    }
-}
-
-export class ExpandableController extends Stacks.StacksController {
-    private isCollapsed!: () => boolean;
-    private events!: string[];
-    private isCheckable!: boolean;
-    private isRadio!: boolean;
-    private lastKeydownClickTimestamp = 0;
-
-    initialize() {
-        if (
-            this.element.nodeName === "INPUT" &&
-            ["radio", "checkbox"].indexOf(
-                (<HTMLInputElement>this.element).type
-            ) >= 0
-        ) {
-            this.isCollapsed = this._isCollapsedForCheckable.bind(this);
-            this.events = ["change", RADIO_OFF_EVENT];
-            this.isCheckable = true;
-            this.isRadio = (<HTMLInputElement>this.element).type === "radio";
-        } else {
-            this.isCollapsed = this._isCollapsedForClickable.bind(this);
-            this.events = ["click", "keydown"];
-        }
-        this.listener = this.listener.bind(this);
-    }
-
-    // for non-checkable elements, the initial source of truth is the collapsed/expanded
-    // state of the controlled element (unless the element doesn't exist)
-    _isCollapsedForClickable() {
-        const cc = this.controlledExpandables;
-        // the element is considered collapsed if *any* target element is collapsed
-        return cc.length > 0
-            ? !cc.every((element) => element.classList.contains("is-expanded"))
-            : this.element.getAttribute("aria-expanded") === "false";
-    }
-
-    // for checkable elements, the initial source of truth is the checked state
-    _isCollapsedForCheckable() {
-        return !(<HTMLInputElement>this.element).checked;
-    }
-
-    get controlledExpandables() {
-        const attr = this.element.getAttribute("aria-controls");
-        if (!attr) {
-            throw `[aria-controls="targetId1 ... targetIdN"] attribute required`;
-        }
-        const result = attr
-            .split(/\s+/g)
-            .map((s) => document.getElementById(s))
-            .filter((e): e is HTMLElement => !!e);
-        if (!result.length) {
-            throw "couldn't find controls";
-        }
-        return result;
-    }
-
-    _dispatchShowHideEvent(isShow: boolean) {
-        this.triggerEvent(isShow ? "show" : "hide");
-    }
-
-    _toggleClass(doAdd: boolean) {
-        if (!this.data.has("toggle-class")) {
-            return;
-        }
-        const cl = this.element.classList;
-        const toggleClass = this.data.get("toggle-class");
-        if (!toggleClass) {
-            throw "couldn't find toggle class";
-        }
-        toggleClass.split(/\s+/).forEach(function (cls) {
-            cl.toggle(cls, !!doAdd);
-        });
-    }
-
-    listener(e: Event) {
-        let newCollapsed;
-        if (this.isCheckable) {
-            newCollapsed = !(<HTMLInputElement>this.element).checked;
-        } else {
-            if (
-                e.type == "keydown" &&
-                e instanceof KeyboardEvent &&
-                e.keyCode != 13 &&
-                e.keyCode != 32
-            ) {
-                return;
-            }
-            if (
-                e.target !== e.currentTarget &&
-                ["A", "BUTTON"].indexOf((<HTMLElement>e.target).nodeName) >= 0
-            ) {
-                return;
-            }
-
-            e.preventDefault();
-
-            // Prevent "click" events from toggling the expandable within 300ms of "keydown".
-            // e.preventDefault() should have done the same, but https://bugzilla.mozilla.org/show_bug.cgi?id=1487102
-            // doesn't guarantee it.
-            if (e.type == "keydown") {
-                this.lastKeydownClickTimestamp = Date.now();
-            } else if (
-                e.type == "click" &&
-                Date.now() - this.lastKeydownClickTimestamp < 300
-            ) {
-                return;
-            }
-            newCollapsed =
-                this.element.getAttribute("aria-expanded") === "true";
-            if (e.type === "click") {
-                (<HTMLInputElement>this.element).blur();
-            }
-        }
-        this.element.setAttribute(
-            "aria-expanded",
-            newCollapsed ? "false" : "true"
-        );
-        for (const controlledElement of this.controlledExpandables) {
-            controlledElement.classList.toggle("is-expanded", !newCollapsed);
-        }
-        this._dispatchShowHideEvent(!newCollapsed);
-        this._toggleClass(!newCollapsed);
-    }
-
-    connect() {
-        this.events.forEach((e) => {
-            this.element.addEventListener(e, this.listener.bind(this));
-        }, this);
-
-        if (this.isRadio) {
-            globalChangeListenerRequired(true);
-        }
-
-        // synchronize state -- in all cases, this means setting the correct `aria-expanded`
-        // attribute; for checkable controls this also means setting the `is-collapsed` class.
-        // Note: aria-expanded is currently an invalid attribute on radio elements
-        // Support for aria-expanded is being debated by the W3C https://github.com/w3c/aria/issues/1404 as recently as June 2022
-        if (!this.isRadio) {
-            this.element.setAttribute(
-                "aria-expanded",
-                this.isCollapsed() ? "false" : "true"
-            );
-        }
-        if (this.isCheckable) {
-            const cc = this.controlledExpandables;
-            if (cc.length) {
-                const expected = !this.isCollapsed();
-                // if any element does not match the expected state, set them all to the expected state
-                if (
-                    cc.some(
-                        (element) =>
-                            element.classList.contains("is-expanded") !==
-                            expected
-                    )
-                ) {
-                    for (const controlledElement of this
-                        .controlledExpandables) {
-                        controlledElement.classList.toggle(
-                            "is-expanded",
-                            expected
-                        );
-                    }
-                    this._dispatchShowHideEvent(expected);
-                    this._toggleClass(expected);
-                }
-            }
-        }
-    }
-
-    disconnect() {
-        this.events.forEach((e) => {
-            this.element.removeEventListener(e, this.listener.bind(this));
-        }, this);
-
-        if (this.isRadio) {
-            globalChangeListenerRequired(false);
-        }
-    }
-}