feat(react-headless-components-preview): update stories styles to use CSS modules (#36097)

dmytrokirpa · claude · web-flow · commit 30a42808ed35 · 2026-05-05T16:43:47.000+02:00
Co-authored-by: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Card/card.module.css b/packages/react-components/react-headless-components-preview/stories/src/Card/card.module.css
@@ -19,7 +19,7 @@
 }
 
 .card:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -131,7 +131,7 @@
 }
 
 .iconButton:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -171,7 +171,7 @@
 }
 
 .footerButton:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -186,7 +186,7 @@
 }
 
 .checkbox:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Dialog/dialog.module.css b/packages/react-components/react-headless-components-preview/stories/src/Dialog/dialog.module.css
@@ -65,6 +65,14 @@
   transition: background var(--duration-fast) var(--ease-standard);
 }
 
+.btn:focus {
+  outline: none;
+}
+
+.btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
+}
+
 .btn:hover {
   background: var(--surface-sunken);
 }
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Drawer/InlineDrawer.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Drawer/InlineDrawer.stories.tsx
@@ -36,7 +36,7 @@ export const Inline = (): React.ReactNode => {
       </Drawer>
 
       <main className={styles.inlineMain}>
-        <button className={styles.secondaryButton} onClick={toggleDrawer}>
+        <button className={styles.primaryButton} onClick={toggleDrawer}>
           {open ? 'Hide inline drawer' : 'Show inline drawer'}
         </button>
       </main>
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Drawer/drawer.module.css b/packages/react-components/react-headless-components-preview/stories/src/Drawer/drawer.module.css
@@ -125,7 +125,7 @@
 }
 
 .closeButton:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -135,20 +135,20 @@
   height: 32px;
   padding: 0 var(--space-3);
   border: 0;
-  border-radius: var(--radius-md);
-  background: var(--text);
-  color: var(--text-on-accent);
+  border-radius: var(--radius-pill);
+  background: var(--accent);
+  color: var(--accent-contrast);
   font-size: 13.5px;
   font-weight: 500;
   cursor: pointer;
 }
 
 .primaryButton:hover {
-  background: var(--text-muted);
+  background: var(--accent-strong);
 }
 
 .primaryButton:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -170,7 +170,7 @@
 }
 
 .secondaryButton:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Input/input.module.css b/packages/react-components/react-headless-components-preview/stories/src/Input/input.module.css
@@ -16,8 +16,7 @@
 
 .wrap:has(:focus-visible),
 .wrap:focus-within {
-  border-color: var(--text);
-  box-shadow: 0 0 0 3px var(--surface-muted);
+  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
 }
 
 .wrap[data-disabled],
diff --git a/packages/react-components/react-headless-components-preview/stories/src/MessageBar/MessageBarDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/MessageBar/MessageBarDefault.stories.tsx
@@ -26,7 +26,7 @@ export const Default = (): React.ReactNode => (
       <button type="button" className={styles.actionBtn}>
         Action
       </button>
-      <button type="button" className={styles.iconBtn} aria-label="Dismiss">
+      <button type="button" className={`${styles.actionBtn} ${styles.iconBtn}`} aria-label="Dismiss">
         <DismissRegular aria-hidden />
       </button>
     </MessageBarActions>
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Popover/popover.module.css b/packages/react-components/react-headless-components-preview/stories/src/Popover/popover.module.css
@@ -18,7 +18,7 @@
 }
 
 .trigger:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -54,7 +54,7 @@
 }
 
 .contextTrigger:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
@@ -129,7 +129,7 @@
 }
 
 .actionButton:focus-visible {
-  outline: var(--stroke-thick) solid var(--text);
+  outline: var(--stroke-thick) solid var(--accent);
   outline-offset: 2px;
 }
 
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Rating/rating.module.css b/packages/react-components/react-headless-components-preview/stories/src/Rating/rating.module.css
@@ -8,6 +8,11 @@
 .item {
   position: relative;
   display: inline-flex;
+  border-radius: var(--radius-sm);
+}
+
+.item:has(:focus-within) {
+  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
 }
 
 .input {
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Select/select.module.css b/packages/react-components/react-headless-components-preview/stories/src/Select/select.module.css
@@ -25,8 +25,7 @@
 
 .select:focus-visible {
   outline: none;
-  border-color: var(--text);
-  box-shadow: 0 0 0 3px var(--surface-muted);
+  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
 }
 
 .select:disabled {
diff --git a/packages/react-components/react-headless-components-preview/stories/src/SpinButton/spin-button.module.css b/packages/react-components/react-headless-components-preview/stories/src/SpinButton/spin-button.module.css
@@ -16,8 +16,7 @@
 }
 
 .wrap:has(:focus-visible) {
-  border-color: var(--text);
-  box-shadow: 0 0 0 3px var(--surface-muted);
+  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
 }
 
 .input {
diff --git a/packages/react-components/react-headless-components-preview/stories/src/TabList/tab-list.module.css b/packages/react-components/react-headless-components-preview/stories/src/TabList/tab-list.module.css
@@ -4,6 +4,7 @@
   padding: 4px;
   background: var(--surface-muted);
   border-radius: var(--radius-pill);
+  width: max-content;
 }
 
 .tabsVertical {
@@ -35,17 +36,17 @@
   color: var(--text);
 }
 
-.tab:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
-}
-
 .tab[data-selected] {
   background: var(--bg-elev);
   color: var(--text);
   box-shadow: var(--shadow-1);
 }
 
