Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Color tokens are now prefixed with color #15070

Merged
merged 6 commits into from
Sep 16, 2020
Merged

Color tokens are now prefixed with color #15070

merged 6 commits into from
Sep 16, 2020

Conversation

dzearing
Copy link
Member

@dzearing dzearing commented Sep 16, 2020 •
edited
Loading

  • All color tokens now prefixed with color
  • "accent" color token set renamed to "brand" per design guidance

Before:

theme = {
  tokens: {
     body: { ... },
     accent: { ... }
  }
};

After:

theme = {
  tokens: {
    color: {
       body: { ... },
       brand: { ... }
    }
  }
};

xugao
xugao approved these changes Sep 16, 2020
View reviewed changes
Copy link
Contributor

@xugao xugao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 956 954 5000
Breadcrumb mount 41530 41623 5000
BreadcrumbNext mount 155796 156170 5000
ButtonNext mount 596 599 5000
Checkbox mount 1628 1714 5000
CheckboxBase mount 1376 1393 5000
CheckboxNext mount 1607 1590 5000
ChoiceGroup mount 5159 5217 5000
ChoiceGroupNext mount 5173 5256 5000
ComboBox mount 907 937 1000
CommandBar mount 7640 7656 1000
ContextualMenu mount 12607 12600 1000
DefaultButton mount 1155 1172 5000
DetailsRow mount 3653 3684 5000
DetailsRowFast mount 3724 3692 5000
DetailsRowNoStyles mount 3481 3440 5000
Dialog mount 1562 1523 1000
DocumentCardTitle mount 1796 1790 1000
Dropdown mount 2673 2672 5000
FocusZone mount 1786 1779 5000
IconButton mount 1855 1831 5000
Label mount 363 352 5000
Link mount 469 463 5000
LinkNext mount 494 492 5000
MenuButton mount 1585 1537 5000
MessageBar mount 2084 2090 5000
MessageBarNext mount 2066 2070 5000
Nav mount 3355 3280 1000
OverflowSet mount 1531 1462 5000
OverflowSetNext mount 1082 1053 5000
Panel mount 1477 1510 1000
Persona mount 837 874 1000
Pivot mount 1507 1487 1000
PivotNext mount 1481 1434 1000
PrimaryButton mount 1362 1344 5000
Rating mount 8183 8363 5000
RatingNext mount 8209 8155 5000
SearchBox mount 1429 1436 5000
SearchBoxNext mount 1496 1488 5000
Shimmer mount 2998 2999 5000
ShimmerNext mount 2735 2800 5000
Slider mount 1604 1611 5000
SliderNext mount 2035 2042 5000
SpinButton mount 5343 5338 5000
SpinButtonNext mount 5451 5399 5000
Spinner mount 424 449 5000
SplitButton mount 3340 3365 5000
Stack mount 553 562 5000
StackWithIntrinsicChildren mount 2087 2126 5000
StackWithTextChildren mount 5314 5423 5000
SwatchColorPicker mount 10681 10631 5000
SwatchColorPickerNext mount 10696 10747 5000
TagPicker mount 2890 2872 5000
TeachingBubble mount 50213 51459 5000
TeachingBubbleNext mount 49374 50107 5000
Text mount 437 439 5000
TextField mount 1434 1463 5000
ThemeProvider mount 4664 4787 5000
ThemeProvider virtual-rerender 534 520 5000
Toggle mount 879 883 5000
ToggleNext mount 849 842 5000
button mount 122 125 5000

Perf Analysis (Fluent)

