(web-components) fix card color

change/@fluentui-web-components-187ac3c3-51d0-4ebc-bf18-1d431cfd1247.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Updated Card color handling for new design tokens Updated fill-color handling in design-system-provider Added neutral-fill-layer-rest-delta to design-system-provider Updated use of fluent-design-system-provider in samples Cleaned up styles and sorted imports",
+  "packageName": "@fluentui/web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -1,15 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
-  accentForegroundRest,
+  accentFillRest,
   bodyFont,
   controlCornerRadius,
   designUnit,
+  foregroundOnAccentRest,
+  neutralFillRest,
   neutralForegroundRest,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight,
-  neutralFillRest,
-  accentForegroundCut,
 } from '../design-tokens';
 
 export const badgeStyles = (context, definition) =>
@@ -33,8 +33,8 @@ export const badgeStyles = (context, definition) =>
     }
 
     :host(.accent) .control {
-      background: ${accentForegroundRest};
-      color: ${accentForegroundCut};
+      background: ${accentFillRest};
+      color: ${foregroundOnAccentRest};
     }
 
     :host(.neutral) .control {

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

@@ -10,12 +10,12 @@ import {
 } from '../styles/';
 import { appearanceBehavior } from '../utilities/behaviors';
 import {
-  disabledOpacity,
-  neutralFillRest,
   accentFillRest,
   accentForegroundRest,
-  neutralStrokeRest,
+  disabledOpacity,
+  neutralFillRest,
   neutralFillStealthRest,
+  neutralStrokeRest,
 } from '../design-tokens';
 
 export const buttonStyles = (context, definition) =>

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

@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevation } from '../styles';
-import { layerCornerRadius } from '../design-tokens';
+import { fillColor, layerCornerRadius } from '../design-tokens';
 
 export const CardStyles = css`
   ${display('block')} :host {
@@ -12,6 +12,7 @@ export const CardStyles = css`
     height: var(--card-height, 100%);
     width: var(--card-width, 100%);
     box-sizing: border-box;
+    background: ${fillColor};
     border-radius: calc(${layerCornerRadius} * 1px);
     ${elevation}
   }

packages/web-components/src/card/fixtures/card.html

@@ -1,5 +1,8 @@
-<fluent-design-system-provider use-defaults background-color="#F7F7F7" corner-radius="10">
+<fluent-design-system-provider fill-color="#F7F7F7" layer-corner-radius="10">
   <style>
