fix(web-components): add set theme export (#35778)

Author: davatron5000

change/@fluentui-web-components-30d89755-4b5f-4749-ac2b-01f0244f2591.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: add setTheme export",
+  "packageName": "@fluentui/web-components",
+  "email": "rupertdavid@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/.storybook/docs-root.css

@@ -438,12 +438,16 @@ body ul li {
 
 h1.fluent {
   font-weight: 700;
-  font-size: 40px;
+  font-size: 40px !important;
   font-family: 'Segoe UI';
   line-height: 48px;
   letter-spacing: -0.16px;
 }
 
+h1.fluent p {
+  font-size: 40px !important;
+}
+
 h1.fluent .fluent-version {
   display: block;
   font-size: 24px;

packages/web-components/docs/web-components.api.md

@@ -3543,9 +3543,7 @@ export const roleForMenuItem: {
     [value in keyof typeof MenuItemRole]: (typeof MenuItemRole)[value];
 };
 
-// Warning: (ae-internal-missing-underscore) The name "setTheme" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
+// @public
 export function setTheme(theme: Theme | null, node?: Document | HTMLElement): void;
 
 // Warning: (ae-internal-missing-underscore) The name "setThemeFor" should be prefixed with an underscore because the declaration is marked as @internal
@@ -4319,9 +4317,7 @@ export const TextWeight: {
 // @public
 export type TextWeight = ValuesOf<typeof TextWeight>;
 
-// Warning: (ae-internal-missing-underscore) The name "Theme" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
+// @public
 export type Theme = Record<string, string | number>;
 
 // @public

packages/web-components/src/_docs/developer/polyfilling.mdx

@@ -10,10 +10,33 @@ Fluent UI Web Components takes a "bring your own polyfill" approach so that proj
 
 Here's a list of features we're leveraging and their current [Baseline](https://web.dev/baseline) browser support.
 
-|                        | Chrome | Edge | Firefox | Safari |
-| ---------------------- | ------ | ---- | ------- | ------ |
-| HTML Popover Attribute | 114    | 114  | 125     | 17     |
-| CSS Anchor Positioning | 125    | 125  | ❌      | ❌     |
+<table>
+  <thead>
+    <tr>
+      <th></th>
+      <th>Chrome</th>
+      <th>Edge</th>
+      <th>Firefox</th>
+      <th>Safari</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>HTML Popover Attribute</td>
+      <td>114</td>
+      <td>114</td>
+      <td>125</td>
+      <td>17</td>
+    </tr>
+    <tr>
+      <td>CSS Anchor Positioning</td>
+      <td>125</td>
+      <td>125</td>
+      <td>147</td>
+      <td>26</td>
+    </tr>
+  </tbody>
+</table>
 
 ## HTML Popover
 

packages/web-components/src/_docs/developer/quick-start.mdx

@@ -2,53 +2,64 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Concepts/Developer/Quick Start" />
 
-## Install
+# Quick Start
 
-Fluent UI should be installed as a `dependency` of your app.
+## Install Fluent UI Web Components v3
 
-**Yarn**
+Fluent UI web components and Fluent tokens should be installed as a `dependency` of your app. Both packages are also [available on unpkg](https://unpkg.com/@fluentui/web-components).
 
 ```sh
-yarn add @fluentui/web-components
+npm install @fluentui/web-components @fluentui/tokens
 ```
 
-**NPM**
+## Basic Usage: Import entire component bundle
 
-```sh
-npm i @fluentui/web-components
-```
+The easiest way to get up and running with Fluent Web Components is to use our entire component bundle. You will also need Fluent UI's design token CSS on the page in either by generating stylesheet yourself or using our `setTheme` utility.
 
-**pnpm**
+```js
+// Import all components and the setTheme utility
+import '@fluentui/web-components/web-components.min.js';
 
-```sh
-pnpm add @fluentui/web-components
+// Set theme
+import { webLightTheme } from '@fluentui/tokens';
+setTheme(webLightTheme);
 ```
 
-## Setup
+## Recommended Usage: Use our tree-shakable component exports
+
+To reduce your production bundle size, we offer each component as a standalone ESM export. We recommend this pathway for maximum performance and tree-shaking. There are two options for importing individual components.
+
+### Importing the defined component
 
-Fluent UI Web Components are styled using tokens in the form of CSS variables. You can use the `setTheme` utility to provide a theme for your website or application.
+Our defined component exports will import single components _and_ define the custom element on the page.
 
 ```js
+// Import with side-effectful Custom Element definitions
+import '@fluentui/web-components/button.js';
+import '@fluentui/web-components/dialog.js';
+
+// Set theme
 import { setTheme } from '@fluentui/web-components';
 import { webLightTheme } from '@fluentui/tokens';
-
 setTheme(webLightTheme);
 ```
 
-## Usage
-
-That's it. You can now use Fluent UI Web Components in your app.
-
-**Importing the defined component:**
+Note: If a component has a child component dependency, you will need to import both components (e.g. Tablist and Tab).
 
-```js
-import '@fluentui/web-components/button.js';
-```
+### Defining the element yourself using named imports
 
-**Defining the element yourself using named imports:**
+If you want to control side-effects and need granular control of when your component definitions are defined, import the named imports for each component definition, and call the `define` method.
 
 ```js
-import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';
+// Import non-side-effectful component definitions
+import { ButtonDefinition, DialogDefinition, FluentDesignSystem } from '@fluentui/web-components';
 
+// Manual component definition
 ButtonDefinition.define(FluentDesignSystem.registry);
+DialogDefinition.define(FluentDesignSystem.registry);
+
+// Set theme
+import { setTheme } from '@fluentui/web-components';
+import { webLightTheme } from '@fluentui/tokens';
+setTheme(webLightTheme);
 ```

packages/web-components/src/index-rollup.ts

@@ -42,3 +42,4 @@ import './toggle-button/define.js';
 import './tooltip/define.js';
 import './tree/define.js';
 import './tree-item/define.js';
+export { setTheme } from './theme/set-theme.js';

packages/web-components/src/theme/index.ts

@@ -4,11 +4,6 @@ export {
   borderRadiusMedium,
   borderRadiusLarge,
   borderRadiusXLarge,
-  borderRadius2XLarge,
-  borderRadius3XLarge,
-  borderRadius4XLarge,
-  borderRadius5XLarge,
-  borderRadius6XLarge,
   borderRadiusCircular,
   fontSizeBase100,
   fontSizeBase200,
@@ -154,9 +149,6 @@ export {
   colorNeutralBackground5Selected,
   colorNeutralBackground6,
   colorNeutralBackgroundInverted,
-  colorNeutralBackgroundInvertedHover,
-  colorNeutralBackgroundInvertedPressed,
-  colorNeutralBackgroundInvertedSelected,
   colorNeutralBackgroundStatic,
   colorSubtleBackground,
   colorSubtleBackgroundHover,

packages/web-components/src/theme/set-theme.ts

@@ -4,7 +4,7 @@ import { uniqueId } from '@microsoft/fast-web-utilities';
 /**
  * Not using the `Theme` type from `@fluentui/tokens` package to allow custom
  * tokens to be added.
- * @internal
+ * @public
  */
 export type Theme = Record<string, string | number>;
 
@@ -46,7 +46,7 @@ const globalThemeStyleSheet = new CSSStyleSheet();
  *     as each entry’s value is either a string or a number.
  * @param node - The node to set the theme on, defaults to `document` for
  *     setting global theme.
- * @internal
+ * @public
  */
 export function setTheme(theme: Theme | null, node: Document | HTMLElement = document) {
   if (!node || !isThemeableNode(node)) {