Skip to content

rfc: High Contrast theme on Windows#17465

Merged
miroslavstastny merged 2 commits intomicrosoft:masterfrom
miroslavstastny:rfc/high-contrast-theme
Apr 20, 2021
Merged

rfc: High Contrast theme on Windows#17465
miroslavstastny merged 2 commits intomicrosoft:masterfrom
miroslavstastny:rfc/high-contrast-theme

Conversation

@miroslavstastny
Copy link
Copy Markdown
Member

RFC describing High Contrast theme honouring Windows HC settings.
View the doc: https://github.com/miroslavstastny/fluentui/blob/a8d647fa29aac052a212a1049a2bcb4e084825d8/rfcs/high-contrast-theme.md

@miroslavstastny miroslavstastny added the Type: RFC Request for Feedback label Mar 17, 2021
@ling1726
Copy link
Copy Markdown
Contributor

nit: maybe have an images or assets folder ?

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Mar 17, 2021

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 25cac70:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Mar 17, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 879 903 5000
BaseButton mount 881 866 5000
Breadcrumb mount 43049 43095 5000
ButtonNext mount 565 586 5000
Checkbox mount 1502 1510 5000
CheckboxBase mount 1236 1279 5000
ChoiceGroup mount 4731 4580 5000
ComboBox mount 965 941 1000
CommandBar mount 9950 9895 1000
ContextualMenu mount 5997 6122 1000
DefaultButton mount 1119 1108 5000
DetailsRow mount 3639 3555 5000
DetailsRowFast mount 3596 3578 5000
DetailsRowNoStyles mount 3420 3404 5000
Dialog mount 1406 1391 1000
DocumentCardTitle mount 1822 1823 1000
Dropdown mount 3226 3112 5000
FocusTrapZone mount 1793 1774 5000
FocusZone mount 1765 1802 5000
IconButton mount 1701 1718 5000
Label mount 316 331 5000
Layer mount 1732 1735 5000
Link mount 458 452 5000
MakeStyles mount 1759 1756 50000
MenuButton mount 1393 1435 5000
MessageBar mount 1949 1970 5000
Nav mount 3173 3186 1000
OverflowSet mount 1017 1028 5000
Panel mount 1395 1434 1000
Persona mount 812 796 1000
Pivot mount 1361 1357 1000
PrimaryButton mount 1251 1257 5000
Rating mount 7338 7486 5000
SearchBox mount 1278 1278 5000
Shimmer mount 2462 2497 5000
Slider mount 1902 1925 5000
SpinButton mount 5267 4939 5000
Spinner mount 408 407 5000
SplitButton mount 3168 3080 5000
Stack mount 478 500 5000
StackWithIntrinsicChildren mount 1490 1486 5000
StackWithTextChildren mount 4464 4443 5000
SwatchColorPicker mount 9910 9981 5000
Tabs mount 1402 1393 1000
TagPicker mount 2347 2367 5000
TeachingBubble mount 11799 11685 5000
Text mount 413 400 5000
TextField mount 1329 1337 5000
ThemeProvider mount 1151 1164 5000
ThemeProvider virtual-rerender 601 594 5000
ThemeProviderNext mount 15954 16116 5000
Toggle mount 801 760 5000
buttonNative mount 112 111 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.16 0.46 0.35:1 2000 329
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 543
🔧 Checkbox.Fluent 0.61 0.35 1.74:1 1000 611
🦄 Dialog.Fluent 0.14 0.21 0.67:1 5000 716
🔧 Dropdown.Fluent 3.05 0.39 7.82:1 1000 3048
🔧 Icon.Fluent 0.12 0.06 2:1 5000 587
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 396
🔧 Slider.Fluent 1.55 0.44 3.52:1 1000 1552
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 351
🦄 Tooltip.Fluent 0.14 0.87 0.16:1 5000 692

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AnimationMinimalPerf.default 442 401 1.1:1
PortalMinimalPerf.default 181 168 1.08:1
ListNestedPerf.default 577 539 1.07:1
AttachmentMinimalPerf.default 165 155 1.06:1
TableMinimalPerf.default 421 398 1.06:1
StatusMinimalPerf.default 703 667 1.05:1
Image.Fluent 396 377 1.05:1
LabelMinimalPerf.default 394 379 1.04:1
ListWith60ListItems.default 639 613 1.04:1
SkeletonMinimalPerf.default 373 360 1.04:1
ButtonUseCssPerf.default 812 791 1.03:1
CarouselMinimalPerf.default 474 462 1.03:1
HeaderSlotsPerf.default 750 727 1.03:1
ItemLayoutMinimalPerf.default 1264 1233 1.03:1
TooltipMinimalPerf.default 980 947 1.03:1
Button.Fluent 543 525 1.03:1
ButtonUseCssNestingPerf.default 1076 1058 1.02:1
CheckboxMinimalPerf.default 2740 2689 1.02:1
DividerMinimalPerf.default 367 359 1.02:1
FormMinimalPerf.default 419 412 1.02:1
GridMinimalPerf.default 349 341 1.02:1
InputMinimalPerf.default 1252 1233 1.02:1
ListMinimalPerf.default 511 502 1.02:1
PopupMinimalPerf.default 708 696 1.02:1
RadioGroupMinimalPerf.default 433 425 1.02:1
TextMinimalPerf.default 354 347 1.02:1
Avatar.Fluent 329 323 1.02:1
AccordionMinimalPerf.default 167 166 1.01:1
AttachmentSlotsPerf.default 1129 1122 1.01:1
ButtonOverridesMissPerf.default 1667 1655 1.01:1
DropdownManyItemsPerf.default 675 670 1.01:1
EmbedMinimalPerf.default 4149 4096 1.01:1
FlexMinimalPerf.default 297 295 1.01:1
ImageMinimalPerf.default 382 379 1.01:1
LoaderMinimalPerf.default 714 707 1.01:1
MenuMinimalPerf.default 901 895 1.01:1
ProviderMergeThemesPerf.default 1660 1646 1.01:1
RefMinimalPerf.default 248 245 1.01:1
TextAreaMinimalPerf.default 480 474 1.01:1
VideoMinimalPerf.default 619 613 1.01:1
Checkbox.Fluent 611 606 1.01:1
Dialog.Fluent 716 708 1.01:1
Dropdown.Fluent 3048 3023 1.01:1
Slider.Fluent 1552 1540 1.01:1
Text.Fluent 351 348 1.01:1
BoxMinimalPerf.default 352 352 1:1
DatepickerMinimalPerf.default 44038 44049 1:1
DialogMinimalPerf.default 716 719 1:1
MenuButtonMinimalPerf.default 1523 1527 1:1
SegmentMinimalPerf.default 368 369 1:1
SplitButtonMinimalPerf.default 3624 3630 1:1
TableManyItemsPerf.default 1854 1853 1:1
CustomToolbarPrototype.default 3723 3733 1:1
ToolbarMinimalPerf.default 917 913 1:1
AlertMinimalPerf.default 275 279 0.99:1
TreeMinimalPerf.default 766 772 0.99:1
TreeWith60ListItems.default 178 179 0.99:1
ChatMinimalPerf.default 590 601 0.98:1
DropdownMinimalPerf.default 2992 3038 0.98:1
LayoutMinimalPerf.default 363 369 0.98:1
ListCommonPerf.default 611 624 0.98:1
SliderMinimalPerf.default 1528 1566 0.98:1
Tooltip.Fluent 692 705 0.98:1
ButtonSlotsPerf.default 547 564 0.97:1
ChatDuplicateMessagesPerf.default 298 306 0.97:1
ChatWithPopoverPerf.default 380 393 0.97:1
RosterPerf.default 1159 1201 0.97:1
ButtonMinimalPerf.default 173 181 0.96:1
ProviderMinimalPerf.default 953 993 0.96:1
Icon.Fluent 587 615 0.95:1
CardMinimalPerf.default 521 557 0.94:1
IconMinimalPerf.default 576 616 0.94:1
ReactionMinimalPerf.default 378 405 0.93:1
AvatarMinimalPerf.default 187 204 0.92:1
HeaderMinimalPerf.default 370 401 0.92:1