+    fluent-design-system-provider {
+      padding: 20px 0;
+    }
     fluent-card {
       --card-height: 400px;
       --card-width: 500px;
@@ -30,7 +33,7 @@
   <div>
     <fluent-card class="state-override">Custom size and elevation on hover using CSS</fluent-card>
 
-    <fluent-design-system-provider background-color="#333333">
+    <fluent-design-system-provider fill-color="#333333">
       <fluent-card>
         <div class="contents">
           Dark
@@ -42,8 +45,8 @@
       </fluent-card>
     </fluent-design-system-provider>
 
-    <fluent-design-system-provider background-color="#E5E5E5">
-      <fluent-card neutral-base-color="#3995C9">
+    <fluent-design-system-provider fill-color="#E5E5E5">
+      <fluent-card neutral-palette-source="#3995C9">
         <div class="contents">
           Tinted neutral, light
           <fluent-button appearance="accent">Accent</fluent-button>
@@ -54,8 +57,8 @@
       </fluent-card>
     </fluent-design-system-provider>
 
-    <fluent-design-system-provider background-color="#333333">
-      <fluent-card neutral-base-color="#3995C9">
+    <fluent-design-system-provider fill-color="#333333">
+      <fluent-card neutral-palette-source="#3995C9">
         <div class="contents">
           Tinted neutral, dark
           <fluent-button appearance="accent">Accent</fluent-button>
@@ -66,16 +69,16 @@
       </fluent-card>
     </fluent-design-system-provider>
 
-    <fluent-design-system-provider background-color="#333333">
-      <fluent-card neutral-base-color="#3995C9">
+    <fluent-design-system-provider fill-color="#333333">
+      <fluent-card neutral-palette-source="#3995C9">
         <div class="contents">
           Tinted neutral, dark
           <fluent-button appearance="accent">Accent</fluent-button>
           <fluent-button appearance="stealth">Stealth</fluent-button>
           <fluent-button appearance="outline">Outline</fluent-button>
           <fluent-button appearance="lightweight">Lightweight</fluent-button>
         </div>
-        <fluent-card neutral-base-color="#00A900" style="margin: 0; --card-height: 200px; --card-width: 460px;">
+        <fluent-card neutral-palette-source="#00A900" style="margin: 0; --card-height: 200px; --card-width: 460px;">
           <div class="contents">
             Tinted neutral, nested, dark
             <fluent-button appearance="accent">Accent</fluent-button>
@@ -87,9 +90,9 @@
       </fluent-card>
     </fluent-design-system-provider>
 
-    <fluent-card card-background-color="#2A5193">
+    <fluent-card card-fill-color="#2A5193">
       <div class="contents">
-        Custom card background color
+        Custom card fill color
         <fluent-button appearance="accent">Accent</fluent-button>
         <fluent-button appearance="stealth">Stealth</fluent-button>
         <fluent-button appearance="outline">Outline</fluent-button>

packages/web-components/src/card/index.ts

@@ -1,77 +1,107 @@
+import { composedParent, Card as FoundationCard, CardTemplate as template } from '@microsoft/fast-foundation';
 import { attr, Notifier, Observable } from '@microsoft/fast-element';
 import { parseColorHexRGB } from '@microsoft/fast-colors';
-import { designSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation';
-import { neutralFillCard } from '../color';
-import { DesignSystem } from '../fluent-design-system';
-import { FluentDesignSystemProvider } from '../design-system-provider';
+import { fillColor, neutralFillLayerRecipe, neutralPalette } from '../design-tokens';
+import { Swatch, SwatchRGB } from '../color-vNext/swatch';
+import { PaletteRGB } from '../color-vNext/palette';
 import { CardStyles as styles } from './card.styles';
 
 /**
- * The Fluent Card Element. Implements {@link @microsoft/fast-foundation#Card},
- * {@link @microsoft/fast-foundation#CardTemplate}
- *
- *
  * @public
- * @remarks
- * HTML Element: \<fluent-card\>
  */
-@designSystemProvider({
-  name: 'fluent-card',
-  template,
-  styles,
-  shadowOptions: {
-    mode: 'closed',
-  },
-})
-export class FluentCard extends FluentDesignSystemProvider {
+export class Card extends FoundationCard {
   /**
-   * Background color for the card component. Sets context for the design system.
+   * Fill color for the card component. Sets context for the design system.
+   * 
+   * Updates the neutral palette and sets the card to the source color. For tinting use neutral-palette-source instead.
    * @public
    * @remarks
-   * HTML Attribute: card-background-color
+   * HTML Attribute: card-fill-color
    */
   @attr({
-    attribute: 'card-background-color',
+    attribute: 'card-fill-color',
     mode: 'fromView',
   })
-  public cardBackgroundColor: string;
-  private cardBackgroundColorChanged(prev: string | void, next: string | void): void {
+  public cardFillColor: string;
+  private cardFillColorChanged(prev: string | void, next: string | void): void {
     if (next) {
-      const parsedColor = parseColorHexRGB(this.cardBackgroundColor);
+      const parsedColor = parseColorHexRGB(next);
 
       if (parsedColor !== null) {
-        this.neutralBaseColor = this.cardBackgroundColor;
-        this.backgroundColor = this.cardBackgroundColor;
+        this.neutralPaletteSource = next;
+        fillColor.setValueFor(
+          this,
+          SwatchRGB.create(parsedColor.r, parsedColor.g, parsedColor.b)
+        );
       }
-    } else if (this.provider && this.provider.designSystem) {
-      this.handleChange(this.provider.designSystem as DesignSystem, 'backgroundColor');
+    }
+  }
+
+  /**
+   * Neutral palette source color for the card component. Sets context for the design system.
+   * 
+   * This allows for tinting the card while maintaining the light or dark context. For a fixed color use card-fill-color instead.
+   * @public
+   * @remarks
+   * HTML Attribute: neutral-palette-source
+   */
+  @attr({
+    attribute: 'neutral-palette-source',
+    mode: 'fromView',
+  })
+  public neutralPaletteSource: string;
+  private neutralPaletteSourceChanged(prev: string | void, next: string | void): void {
+    if (next) {
+      const color = parseColorHexRGB(next)!;
+      const swatch = SwatchRGB.create(color.r, color.g, color.b);
+      neutralPalette.setValueFor(this, PaletteRGB.create(swatch));
     }
   }
 
   /**
    * @internal
    */
-  public handleChange(source: DesignSystem, name: string): void {
-    if (!this.cardBackgroundColor) {
-      if (this.neutralBaseColor) {
-        this.backgroundColor = neutralFillCard(this.designSystem as DesignSystem);
-      } else {
-        this.backgroundColor = neutralFillCard(source);
-      }
+  public handleChange(source: any, propertyName: string): void {
+    if (!this.cardFillColor) {
+      fillColor.setValueFor(
+        this,
+        (target: HTMLElement): Swatch =>
+          neutralFillLayerRecipe.getValueFor(target).evaluate(target, fillColor.getValueFor(source)),
+      );
     }
   }
 
   connectedCallback(): void {
     super.connectedCallback();
-    const parentDSNotifier: Notifier = Observable.getNotifier(this.provider?.designSystem);
-    parentDSNotifier.subscribe(this, 'backgroundColor');
-    parentDSNotifier.subscribe(this, 'neutralPalette');
-    this.handleChange(this.provider?.designSystem as DesignSystem, 'backgroundColor');
+
+    const parent = composedParent(this);
+
+    if (parent) {
+      const parentNotifier: Notifier = Observable.getNotifier(parent);
+      parentNotifier.subscribe(this, 'fillColor');
+      parentNotifier.subscribe(this, 'neutralPalette');
+      this.handleChange(parent, 'fillColor');
+    }
   }
 }
 
+/**
+ * The Fluent Card Element. Implements {@link @microsoft/fast-foundation#Card},
+ * {@link @microsoft/fast-foundation#CardTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-card\>
+ */
+export const fluentCard = Card.compose({
+  baseName: 'card',
+  template,
+  styles,
+});
+
 /**
  * Styles for Card
  * @public
  */
-export const CardStyles = styles;
+export const cardStyles = styles;

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

@@ -3,22 +3,22 @@ import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior }
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
 import {
-  designUnit,
+  bodyFont,
   controlCornerRadius,
-  strokeWidth,
-  neutralStrokeRest,
+  designUnit,
+  disabledOpacity,
+  fillColor,
+  focusStrokeOuter,
+  neutralFillInputActive,
+  neutralFillInputHover,
   neutralFillInputRest,
-  bodyFont,
   neutralForegroundRest,
+  neutralStrokeActive,
+  neutralStrokeHover,
+  neutralStrokeRest,
+  strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
-  neutralFillInputHover,
-  neutralStrokeHover,
-  neutralFillInputActive,
-  neutralStrokeActive,
-  focusStrokeOuter,
-  disabledOpacity,
-  fillColor,
 } from '../design-tokens';
 
 export const checkboxStyles = (context, definition) =>

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

@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
 import { selectFilledStyles, selectStyles } from '../select/select.styles';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { typeRampBaseFontSize, typeRampBaseLineHeight, strokeWidth } from '../design-tokens';
+import { strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
 
 export const comboboxStyles = (context, definition) =>
   css`

packages/web-components/src/custom-elements.ts

@@ -8,11 +8,11 @@ export { fluentBadge } from './badge/index';
 export { fluentBreadcrumb } from './breadcrumb/index';
 export { fluentBreadcrumbItem } from './breadcrumb-item/index';
 export { fluentButton } from './button/index';
-// export * from "./card/index";
+export { fluentCard } from './card/index';
 export { fluentCheckbox } from './checkbox/index';
 export { fluentCombobox } from './combobox/index';
 export { fluentDataGrid, fluentDataGridCell, fluentDataGridRow } from './data-grid/index';
-// export * from "./design-system-provider/index";
+export { fluentDesignSystemProvider } from './design-system-provider/index';
 export { fluentDialog } from './dialog/index';
 export { fluentDivider } from './divider/index';
 export { fluentFlipper } from './flipper/index';