add tokens switch to storybook addon

.github/CODEOWNERS

@@ -277,6 +277,7 @@ packages/react-components/react-virtualizer/stories @microsoft/xc-uxe @Mitch-At-
 packages/react-components/react-skeleton/library @microsoft/cxe-prg
 packages/react-components/react-skeleton/stories @microsoft/cxe-prg
 packages/tokens @microsoft/teams-prg
+packages/semantic-tokens @microsoft/xc-uxe
 packages/react-components/react-tags/library @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-tags/stories @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-migration-v0-v9/library @microsoft/teams-prg
@@ -332,6 +333,8 @@ packages/react-components/react-color-picker/library @microsoft/cxe-prg
 packages/react-components/react-color-picker/stories @microsoft/cxe-prg
 packages/react-components/component-selector-preview/library @microsoft/teams-prg
 packages/react-components/component-selector-preview/stories @microsoft/teams-prg
+packages/react-components/semantic-style-hooks-preview/library @microsoft/xc-uxe
+packages/react-components/semantic-style-hooks-preview/stories @microsoft/xc-uxe
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components

apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx

@@ -13,9 +13,10 @@ import {
 import type { PreparedStory, Renderer, SBEnumType } from '@storybook/types';
 import { makeStyles, shorthands, tokens, Link, Text } from '@fluentui/react-components';
 import { InfoFilled } from '@fluentui/react-icons';
-import { DIR_ID, THEME_ID, themes } from '@fluentui/react-storybook-addon';
+import { DIR_ID, THEME_ID, TOKEN_ID, themes } from '@fluentui/react-storybook-addon';
 import { DirSwitch } from './DirSwitch.stories';
 import { ThemePicker } from './ThemePicker.stories';
+import { TokenSwitch } from './TokenSwitch.stories';
 import { Toc, nameToHash } from './Toc.stories';
 
 type PrimaryStory = PreparedStory<Renderer>;
@@ -281,6 +282,7 @@ export const FluentDocsPage = () => {
   assertStoryMetaValues(primaryStory);
 
   const dir = primaryStoryContext.parameters?.dir ?? primaryStoryContext.globals?.[DIR_ID] ?? 'ltr';
+  const token = primaryStoryContext.parameters?.token ?? primaryStoryContext.globals?.[TOKEN_ID] ?? 'semantic';
   const selectedTheme = themes.find(theme => theme.id === primaryStoryContext.globals![THEME_ID]);
 
   const hideArgsTable = Boolean(primaryStoryContext.parameters?.docs?.hideArgsTable);
@@ -308,6 +310,7 @@ export const FluentDocsPage = () => {
           <div className={styles.globalTogglesContainer}>
             <ThemePicker selectedThemeId={selectedTheme?.id} />
             <DirSwitch dir={dir} />
+            <TokenSwitch token={token} />
           </div>
           <Subtitle />
           <div className={styles.description}>

apps/public-docsite-v9/src/DocsComponents/TokenSwitch.stories.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { makeStyles, Label, Switch, useId, typographyStyles } from '@fluentui/react-components';
+import type { SwitchProps } from '@fluentui/react-components';
+import { TOKEN_ID } from '@fluentui/react-storybook-addon';
+import { addons } from '@storybook/preview-api';
+
+const useStyles = makeStyles({
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'start',
+  },
+  label: {
+    ...typographyStyles.subtitle2,
+  },
+});
+
+/**
+ * Tokens switch used in the react-components docs header
+ */
+export const TokenSwitch: React.FC<{ token?: 'semantic' | 'legacy' }> = ({ token }) => {
+  const switchId = useId('token-switch');
+
+  const styles = useStyles();
+
+  const [currentToken, setCurrentToken] = React.useState(token);
+  const checked = currentToken === 'legacy';
+
+  const setGlobalToken = (newToken: 'semantic' | 'legacy'): void => {
+    addons.getChannel().emit('updateGlobals', { globals: { [TOKEN_ID]: newToken } });
+  };
+
+  const onChange = React.useCallback<NonNullable<SwitchProps['onChange']>>((_, data) => {
+    const newToken = data.checked ? 'legacy' : 'semantic';
+    setGlobalToken(newToken);
+    setCurrentToken(newToken);
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <Label className={styles.label} htmlFor={currentToken === 'semantic' ? undefined : switchId}>
+        Semantic Tokens
+      </Label>
+      <Switch checked={checked} id={switchId} onChange={onChange} />
+      <Label className={styles.label} htmlFor={currentToken === 'legacy' ? switchId : undefined}>
+        Legacy Tokens
+      </Label>
+    </div>
+  );
+};

change/@fluentui-react-dialog-a27a006c-4b45-4030-8a49-2d8e6af3353c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export dialog style constants",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-d8471d3e-b5bd-4826-b835-b5b411cad36f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export DrawerBaseState for external usage",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-01e5189d-a9e1-4498-96f1-da2ece9bf1a8.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Add DrawerSurfaceStyle custom style hook",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-storybook-addon-c9a2a07b-3285-40b5-820a-ddcb8b185189.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: Temporarily add kumo semantic theme (will be removed before merge)",
+  "packageName": "@fluentui/react-storybook-addon",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export reservedSpaceClassNames and useTabAnimatedIndicatorStyles_unstable for style overrides",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export ToastContainer state and classNames nessecary for style overrides",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-d996b541-0709-4b79-a872-717af378c09c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export TreeItemCSSProperties for external usage",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-semantic-style-hooks-preview-2fefb723-8232-43c0-aa3f-417c55d0949a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Implement semantic style hooks framework",
+  "packageName": "@fluentui/semantic-style-hooks-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-semantic-tokens-ab69ccc6-b777-4bb6-909a-c406cc6406d2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: Initial semantic token package scaffolding",
+  "packageName": "@fluentui/semantic-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

nx.json

@@ -151,6 +151,7 @@
         "scripts/**/*",
         "packages/eslint-plugin/**",
         "packages/tokens/**",
+        "packages/semantic-tokens/**",
         "packages/react-conformance/**",
         "packages/react-components/**/*"
       ]

packages/react-components/react-dialog/library/etc/react-dialog.api.md

@@ -223,6 +223,15 @@ export type DialogTriggerState = {
     children: React_2.ReactElement | null;
 };
 
+// @public (undocumented)
+export const FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = "4px";
+
+// @public (undocumented)
+export const MEDIA_QUERY_BREAKPOINT_SELECTOR = "@media screen and (max-width: 480px)";
+
+// @public (undocumented)
+export const MEDIA_QUERY_SHORT_SCREEN = "@media screen and (max-height: 359px)";
+
 // @public
 export const renderDialog_unstable: (state: DialogState, contextValues: DialogContextValues) => JSX.Element;
 

packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBodyStyles.styles.ts

@@ -19,6 +19,10 @@ const useResetStyles = makeResetStyles({
   gridTemplateRows: 'auto 1fr',
   gridTemplateColumns: '1fr 1fr auto',
 
+  '@supports (height: 1dvh)': {
+    maxHeight: `calc(100dvh - 2 * ${SURFACE_PADDING})`,
+  },
+
   [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',
     gridTemplateRows: 'auto 1fr auto',

packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts

@@ -43,6 +43,10 @@ const useRootBaseStyle = makeResetStyles({
   // to ensure dialog will be properly styled when surfaceMotion is opted-out
   boxShadow: tokens.shadow64,
 
+  '@supports (height: 1dvh)': {
+    maxHeight: '100dvh',
+  },
+
   [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',
   },
@@ -64,7 +68,7 @@ const useBackdropBaseStyle = makeResetStyles({
   position: 'fixed',
 });
 
-const useBackdropStyles = makeStyles({
+const useStyles = makeStyles({
   nestedDialogBackdrop: {
     backgroundColor: tokens.colorTransparentBackground,
   },
@@ -81,15 +85,15 @@ export const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): Dial
   const rootBaseStyle = useRootBaseStyle();
 
   const backdropBaseStyle = useBackdropBaseStyle();
-  const backdropStyles = useBackdropStyles();
+  const styles = useStyles();
 
   root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);
 
   if (backdrop) {
     backdrop.className = mergeClasses(
       dialogSurfaceClassNames.backdrop,
       backdropBaseStyle,
-      isNestedDialog && backdropStyles.nestedDialogBackdrop,
+      isNestedDialog && styles.nestedDialogBackdrop,
       backdrop.className,
     );
   }

packages/react-components/react-dialog/library/src/index.ts

@@ -83,3 +83,9 @@ export {
 } from './contexts/index';
 
 export type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index';
+
+export {
+  MEDIA_QUERY_BREAKPOINT_SELECTOR,
+  MEDIA_QUERY_SHORT_SCREEN,
+  FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+} from './contexts/constants';

packages/react-components/react-drawer/library/etc/react-drawer.api.md

@@ -21,6 +21,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Drawer: ForwardRefComponent<DrawerProps>;
 
+// @public (undocumented)
+export type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {
+    motion: MotionState<HTMLElement>;
+    open?: boolean;
+};
+
 // @public
 export const DrawerBody: ForwardRefComponent<DrawerBodyProps>;
 

packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx

@@ -8,6 +8,7 @@ import {
 
 import { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';
 import type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * @internal
@@ -30,6 +31,7 @@ export const OverlayDrawerSurface: ForwardRefComponent<OverlayDrawerSurfaceProps
   const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);
 
   useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);
+  useCustomStyleHook_unstable('useOverlayDrawerSurfaceStyles_unstable')(dialogSurfaceState);
 
   return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);
 });

packages/react-components/react-drawer/library/src/index.ts

@@ -70,3 +70,5 @@ export {
   useDrawerFooter_unstable,
 } from './DrawerFooter';
 export type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter';
+
+export type { DrawerBaseState } from './shared';

packages/react-components/react-drawer/library/src/shared/index.ts

@@ -0,0 +1 @@
+export type { DrawerBaseState } from './DrawerBase.types';

packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx

@@ -38,6 +38,12 @@ const useStyles = makeStyles({
   },
   itemSelected: {
     backgroundColor: tokens.colorSubtleBackgroundSelected,
+    ':hover': {
+      backgroundColor: tokens.colorSubtleBackgroundSelected,
+    },
+    ':active': {
+      backgroundColor: tokens.colorSubtleBackgroundSelected,
+    },
     '@media (forced-colors:active)': {
       background: 'Highlight',
     },

packages/react-components/react-shared-contexts/library/etc/react-shared-contexts.api.md

@@ -92,6 +92,7 @@ export const CustomStyleHooksContext_unstable: React_2.Context<Partial<{
     useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
     useDrawerInlineStyles_unstable: CustomStyleHook;
     useDrawerOverlayStyles_unstable: CustomStyleHook;
+    useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook;
     useDrawerStyles_unstable: CustomStyleHook;
     useDropdownStyles_unstable: CustomStyleHook;
     useEmptySwatchStyles_unstable: CustomStyleHook;
@@ -274,6 +275,7 @@ export type CustomStyleHooksContextValue_unstable = Partial<{
     useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
     useDrawerInlineStyles_unstable: CustomStyleHook;
     useDrawerOverlayStyles_unstable: CustomStyleHook;
+    useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook;
     useDrawerStyles_unstable: CustomStyleHook;
     useDropdownStyles_unstable: CustomStyleHook;
     useEmptySwatchStyles_unstable: CustomStyleHook;
@@ -456,6 +458,7 @@ export const CustomStyleHooksProvider_unstable: React_2.Provider<Partial<{
     useDrawerHeaderTitleStyles_unstable: CustomStyleHook;
     useDrawerInlineStyles_unstable: CustomStyleHook;
     useDrawerOverlayStyles_unstable: CustomStyleHook;
+    useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook;
     useDrawerStyles_unstable: CustomStyleHook;
     useDropdownStyles_unstable: CustomStyleHook;
     useEmptySwatchStyles_unstable: CustomStyleHook;

packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts

@@ -65,6 +65,7 @@ export type CustomStyleHooksContextValue = Partial<{
   useDrawerInlineStyles_unstable: CustomStyleHook;
   /** @deprecated Use useOverlayDrawerStyles_unstable instead. */
   useDrawerOverlayStyles_unstable: CustomStyleHook;
+  useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook;
   useDrawerStyles_unstable: CustomStyleHook;
   useDropdownStyles_unstable: CustomStyleHook;
   useEmptySwatchStyles_unstable: CustomStyleHook;

packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md

@@ -19,6 +19,8 @@ export interface FluentGlobals extends Args {
     [STRICT_MODE_ID]?: boolean;
     // (undocumented)
     [THEME_ID]?: ThemeIds;
+    // (undocumented)
+    [TOKEN_ID]?: 'semantic' | 'legacy';
 }
 
 // @public
@@ -33,6 +35,8 @@ export interface FluentParameters extends Parameters_2 {
     reactStorybookAddon?: {
         disabledDecorators: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];
     };
+    // (undocumented)
+    token?: 'semantic' | 'legacy';
 }
 
 // @public (undocumented)
@@ -47,6 +51,7 @@ export interface FluentStoryContext extends StoryContext {
 export function parameters(options?: FluentParameters): {
     dir: string;
     fluentTheme: string;
+    token: string;
     mode: string;
     reactStorybookAddon?: {
         disabledDecorators: ["AriaLive" | "FluentProvider" | "ReactStrictMode"];
@@ -75,8 +80,14 @@ export const themes: readonly [{
 }, {
     readonly id: "teams-high-contrast";
     readonly label: "Teams High Contrast";
+}, {
+    readonly id: "semantic-kumo";
+    readonly label: "Semantic Kumo (Experimental)";
 }];
 
+// @public (undocumented)
+export const TOKEN_ID: "storybook_fluentui-react-addon_token";
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-components/react-storybook-addon/package.json

@@ -19,6 +19,9 @@
     "@fluentui/react-aria": "^9.14.6",
     "@fluentui/react-provider": "^9.20.6",
     "@fluentui/react-theme": "^9.1.24",
+    "@fluentui/semantic-style-hooks-preview": "^0.0.0",
+    "@fluentui/semantic-tokens": "0.0.0-alpha.1",
+    "@fluentui/react-shared-contexts": "^9.23.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {

packages/react-components/react-storybook-addon/project.json

@@ -7,7 +7,12 @@
   "implicitDependencies": [],
   "targets": {
     "build": {
-      "dependsOn": [{ "projects": ["react-aria", "react-provider"], "target": "build" }]
+      "dependsOn": [
+        {
+          "projects": ["react-aria", "react-provider", "semantic-tokens", "semantic-style-hooks-preview"],
+          "target": "build"
+        }
+      ]
     }
   }
 }