@stackoverflow/stacks 2.7.3 → 2.7.5

package/lib/components/topbar/topbar.less

@@ -1,553 +1,553 @@
-.s-topbar {
-    --_tb-bt: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
-    --_tb-h: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
-    // CHILD COMPONENT CUSTOM PROPERTIES
-    // Item
-    --_tb-item-bg: unset;
-    --_tb-item-fc: var(--theme-topbar-item-color, var(--black-400));
-    // Item s-activity-indicator
-    --_tb-item-ai-bs: 0 0 0 var(--su-static2)  var(--theme-topbar-background-color, var(--white));
-    --_tb-item-ai-t: calc(50% - calc(var(--su12) + var(--su2))); // 50% - 14px;
-    // Logo
-    --_tb-logo-bg: transparent;
-    // Menu btn
-    --_tb-menu-btn-bg: unset;
-    --_tb-menu-btn-bg-hover: unset;
-    --_tb-menu-btn-fc-hover: unset;
-    --_tb-menu-btn-span-bg: var(--theme-topbar-item-color, var(--black-400));
-    --_tb-menu-btn-span-fc: unset;
-    --_tb-menu-btn-span-after-t: calc(var(--su-static6) - var(--su-static1)); // 5px;
-    --_tb-menu-btn-span-after-rotate: 0deg;
-    --_tb-menu-btn-span-before-t: calc(var(--su-static1) - var(--su-static6)); // -5px;
-    --_tb-menu-btn-span-before-rotate: 0deg;
-    // Notice
-    --_tb-notice-bg: transparent;
-    --_tb-notice-fc: var(--theme-topbar-item-color, var(--black-400));
-    --_tb-notice-bg-hover: var(--theme-topbar-item-background-hover, var(--black-200));
-    --_tb-notice-fc-hover: var(--theme-topbar-item-color-hover, var(--black-600));
-    --_tb-notice-td: none;
-    // Searchbar
-    --_tb-searchbar-d: flex;
-    --_tb-searchbar-p: 0 var(--su8);
-    --_tb-searchbar-open-d: unset;
-    --_tb-searchbar-open-mxw: 0;
-    --_tb-searchbar-popover-wmn: calc(var(--s-step) * 4);
-    --_tb-searchbar-popover-content-mxh: calc(100vh - var(--_tb-h) - var(--su16));
-
-    // CONTEXTUAL STYLES
-    .dark-mode({
-        &.s-topbar__light {
-            --focus-theme: var(--theme-dark-secondary-custom-200, .set-theme-secondary-default()[200]);
-        }
-    });
-
-    .highcontrast-mode({
-        --_tb-notice-td: underline;
-
-        &.s-topbar__dark {
-            --focus-theme: .theme-dark-default()[secondary];
-        }
-
-        &__dark {
-            // TODO HACK remove everything below once light/dark topbars are inheriting forced themes correctly
-            --theme-topbar-item-color: var(--_white-static);
-            --theme-topbar-item-color-hover: var(--_white-static);
-            --theme-topbar-item-background-hover: .set-black()[500];
-            --theme-topbar-item-color-current: var(--_white-static);
-
-            .s-badge {
-                border-color: currentColor;
-            }
-        }
-
-        &__light {
-            // TODO HACK remove everything below once light/dark topbars are inheriting forced themes correctly
-            --theme-topbar-item-color: .set-black()[600];
-            --theme-topbar-item-color-hover: .set-black()[600]; // TODO hover is now identical color to base color
-            --theme-topbar-item-background-hover: .set-black()[200];
-            --theme-topbar-item-color-current: var(--_black-static);
-        }
-
-        // Search input
-        --theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-400));
-        --theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
-        --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-400));
-        --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-400));
-
-        // Search switcher
-        --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-400));
-        --theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
-
-        // Topbar items
-        --theme-topbar-item-color: var(--black-600);
-        --theme-topbar-item-color-hover: var(--black-600);
-        --theme-topbar-item-background-hover: var(--black-300);
-        --theme-topbar-item-color-current: var(--black);
-
-        border-bottom: var(--su-static1) solid currentColor;
-    });
-
-    .highcontrast-dark-mode({
-        &.s-topbar__light {
-            --focus-theme: .set-theme-secondary-default()[200];
-        }
-    });
-
-    #stacks-internals #screen-sm({
-        --_tb-searchbar-d: none;
-        --_tb-searchbar-p: var(--su8) var(--su12);
-        --_tb-searchbar-open-d: flex;
-        --_tb-searchbar-open-mxw: none;
-        --_tb-searchbar-select-w: 25%;
-        --_tb-searchbar-popover-wmn: initial;
-        --_tb-searchbar-popover-content-mxh: calc(100vh - var(--_tb-h) - var(--su48) - var(--su12));
-    });
-
-    // VARIANTS
-    // Overrides for focus style colors in forced light variant
-    &&__light {
-        --focus-neutral: .set-white()[default]; // forces white for inner focus ring color
-    }
-
-    &&__dark {
-        --focus-neutral: .set-black()[600]; // set to match .s-topbar__dark --theme-topbar-background-color;
-        --focus-theme: var(--theme-dark-secondary-custom-400, .theme-dark-default()[secondary]);
-    }
-
-    // CHILD ELEMENTS
-    &:has(> &--skip-link:focus) {
-        .s-topbar {
-            &--container {
-                height: var(--_tb-h);
-            }
-            &--skip-link {
-                border-bottom: var(--_tb-bt);
-            }
-        }
-
-        border-top: none;
-        display: block;
-        height: auto;
-    }
-
-    & a&--logo {
-        &:focus-visible {
-            .focus-styles(true);
-        }
-
-        &:hover,
-        &.is-selected {
-            --_tb-logo-bg: var(--theme-topbar-item-background-hover, var(--black-200));
-        }
-    }
-
-    & &--container {
-        align-items: center;
-        display: flex;
-        height: 100%;
-        margin: 0 auto;
-        max-width: 100%;
-        width: var(--s-full);
-    }
-
-    & &--content {
-        & > li {
-            display: inline-flex;
-        }
-
-        .list-reset;
-        @scrollbar-styles();// TODO remove once all topbars include necessary nav.s-topbar--navigation wrapper elements
-        display: flex;
-        height: 100%;
-        margin-left: auto;// TODO remove once all topbars include necessary nav.s-topbar--navigation wrapper elements
-        overflow-x: auto;// TODO remove once all topbars include necessary nav.s-topbar--navigation wrapper elements
-    }
-
-    & &--item {
-        &:not(.s-topbar--item__unset) {
-            .svg-icon {
-                vertical-align: text-top;
-            }
-
-            &:focus-visible {
-                .focus-styles(true);
-            }
-
-            &:hover,
-            &.is-selected,
-            &.is-selected:hover {
-                --_tb-item-bg: var(--theme-topbar-item-background-hover, var(--black-200));
-                --_tb-item-fc: var(--theme-topbar-item-color-hover, var(--black-600));
-
-                --_tb-item-ai-bs: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover, var(--black-200));
-                --_tb-item-ai-t: calc(50% - calc(var(--su16) + var(--su2))); // 50% - 18px
-
-                outline: none;
-            }
-
-            .s-activity-indicator {
-                box-shadow: var(--_tb-item-ai-bs);
-                top: var(--_tb-item-ai-t);
-
-                position: absolute;
-                right: var(--su-static2);
-                transition: top var(--te-smooth) 0.15s;
-            }
-
-            background-color: var(--_tb-item-bg);
-            color: var(--_tb-item-fc);
-
-            align-items: center;
-            border-radius: var(--br-sm);
-            display: inline-flex;
-            padding: 0 calc(var(--su12) - var(--su2));
-            position: relative;
-            text-decoration: none;
-            white-space: nowrap;
-        }
-
-        &.s-topbar--item__unset { // provide only layout styling for unset items
-            align-self: center;
-            padding-top: var(--su8);
-            padding-bottom: var(--su8);
-        }
-    }
-
-    & &--logo {
-        background-color: var(--_tb-logo-bg);
-
-        align-items: center;
-        border-radius: var(--br-sm);
-        display: flex;
-        height: 100%;
-        padding: 0 var(--su8);
-    }
-
-    & &--menu-btn {
-        &.is-selected { // Transforming hamburger into x
-            --_tb-menu-btn-bg: var(--theme-topbar-item-background-current);
-            --_tb-menu-btn-bg-hover: var(--theme-topbar-item-background-hover, var(--black-200));
-            --_tb-menu-btn-fc: var(--theme-topbar-item-color-current, var(--black));
-            --_tb-menu-btn-fc-hover: var(--theme-topbar-item-color-hover, var(--black-400));
-            --_tb-menu-btn-span-bg: transparent;
-            --_tb-menu-btn-span-after-t: 0;
-            --_tb-menu-btn-span-after-rotate: 45deg;
-            --_tb-menu-btn-span-before-t: 0;
-            --_tb-menu-btn-span-before-rotate: -45deg;
-        }
-
-        &:not(.is-selected) {
-            span {
-                transition: background-color;
-                transition-duration: 0.1s;
-            }
-        }
-
-        span { // hamburger icon
-            &,
-            &:after,
-            &:before {
-                height: var(--su-static2);
-                position: relative;
-                width: var(--su-static16);
-            }
-
-            &:after,
-            &:before {
-                background-color: var(--theme-topbar-item-color, var(--black-400));
-                content: '';
-                left: 0;
-                position: absolute;
-                transition: top, transform; // `transition` needs to come before duration, timing
-                transition-duration: 0.1s;
-                transition-timing-function: ease-in-out;
-            }
-
-            &:after {
-                top: var(--_tb-menu-btn-span-after-t);
-                transform: rotate(var(--_tb-menu-btn-span-after-rotate));
-            }
-
-            &:before {
-                top: var(--_tb-menu-btn-span-before-t);
-                transform: rotate(var(--_tb-menu-btn-span-before-rotate));
-            }
-
-            background-color: var(--_tb-menu-btn-span-bg);
-        }
-
-        &:hover {
-            background-color: var(--_tb-menu-btn-bg-hover);
-            color: var(--_tb-menu-btn-fc-hover);
-        }
-
-        background-color: var(--_tb-menu-btn-bg);
-        color: var(--_tb-menu-btn-fc);
-
-        align-items: center;
-        display: flex;
-        flex-shrink: 0;
-        height: 100%;
-        justify-content: center;
-        padding: 0 var(--su16);
-    }
-
-    & &--navigation {
-        @scrollbar-styles();
-        display: flex;
-        height: 100%;
-        margin-left: auto;
-        overflow-x: auto;
-    }
-
-    & &--notice {
-        &.is-unread {
-            --_tb-notice-bg: var(--theme-primary-400);
-            --_tb-notice-fc: var(--white);
-            --_tb-notice-bg-hover: var(--theme-primary-500);
-            --_tb-notice-fc-hover: var(--white);
-        }
-
-        &:focus-visible {
-            .focus-styles(true, true);
-        }
-
-        &:hover {
-            background-color: var(--_tb-notice-bg-hover);
-            border-color: var(--_tb-notice-bg-hover); // notice border-color matches background-color
-            color: var(--_tb-notice-fc-hover);
-        }
-
-        background-color: var(--_tb-notice-bg);
-        border: var(--su-static1) solid var(--_tb-notice-bg); // notice border-color matches background-color
-        color: var(--_tb-notice-fc);
-        text-decoration: var(--_tb-notice-td);
-
-        border-radius: var(--br-sm);
-        display: inline-flex;
-        flex-shrink: 0;
-        font-size: var(--fs-fine);
-        font-weight: 700;
-        margin-left: var(--su8);
-        margin-right: var(--su8);
-        line-height: var(--lh-xxl);
-        padding: 0 var(--su6);
-        text-transform: uppercase;
-    }
-
-    & &--searchbar {
-        #stacks-internals #screen-sm({
-            background: var(--theme-topbar-item-background-hover, var(--black-200));
-            left: 0;
-            max-width: 100%;
-            position: absolute;
-            right: 0;
-            top: 100%;
-        });
-
-        .s-topbar--searchbar--input-group {
-            .s-input {
-                &::placeholder {
-                    color: var(--theme-topbar-search-placeholder, var(--black-400));
-                    font-style: normal;
-                }
-
-                &:not(:focus-visible):not(.focus) {
-                    box-shadow: var(--theme-topbar-search-shadow);
-                }
-
-                background-color: var(--theme-topbar-search-background, var(--white));
-                border-color: var(--theme-topbar-search-border, var(--black-300));
-                color: var(--theme-topbar-search-color, var(--black-500));
-                display: block;
-                line-height: var(--lh-sm);
-            }
-
-            .s-input-icon {
-                color: var(--theme-topbar-search-placeholder, var(--black-400));
-            }
-
-            flex-grow: 1;
-            position: relative;
-        }
-
-        .s-popover {
-            max-width: 100%;
-            min-width: var(--_tb-searchbar-popover-wmn);
-            padding: 0;
-
-            .s-popover--content {
-                max-height: var(--_tb-searchbar-popover-content-mxh);
-            }
-        }
-
-        .s-select {
-            #stacks-internals #screen-sm({
-                width: 25% !important;
-            });
-
-            > select {
-                &:focus-visible,
-                &.focus {
-                    z-index: var(--zi-selected);
-                }
-
-                background-color: var(--theme-topbar-select-background, var(--black-200));
-                border-bottom-right-radius: 0 !important;
-                border-color: var(--theme-topbar-search-border, var(--black-300));
-                border-top-right-radius: 0 !important;
-                color: var(--theme-topbar-select-color, var(--black-500));
-                height: 100%;
-                line-height: var(--lh-sm);
-            }
-
-            + .s-topbar--searchbar--input-group > .s-input {
-                border-bottom-left-radius: 0 !important;
-                border-top-left-radius: 0 !important;
-            }
-
-            &:before,
-            &:after {
-                z-index: var(--zi-active); // Make sure our focus ring is above the search input
-            }
-
-            align-self: stretch;
-            color: var(--theme-topbar-select-color, var(--black-500));
-            margin-right: calc(var(--su-static1) * -1); //-1px
-            max-width: calc(var(--s-step) * 2) !important; // wmx2;
-        }
-
-        &.s-topbar--searchbar__open {
-            #stacks-internals #screen-sm({
-                display: var(--_tb-searchbar-open-d);
-                max-width: var(--_tb-searchbar-open-mxw);
-            });
-        }
-
-        display: var(--_tb-searchbar-d);
-
-        align-items: center;
-        flex-grow: 1; // Allow the searchbar to grow if there *is* extra space
-        flex-shrink: 10000; // Force the searchbar to shrink as much as possible if there's no extra space
-        padding: var(--_tb-searchbar-p);
-    }
-
-    & &--skip-link {
-        &:not(:focus) {
-            &:extend(.v-visible-sr);
-        }
-
-        background-color: var(--theme-secondary-100);
-        border-bottom: var(--_tb-bt);
-        display: block;
-        outline: none;
-        padding: var(--su12);
-        text-align: center;
-    }
-
-
-    .s-navigation {
-        .s-navigation--item {
-            &:not(.is-selected) {
-                &:hover {
-                    background-color: var(--theme-topbar-item-background-hover, var(--black-200));
-                    color: var(--theme-topbar-item-color-hover, var(--black-400));
-                }
-
-                color: var(--theme-topbar-item-color, var(--black-400));
-            }
-        }
-    }
-
-    .s-popover .s-navigation {
-        .s-navigation--item {
-            &:not(.is-selected) {
-                &:hover {
-                    background-color: var(--black-200);
-                    color: var(--black-600);
-                }
-
-                color: var(--black-500);
-            }
-        }
-    }
-
-    align-items: center;
-    background-color: var(--theme-topbar-background-color, var(--white));
-    border-bottom: var(--theme-topbar-bottom-border, var(--su-static1) solid var(--black-225));
-    border-top: var(--_tb-bt);
-    display: flex;
-    height: var(--_tb-h);
-    min-width: auto;
-    position: relative;
-    width: 100%;
-    z-index: var(--zi-navigation-fixed);
-}
-
-// DARK/LIGHT VARIANTS
-// NOTE: These are declared outside of the .s-topbar block to allow consumers (Core) to reference them directly
-// TODO move within .s-topbar block once Core no longer references this directly
-.s-topbar__dark {
-    // TODO this only works 100% perfectly in dark mode, due to child elements inheriting current theme colors
-    // TODO extend forced dark mode instead of overriding
-    @topbar-actual-background: .set-black()[600];
-
-    #calc-topbar-lightness-increase() when (lightness(@topbar-actual-background) < 15%) {
-        @topbar-search-lightness-increase: 20%;
-    }
-    #calc-topbar-lightness-increase() when not (lightness(@topbar-actual-background) < 15%) {
-        @topbar-search-lightness-increase: 10%;
-    }
-    #calc-topbar-lightness-increase();
-
-    --theme-topbar-background-color: @topbar-actual-background;
-    --theme-topbar-bottom-border: var(--su-static1) solid @topbar-actual-background;
-
-    // Search input
-    --theme-topbar-search-color: lighten(@topbar-actual-background, 80% + @topbar-search-lightness-increase);
-    --theme-topbar-search-background: lighten(@topbar-actual-background, @topbar-search-lightness-increase);
-    --theme-topbar-search-placeholder: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
-    --theme-topbar-search-border: lighten(@topbar-actual-background, 20% + @topbar-search-lightness-increase);
-
-    // Search switcher
-    --theme-topbar-select-color: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
-    --theme-topbar-select-background: lighten(@topbar-actual-background, 10% + @topbar-search-lightness-increase);
-
-    // Items
-    --theme-topbar-item-color: .set-black()[225];
-    --theme-topbar-item-color-hover: var(--_white-static);
-    --theme-topbar-item-background-hover: .set-black()[500];
-    --theme-topbar-item-color-current: var(--_white-static);
-
-    // Themed border accent
-    --theme-topbar-accent-border: none;
-
-    --scrollbar: hsla(0, 0%, 100%, 0.2);
-}
-
-// TODO move within .s-topbar block once Core no longer references this directly
-.s-topbar__light {
-    // TODO this only works 100% perfectly in light mode, due to child elements inheriting current theme colors
-    // TODO extend forced light mode instead of overriding
-
-    --theme-topbar-background-color: var(--_white-static);
-    --theme-topbar-bottom-border: var(--su-static1) solid .set-black()[225];
-
-    // Search input
-    --theme-topbar-search-color: .set-black()[500];
-    --theme-topbar-search-background: var(--_white-static);
-    --theme-topbar-search-placeholder: .set-black()[400];
-    --theme-topbar-search-border: .set-black()[300];
-
-    // Search switcher
-    --theme-topbar-select-color: .set-black()[500];
-    --theme-topbar-select-background: .set-black()[200];
-
-    // Items
-    --theme-topbar-item-color: .set-black()[400];
-    --theme-topbar-item-color-hover: .set-black()[500];
-    --theme-topbar-item-background-hover: .set-black()[200];
-    --theme-topbar-item-color-current: var(--_black-static);
-
-    --scrollbar: hsla(0, 0%, 0%, 0.2);
-}
+.s-topbar {
+    --_tb-bt: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
+    --_tb-h: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
+    // CHILD COMPONENT CUSTOM PROPERTIES
+    // Item
+    --_tb-item-bg: unset;
+    --_tb-item-fc: var(--theme-topbar-item-color, var(--black-400));
+    // Item s-activity-indicator
+    --_tb-item-ai-bs: 0 0 0 var(--su-static2)  var(--theme-topbar-background-color, var(--white));
+    --_tb-item-ai-t: calc(50% - calc(var(--su12) + var(--su2))); // 50% - 14px;
+    // Logo
+    --_tb-logo-bg: transparent;
+    // Menu btn
+    --_tb-menu-btn-bg: unset;
+    --_tb-menu-btn-bg-hover: unset;
+    --_tb-menu-btn-fc-hover: unset;
+    --_tb-menu-btn-span-bg: var(--theme-topbar-item-color, var(--black-400));
+    --_tb-menu-btn-span-fc: unset;
+    --_tb-menu-btn-span-after-t: calc(var(--su-static6) - var(--su-static1)); // 5px;
+    --_tb-menu-btn-span-after-rotate: 0deg;
+    --_tb-menu-btn-span-before-t: calc(var(--su-static1) - var(--su-static6)); // -5px;
+    --_tb-menu-btn-span-before-rotate: 0deg;
+    // Notice
+    --_tb-notice-bg: transparent;
+    --_tb-notice-fc: var(--theme-topbar-item-color, var(--black-400));
+    --_tb-notice-bg-hover: var(--theme-topbar-item-background-hover, var(--black-200));
+    --_tb-notice-fc-hover: var(--theme-topbar-item-color-hover, var(--black-600));
+    --_tb-notice-td: none;
+    // Searchbar
+    --_tb-searchbar-d: flex;
+    --_tb-searchbar-p: 0 var(--su8);
+    --_tb-searchbar-open-d: unset;
+    --_tb-searchbar-open-mxw: 0;
+    --_tb-searchbar-popover-wmn: calc(var(--s-step) * 4);
+    --_tb-searchbar-popover-content-mxh: calc(100vh - var(--_tb-h) - var(--su16));
+
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        &.s-topbar__light {
+            --focus-theme: var(--theme-dark-secondary-custom-200, .set-theme-secondary-default()[200]);
+        }
+    });
+
+    .highcontrast-mode({
+        --_tb-notice-td: underline;
+
+        &.s-topbar__dark {
+            --focus-theme: .theme-dark-default()[secondary];
+        }
+
+        &__dark {
+            // TODO HACK remove everything below once light/dark topbars are inheriting forced themes correctly
+            --theme-topbar-item-color: var(--_white-static);
+            --theme-topbar-item-color-hover: var(--_white-static);
+            --theme-topbar-item-background-hover: .set-black()[500];
+            --theme-topbar-item-color-current: var(--_white-static);
+
+            .s-badge {
+                border-color: currentColor;
+            }
+        }
+
+        &__light {
+            // TODO HACK remove everything below once light/dark topbars are inheriting forced themes correctly
+            --theme-topbar-item-color: .set-black()[600];
+            --theme-topbar-item-color-hover: .set-black()[600]; // TODO hover is now identical color to base color
+            --theme-topbar-item-background-hover: .set-black()[200];
+            --theme-topbar-item-color-current: var(--_black-static);
+        }
+
+        // Search input
+        --theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-400));
+        --theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
+        --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-400));
+        --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-400));
+
+        // Search switcher
+        --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-400));
+        --theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
+
+        // Topbar items
+        --theme-topbar-item-color: var(--black-600);
+        --theme-topbar-item-color-hover: var(--black-600);
+        --theme-topbar-item-background-hover: var(--black-300);
+        --theme-topbar-item-color-current: var(--black);
+
+        border-bottom: var(--su-static1) solid currentColor;
+    });
+
+    .highcontrast-dark-mode({
+        &.s-topbar__light {
+            --focus-theme: .set-theme-secondary-default()[200];
+        }
+    });
+
+    #stacks-internals #screen-sm({
+        --_tb-searchbar-d: none;
+        --_tb-searchbar-p: var(--su8) var(--su12);
+        --_tb-searchbar-open-d: flex;
+        --_tb-searchbar-open-mxw: none;
+        --_tb-searchbar-select-w: 25%;
+        --_tb-searchbar-popover-wmn: initial;
+        --_tb-searchbar-popover-content-mxh: calc(100vh - var(--_tb-h) - var(--su48) - var(--su12));
+    });
+
+    // VARIANTS
+    // Overrides for focus style colors in forced light variant
+    &&__light {
+        --focus-neutral: .set-white()[default]; // forces white for inner focus ring color
+    }
+
+    &&__dark {
+        --focus-neutral: .set-black()[600]; // set to match .s-topbar__dark --theme-topbar-background-color;
+        --focus-theme: var(--theme-dark-secondary-custom-400, .theme-dark-default()[secondary]);
+    }
+
+    // CHILD ELEMENTS
+    &:has(> &--skip-link:focus) {
+        .s-topbar {
+            &--container {
+                height: var(--_tb-h);
+            }
+            &--skip-link {
+                border-bottom: var(--_tb-bt);
+            }
+        }
+
+        border-top: none;
+        display: block;
+        height: auto;
+    }
+
+    & a&--logo {
+        &:focus-visible {
+            .focus-styles(true);
+        }
+
+        &:hover,
+        &.is-selected {
+            --_tb-logo-bg: var(--theme-topbar-item-background-hover, var(--black-200));
+        }
+    }
+
+    & &--container {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        margin: 0 auto;
+        max-width: 100%;
+        width: var(--s-full);
+    }
+
+    & &--content {
+        & > li {
+            display: inline-flex;
+        }
+
+        .list-reset;
+        @scrollbar-styles();// TODO remove once all topbars include necessary nav.s-topbar--navigation wrapper elements
+        display: flex;
+        height: 100%;
+        margin-left: auto;// TODO remove once all topbars include necessary nav.s-topbar--navigation wrapper elements
+        overflow-x: auto;// TODO remove once all topbars include necessary nav.s-topbar--navigation wrapper elements
+    }
+
+    & &--item {
+        &:not(.s-topbar--item__unset) {
+            .svg-icon {
+                vertical-align: text-top;
+            }
+
+            &:focus-visible {
+                .focus-styles(true);
+            }
+
+            &:hover,
+            &.is-selected,
+            &.is-selected:hover {
+                --_tb-item-bg: var(--theme-topbar-item-background-hover, var(--black-200));
+                --_tb-item-fc: var(--theme-topbar-item-color-hover, var(--black-600));
+
+                --_tb-item-ai-bs: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover, var(--black-200));
+                --_tb-item-ai-t: calc(50% - calc(var(--su16) + var(--su2))); // 50% - 18px
+
+                outline: none;
+            }
+
+            .s-activity-indicator {
+                box-shadow: var(--_tb-item-ai-bs);
+                top: var(--_tb-item-ai-t);
+
+                position: absolute;
+                right: var(--su-static2);
+                transition: top var(--te-smooth) 0.15s;
+            }
+
+            background-color: var(--_tb-item-bg);
+            color: var(--_tb-item-fc);
+
+            align-items: center;
+            border-radius: var(--br-sm);
+            display: inline-flex;
+            padding: 0 calc(var(--su12) - var(--su2));
+            position: relative;
+            text-decoration: none;
+            white-space: nowrap;
+        }
+
+        &.s-topbar--item__unset { // provide only layout styling for unset items
+            align-self: center;
+            padding-top: var(--su8);
+            padding-bottom: var(--su8);
+        }
+    }
+
+    & &--logo {
+        background-color: var(--_tb-logo-bg);
+
+        align-items: center;
+        border-radius: var(--br-sm);
+        display: flex;
+        height: 100%;
+        padding: 0 var(--su8);
+    }
+
+    & &--menu-btn {
+        &.is-selected { // Transforming hamburger into x
+            --_tb-menu-btn-bg: var(--theme-topbar-item-background-current);
+            --_tb-menu-btn-bg-hover: var(--theme-topbar-item-background-hover, var(--black-200));
+            --_tb-menu-btn-fc: var(--theme-topbar-item-color-current, var(--black));
+            --_tb-menu-btn-fc-hover: var(--theme-topbar-item-color-hover, var(--black-400));
+            --_tb-menu-btn-span-bg: transparent;
+            --_tb-menu-btn-span-after-t: 0;
+            --_tb-menu-btn-span-after-rotate: 45deg;
+            --_tb-menu-btn-span-before-t: 0;
+            --_tb-menu-btn-span-before-rotate: -45deg;
+        }
+
+        &:not(.is-selected) {
+            span {
+                transition: background-color;
+                transition-duration: 0.1s;
+            }
+        }
+
+        span { // hamburger icon
+            &,
+            &:after,
+            &:before {
+                height: var(--su-static2);
+                position: relative;
+                width: var(--su-static16);
+            }
+
+            &:after,
+            &:before {
+                background-color: var(--theme-topbar-item-color, var(--black-400));
+                content: '';
+                left: 0;
+                position: absolute;
+                transition: top, transform; // `transition` needs to come before duration, timing
+                transition-duration: 0.1s;
+                transition-timing-function: ease-in-out;
+            }
+
+            &:after {
+                top: var(--_tb-menu-btn-span-after-t);
+                transform: rotate(var(--_tb-menu-btn-span-after-rotate));
+            }
+
+            &:before {
+                top: var(--_tb-menu-btn-span-before-t);
+                transform: rotate(var(--_tb-menu-btn-span-before-rotate));
+            }
+
+            background-color: var(--_tb-menu-btn-span-bg);
+        }
+
+        &:hover {
+            background-color: var(--_tb-menu-btn-bg-hover);
+            color: var(--_tb-menu-btn-fc-hover);
+        }
+
+        background-color: var(--_tb-menu-btn-bg);
+        color: var(--_tb-menu-btn-fc);
+
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        height: 100%;
+        justify-content: center;
+        padding: 0 var(--su16);
+    }
+
+    & &--navigation {
+        @scrollbar-styles();
+        display: flex;
+        height: 100%;
+        margin-left: auto;
+        overflow-x: auto;
+    }
+
+    & &--notice {
+        &.is-unread {
+            --_tb-notice-bg: var(--theme-primary-400);
+            --_tb-notice-fc: var(--white);
+            --_tb-notice-bg-hover: var(--theme-primary-500);
+            --_tb-notice-fc-hover: var(--white);
+        }
+
+        &:focus-visible {
+            .focus-styles(true, true);
+        }
+
+        &:hover {
+            background-color: var(--_tb-notice-bg-hover);
+            border-color: var(--_tb-notice-bg-hover); // notice border-color matches background-color
+            color: var(--_tb-notice-fc-hover);
+        }
+
+        background-color: var(--_tb-notice-bg);
+        border: var(--su-static1) solid var(--_tb-notice-bg); // notice border-color matches background-color
+        color: var(--_tb-notice-fc);
+        text-decoration: var(--_tb-notice-td);
+
+        border-radius: var(--br-sm);
+        display: inline-flex;
+        flex-shrink: 0;
+        font-size: var(--fs-fine);
+        font-weight: 700;
+        margin-left: var(--su8);
+        margin-right: var(--su8);
+        line-height: var(--lh-xxl);
+        padding: 0 var(--su6);
+        text-transform: uppercase;
+    }
+
+    & &--searchbar {
+        #stacks-internals #screen-sm({
+            background: var(--theme-topbar-item-background-hover, var(--black-200));
+            left: 0;
+            max-width: 100%;
+            position: absolute;
+            right: 0;
+            top: 100%;
+        });
+
+        .s-topbar--searchbar--input-group {
+            .s-input {
+                &::placeholder {
+                    color: var(--theme-topbar-search-placeholder, var(--black-400));
+                    font-style: normal;
+                }
+
+                &:not(:focus-visible):not(.focus) {
+                    box-shadow: var(--theme-topbar-search-shadow);
+                }
+
+                background-color: var(--theme-topbar-search-background, var(--white));
+                border-color: var(--theme-topbar-search-border, var(--black-300));
+                color: var(--theme-topbar-search-color, var(--black-500));
+                display: block;
+                line-height: var(--lh-sm);
+            }
+
+            .s-input-icon {
+                color: var(--theme-topbar-search-placeholder, var(--black-400));
+            }
+
+            flex-grow: 1;
+            position: relative;
+        }
+
+        .s-popover {
+            max-width: 100%;
+            min-width: var(--_tb-searchbar-popover-wmn);
+            padding: 0;
+
+            .s-popover--content {
+                max-height: var(--_tb-searchbar-popover-content-mxh);
+            }
+        }
+
+        .s-select {
+            #stacks-internals #screen-sm({
+                width: 25% !important;
+            });
+
+            > select {
+                &:focus-visible,
+                &.focus {
+                    z-index: var(--zi-selected);
+                }
+
+                background-color: var(--theme-topbar-select-background, var(--black-200));
+                border-bottom-right-radius: 0 !important;
+                border-color: var(--theme-topbar-search-border, var(--black-300));
+                border-top-right-radius: 0 !important;
+                color: var(--theme-topbar-select-color, var(--black-500));
+                height: 100%;
+                line-height: var(--lh-sm);
+            }
+
+            + .s-topbar--searchbar--input-group > .s-input {
+                border-bottom-left-radius: 0 !important;
+                border-top-left-radius: 0 !important;
+            }
+
+            &:before,
+            &:after {
+                z-index: var(--zi-active); // Make sure our focus ring is above the search input
+            }
+
+            align-self: stretch;
+            color: var(--theme-topbar-select-color, var(--black-500));
+            margin-right: calc(var(--su-static1) * -1); //-1px
+            max-width: calc(var(--s-step) * 2) !important; // wmx2;
+        }
+
+        &.s-topbar--searchbar__open {
+            #stacks-internals #screen-sm({
+                display: var(--_tb-searchbar-open-d);
+                max-width: var(--_tb-searchbar-open-mxw);
+            });
+        }
+
+        display: var(--_tb-searchbar-d);
+
+        align-items: center;
+        flex-grow: 1; // Allow the searchbar to grow if there *is* extra space
+        flex-shrink: 10000; // Force the searchbar to shrink as much as possible if there's no extra space
+        padding: var(--_tb-searchbar-p);
+    }
+
+    & &--skip-link {
+        &:not(:focus) {
+            &:extend(.v-visible-sr);
+        }
+
+        background-color: var(--theme-secondary-100);
+        border-bottom: var(--_tb-bt);
+        display: block;
+        outline: none;
+        padding: var(--su12);
+        text-align: center;
+    }
+
+
+    .s-navigation {
+        .s-navigation--item {
+            &:not(.is-selected) {
+                &:hover {
+                    background-color: var(--theme-topbar-item-background-hover, var(--black-200));
+                    color: var(--theme-topbar-item-color-hover, var(--black-400));
+                }
+
+                color: var(--theme-topbar-item-color, var(--black-400));
+            }
+        }
+    }
+
+    .s-popover .s-navigation {
+        .s-navigation--item {
+            &:not(.is-selected) {
+                &:hover {
+                    background-color: var(--black-200);
+                    color: var(--black-600);
+                }
+
+                color: var(--black-500);
+            }
+        }
+    }
+
+    align-items: center;
+    background-color: var(--theme-topbar-background-color, var(--white));
+    border-bottom: var(--theme-topbar-bottom-border, var(--su-static1) solid var(--black-225));
+    border-top: var(--_tb-bt);
+    display: flex;
+    height: var(--_tb-h);
+    min-width: auto;
+    position: relative;
+    width: 100%;
+    z-index: var(--zi-navigation-fixed);
+}
+
+// DARK/LIGHT VARIANTS
+// NOTE: These are declared outside of the .s-topbar block to allow consumers (Core) to reference them directly
+// TODO move within .s-topbar block once Core no longer references this directly
+.s-topbar__dark {
+    // TODO this only works 100% perfectly in dark mode, due to child elements inheriting current theme colors
+    // TODO extend forced dark mode instead of overriding
+    @topbar-actual-background: .set-black()[600];
+
+    #calc-topbar-lightness-increase() when (lightness(@topbar-actual-background) < 15%) {
+        @topbar-search-lightness-increase: 20%;
+    }
+    #calc-topbar-lightness-increase() when not (lightness(@topbar-actual-background) < 15%) {
+        @topbar-search-lightness-increase: 10%;
+    }
+    #calc-topbar-lightness-increase();
+
+    --theme-topbar-background-color: @topbar-actual-background;
+    --theme-topbar-bottom-border: var(--su-static1) solid @topbar-actual-background;
+
+    // Search input
+    --theme-topbar-search-color: lighten(@topbar-actual-background, 80% + @topbar-search-lightness-increase);
+    --theme-topbar-search-background: lighten(@topbar-actual-background, @topbar-search-lightness-increase);
+    --theme-topbar-search-placeholder: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
+    --theme-topbar-search-border: lighten(@topbar-actual-background, 20% + @topbar-search-lightness-increase);
+
+    // Search switcher
+    --theme-topbar-select-color: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
+    --theme-topbar-select-background: lighten(@topbar-actual-background, 10% + @topbar-search-lightness-increase);
+
+    // Items
+    --theme-topbar-item-color: .set-black()[225];
+    --theme-topbar-item-color-hover: var(--_white-static);
+    --theme-topbar-item-background-hover: .set-black()[500];
+    --theme-topbar-item-color-current: var(--_white-static);
+
+    // Themed border accent
+    --theme-topbar-accent-border: none;
+
+    --scrollbar: hsla(0, 0%, 100%, 0.2);
+}
+
+// TODO move within .s-topbar block once Core no longer references this directly
+.s-topbar__light {
+    // TODO this only works 100% perfectly in light mode, due to child elements inheriting current theme colors
+    // TODO extend forced light mode instead of overriding
+
+    --theme-topbar-background-color: var(--_white-static);
+    --theme-topbar-bottom-border: var(--su-static1) solid .set-black()[225];
+
+    // Search input
+    --theme-topbar-search-color: .set-black()[500];
+    --theme-topbar-search-background: var(--_white-static);
+    --theme-topbar-search-placeholder: .set-black()[400];
+    --theme-topbar-search-border: .set-black()[300];
+
+    // Search switcher
+    --theme-topbar-select-color: .set-black()[500];
+    --theme-topbar-select-background: .set-black()[200];
+
+    // Items
+    --theme-topbar-item-color: .set-black()[400];
+    --theme-topbar-item-color-hover: .set-black()[500];
+    --theme-topbar-item-background-hover: .set-black()[200];
+    --theme-topbar-item-color-current: var(--_black-static);
+
+    --scrollbar: hsla(0, 0%, 0%, 0.2);
+}