@size-auditor
Copy link
Copy Markdown

size-auditor Bot commented Mar 17, 2021

Asset size changes

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

Baseline commit: 9a01ff085821286d7b684cb37a5a83eb195d56a7 (build)

}
}
```

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

depending on if we implement system colors for react and react-northstar we might need to ship a black HC theme as well - due to compatibility reasons. It might of course be easier to just implement system colors in both of these flavors of Fluent UI, but we need to make a decision on that and understand implications for the consumers.

--global-color-hc-disabled: GrayText;
--global-color-hc-selected: Highlight;
}
}
Copy link
Copy Markdown
Member

@layershifter layershifter Mar 19, 2021

Choose a reason for hiding this comment

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

It's probably out of scope, but can we make a prototype with makeStyles() for this to see how it fits into current approach?

Copy link
Copy Markdown
Member

@layershifter layershifter left a comment

Choose a reason for hiding this comment

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

I don't have any comments, I think that it's important to handle input from OS settings in this case 👍

Comment thread rfcs/high-contrast-theme.md
@miroslavstastny miroslavstastny merged commit ffa0a90 into microsoft:master Apr 20, 2021
@miroslavstastny miroslavstastny deleted the rfc/high-contrast-theme branch April 20, 2021 13:58
miroslavstastny added a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
* rfc: High Contrast theme on Windows

* move images to assets, use all 8 system colors, discuss non-Windows systems
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type: RFC Request for Feedback

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants