fix: add force-colors to backgroundStyles and update button styles to…

… fix the card and button components (#17231)

* add force-colors backgroundStyles and set a few HC colors on button styles

* Change files

* adjust forece colors import order

* update to use attribute instead of class. fixed href color issues

change/@fluentui-web-components-60b7b152-bf89-43ce-8679-118f8511b0bf.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add force-colors backgroundStyles and set a few HC colors on button styles",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/design-system-provider/index.ts

@@ -1,10 +1,11 @@
 import { attr, css, nullableNumberConverter } from '@microsoft/fast-element';
-import { Direction } from '@microsoft/fast-web-utilities';
+import { Direction, SystemColors } from '@microsoft/fast-web-utilities';
 import {
   CSSCustomPropertyBehavior,
   designSystemProperty,
   DesignSystemProvider,
   designSystemProvider,
+  forcedColorsStylesheetBehavior,
   DesignSystemProviderTemplate as template,
 } from '@microsoft/fast-foundation';
 import { parseColorHexRGB } from '@microsoft/fast-colors';
@@ -23,7 +24,18 @@ const backgroundStyles = css`
     background-color: var(--background-color);
     color: ${color.var};
   }
-`.withBehaviors(color);
+`.withBehaviors(
+  color,
+  forcedColorsStylesheetBehavior(
+    css`
+      :host {
+        background-color: ${SystemColors.ButtonFace};
+        box-shadow: 0 0 0 1px ${SystemColors.CanvasText};
+        color: ${SystemColors.ButtonText};
+      }
+    `,
+  ),
+);
 
 /**
  * The Fluent DesignSystemProvider Element. Implements {@link @microsoft/fast-foundation#DesignSystemProvider},