Add table tokens

frontend/src/app/Header.tsx

@@ -8,7 +8,6 @@ import {
   MastheadMain,
   MastheadToggle,
   PageToggleButton,
-  Switch,
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
 import { Link } from 'react-router-dom';

frontend/src/app/HeaderTools.tsx

@@ -43,7 +43,7 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
 
   React.useEffect(() => {
     window.isSwitched = !isChecked;
-  }, [window.isSwitched]);
+  }, [isChecked]);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(!checked);
@@ -147,13 +147,13 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
     <Toolbar isFullHeight>
       <ToolbarContent>
         <ToolbarItem>
-        <Switch
-          id="simple-switch"
-          label="Toggle MUI Theme"
-          isChecked={!isChecked}
-          onChange={handleChange}
-          ouiaId="BasicSwitch"
-        />
+          <Switch
+            id="simple-switch"
+            label="Toggle MUI Theme"
+            isChecked={!isChecked}
+            onChange={handleChange}
+            ouiaId="BasicSwitch"
+          />
         </ToolbarItem>
         <ToolbarGroup variant="action-group-plain" align={{ default: 'alignEnd' }}>
           {!dashboardConfig.spec.dashboardConfig.disableAppLauncher ? (

frontend/src/components/DashboardDescriptionListGroup.tsx

@@ -97,7 +97,9 @@ const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps
       ) : (
         <DescriptionListTerm>{title}</DescriptionListTerm>
       )}
-      <DescriptionListDescription className={isEmpty && !isEditing ? text.textColorDisabledOnMd : ''}>
+      <DescriptionListDescription
+        className={isEmpty && !isEditing ? text.textColorDisabledOnMd : ''}
+      >
         {isEditing ? contentWhenEditing : isEmpty ? contentWhenEmpty : children}
       </DescriptionListDescription>
     </DescriptionListGroup>

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DrawerPanelBody, Tab, TabContent, Tabs } from '@patternfly/react-core';
 import SelectedNodeDetailsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeDetailsTab';
 import SelectedNodeInputOutputTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab';
-import LogsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab';
 import './PipelineRunDrawer.scss';
 import { PipelineTask } from '~/concepts/pipelines/topology';
 import { Execution } from '~/third_party/mlmd';
@@ -53,7 +52,7 @@ const PipelineRunDrawerRightTabs: React.FC<PipelineRunDrawerRightTabsProps> = ({
       title: 'Logs',
       isDisabled: !task.status?.podName,
       // content: <LogsTab task={task} />,
-      content: <></>
+      content: <></>,
     },
   };
 

