refactor(styling): introduce PaletteContext and unify inline styles

- Add theme/ResistanceTable/palette.js with PaletteProvider/usePalette
- Remove palette prop drilling; components consume palette via context
- Apply inline styles consistently: headers, rows, cells, legend, tooltip, source switcher
- Keep all critical colors inline to avoid dark-mode prod issues

This simplifies styling, removes duplication, and keeps behavior consistent in production.

Author: Uli-Z

dist/theme/ResistanceTable/components/Legend.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import { usePalette } from '../palette';
 
 // Mock types
 // Helper function to remove type annotations for JS conversion
 const identity = (props) => props;
 
-export const Legend = ({ cols, displayMode, styles, palette }) => {
+export const Legend = ({ cols, displayMode, styles }) => {
+  const palette = usePalette();
   if (displayMode === 'full') return null;
 
   return (

dist/theme/ResistanceTable/components/TableBody.jsx

@@ -15,7 +15,6 @@ export const TableBody = ({
   styles,
   colorMode,
   sourceId2ShortName,
-  palette,
   t,
 }) => {
   return (
@@ -36,7 +35,6 @@ export const TableBody = ({
           onHideTooltip={onHideTooltip}
           styles={styles}
           colorMode={colorMode}
-          palette={palette}
           sourceId2ShortName={sourceId2ShortName}
           t={t}
         />

dist/theme/ResistanceTable/components/TableCell.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CellTooltipContent } from '../ui/components';
 import { cellStyle, hl } from '../utils';
+import { usePalette } from '../palette';
 
 export const TableCell = React.memo(
   ({
@@ -16,11 +17,11 @@ export const TableCell = React.memo(
     onShowTooltip,
     onHideTooltip,
     styles,
-    palette,
     colorMode,
     sourceId2ShortName,
     t,
   }) => {
+    const palette = usePalette();
     const cell = row[col.name];
     const highlight = hoveredRow === rowIndex || hoveredCol === colIndex;
 

dist/theme/ResistanceTable/components/TableHeader.jsx

@@ -10,7 +10,6 @@ export const TableHeader = ({
   onShowTooltip,
   onHideTooltip,
   styles,
-  palette,
 }) => {
   const abxCol = { whiteSpace: 'nowrap', width: '1%' };
 
@@ -30,7 +29,6 @@ export const TableHeader = ({
             onShowTooltip={onShowTooltip}
             onHideTooltip={onHideTooltip}
             styles={styles}
-            palette={palette}
           />
         ))}
       </tr>

dist/theme/ResistanceTable/components/TableHeaderCell.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { hl } from '../utils';
+import { usePalette } from '../palette';
 
 export const TableHeaderCell = React.memo(
   ({
@@ -12,8 +13,8 @@ export const TableHeaderCell = React.memo(
     onShowTooltip,
     onHideTooltip,
     styles,
-    palette,
   }) => {
+    const palette = usePalette();
     const highlight = hoveredCol === colIndex;
 
     const handleMouseEnter = (event) => {

dist/theme/ResistanceTable/components/TableRow.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TableCell } from './TableCell';
 import { hl } from '../utils';
+import { usePalette } from '../palette';
 
 export const TableRow = React.memo(
   ({
@@ -16,11 +17,11 @@ export const TableRow = React.memo(
     onShowTooltip,
     onHideTooltip,
     styles,
-    palette,
     colorMode,
     sourceId2ShortName,
     t,
   }) => {
+    const palette = usePalette();
     const highlight = hoveredRow === rowIndex;
     const abxCol = { whiteSpace: 'nowrap', width: '1%' };
 
@@ -71,7 +72,6 @@ export const TableRow = React.memo(
             onShowTooltip={onShowTooltip}
             onHideTooltip={onHideTooltip}
             styles={styles}
-            palette={palette}
             colorMode={colorMode}
             sourceId2ShortName={sourceId2ShortName}
             t={t}

dist/theme/ResistanceTable/index.jsx

@@ -13,6 +13,7 @@ import { SourceSwitcher } from './ui/components';
 import { TableHeader, TableBody, Legend } from './components';
 import styles from './styles.module.css';
 import { groupAndSortAntibiotics, buildMatrix, formatMatrix } from './utils';
+import { PaletteProvider } from './palette';
 import { getTranslator } from './i18n';
 
 const useIsomorphicLayoutEffect =
@@ -108,6 +109,9 @@ export default function ResistanceTable(props) {
 
   const { colorMode } = useColorMode();
 
+  // We will use PaletteProvider to supply inline color values to subcomponents.
+  // For inline styles within this component, we derive the same palette through the provider.
+  // To keep it simple here, we compute a local palette identical to the provider's value.
   const palette = useMemo(() => {
     if (colorMode === 'dark') {
       return {
@@ -122,6 +126,7 @@ export default function ResistanceTable(props) {
         tooltipBg: 'rgba(200, 200, 200, 0.9)',
         tooltipText: '#000',
         overlay: 'rgba(30, 30, 30, 0.7)',
+        primary: 'var(--ifm-color-primary, #7aa2f7)'
       };
     }
     return {
@@ -136,6 +141,7 @@ export default function ResistanceTable(props) {
       tooltipBg: 'rgba(60, 60, 60, 0.9)',
       tooltipText: '#fff',
       overlay: 'rgba(255, 255, 255, 0.7)',
+      primary: 'var(--ifm-color-primary, #3578e5)'
     };
   }, [colorMode]);
 
@@ -466,10 +472,10 @@ export default function ResistanceTable(props) {
           </div>
         )}
         <table ref={tableRef} className={styles.resistanceTable} style={{ borderCollapse: 'separate', borderSpacing: 0, color: palette.text }}>
-          <TableHeader {...{ cols, displayMode: display, hoveredCol: hover.col, onSetHover: handleSetHover, onClearHover: handleClearHover, onShowTooltip: showTooltip, onHideTooltip: hideTooltip, styles, palette }} />
-          <TableBody {...{ data, cols, displayMode: display, rowsAreAbx, hoveredRow: hover.row, hoveredCol: hover.col, onSetHover: handleSetHover, onClearHover: handleClearHover, onShowTooltip: showTooltip, onHideTooltip: hideTooltip, styles, colorMode, sourceId2ShortName, palette, t }} />
+          <TableHeader {...{ cols, displayMode: display, hoveredCol: hover.col, onSetHover: handleSetHover, onClearHover: handleClearHover, onShowTooltip: showTooltip, onHideTooltip: hideTooltip, styles }} />
+          <TableBody {...{ data, cols, displayMode: display, rowsAreAbx, hoveredRow: hover.row, hoveredCol: hover.col, onSetHover: handleSetHover, onClearHover: handleClearHover, onShowTooltip: showTooltip, onHideTooltip: hideTooltip, styles, colorMode, sourceId2ShortName, t }} />
         </table>
-        <Legend {...{ cols, displayMode: display, styles, palette }} />
+        <Legend {...{ cols, displayMode: display, styles }} />
         <div className={styles.sourceInfo} style={{ backgroundColor: palette.sourceInfoBg, borderTop: `1px solid ${palette.border}`, color: palette.sourceInfoText }}>
           {renderHiddenInfo()}
           {sourceChain.length > 0 && (
@@ -500,33 +506,35 @@ export default function ResistanceTable(props) {
   if (!pluginGlobalData) return <div className={styles.error}>{t('error')}: {t('pluginError')}</div>;
 
   return (
-    <RadixTooltip.Provider>
-      <div ref={containerRef} style={{ minHeight: '150px' }}>
-        <div className={styles.rootContainer}>
-          {hierarchicalSources.length > 0 && (
-            <SourceSwitcher {...{ sources: hierarchicalSources, selected: selectedSource, onSelect: setSelectedSource, styles, locale, palette }} />
-          )}
-          <div className={styles.tableContainer}>
-            {renderContent()}
+    <PaletteProvider colorMode={colorMode}>
+      <RadixTooltip.Provider>
+        <div ref={containerRef} style={{ minHeight: '150px' }}>
+          <div className={styles.rootContainer}>
+            {hierarchicalSources.length > 0 && (
+              <SourceSwitcher {...{ sources: hierarchicalSources, selected: selectedSource, onSelect: setSelectedSource, styles, locale }} />
+            )}
+            <div className={styles.tableContainer}>
+              {renderContent()}
+            </div>
           </div>
         </div>
-      </div>
 
-      <RadixTooltip.Root open={tooltipOpen} onOpenChange={setTooltipOpen}>
-        <RadixTooltip.Trigger asChild><VirtualTrigger ref={virtualTriggerRef} /></RadixTooltip.Trigger>
-        <RadixTooltip.Portal>
-          <RadixTooltip.Content
-            side="top"
-            align="center"
-            sideOffset={5}
-            className={styles.tooltipContent}
-            style={{ backgroundColor: palette.tooltipBg, color: palette.tooltipText }}
-          >
-            {tooltipContent}
-            <RadixTooltip.Arrow width={8} height={4} className={styles.tooltipArrow} style={{ fill: palette.tooltipBg }} />
-          </RadixTooltip.Content>
-        </RadixTooltip.Portal>
-      </RadixTooltip.Root>
-    </RadixTooltip.Provider>
+        <RadixTooltip.Root open={tooltipOpen} onOpenChange={setTooltipOpen}>
+          <RadixTooltip.Trigger asChild><VirtualTrigger ref={virtualTriggerRef} /></RadixTooltip.Trigger>
+          <RadixTooltip.Portal>
+            <RadixTooltip.Content
+              side="top"
+              align="center"
+              sideOffset={5}
+              className={styles.tooltipContent}
+              style={{ backgroundColor: palette.tooltipBg, color: palette.tooltipText }}
+            >
+              {tooltipContent}
+              <RadixTooltip.Arrow width={8} height={4} className={styles.tooltipArrow} style={{ fill: palette.tooltipBg }} />
+            </RadixTooltip.Content>
+          </RadixTooltip.Portal>
+        </RadixTooltip.Root>
+      </RadixTooltip.Provider>
+    </PaletteProvider>
   );
 }

dist/theme/ResistanceTable/palette.js

@@ -0,0 +1,44 @@
+import React, {createContext, useContext, useMemo} from 'react';
+
+export const createPalette = (colorMode) => {
+  if (colorMode === 'dark') {
+    return {
+      border: '#444',
+      background: '#1e1e1e',
+      text: '#eee',
+      subtleBg: '#252525',
+      subtleBgHover: '#333',
+      sourceInfoBg: '#333',
+      sourceInfoText: '#bbb',
+      emptyCellBg: '#2a2a2a',
+      tooltipBg: 'rgba(200, 200, 200, 0.9)',
+      tooltipText: '#000',
+      overlay: 'rgba(30, 30, 30, 0.7)',
+      primary: 'var(--ifm-color-primary, #7aa2f7)'
+    };
+  }
+  return {
+    border: '#ddd',
+    background: '#fff',
+    text: '#333',
+    subtleBg: '#f9f9f9',
+    subtleBgHover: '#f0f0f0',
+    sourceInfoBg: '#f0f0f0',
+    sourceInfoText: '#666',
+    emptyCellBg: '#f2f2f2',
+    tooltipBg: 'rgba(60, 60, 60, 0.9)',
+    tooltipText: '#fff',
+    overlay: 'rgba(255, 255, 255, 0.7)',
+    primary: 'var(--ifm-color-primary, #3578e5)'
+  };
+};
+
+const PaletteContext = createContext(createPalette('light'));
+
+export const PaletteProvider = ({colorMode, children}) => {
+  const value = useMemo(() => createPalette(colorMode), [colorMode]);
+  return <PaletteContext.Provider value={value}>{children}</PaletteContext.Provider>;
+};
+
+export const usePalette = () => useContext(PaletteContext);
+

dist/theme/ResistanceTable/ui/components.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { usePalette } from '../palette';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import clsx from 'clsx';
@@ -12,8 +13,8 @@ const SourceMenuItem = ({
   level = 0,
   isLast = false,
   locale,
-  palette,
 }) => {
+  const palette = usePalette();
   const hasChildren = source.children && source.children.length > 0;
   const isSelected = selected?.id === source.id;
   const [isHighlighted, setIsHighlighted] = useState(false);
@@ -73,8 +74,8 @@ export const SourceSwitcher = ({
   onSelect,
   styles,
   locale,
-  palette,
 }) => {
+  const palette = usePalette();
   if (!sources || sources.length === 0) return null;
 
   const selectedName = selected

src/theme/ResistanceTable/components/Legend.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import { usePalette } from '../palette';
 
 // Mock types
 // Helper function to remove type annotations for JS conversion
 const identity = (props) => props;
 
-export const Legend = ({ cols, displayMode, styles, palette }) => {
+export const Legend = ({ cols, displayMode, styles }) => {
+  const palette = usePalette();
   if (displayMode === 'full') return null;
 
   return (