feat(wc): Add v9-compatible themes #25660

miroslavstastny · 2022-11-14T17:39:11Z

Add themes compatible with `@fluentui/react-components@9`

In v9, there are currently 4 basic themes:

Light,
Dark,
Teams Dark,
Teams High Contrast.

Each of the themes is a function of a brand ramp. As an example Web Light Theme is the Light Theme created with Web brand ramp and Teams Light Theme is the Light Theme created with Teams brand ramp.

This PR proposed how Web Components can have a theme compatible with React.

miroslavstastny · 2022-11-14T17:39:36Z

packages/web-components/.storybook/preview.js

@@ -14,36 +20,11 @@ export const parameters = {
  },
  options: {
    storySort: {
-      order: [


Removed legacy

miroslavstastny · 2022-11-14T17:45:23Z

packages/web-components/package.json

+    "@microsoft/fast-element": "^2.0.0-beta.17",
+    "@microsoft/fast-foundation": "^3.0.0-alpha.21",
+    "@microsoft/fast-web-utilities": "^6.0.0",
+    "@fluentui/react-theme": "^9.1.1",


This adds dependency on a react-theme package 💣
There is nothing React related in that package besides two things:

It has react in the package name.

It adds react as a peer dependency.

If we decide to go this way, we should do one of the following things:

Rename react-theme to theme, get rid of the peer dependency (might be breaking change for FUIRv9).

Hoist the tokens from react-theme to theme, re-export in react-theme.

Use token pipeline to generate the same theme files for web-components.

ideally we should use same fluent tokens and themes in all web experiences, thus

if react-theme doesn't contain anything react specific besides the peerDep

deprecate react-theme on npm

rename react-theme to react (removal of peer Deps )

having react-theme with re-exports of theme adds unnecessary maintenance

might be breaking change for FUIRv9

from react-components api POV there will be no breaking change. once someone installs new feature bump of react-components they will get theme instead of react-theme in they node_modules

If there is no use of React in react-theme why can't we just create a theme package and use that directly in react-components and get rid of the react-theme all together?

That's what @Hotell is proposing (+ npm deprecation). I was not sure whether we would consider it a breaking change or not.

Agree that the change is not breaking.

Was just chatting with @chrisdholt today and we'd definitely love to have a shared, library-agnostic theme package that we can base both React and Web Components on. Sounds like folks here arrived at the same conclusion. +1 from me.

+1 lets start from here

miroslavstastny · 2022-11-14T17:46:43Z

packages/web-components/src/theme/design-tokens.ts

+
+const { create } = DesignToken;
+
+export const borderRadiusNone = create<string>('borderRadiusNone');


No default values here. Each theme has its own values.

miroslavstastny · 2022-11-14T17:47:16Z

packages/web-components/src/theme/design-tokens.ts

@@ -0,0 +1,383 @@
+import { DesignToken } from '@microsoft/fast-foundation';


This files should be generated by the token pipeline.

miroslavstastny · 2022-11-14T17:48:19Z

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

@@ -0,0 +1,2 @@
+export * from './design-tokens';


I need to add bundle-size / tree-shaking tests. After that we might reconsider the way how we export and consume tokens.

miroslavstastny · 2022-11-14T17:49:40Z

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

+ * Sets the theme tokens on defaultNode.
+ * @param theme Flat object of theme token values.
+ */
+export const setTheme = (theme: Theme) => {


Only defaultNode (global) for now.
If agreed, we will add setValueFor version for scoped theming.

miroslavstastny · 2022-11-14T17:51:32Z

packages/web-components/public/theme-switch.ts

+import { setTheme } from '../src/theme';
+
+const themes = {
+  'web-light': webLightTheme,


For now, there are no theme exports from web components.
If we decide to go this way, we need to discuss the export contract.

Is this for Storybook only? Named exports are treeshakable but an object is not, so all themes will always be included here.

Correct, storybook only for now.
Once we know the packages structure, we will decide whether partners will import the theme directly from theme package or web-components will re-export the themes and how.

We can discuss later - may be ideal to export from the package though given we’re using DesignToken.

codesandbox-ci · 2022-11-14T17:51:53Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8c9a0f3:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2022-11-14T17:53:01Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 7f15428e8fb2c3cfbfe8e555978bfa66f74f8fd8 (build)

fabricteam · 2022-11-14T17:57:56Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-combobox` Combobox (including child components)	`75.85 kB` `24.632 kB`	`76.135 kB` `24.738 kB`	`285 B` `106 B`
`react-combobox` Dropdown (including child components)	`75.579 kB` `24.594 kB`	`75.864 kB` `24.699 kB`	`285 B` `105 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.603 kB` `52.909 kB`	`189.888 kB` `53.022 kB`	`285 B` `113 B`
`react-menu` Menu (including children components)	`116.78 kB` `36.112 kB`	`117.055 kB` `36.238 kB`	`275 B` `126 B`
`react-menu` Menu (including selectable components)	`119.849 kB` `36.635 kB`	`120.124 kB` `36.75 kB`	`275 B` `115 B`
`react-popover` Popover	`103.342 kB` `31.82 kB`	`103.624 kB` `31.927 kB`	`282 B` `107 B`
`react-positioning` usePositioning	`19.724 kB` `7.415 kB`	`20.009 kB` `7.532 kB`	`285 B` `117 B`
`react-tooltip` Tooltip	`41.718 kB` `14.687 kB`	`41.993 kB` `14.799 kB`	`275 B` `112 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`3.153 kB` `1.299 kB`
`react-accordion` Accordion (including children components)	`79.243 kB` `24.436 kB`
`react-alert` Alert	`84.688 kB` `21.233 kB`
`react-avatar` Avatar	`48.874 kB` `13.864 kB`
`react-avatar` AvatarGroup	`14.996 kB` `6.013 kB`
`react-avatar` AvatarGroupItem	`63.452 kB` `17.959 kB`
`react-badge` Badge	`22.646 kB` `7.228 kB`
`react-badge` CounterBadge	`23.536 kB` `7.512 kB`
`react-badge` PresenceBadge	`24.096 kB` `7.09 kB`
`react-button` Button	`36.849 kB` `9.907 kB`
`react-button` CompoundButton	`43.874 kB` `11.123 kB`
`react-button` MenuButton	`39.543 kB` `10.807 kB`
`react-button` SplitButton	`46.989 kB` `12.192 kB`
`react-button` ToggleButton	`52.716 kB` `11.381 kB`
`react-card` Card - All	`67.664 kB` `19.635 kB`
`react-card` Card	`63.346 kB` `18.539 kB`
`react-card` CardFooter	`8.607 kB` `3.622 kB`
`react-card` CardHeader	`9.65 kB` `3.962 kB`
`react-card` CardPreview	`8.708 kB` `3.678 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`62.94 kB` `17.663 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.446 kB` `11.033 kB`
`react-dialog` Dialog (including children components)	`83.147 kB` `24.799 kB`
`react-divider` Divider	`16.505 kB` `5.925 kB`
`react-image` Image	`10.826 kB` `4.286 kB`
`react-infobutton` InfoButton	`7.742 kB` `3.265 kB`
`react-input` Input	`24.428 kB` `7.899 kB`
`react-label` Label	`9.384 kB` `3.883 kB`
`react-link` Link	`11.852 kB` `4.888 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`53.992 kB` `15.25 kB`
`react-portal` Portal	`10.628 kB` `3.899 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-progress` Progress	`13.131 kB` `5.039 kB`
`react-provider` FluentProvider	`15.807 kB` `5.909 kB`
`react-radio` Radio	`36.436 kB` `12.126 kB`
`react-radio` RadioGroup	`14.294 kB` `5.723 kB`
`react-select` Select	`23.255 kB` `7.954 kB`
`react-slider` Slider	`31.978 kB` `10.149 kB`
`react-spinbutton` SpinButton	`45.826 kB` `12.858 kB`
`react-spinner` Spinner	`20.023 kB` `6.461 kB`
`react-switch` Switch	`33.388 kB` `10.578 kB`
`react-text` Text - Default	`11.828 kB` `4.627 kB`
`react-text` Text - Wrappers	`15.138 kB` `5.064 kB`
`react-textarea` Textarea	`25.687 kB` `8.331 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.65 kB` `6.444 kB`
`react-theme` Teams: Light theme	`17.486 kB` `5.057 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 7f15428e8fb2c3cfbfe8e555978bfa66f74f8fd8}

Hotell · 2022-11-15T14:44:48Z

you have dep dupes. make sure to run npx yarn-deduplicate --strategy fewer

Hotell · 2022-11-15T14:34:38Z

packages/web-components/.storybook/preview-body.html

@@ -0,0 +1,9 @@
+<div id="switches-container">


good opportunity to leverage here our theme picker (storybook addon) , later

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

Hotell · 2022-11-15T14:41:25Z

packages/web-components/package.json

+    "@microsoft/fast-element": "^2.0.0-beta.17",
+    "@microsoft/fast-foundation": "^3.0.0-alpha.21",
+    "@microsoft/fast-web-utilities": "^6.0.0",
+    "@fluentui/react-theme": "^9.1.1",


ideally we should use same fluent tokens and themes in all web experiences, thus

if react-theme doesn't contain anything react specific besides the peerDep

deprecate react-theme on npm

rename react-theme to react (removal of peer Deps )

having react-theme with re-exports of theme adds unnecessary maintenance

might be breaking change for FUIRv9

from react-components api POV there will be no breaking change. once someone installs new feature bump of react-components they will get theme instead of react-theme in they node_modules

miroslavstastny · 2022-11-15T17:44:57Z

/azp run

azure-pipelines · 2022-11-15T17:45:12Z

Azure Pipelines successfully started running 2 pipeline(s).

EisenbergEffect · 2022-12-01T17:45:28Z

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

+  <h3>Theme Tokens</h3>
+  <p>Debug story which uses theme tokens to style the element below.</p>
+  <div style="
+    font-family: ${tokens.fontFamilyBase.createCSS()};


@nicholasrice What do you think about adding a toString() and valueOf() implementation to CSSDesignToken? That would make this syntax nicer if used outside of a FAST html or css template.

toString() seems fine to me. Can you elaborate more on valueOf()? It's not clear to me what that would return.

Actually, I don't think we need valueOf(). I just checked and the JavaScript runtime prefers toString() for string conversions over valueOf(). Since we don't need to convert to a numerical type of some non-string type we should be fine with toString().

Oh I see, I didn't realize that was an object prototype method. I think adding toString() to CSSDesignToken makes sense.

miroslavstastny · 2022-12-21T13:05:24Z

As agreed offline, tokens were hoisted from @fluentui/react-theme to @fluentui/tokens.
To unblock component work, I suggest to go with this PR and fix non-blocking issues in follow-up PRs.

…c-theme

ling1726

Approving for v-build related changes

chrisdholt

Let’s move this through and we can adjust iterate as needed (such as exports, etc). Thanks @miroslavstastny!

* bump FAST dependencies * Add theme tokens (from react-theme) * Add theme switcher to storybook * deduplicate packages * fix yarn.lock * Replace @fluentui/react-theme with @fluentui/tokens * change file * address PR comments

miroslavstastny added 3 commits November 14, 2022 16:16

bump FAST dependencies

c202364

Add theme tokens (from react-theme)

32f5de1

Add theme switcher to storybook

182880e

msft-fluent-ui-bot assigned ling1726 Nov 14, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Nov 14, 2022

miroslavstastny commented Nov 14, 2022

View reviewed changes

miroslavstastny assigned miroslavstastny and unassigned ling1726 Nov 15, 2022

Hotell reviewed Nov 15, 2022

View reviewed changes

miroslavstastny added 2 commits November 15, 2022 16:47

deduplicate packages

0bb5c9f

fix yarn.lock

59b529e

EisenbergEffect reviewed Dec 1, 2022

View reviewed changes

Replace @fluentui/react-theme with @fluentui/tokens

e8aa93d

miroslavstastny added 3 commits December 21, 2022 14:06

Merge remote-tracking branch 'upstream/web-components-v3' into feat/w…

4cfb168

…c-theme

change file

9f3bcc0

address PR comments

8c9a0f3

miroslavstastny marked this pull request as ready for review December 21, 2022 13:14

miroslavstastny requested a review from a team as a code owner December 21, 2022 13:14

ling1726 approved these changes Dec 21, 2022

View reviewed changes

chrisdholt approved these changes Dec 21, 2022

View reviewed changes

miroslavstastny merged commit 6de62a4 into microsoft:web-components-v3 Dec 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(wc): Add v9-compatible themes #25660

feat(wc): Add v9-compatible themes #25660

miroslavstastny commented Nov 14, 2022

miroslavstastny Nov 14, 2022

miroslavstastny Nov 14, 2022

Hotell Nov 15, 2022

levithomason Nov 15, 2022 •

edited

Loading

miroslavstastny Nov 15, 2022

spmonahan Nov 17, 2022

EisenbergEffect Nov 30, 2022

chrisdholt Dec 2, 2022

miroslavstastny Nov 14, 2022

miroslavstastny Nov 14, 2022

miroslavstastny Nov 14, 2022

miroslavstastny Nov 14, 2022

miroslavstastny Nov 14, 2022

levithomason Nov 15, 2022

miroslavstastny Nov 15, 2022

chrisdholt Dec 21, 2022

codesandbox-ci bot commented Nov 14, 2022 •

edited

Loading

size-auditor bot commented Nov 14, 2022 •

edited

Loading

fabricteam commented Nov 14, 2022 •

edited

Loading

Hotell commented Nov 15, 2022

Hotell Nov 15, 2022

Hotell Nov 15, 2022

miroslavstastny commented Nov 15, 2022

azure-pipelines bot commented Nov 15, 2022

EisenbergEffect Dec 1, 2022 •

edited

Loading

nicholasrice Dec 1, 2022

EisenbergEffect Dec 1, 2022

nicholasrice Dec 1, 2022

miroslavstastny commented Dec 21, 2022

ling1726 left a comment

chrisdholt left a comment


		const { create } = DesignToken;

		export const borderRadiusNone = create<string>('borderRadiusNone');

		@@ -0,0 +1,383 @@
		import { DesignToken } from '@microsoft/fast-foundation';

feat(wc): Add v9-compatible themes #25660

feat(wc): Add v9-compatible themes #25660

Conversation

miroslavstastny commented Nov 14, 2022

Add themes compatible with @fluentui/react-components@9

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

levithomason Nov 15, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codesandbox-ci bot commented Nov 14, 2022 • edited Loading

size-auditor bot commented Nov 14, 2022 • edited Loading

Asset size changes

fabricteam commented Nov 14, 2022 • edited Loading

📊 Bundle size report

Hotell commented Nov 15, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miroslavstastny commented Nov 15, 2022

azure-pipelines bot commented Nov 15, 2022

EisenbergEffect Dec 1, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miroslavstastny commented Dec 21, 2022

ling1726 left a comment

Choose a reason for hiding this comment

chrisdholt left a comment

Choose a reason for hiding this comment

Add themes compatible with `@fluentui/react-components@9`

levithomason Nov 15, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 14, 2022 •

edited

Loading

size-auditor bot commented Nov 14, 2022 •

edited

Loading

fabricteam commented Nov 14, 2022 •

edited

Loading

EisenbergEffect Dec 1, 2022 •

edited

Loading