Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

fix(Button): Add new color scheme tokens & update iconOnly button styles for Teams theme #2211

Merged
merged 7 commits into from
Jan 30, 2020

Conversation

codepretty
Copy link
Collaborator

@codepretty codepretty commented Jan 7, 2020

Support background5 and backgroundHover2 default design token in Teams themes
image
image

Updated iconOnly buttons to use backgroundHover2 for the correct hover background in Teams high contrast theme

  1. Icons in buttons should not be filled on focus, only on hover
    Before
    image

After
image

  1. Icon only text button should have a yellow background and black text color on hover in Teams high contrast
    Before
    image

After
image

Example using the new background5 token for a background in all Teams themes
image

@codepretty codepretty changed the title ColorScheme(feature): Add background5 to default color scheme for Teams theme feat(colorScheme): Add background5 to default color scheme for Teams theme Jan 7, 2020
@codepretty codepretty changed the title feat(colorScheme): Add background5 to default color scheme for Teams theme fix(Button): Add new color scheme tokens & update iconOnly button styles for Teams theme Jan 7, 2020
@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Jan 7, 2020

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.65 0.42 1.55:1 2000 1304
🔧 Button.Fluent 1.48 0.2 7.4:1 1000 1475
🔧 Checkbox.Fluent 1.68 0.37 4.54:1 1000 1675
🔧 Dialog.Fluent 0.39 0.21 1.86:1 5000 1962
🔧 Dropdown.Fluent 3.7 0.41 9.02:1 1000 3703
🔧 Icon.Fluent 0.28 0.04 7:1 5000 1422
🔧 Image.Fluent 0.11 0.07 1.57:1 5000 558
🔧 Slider.Fluent 1.96 0.3 6.53:1 1000 1961
🦄 Text.Fluent 0.05 0.17 0.29:1 5000 254
🦄 Tooltip.Fluent 0.44 19.37 0.02:1 5000 2194

🔧 Needs work     🎯 On target     🦄 Amazing

Generated by 🚫 dangerJS

Brigette Lundeen added 2 commits January 7, 2020 14:56
Copy link
Contributor

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

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

LGTM, make sure the screener differences are accepted

@codepretty codepretty merged commit 2689e7a into master Jan 30, 2020
@codepretty codepretty deleted the shell-color-scheme-additions branch January 30, 2020 05:10
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants