fix(web-components): update dialog border (#31609)

change/@fluentui-web-components-cb78e90b-9ba3-4165-8ed1-8aa132f8403e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Move dialog border styles to forcedColors mode",
+  "packageName": "@fluentui/web-components",
+  "email": "rupertdavid@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -12,6 +12,7 @@ import {
   shadow64,
   strokeWidthThin,
 } from '../theme/design-tokens.js';
+import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
 
 /** Dialog styles
  * @public
@@ -30,7 +31,7 @@ export const styles = css`
     dialog {
       background: ${colorNeutralBackground1};
       border-radius: ${borderRadiusXLarge};
-      border: ${strokeWidthThin} solid ${colorTransparentStroke};
+      border: none;
       box-shadow: ${shadow64};
       color: ${colorNeutralForeground1};
       max-height: calc(-48px + 100vh);
@@ -88,4 +89,12 @@ export const styles = css`
       }
     }
   }
-`;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    @layer base {
+      dialog {
+        border: ${strokeWidthThin} solid ${colorTransparentStroke};
+      }
+    }
+  `),
+);