BREAKING: reduce shared colors #23578

miroslavstastny · 2022-06-16T14:28:41Z

Implements RFC #23537 to demonstrate the impact of reducing shared color tokens in react-theme.

Motivation

As described in the RFC, the main motivation is FUI rendering perf. Number of tokens which are represented by CSS variables has linear impact on rendering performance.
This PR reduces the theme from 669 to 360 tokens. FIXME
Fair note - we might have to re-add some of the tokens later as required by different components and experiences, but (1) before doing so, will will explore different possible optimizations as described in the RFC and (2) we will be adding only the tokens really needed.

Status shared colors - with no changes

There are 7 shared colors used for error and status:

red
green
darkOrange
yellow
berry
marigold
lightGreen

There is NO change for these colors, there will still be the same 9 alias color tokens as before:

colorPaletteRedBackground1
colorPaletteRedBackground2
colorPaletteRedBackground3
colorPaletteRedForeground1
colorPaletteRedForeground2
colorPaletteRedForeground3
colorPaletteRedBorderActive
colorPaletteRedBorder1
colorPaletteRedBorder2

Persona shared colors - 6 tokens per color removed

There are 28 shared colors used for Persona:

darkRed
cranberry
pumpkin
peach
gold
brass
brown
forest
seafoam
darkGreen
lightTeal
teal
steel
blue
royalBlue
cornflower
navy
lavender
purple
grape
lilac
pink
magenta
plum
beige
mink
platinum
anchor

The tokens for these colors are reduced to 3 tokens per color:

colorPaletteDarkRedBackground2
colorPaletteDarkRedForeground2
colorPaletteDarkRedBorderActive

NOTE: There are actually 30 colors used in Persona, the 2 remaining ones are Red and Marigold which are already included in Status Shared Colors.

Unused shared colors - removed completely

There have been 14 another shared colors in the theme which are neither status nor persona colors - those will be removed completely:

burgundy
bronze
orange
darkBrown
lime
darkTeal
cyan
lightBlue
darkBlue
darkPurple
orchid
hotPink
silver
charcoal

fabricteam · 2022-06-16T14:35:22Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: FluentProvider & webLightTheme	`33.988 kB` `11.108 kB`	`31.16 kB` `10.215 kB`	`-2.828 kB` `-893 B`
`react-theme` Teams: all themes	`31.363 kB` `7.043 kB`	`28.995 kB` `6.215 kB`	`-2.368 kB` `-828 B`
`react-theme` Teams: Light theme	`19.806 kB` `5.699 kB`	`16.973 kB` `4.86 kB`	`-2.833 kB` `-839 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`75.346 kB` `22.865 kB`
`react-avatar` Avatar	`46.031 kB` `13.438 kB`
`react-badge` Badge	`20.929 kB` `6.554 kB`
`react-badge` CounterBadge	`21.833 kB` `6.861 kB`
`react-badge` PresenceBadge	`22.627 kB` `6.802 kB`
`react-button` Button	`33.796 kB` `9.151 kB`
`react-button` CompoundButton	`40.703 kB` `10.403 kB`
`react-button` MenuButton	`36.365 kB` `10.033 kB`
`react-button` SplitButton	`43.6 kB` `11.351 kB`
`react-button` ToggleButton	`48.279 kB` `10.573 kB`
`react-card` Card - All	`66.137 kB` `18.69 kB`
`react-card` Card	`61.293 kB` `17.567 kB`
`react-card` CardFooter	`7.737 kB` `3.264 kB`
`react-card` CardHeader	`9.302 kB` `3.779 kB`
`react-card` CardPreview	`7.838 kB` `3.316 kB`
`react-combobox` Combobox	`61.189 kB` `20.959 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`185.285 kB` `51.364 kB`
`react-divider` Divider	`15.597 kB` `5.539 kB`
`react-image` Image	`9.956 kB` `3.922 kB`
`react-input` Input	`22.009 kB` `7.194 kB`
`react-label` Label	`8.514 kB` `3.526 kB`
`react-link` Link	`11.358 kB` `4.58 kB`
`react-menu` Menu (including children components)	`114.086 kB` `34.592 kB`
`react-menu` Menu (including selectable components)	`117.261 kB` `35.067 kB`
`react-overflow` hooks only	`10.839 kB` `4.146 kB`
`react-popover` Popover	`103.951 kB` `31.644 kB`
`react-portal` Portal	`9.317 kB` `3.451 kB`
`react-positioning` usePositioning	`23.846 kB` `8.29 kB`
`react-provider` FluentProvider	`14.037 kB` `5.307 kB`
`react-radio` Radio	`29.696 kB` `10.117 kB`
`react-radio` RadioGroup	`13.595 kB` `5.42 kB`
`react-select` Select	`19.118 kB` `6.841 kB`
`react-slider` Slider	`25.124 kB` `8.081 kB`
`react-spinbutton` SpinButton	`42.364 kB` `11.944 kB`
`react-spinner` Spinner	`18.159 kB` `5.99 kB`
`react-switch` Switch	`25.658 kB` `8.276 kB`
`react-text` Text - Default	`10.848 kB` `4.239 kB`
`react-text` Text - Wrappers	`14.158 kB` `4.659 kB`
`react-textarea` Textarea	`21.504 kB` `7.221 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-tooltip` Tooltip	`43.837 kB` `15.099 kB`

_{🤖 This report was generated against 2705ee9c84dea54369d2b10f3c19bf57c957aeeb}

size-auditor · 2022-06-16T14:43:28Z

Asset size changes

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

Baseline commit: 2705ee9c84dea54369d2b10f3c19bf57c957aeeb (build)

miroslavstastny · 2022-06-17T08:52:29Z

packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts

  },
  statusAway: {
-    color: tokens.colorPaletteMarigoldBackground3,
+    color: tokens.colorPaletteYellowBackground3, // FIXME: Badge specs uses Marigold for Away


This must be addressed before merging the PR. @daisygeng

codesandbox-ci · 2022-06-17T09:00:28Z

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 9d9ff45:

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

fabricteam · 2022-06-17T09:06:58Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1723	1681	5000
Button	mount	1323	1284	5000
FluentProvider	mount	2800	2289	5000
FluentProviderWithTheme	mount	971	885	10
FluentProviderWithTheme	virtual-rerender	898	849	10
FluentProviderWithTheme	virtual-rerender-with-unmount	957	900	10
MakeStyles	mount	2514	2524	50000

miroslavstastny · 2022-06-17T09:10:39Z

packages/react-components/react-theme/src/global/colors.ts

+  berry,
+};
+
+export type PersonaSharedColors =


As a follow up task, the internal structure of the file must be refactored and token pipeline updated.

miroslavstastny · 2022-06-17T10:18:03Z

Complete list of 309 removed tokens

Click to expand!

colorPaletteAnchorBackground1
colorPaletteAnchorBackground3
colorPaletteAnchorBorder1
colorPaletteAnchorBorder2
colorPaletteAnchorForeground1
colorPaletteAnchorForeground3
colorPaletteBeigeBackground1
colorPaletteBeigeBackground3
colorPaletteBeigeBorder1
colorPaletteBeigeBorder2
colorPaletteBeigeForeground1
colorPaletteBeigeForeground3
colorPaletteBlueBackground1
colorPaletteBlueBackground3
colorPaletteBlueBorder1
colorPaletteBlueBorder2
colorPaletteBlueForeground1
colorPaletteBlueForeground3
colorPaletteBrassBackground1
colorPaletteBrassBackground3
colorPaletteBrassBorder1
colorPaletteBrassBorder2
colorPaletteBrassForeground1
colorPaletteBrassForeground3
colorPaletteBronzeBackground1
colorPaletteBronzeBackground2
colorPaletteBronzeBackground3
colorPaletteBronzeBorder1
colorPaletteBronzeBorder2
colorPaletteBronzeBorderActive
colorPaletteBronzeForeground1
colorPaletteBronzeForeground2
colorPaletteBronzeForeground3
colorPaletteBrownBackground1
colorPaletteBrownBackground3
colorPaletteBrownBorder1
colorPaletteBrownBorder2
colorPaletteBrownForeground1
colorPaletteBrownForeground3
colorPaletteBurgundyBackground1
colorPaletteBurgundyBackground2
colorPaletteBurgundyBackground3
colorPaletteBurgundyBorder1
colorPaletteBurgundyBorder2
colorPaletteBurgundyBorderActive
colorPaletteBurgundyForeground1
colorPaletteBurgundyForeground2
colorPaletteBurgundyForeground3
colorPaletteCharcoalBackground1
colorPaletteCharcoalBackground2
colorPaletteCharcoalBackground3
colorPaletteCharcoalBorder1
colorPaletteCharcoalBorder2
colorPaletteCharcoalBorderActive
colorPaletteCharcoalForeground1
colorPaletteCharcoalForeground2
colorPaletteCharcoalForeground3
colorPaletteCornflowerBackground1
colorPaletteCornflowerBackground3
colorPaletteCornflowerBorder1
colorPaletteCornflowerBorder2
colorPaletteCornflowerForeground1
colorPaletteCornflowerForeground3
colorPaletteCranberryBackground1
colorPaletteCranberryBackground3
colorPaletteCranberryBorder1
colorPaletteCranberryBorder2
colorPaletteCranberryForeground1
colorPaletteCranberryForeground3
colorPaletteCyanBackground1
colorPaletteCyanBackground2
colorPaletteCyanBackground3
colorPaletteCyanBorder1
colorPaletteCyanBorder2
colorPaletteCyanBorderActive
colorPaletteCyanForeground1
colorPaletteCyanForeground2
colorPaletteCyanForeground3
colorPaletteDarkBlueBackground1
colorPaletteDarkBlueBackground2
colorPaletteDarkBlueBackground3
colorPaletteDarkBlueBorder1
colorPaletteDarkBlueBorder2
colorPaletteDarkBlueBorderActive
colorPaletteDarkBlueForeground1
colorPaletteDarkBlueForeground2
colorPaletteDarkBlueForeground3
colorPaletteDarkBrownBackground1
colorPaletteDarkBrownBackground2
colorPaletteDarkBrownBackground3
colorPaletteDarkBrownBorder1
colorPaletteDarkBrownBorder2
colorPaletteDarkBrownBorderActive
colorPaletteDarkBrownForeground1
colorPaletteDarkBrownForeground2
colorPaletteDarkBrownForeground3
colorPaletteDarkGreenBackground1
colorPaletteDarkGreenBackground3
colorPaletteDarkGreenBorder1
colorPaletteDarkGreenBorder2
colorPaletteDarkGreenForeground1
colorPaletteDarkGreenForeground3
colorPaletteDarkPurpleBackground1
colorPaletteDarkPurpleBackground2
colorPaletteDarkPurpleBackground3
colorPaletteDarkPurpleBorder1
colorPaletteDarkPurpleBorder2
colorPaletteDarkPurpleBorderActive
colorPaletteDarkPurpleForeground1
colorPaletteDarkPurpleForeground2
colorPaletteDarkPurpleForeground3
colorPaletteDarkRedBackground1
colorPaletteDarkRedBackground3
colorPaletteDarkRedBorder1
colorPaletteDarkRedBorder2
colorPaletteDarkRedForeground1
colorPaletteDarkRedForeground3
colorPaletteDarkTealBackground1
colorPaletteDarkTealBackground2
colorPaletteDarkTealBackground3
colorPaletteDarkTealBorder1
colorPaletteDarkTealBorder2
colorPaletteDarkTealBorderActive
colorPaletteDarkTealForeground1
colorPaletteDarkTealForeground2
colorPaletteDarkTealForeground3
colorPaletteForestBackground1
colorPaletteForestBackground3
colorPaletteForestBorder1
colorPaletteForestBorder2
colorPaletteForestForeground1
colorPaletteForestForeground3
colorPaletteGoldBackground1
colorPaletteGoldBackground3
colorPaletteGoldBorder1
colorPaletteGoldBorder2
colorPaletteGoldForeground1
colorPaletteGoldForeground3
colorPaletteGrapeBackground1
colorPaletteGrapeBackground3
colorPaletteGrapeBorder1
colorPaletteGrapeBorder2
colorPaletteGrapeForeground1
colorPaletteGrapeForeground3
colorPaletteHotPinkBackground1
colorPaletteHotPinkBackground2
colorPaletteHotPinkBackground3
colorPaletteHotPinkBorder1
colorPaletteHotPinkBorder2
colorPaletteHotPinkBorderActive
colorPaletteHotPinkForeground1
colorPaletteHotPinkForeground2
colorPaletteHotPinkForeground3
colorPaletteLavenderBackground1
colorPaletteLavenderBackground3
colorPaletteLavenderBorder1
colorPaletteLavenderBorder2
colorPaletteLavenderForeground1
colorPaletteLavenderForeground3
colorPaletteLightBlueBackground1
colorPaletteLightBlueBackground2
colorPaletteLightBlueBackground3
colorPaletteLightBlueBorder1
colorPaletteLightBlueBorder2
colorPaletteLightBlueBorderActive
colorPaletteLightBlueForeground1
colorPaletteLightBlueForeground2
colorPaletteLightBlueForeground3
colorPaletteLightGreenBackground1
colorPaletteLightGreenBackground2
colorPaletteLightGreenBackground3
colorPaletteLightGreenBorder1
colorPaletteLightGreenBorder2
colorPaletteLightGreenBorderActive
colorPaletteLightGreenForeground1
colorPaletteLightGreenForeground2
colorPaletteLightGreenForeground3
colorPaletteLightTealBackground1
colorPaletteLightTealBackground3
colorPaletteLightTealBorder1
colorPaletteLightTealBorder2
colorPaletteLightTealForeground1
colorPaletteLightTealForeground3
colorPaletteLilacBackground1
colorPaletteLilacBackground3
colorPaletteLilacBorder1
colorPaletteLilacBorder2
colorPaletteLilacForeground1
colorPaletteLilacForeground3
colorPaletteLimeBackground1
colorPaletteLimeBackground2
colorPaletteLimeBackground3
colorPaletteLimeBorder1
colorPaletteLimeBorder2
colorPaletteLimeBorderActive
colorPaletteLimeForeground1
colorPaletteLimeForeground2
colorPaletteLimeForeground3
colorPaletteMagentaBackground1
colorPaletteMagentaBackground3
colorPaletteMagentaBorder1
colorPaletteMagentaBorder2
colorPaletteMagentaForeground1
colorPaletteMagentaForeground3
colorPaletteMarigoldBackground1
colorPaletteMarigoldBackground3
colorPaletteMarigoldBorder1
colorPaletteMarigoldBorder2
colorPaletteMarigoldForeground1
colorPaletteMarigoldForeground3
colorPaletteMinkBackground1
colorPaletteMinkBackground3
colorPaletteMinkBorder1
colorPaletteMinkBorder2
colorPaletteMinkForeground1
colorPaletteMinkForeground3
colorPaletteNavyBackground1
colorPaletteNavyBackground3
colorPaletteNavyBorder1
colorPaletteNavyBorder2
colorPaletteNavyForeground1
colorPaletteNavyForeground3
colorPaletteOrangeBackground1
colorPaletteOrangeBackground2
colorPaletteOrangeBackground3
colorPaletteOrangeBorder1
colorPaletteOrangeBorder2
colorPaletteOrangeBorderActive
colorPaletteOrangeForeground1
colorPaletteOrangeForeground2
colorPaletteOrangeForeground3
colorPaletteOrchidBackground1
colorPaletteOrchidBackground2
colorPaletteOrchidBackground3
colorPaletteOrchidBorder1
colorPaletteOrchidBorder2
colorPaletteOrchidBorderActive
colorPaletteOrchidForeground1
colorPaletteOrchidForeground2
colorPaletteOrchidForeground3
colorPalettePeachBackground1
colorPalettePeachBackground3
colorPalettePeachBorder1
colorPalettePeachBorder2
colorPalettePeachForeground1
colorPalettePeachForeground3
colorPalettePinkBackground1
colorPalettePinkBackground3
colorPalettePinkBorder1
colorPalettePinkBorder2
colorPalettePinkForeground1
colorPalettePinkForeground3
colorPalettePlatinumBackground1
colorPalettePlatinumBackground3
colorPalettePlatinumBorder1
colorPalettePlatinumBorder2
colorPalettePlatinumForeground1
colorPalettePlatinumForeground3
colorPalettePlumBackground1
colorPalettePlumBackground3
colorPalettePlumBorder1
colorPalettePlumBorder2
colorPalettePlumForeground1
colorPalettePlumForeground3
colorPalettePumpkinBackground1
colorPalettePumpkinBackground3
colorPalettePumpkinBorder1
colorPalettePumpkinBorder2
colorPalettePumpkinForeground1
colorPalettePumpkinForeground3
colorPalettePurpleBackground1
colorPalettePurpleBackground3
colorPalettePurpleBorder1
colorPalettePurpleBorder2
colorPalettePurpleForeground1
colorPalettePurpleForeground3
colorPaletteRoyalBlueBackground1
colorPaletteRoyalBlueBackground3
colorPaletteRoyalBlueBorder1
colorPaletteRoyalBlueBorder2
colorPaletteRoyalBlueForeground1
colorPaletteRoyalBlueForeground3
colorPaletteSeafoamBackground1
colorPaletteSeafoamBackground3
colorPaletteSeafoamBorder1
colorPaletteSeafoamBorder2
colorPaletteSeafoamForeground1
colorPaletteSeafoamForeground3
colorPaletteSilverBackground1
colorPaletteSilverBackground2
colorPaletteSilverBackground3
colorPaletteSilverBorder1
colorPaletteSilverBorder2
colorPaletteSilverBorderActive
colorPaletteSilverForeground1
colorPaletteSilverForeground2
colorPaletteSilverForeground3
colorPaletteSteelBackground1
colorPaletteSteelBackground3
colorPaletteSteelBorder1
colorPaletteSteelBorder2
colorPaletteSteelForeground1
colorPaletteSteelForeground3
colorPaletteTealBackground1
colorPaletteTealBackground3
colorPaletteTealBorder1
colorPaletteTealBorder2
colorPaletteTealForeground1
colorPaletteTealForeground3

