feat(storybook): modularize CSS module support as pluggable preset config (#36088)

Co-authored-by: Tudor Popa <popatudor@microsoft.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 4 people

apps/public-docsite-v9-headless/.storybook/main.js

@@ -1,23 +1,14 @@
-const rootMain = require('../../../.storybook/main');
+const headlessMain = require('../../../packages/react-components/react-headless-components-preview/stories/.storybook/main');
 
 module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
-  ...rootMain,
+  ...headlessMain,
   stories: [
-    ...rootMain.stories,
-    // docsite stories
-    '../src/**/*.mdx',
-    '../src/**/index.stories.@(ts|tsx)',
+    ...headlessMain.stories,
     // headless package stories
     '../../../packages/react-components/react-headless-components-preview/stories/src/**/index.stories.@(ts|tsx)',
   ],
   staticDirs: ['../public'],
-  addons: [...rootMain.addons],
   build: {
     previewUrl: process.env.DEPLOY_PATH,
   },
-  webpackFinal: (config, options) => {
-    const localConfig = /** @type config */ ({ ...rootMain.webpackFinal(config, options) });
-
-    return localConfig;
-  },
 });

apps/public-docsite-v9-headless/.storybook/manager-head.html

@@ -5,61 +5,33 @@
 <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 brittle way for providing custom non thenable styles for manager UI
-  >
-  > Those selectors might change on any storybook version bump.
+  Segoe UI from Microsoft's static font CDN. The fallbacks in `font-family`
+  below cover users on networks blocking the CDN, but on a healthy connection
+  the docsite renders Segoe UI on every platform — not just Windows.
  -->
+<link rel="preconnect" href="https://c.s-microsoft.com" crossorigin />
+<link rel="stylesheet" href="https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.css" />
+<link rel="stylesheet" href="https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.css" />
+<link rel="stylesheet" href="https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.css" />
+<link rel="stylesheet" href="https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.css" />
 
-<style>
-  @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;
-  }
+<!--
+  Headless docsite chrome overrides for the Storybook manager UI.
 
-  @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;
-  }
+  The sidebar selectors are brittle — they depend on Storybook's manager DOM
+  structure and may need updating on Storybook version bumps. Color values
+  mirror {@link ../../../packages/react-components/react-headless-components-preview/stories/.storybook/tokens.css} (light mode).
 
-  @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;
-  }
+  @see https://storybook.js.org/docs/react/configure/theming#css-escape-hatches
+ -->
 
-  @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;
+<style>
+  :root {
+    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
+    --hl-text: #0a0a0a;
+    --hl-text-muted: #52525b;
+    --hl-accent: #9b1f5a;
+    --hl-accent-contrast: #ffffff;
   }
 
   #storybook-preview-iframe {
