Skip to content

Conversation

@micahgodbolt
Copy link
Member

Soon we'll be making some adjustments to how our colors are calculated. This will require the logic used to calculate colors to be easier to modify. This PR pulls in all of the color files from the @fluentblocks/colors package https://github.com/OfficeDev/fluent-blocks/tree/next/packages/colors

@micahgodbolt micahgodbolt requested review from a team as code owners March 13, 2023 22:26
@github-actions github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 13, 2023
@micahgodbolt micahgodbolt changed the title Theme designer colors local Theme designer: Move colors to local files Mar 13, 2023
@size-auditor
Copy link

size-auditor bot commented Mar 13, 2023

Asset size changes

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

Baseline commit: b6fd0db0a8c5553f9d4a84fcf9cd9a0ae97dea48 (build)

@codesandbox-ci
Copy link

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 f8b6903:

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

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1301 1324 5000
Button mount 955 958 5000
Field mount 2023 2055 5000
FluentProvider mount 1650 1658 5000
FluentProviderWithTheme mount 639 629 10
FluentProviderWithTheme virtual-rerender 600 595 10
FluentProviderWithTheme virtual-rerender-with-unmount 618 634 10
InfoButton mount 574 562 5000
MakeStyles mount 1893 1907 50000
Persona mount 3058 3084 5000
SpinButton mount 2439 2469 5000

@fabricteam
Copy link
Collaborator

📊 Bundle size report

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.194 kB
1.314 kB
react-accordion
Accordion (including children components)
88.789 kB
26.532 kB
react-alert
Alert
90.467 kB
22.106 kB
react-avatar
Avatar
54.149 kB
14.571 kB
react-avatar
AvatarGroup
18.064 kB
6.664 kB
react-avatar
AvatarGroupItem
70.425 kB
19.075 kB
react-badge
Badge
25.746 kB
7.568 kB
react-badge
CounterBadge
26.725 kB
7.874 kB
react-badge
PresenceBadge
28.318 kB
7.779 kB
react-button
Button
39.613 kB
9.935 kB
react-button
CompoundButton
46.795 kB
11.405 kB
react-button
MenuButton
44.296 kB
11.255 kB
react-button
SplitButton
52.846 kB
12.866 kB
react-button
ToggleButton
57.982 kB
11.853 kB
react-card
Card - All
83.548 kB
23.894 kB
react-card
Card
78.317 kB
22.433 kB
react-card
CardFooter
9.045 kB
3.806 kB
react-card
CardHeader
10.984 kB
4.509 kB
react-card
CardPreview
9.852 kB
4.159 kB
react-checkbox
Checkbox
35.895 kB
10.82 kB
react-checkbox
CheckboxField
42.8 kB
12.714 kB
react-combobox
Combobox (including child components)
88.622 kB
28.082 kB
react-combobox
ComboboxField
84.988 kB
27.82 kB
react-combobox
Dropdown (including child components)
87.309 kB
27.827 kB
react-components
react-components: Button, FluentProvider & webLightTheme
67.03 kB
18.099 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
206.206 kB
57.126 kB
react-components
react-components: FluentProvider & webLightTheme
37.861 kB
12.034 kB
react-dialog
Dialog (including children components)
92.72 kB
27.216 kB
react-divider
Divider
19.754 kB
6.68 kB
react-field
Field
20.397 kB
7.053 kB
react-image
Image
11.259 kB
4.473 kB
react-infobutton
InfoButton
130.366 kB
39.382 kB
react-input
Input
25.664 kB
7.695 kB
react-input
InputField
35.613 kB
10.592 kB
react-label
Label
12.461 kB
4.57 kB
react-link
Link
12.306 kB
5.073 kB
react-menu
Menu (including children components)
130.26 kB
39.493 kB
react-menu
Menu (including selectable components)
133.436 kB
40.038 kB
react-overflow
hooks only
11.214 kB
4.271 kB
react-persona
Persona
61.21 kB
16.521 kB
react-popover
Popover
117.438 kB
35.784 kB
react-portal
Portal
11.377 kB
4.179 kB
react-portal-compat
PortalCompatProvider
6.324 kB
2.129 kB
react-positioning
usePositioning
24.01 kB
8.793 kB
react-progress
ProgressBar
15.965 kB
5.701 kB
react-progress
ProgressField
26.415 kB
8.872 kB
react-provider
FluentProvider
19.928 kB
6.832 kB
react-radio
Radio
35.392 kB
11.117 kB
react-radio
RadioGroup
17.872 kB
6.523 kB
react-radio
RadioGroupField
28.023 kB
9.681 kB
react-select
Select
26.87 kB
8.761 kB
react-select
SelectField
36.179 kB
11.28 kB
react-slider
Slider
35.816 kB
11.043 kB
react-slider
SliderField
45.717 kB
13.975 kB
react-spinbutton
SpinButton
35.559 kB
10.351 kB
react-spinbutton
SpinButtonField
44.565 kB
12.765 kB
react-spinner
Spinner
23.336 kB
7.18 kB
react-switch
Switch
30.943 kB
9.25 kB
react-switch
SwitchField
37.805 kB
11.148 kB
react-table
DataGrid
149.792 kB
40.502 kB
react-table
Table (Primitives only)
46.798 kB
12.557 kB
react-table
Table as DataGrid
137.684 kB
35.154 kB
react-table
Table (Selection only)
85.511 kB
21.173 kB
react-table
Table (Sort only)
84.832 kB
20.982 kB
react-text
Text - Default
12.261 kB
4.819 kB
react-text
Text - Wrappers
15.571 kB
5.23 kB
react-textarea
Textarea
28.981 kB
9.071 kB
react-textarea
TextareaField
39.334 kB
12.008 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
30.908 kB
6.714 kB
react-theme
Teams: Light theme
17.776 kB
5.141 kB
react-tooltip
Tooltip
49.273 kB
16.775 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against b6fd0db0a8c5553f9d4a84fcf9cd9a0ae97dea48