miroslavstastny · 2022-06-17T12:29:46Z

Colors story must be fixed:

miroslavstastny · 2022-06-20T13:27:43Z

Closing, replaced by a proper PR to 9.0-rc branch: #23608.

miroslavstastny · 2022-06-20T17:13:11Z

Colors story must be fixed

Fixed in cd18a12

BREAKING: reduce shared colors

6d36ccf

miroslavstastny added Component: Theme Fluent UI react-components (v9) labels Jun 16, 2022

miroslavstastny self-assigned this Jun 16, 2022

github-actions bot added this to the June Project Cycle Q2 2022 milestone Jun 16, 2022

fix shared colors in teamsDark theme

d97e791

miroslavstastny commented Jun 17, 2022

View reviewed changes

change files

bf48371

miroslavstastny commented Jun 17, 2022

View reviewed changes

update tokens in appearance stories

d523070

fix colors in vr test

14c3d12

miroslavstastny added 2 commits June 20, 2022 13:59

re-add LightGreen and Marigold as status shared colors, cleanup

730b637

revert PresenceBadge color changes

9d9ff45

miroslavstastny changed the base branch from master to 9.0-rc June 20, 2022 12:00

miroslavstastny changed the base branch from 9.0-rc to master June 20, 2022 13:27

miroslavstastny closed this Jun 20, 2022

