From 8f49a443b18e89771d23feafdd0eaba7d9b1fabb Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Fri, 10 May 2024 10:10:22 -0700
Subject: [PATCH] [web-components-v3] Revert storybook modifications (#31332)

---
 .storybook/docs-root.css                      |  43 +-
 .../.storybook/docs-root-v9.css               |  27 +-
 .../.storybook/manager-head.html              |   6 +-
 apps/public-docsite-v9/public/shell.css       |  11 +-
 .../.storybook/docs-root-web-compoents.css    |  49 --
 .../web-components/.storybook/docs-root.css   | 473 ++++++++++++++++++
 .../.storybook/manager-head.html              |  60 +--
 .../web-components/.storybook/preview.mjs     |  17 +-
 packages/web-components/public/shell.css      |  83 ++-
 9 files changed, 624 insertions(+), 145 deletions(-)
 delete mode 100644 packages/web-components/.storybook/docs-root-web-compoents.css
 create mode 100644 packages/web-components/.storybook/docs-root.css
 mode change 120000 => 100644 packages/web-components/public/shell.css

diff --git a/.storybook/docs-root.css b/.storybook/docs-root.css
index 1a825251dbc234..1b2149ddc7f30a 100644
--- a/.storybook/docs-root.css
+++ b/.storybook/docs-root.css
@@ -1,12 +1,3 @@
-/*
- * Heads Up!
- * This file is used by both React v9 and Web Components Storybooks.
- * All CSS must apply to both implementations.
- *
- * DO NOT use design tokens in this file.
- * This file styles the content outside of story previews where a Fluent theme is not expected to be set or change.
- */
-
 #docs-root .sbdocs-content {
   font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
     sans-serif;
@@ -19,6 +10,7 @@
   /* identical to box height, or 143% */
   letter-spacing: -0.04em;
   color: #000000;
+  margin-top: 49px;
 }
 
 #docs-root details {
@@ -36,6 +28,11 @@
   margin-top: 24px;
 }
 
+#docs-root .sbdocs-wrapper {
+  background: white;
+  min-height: auto;
+}
+
 #docs-root .sbdocs-img.featured-image {
   max-width: 100%;
   margin: 48px 0;
@@ -128,25 +125,18 @@
 
 #docs-root .sbdocs-preview {
   border-radius: 16px;
-  background: #fff; /* --colorBrandBackgroundInverted */
+  background: var(--colorBrandBackgroundInverted, #fff);
   padding: 0;
   box-shadow: none;
-  border: 1px solid #d1d1d1; /* --colorNeutralStroke1 */
+  border: 1px solid var(--colorNeutralStroke1, #e1dfdd);
 }
 
-/* Apply the currently selected Fluent UI theme to the relevant areas of the docs */
-#docs-root .innerZoomElementWrapper > div {
+#docs-root .innerZoomElementWrapper {
   padding: 30px;
-  box-sizing: border-box;
 }
 
-/* fix mouse interactions for toolbar on first story */
 #docs-root .sbdocs-preview > .os-host {
-  /* The toolbar sits within the story content area and is position: absolute by default. */
-  /* The story content overlays the toolbar making it non-interactive */
-  /* We don't use z-index because the toolbar can still sometimes overlay story content (flyout menu) */
-  /* The best solution is to use a static toolbar that is always outside the story content and interactive */
-  position: static;
+  display: none;
 }
 
 #docs-root span + .sbdocs .docblock-argstable tbody tr td button {
@@ -218,6 +208,14 @@
   border-bottom: 1px solid #edebe9;
 }
 
+#docs-root .docblock-argstable-body > tr > td:nth-child(4) {
+  display: none;
+}
+
+#docs-root .docblock-argstable-head > tr > th:nth-child(4) {
+  display: none;
+}
+
 #docs-root .docblock-argstable tbody tr {
   border: none;
 }
@@ -290,7 +288,6 @@
   display: inline-block;
   background-color: rgba(17, 16, 15, 0.1);
   border-radius: 2px;
-  width: fit-content; /* prevent wrapping kebab-case words when they'll fit on one line */
 }
 
 .os-content-glue {
@@ -399,9 +396,9 @@ h1.fluent {
 
 h1 .fluent-version {
   display: block;
-  font-size: 24px; /* --fontSizeBase600 */
+  font-size: 24px; /* --font-size-base-600 */
   line-height: 32px;
-  color: #707070; /* --colorNeutralForeground3 */
+  color: #707070; /* --color-neutral-foreground-3 */
 }
 
 h2.fluent {
diff --git a/apps/public-docsite-v9/.storybook/docs-root-v9.css b/apps/public-docsite-v9/.storybook/docs-root-v9.css
index 12da4998a7b6b6..aa6f23e4c1f42d 100644
--- a/apps/public-docsite-v9/.storybook/docs-root-v9.css
+++ b/apps/public-docsite-v9/.storybook/docs-root-v9.css
@@ -1,3 +1,19 @@
+/* remove the docs wrapper bg to let page bg show through */
+/* remove unnecessary padding now that theme switcher is not taking up space */
+#docs-root .sbdocs-wrapper {
+  background: transparent !important;
+  padding-top: 0;
+}
+
+/* sb-show-main is missing during page transitions causing a page shift */
+/* todo: cleanup once we no longer inherit docs-root */
+.sb-show-main.sb-main-fullscreen,
+.sb-main-fullscreen {
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
 /* remove loading overlay */
 .sb-preparing-story,
 .sb-preparing-docs,
@@ -5,14 +21,3 @@
 .sb-errordisplay {
   display: none !important;
 }
-
-/* Hide props table controls, since they don't work in the React implementation */
-#docs-root .docblock-argstable-head > tr > th:nth-child(4),
-#docs-root .docblock-argstable-body > tr > td:nth-child(4) {
-  display: none;
-}
-
-/* Hide the toolbar on the first story: zoom in, zoom out, reset zoom, open in new tab */
-#docs-root .sbdocs-preview > .os-host {
-  display: none;
-}
diff --git a/apps/public-docsite-v9/.storybook/manager-head.html b/apps/public-docsite-v9/.storybook/manager-head.html
index abaa858431b1a9..6dc6a3427d5848 100644
--- a/apps/public-docsite-v9/.storybook/manager-head.html
+++ b/apps/public-docsite-v9/.storybook/manager-head.html
@@ -42,16 +42,12 @@
 
   > 💡 NOTE:
   >
-  > This is a brittle way for providing custom non thenable styles for manager UI.
+  > This is brittle way for providing custom non thenable styles for manager UI
   >
   > Those selectors might change on any storybook version bump.
  -->
 
 <style>
-  /*
-   * Heads Up!
-   * Keep this in sync with the styles in packages/web-components/.storybook/manager-head.html
-   */
   @font-face {
     font-family: 'Segoe UI';
     src: local('Segoe UI Light'),
diff --git a/apps/public-docsite-v9/public/shell.css b/apps/public-docsite-v9/public/shell.css
index 19e731302fb690..9968a8ae79e93c 100644
--- a/apps/public-docsite-v9/public/shell.css
+++ b/apps/public-docsite-v9/public/shell.css
@@ -1,13 +1,5 @@
-/*
- * HEADS UP!
- * This file is used by both React v9 and Web Components Storybooks.
- * All CSS must apply to both implementations.
- */
-
-/* sidebar logo (React uses an SVG, Web Components uses text) */
+/* remove margin from sidebar logo  */
 .sidebar-header > div:first-of-type {
-  font-size: 20px; /* for Web Components */
-  white-space: break-spaces; /* allow line breaks "\n" in Storybook theme */
   margin-right: 0;
 }
 
@@ -61,7 +53,6 @@
  */
 [role='main'] {
   position: fixed;
-  top: 0 !important;
 }
 
 /* remove box shadow style from storybooks wrapper div */
diff --git a/packages/web-components/.storybook/docs-root-web-compoents.css b/packages/web-components/.storybook/docs-root-web-compoents.css
deleted file mode 100644
index 51ab5192f7fac8..00000000000000
--- a/packages/web-components/.storybook/docs-root-web-compoents.css
+++ /dev/null
@@ -1,49 +0,0 @@
-/* Mimic React v9 Provider styles:
- *   - apply font, background, and foreground colors
- *   - apply padding for story content
- */
-#docs-root .innerZoomElementWrapper > div > div {
-  padding: 48px 24px;
-  font-family: var(--fontFamilyBase);
-  background: var(--colorNeutralBackground2);
-  color: var(--colorNeutralForeground2);
-}
-
-/*
- * Theme Switcher
- */
-#switches-container {
-  position: sticky;
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  padding: 12px;
-  width: 100%;
-  top: 0;
-  box-sizing: border-box; /* keep from overflowing body making x scroll bar*/
-  background: #fff;
-  box-shadow: 0px 0px 3px rgb(0 0 0 / 22%);
-  z-index: 10;
-}
-
-#switches-container select {
-  padding: 5px var(--spacingHorizontalM);
-  border: var(--strokeWidthThin) solid #d1d1d1 /* --colorNeutralStroke1, without theme switching */;
-  border-radius: var(--borderRadiusMedium);
-  font-size: var(--fontSizeBase300);
-  font-weight: var(--fontWeightSemibold);
-  line-height: var(--lineHeightBase300);
-  width: 140px;
-}
-
-.custom-fullscreen #switches-container {
-  display: none;
-}
-
-.custom-fullscreen .sbdocs-wrapper {
-  padding: 20px;
-}
-
-.custom-fullscreen .sbdocs-content {
-  max-width: unset;
-}
diff --git a/packages/web-components/.storybook/docs-root.css b/packages/web-components/.storybook/docs-root.css
new file mode 100644
index 00000000000000..6262526a648957
--- /dev/null
+++ b/packages/web-components/.storybook/docs-root.css
@@ -0,0 +1,473 @@
+/*
+ * Heads Up!
+ * This file should be kept in sync with the `docs-root.css` file for the React v9 Storybook.
+ */
+
+/* remove the docs wrapper bg to let page bg show through */
+#docs-root .sbdocs-wrapper {
+  background: transparent !important;
+}
+
+/* sb-show-main is missing during page transitions causing a page shift */
+/* todo: cleanup once we no longer inherit docs-root */
+.sb-show-main.sb-main-fullscreen,
+.sb-main-fullscreen {
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+#docs-root .sbdocs-content {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  max-width: 1200px;
+}
+
+#docs-root h1.sbdocs-title {
+  font-size: 44px;
+  line-height: 60px;
+  /* identical to box height, or 143% */
+  letter-spacing: -0.04em;
+  color: #000000;
+}
+
+#docs-root details {
+  position: relative;
+  z-index: 99;
+}
+
+#docs-root .sbdocs-p {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 18px;
+  line-height: 27px;
+  letter-spacing: -0.01em;
+  color: #000000;
+  margin-top: 24px;
+}
+
+#docs-root .sbdocs-img.featured-image {
+  max-width: 100%;
+  margin: 48px 0;
+  display: block;
+}
+
+#docs-root .sbdocs-img {
+  border-radius: 24px;
+}
+
+#docs-root .sbdocs-hr {
+  margin: 48px 0;
+  height: 0;
+  border-top: 1px solid #ebebeb;
+}
+
+#docs-root .sbdocs-h2 {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 24px;
+  line-height: 28px;
+  letter-spacing: -0.04em;
+  color: black;
+  border-top: 1px solid #ebebeb;
+  border-bottom: none;
+  margin: 48px 0 15px 0;
+  padding: 48px 0 0 0;
+}
+
+#docs-root .sbdocs-h2 code {
+  border-radius: 4px;
+  font-size: 20px;
+}
+
+#docs-root .sbdocs-h3 {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  margin: 25px 0 0 0 !important;
+  letter-spacing: -0.01em;
+  color: #000000;
+}
+
+#docs-root .sbdocs-h3 code {
+  border-radius: 3px;
+  font-size: 16px;
+}
+
+/* Only apply to H3s inside of stories which have a parent with an ID */
+#docs-root [id] > .sbdocs-h3:before {
+  content: '';
+  display: block;
+  height: 40px;
+  margin: -40px 0 0;
+}
+
+#docs-root .sbdocs-li {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 150%;
+  letter-spacing: -0.01em;
+
+  /* Neutrals / Web / Gray 200 #1B1A19 */
+  color: #1b1a19;
+  margin-top: 8px;
+}
+
+#docs-root .sbdocs-ul {
+  margin: 12px 0;
+}
+
+#docs-root .sbdocs-ul .sbdocs-li {
+  list-style: none;
+  position: relative;
+}
+
+#docs-root .sbdocs-ul .sbdocs-li::before {
+  position: absolute;
+  content: '•';
+  color: #8d8d8d;
+  top: 0;
+  left: -15px;
+}
+
+#docs-root .sbdocs-ol .sbdocs-li::marker {
+  color: #8d8d8d;
+}
+
+#docs-root .sbdocs-preview {
+  border-radius: 16px;
+  background: #fff; /* --colorBrandBackgroundInverted */
+  padding: 0;
+  box-shadow: none;
+  border: 1px solid #d1d1d1; /* --colorNeutralStroke1 */
+}
+
+/* Apply the currently selected Fluent UI theme to the relevant areas of the docs */
+#docs-root .innerZoomElementWrapper > div {
+  padding: 30px;
+  box-sizing: border-box;
+}
+
+/* fix mouse interactions for toolbar on first story */
+#docs-root .sbdocs-preview > .os-host {
+  /* The toolbar sits within the story content area and is position: absolute by default. */
+  /* The story content overlays the toolbar making it non-interactive */
+  /* We don't use z-index because the toolbar can still sometimes overlay story content (flyout menu) */
+  /* The best solution is to use a static toolbar that is always outside the story content and interactive */
+  position: static;
+}
+
+#docs-root span + .sbdocs .docblock-argstable tbody tr td button {
+  color: #0078d4;
+  color: red;
+}
+
+#docs-root .docs-story + div {
+  background: #11100f;
+}
+
+#docs-root .sbdocs-content > div:last-child {
+  margin-bottom: 96px;
+}
+
+#docs-root .docs-story > div {
+  padding: 0;
+  background: none;
+}
+
+#docs-root .docs-story > div:last-child {
+  right: 31px;
+  border-radius: 24px;
+}
+
+.docs-story + div > div:last-child {
+  background: #000000;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px 5px 0px 0px;
+  right: 31px;
+}
+
+.docs-story + div > div:last-child > button {
+  color: white;
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 14px;
+  line-height: 150%;
+  text-align: center;
+  letter-spacing: -0.01em;
+}
+
+#docs-root a.sbdocs-a {
+  color: #0078d4;
+  text-decoration: underline;
+}
+
+/*  */
+/* Args Table */
+/*  */
+
+#docs-root .docblock-argstable tbody {
+  box-shadow: none;
+  border-left: none;
+  border-right: none;
+}
+
+#docs-root .docblock-argstable-head th {
+  letter-spacing: -0.01em;
+  color: black;
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 150%;
+  font-weight: 600;
+}
+
+#docs-root thead.docblock-argstable-head {
+  border-bottom: 1px solid #edebe9;
+}
+
+#docs-root .docblock-argstable tbody tr {
+  border: none;
+}
+
+#docs-root table.docblock-argstable tbody.docblock-argstable-body td,
+#docs-root .docblock-argstable th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+}
+
+#docs-root .docblock-argstable tbody tr td:nth-child(1) span {
+  font-weight: normal;
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 130%;
+  letter-spacing: -0.01em;
+  color: #616161;
+}
+
+#docs-root .docblock-argstable tbody tr td {
+  vertical-align: top;
+}
+
+#docs-root .docblock-argstable-body > tr > td > div > div > button {
+  color: #0078d4;
+  line-height: 21px;
+}
+
+#docs-root code,
+#docs-root .docblock-argstable tbody tr td:nth-child(3) > div > span,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
+#docs-root .css-16d4d7t {
+  font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 130%;
+  letter-spacing: -0.2px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+#docs-root code.sbdocs-code,
+#docs-root .sbdocs-p code,
+#docs-root .sbdocs-li code,
+#docs-root .docblock-argstable code,
+#docs-root .docblock-argstable tbody tr td:nth-child(3) > div > span,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
+#docs-root .css-16d4d7t {
+  font-size: 14px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  padding: 1px 4px;
+  margin: 0 3px 0 3px;
+  color: black;
+  border: none;
+  line-height: 1.5;
+}
+
+#docs-root .docblock-argstable code {
+  white-space: normal;
+}
+
+#docs-root code {
+  padding: 0.1em 0.2em;
+  display: inline-block;
+  background-color: rgba(17, 16, 15, 0.1);
+  border-radius: 2px;
+  width: fit-content; /* prevent wrapping kebab-case words when they'll fit on one line */
+}
+
+.os-content-glue {
+  width: auto !important;
+}
+
+#docs-root .sbdocs-preview .prismjs {
+  overflow: hidden;
+}
+
+#docs-root .os-content .prismjs * {
+  font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
+  font-size: 14px;
+  line-height: 1.4em;
+}
+
+#docs-root .sbdocs-preview .prismjs code {
+  color: white;
+  background: #11100f;
+  margin: 0;
+  overflow-x: auto;
+}
+
+#docs-root .docblock-argstable-body td > div > p,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) p,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > span {
+  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
+  line-height: 130%;
+  color: black;
+  letter-spacing: -0.01em;
+}
+
+#docs-root .docblock-argstable tr > :nth-child(1) {
+  width: 4%;
+}
+
+#docs-root .docblock-argstable tr > :nth-child(2) {
+  width: 100%;
+}
+
+#docs-root .os-padding {
+  z-index: 0;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Light'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype');
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Semilight'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Semibold'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  src: local('Segoe UI Bold'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
+    url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
+  font-weight: 700;
+}
+
+body,
+body p,
+body ul,
+body ul li {
+  font-family: 'Segoe UI' !important;
+}
+
+h1.fluent {
+  font-weight: 700;
+  font-size: 40px;
+  font-family: 'Segoe UI';
+  line-height: 60px;
+  letter-spacing: -0.16px;
+}
+
+h1 .fluent-version {
+  display: block;
+  font-size: 24px; /* --font-size-base-600 */
+  line-height: 32px;
+  color: #707070; /* --color-neutral-foreground-3 */
+}
+
+h2.fluent {
+  font-weight: 600;
+  font-size: 24px;
+  font-family: 'Segoe UI';
+  line-height: 36px;
+  letter-spacing: -0.16px;
+}
+
+/* Mimic React v9 Provider styles:
+ *   - apply font, background, and foreground colors
+ *   - apply padding for story content
+ */
+#docs-root .innerZoomElementWrapper > div > div {
+  padding: 48px 24px;
+  font-family: var(--fontFamilyBase);
+  background: var(--colorNeutralBackground2);
+  color: var(--colorNeutralForeground2);
+}
+
+/*
+ * Theme Switcher
+ */
+#switches-container {
+  position: sticky;
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  padding: 12px;
+  width: 100%;
+  top: 0;
+  box-sizing: border-box; /* keep from overflowing body making x scroll bar*/
+  background: #fff;
+  box-shadow: 0 0 3px rgb(0 0 0 / 22%);
+  z-index: 10;
+}
+
+#switches-container select {
+  padding: 5px var(--spacingHorizontalM);
+  border: var(--strokeWidthThin) solid #d1d1d1 /* --colorNeutralStroke1, without theme switching */;
+  border-radius: var(--borderRadiusMedium);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightBase300);
+  width: 140px;
+}
+
+.custom-fullscreen #switches-container {
+  display: none;
+}
+
+.custom-fullscreen .sbdocs-wrapper {
+  padding: 20px;
+}
+
+.custom-fullscreen .sbdocs-content {
+  max-width: unset;
+}
diff --git a/packages/web-components/.storybook/manager-head.html b/packages/web-components/.storybook/manager-head.html
index 4ad492a52099c8..d2af1fb450b828 100644
--- a/packages/web-components/.storybook/manager-head.html
+++ b/packages/web-components/.storybook/manager-head.html
@@ -1,61 +1,58 @@
-<!--
-  Override the default favicon used in the Storybook in the browser tab.
- -->
-<link rel="shortcut icon" href="/favicon.ico" />
-<link rel="icon" type="image/png" href="/favicon.png" sizes="192x192" />
-<link href="/shell.css" rel="stylesheet" />
-
+<meta name="title" content="Fluent UI Web Components" />
+<link rel="shortcut icon" href="/favicon.png" />
+<link rel="icon" type="image/png" href="/favicon-192.png" sizes="192x192" />
+<link href="shell.css" rel="stylesheet" />
 <!--
    Override the default styles used in the Storybook svg icons for the left tree panel.
+   @see https://storybook.js.org/docs/react/configure/theming#css-escape-hatches
+   > 💡 NOTE:
+   > This is a brittle way for providing custom non thenable styles for manager UI.
+   > Those selectors might change on any storybook version bump.
   -->
-
 <style>
-  /*
-   * Heads Up!
-   * Keep this in sync with the styles in apps/public-docsite-v9/.storybook/manager-head.html
-   */
+  /* These styles should be kept in sync with those in the `manager-head.html` file for the React v9 Storybook. */
   @font-face {
     font-family: 'Segoe UI';
     src: local('Segoe UI Light'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype');
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype');
     font-weight: 100;
   }
 
   @font-face {
     font-family: 'Segoe UI';
     src: local('Segoe UI Semilight'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype');
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype');
     font-weight: 200;
   }
 
   @font-face {
     font-family: 'Segoe UI';
     src: local('Segoe UI'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype');
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype');
     font-weight: 400;
   }
 
   @font-face {
     font-family: 'Segoe UI';
     src: local('Segoe UI Semibold'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
     font-weight: 600;
   }
 
   @font-face {
     font-family: 'Segoe UI';
     src: local('Segoe UI Bold'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
-      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
+      url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
     font-weight: 700;
   }
 
@@ -101,9 +98,7 @@
     color: #ffffff !important;
   }
 
-  /*
-    * Hides "Addons" button from mobile view nav.
-    */
+  /* Hides "Addons" button from mobile view nav. */
   nav > button:last-child {
     display: none;
   }
@@ -111,9 +106,8 @@
   /*
     Storybook has proposed a feature for this in https://github.com/storybookjs/storybook/issues/9209
     which will configure stories to exist in deeplink URL format, but do not appear in the nav tree or the docs page
-    Usign suggested temporary workaround until storybook gets proper support
-    See https://github.com/microsoft/fluentui/blob/master/rfcs/convergence/authoring-stories.md#10-internal-stories-for-testing
-    */
+    Using suggested temporary workaround until storybook gets proper support.
+  */
   [id*='accessibility-stories'] {
     display: none !important;
   }
diff --git a/packages/web-components/.storybook/preview.mjs b/packages/web-components/.storybook/preview.mjs
index d8130f99233ef0..de53eeeb8dc963 100644
--- a/packages/web-components/.storybook/preview.mjs
+++ b/packages/web-components/.storybook/preview.mjs
@@ -1,10 +1,8 @@
-import * as Fluent from '../src/index-rollup.js';
-import webcomponentsTheme from './theme.mjs';
 import { switchTheme } from '../public/theme-switch.js';
-import '../../../.storybook/docs-root.css';
-import './docs-root-web-compoents.css';
+import webcomponentsTheme from './theme.mjs';
 
-Fluent;
+import '../src/index-rollup.js';
+import './docs-root.css';
 
 function changeTheme(e) {
   switchTheme(e.target.value);
@@ -23,14 +21,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: [
-        'Concepts',
-        [
-          'Introduction',
-        ],
-        'Components',
-        'Theme',
-      ],
+      order: ['Concepts', ['Introduction'], 'Components', 'Theme'],
     },
   },
   docs: {
diff --git a/packages/web-components/public/shell.css b/packages/web-components/public/shell.css
deleted file mode 120000
index b2cacac2cdbd2f..00000000000000
--- a/packages/web-components/public/shell.css
+++ /dev/null
@@ -1 +0,0 @@
-../../../apps/public-docsite-v9/public/shell.css
\ No newline at end of file
diff --git a/packages/web-components/public/shell.css b/packages/web-components/public/shell.css
new file mode 100644
index 00000000000000..74e3083205760d
--- /dev/null
+++ b/packages/web-components/public/shell.css
@@ -0,0 +1,82 @@
+/* This file should stay synchronized with the React v9 storybook styles. */
+
+/* sidebar logo (Web Components uses text) */
+.sidebar-header > div:first-of-type {
+  font-size: 20px;
+  white-space: break-spaces;
+  margin-right: 0;
+}
+
+/* remove sidebar shortcuts menu */
+.sidebar-header > div:last-child {
+  display: none;
+}
+
+/* Add left side background color splash */
+/* colors become distracting in mobile layout so scoped to where sidebar is visible */
+@media (min-width: 600px) {
+  #root > div:before {
+    content: '';
+    position: absolute;
+    top: -200px;
+    left: -200px;
+    width: 400px;
+    height: 400px;
+    background: #c989e8;
+    opacity: 0.5;
+    filter: blur(150px);
+  }
+
+  /* Add right side background color splash */
+  #root > div:after {
+    content: '';
+    position: absolute;
+    top: -200px;
+    right: -200px;
+    width: 400px;
+    height: 400px;
+    background: #b3d4ff;
+    opacity: 0.5;
+    filter: blur(150px);
+  }
+}
+
+/* Give sidebar a transparent white background to match design */
+.sidebar-container {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+/* remove background preventing color splash from showing */
+#storybook-preview-wrapper {
+  background: transparent;
+}
+
+/*
+ * Set position fixed to create a layer and prevent iframe from jumping when content is
+ * larger than the viewport and the iframe itself
+ */
+[role='main'] {
+  position: fixed;
+  top: 0 !important;
+}
+
+/* remove box shadow style from storybooks wrapper div */
+[role='main'] > div {
+  box-shadow: none;
+}
+
+/* permanently hide toolbar so animation never appears on page load */
+[role='main'] .os-host {
+  display: none;
+}
+
+/* stop offset from changing page dimensions when 't' is pressed and toolbar opened */
+[role='main'] > div > div > div {
+  top: 0 !important;
+  height: 100% !important;
+}
+
+/* Remove 'Published on Chromatic' banner */
+#back-to-chromatic {
+  display: none !important;
+}