-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(web-components) create recipes and update component styles to levera…
…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
- Loading branch information
1 parent
41c289d
commit 888bb39
Showing
54 changed files
with
6,843 additions
and
7,354 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@fluentui-web-components-88856bf4-40e5-4e82-88cb-f42637e099f9.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "major", | ||
| "comment": "create recipes and tokens on DI and update components to leverage tokens", | ||
| "packageName": "@fluentui/web-components", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import * as Fluent from '../src/index-rollup'; | ||
|
|
||
| Fluent; | ||
|
|
||
| export const parameters = { | ||
| layout: 'fullscreen', | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,23 @@ | ||
| import { css } from '@microsoft/fast-element'; | ||
| import { display } from '@microsoft/fast-foundation'; | ||
| import { accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior } from '../styles/'; | ||
| import { | ||
| bodyFont, | ||
| neutralDivider, | ||
| neutralForegroundRest, | ||
| outlineWidth, | ||
| typeRampMinus1FontSize, | ||
| typeRampMinus1LineHeight, | ||
| } from '../design-tokens'; | ||
|
|
||
| export const accordionStyles = (context, definition) => | ||
| css` | ||
| ${display('flex')} :host { | ||
| box-sizing: border-box; | ||
| flex-direction: column; | ||
| font-family: var(--body-font); | ||
| font-size: var(--type-ramp-minus-1-font-size); | ||
| line-height: var(--type-ramp-minus-1-line-height); | ||
| color: ${neutralForegroundRestBehavior.var}; | ||
| border-top: calc(var(--outline-width) * 1px) solid ${neutralDividerRestBehavior.var}; | ||
| font-family: ${bodyFont}; | ||
| font-size: ${typeRampMinus1FontSize}; | ||
| line-height: ${typeRampMinus1LineHeight}; | ||
| color: ${neutralForegroundRest}; | ||
| border-top: calc(${outlineWidth} * 1px) solid ${neutralDivider}; | ||
| } | ||
| `.withBehaviors(accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior); | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,44 @@ | ||
| import { css } from '@microsoft/fast-element'; | ||
| import { display } from '@microsoft/fast-foundation'; | ||
| import { | ||
| accentFillRestBehavior, | ||
| accentForegroundCutRestBehavior, | ||
| neutralFillRestBehavior, | ||
| neutralForegroundRestBehavior, | ||
| } from '../styles'; | ||
| accentForegroundRest, | ||
| bodyFont, | ||
| cornerRadius, | ||
| designUnit, | ||
| neutralForegroundRest, | ||
| typeRampMinus1FontSize, | ||
| typeRampMinus1LineHeight, | ||
| neutralFillRest, | ||
| accentForegroundCut, | ||
| } from '../design-tokens'; | ||
|
|
||
| export const badgeStyles = (context, definition) => | ||
| css` | ||
| ${display('inline-block')} :host { | ||
| box-sizing: border-box; | ||
| font-family: var(--body-font); | ||
| font-size: var(--type-ramp-minus-1-font-size); | ||
| line-height: var(--type-ramp-minus-1-height); | ||
| font-family: ${bodyFont}; | ||
| font-size: ${typeRampMinus1FontSize}; | ||
| line-height: ${typeRampMinus1LineHeight}; | ||
| } | ||
| .control { | ||
| border-radius: calc(var(--corner-radius) * 1px); | ||
| padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px); | ||
| border-radius: calc(${cornerRadius} * 1px); | ||
| padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px); | ||
| } | ||
| :host(.lightweight) .control { | ||
| background: transparent; | ||
| color: ${neutralForegroundRestBehavior.var}; | ||
| color: ${neutralForegroundRest}; | ||
| font-weight: 600; | ||
| } | ||
| :host(.accent) .control { | ||
| background: ${accentFillRestBehavior.var}; | ||
| color: ${accentForegroundCutRestBehavior.var}; | ||
| background: ${accentForegroundRest}; | ||
| color: ${accentForegroundCut}; | ||
| } | ||
| :host(.neutral) .control { | ||
| background: ${neutralFillRestBehavior.var}; | ||
| color: ${neutralForegroundRestBehavior.var}; | ||
| background: ${neutralFillRest}; | ||
| color: ${neutralForegroundRest}; | ||
| } | ||
| `.withBehaviors( | ||
| accentFillRestBehavior, | ||
| accentForegroundCutRestBehavior, | ||
| neutralFillRestBehavior, | ||
| neutralForegroundRestBehavior, | ||
| ); | ||
| `; |
Oops, something went wrong.