Theme Overrides should use theme variables

[joebochill]

Describe the desired behavior

Theme styleOverrides should be built using the theme variable/function instead of hardcoding colors.

Describe the current behavior

The current styleOverrides in the theme use hardcoded colors (e.g., from ThemeColors or BLUIColors variables):

This causes problems when trying to do custom themes that 'extend' our base theme (e.g., we want to change the primary color but keep all of the non-color based theme settings like fonts, etc.). Because these colors are hardcoded in the overrides, even if you set the primary color to 'red' (for example), you'll still see a #007BC1 FAB.

Is this request related to a current issue?

This was discovered when working on holiday themes on the doc site.

Additional Context

https://mui.com/material-ui/customization/theme-components/#overrides-based-on-props

For example:

- primary: {
+ primary: ({ ownerState, theme }) => ({
-    backgroundColor: ThemeColors.primary.main,
+    backgroundColor: theme.palette.primary.main,
-    color: WhiteText,
+    color: theme.palette.common.white
     "&:hover": {
-        backgroundColor: BLUIColors.blue[300],
+        backgroundColor: theme.palette.primary.light
     },
- }
+ })

[shubham-eaton]

Check for equivalent theme color vars, and replace them with theme variables