add icon sizes constants to theme

packages/react-ui/src/theme/sections/components/buttons.js

@@ -2,11 +2,11 @@ import { getSpacing } from '../../themeUtils';
 import { commonPalette } from '../palette';
 import { themeTypography } from '../typography';
 import { themeShadows } from '../shadows';
+import { ICON_SIZE, ICON_SIZE_M } from '../../themeConstants';
 
 const sizeSmall = getSpacing(3);
 const sizeMedium = getSpacing(4);
 const sizeLarge = getSpacing(6);
-const iconSize = getSpacing(2.25);
 const radius = getSpacing(0.5);
 
 export const buttonsOverrides = {
@@ -21,7 +21,7 @@ export const buttonsOverrides = {
       root: {
         '& .MuiSvgIcon-root': {
           display: 'flex',
-          fontSize: iconSize
+          fontSize: ICON_SIZE
         }
       }
     }
@@ -97,7 +97,7 @@ export const buttonsOverrides = {
         marginRight: getSpacing(0.75),
 
         '& .MuiSvgIcon-root': {
-          fontSize: iconSize
+          fontSize: ICON_SIZE
         },
         '&.MuiButton-iconSizeSmall': {
           marginRight: getSpacing(0.5),
@@ -108,7 +108,7 @@ export const buttonsOverrides = {
         marginLeft: getSpacing(0.75),
 
         '& .MuiSvgIcon-root': {
-          fontSize: iconSize
+          fontSize: ICON_SIZE
         },
         '&.MuiButton-iconSizeSmall': {
           marginLeft: getSpacing(0.5),
@@ -266,7 +266,7 @@ export const buttonsOverrides = {
           color: commonPalette.text.secondary
         }),
         '& .MuiSvgIcon-root': {
-          fontSize: iconSize
+          fontSize: ICON_SIZE
         },
         '&:hover, &:focus-visible': {
           ...(ownerState.color === 'default' && {
@@ -420,8 +420,8 @@ export const buttonsOverrides = {
         },
 
         '& .MuiSvgIcon-root': {
-          width: getSpacing(3),
-          height: getSpacing(3)
+          width: ICON_SIZE_M,
+          height: ICON_SIZE_M
         },
         '&.MuiFab-extended': {
           ...themeTypography.body1,
@@ -443,8 +443,8 @@ export const buttonsOverrides = {
         minHeight: getSpacing(4),
 
         '& .MuiSvgIcon-root': {
-          width: iconSize,
-          height: iconSize
+          width: ICON_SIZE,
+          height: ICON_SIZE
         },
         '&.MuiFab-extended': {
           ...themeTypography.caption,

packages/react-ui/src/theme/sections/components/dataDisplay.js

@@ -1,3 +1,4 @@
+import { ICON_SIZE, ICON_SIZE_M } from '../../themeConstants';
 import { getSpacing } from '../../themeUtils';
 import { commonPalette } from '../palette';
 import { themeTypography } from '../typography';
@@ -70,7 +71,7 @@ export const dataDisplayOverrides = {
         marginLeft: getSpacing(0.75),
 
         '& .MuiSvgIcon-root': {
-          fontSize: getSpacing(3)
+          fontSize: ICON_SIZE_M
         }
       }
     }
@@ -83,7 +84,7 @@ export const dataDisplayOverrides = {
           width: getSpacing(4.5)
         },
         '& .MuiSvgIcon-root': {
-          fontSize: getSpacing(2.5)
+          fontSize: ICON_SIZE
         }
       }
     }

packages/react-ui/src/theme/sections/components/forms.js

@@ -1,3 +1,4 @@
+import { ICON_SIZE, ICON_SIZE_M } from '../../themeConstants';
 import { getSpacing } from '../../themeUtils';
 import { commonPalette } from '../palette';
 import { themeShadows } from '../shadows';
@@ -28,10 +29,10 @@ const checkboxRadioOverrides = {
     },
 
     '& .MuiSvgIcon-root': {
-      fontSize: getSpacing(3),
+      fontSize: ICON_SIZE_M,
 
       ...(ownerState.size === 'small' && {
-        fontSize: getSpacing(2.25)
+        fontSize: ICON_SIZE
       })
     }
   })
@@ -52,13 +53,6 @@ export const formsOverrides = {
     }
   },
 
-  // Input Adornment
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: {}
-    }
-  },
-
   // Text Field
   MuiTextField: {
     defaultProps: {
@@ -68,15 +62,79 @@ export const formsOverrides = {
     },
     styleOverrides: {
       root: {
-        minWidth: '192px'
+        minWidth: '192px',
+
+        '& legend': {
+          display: 'none'
+        }
+      }
+    }
+  },
+
+  // Input Base
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        height: getSpacing(6),
+        padding: getSpacing(0, 2),
+        ...themeTypography.body1,
+
+        '& input': {
+          padding: 0
+        },
+        '& .MuiOutlinedInput-notchedOutline': {
+          top: 0
+        },
+
+        // Variants
+        '&.MuiFilledInput-root': {
+          borderRadius: getSpacing(0.5),
+
+          '&:before, &:after': {
+            content: 'none'
+          }
+        },
+        '&.MuiInput-underline': {
+          marginTop: 0,
+          padding: 0
+        }
+      },
+
+      // size
+      sizeSmall: {
+        '& input': {
+          ...themeTypography.body2
+        }
+      }
+    }
+  },
+
+  // Input Adornment
+  MuiInputAdornment: {
+    styleOverrides: {
+      root: {
+        '& .MuiTypography-root': {
+          ...themeTypography.body1
+        },
+        '&.MuiInputAdornment-sizeSmall': {
+          '& .MuiTypography-root': {
+            ...themeTypography.body2
+          }
+        },
+        '& .MuiSvgIcon-root': {
+          fontSize: ICON_SIZE
+        }
       }
     }
   },
 
   // Form Helper Text
   MuiFormHelperText: {
     styleOverrides: {
-      root: {}
+      root: {
+        margin: 0,
+        marginTop: getSpacing(1)
+      }
     }
   },
 
@@ -90,7 +148,13 @@ export const formsOverrides = {
   // Label
   MuiInputLabel: {
     styleOverrides: {
-      root: {}
+      root: {
+        position: 'static',
+        transform: 'none',
+        marginBottom: getSpacing(1),
+        ...themeTypography.caption,
+        fontWeight: 500
+      }
     }
   },
 

packages/react-ui/src/theme/sections/components/navigation.js

@@ -1,3 +1,4 @@
+import { ICON_SIZE } from '../../themeConstants';
 import { getSpacing } from '../../themeUtils';
 import { commonPalette } from '../palette';
 import { themeTypography } from '../typography';
@@ -87,7 +88,7 @@ export const navigationOverrides = {
           alignItems: 'center'
         },
         '& .MuiSvgIcon-root': {
-          fontSize: `${themeTypography.body2.lineHeight}em`,
+          fontSize: ICON_SIZE,
           marginRight: getSpacing(1)
         }
       },

packages/react-ui/src/theme/themeConstants.js

@@ -1,3 +1,5 @@
+import { getSpacing } from './themeUtils';
+
 // Common
 export const SPACING = 8;
 
@@ -9,3 +11,7 @@ export const BREAKPOINTS = {
   LG: 1280,
   XL: 1600
 };
+
+// Icons
+export const ICON_SIZE = getSpacing(2.25);
+export const ICON_SIZE_M = getSpacing(3);