docs: Motion tokens page supports windows high contrast (#33915)

Author: smhigley

packages/react-components/react-motion/stories/src/Tokens/Cards.styles.ts

@@ -57,6 +57,10 @@ export const useCardClasses = makeStyles({
     animationDuration: '2s',
     animationIterationCount: 'infinite',
     animationFillMode: 'forwards',
+
+    '@media (forced-colors: active)': {
+      backgroundColor: 'LinkText',
+    },
   },
 
   graph: {
@@ -67,6 +71,10 @@ export const useCardClasses = makeStyles({
       ".      graphT" / min-content 1fr
     `,
     gap: '6px',
+
+    '@media (forced-colors: active)': {
+      backgroundColor: 'Canvas',
+    },
   },
   graphP: {
     gridArea: 'graphP',
@@ -89,6 +97,15 @@ export const useCardClasses = makeStyles({
     height: 'var(--container-size)',
     width: 'var(--container-size)',
   },
+  path: {
+    fill: 'none',
+    stroke: tokens.colorNeutralStrokeAccessible,
+    strokeWidth: '2',
+
+    '@media (forced-colors: active)': {
+      stroke: 'CanvasText',
+    },
+  },
 
   duration: {
     placeSelf: 'center',
@@ -103,6 +120,10 @@ export const useCardClasses = makeStyles({
       to: { transform: 'rotate(180deg)' },
     },
     animationIterationCount: 'infinite',
+
+    '@media (forced-colors: active)': {
+      backgroundColor: 'CanvasText',
+    },
   },
 
   view: {

packages/react-components/react-motion/stories/src/Tokens/Cards.tsx

@@ -1,4 +1,4 @@
-import { Divider, tokens, Switch } from '@fluentui/react-components';
+import { Divider, Switch } from '@fluentui/react-components';
 import { curves, durations } from '@fluentui/react-motion';
 import * as React from 'react';
 
@@ -32,9 +32,7 @@ const MotionCurveCard: React.FC<{ animationEnabled: boolean; tokenName: string;
             d={`M 0 100 C ${easingPoints[0]} ${100 - easingPoints[1]}, ${easingPoints[2]} ${
               100 - easingPoints[3]
             }, 100 0`}
-            fill="none"
-            stroke={tokens.colorNeutralStrokeAccessible}
-            strokeWidth="2"
+            className={classes.path}
           />
         </svg>