diff --git a/lib/components/topbar/topbar.visual.test.ts b/lib/components/topbar/topbar.visual.test.ts
new file mode 100644
index 0000000000..640407daeb
--- /dev/null
+++ b/lib/components/topbar/topbar.visual.test.ts
@@ -0,0 +1,189 @@
+import { runComponentTests } from "../../test/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: ``,
+ selected: ``,
+ },
+ logo: `${IconStackExchange}`,
+ notice: {
+ default: `old`,
+ unread: `new`,
+ },
+ navigation: {
+ minimal: `
- Products
`,
+ full: `
+ - About
+ - Products
+ - For Teams
+
`,
+ },
+ searchbar: {
+ input: `
+
+ ${IconSearch.replace("svg-icon iconSearch", "s-input-icon s-input-icon__search svg-icon iconSearch")}
+
`,
+ select: `
+
+
`,
+ },
+ content: {
+ items: `
+
+
+ ${IconInbox} 3
+
+
+
+
+ ${IconAchievements} +10
+
+
+
+
+ ${IconReviewQueue}
+
+
+
+ ${IconHelp}
+ ${IconStackExchange}
+ ${IconModerator}
+
+
+ 8
+
+
+ `,
+ unset: `${IconAlert}`,
+ loggedOut: `
+
+ Log in
+
+
+ Sign up
+
+ `,
+ loggedIn: `
+
+
+
+ John Doe
+
+
+
+ `,
+ },
+};
+
+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 `
+
+ ${hamburger ? (hamburger === "unselected" ? children.hamburger.unselected : children.hamburger.selected) : ""}
+ ${children.logo}
+ ${notice ? (notice === "default" ? children.notice.default : children.notice.unread) : ""}
+ ${
+ navigation
+ ? `
+
+ `
+ : ""
+ }
+ ${
+ searchInput
+ ? `
+
+ `
+ : ""
+ }
+
+
+ `;
+};
+
+// 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", () => {
+ runComponentTests({
+ type: "visual",
+ baseClass: "s-topbar",
+ tag: "header",
+ children: topbars,
+ variants: ["dark variant", "light variant"], // `variant` added to make file labeling clearer
+ });
+});
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-advanced.png b/screenshots/Chromium/baseline/s-topbar-dark-advanced.png
new file mode 100644
index 0000000000..78d0783228
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:24fac22709232b6881bcb8444b524826efa2793b47ce9a347c610b591fafb15d
+size 10956
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-alt.png b/screenshots/Chromium/baseline/s-topbar-dark-alt.png
new file mode 100644
index 0000000000..7feef0d733
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:71502b8c754deddd8b5900912ab8ccce3306ce24f818f88336ff057bbc369f75
+size 10712
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-dark-variant-advanced.png b/screenshots/Chromium/baseline/s-topbar-dark-dark-variant-advanced.png
new file mode 100644
index 0000000000..8d45130638
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:619336b53e5a8034564ec53ca6f7b8950a55339607a6b83125386b99711c9ac3
+size 10965
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-dark-variant-alt.png b/screenshots/Chromium/baseline/s-topbar-dark-dark-variant-alt.png
new file mode 100644
index 0000000000..8291985ca1
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0b847415e857e865e0b28cbdaa3e7d0ac1ad975b9a1c2239b2492ff6483c5fb1
+size 10729
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-dark-variant-input.png b/screenshots/Chromium/baseline/s-topbar-dark-dark-variant-input.png
new file mode 100644
index 0000000000..c5483b9faa
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:40dd1dcff73c9ab219d3922f91f8e2963ab59bceb7da7b1c0a339b78f73e9a1a
+size 9863
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-dark-variant.png b/screenshots/Chromium/baseline/s-topbar-dark-dark-variant.png
new file mode 100644
index 0000000000..2753bc7386
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ad82e3ceb6e9ca39eff78f6a39c63cff04fc5d701f06baa2547c34794f085aa
+size 7071
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-input.png b/screenshots/Chromium/baseline/s-topbar-dark-input.png
new file mode 100644
index 0000000000..d97f712090
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ca07b0a5daca01536cc6def213c8c3ef51bab7ff57e9ed5075bc61d6dddc121e
+size 9909
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-light-variant-advanced.png b/screenshots/Chromium/baseline/s-topbar-dark-light-variant-advanced.png
new file mode 100644
index 0000000000..da2592dd06
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1977344cd111b8033c31c401ff0b39eebc47b178e54d5a6f84099fb23900a6a9
+size 10471
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-light-variant-alt.png b/screenshots/Chromium/baseline/s-topbar-dark-light-variant-alt.png
new file mode 100644
index 0000000000..662bafefdc
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dc314e5e14e33eb79efa77442bf8e4ff9f93c016d37b6115009459ff9890705c
+size 10195
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-light-variant-input.png b/screenshots/Chromium/baseline/s-topbar-dark-light-variant-input.png
new file mode 100644
index 0000000000..8007d48b78
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:75a5b5c636b12554109450b809f8c1760997eecaa7699fa4b8fb6e326d5159b7
+size 9319
diff --git a/screenshots/Chromium/baseline/s-topbar-dark-light-variant.png b/screenshots/Chromium/baseline/s-topbar-dark-light-variant.png
new file mode 100644
index 0000000000..bb30ecf626
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0814a853c4e536744827c2ca9178fc323b37c8928d80908eac7b29c28c20fe69
+size 6681
diff --git a/screenshots/Chromium/baseline/s-topbar-dark.png b/screenshots/Chromium/baseline/s-topbar-dark.png
new file mode 100644
index 0000000000..f385675c55
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8bec26531df97aafa9bb8849cbae75d6c33fc7aada1f8fc5c78831ca984dfcc7
+size 7141
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-advanced.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-advanced.png
new file mode 100644
index 0000000000..b61fd19c08
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fe39e78fcb7f50a1011f005cb1923d6d09c7820d560b0358ad5422fbffeb7ab4
+size 10583
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-alt.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-alt.png
new file mode 100644
index 0000000000..e4b4cb454e
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d04ea227d4a97d4db9bb606d41da8ef81ca287d1ac2c7ffa42047a9b73c95a9
+size 10391
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-advanced.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-advanced.png
new file mode 100644
index 0000000000..ec58f091cb
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e3c5f27d65e72304f516f42ddb96d31ed9d0723570236f56304b98598e7c17f
+size 11013
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-alt.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-alt.png
new file mode 100644
index 0000000000..ce14d71fe0
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e0d1f375ddd883b1e2faec75e89111d99b542b53df814e83efac6352d8ab219
+size 10866
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-input.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-input.png
new file mode 100644
index 0000000000..9209077f24
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:97124b923290938cbd0dce7628d53ef1ed51d2bf7c1a578e6bccd9d86d568c16
+size 9972
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant.png
new file mode 100644
index 0000000000..d147d40968
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e4f9e7a4d62918008d605dbafa65c0c9e16188093bbd7fe2a240123c10b3c49e
+size 7414
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-input.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-input.png
new file mode 100644
index 0000000000..8833cd7f7e
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:95a164feff6526e0e3c231e21f99e60718e259aa7527bb9473728599eee00d2c
+size 9582
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant-advanced.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant-advanced.png
new file mode 100644
index 0000000000..f5021220f2
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:92df922070745c39eb25ba6ca255cfe7967af02afa6bfe172b4f475913c95f47
+size 10268
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant-alt.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant-alt.png
new file mode 100644
index 0000000000..b7744e2742
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:858836f1d29150401a18cd3f7c75961a30662b9fe3ec884231f0fc4361fde98e
+size 10194
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant-input.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant-input.png
new file mode 100644
index 0000000000..fe20bdc84e
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bbea4e4a08a30dc59e517b1a663b9e9675f3b84c5525e0df1e4b9934b0ace7f6
+size 9291
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant.png
new file mode 100644
index 0000000000..fb8483ffce
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a95e68ea399b44d570cd51ccc69706a7cb50e2b5faa98a2e4da398dcc10b07e6
+size 6566
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-dark.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark.png
new file mode 100644
index 0000000000..fa347883d4
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:263839e3e9da301416a04f3488820d6440ae94a29f5ff887036de0dc69b12f41
+size 6913
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-advanced.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-advanced.png
new file mode 100644
index 0000000000..aa8ced5529
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c53f559313762de2ea878af548bbfa25d770e42ccd9d06ded863b48aaf8267a7
+size 10588
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-alt.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-alt.png
new file mode 100644
index 0000000000..8ca1545cca
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b9b237509712ef676ad9e348cae16e78d73d78e2338f46e22e9b87126c4830c
+size 10493
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant-advanced.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant-advanced.png
new file mode 100644
index 0000000000..5cab9d2254
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:84d08b3cae98ad1da5e1784ec4bb75359f4f45dc5009688eafda9c5a35f9914c
+size 10872
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant-alt.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant-alt.png
new file mode 100644
index 0000000000..40670b2efb
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8fbcc93ccbb957144daed9971d44a03f7483cb145ac8ad8a51f100cfd9e920b7
+size 10555
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant-input.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant-input.png
new file mode 100644
index 0000000000..e70c78835a
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ec4411da1c2841f96eeae77fb5f367032c1a0da7fb1e5cbad816a47f30a6e18
+size 9825
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant.png
new file mode 100644
index 0000000000..a439b81eec
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:97973020891b4c5c64fd949924d65b5e6c0bf03c2fcd7062ab40110a48d5817a
+size 7241
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-input.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-input.png
new file mode 100644
index 0000000000..ef6e7a60bc
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5f90c98eb521fded38694cace6d81d230c65513bbcab8c89864d2701cbc53532
+size 9675
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant-advanced.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant-advanced.png
new file mode 100644
index 0000000000..aa8ced5529
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c53f559313762de2ea878af548bbfa25d770e42ccd9d06ded863b48aaf8267a7
+size 10588
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant-alt.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant-alt.png
new file mode 100644
index 0000000000..8ca1545cca
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b9b237509712ef676ad9e348cae16e78d73d78e2338f46e22e9b87126c4830c
+size 10493
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant-input.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant-input.png
new file mode 100644
index 0000000000..ef6e7a60bc
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5f90c98eb521fded38694cace6d81d230c65513bbcab8c89864d2701cbc53532
+size 9675
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant.png
new file mode 100644
index 0000000000..1771ada0ac
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e3ad699e5f57d84e15cf866829a541263f3af387fbf4924b6165de3ee3440058
+size 6927
diff --git a/screenshots/Chromium/baseline/s-topbar-highcontrast-light.png b/screenshots/Chromium/baseline/s-topbar-highcontrast-light.png
new file mode 100644
index 0000000000..1771ada0ac
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e3ad699e5f57d84e15cf866829a541263f3af387fbf4924b6165de3ee3440058
+size 6927
diff --git a/screenshots/Chromium/baseline/s-topbar-light-advanced.png b/screenshots/Chromium/baseline/s-topbar-light-advanced.png
new file mode 100644
index 0000000000..f500f15fee
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:918e47ea3cb5d30ca17f29cf7ae9defcf7c046124cacff4d32fdf463eb52d1f7
+size 10517
diff --git a/screenshots/Chromium/baseline/s-topbar-light-alt.png b/screenshots/Chromium/baseline/s-topbar-light-alt.png
new file mode 100644
index 0000000000..50a1e507f2
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d92f40059aef38324f37fea0e731d9829b06ffa3e795452186a0350a22cde99
+size 10170
diff --git a/screenshots/Chromium/baseline/s-topbar-light-dark-variant-advanced.png b/screenshots/Chromium/baseline/s-topbar-light-dark-variant-advanced.png
new file mode 100644
index 0000000000..1e221cc240
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:560ab15a2babeb58db21d157992082fcd839cb3d791138f406dd5d14eee742e2
+size 10918
diff --git a/screenshots/Chromium/baseline/s-topbar-light-dark-variant-alt.png b/screenshots/Chromium/baseline/s-topbar-light-dark-variant-alt.png
new file mode 100644
index 0000000000..1d63f75707
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:65cedaa80c3efa5356f6afddedcd277dd42fa34b54163220f89841b4e15552ea
+size 10548
diff --git a/screenshots/Chromium/baseline/s-topbar-light-dark-variant-input.png b/screenshots/Chromium/baseline/s-topbar-light-dark-variant-input.png
new file mode 100644
index 0000000000..683e568558
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:06f9b48d72d1de26d6b62c4bd333705f1419a5666061b60e3926c0616627004d
+size 9809
diff --git a/screenshots/Chromium/baseline/s-topbar-light-dark-variant.png b/screenshots/Chromium/baseline/s-topbar-light-dark-variant.png
new file mode 100644
index 0000000000..21b99f0ade
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:36d9ed138dee35a5e26226cc590844c630c16a95d91a9e25ffa99dca67d15ca0
+size 7005
diff --git a/screenshots/Chromium/baseline/s-topbar-light-input.png b/screenshots/Chromium/baseline/s-topbar-light-input.png
new file mode 100644
index 0000000000..a36747af08
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c1e158b5fcef4943b4b264f5cf2dc5072f39abf7bd7f1206496d4e0889f34d93
+size 9389
diff --git a/screenshots/Chromium/baseline/s-topbar-light-light-variant-advanced.png b/screenshots/Chromium/baseline/s-topbar-light-light-variant-advanced.png
new file mode 100644
index 0000000000..f500f15fee
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:918e47ea3cb5d30ca17f29cf7ae9defcf7c046124cacff4d32fdf463eb52d1f7
+size 10517
diff --git a/screenshots/Chromium/baseline/s-topbar-light-light-variant-alt.png b/screenshots/Chromium/baseline/s-topbar-light-light-variant-alt.png
new file mode 100644
index 0000000000..50a1e507f2
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d92f40059aef38324f37fea0e731d9829b06ffa3e795452186a0350a22cde99
+size 10170
diff --git a/screenshots/Chromium/baseline/s-topbar-light-light-variant-input.png b/screenshots/Chromium/baseline/s-topbar-light-light-variant-input.png
new file mode 100644
index 0000000000..a36747af08
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c1e158b5fcef4943b4b264f5cf2dc5072f39abf7bd7f1206496d4e0889f34d93
+size 9389
diff --git a/screenshots/Chromium/baseline/s-topbar-light-light-variant.png b/screenshots/Chromium/baseline/s-topbar-light-light-variant.png
new file mode 100644
index 0000000000..e7dd2ed7b5
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7a536dba2705f39e97807943abc71cd9e7aba510825ddc2c55e3b6224a697685
+size 6723
diff --git a/screenshots/Chromium/baseline/s-topbar-light.png b/screenshots/Chromium/baseline/s-topbar-light.png
new file mode 100644
index 0000000000..e7dd2ed7b5
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-topbar-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7a536dba2705f39e97807943abc71cd9e7aba510825ddc2c55e3b6224a697685
+size 6723
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-advanced.png b/screenshots/Firefox/baseline/s-topbar-dark-advanced.png
new file mode 100644
index 0000000000..2e002f9764
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ccd7725c8870696056d6149d5c5c5db320413b2ac0964bb6aff986245a9bcdd2
+size 11086
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-alt.png b/screenshots/Firefox/baseline/s-topbar-dark-alt.png
new file mode 100644
index 0000000000..0c75b4e4a2
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:75a07f5725eaefea9ff049a6d4d4abc1cd81ce666f220740a000a627d4d819fa
+size 10822
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-dark-variant-advanced.png b/screenshots/Firefox/baseline/s-topbar-dark-dark-variant-advanced.png
new file mode 100644
index 0000000000..756950ccec
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:96ab05de5381b416bb7fed337b2113a517ecc59881c1f7f46c706d3dee92dcbd
+size 11462
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-dark-variant-alt.png b/screenshots/Firefox/baseline/s-topbar-dark-dark-variant-alt.png
new file mode 100644
index 0000000000..402eff0f1b
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9f0441d17799a1c4904117153e5e36cfb9fd90bf75cb5d932e7afe1ccae55b4b
+size 11146
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-dark-variant-input.png b/screenshots/Firefox/baseline/s-topbar-dark-dark-variant-input.png
new file mode 100644
index 0000000000..02bf677bdf
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:13b29de21e72fb7d14649777e5573af75b89f35eafde06982a1ceb04ffd6a22b
+size 10455
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-dark-variant.png b/screenshots/Firefox/baseline/s-topbar-dark-dark-variant.png
new file mode 100644
index 0000000000..bd19a0232c
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9aef3d4950af66535ba4653c56484ed974104a62d5036580dacbf07d2b76ae46
+size 7852
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-input.png b/screenshots/Firefox/baseline/s-topbar-dark-input.png
new file mode 100644
index 0000000000..a6b0aa97dd
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:22628e9a26f5ecd2f639e03ba61ef93f6bae4bea151cc1c6390a056020ae605a
+size 10161
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-light-variant-advanced.png b/screenshots/Firefox/baseline/s-topbar-dark-light-variant-advanced.png
new file mode 100644
index 0000000000..57f69ba890
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f463bc828dccab32b9eb895e0f9a5dda80a46a7854e0a166abc181e2f0250f07
+size 10520
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-light-variant-alt.png b/screenshots/Firefox/baseline/s-topbar-dark-light-variant-alt.png
new file mode 100644
index 0000000000..62852ca2c9
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a7bc705b0a902376b365fcd574ef26babdc353c7faa8cbe4b53b85391f425d1c
+size 10334
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-light-variant-input.png b/screenshots/Firefox/baseline/s-topbar-dark-light-variant-input.png
new file mode 100644
index 0000000000..f29914d79d
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d34329e9dfa0186368b1246f2efea82d2e051719c9aaf01520c6b42e258341ae
+size 9571
diff --git a/screenshots/Firefox/baseline/s-topbar-dark-light-variant.png b/screenshots/Firefox/baseline/s-topbar-dark-light-variant.png
new file mode 100644
index 0000000000..cdf3e1aa53
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:60741069f31095e79682d2afbafc62faa4cc939c6b69e9960723a75191082d66
+size 7327
diff --git a/screenshots/Firefox/baseline/s-topbar-dark.png b/screenshots/Firefox/baseline/s-topbar-dark.png
new file mode 100644
index 0000000000..a0058412c6
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9dda06da461d43b3ec4b310321e048353814dc3f8df80ba2d410a643d2fe468c
+size 7796
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-advanced.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-advanced.png
new file mode 100644
index 0000000000..e9ab98e949
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:db32f4eb8fb3cb62dcf20140566df8a8a6c82561638df87f9c0d461c63dfbac0
+size 10389
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-alt.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-alt.png
new file mode 100644
index 0000000000..34cd378b66
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9b4e25b374fb130caee8ba631dd6814b413bab0bf7bf19e0e8e58c7d6286e7f9
+size 10378
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant-advanced.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant-advanced.png
new file mode 100644
index 0000000000..ba9c6e43fd
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5345f9c5fd32fc2773abba5b92ee59e655a40cb7d7e846a69b46e00b9f0489b9
+size 11244
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant-alt.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant-alt.png
new file mode 100644
index 0000000000..7cb8c92c0d
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:483c3056e484fc30edf33e81b32fdb12f24b4d6df145fb8d5f7fb814745727f9
+size 11003
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant-input.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant-input.png
new file mode 100644
index 0000000000..33aac9603c
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b593328e9dd3f65db4a271ce9892f3c086705f605b22ccf6e39078a8b80ba172
+size 10225
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant.png
new file mode 100644
index 0000000000..739166b0c8
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:28f00cd8b7a4bac2010eaad3e4719ff5df9356afb61495dd2462f5a5ba9e9dd6
+size 7889
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-input.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-input.png
new file mode 100644
index 0000000000..b3d8644346
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:94b56aa5a85969d4e41957495b903924ed51c417d807404bf37a23685818223e
+size 9522
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant-advanced.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant-advanced.png
new file mode 100644
index 0000000000..36d677eb3a
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f0eb615b94777d48069064c52ac05ea1d44b442f9c5e16955e61981572ae9e75
+size 10580
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant-alt.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant-alt.png
new file mode 100644
index 0000000000..b6961bb566
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:178c6204acb31a42b8c4521fe63cb684fe927bb82dfb6651bcca13bf4ca3aa41
+size 10371
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant-input.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant-input.png
new file mode 100644
index 0000000000..42a3290a0e
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eef4b7e1801628a51693eee16d04d0a14e242402756abfd3a541c2a2b8d45405
+size 9634
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant.png
new file mode 100644
index 0000000000..97058af677
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:76b2920a91d3809fa4e8675f14d559a5973ec2a7d82e20f294c9956f959fbbdc
+size 7301
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-dark.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark.png
new file mode 100644
index 0000000000..3b3d5114ef
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f0286a694fdc4a0f17fa47da22f448c69267f80d450058478ecb8b2790686dcb
+size 7428
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-advanced.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-advanced.png
new file mode 100644
index 0000000000..a2fe361c0a
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d4214843857411fade4c862c35e803b192b4246a3ea27003133fe657be35e28a
+size 10823
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-alt.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-alt.png
new file mode 100644
index 0000000000..a136cf5b07
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6c499ce47fa5c9b5144a39714f7042b43e5bc94c47df5a6edd6907704040068e
+size 10482
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant-advanced.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant-advanced.png
new file mode 100644
index 0000000000..80f688bf94
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3191e8f913e80507fb9cbfb01049ec0554353359e2ea2dd9d9abc0a273157936
+size 11138
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant-alt.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant-alt.png
new file mode 100644
index 0000000000..7ba69af6d4
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:46d0f55d8076f9dde73c25cf6375a3692303f4b198411073248e952aff2d946d
+size 10795
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant-input.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant-input.png
new file mode 100644
index 0000000000..7cf5afe4b1
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:44679da126510a1108a651d41994296fe5dd4c17299ecfd054d33614c9cb9990
+size 10112
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant.png
new file mode 100644
index 0000000000..fa6121f64f
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0f726d63c6b16803ab63091d5aa8dad030c366896733f7a28a0aa38b0d12d27d
+size 7763
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-input.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-input.png
new file mode 100644
index 0000000000..f28d650b9a
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:adc0c3d39b220e62be60002b069019726a7b8520620bb08702f0f5bfa5e1f2e2
+size 9847
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant-advanced.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant-advanced.png
new file mode 100644
index 0000000000..a2fe361c0a
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d4214843857411fade4c862c35e803b192b4246a3ea27003133fe657be35e28a
+size 10823
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant-alt.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant-alt.png
new file mode 100644
index 0000000000..a136cf5b07
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6c499ce47fa5c9b5144a39714f7042b43e5bc94c47df5a6edd6907704040068e
+size 10482
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant-input.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant-input.png
new file mode 100644
index 0000000000..f28d650b9a
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:adc0c3d39b220e62be60002b069019726a7b8520620bb08702f0f5bfa5e1f2e2
+size 9847
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant.png
new file mode 100644
index 0000000000..d47338b053
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f5e2c881140ab7ae81b48a7437c0684357a0e3a57027a929a6608945b2c38625
+size 7544
diff --git a/screenshots/Firefox/baseline/s-topbar-highcontrast-light.png b/screenshots/Firefox/baseline/s-topbar-highcontrast-light.png
new file mode 100644
index 0000000000..d47338b053
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f5e2c881140ab7ae81b48a7437c0684357a0e3a57027a929a6608945b2c38625
+size 7544
diff --git a/screenshots/Firefox/baseline/s-topbar-light-advanced.png b/screenshots/Firefox/baseline/s-topbar-light-advanced.png
new file mode 100644
index 0000000000..0cb3deaf43
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aebebae4a2d68a4d60b5a9b8d4e97d61b0b5379541e4e0a19180ee6187855e4d
+size 10551
diff --git a/screenshots/Firefox/baseline/s-topbar-light-alt.png b/screenshots/Firefox/baseline/s-topbar-light-alt.png
new file mode 100644
index 0000000000..b7acac2458
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f280cd9d42c62d0e9a530f79df0e797161c03ea4029bc1d0efa49bfb449e5a28
+size 10321
diff --git a/screenshots/Firefox/baseline/s-topbar-light-dark-variant-advanced.png b/screenshots/Firefox/baseline/s-topbar-light-dark-variant-advanced.png
new file mode 100644
index 0000000000..498c81faf2
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cc67972b8745a1c68b0bbaae5685fba75a22cc8c0e3d4c373df8ea025977a362
+size 11439
diff --git a/screenshots/Firefox/baseline/s-topbar-light-dark-variant-alt.png b/screenshots/Firefox/baseline/s-topbar-light-dark-variant-alt.png
new file mode 100644
index 0000000000..851a55189e
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b4d908ed13904693f8077a4c68ecfbd83f4ce07c2d1a255655a4f7c74c96e52
+size 10974
diff --git a/screenshots/Firefox/baseline/s-topbar-light-dark-variant-input.png b/screenshots/Firefox/baseline/s-topbar-light-dark-variant-input.png
new file mode 100644
index 0000000000..9baae696b2
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:97eda3b8948517b877e1d84b4d565778a92327684c4170cb6e43296eb973b5cf
+size 10423
diff --git a/screenshots/Firefox/baseline/s-topbar-light-dark-variant.png b/screenshots/Firefox/baseline/s-topbar-light-dark-variant.png
new file mode 100644
index 0000000000..7b4e92e2a0
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cba2a24643b21509a5b5c7c0624f548cd07b60565f82eb40a00f1f5782be3456
+size 7832
diff --git a/screenshots/Firefox/baseline/s-topbar-light-input.png b/screenshots/Firefox/baseline/s-topbar-light-input.png
new file mode 100644
index 0000000000..25734bb5d6
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:be6fe04fcad9d23bcba4c05d2b53d968589c803be005208f6999546e26125b11
+size 9620
diff --git a/screenshots/Firefox/baseline/s-topbar-light-light-variant-advanced.png b/screenshots/Firefox/baseline/s-topbar-light-light-variant-advanced.png
new file mode 100644
index 0000000000..0cb3deaf43
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aebebae4a2d68a4d60b5a9b8d4e97d61b0b5379541e4e0a19180ee6187855e4d
+size 10551
diff --git a/screenshots/Firefox/baseline/s-topbar-light-light-variant-alt.png b/screenshots/Firefox/baseline/s-topbar-light-light-variant-alt.png
new file mode 100644
index 0000000000..b7acac2458
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f280cd9d42c62d0e9a530f79df0e797161c03ea4029bc1d0efa49bfb449e5a28
+size 10321
diff --git a/screenshots/Firefox/baseline/s-topbar-light-light-variant-input.png b/screenshots/Firefox/baseline/s-topbar-light-light-variant-input.png
new file mode 100644
index 0000000000..25734bb5d6
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:be6fe04fcad9d23bcba4c05d2b53d968589c803be005208f6999546e26125b11
+size 9620
diff --git a/screenshots/Firefox/baseline/s-topbar-light-light-variant.png b/screenshots/Firefox/baseline/s-topbar-light-light-variant.png
new file mode 100644
index 0000000000..3d3b3db064
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4abd99f880fac8db70582b4e35b967265b4a7297db9c9cb2986fdf7c4e867d4b
+size 7386
diff --git a/screenshots/Firefox/baseline/s-topbar-light.png b/screenshots/Firefox/baseline/s-topbar-light.png
new file mode 100644
index 0000000000..3d3b3db064
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-topbar-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4abd99f880fac8db70582b4e35b967265b4a7297db9c9cb2986fdf7c4e867d4b
+size 7386
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-advanced.png b/screenshots/Webkit/baseline/s-topbar-dark-advanced.png
new file mode 100644
index 0000000000..8e114e0a2f
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:33ba426935f3c48ae264ae9a9c8c1ccb2b6ca7830c98f991ee81e2d5d21e33c9
+size 9880
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-alt.png b/screenshots/Webkit/baseline/s-topbar-dark-alt.png
new file mode 100644
index 0000000000..35cadb3592
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9e29a344e6fecb6dfbdc8f080d9cfda1cda04bcf4bb40c6b1230555c767d5f29
+size 9844
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-dark-variant-advanced.png b/screenshots/Webkit/baseline/s-topbar-dark-dark-variant-advanced.png
new file mode 100644
index 0000000000..e957354316
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0729eba35236b2f60eb331da4c12c4be468a16f32c2e371d5adbff5d2eecc1de
+size 9893
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-dark-variant-alt.png b/screenshots/Webkit/baseline/s-topbar-dark-dark-variant-alt.png
new file mode 100644
index 0000000000..2faf8c822b
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d0fccd49bfedc2fd0b977d0bf5956a83c32a378419f640442eddb9e83762dd18
+size 9835
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-dark-variant-input.png b/screenshots/Webkit/baseline/s-topbar-dark-dark-variant-input.png
new file mode 100644
index 0000000000..908ee24b13
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e6bafe61132536ab68acd9d8e5e0bab343038c650e28e969351d99972a65e8f9
+size 8960
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-dark-variant.png b/screenshots/Webkit/baseline/s-topbar-dark-dark-variant.png
new file mode 100644
index 0000000000..b0c6f4fdb2
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:673833cfb9d0d3972cdc010d9b655001df773d9fecabc1fb27b42160903e2d9e
+size 6406
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-input.png b/screenshots/Webkit/baseline/s-topbar-dark-input.png
new file mode 100644
index 0000000000..7f4052da4d
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:71c754b9316fb3ec12fd097f028a5e5a7ce2875d304e3092033b8d04c8b1c162
+size 8913
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-light-variant-advanced.png b/screenshots/Webkit/baseline/s-topbar-dark-light-variant-advanced.png
new file mode 100644
index 0000000000..a5b98b0cd5
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:49f697f151ceb5b2b0e58b8a457843edad2a84dfb347420df5c28e3ad7391a8d
+size 9618
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-light-variant-alt.png b/screenshots/Webkit/baseline/s-topbar-dark-light-variant-alt.png
new file mode 100644
index 0000000000..c819c86c4d
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6250cee5765b3915178ffd352bff540d7d7a246bd18f1d9e32ef3ec03ad6d194
+size 9550
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-light-variant-input.png b/screenshots/Webkit/baseline/s-topbar-dark-light-variant-input.png
new file mode 100644
index 0000000000..7085798456
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1b3e2b101b8bc706c1e4224402d9f93b375702ddc09a0ae50be8e0d70641af40
+size 8609
diff --git a/screenshots/Webkit/baseline/s-topbar-dark-light-variant.png b/screenshots/Webkit/baseline/s-topbar-dark-light-variant.png
new file mode 100644
index 0000000000..eb899af6e1
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:da5ba369f61b7dbd1d51b2aaaef985f101e2b646199e7da809538d3ea347c369
+size 6200
diff --git a/screenshots/Webkit/baseline/s-topbar-dark.png b/screenshots/Webkit/baseline/s-topbar-dark.png
new file mode 100644
index 0000000000..1c676200ca
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c8f86817f09267da1201c40d87726129977f0f6d74dbbb6c060d8b70c414f487
+size 6445
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-advanced.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-advanced.png
new file mode 100644
index 0000000000..37fd986605
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a9bd71d3d4837723096dc48f7a20a13adcc4dcf2b7405e311e6a1169ebcd303c
+size 9513
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-alt.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-alt.png
new file mode 100644
index 0000000000..318f123177
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1bd3ccefa565242f45e345d71c44c42fe4f8086df50a4ae36b77f1f6b96f541c
+size 9724
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-advanced.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-advanced.png
new file mode 100644
index 0000000000..82073860f1
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3ca61564cb5dff445d8c1515d2614b439307981eafe1b3be32acceddba8f764a
+size 9698
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-alt.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-alt.png
new file mode 100644
index 0000000000..7af873f913
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c9a26bc17006a0350857cc1f95cb95ab140ef6ade37cbb579222d0ba6d9ccef3
+size 9818
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-input.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-input.png
new file mode 100644
index 0000000000..afe09bb170
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5b64a0e7efb17368351c5039ca49553fc8e831445b6d773e0e9c95ddf54a38ac
+size 8959
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant.png
new file mode 100644
index 0000000000..47af6217e2
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5cfe160186b25b274dd6f93ec178b26dad85f63c697e9ed78a98ab1934b5e1cc
+size 6573
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-input.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-input.png
new file mode 100644
index 0000000000..2dcd8b2453
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e0463db1da418ac40ffcfe5092bd4297de00f5902dffaab216eb5d0a06f8dcfd
+size 8724
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant-advanced.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant-advanced.png
new file mode 100644
index 0000000000..d27d771aa7
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e9fa3d423f5c5bf2627677c3d9f852793dfcc6dfddb58902f396e7d2136cd332
+size 9407
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant-alt.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant-alt.png
new file mode 100644
index 0000000000..844c2a1d05
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2cab3aeee66cca2c1a3278266b3134e52181390635575ac2430e7a5a5e7e373a
+size 9455
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant-input.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant-input.png
new file mode 100644
index 0000000000..4286c93eff
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2794e4531b63144495e7499f8af2d8e1725f3f60502f610db7f40682a113b9c1
+size 8497
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant.png
new file mode 100644
index 0000000000..1bad44c5ba
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:342e1529b955f0be408a862cc4d5fc911a411ff3d81e81274fae7e9507252fcc
+size 6085
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-dark.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark.png
new file mode 100644
index 0000000000..abab99f284
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a2ba482cc972870443dd9ea7c34148adb2572920d9de955cbdd57680f9544aa3
+size 6385
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-advanced.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-advanced.png
new file mode 100644
index 0000000000..12a2fc66fe
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:085abe22c1b03423a6bcba679765d04c7c6b4208f87050b39e879218d9b65b28
+size 9760
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-alt.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-alt.png
new file mode 100644
index 0000000000..bf2cbd6d1c
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:119f84ed3c19cf75836dab626080809f3cedc9f2979ed4619b5f3c5cb116d508
+size 9823
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant-advanced.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant-advanced.png
new file mode 100644
index 0000000000..e837cc5e74
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e95275917aa75ef71684f4d0adcc6b64e1f1588126dc34db2f0bfcabdf8563e4
+size 9601
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant-alt.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant-alt.png
new file mode 100644
index 0000000000..a47f8dfc4d
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:12f3abbbbd018df8718164c59f903cf011d0a0a16221d34dd3878790025ec55a
+size 9562
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant-input.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant-input.png
new file mode 100644
index 0000000000..b88ea376e9
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8a54f90aa8139a2391f3186b0d33b9090cf66bac50641e58a24951792cf0b380
+size 8727
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant.png
new file mode 100644
index 0000000000..b24bbe67ae
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:db5b6fb073305e322e096acd47c6b10e29ad01106c6dfc54ee1eb18d763c574e
+size 6387
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-input.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-input.png
new file mode 100644
index 0000000000..a7c45c533a
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ba544ecdddcfd962c6c58baa7f37b39c3542e67eae538fc8359652e03de4786
+size 8876
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant-advanced.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant-advanced.png
new file mode 100644
index 0000000000..12a2fc66fe
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:085abe22c1b03423a6bcba679765d04c7c6b4208f87050b39e879218d9b65b28
+size 9760
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant-alt.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant-alt.png
new file mode 100644
index 0000000000..16ed7a48da
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:23f274e718f2d0c5e225a3b4c08ed2723e66c0fd0ec898312104bda4a6880e27
+size 9785
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant-input.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant-input.png
new file mode 100644
index 0000000000..a7c45c533a
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ba544ecdddcfd962c6c58baa7f37b39c3542e67eae538fc8359652e03de4786
+size 8876
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant.png
new file mode 100644
index 0000000000..c2443e4282
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b97edbdc32025069103f473ebacc61475dada73e25ae99c97251166a5ca5712d
+size 6473
diff --git a/screenshots/Webkit/baseline/s-topbar-highcontrast-light.png b/screenshots/Webkit/baseline/s-topbar-highcontrast-light.png
new file mode 100644
index 0000000000..c2443e4282
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b97edbdc32025069103f473ebacc61475dada73e25ae99c97251166a5ca5712d
+size 6473
diff --git a/screenshots/Webkit/baseline/s-topbar-light-advanced.png b/screenshots/Webkit/baseline/s-topbar-light-advanced.png
new file mode 100644
index 0000000000..56e5ecdeda
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b4f3de3fccd315a97fb9e02d4a7ce9a9301ff457e4a11ead4fb9f3eee17e6067
+size 9737
diff --git a/screenshots/Webkit/baseline/s-topbar-light-alt.png b/screenshots/Webkit/baseline/s-topbar-light-alt.png
new file mode 100644
index 0000000000..172ca78b3f
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:09af252e93a989042ccbe4182639483824d2c3273bf16546bf261f35690f461c
+size 9652
diff --git a/screenshots/Webkit/baseline/s-topbar-light-dark-variant-advanced.png b/screenshots/Webkit/baseline/s-topbar-light-dark-variant-advanced.png
new file mode 100644
index 0000000000..1162bb2183
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-dark-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9019ab1fccadbee8b6e1630b1dc74c5f81825dd5490dc83833808b545d91b69d
+size 9854
diff --git a/screenshots/Webkit/baseline/s-topbar-light-dark-variant-alt.png b/screenshots/Webkit/baseline/s-topbar-light-dark-variant-alt.png
new file mode 100644
index 0000000000..1f1a0ff432
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-dark-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d4412c034600afb4b2ad60b589249a69cd4a1f1b8a0c044ddf1bf0c71324bedc
+size 9601
diff --git a/screenshots/Webkit/baseline/s-topbar-light-dark-variant-input.png b/screenshots/Webkit/baseline/s-topbar-light-dark-variant-input.png
new file mode 100644
index 0000000000..bde239923b
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-dark-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0d19596507b27a0872c373c9dcc1e83b7c23ecc3be51049171e13e70e4059ecd
+size 8916
diff --git a/screenshots/Webkit/baseline/s-topbar-light-dark-variant.png b/screenshots/Webkit/baseline/s-topbar-light-dark-variant.png
new file mode 100644
index 0000000000..db91d930b4
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-dark-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fa0a7b9c957ee2f35ff556fc39b243d3ffd6f1f5576a1f4ea069e9fc5e865a94
+size 6347
diff --git a/screenshots/Webkit/baseline/s-topbar-light-input.png b/screenshots/Webkit/baseline/s-topbar-light-input.png
new file mode 100644
index 0000000000..13e04e1ba6
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ba28e89e3d03926da8a8654887b9839c7273ea25720800c972c8a8f2bdaca23
+size 8745
diff --git a/screenshots/Webkit/baseline/s-topbar-light-light-variant-advanced.png b/screenshots/Webkit/baseline/s-topbar-light-light-variant-advanced.png
new file mode 100644
index 0000000000..56e5ecdeda
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-light-variant-advanced.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b4f3de3fccd315a97fb9e02d4a7ce9a9301ff457e4a11ead4fb9f3eee17e6067
+size 9737
diff --git a/screenshots/Webkit/baseline/s-topbar-light-light-variant-alt.png b/screenshots/Webkit/baseline/s-topbar-light-light-variant-alt.png
new file mode 100644
index 0000000000..172ca78b3f
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-light-variant-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:09af252e93a989042ccbe4182639483824d2c3273bf16546bf261f35690f461c
+size 9652
diff --git a/screenshots/Webkit/baseline/s-topbar-light-light-variant-input.png b/screenshots/Webkit/baseline/s-topbar-light-light-variant-input.png
new file mode 100644
index 0000000000..13e04e1ba6
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-light-variant-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ba28e89e3d03926da8a8654887b9839c7273ea25720800c972c8a8f2bdaca23
+size 8745
diff --git a/screenshots/Webkit/baseline/s-topbar-light-light-variant.png b/screenshots/Webkit/baseline/s-topbar-light-light-variant.png
new file mode 100644
index 0000000000..8997792c2a
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light-light-variant.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d55f0b58d0708d3661ce1de5f19d89848fcde178c0a80cb029cf2e9749f2483b
+size 6315
diff --git a/screenshots/Webkit/baseline/s-topbar-light.png b/screenshots/Webkit/baseline/s-topbar-light.png
new file mode 100644
index 0000000000..8997792c2a
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-topbar-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d55f0b58d0708d3661ce1de5f19d89848fcde178c0a80cb029cf2e9749f2483b
+size 6315