+.tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
+}
+
 .layout {
   display: flex;
   flex-direction: column;
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Textarea/textarea.module.css b/packages/react-components/react-headless-components-preview/stories/src/Textarea/textarea.module.css
@@ -14,8 +14,7 @@
 }
 
 .wrap:has(:focus-visible) {
-  border-color: var(--text);
-  box-shadow: 0 0 0 3px var(--surface-muted);
+  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
 }
 
 .textarea {
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipControlled.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipControlled.stories.tsx
@@ -1,28 +1,26 @@
 import * as React from 'react';
 import { Tooltip } from '@fluentui/react-headless-components-preview/tooltip';
 
+import styles from './tooltip.module.css';
+
 export const Controlled = (): React.ReactNode => {
   const [visible, setVisible] = React.useState(false);
   const toggleTooltip = () => setVisible(v => !v);
 
   return (
-    <div className="flex gap-2 items-center">
+    <div className={styles.row}>
       <Tooltip
         content={{
-          className: 'bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md',
+          className: styles.content,
           children: 'Controlled tooltip',
         }}
         relationship="description"
         visible={visible}
+        positioning={{ offset: 8 }}
       >
-        <button className="px-3 py-1.5 rounded border border-gray-300 bg-white hover:bg-gray-50 text-sm cursor-pointer">
-          Trigger
-        </button>
+        <button className={`${styles.trigger} ${styles.triggerOutline}`}>Trigger</button>
       </Tooltip>
-      <button
-        onClick={toggleTooltip}
-        className="px-3 py-1.5 rounded border border-gray-300 bg-white hover:bg-gray-50 text-sm cursor-pointer"
-      >
+      <button onClick={toggleTooltip} className={styles.trigger}>
         {visible ? 'Hide' : 'Show'} Tooltip
       </button>
     </div>
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipDefault.stories.tsx
@@ -1,16 +1,19 @@
 import * as React from 'react';
 import { Tooltip } from '@fluentui/react-headless-components-preview/tooltip';
 
+import styles from './tooltip.module.css';
+
 export const Default = (): React.ReactNode => (
-  <Tooltip
-    content={{
-      className: 'bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md',
-      children: 'This is the tooltip label',
-    }}
-    relationship="description"
-  >
-    <button className="px-3 py-1.5 rounded border border-gray-300 bg-white hover:bg-gray-50 text-sm cursor-pointer">
-      Hover or focus me
-    </button>
-  </Tooltip>
+  <div className={styles.row}>
+    <Tooltip
+      content={{
+        className: styles.content,
+        children: 'This is the tooltip label',
+      }}
+      relationship="description"
+      positioning={{ offset: 8 }}
+    >
+      <button className={styles.trigger}>Hover or focus me</button>
+    </Tooltip>
+  </div>
 );
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipPositions.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipPositions.stories.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react';
 import { Tooltip } from '@fluentui/react-headless-components-preview/tooltip';
 
+import styles from './tooltip.module.css';
+
 export const Positions = (): React.ReactNode => (
-  <div className="flex gap-4 flex-wrap p-20">
+  <div className={styles.row}>
     {(['above', 'below', 'before', 'after'] as const).map(position => (
       <Tooltip
         key={position}
         content={{
-          className: 'bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md',
+          className: styles.content,
           children: `Position: ${position}`,
         }}
         relationship="description"
-        positioning={position}
+        positioning={{ position, offset: 8 }}
       >
-        <button className="px-3 py-1.5 rounded border border-gray-300 bg-white hover:bg-gray-50 text-sm cursor-pointer capitalize">
-          {position}
-        </button>
+        <button className={`${styles.trigger} ${styles.capitalize}`}>{position}</button>
       </Tooltip>
     ))}
   </div>
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipRelationshipDescription.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipRelationshipDescription.stories.tsx
@@ -1,18 +1,21 @@
 import * as React from 'react';
 import { Tooltip } from '@fluentui/react-headless-components-preview/tooltip';
 
+import styles from './tooltip.module.css';
+
 export const RelationshipDescription = (): React.ReactNode => (
-  <Tooltip
-    content={{
-      className: 'bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md',
-      children: 'This is the description of the button',
-    }}
-    relationship="description"
-  >
-    <button className="px-3 py-1.5 rounded border border-gray-300 bg-white hover:bg-gray-50 text-sm cursor-pointer">
-      Button
-    </button>
-  </Tooltip>
+  <div className={styles.row}>
+    <Tooltip
+      content={{
+        className: styles.content,
+        children: 'This is the description of the button',
+      }}
+      relationship="description"
+      positioning={{ offset: 8 }}
+    >
+      <button className={styles.trigger}>Button</button>
+    </Tooltip>
+  </div>
 );
 
 RelationshipDescription.storyName = 'Relationship: description';
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipRelationshipLabel.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipRelationshipLabel.stories.tsx
@@ -1,25 +1,26 @@
 import * as React from 'react';
 import { Tooltip } from '@fluentui/react-headless-components-preview/tooltip';
 
-const tooltipContent = (text: string) => ({
-  className: 'bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md',
-  children: text,
-});
+import styles from './tooltip.module.css';
 
 export const RelationshipLabel = (): React.ReactNode => (
-  <div className="flex gap-2">
-    <Tooltip content={tooltipContent('Bold')} relationship="label">
-      <button className="w-8 h-8 rounded border border-gray-300 bg-white hover:bg-gray-50 font-bold text-sm cursor-pointer">
-        B
-      </button>
+  <div className={styles.row}>
+    <Tooltip content={{ className: styles.content, children: 'Bold' }} relationship="label" positioning={{ offset: 8 }}>
+      <button className={`${styles.trigger} ${styles.triggerOutline} ${styles.triggerIcon} ${styles.bold}`}>B</button>
     </Tooltip>
-    <Tooltip content={tooltipContent('Italic')} relationship="label">
-      <button className="w-8 h-8 rounded border border-gray-300 bg-white hover:bg-gray-50 italic text-sm cursor-pointer">
-        I
-      </button>
+    <Tooltip
+      content={{ className: styles.content, children: 'Italic' }}
+      relationship="label"
+      positioning={{ offset: 8 }}
+    >
+      <button className={`${styles.trigger} ${styles.triggerOutline} ${styles.triggerIcon} ${styles.italic}`}>I</button>
     </Tooltip>
-    <Tooltip content={tooltipContent('Underline')} relationship="label">
-      <button className="w-8 h-8 rounded border border-gray-300 bg-white hover:bg-gray-50 underline text-sm cursor-pointer">
+    <Tooltip
+      content={{ className: styles.content, children: 'Underline' }}
+      relationship="label"
+      positioning={{ offset: 8 }}
+    >
+      <button className={`${styles.trigger} ${styles.triggerOutline} ${styles.triggerIcon} ${styles.underline}`}>
         U
       </button>
     </Tooltip>
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipWithArrow.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/Tooltip/TooltipWithArrow.stories.tsx
diff --git a/packages/react-components/react-headless-components-preview/stories/src/Tooltip/tooltip.module.css b/packages/react-components/react-headless-components-preview/stories/src/Tooltip/tooltip.module.css

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.card:focus-visible {`
`22`		`- outline: var(--stroke-thick) solid var(--text);`
	`22`	`+ outline: var(--stroke-thick) solid var(--accent);`
`23`	`23`	`outline-offset: 2px;`
`24`	`24`	`}`
`25`	`25`
`@@ -131,7 +131,7 @@`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`.iconButton:focus-visible {`
`134`		`- outline: var(--stroke-thick) solid var(--text);`
	`134`	`+ outline: var(--stroke-thick) solid var(--accent);`
`135`	`135`	`outline-offset: 2px;`
`136`	`136`	`}`
`137`	`137`
`@@ -171,7 +171,7 @@`
`171`	`171`	`}`
`172`	`172`
`173`	`173`	`.footerButton:focus-visible {`
`174`		`- outline: var(--stroke-thick) solid var(--text);`
	`174`	`+ outline: var(--stroke-thick) solid var(--accent);`
`175`	`175`	`outline-offset: 2px;`
`176`	`176`	`}`
`177`	`177`
`@@ -186,7 +186,7 @@`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`.checkbox:focus-visible {`
`189`		`- outline: var(--stroke-thick) solid var(--text);`
	`189`	`+ outline: var(--stroke-thick) solid var(--accent);`
`190`	`190`	`outline-offset: 2px;`
`191`	`191`	`}`
`192`	`192`
Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,14 @@`
`65`	`65`	`transition: background var(--duration-fast) var(--ease-standard);`
`66`	`66`	`}`
`67`	`67`
	`68`	`+.btn:focus {`
	`69`	`+ outline: none;`
	`70`	`+}`
	`71`	`+`
	`72`	`+.btn:focus-visible {`
	`73`	`+ box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);`
	`74`	`+}`
	`75`	`+`
`68`	`76`	`.btn:hover {`
`69`	`77`	`background: var(--surface-sunken);`
`70`	`78`	`}`
Original file line number	Diff line number	Diff line change
`@@ -125,7 +125,7 @@`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`.closeButton:focus-visible {`
`128`		`- outline: var(--stroke-thick) solid var(--text);`
	`128`	`+ outline: var(--stroke-thick) solid var(--accent);`
`129`	`129`	`outline-offset: 2px;`
`130`	`130`	`}`
`131`	`131`
`@@ -135,20 +135,20 @@`
`135`	`135`	`height: 32px;`
`136`	`136`	`padding: 0 var(--space-3);`
`137`	`137`	`border: 0;`
`138`		`- border-radius: var(--radius-md);`
`139`		`- background: var(--text);`
`140`		`- color: var(--text-on-accent);`
	`138`	`+ border-radius: var(--radius-pill);`
	`139`	`+ background: var(--accent);`
	`140`	`+ color: var(--accent-contrast);`
`141`	`141`	`font-size: 13.5px;`
`142`	`142`	`font-weight: 500;`
`143`	`143`	`cursor: pointer;`
`144`	`144`	`}`
`145`	`145`
`146`	`146`	`.primaryButton:hover {`
`147`		`- background: var(--text-muted);`
	`147`	`+ background: var(--accent-strong);`
`148`	`148`	`}`
`149`	`149`
`150`	`150`	`.primaryButton:focus-visible {`
`151`		`- outline: var(--stroke-thick) solid var(--text);`
	`151`	`+ outline: var(--stroke-thick) solid var(--accent);`
`152`	`152`	`outline-offset: 2px;`
`153`	`153`	`}`
`154`	`154`
`@@ -170,7 +170,7 @@`
`170`	`170`	`}`
`171`	`171`
`172`	`172`	`.secondaryButton:focus-visible {`
`173`		`- outline: var(--stroke-thick) solid var(--text);`
	`173`	`+ outline: var(--stroke-thick) solid var(--accent);`
`174`	`174`	`outline-offset: 2px;`
`175`	`175`	`}`
`176`	`176`
Original file line number	Diff line number	Diff line change
`@@ -16,8 +16,7 @@`
`16`	`16`
`17`	`17`	`.wrap:has(:focus-visible),`
`18`	`18`	`.wrap:focus-within {`
`19`		`- border-color: var(--text);`
`20`		`- box-shadow: 0 0 0 3px var(--surface-muted);`
	`19`	`+ box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);`
`21`	`20`	`}`
`22`	`21`
`23`	`22`	`.wrap[data-disabled],`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.trigger:focus-visible {`
`21`		`- outline: var(--stroke-thick) solid var(--text);`
	`21`	`+ outline: var(--stroke-thick) solid var(--accent);`
`22`	`22`	`outline-offset: 2px;`
`23`	`23`	`}`
`24`	`24`
`@@ -54,7 +54,7 @@`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`.contextTrigger:focus-visible {`
`57`		`- outline: var(--stroke-thick) solid var(--text);`
	`57`	`+ outline: var(--stroke-thick) solid var(--accent);`
`58`	`58`	`outline-offset: 2px;`
`59`	`59`	`}`
`60`	`60`
`@@ -129,7 +129,7 @@`
`129`	`129`	`}`
`130`	`130`
`131`	`131`	`.actionButton:focus-visible {`
`132`		`- outline: var(--stroke-thick) solid var(--text);`
	`132`	`+ outline: var(--stroke-thick) solid var(--accent);`
`133`	`133`	`outline-offset: 2px;`
`134`	`134`	`}`
`135`	`135`
Original file line number	Diff line number	Diff line change
`@@ -25,8 +25,7 @@`
`25`	`25`
`26`	`26`	`.select:focus-visible {`
`27`	`27`	`outline: none;`
`28`		`- border-color: var(--text);`
`29`		`- box-shadow: 0 0 0 3px var(--surface-muted);`
	`28`	`+ box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);`
`30`	`29`	`}`
`31`	`30`
`32`	`31`	`.select:disabled {`