@@ -75,12 +47,12 @@
 
   .sidebar-item svg,
   .sidebar-svg-icon {
-    color: #11100f !important;
+    color: var(--hl-text) !important;
   }
 
   .sidebar-item[data-selected='true'] svg,
   .sidebar-item[data-selected='true'] .sidebar-svg-icon {
-    color: #ffffff !important;
+    color: var(--hl-accent-contrast) !important;
   }
 
   /**
@@ -91,11 +63,11 @@
   .sidebar-subheading,
   button[data-action='collapse-ref'] {
     font-weight: 600 !important;
-    font-size: 16px !important;
-    letter-spacing: 0px !important;
-    line-height: 24px !important;
+    font-size: 13px !important;
+    letter-spacing: -0.01em !important;
+    line-height: 20px !important;
     text-transform: none !important;
-    color: #11100f !important;
+    color: var(--hl-text) !important;
   }
 
   .sidebar-subheading button,
@@ -107,10 +79,30 @@
   .sidebar-item {
     align-items: center !important;
     font-weight: 400 !important;
-    font-size: 14px !important;
+    font-size: 13px !important;
     letter-spacing: -0.01em !important;
     line-height: 24px !important;
-    color: #11100f !important;
+    color: var(--hl-text) !important;
+    border-radius: 999px !important;
+  }
+
+  /*
+    Override Storybook's default hover (a saturated pink derived from
+    `colorSecondary`) with a subtle neutral surface tone. Matches the
+    `--surface-muted` token from {@link ../../../packages/react-components/react-headless-components-preview/stories/.storybook/tokens.css}.
+  */
+  .sidebar-item:hover,
+  .sidebar-item:hover svg,
+  .sidebar-item:hover .sidebar-svg-icon {
+    background: #f2f2f4 !important;
+    color: var(--hl-text) !important;
+  }
+
+  .sidebar-item[data-selected='true']:hover,
+  .sidebar-item[data-selected='true']:hover svg,
+  .sidebar-item[data-selected='true']:hover .sidebar-svg-icon {
+    background: var(--hl-accent) !important;
+    color: var(--hl-accent-contrast) !important;
   }
 
   .sidebar-item a {
@@ -119,10 +111,11 @@
 
   .sidebar-item[data-selected='true'] {
     font-weight: 600 !important;
-    font-size: 14px !important;
+    font-size: 13px !important;
     letter-spacing: -0.01em !important;
     line-height: 24px !important;
-    color: #ffffff !important;
+    color: var(--hl-accent-contrast) !important;
+    background: var(--hl-accent) !important;
   }
 
   .sidebar-item > span:first-child,

apps/public-docsite-v9-headless/.storybook/preview-head.html

@@ -1,99 +1,24 @@
-<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-<style type="text/tailwindcss">
-  @layer theme, base, utilities;
-  @import 'tailwindcss/theme' layer(theme);
-  @import 'tailwindcss/utilities' layer(utilities);
-  :root {
-    interpolate-size: allow-keywords;
-  }
-</style>
 <!--
-  Tailwind's Preflight is omitted above because it resets h1/h2/p/a in
-  MDX docs (which rely on typography from react-storybook-addon/src/styles.css).
-  Re-apply the essential resets here inside `@layer base`, scoped to
-  `.docs-story` so rendered Canvas examples get border/box-sizing/form-element
-  normalization without affecting the surrounding MDX page. -->
-<style>
-  @layer base {
-    @scope (.docs-story) {
-      *,
-      ::before,
-      ::after,
-      ::backdrop,
-      ::file-selector-button {
-        box-sizing: border-box;
-        border: 0 solid currentColor;
-      }
-
-      img,
-      svg,
-      video,
-      canvas,
-      audio,
-      iframe,
-      embed,
-      object {
-        display: block;
-        vertical-align: middle;
-      }
-
-      img,
-      video {
-        max-width: 100%;
-        height: auto;
-      }
-
-      button,
-      input,
-      optgroup,
-      select,
-      textarea,
-      ::file-selector-button {
-        font-family: inherit;
-        font-feature-settings: inherit;
-        font-variation-settings: inherit;
-        font-size: 100%;
-        font-weight: inherit;
-        line-height: inherit;
-        letter-spacing: inherit;
-        color: inherit;
-      }
+  Story canvas head.
 
-      button,
-      select {
-        text-transform: none;
-      }
+  Design tokens ({@link ../../../packages/react-components/react-headless-components-preview/stories/.storybook/tokens.css}) are imported from `preview.js` so they
+  reach the iframe via webpack. This file holds raw <link> / <style> tags that
+  must be present in the iframe document head before any story renders.
+-->
 
-      button,
-      input:where([type='button'], [type='reset'], [type='submit']),
-      ::file-selector-button {
-        appearance: button;
-        background-color: transparent;
-        background-image: none;
-      }
-
-      :-moz-focusring {
-        outline: auto;
-      }
-
-      ::placeholder {
-        opacity: 1;
-        color: color-mix(in oklab, currentColor 50%, transparent);
-      }
-
-      textarea {
-        resize: vertical;
-      }
-
-      ol,
-      ul,
-      menu {
-        list-style: none;
-      }
+<!--
+  Segoe UI from Microsoft's static font CDN — same set as `manager-head.html`.
+  Story canvases declare `font-family: 'Segoe UI', system-ui` via the design
+  tokens, so loading the webfont here makes them render Segoe on every OS.
+-->
+<link rel="preconnect" href="https://c.s-microsoft.com" crossorigin />
+<link rel="stylesheet" href="https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.css" />
+<link rel="stylesheet" href="https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.css" />
+<link rel="stylesheet" href="https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.css" />
+<link rel="stylesheet" href="https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.css" />
 
-      [hidden]:where(:not([hidden='until-found'])) {
-        display: none !important;
-      }
-    }
+<style>
+  :root {
+    interpolate-size: allow-keywords;
   }
 </style>

apps/public-docsite-v9-headless/.storybook/preview.js

@@ -1,29 +1,16 @@
-import { polyfillBodyAndObserve } from '@microsoft/focusgroup-polyfill/shadowless';
+import * as headlessPreview from '../../../packages/react-components/react-headless-components-preview/stories/.storybook/preview';
 
-import * as rootPreview from '../../../.storybook/preview';
-import { tailwindSandboxTemplate } from './tailwind-sandbox-template';
+export const decorators = [...headlessPreview.decorators];
 
-polyfillBodyAndObserve();
-
-/** @type {typeof rootPreview.decorators} */
-export const decorators = [...rootPreview.decorators];
-
-/** @type {typeof rootPreview.parameters} */
+/** @type {typeof headlessPreview.parameters} */
 export const parameters = {
-  ...rootPreview.parameters,
-  docs: {
-    ...rootPreview.parameters.docs,
-  },
+  ...headlessPreview.parameters,
   options: {
     storySort: {
       method: 'alphabetical',
       order: ['Introduction', 'Headless Components'],
     },
   },
-  exportToSandbox: {
-    ...rootPreview.parameters.exportToSandbox,
-    ...tailwindSandboxTemplate,
-  },
   reactStorybookAddon: {
     docs: {
       argTable: {

apps/public-docsite-v9-headless/.storybook/theme.js

@@ -1,40 +1 @@
-import { create } from 'storybook/theming';
-
-/**
- * Theming and branding the storybook to fluent. Taken from https://storybook.js.org/docs/react/configure/theming
- */
-const theme = create({
-  base: 'light',
-
-  // Storybook-specific color palette
-  colorPrimary: 'rgba(255, 255, 255, .4)',
-  colorSecondary: '#0078d4',
-
-  // UI
-  appBg: '#ffffff',
-  appContentBg: '#ffffff',
-  appBorderColor: '#e0e0e0', // use msft gray
-  appBorderRadius: 4,
-
-  // Fonts
-  fontBase:
-    '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;',
-  fontCode: 'monospace',
-
-  // Text colors
-  textColor: '#11100f',
-  textInverseColor: '#0078d4', // use msft primary blue default
-
-  // Toolbar default and active colors
-  barSelectedColor: '#0078d4', // use msft primary blue default
-
-  // Form colors
-  inputBorderRadius: 4,
-
-  // Use the fluent branding for the upper left image
-  brandTitle: 'Fluent UI Headless Components',
-  brandUrl:
-    'https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-headless-components-preview',
-});
-
-export default theme;
+export { default } from '../../../packages/react-components/react-headless-components-preview/stories/.storybook/theme';

apps/public-docsite-v9-headless/project.json

@@ -19,7 +19,8 @@
           "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox", "storybook-llms-extractor"],
           "target": "build"
         }
-      ]
+      ],
+      "inputs": ["default", "{workspaceRoot}/.storybook/**", "{projectRoot}/.storybook/**"]
     }
   }
 }