update colors story

cd18a12

miroslavstastny reopened this Jun 20, 2022

miroslavstastny closed this Jun 23, 2022

miroslavstastny deleted the feat/reduce-shared-colors branch June 27, 2022 10:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

BREAKING: reduce shared colors #23578

BREAKING: reduce shared colors #23578

Uh oh!

miroslavstastny commented Jun 16, 2022 •

edited

Loading

Uh oh!

fabricteam commented Jun 16, 2022 •

edited

Loading

Uh oh!

size-auditor bot commented Jun 16, 2022 •

edited

Loading

Uh oh!

miroslavstastny Jun 17, 2022

Uh oh!

codesandbox-ci bot commented Jun 17, 2022 •

edited

Loading

Uh oh!

fabricteam commented Jun 17, 2022 •

edited

Loading

Uh oh!

miroslavstastny Jun 17, 2022

Uh oh!

miroslavstastny commented Jun 17, 2022 •

edited

Loading

Uh oh!

miroslavstastny commented Jun 17, 2022

Uh oh!

miroslavstastny commented Jun 20, 2022

Uh oh!

miroslavstastny commented Jun 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

BREAKING: reduce shared colors #23578

BREAKING: reduce shared colors #23578

Uh oh!

Conversation

miroslavstastny commented Jun 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Status shared colors - with no changes

Persona shared colors - 6 tokens per color removed

Unused shared colors - removed completely

Uh oh!

fabricteam commented Jun 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Jun 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

miroslavstastny Jun 17, 2022

Choose a reason for hiding this comment

Uh oh!

codesandbox-ci bot commented Jun 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Jun 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

miroslavstastny Jun 17, 2022

Choose a reason for hiding this comment

Uh oh!

miroslavstastny commented Jun 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Complete list of 309 removed tokens

Uh oh!

miroslavstastny commented Jun 17, 2022

Uh oh!

miroslavstastny commented Jun 20, 2022

Uh oh!

miroslavstastny commented Jun 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

miroslavstastny commented Jun 16, 2022 •

edited

Loading

fabricteam commented Jun 16, 2022 •

edited

Loading

size-auditor bot commented Jun 16, 2022 •

edited

Loading

codesandbox-ci bot commented Jun 17, 2022 •

edited

Loading

fabricteam commented Jun 17, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

miroslavstastny commented Jun 17, 2022 •

edited

Loading