fix: match inputs with figma styles

src/components/index.js

@@ -124,6 +124,7 @@ export {default as MuiDropdown} from './mui/Dropdown'
 export {default as MuiRoundButton} from './mui/RoundButton'
 export {default as MuiToggleButtons} from './mui/ToggleButtons'
 export {GridFilter as MuiGridFilter, OPERATORS as FILTER_OPERATORS, JOIN_OPERATORS as FILTER_JOIN_OPERATORS, EMPTY_FILTER as FILTER_EMPTY_FILTER, useGridFilter, allFiltersReducer, saveFilters as saveGridFilters, SAVE_FILTERS } from './mui/GridFilter'
+export {MuiBaseCustomTheme} from './mui/MuiBaseCustomTheme'
 
 // these include 3rd party deps
 // export {default as ExtraQuestionsForm } from './extra-questions/index.js';

src/components/mui/MuiBaseCustomTheme.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+
+export const MuiBaseCustomTheme = {
+  components: {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          "--TextField-brandBorderColor": "#000",
+          "--TextField-brandBorderHoverColor": "#000",
+          "--TextField-brandBorderFocusedColor": "#000",
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: "var(--TextField-brandBorderColor)"
+          },
+          "&:hover:not(.Mui-disabled, .Mui-error) .MuiOutlinedInput-notchedOutline": {
+            borderColor: "var(--TextField-brandBorderHoverColor)"
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: "var(--TextField-brandBorderFocusedColor)"
+          }
+        }
+      }
+    },
+    MuiSelect: {
+      defaultProps: {
+        IconComponent: KeyboardArrowDownIcon
+      },
+      styleOverrides: {
+        icon: {
+          fontSize: "24px",
+          width: "24px",
+          height: "24px"
+        }
+      }
+    }
+  }
+};

src/components/mui/search-input.js

@@ -79,12 +79,15 @@ const SearchInput = ({ term, onSearch, placeholder = "Search...", debounced }) =
       onChange={(ev) => handleChange(ev.target.value)}
       onKeyDown={handleKeyDown}
       fullWidth
-      sx={{
+      sx={(theme) => ({
         "& .MuiOutlinedInput-root": {
           height: "36px",
-          paddingX: 1
-        },        
-      }}
+          paddingX: 1,
+          "--TextField-brandBorderColor": "rgba(0, 0, 0, 0.23)",
+          "--TextField-brandBorderHoverColor": "rgba(0, 0, 0, 0.23)",
+          "--TextField-brandBorderFocusedColor": theme.palette.primary.main
+        }
+      })}
     />
   );
 };

webpack.common.js

@@ -168,6 +168,7 @@ module.exports = {
         'utils/money': './src/utils/money.js',
         'utils/use-event-callback': './src/utils/use-event-callback.js',
         'utils/external-store': './src/utils/external-store.js',
+        'utils/theme': './src/components/mui/MuiBaseCustomTheme.js',
     },
     output: {
         path: path.resolve(__dirname, 'lib'),