@fabricteam
Copy link
Collaborator

🕵 FluentUI-v0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1410 1413 5000
Breadcrumb mount 3557 3562 1000
Checkbox mount 3167 3187 5000
CheckboxBase mount 2896 2802 5000
ChoiceGroup mount 5361 5318 5000
ComboBox mount 1448 1510 1000
CommandBar mount 11593 11594 1000
ContextualMenu mount 16753 17075 1000
DefaultButton mount 1690 1671 5000
DetailsRow mount 4098 4194 5000
DetailsRowFast mount 4047 4068 5000
DetailsRowNoStyles mount 3988 3919 5000
Dialog mount 3678 3684 1000
DocumentCardTitle mount 688 686 1000
Dropdown mount 3832 3875 5000
FocusTrapZone mount 2410 2410 5000
FocusZone mount 2296 2385 5000
GroupedList mount 60232 66882 2
GroupedList virtual-rerender 28753 28157 2
GroupedList virtual-rerender-with-unmount 106896 107843 2
GroupedListV2 mount 692 689 2
GroupedListV2 virtual-rerender 642 648 2
GroupedListV2 virtual-rerender-with-unmount 672 673 2
IconButton mount 2272 2253 5000
Label mount 868 890 5000
Layer mount 5201 5161 5000
Link mount 1029 963 5000
MenuButton mount 1984 1984 5000
MessageBar mount 2726 2895 5000
Nav mount 3923 3826 1000
OverflowSet mount 1641 1696 5000
Panel mount 3028 3000 1000
Persona mount 1554 1595 1000
Pivot mount 1962 1980 1000
PrimaryButton mount 1869 1839 5000
Rating mount 8243 8313 5000
SearchBox mount 1764 1801 5000
Shimmer mount 3348 3453 5000
Slider mount 2624 2689 5000
SpinButton mount 5476 5584 5000
Spinner mount 950 972 5000
SplitButton mount 3629 3687 5000
Stack mount 977 1005 5000
StackWithIntrinsicChildren mount 2722 2721 5000
StackWithTextChildren mount 5632 5687 5000
SwatchColorPicker mount 12118 12261 5000
TagPicker mount 3051 3091 5000
TeachingBubble mount 103702 103344 5000
Text mount 928 972 5000
TextField mount 1944 1914 5000
ThemeProvider mount 1892 1876 5000
ThemeProvider virtual-rerender 1301 1333 5000
ThemeProvider virtual-rerender-with-unmount 2534 2576 5000
Toggle mount 1351 1340 5000
buttonNative mount 643 671 5000

@micahgodbolt micahgodbolt merged commit 07a73b6 into microsoft:master Mar 14, 2023
@micahgodbolt micahgodbolt deleted the theme-designer-colors-local branch March 14, 2023 14:19
GeoffCoxMSFT pushed a commit to GeoffCoxMSFT/fluentui that referenced this pull request Mar 14, 2023
* move colors code locally to allow for customization

