santipalenque · Oct 7, 2026 · Oct 7, 2026 · Oct 7, 2026 · Oct 7, 2026 · Oct 7, 2026
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "openstack-uicore-foundation",
-    "version": "5.0.68",
+    "version": "5.0.69-beta.1",
     "description": "ui reactjs components for openstack marketing site",
     "main": "lib/openstack-uicore-foundation.js",
     "scripts": {

diff --git a/src/components/inputs/upload-input-v3/index.js b/src/components/inputs/upload-input-v3/index.js
@@ -429,7 +429,7 @@ const UploadInputV3 = ({
                   />
                 ) : (
                   <Box sx={{ color: 'primary.main', display: 'flex', alignItems: 'center' }}>
-                    <UploadFileIcon fontSize="medium" />
+                    <UploadFileIcon />
                   </Box>
                 )}
               </Box>
@@ -479,7 +479,7 @@ const UploadInputV3 = ({
               sx={fileRowSx}
             >
               <Box sx={{ color: 'error.main', display: 'flex', alignItems: 'center', mr: 2, minWidth: 32 }}>
-                <ErrorOutlineIcon fontSize="medium" />
+                <ErrorOutlineIcon />
               </Box>
 
               <Box sx={{ flex: 1, minWidth: 0 }}>
@@ -501,14 +501,14 @@ const UploadInputV3 = ({
                 title={T.translate("upload_input_v3.retry")}
                 sx={{ color: 'primary.main' }}
               >
-                <ReplayIcon fontSize="small" />
+                <ReplayIcon />
               </IconButton>
               <IconButton
                 size="small"
                 onClick={() => handleDismissError(file)}
                 sx={{ color: 'error.main' }}
               >
-                <CloseIcon fontSize="small" />
+                <CloseIcon />
               </IconButton>
             </Box>
           ))}

diff --git a/src/components/mui/AuthButton/index.js b/src/components/mui/AuthButton/index.js
@@ -40,8 +40,8 @@ const AuthButton = ({
   const anchorRef = useRef(null);
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const menuFontSize = theme?.custom?.menu?.fontSize || "1.4rem";
-  const menuLineHeight = theme?.custom?.menu?.lineHeight || "2rem";
+  const menuFontSize = theme?.custom?.menu?.fontSize || "0.875rem";
+  const menuLineHeight = theme?.custom?.menu?.lineHeight || "1.25rem";
   const menuIconColor = theme?.custom?.menu?.icon || theme.palette.text.secondary;
 
   const openMenu = () => {

diff --git a/src/components/mui/BulkEditTable/components/Row.js b/src/components/mui/BulkEditTable/components/Row.js
@@ -121,7 +121,7 @@ const Row = (props) => {
                 sx={{ padding: 0 }}
                 aria-label={`Edit row ${row[idKey]}`}
               >
-                <EditIcon fontSize="large" />
+                <EditIcon />
               </IconButton>
             )}
             {onDelete && (
@@ -131,7 +131,7 @@ const Row = (props) => {
                 sx={{ padding: 0 }}
                 aria-label={`Delete row ${row[idKey]}`}
               >
-                <DeleteIcon fontSize="large" />
+                <DeleteIcon />
               </IconButton>
             )}
           </Box>

diff --git a/src/components/mui/CustomDialog/index.js b/src/components/mui/CustomDialog/index.js
@@ -91,7 +91,7 @@ const CustomDialog = ({
           color: theme.palette.grey[500]
         })}
       >
-        <CloseIcon fontSize="large" />
+        <CloseIcon />
       </IconButton>
       <Divider />
       <DialogContent>{children}</DialogContent>

diff --git a/src/components/mui/FormItemTable/index.js b/src/components/mui/FormItemTable/index.js
@@ -308,7 +308,7 @@ const FormItemTable = ({
                         aria-label="Toggle row details"
                         onClick={() => toggleRow(row.form_item_id)}
                       >
-                        <InfoOutlinedIcon color={getDetailsIconColor(row)} />
+                        <InfoOutlinedIcon fontSize="small" color={getDetailsIconColor(row)} />
                       </IconButton>
                     ) : (
                       <Typography variant="body2" noWrap sx={{ color: "error.main" }}>

diff --git a/src/components/mui/GridFilter/components/Filter.jsx b/src/components/mui/GridFilter/components/Filter.jsx
@@ -123,7 +123,7 @@ const Filter = ({ id, value, criterias, onChange, onAdd, onDelete }) => {
             onClick={() => onDelete(value)}
             size="large"
           >
-            <DeleteIcon fontSize="large" />
+            <DeleteIcon />
           </IconButton>
         ) : (
           <RoundButton
@@ -133,7 +133,7 @@ const Filter = ({ id, value, criterias, onChange, onAdd, onDelete }) => {
             disabled={isAddDisabled}
             sx={{ ml: "4px" }}
           >
-            <AddIcon fontSize="large" />
+            <AddIcon />
           </RoundButton>
         )}
       </Grid2>

diff --git a/src/components/mui/GridFilter/components/FilterButton.jsx b/src/components/mui/GridFilter/components/FilterButton.jsx
@@ -21,7 +21,7 @@ const FilterButton = ({ filterCount, onClick, onDelete, iconSx }) => {
   if (filterCount > 0) {
     return (
       <Chip
-        icon={<FilterListIcon fontSize="large" />}
+        icon={<FilterListIcon />}
         label={`${filterCount} ${T.translate("grid_filter.filters")}`}
         onClick={onClick}
         onDelete={onDelete}
@@ -46,7 +46,7 @@ const FilterButton = ({ filterCount, onClick, onDelete, iconSx }) => {
       onClick={onClick}
       sx={{ mr: 1, top: 0, position: "relative", padding: 0, ...iconSx }}
     >
-      <FilterListIcon fontSize="large" />
+      <FilterListIcon />
     </IconButton>
   );
 };

diff --git a/src/components/mui/InfoNote/index.jsx b/src/components/mui/InfoNote/index.jsx
@@ -6,7 +6,8 @@ import Box from "@mui/material/Box";
 const InfoNote = ({ message, sx }) => (
   <Box display="flex" alignItems="flex-start" gap={1} sx={sx}>
     <InfoOutlinedIcon
-      sx={{ fontSize: 16, color: "text.secondary", mt: "2px" }}
+      fontSize="small"
+      sx={{ color: "text.secondary", mt: "2px" }}
     />
     <Typography variant="body1" color="text.secondary" sx={{fontSize: "13px"}}>
       {message}

diff --git a/src/components/mui/MuiBaseCustomTheme.js b/src/components/mui/MuiBaseCustomTheme.js
@@ -14,6 +14,10 @@
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 
 export const MuiBaseCustomTheme = {
+  // must match the apps' html font-size so MUI's rem values render at their designed px
+  typography: {
+    htmlFontSize: 16
+  },
   components: {
     MuiOutlinedInput: {
       styleOverrides: {
@@ -50,5 +54,15 @@ export const MuiBaseCustomTheme = {
         tooltip: { fontSize: "1em", fontWeight: "400" }
       }
     },
+    // icon scale with medium at 22px, keeping MUI's small/large proportions (18 / 22 / 32px)
+    MuiSvgIcon: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          ...(ownerState.fontSize === "small" && { fontSize: "1.125rem" }),
+          ...(ownerState.fontSize === "medium" && { fontSize: "1.375rem" }),
+          ...(ownerState.fontSize === "large" && { fontSize: "2rem" })
+        })
+      }
+    },
   }
 };
diff --git a/src/components/mui/SponsorOrderGrid/index.js b/src/components/mui/SponsorOrderGrid/index.js
@@ -253,7 +253,7 @@ const SponsorOrderGrid = ({
                         >
                           <Tooltip title={T.translate("sponsor_order_grid.change_quantity_tooltip")}>
                             <IconButton size="large" onClick={() => setChangeQuantityRow(row)}>
-                              <RuleIcon fontSize="large" />
+                              <RuleIcon />
                             </IconButton>
                           </Tooltip>
                         </TableCell>

diff --git a/src/components/mui/formik-inputs/mui-formik-datepicker.js b/src/components/mui/formik-inputs/mui-formik-datepicker.js
@@ -37,14 +37,13 @@ const MuiFormikDatepicker = ({
         slotProps={{
           day: {
             sx: {
-              fontSize: "1.2rem",
               fontWeight: 600
             }
           },
           layout: {
             sx: {
               "& .MuiDayCalendar-weekDayLabel": {
-                fontSize: "1rem"
+                fontSize: "0.625rem"
               }
             }
           },

diff --git a/src/components/mui/formik-inputs/mui-formik-select.js b/src/components/mui/formik-inputs/mui-formik-select.js
@@ -68,7 +68,7 @@ const MuiFormikSelect = ({
           isClearable && field.value ? (
             <InputAdornment position="end" sx={{ mr: 2 }}>
               <IconButton size="small" onClick={handleClear}>
-                <ClearIcon fontSize="small" />
+                <ClearIcon />
               </IconButton>
             </InputAdornment>
           ) : null

diff --git a/src/components/mui/formik-inputs/mui-formik-textfield.js b/src/components/mui/formik-inputs/mui-formik-textfield.js
@@ -51,7 +51,7 @@ const MuiFormikTextField = ({
         {...props}
       />
       {maxLength && (
-        <Typography sx={{ fontSize: "1.2rem", color: "#00000099", pl: 2 }}>
+        <Typography sx={{ fontSize: "0.75rem", color: "#00000099", pl: 2 }}>
           {`${maxLength - currentLength} characters left`}
         </Typography>
       )}

diff --git a/src/components/mui/tables/components/row-actions-menu.js b/src/components/mui/tables/components/row-actions-menu.js
@@ -30,7 +30,7 @@ const RowActionsMenu = ({ actions }) => {
         onClick={(e) => setAnchorEl(e.currentTarget)}
         data-testid="row-actions-menu-trigger"
       >
-        <MoreVertIcon fontSize="large" />
+        <MoreVertIcon />
       </IconButton>
       <Menu
         anchorEl={anchorEl}

diff --git a/src/components/mui/tables/components/table-cell-content.js b/src/components/mui/tables/components/table-cell-content.js
@@ -16,9 +16,9 @@ const TableCellContent = ({ row, col }) => {
         col.render(row)
       ) : isBoolean(row[col.columnKey]) ? (
         row[col.columnKey] ? (
-          <CheckIcon fontSize="large" />
+          <CheckIcon />
         ) : (
-          <CloseIcon fontSize="large" />
+          <CloseIcon />
         )
       ) : col.truncateText ? (
         <TruncateText charLimit={col.truncateText}>

diff --git a/src/components/mui/tables/editable-table/index.js b/src/components/mui/tables/editable-table/index.js
@@ -123,7 +123,6 @@ const EditableCell = ({ value, isEditing, onBlur, validation }) => {
       <span style={{ flex: 1, fontWeight: "normal" }}>{value}</span>
       {isHovering && (
         <EditIcon
-          fontSize="small"
           sx={{
             opacity: 0.5,
             position: "absolute",
@@ -320,9 +319,9 @@ const MuiTableEditable = ({
                     size="small"
                     onClick={() => onArchive(row)}
                     sx={{
-                      fontSize: "1.3rem",
+                      fontSize: "0.875rem",
                       fontWeight: "normal",
-                      lineHeight: "2.2rem",
+                      lineHeight: "1.375rem",
                       padding: "4px 5px",
                       color: "rgba(0,0,0,0.56)"
                     }}

diff --git a/src/components/mui/tables/mui-table/index.js b/src/components/mui/tables/mui-table/index.js
@@ -219,7 +219,7 @@ const MuiTable = ({
                         data-testid="action-edit"
                         disabled={options.disableProp && row[options.disableProp]}
                       >
-                        <EditIcon fontSize="large" />
+                        <EditIcon />
                       </IconButton>
                     </span>
                   </Tooltip>
@@ -255,9 +255,9 @@ const MuiTable = ({
                         }
                       >
                         {row.is_archived ? (
-                          <UnarchiveIcon fontSize="large" />
+                          <UnarchiveIcon />
                         ) : (
-                          <ArchiveIcon fontSize="large" />
+                          <ArchiveIcon />
                         )}
                       </IconButton>
                     </span>
@@ -284,7 +284,7 @@ const MuiTable = ({
                           sx={{ padding: 0 }}
                           disabled={options.disableProp && row[options.disableProp]}
                         >
-                          <DeleteIcon fontSize="large" />
+                          <DeleteIcon />
                         </IconButton>
                       </span>
                     </Tooltip>

diff --git a/src/components/mui/tables/sortable-table-v2/mui-table-sortable-v2.js b/src/components/mui/tables/sortable-table-v2/mui-table-sortable-v2.js
@@ -218,7 +218,7 @@ const MuiTableSortableV2 = ({
                                 onClick={() => onEdit(row)}
                                 sx={{ padding: 0 }}
                               >
-                                <EditIcon fontSize="large" />
+                                <EditIcon />
                               </IconButton>
                             </TableCell>
                           )}
@@ -234,7 +234,7 @@ const MuiTableSortableV2 = ({
                                 onClick={() => handleDelete(row)}
                                 sx={{ padding: 0 }}
                               >
-                                <DeleteIcon fontSize="large" />
+                                <DeleteIcon />
                               </IconButton>
                             </TableCell>
                           )}
@@ -246,7 +246,7 @@ const MuiTableSortableV2 = ({
                               className={styles.dottedBorderLeft}
                             >
                               <IconButton size="large" {...dragHandleProps}>
-                                <UnfoldMoreIcon fontSize="large" />
+                                <UnfoldMoreIcon />
                               </IconButton>
                             </TableCell>
                           )}

diff --git a/src/components/mui/tables/sortable-table/index.js b/src/components/mui/tables/sortable-table/index.js
@@ -188,7 +188,7 @@ const MuiTableSortable = ({
                               onClick={() => onEdit(row)}
                               sx={{ padding: 0 }}
                             >
-                              <EditIcon fontSize="large" />
+                              <EditIcon />
                             </IconButton>
                           </TableCell>
                         )}
@@ -204,7 +204,7 @@ const MuiTableSortable = ({
                               onClick={() => handleDelete(row)}
                               sx={{ padding: 0 }}
                             >
-                              <DeleteIcon fontSize="large" />
+                              <DeleteIcon />
                             </IconButton>
                           </TableCell>
                         )}
@@ -217,7 +217,7 @@ const MuiTableSortable = ({
                             {...provided.dragHandleProps}
                           >
                             <IconButton size="large">
-                              <UnfoldMoreIcon fontSize="large" />
+                              <UnfoldMoreIcon />
                             </IconButton>
                           </TableCell>
                         )}

diff --git a/src/components/mui/truncate-text.js b/src/components/mui/truncate-text.js
@@ -13,7 +13,7 @@ const TruncateText = ({ children, charLimit }) => {
   const tooltipTitle = isTruncated ? children : isOverflowing ? children : "";
 
   return (
-    <Tooltip title={tooltipTitle} placement="top" componentsProps={{ tooltip: { sx: { fontSize: "1.2rem" } } }}>
+    <Tooltip title={tooltipTitle} placement="top" componentsProps={{ tooltip: { sx: { fontSize: "0.75rem" } } }}>
       <span
         ref={ref}
         onMouseEnter={() => {

diff --git a/src/components/table-sortable/SortableTableRow.js b/src/components/table-sortable/SortableTableRow.js
@@ -7,8 +7,8 @@ const SortableTableRow = ({ text, even, id, index, moveCard, dropItem, children,
 
     const style = {
         border: '1px dashed gray',
-        padding: '0.5rem 1rem',
-        marginBottom: '.5rem',
+        padding: '0.25rem 0.625rem',
+        marginBottom: '0.25rem',
         backgroundColor: 'white',
         cursor: 'move',
     };