BREAKING: reduce shared colors #23608
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
miroslavstastny
requested review from
a team,
smhigley,
sopranopillow and
spmonahan
as code owners
miroslavstastny
commented
Jun 20, 2022
|
|
||
| // These shared colors are currently not used in themes | ||
| // Not exported from the package, we can consider removing them | ||
| export const unusedSharedColors = { |
Member
Author
There was a problem hiding this comment.
As a follow up task, the internal structure of the file must be refactored and token pipeline updated.
|
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 3ac5343:
|
Member
Author
Complete list of 294 removed tokensClick 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
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
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 |
Member
Author
|
RC branch does not contain |
| darkRed, | ||
| burgundy, | ||
| cranberry, | ||
| export type StatusSharedColors = 'red' | 'green' | 'darkOrange' | 'yellow' | 'berry' | 'lightGreen' | 'marigold'; |
Member
There was a problem hiding this comment.
I expected the names would be 'available', 'away', 'offline', etc. so that themes could change out the colors to whatever they want. If we are going with color names, that is OK - just not what I guessed they would be :)
Contributor
There was a problem hiding this comment.
IIRC we drew the line at renaming tokens. Any renames will wait for a future major version bump.
Member
Author
There was a problem hiding this comment.
That was an idea @daisygeng had as well. These are the reasons why we haven't done those changes now:
- We do not want to rename any existing tokens that far in the RC process.
- There are some naming edge cases which need more thinking and discussion (
Redis used for all Danger, Busy and Avatar). - There is no agreement across design.
For that reasons we are not renaming anything now, we plan to re-consider this later and introduce it to v10 (and possibly in a backwards compatible way to v9).
GeoffCoxMSFT
approved these changes
Jun 20, 2022
spmonahan
approved these changes
Jun 20, 2022
| darkRed, | ||
| burgundy, | ||
| cranberry, | ||
| export type StatusSharedColors = 'red' | 'green' | 'darkOrange' | 'yellow' | 'berry' | 'lightGreen' | 'marigold'; |
Contributor
There was a problem hiding this comment.
IIRC we drew the line at renaming tokens. Any renames will wait for a future major version bump.
Member
Author
Correct, not renaming anything. If you are referring to |
ling1726
approved these changes
Jun 20, 2022
rohitpagariya
pushed a commit
to rohitpagariya/fluentui
that referenced
this pull request
Jun 28, 2022
* BREAKING: reduce shared colors * fix shared colors in teamsDark theme * change files * update tokens in appearance stories * fix colors in vr test * re-add LightGreen and Marigold as status shared colors, cleanup * revert PresenceBadge color changes * delete orphan change file * update colors story
|
Very hard to hear this, as many of the deleted colors I was using. |
Member
Author
We still plan to add a way to export the global colors so that products can add their custom alias tokens. Before that happens the only way for you is to maintain the removed global colors in your codebase. |
|
for someone who still want to use it, adding this to your package.json (yarn) "resolutions": {
"@fluentui/react-theme": "9.0.0-rc.9"
},My own color card: https://musi.land/Dev/Colors |
6 tasks
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reduces shared color tokens in
react-themeas described and discussed in RFC #23537.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 375 tokens.
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:
There is NO change for these colors, there will still be the same 9 alias color tokens as before:
Persona shared colors - 6 tokens per color removed
There are 28 shared colors used for Persona:
The tokens for these colors are reduced to 3 tokens per color:
NOTE: There are actually 30 colors used in Persona, the 2 remaining ones are
RedandMarigoldwhich 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: