fix(skeleton): ensure visibility in Windows High Contrast Mode (#19961)

Author: heloiselui

packages/styles/scss/components/skeleton-styles/_ai-skeleton-styles.scss

@@ -8,6 +8,7 @@
 @use '../../config' as *;
 @use '../../theme';
 @use '../../utilities/convert';
+@use '../../utilities/high-contrast-mode' as *;
 
 @keyframes ai-skeleton-animation {
   0% {
@@ -61,6 +62,22 @@
   .#{$prefix}--skeleton__icon--ai {
     border-radius: convert.to-rem(2px);
   }
+
+  //High Contrast Mode
+  //Ensure AI Skeleton is visible and animated in Windows HCM
+  @include high-contrast-mode {
+    .#{$prefix}--skeleton__text--ai,
+    .#{$prefix}--skeleton__placeholder--ai,
+    .#{$prefix}--skeleton__icon--ai {
+      background: CanvasText;
+    }
+
+    .#{$prefix}--skeleton__text--ai::before,
+    .#{$prefix}--skeleton__placeholder--ai::before,
+    .#{$prefix}--skeleton__icon--ai::before {
+      background: Canvas;
+    }
+  }
 }
 
 // rgba($ai-skeleton-element-background, 1)

packages/styles/scss/utilities/_skeleton.scss

@@ -8,6 +8,7 @@
 @use 'keyframes';
 @use '../theme' as *;
 @use '../config' as *;
+@use '../utilities/high-contrast-mode' as *;
 
 /// Skeleton loading animation
 /// @access public
@@ -43,6 +44,16 @@
       animation: none;
     }
   }
+
+  // High Contrast Mode support
+  @include high-contrast-mode {
+    background: CanvasText;
+
+    &::before {
+      background: Canvas;
+      forced-color-adjust: none;
+    }
+  }
 }
 
 /// Circular Skeleton loading animation
@@ -68,4 +79,15 @@
       animation: none;
     }
   }
+
+  //High Contrast Mode
+  //Ensure Skeleton is visible and animated in Windows HCM
+  @include high-contrast-mode {
+    background: CanvasText;
+
+    &::before {
+      background: Canvas;
+      forced-color-adjust: none;
+    }
+  }
 }