Add transparency thing

Author: PeterTYLiu

README.md

@@ -2,7 +2,7 @@
 
 Live app: https://petertyliu.github.io/mui-theme-builder/
 
-Use this app to build/generate a basic MUI theme, which you can customize further by referring to the [MUI theming docs](https://mui.com/material-ui/customization/theming). Compatible with MUI 5 and higher.
+Use this app to build/generate a basic MUI theme, which you can customize further by referring to the [MUI theming docs](https://mui.com/material-ui/customization/theming). Built with MUI 7, Compatible with MUI 5 and higher.
 
 Inspired by (but not forked from) [bareynol's MUI theme creator](https://bareynol.github.io/mui-theme-creator)
 

src/components/ColourPicker/ColorPicker.tsx

@@ -56,7 +56,20 @@ export const ColorPicker = ({ value, onChange, name, ...fieldContainerProps }: C
             pointerEvents: "none",
           },
         }}
-      />
+      >
+        <Box
+          sx={{
+            position: "absolute",
+            insetBlock: 0,
+            insetInlineStart: 0,
+            backgroundColor: value.substring(0, 7),
+            width: "15px",
+            borderRadius: "calc(var(--mui-shape-borderRadius) - 1px)",
+            borderEndEndRadius: 0,
+            borderStartEndRadius: 0,
+          }}
+        />
+      </Box>
       <Box
         id={name}
         popover="auto"
@@ -83,9 +96,10 @@ export const ColorPicker = ({ value, onChange, name, ...fieldContainerProps }: C
         name={name}
         ref={inputRef}
         key={value}
+        autoCorrect="off"
+        spellCheck="false"
         sx={{
           fontFamily: "monospace",
-
           borderRadius: 1,
           borderStartStartRadius: 0,
           borderEndStartRadius: 0,

src/components/InfoPanel/InfoPanel.tsx

@@ -20,7 +20,7 @@ export const InfoPanel = () => {
       <Stack>
         <Typography variant="h5">MUI&nbsp;Theme&nbsp;Builder</Typography>
         <Typography variant="subtitle2" color="text.secondary">
-          Compatible with MUI 5+
+          Compatible with MUI 5 to 7
         </Typography>
       </Stack>
       <svg style={{ width: 0, height: 0, position: "absolute" }} aria-hidden="true" focusable="false">