(web-components) Web component visual update

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": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -1,11 +1,11 @@
 <div id="switches-container">
-  <fluent-badge appearance="lightweight">Direction:</fluent-badge>
   <fluent-switch id="ltr-switch">
+    Direction
     <span slot="checked-message">RTL</span>
     <span slot="unchecked-message">LTR</span>
   </fluent-switch>
-  <fluent-badge appearance="lightweight">Light/Dark mode:</fluent-badge>
   <fluent-switch id="luminance-switch">
+    Luminance
     <span slot="checked-message">Dark</span>
     <span slot="unchecked-message">Light</span>
   </fluent-switch>

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

@@ -12,6 +12,9 @@
   }
 
   #switches-container {
+    display: flex;
+    gap: 20px;
+    align-items: center;
     padding: 12px;
     position: fixed;
     background: var(--fill-color);
@@ -20,20 +23,6 @@
     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;
   }
@@ -42,14 +31,4 @@
     color: var(--accent-foreground-hover) !important;
     text-decoration: underline;
   }
-  #root > h1,
-  #root > h2,
-  #root > h3,
-  #root > h4,
-  #root > h5,
-  #root > h6,
-  #root > p,
-  #root > span {
-    color: var(--neutral-foreground-rest);
-  }
 </style>

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

@@ -1,11 +1,14 @@
+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';
 
 Fluent;
 
-document.getElementById('luminance-switch').addEventListener('change', () => toggleBgMode(), false);
-document.getElementById('ltr-switch').addEventListener('change', () => toggleLtr(), false);
+document.getElementById('luminance-switch').addEventListener('change', toggleBgMode, false);
+document.getElementById('ltr-switch').addEventListener('change', toggleLtr, false);
 
 export const parameters = {
   layout: 'fullscreen',
@@ -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);
+  }
+});