* clean up files
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 15, 2023
* master: (141 commits)
  chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965)
  feat: Add InfoLabel component (microsoft#27118)
  fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152)
  applying package updates
  fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213)
  feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034)
  chore: Prepare release 0.66.4 (microsoft#27163)
  fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204)
  fix: Smooth out animation of indeterminate progress bar (microsoft#27201)
  Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147)
  Added documentation about custom style hooks (microsoft#27087)
  Custom style react-text (microsoft#27078)
  Custom style react-image (microsoft#27066)
  Add JSDoc for tabster focus indicator selector (microsoft#27041)
  Theme designer: Move colors to local files (microsoft#27191)
  docs(react-card): move card out of preview (microsoft#27185)
  Include values in typography table (microsoft#27189)
  feat: accept a className in `mountNode` in `Portal` (microsoft#27008)
  RFC: Extend `mountNode` prop in `Portal` (microsoft#27009)
  applying package updates
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 15, 2023
* master: (141 commits)
  chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965)
  feat: Add InfoLabel component (microsoft#27118)
  fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152)
  applying package updates
  fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213)
  feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034)
  chore: Prepare release 0.66.4 (microsoft#27163)
  fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204)
  fix: Smooth out animation of indeterminate progress bar (microsoft#27201)
  Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147)
  Added documentation about custom style hooks (microsoft#27087)
  Custom style react-text (microsoft#27078)
  Custom style react-image (microsoft#27066)
  Add JSDoc for tabster focus indicator selector (microsoft#27041)
  Theme designer: Move colors to local files (microsoft#27191)
  docs(react-card): move card out of preview (microsoft#27185)
  Include values in typography table (microsoft#27189)
  feat: accept a className in `mountNode` in `Portal` (microsoft#27008)
  RFC: Extend `mountNode` prop in `Portal` (microsoft#27009)
  applying package updates
  ...
TristanWatanabe pushed a commit to TristanWatanabe/fluentui that referenced this pull request Dec 7, 2023
* move colors code locally to allow for customization

* clean up files
TristanWatanabe added a commit that referenced this pull request Dec 13, 2023
* chore: migrate to node 18 (#29598)

* chore: migrate to node 18

* chore: bump eslint-plugin-jsdoc which support node 18

* generate changefile

* chore: ignore plugin-jsdoc from syncpack

* chore(utilities): use Timers types based on environment to avoid TS failures introduced with node 18 types

* chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox

* generate changefiles

* restrict node version

* update yarn.lock

* ci: bump devcontainer to node 18 (#29759)

* deduplicate semver

* theme designers: changes based on dan and daisy's feedback (#24038)

* for daisy: Can the default theme be the Web one (not Teams)? Web should be the first one selected by default. Teams is one option in the menu.

* suggestion from dan: when he inputted his own custom Hex#, the color indicator to the right didn't change -- added rules to hex input

* remove teams theme

* capitalize for consistency

* custom theme now applies to sidebar per dan's request

* uppercase consistency

* revert sidebar change

* theme designer: make name editable (#24098)

* add dropdown

* Update yarn.lock

* cleanup dropdown use

* lock update

* remove unread values

* use dropdown + add avatar

* add editable name

* palette change

* force alphanumeric

* filter input name string

* update name

* revert palette change

Co-authored-by: Micah Godbolt <[email protected]>

* Theme designer: Move colors to local files (#27191)

* move colors code locally to allow for customization

* clean up files

* deduplicate prettier

* fix: UseNode@1 instead of NodeTool

* format files

* chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox

* update yarn.lock

* chore: comment out unused codeblock to fix TS transpile errors

---------

Co-authored-by: Martin Hochel <[email protected]>
Co-authored-by: Emma Jiang <[email protected]>
Co-authored-by: Micah Godbolt <[email protected]>
chrisdholt pushed a commit that referenced this pull request Apr 29, 2024
* chore: migrate to node 18 (#29598)

* chore: migrate to node 18

* chore: bump eslint-plugin-jsdoc which support node 18

* generate changefile

* chore: ignore plugin-jsdoc from syncpack

* chore(utilities): use Timers types based on environment to avoid TS failures introduced with node 18 types

* chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox

* generate changefiles

* restrict node version

* update yarn.lock

* ci: bump devcontainer to node 18 (#29759)

* deduplicate semver

* theme designers: changes based on dan and daisy's feedback (#24038)

* for daisy: Can the default theme be the Web one (not Teams)? Web should be the first one selected by default. Teams is one option in the menu.

* suggestion from dan: when he inputted his own custom Hex#, the color indicator to the right didn't change -- added rules to hex input

* remove teams theme

* capitalize for consistency

* custom theme now applies to sidebar per dan's request

* uppercase consistency

* revert sidebar change

* theme designer: make name editable (#24098)

* add dropdown

* Update yarn.lock

* cleanup dropdown use

* lock update

* remove unread values

* use dropdown + add avatar

* add editable name

* palette change

* force alphanumeric

* filter input name string

* update name

* revert palette change

Co-authored-by: Micah Godbolt <[email protected]>

* Theme designer: Move colors to local files (#27191)

* move colors code locally to allow for customization

* clean up files

* deduplicate prettier

* fix: UseNode@1 instead of NodeTool

* format files

* chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox

* update yarn.lock

* chore: comment out unused codeblock to fix TS transpile errors

---------

Co-authored-by: Martin Hochel <[email protected]>
Co-authored-by: Emma Jiang <[email protected]>
Co-authored-by: Micah Godbolt <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants