(web-components) create recipes and update component styles to leverage tokens #18226

chrisdholt · 2021-05-17T22:32:30Z

Pull request checklist

Addresses an existing issue: Fixes #0000
Include a change request file using $ yarn change

Description of changes

This PR creates and applies initial tokens and values to the Fluent UI implementation

Focus areas to test

(optional)

codesandbox-ci · 2021-05-17T22:45:04Z

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 660752e:

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

packages/web-components/src/accordion/accordion.styles.ts

EisenbergEffect · 2021-05-17T23:42:32Z

packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts

    .button:active {
-        color: ${neutralForegroundActiveBehavior.var};
+        color: ${neutralForegroundRest};


Was this supposed to change from active to rest?

@EisenbergEffect Per @nicholasrice there isn't really a difference between rest and hover, active states. This is intentional unless there is an update where these should resolve and return different values.

Yea I'd defer to @bheston on this, and on whether we actually want stateful neutralForeground colors. We have them today but they all resolve to the same color, so I only added the 'rest' thinking we could expand in the future if necessary.

I think this is okay for now, but if we do find a need where these wouldn't resolve to the same color we can add/update. Right now it seems like a fair amount of overhead to have multiple recipes that resolve to the same thing. I'm hopeful that we can take this as a follow-up if needed now, or we can add in the future as a feature.

packages/web-components/src/design-tokens.ts

…ge tokens (#18226) * add design tokens * update accordion and accordiioin item to use tokens * update badge with tokens * update breadcrumb and breadcrumb item to use tokens * add button tokens and add elevated corner radius token * update card with elevated corner radius token * update checkbox to use tokens * update combobox to use tokens * update data grid to use tokens * update dialog to use tokens * update divider to use tokens * update flipper to use tokens * update listbox and listbox option to use tokens * update menu and menu item to use tokens * update number field to use tokens * update progress and progress ring to use tokens * update radio and radio group to use tokens * update select styles to use tokens * update skeleton to use tokens * update slider and slider label to use tokens * update button pattern to use tokens * update base button styles to use tokens * update input fill state styles * update switch to use tokens * update tabs to use tokens * update text area to use tokens * update text field to use tokens * add neutral contrast fill recipe and algo * update tooltip to leverage tokens * update tree view to use tokens * update API report * update default luminance to light mode * update outlineWidth tokens * update storybook * update default token values and register fluent name * fix eslint and update to use findResponsibleContainer * Change files * disable disallowedChangeTypes for beachball major versioning * fix broken stories

…ge tokens (microsoft#18226) * add design tokens * update accordion and accordiioin item to use tokens * update badge with tokens * update breadcrumb and breadcrumb item to use tokens * add button tokens and add elevated corner radius token * update card with elevated corner radius token * update checkbox to use tokens * update combobox to use tokens * update data grid to use tokens * update dialog to use tokens * update divider to use tokens * update flipper to use tokens * update listbox and listbox option to use tokens * update menu and menu item to use tokens * update number field to use tokens * update progress and progress ring to use tokens * update radio and radio group to use tokens * update select styles to use tokens * update skeleton to use tokens * update slider and slider label to use tokens * update button pattern to use tokens * update base button styles to use tokens * update input fill state styles * update switch to use tokens * update tabs to use tokens * update text area to use tokens * update text field to use tokens * add neutral contrast fill recipe and algo * update tooltip to leverage tokens * update tree view to use tokens * update API report * update default luminance to light mode * update outlineWidth tokens * update storybook * update default token values and register fluent name * fix eslint and update to use findResponsibleContainer * Change files * disable disallowedChangeTypes for beachball major versioning * fix broken stories

chrisdholt added 30 commits May 14, 2021 15:19

add design tokens

7614fa3

update accordion and accordiioin item to use tokens

f8d3f47

update badge with tokens

6b12bc6

update breadcrumb and breadcrumb item to use tokens

2335e92

add button tokens and add elevated corner radius token

e09da1a

update card with elevated corner radius token

f444ee9

update checkbox to use tokens

0507c78

update combobox to use tokens

7af7740

update data grid to use tokens

4b12427

update dialog to use tokens

f023498

update divider to use tokens

c22515e

update flipper to use tokens

4c19fff

update listbox and listbox option to use tokens

596ca6c

update menu and menu item to use tokens

759c872

update number field to use tokens

bb076e0

update progress and progress ring to use tokens

e4c2a66

update radio and radio group to use tokens

1a75544

update select styles to use tokens

d793b32

update skeleton to use tokens

cf77315

update slider and slider label to use tokens

13b483e

update button pattern to use tokens

6d1cbba

update base button styles to use tokens

e15cde6

update input fill state styles

8fbffa1

update switch to use tokens

e4e8cef

update tabs to use tokens

233877c

update text area to use tokens

8eaec6b

update text field to use tokens

d8c0ca8

add neutral contrast fill recipe and algo

f5ae355

update tooltip to leverage tokens

27efcf8

update tree view to use tokens

233d629

chrisdholt added the web-components label May 17, 2021

chrisdholt self-assigned this May 17, 2021

chrisdholt requested review from EisenbergEffect and nicholasrice as code owners May 17, 2021 22:32

chrisdholt changed the title ~~Users/chhol/add design tokens v next~~ (web-components) create recipes and update component styles to leverage tokens May 17, 2021

update default luminance to light mode

660752e

nicholasrice reviewed May 17, 2021

View reviewed changes

packages/web-components/src/accordion/accordion.styles.ts Outdated Show resolved Hide resolved

nicholasrice approved these changes May 17, 2021

View reviewed changes

chrisdholt added 2 commits May 17, 2021 16:20

update outlineWidth tokens

0ebe565

update storybook

e95e627

chrisdholt requested a review from a team as a code owner May 17, 2021 23:52

EisenbergEffect suggested changes May 17, 2021

View reviewed changes

msft-fluent-ui-bot added Needs: Author Feedback and removed Needs: Author Feedback labels May 17, 2021

chrisdholt added 2 commits May 17, 2021 18:08

update default token values and register fluent name

3a76db5

fix eslint and update to use findResponsibleContainer

cf8b49d

chrisdholt requested a review from EisenbergEffect May 18, 2021 01:25

chrisdholt added 2 commits May 17, 2021 18:32

Change files

ab280bb

disable disallowedChangeTypes for beachball major versioning

4d89c9a

EisenbergEffect approved these changes May 18, 2021

View reviewed changes

fix broken stories

61127cc

chrisdholt merged commit 5d2e358 into microsoft:features/web-components-vNext May 18, 2021

chrisdholt deleted the users/chhol/add-design-tokens-vNext branch May 18, 2021 02:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(web-components) create recipes and update component styles to leverage tokens #18226

(web-components) create recipes and update component styles to leverage tokens #18226

chrisdholt commented May 17, 2021

codesandbox-ci bot commented May 17, 2021

EisenbergEffect May 17, 2021 •

edited

Loading

chrisdholt May 18, 2021

nicholasrice May 18, 2021

chrisdholt May 18, 2021

(web-components) create recipes and update component styles to leverage tokens #18226

(web-components) create recipes and update component styles to leverage tokens #18226

Conversation

chrisdholt commented May 17, 2021

Pull request checklist

Description of changes

Focus areas to test

codesandbox-ci bot commented May 17, 2021

EisenbergEffect May 17, 2021 • edited Loading

Choose a reason for hiding this comment

chrisdholt May 18, 2021

Choose a reason for hiding this comment

nicholasrice May 18, 2021

Choose a reason for hiding this comment

chrisdholt May 18, 2021

Choose a reason for hiding this comment

EisenbergEffect May 17, 2021 •

edited

Loading