(web-components) Web component visual update (microsoft#19263)

* Initial update of Fluent visual styling

* Added and updated color recipes
Added `circular` badge styling and example
Removed `appearance` selectors
Converted elevation to design tokens

* Cleaned up disabled styles
Cleaned up focus states
Fixed text input width
Updated tree view components

* Update a few icons

* Updated anchor and button 'disabled' styling
Updated skeleton to use recipes
Updated tooltip to correct colors
Fixed number field spinner color

* Change files

* Review comments and clean up

* Added 'stealth' Select appearance

* Adjust accordion padding, storybook color, and light mode level

* Cleaned up color recipes and application
Adjusted icons to correct size
Removed states from card
Fixed input placeholder contrast
Removed deprecated design tokens

* Color recipe cleanup
Design token purpose cleanup
Some Storybook example cleanup

* Cleanup log

* Minor definitions and import fixes

* Fix one more import issue

* Apply updates made in FAST

* Fix some button style details

* Fix enabled selector rules for Firefox
Fix foregroundOnAccent active state color

* Rebase and cleanup for token deprecation and sorting

* Updated gradient design tokens for consistent API

* Fix some token exports and gradient recipe issues

* Fix direction handling and nested menus

* Clean up design token interface

* Flipper style update to look not disabled
Storybook cleanup

* Fixed disabled button style
Added floating color for select and combobox
Fixed tooltip style

* Added design tokens for neutral and accent bae colors.
Added a docs page descriping styling using design tokens.
Fixed some Card samples to better illustrate using the new design tokens.

* Change files

* Update card.html

prettier for card

* Run prettier

* Docs update

Co-authored-by: Chris Holt <[email protected]>

change/@fluentui-web-components-e1a84d66-4c1b-4a87-9309-38c608a5b80a.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "Update to Sun Valley visual styling",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/.storybook/preview-body.html

@@ -5,6 +5,7 @@
     <label for="direction-switch">Direction:</label>
   </fluent-switch>
   <fluent-switch id="luminance-switch">
+    Luminance
     <span slot="checked-message">Dark</span>
     <span slot="unchecked-message">Light</span>
     <label for="luminance-switch">Luminance:</label>

packages/web-components/.storybook/preview-head.html

@@ -5,7 +5,6 @@
     height: 100%;
     background: var(--fill-color) !important;
   }
-
   .sbdocs-preview,
   div.docs-story {
     background: var(--fill-color) !important;
@@ -23,25 +22,20 @@
     box-shadow: 0px 0px 3px rgb(0 0 0 / 22%);
     z-index: 10;
   }
-
   #switches-container > fluent-badge {
     vertical-align: bottom;
     font-size: var(--type-ramp-base-font-size);
     height: 24px;
   }
-
   #switches-container > fluent-badge:host(.control) {
     font-weight: 400;
   }
-
   #switches-container > fluent-badge:last-of-type {
     margin-left: 22px;
   }
-
   #docs-root a.sbdocs.sbdocs-a {
     color: #0969da !important;
   }
-
   #docs-root a.sbdocs.sbdocs-a:hover {
     color: var(--accent-foreground-hover) !important;
     text-decoration: underline;

packages/web-components/.storybook/preview.js

@@ -1,4 +1,7 @@
+import { addons } from '@storybook/addons';
+import { DOCS_RENDERED } from '@storybook/core-events';
 import * as Fluent from '../src/index-rollup';
+import { fillColor, neutralLayer1, neutralLayer2 } from '../src/design-tokens';
 import webcomponentsTheme from './theme';
 import { toggleBgMode, toggleLtr } from '../public/switches';
 
@@ -18,7 +21,7 @@ export const parameters = {
     storySort: {
       order: [
         'Getting Started',
-        ['Overview', 'Installation'],
+        ['Overview', 'Installation', 'Styling'],
         'Components',
         'Integrations',
         ['Introduction'],
@@ -35,3 +38,11 @@ export const parameters = {
     theme: webcomponentsTheme, // override the default Storybook theme with a custom fluent theme
   },
 };
+
+addons.getChannel().addListener(DOCS_RENDERED, name => {
+  if (name.toLowerCase() === 'components/accordion' || name.toLowerCase() === 'components/card') {
+    fillColor.setValueFor(document.body, neutralLayer2);
+  } else {
+    fillColor.setValueFor(document.body, neutralLayer1);
+  }
+});