@stackoverflow/stacks 2.0.9 → 2.1.0

package/lib/components/topbar/topbar.less

@@ -23,7 +23,6 @@
         --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));
-        --theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-400));
 
         // Search switcher
         --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-400));
@@ -38,6 +37,44 @@
 
     .highcontrast-mode({ border-bottom: 1px solid currentColor; });
 
+    // Overrides for focus style colors in forced light variant
+    &&__light {
+        --focus-neutral: .set-white()[default]; // forces white for inner focus ring color
+    }
+
+    .dark-mode({
+        &.s-topbar__light {
+            --focus-theme: var(--theme-dark-secondary-custom-200, .set-theme-secondary-default()[200]);
+        }
+    });
+
+    .highcontrast-dark-mode({
+        &.s-topbar__light {
+            --focus-theme: .set-theme-secondary-default()[200];
+        }
+    });
+
+    // Overrides for focus style colors in forced dark variant
+    .highcontrast-mode({
+        &.s-topbar__dark {
+            --focus-theme: .theme-dark-default()[secondary];
+        }
+    });
+
+    &&__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]);
+    }
+
+    // focus styles
+    a&--logo,
+    & &--content &--item:not(&--item__unset),
+    &--notice {
+        &:focus-visible {
+            .focus-styles(true);
+        }
+    }
+
     // Wraps the content so the topbar stretches 100% w/ content at some value below that
     .s-topbar--container {
         width: var(--s-full); // wmx12; Consumers should use atomic classes to override this
@@ -54,14 +91,17 @@
         display: flex;
         align-items: center;
         background-color: transparent;
+        border-radius: var(--br-sm);
     }
 
-    a.s-topbar--logo:hover {
-        background-color: var(--theme-topbar-item-background-hover, var(--black-200));
-    }
+    a.s-topbar--logo {
+        &:hover {
+            background-color: var(--theme-topbar-item-background-hover, var(--black-200));
+        }
 
-    a.s-topbar--logo.is-selected {
-        background-color: var(--theme-topbar-item-background-hover, var(--black-200));
+        &.is-selected {
+            background-color: var(--theme-topbar-item-background-hover, var(--black-200));
+        }
     }
 
     .s-topbar--menu-btn {
@@ -125,9 +165,6 @@
     }
 
     .s-navigation {
-        .s-navigation--item:focus-visible {
-            box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
-        }
         .s-navigation--item:not(.is-selected) {
             color: var(--theme-topbar-item-color, var(--black-400));
         }
@@ -139,10 +176,6 @@
     }
     .s-popover .s-navigation {
         .s-navigation--item {
-            &:focus-visible {
-                box-shadow: var(0 0 0 var(--su-static4) var(--focus-ring));
-            }
-
             &:not(.is-selected) {
                 &:hover {
                     color: var(--black-600);
@@ -170,8 +203,6 @@
     --theme-topbar-search-background: var(--_white-static);
     --theme-topbar-search-placeholder: .set-black()[400];
     --theme-topbar-search-border: .set-black()[300];
-    --theme-topbar-search-border-focus: .set-blue()[400];
-    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
 
     // Search switcher
     --theme-topbar-select-color: .set-black()[500];
@@ -222,8 +253,6 @@
     --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);
-    --theme-topbar-search-border-focus: lighten(@topbar-actual-background, 45% + @topbar-search-lightness-increase);
-    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) fade(.set-white()[default], 30%);
 
     // Search switcher
     --theme-topbar-select-color: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
@@ -290,16 +319,14 @@
         text-decoration: none;
         white-space: nowrap;
         position: relative;
+        border-radius: var(--br-sm);
 
         &:hover,
-        &:focus,
         &.is-selected,
-        &.is-selected:hover,
-        &.is-selected:focus {
+        &.is-selected:hover {
             color: var(--theme-topbar-item-color-hover, var(--black-600));
             background-color: var(--theme-topbar-item-background-hover, var(--black-200));
             text-decoration: none;
-            outline: none;
 
             .s-activity-indicator {
                 top: calc(50% - calc(var(--su16) + var(--su2))); // 50% - 18px
@@ -343,16 +370,14 @@
 
     .topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color, var(--black-400)));
 
-    &:hover,
-    &:focus {
+    &:hover {
         .topbar-notice-styles(var(--theme-topbar-item-background-hover, var(--black-200)), var(--theme-topbar-item-background-hover, var(--black-200)), var(--theme-topbar-item-color-hover, var(--black-600)));
     }
 
     &.is-unread {
         .topbar-notice-styles(var(--theme-primary), var(--theme-primary), var(--white));
 
-        &:hover,
-        &:focus {
+        &:hover {
             .topbar-notice-styles(var(--theme-primary-500), var(--theme-primary-500), var(--white));
         }
     }
@@ -374,18 +399,16 @@
         flex-grow: 1;
 
         .s-input {
-            border-color: var(--theme-topbar-search-border, var(--black-300));
+            &:not(:focus-visible) {
+                box-shadow: var(--theme-topbar-search-shadow);
+            }
+
             background-color: var(--theme-topbar-search-background, var(--white));
-            box-shadow: var(--theme-topbar-search-shadow);
+            border-color: var(--theme-topbar-search-border, var(--black-300));
             color: var(--theme-topbar-search-color, var(--black-500));
             display: block;
             line-height: @inputLineHeights;
 
-            &:focus {
-                border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
-                box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
-            }
-
             &::placeholder {
                 color: var(--theme-topbar-search-placeholder, var(--black-400));
                 font-style: normal;
@@ -411,19 +434,18 @@
     }
 
     .s-select > select {
+        border-color: var(--theme-topbar-search-border, var(--black-300));
+
+        &:focus-visible {
+            z-index: var(--zi-selected);
+        }
+
         .brr0;
         height: 100%;
         line-height: @inputLineHeights;
-
-        border-color: var(--theme-topbar-search-border, var(--black-300));
         background-color: var(--theme-topbar-select-background, var(--black-200));
         color: var(--theme-topbar-select-color, var(--black-500));
 
-        &:focus {
-            border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
-            box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
-            z-index: var(--zi-selected);
-        }
     }
 
     // Drop the left border of the search input when it is next to the select

package/lib/components/topbar/topbar.visual.test.ts

@@ -0,0 +1,188 @@
+import { runVisualTests } from "../../test/visual-test-utils";
+import "../../index";
+import {
+    IconAchievements,
+    IconAlert,
+    IconHelp,
+    IconInbox,
+    IconModerator,
+    IconReviewQueue,
+    IconSearch,
+    IconStackExchange,
+} from "@stackoverflow/stacks-icons/icons";
+
+const base64Image =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAE8CAMAAABq2/00AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF/3IA/////44y/8OS/+fU//Xs/6tn/9e2EhvbMQAABH9JREFUeNrs3e1y2ygAhWELJHH/d7zuJpN1XAnxoe408Ly/6xnnHXEOIEwfDwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gbAGEhrZl2VloY20PIk8tAzZbfkXA7eeuHyysVfdFMsXiY66ptiWF8Re05BdxF7HkBV7PUNW7FVx4E7sVSwrDjBw2+pC7NWwHtkTe3ULM7En9v6O2ONF7Ik9sSf2IPbEntgTexB7t8feTsynniD2Oh6tXex1hFoUe02kaxVi72JMZs+Rib0LLdkXFGLvaECWjkOxdxVmUex1rB6S2Kss2lcytSH2LnVkakPsXQ7E8xwTe5fuMrUh9vKj8CP4xN7lNOXc3mnwib1M2X7Z28VeS93mg0/sFZTG6WCMVSE51fqsYL4s9jpqQ+yV1caxErHXUxtir6c2xF5HbYRF7LXXhtjrqQ2x11MbYu9tLG4VtSH2empD7BUNxpPaSGKvPPh2sdcxX45i78baEHs18+X32hB7NfPl99oQex21MVHsxViaR8W1MU3s/XpMSvWF0tqYJfY+BmMq01dcG+scP6/6enTK9BW+1J0j9l5aYN0rP5BzM0XsbSUnAlpqY4LYezexFeRSbpslH3uDXdF64OG6est258PohXE8BK+7o6g29rJTQsPt1F3qK9qdTwMP2Wz2X1Vv0UvdbeQ53nl2Xesr2Z0Pww7Zs5lsafWW1MY+6JDNxv5/+kLb5/fXfzLirRdhKSGnr6A2tkGvJoxLGZnqva6NkAbdgA+pUN9a+QuWYYPu+98ee/W1/PJgoMG7lek7nW3UHiEdbKpcqu+kO2L9b4aG0rcWjt5jfWf2Z7kCeE891XtSG/O86A5d+tbZj1h0VW+c/ja90FG9uxMCFdWb/+SkZ1Oaq/d1vjzvXfvF+tLp+aiZT5S1Vm90lrFj02B3bW1d9X7T92u+7Aq9qk2D+Fob/v/Myu7YostC76xe9K966evfr5+7ekuXHVy1V6+R275pEMd3kPbGB+Syeod/8D7Sf41NBvPdMf7a4uXpaTGY0zd+4r0vDlKtwdPqHf/BOzzf8zQYqvRtcz54mXfUNUVyUL0T7AhcrBbKY/C36p1geVEy1y00+F3fBA9eKFxnlRXJa/XOcKxnqeF6Pv1VvTPc7RuXai6K5LN6Z9hQSUsb2Rh86pviUultaScTg/sMD15YeqmcT8/bFx1Foi/umk9P3hcMfqTenrabBT5j8DGTwHivwelOCTwNrnfJm/Ol2U0GZ74WdE+dBn9+Z/z2J9UZ7IjB7dZv8gPl9RRJIq89BiN57QZ38trn04G8k62E6xjcHuQ1D+JEXrvBnbz2+XQgr30+/SCveT69ktceg4m8doOBvDG/CXnkkTezvOXPQB555JFHHnnkkUceeeSRRx555JFHHnnkkWcnmTzyyCOPPPLII4888sgjjzzfhDzyyCOPPPL+9Ff+eyCPPPLII4888sgjjzzyyCOPPPLII4888sgDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPy//CPAAPiZOI3BPDFQAAAAAElFTkSuQmCC";
+
+// Children
+const children = {
+    hamburger: {
+        unselected: `<a href="#" class="s-topbar--menu-btn" aria-label="menu"><span></span></a>`,
+        selected: `<a href="#" class="s-topbar--menu-btn is-selected" aria-label="menu"><span></span></a>`,
+    },
+    logo: `<a href="#" class="s-topbar--logo" aria-label="logo">${IconStackExchange}</a>`,
+    notice: {
+        default: `<a href="#" class="s-topbar--notice">old</a>`,
+        unread: `<a href="#" class="s-topbar--notice is-unread">new</a>`,
+    },
+    navigation: {
+        minimal: `<ol class="s-navigation fw-nowrap"><li><a href="#" class="s-navigation--item">Products</a></li></ol>`,
+        full: `<ol class="s-navigation fw-nowrap sm:d-none">
+            <li><a href="#" class="s-navigation--item">About</a></li>
+            <li><a href="#" class="s-navigation--item is-selected">Products</a></li>
+            <li><a href="#" class="s-navigation--item">For Teams</a></li>
+        </ol>`,
+    },
+    searchbar: {
+        input: `<div class="s-topbar--searchbar--input-group">
+            <input type="text" placeholder="Search…" value="" autocomplete="off" class="s-input s-input__search">
+            ${IconSearch.replace("svg-icon iconSearch", "s-input-icon s-input-icon__search svg-icon iconSearch")}
+        </div>`,
+        select: `<div class="s-select">
+            <select aria-label="Search scope">
+                <option selected="selected">All</option>
+                <option>Public</option>
+                <option>Private Team 1</option>
+            </select>
+        </div>`,
+    },
+    content: {
+        items: `
+            <li>
+                <a href="#" class="s-topbar--item" aria-label="Inbox">
+                    ${IconInbox} <span class="s-activity-indicator s-activity-indicator__danger">3</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="s-topbar--item" aria-label="Achievements">
+                    ${IconAchievements} <span class="s-activity-indicator s-activity-indicator__success">+10</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="s-topbar--item" aria-label="Review queues">
+                    ${IconReviewQueue}
+                    <div class="s-activity-indicator s-activity-indicator__danger">
+                        <div class="v-visible-sr">New activity</div>
+                    </div>
+                </a>
+            </li>
+            <li><a href="#" class="s-topbar--item" aria-label="Help center">${IconHelp}</a></li>
+            <li><a href="#" class="s-topbar--item" aria-label="Site switcher">${IconStackExchange}</a></li>
+            <li><a href="#" class="s-topbar--item" title="Moderator inbox">${IconModerator}</a></li>
+            <li>
+                <a href="#" class="s-topbar--item" title="8 posts flagged for moderator attention">
+                    <span class="s-badge s-badge__bounty">8</span>
+                </a>
+            </li>
+            `,
+        unset: `<li><a href="#" class="s-topbar--item" aria-label="Unset item">${IconAlert}</a></li>`,
+        loggedOut: `
+            <li>
+                <a href="#" class="s-topbar--item s-topbar--item__unset s-btn s-btn__outlined ws-nowrap">Log in</a>
+            </li>
+            <li>
+                <a href="#" class="s-topbar--item s-topbar--item__unset s-btn s-btn__filled ws-nowrap">Sign up</a>
+            </li>
+        `,
+        loggedIn: `<li>
+            <a href="#" class="s-topbar--item s-user-card s-user-card__small">
+                <span class="s-avatar s-avatar__24 s-user-card--avatar">
+                    <img class="s-avatar--image" alt="demo avatar" src="${base64Image}">
+                    <span class="v-visible-sr">John Doe</span>
+                </span>
+                <div class="s-user-card--info">
+                    <ul class="s-user-card--awards">
+                        <li class="s-user-card--rep">3,145</li>
+                        <li class="s-award-bling s-award-bling__gold">3</li>
+                        <li class="s-award-bling s-award-bling__silver">9</li>
+                        <li class="s-award-bling s-award-bling__bronze">20</li>
+                    </ul>
+                </div>
+            </a>
+        </li>`,
+    },
+};
+
+const topbarChildren = ({
+    hamburger = "",
+    loggedIn = true,
+    navigation = "",
+    notice = "",
+    searchInput = false,
+    searchSelect = false,
+    unsetItem = false,
+}: {
+    hamburger?: "" | "selected" | "unselected";
+    loggedIn?: boolean;
+    navigation?: "" | "minimal" | "full";
+    notice?: "" | "default" | "unread";
+    searchInput?: boolean;
+    searchSelect?: boolean;
+    unsetItem?: boolean;
+}) => {
+    return `
+        <div class="s-topbar--container">
+            ${hamburger ? (hamburger === "unselected" ? children.hamburger.unselected : children.hamburger.selected) : ""}
+            ${children.logo}
+            ${notice ? (notice === "default" ? children.notice.default : children.notice.unread) : ""}
+            ${
+                navigation
+                    ? `
+                <nav aria-label="Demo primary navigation" role="presentation">
+                    <ol class="s-navigation fw-nowrap sm:d-none">
+                        ${navigation === "minimal" ? children.navigation.minimal : children.navigation.full}
+                    </ol>
+                </nav>
+            `
+                    : ""
+            }
+            ${
+                searchInput
+                    ? `
+                <form class="s-topbar--searchbar" autocomplete="off">
+                    ${searchSelect ? children.searchbar.select : ""}
+                    ${children.searchbar.input}
+                </form>
+            `
+                    : ""
+            }
+            <nav class="s-topbar--navigation" aria-label="Demo secondary navigation" role="presentation">
+                <ol class="s-topbar--content">
+                    ${unsetItem ? children.content.unset : ""}
+                    ${children.content.items}
+                    ${loggedIn ? children.content.loggedIn : children.content.loggedOut}
+                </ol>
+            </nav>
+        </div>
+    `;
+};
+
+// Configurations
+const topbars = {
+    default: topbarChildren({ hamburger: "unselected" }),
+    advanced: topbarChildren({
+        navigation: "minimal",
+        notice: "default",
+        searchInput: true,
+        searchSelect: true,
+        unsetItem: true,
+    }),
+    input: topbarChildren({ navigation: "minimal", searchInput: true }),
+    alt: topbarChildren({
+        hamburger: "selected",
+        navigation: "full",
+        notice: "unread",
+        searchInput: true,
+        searchSelect: true,
+        unsetItem: true,
+    }),
+};
+
+describe("topbar", () => {
+    runVisualTests({
+        baseClass: "s-topbar",
+        tag: "header",
+        children: topbars,
+        variants: ["dark variant", "light variant"], // `variant` added to make file labeling clearer
+    });
+});

package/lib/components/uploader/uploader.less

@@ -91,7 +91,7 @@
     & &--input {
         &:focus:focus-visible + .s-uploader--container {
             background-color: var(--_up-bg-focus);
-            box-shadow: 0 0 0 var(--su-static4) var(--_up-focus-ring-color);
+            .focus-styles();
         }
 
         cursor: pointer;

package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap

@@ -359,6 +359,8 @@ body .themed {
     --translucent-warning: hsla(47, 79%, 58%, 0.4);
     --translucent-error: hsla(358, 62%, 47%, 0.15);
     --translucent-muted: hsla(210, 8%, 15%, 0.1);
+    --focus-neutral: var(--white);
+    --focus-theme: var(--theme-secondary-400);
     --focus-ring: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
     --focus-ring-success: hsla(140, 40%, 75%, 0.4);
     --focus-ring-warning: hsla(47, 79%, 58%, 0.4);

package/lib/exports/__snapshots__/color.less.test.ts.snap

@@ -147,6 +147,8 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --translucent-warning: hsla(47, 79%, 58%, 0.4);
     --translucent-error: hsla(358, 62%, 47%, 0.15);
     --translucent-muted: hsla(210, 8%, 15%, 0.1);
+    --focus-neutral: var(--white);
+    --focus-theme: var(--theme-secondary-400);
     --focus-ring: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
     --focus-ring-success: hsla(140, 40%, 75%, 0.4);
     --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -280,6 +282,8 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --translucent-warning: hsla(47, 79%, 58%, 0.4);
     --translucent-error: hsla(358, 62%, 47%, 0.15);
     --translucent-muted: hsla(210, 8%, 15%, 0.1);
+    --focus-neutral: var(--white);
+    --focus-theme: var(--theme-secondary-400);
     --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
     --focus-ring-success: hsla(140, 40%, 75%, 0.4);
     --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -411,6 +415,8 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
         --translucent-warning: hsla(47, 79%, 58%, 0.4);
         --translucent-error: hsla(358, 62%, 47%, 0.15);
         --translucent-muted: hsla(210, 8%, 15%, 0.1);
+        --focus-neutral: var(--white);
+        --focus-theme: var(--theme-secondary-400);
         --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
         --focus-ring-success: hsla(140, 40%, 75%, 0.4);
         --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -542,6 +548,8 @@ body.theme-highcontrast.theme-system .theme-light__forced {
     --translucent-warning: hsla(47, 76%, 46%, 0.9);
     --translucent-error: hsla(358, 62%, 47%, 0.9);
     --translucent-muted: hsla(210, 8%, 55%, 0.95);
+    --focus-neutral: var(--white);
+    --focus-theme: var(--theme-secondary-400);
     --focus-ring: hsla(206, 100%, 40%, 0.9);
     --focus-ring-success: hsla(140, 40%, 40%, 0.9);
     --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -655,6 +663,8 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --translucent-warning: hsla(47, 76%, 46%, 0.9);
     --translucent-error: hsla(358, 62%, 47%, 0.9);
     --translucent-muted: hsla(210, 8%, 55%, 0.95);
+    --focus-neutral: var(--white);
+    --focus-theme: var(--theme-secondary-400);
     --focus-ring: hsla(206, 100%, 40%, 0.9);
     --focus-ring-success: hsla(140, 40%, 40%, 0.9);
     --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -768,6 +778,8 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
         --translucent-warning: hsla(47, 76%, 46%, 0.9);
         --translucent-error: hsla(358, 62%, 47%, 0.9);
         --translucent-muted: hsla(210, 8%, 55%, 0.95);
+        --focus-neutral: var(--white);
+        --focus-theme: var(--theme-secondary-400);
         --focus-ring: hsla(206, 100%, 40%, 0.9);
         --focus-ring-success: hsla(140, 40%, 40%, 0.9);
         --focus-ring-warning: hsla(47, 76%, 46%, 0.9);

package/lib/exports/color-sets.less

@@ -453,22 +453,28 @@
     muted: hsla(210, 8%, 55%, 0.95);
 }
 
-// focus (sets represents both light and dark mode)
+// focus colors used for accessible focus styles
 .set-focus() {
+    neutral: var(--white);
+    theme: var(--theme-secondary-400);
+}
+
+// focus ring (sets represents both light and dark mode)
+.set-focus-ring() {
     default: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
     success: hsla(140, 40%, 75%, 0.4);
     warning: hsla(47, 79%, 58%, 0.4);
     error: hsla(358, 62%, 47%, 0.15);
     muted: hsla(210, 8%, 15%, 0.1);
 }
-.set-focus-dark() {
+.set-focus-ring-dark() {
     default: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
     success: hsla(140, 40%, 75%, 0.4);
     warning: hsla(47, 79%, 58%, 0.4);
     error: hsla(358, 62%, 47%, 0.15);
     muted: hsla(210, 8%, 15%, 0.1);
 }
-.set-focus-hc() {
+.set-focus-ring-hc() {
     default: hsla(206, 100%, 40%, 0.9);
     success: hsla(140, 40%, 40%, 0.9);
     warning: hsla(47, 76%, 46%, 0.9);
@@ -631,7 +637,8 @@
     bc: .set-bc();
     bs: .set-bs();
     translucent: .set-translucent();
-    focus-ring: .set-focus();
+    focus: .set-focus();
+    focus-ring: .set-focus-ring();
     highlight: .set-highlight();
     scrollbar: .set-scrollbar();
 }
@@ -640,7 +647,8 @@
     bc: .set-bc();
     bs: .set-bs-dark();
     translucent: .set-translucent-dark();
-    focus-ring: .set-focus-dark();
+    focus: .set-focus();
+    focus-ring: .set-focus-ring-dark();
     highlight: .set-highlight-dark();
     scrollbar: .set-scrollbar-dark();
 }
@@ -649,7 +657,8 @@
     bc: .set-bc-hc();
     bs: .set-bs-hc();
     translucent: .set-translucent-hc();
-    focus-ring: .set-focus-hc();
+    focus: .set-focus();
+    focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc();
     scrollbar: .set-scrollbar-hc();
 }
@@ -658,7 +667,8 @@
     bc: .set-bc-hc();
     bs: .set-bs-hc-dark();
     translucent: .set-translucent-hc();
-    focus-ring: .set-focus-hc();
+    focus: .set-focus();
+    focus-ring: .set-focus-ring-hc();
     highlight: .set-highlight-hc-dark();
     scrollbar: .set-scrollbar-hc-dark();
 }

package/lib/exports/mixins.less

@@ -110,6 +110,39 @@
 }
 
 
+/**
+ * Focus styles for the given context.
+ *
+ * Usage example:
+ * .focus-styles(true, true);
+ *
+ * @inset: boolean - whether the focus style be placed inside the element.
+ * @border: boolean - whether the element's border color change to match the focus style.
+ */
+.focus-styles(@inset: false, @border: false) {
+    & when not (@inset) and not (@border) {
+        box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+    }
+
+    & when not (@inset) and (@border) {
+        border-color: var(--focus-neutral) !important;
+        box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
+    }
+
+    & when (@inset) and not (@border) {
+        box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+    }
+
+    & when (@inset) and (@border) {
+        border-color: var(--focus-theme) !important;
+        box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
+    }
+
+    // We include a 2px transparent outline to ensure Windows High Contrast Forced Color Mode
+    // includes outlines as expected See https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
+    outline: var(--su-static2) solid transparent !important;
+}
+
 //  =============================================================================
 //  --  COLORS
 //      The following mixins let us do color math on the browser. They take a

package/lib/input-utils.less

@@ -17,19 +17,16 @@
 
     .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-500);
-        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
         @warning();
     }
 }