⚠️ 6 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1821 45 40.47:1 analysis
ButtonUseCssNestingPerf.default 1154 43 26.84:1 analysis
ButtonUseCssPerf.default 893 46 19.41:1 analysis
ChatWithPopoverPerf.default 492 494 1:1 analysis
ListCommonPerf.default 730 985 0.74:1 analysis
ListNestedPerf.default 643 944 0.68:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.49 0.49 1:1 2000 982
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 671
🔧 Checkbox.Fluent 0.66 0.38 1.74:1 1000 663
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 846
🔧 Dropdown.Fluent 3.09 0.5 6.18:1 1000 3089
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 779
🎯 Image.Fluent 0.1 0.13 0.77:1 5000 514
🔧 Slider.Fluent 1.72 0.38 4.53:1 1000 1723
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 419
🦄 Tooltip.Fluent 0.13 16.48 0.01:1 5000 635

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 175 123 1.42:1
Image.Fluent 514 395 1.3:1
AttachmentMinimalPerf.default 191 152 1.26:1
SegmentMinimalPerf.default 444 356 1.25:1
AccordionMinimalPerf.default 188 152 1.24:1
DividerMinimalPerf.default 434 359 1.21:1
ButtonMinimalPerf.default 211 177 1.19:1
ImageMinimalPerf.default 452 380 1.19:1
RefMinimalPerf.default 243 205 1.19:1
FormMinimalPerf.default 520 440 1.18:1
RadioGroupMinimalPerf.default 528 449 1.18:1
StatusMinimalPerf.default 829 708 1.17:1
AnimationMinimalPerf.default 447 385 1.16:1
HeaderMinimalPerf.default 417 361 1.16:1
LabelMinimalPerf.default 484 416 1.16:1
TableMinimalPerf.default 467 404 1.16:1
ChatMinimalPerf.default 691 602 1.15:1
ReactionMinimalPerf.default 465 405 1.15:1
Text.Fluent 419 363 1.15:1
FlexMinimalPerf.default 325 285 1.14:1
GridMinimalPerf.default 404 354 1.14:1
LayoutMinimalPerf.default 452 396 1.14:1
TextAreaMinimalPerf.default 577 508 1.14:1
VideoMinimalPerf.default 713 633 1.13:1
DialogMinimalPerf.default 843 755 1.12:1
Button.Fluent 671 598 1.12:1
BoxMinimalPerf.default 420 380 1.11:1
TextMinimalPerf.default 407 366 1.11:1
TooltipMinimalPerf.default 887 796 1.11:1
TreeMinimalPerf.default 1018 914 1.11:1
Tooltip.Fluent 635 570 1.11:1
CardMinimalPerf.default 633 577 1.1:1
HeaderSlotsPerf.default 904 822 1.1:1
ListMinimalPerf.default 549 498 1.1:1
Avatar.Fluent 982 894 1.1:1
AttachmentSlotsPerf.default 1246 1148 1.09:1
AvatarMinimalPerf.default 536 491 1.09:1
CarouselMinimalPerf.default 499 457 1.09:1
LoaderMinimalPerf.default 805 741 1.09:1
SkeletonMinimalPerf.default 477 437 1.09:1
IconMinimalPerf.default 763 702 1.09:1
ToolbarMinimalPerf.default 1052 961 1.09:1
Dialog.Fluent 846 776 1.09:1
MenuMinimalPerf.default 969 905 1.07:1
PopupMinimalPerf.default 736 690 1.07:1
ProviderMinimalPerf.default 1049 981 1.07:1
InputMinimalPerf.default 1403 1327 1.06:1
ItemLayoutMinimalPerf.default 1380 1303 1.06:1
MenuButtonMinimalPerf.default 1708 1614 1.06:1
AlertMinimalPerf.default 331 316 1.05:1
ButtonSlotsPerf.default 649 621 1.05:1
CheckboxMinimalPerf.default 3034 2902 1.05:1
ProviderMergeThemesPerf.default 1988 1887 1.05:1
DropdownManyItemsPerf.default 817 789 1.04:1
SplitButtonMinimalPerf.default 4112 3965 1.04:1
Checkbox.Fluent 663 635 1.04:1
Dropdown.Fluent 3089 2957 1.04:1
Icon.Fluent 779 749 1.04:1
Slider.Fluent 1723 1665 1.03:1
ChatDuplicateMessagesPerf.default 437 429 1.02:1
TableManyItemsPerf.default 2418 2376 1.02:1
CustomToolbarPrototype.default 3931 3859 1.02:1
EmbedMinimalPerf.default 2040 2035 1:1
DropdownMinimalPerf.default 2983 3022 0.99:1
SliderMinimalPerf.default 1664 1677 0.99:1
TreeWith60ListItems.default 217 223 0.97:1
ListWith60ListItems.default 994 1170 0.85:1

@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 ab9d66a:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@dzearing dzearing merged commit 63a9ede into microsoft:master Sep 16, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xugao xugao xugao approved these changes

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@dzearing @msft-github-bot @xugao