[web-components-v3] Revert storybook modifications (#31332)

.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 {

apps/public-docsite-v9/.storybook/docs-root-v9.css

@@ -1,18 +1,23 @@
+/* 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,
 .sb-nopreview,
 .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;
-}

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'),

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 */