Work with high contrasced and forced colors

smith · smith · commit b563ba4beea2 · 2025-10-14T23:35:35.000-05:00
diff --git a/packages/eui/src/components/basic_table/basic_table.styles.ts b/packages/eui/src/components/basic_table/basic_table.styles.ts
@@ -8,7 +8,12 @@
 
 import { css, keyframes } from '@emotion/react';
 
-import { logicalCSS, euiCantAnimate } from '../../global_styling';
+import {
+  logicalCSS,
+  euiCantAnimate,
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 const tableLoadingLine = keyframes`
@@ -33,30 +38,40 @@ const tableLoadingLine = keyframes`
   }
 `;
 
-export const euiBasicTableBodyLoading = ({ euiTheme }: UseEuiTheme) => css`
-  position: relative;
-  overflow: hidden;
+export const euiBasicTableBodyLoading = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return css`
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      position: absolute;
+      content: '';
+      ${logicalCSS('width', '100%')}
+      ${logicalCSS('height', euiTheme.border.width.thick)}
+      background-color: ${euiTheme.colors.primary};
+      animation: ${tableLoadingLine} 1s linear infinite;
 
-  &::before {
-    position: absolute;
-    content: '';
-    ${logicalCSS('width', '100%')}
-    ${logicalCSS('height', euiTheme.border.width.thick)}
-    background-color: ${euiTheme.colors.primary};
-    animation: ${tableLoadingLine} 1s linear infinite;
+      ${euiCantAnimate} {
+        animation: none;
+        background: repeating-linear-gradient(
+          -45deg,
+          ${euiTheme.colors.backgroundBasePlain},
+          ${euiTheme.colors.backgroundBasePlain} ${euiTheme.size.xs},
+          ${euiTheme.colors.primary} ${euiTheme.size.xs},
+          ${euiTheme.colors.primary} ${euiTheme.size.s}
+        );
 
-    ${euiCantAnimate} {
-      animation: none;
-      background: repeating-linear-gradient(
-        -45deg,
-        transparent,
-        transparent ${euiTheme.size.xs},
-        ${euiTheme.colors.primary} ${euiTheme.size.xs},
-        ${euiTheme.colors.primary} ${euiTheme.size.s}
-      );
+        ${highContrastModeStyles(euiThemeContext, {
+          forced: `
+              ${preventForcedColors(euiThemeContext)}
+            `,
+        })}
+      }
     }
-  }
-`;
+  `;
+};
 
 // Fix to make the loading indicator position correctly in Safari
 // For whatever annoying reason, Safari doesn't respect `position: relative;`