frontend/src/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { sdkStore, store } from './redux/store/store';
 import App from './app/App';
 import SDKInitialize from './SDKInitialize';
 import { BrowserStorageContextProvider } from './components/browserStorage/BrowserStorageContext';
 import ErrorBoundary from './components/error/ErrorBoundary';
 import { ReduxContext } from './redux/context';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 /**
 /**

frontend/src/pages/home/Home.tsx

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-  Bullseye,
-  EmptyState,
-  Page,
-  PageSection,
-  PageSectionVariants,
-} from '@patternfly/react-core';
+import { Bullseye, EmptyState, PageSection, PageSectionVariants } from '@patternfly/react-core';
 import { HomeIcon } from '@patternfly/react-icons';
 import { ODH_PRODUCT_NAME } from '~/utilities/const';
 import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';

frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss

@@ -48,19 +48,37 @@
   --mui-menu-toggle--PaddingInlineStart: 10px;
   --mui-menu-toggle--PaddingInlineEnd: 10px;
 
-    // Tabs
-    --mui-tabs__link--hover--BackgroundColor: transparent;
-    --mui-tabs__item--PaddingBlockStart: 0;
-    --mui-tabs__item--PaddingBlockEnd: 0;
-    --mui-tabs__item--PaddingInlineStart: 0;
-    --mui-tabs__item--PaddingInlineEnd: 0;
-    --mui-tabs__link--PaddingBlockStart: 12px;
-    --mui-tabs__link--PaddingBlockEnd: 12px;
-    --mui-tabs__link--PaddingInlineStart: 16px;
-    --mui-tabs__link--PaddingInlineEnd: 16px;
-    --mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
-    --mui-tabs__item--m-current__link--after--BorderWidth: 2px;
-    --mui-tabs__link--FontSize: 0.875rem;
+  // Table
+  --mui-table__button--BackgroundColor: none;
+  --mui-table__button--hover--BackgroundColor: none;
+  --mui-table__button--Color: var(--pf-v6-c-table--cell--Color);
+  --mui-table__button--PaddingBlockStart: 0;
+  --mui-table__button--PaddingBlockEnd: 0;
+  --mui-table__button--PaddingInlineStart: 0;
+  --mui-table__button--PaddingInlineEnd: 0;
+  --mui-table--cell--PaddingInlineStart: 16px;
+  --mui-table--cell--PaddingInlineEnd: 16px;
+  --mui-table--cell--PaddingBlockStart: 16px;
+  --mui-table--cell--PaddingBlockEnd: 16px;
+  --mui-table--cell--first-last-child--PaddingInline: 0px;
+  --mui-table__thead--cell--FontSize: 14px;
+  --mui-table__sort-indicator--MarginInlineStart: 4px;
+
+  letter-spacing: 0.01071em;
+
+  // Tabs
+  --mui-tabs__link--hover--BackgroundColor: transparent;
+  --mui-tabs__item--PaddingBlockStart: 0;
+  --mui-tabs__item--PaddingBlockEnd: 0;
+  --mui-tabs__item--PaddingInlineStart: 0;
+  --mui-tabs__item--PaddingInlineEnd: 0;
+  --mui-tabs__link--PaddingBlockStart: 12px;
+  --mui-tabs__link--PaddingBlockEnd: 12px;
+  --mui-tabs__link--PaddingInlineStart: 16px;
+  --mui-tabs__link--PaddingInlineEnd: 16px;
+  --mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
+  --mui-tabs__item--m-current__link--after--BorderWidth: 2px;
+  --mui-tabs__link--FontSize: 0.875rem;
 
 
   --mui-text-transform: uppercase;
@@ -196,27 +214,25 @@
 }
 
 .mui-theme .pf-v6-c-table {
-  --pf-v6-c-table__sort--m-selected__button--Color: #000000de;
-  --pf-v6-c-table__button--BackgroundColor: none;
-  --pf-v6-c-table__button--hover--BackgroundColor: none;
-  --pf-v6-c-table__sort-indicator--Color: #666;
-  --pf-v6-c-table__sort__button--hover__sort-indicator--Color: #00000050;
-  --pf-v6-c-table__sort__button--hover__text--Color: #00000099;
-  --pf-v6-c-table--cell--Color: rgba(0, 0, 0, 0.87);
+  --pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary);
+  --pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary);
+  --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary);
+  --pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary);
+  --pf-v6-c-table--cell--Color: var(--mui-palette-text-primary);
   --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color);
-  --pf-v6-c-table__button--PaddingBlockStart: 0;
-  --pf-v6-c-table__button--PaddingBlockEnd: 0;
-  --pf-v6-c-table__button--PaddingInlineStart: 0;
-  --pf-v6-c-table__button--PaddingInlineEnd: 0;
-  --pf-v6-c-table--cell--PaddingInlineStart: 16px;
-  --pf-v6-c-table--cell--PaddingInlineEnd: 16px;
-  --pf-v6-c-table--cell--PaddingBlockStart: 16px;
-  --pf-v6-c-table--cell--PaddingBlockEnd: 16px;
-  --pf-v6-c-table--cell--first-last-child--PaddingInline: 0px;
-  --pf-v6-c-table__thead--cell--FontWeight: 500;
-  --pf-v6-c-table__thead--cell--FontSize: 14px;
-  --pf-v6-c-table__tr--BorderBlockEndColor: rgba(224, 224, 224, 1);
-  --pf-v6-c-table__sort-indicator--MarginInlineStart: 4px;
+  --pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart);
+  --pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd);
+  --pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart);
+  --pf-v6-c-table__button--PaddingInlineEnd: var(--mui-table__button--PaddingInlineEnd);
+  --pf-v6-c-table--cell--PaddingInlineStart: var(--mui-table--cell--PaddingInlineStart);
+  --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
+  --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
+  --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
+  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline);
+  --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight);
+  --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
+  --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
+  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart);
 
   letter-spacing: 0.01071em;
 }
@@ -228,7 +244,7 @@
 .mui-theme .pf-v6-c-table__sort-indicator {
   font-size: 18px;
   opacity: 0;
-  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform-origin: center center;
 }
 

frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx

@@ -15,8 +15,7 @@ import {
 import { asEnumMember } from '~/utilities/utils';
 import RegisteredModelTable from './RegisteredModelTable';
 import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar';
-import './MUI-theme.scss'
-import { createTheme } from "@mui/material/styles";
+import './MUI-theme.scss';
 
 type RegisteredModelListViewProps = {
   registeredModels: RegisteredModel[];
@@ -34,9 +33,6 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
 
   const searchTypes = React.useMemo(() => [SearchType.KEYWORD], []); // TODO Add owner once RHOAIENG-7566 is completed.
 
-  const theme = createTheme({ cssVariables: true });
-  console.log("what is theme vars", theme);
-  console.log("spacing", theme.spacing(2));
   if (unfilteredRegisteredModels.length === 0) {
     return (
       <EmptyModelRegistryState

frontend/src/pages/modelServing/screens/metrics/EnsureMetricsAvailable.tsx

@@ -41,7 +41,9 @@ const EnsureMetricsAvailable: React.FC<EnsureMetricsAvailableProps> = ({
   // for loaded first, you'll get an infinite spinner.
   if (error) {
     if (error.response?.status === 403) {
-      return <UnauthorizedError variant={PageSectionVariants.secondary} accessDomain={accessDomain} />;
+      return (
+        <UnauthorizedError variant={PageSectionVariants.secondary} accessDomain={accessDomain} />
+      );
     }
     return (
       <UnknownError