reduce amount of theme customisations

www/src/Themes.tsx

@@ -1,6 +1,4 @@
 import _merge from "lodash/merge";
-import _omit from "lodash/omit";
-import _mapValues from "lodash/mapValues";
 
 import {
   createMuiTheme,
@@ -10,8 +8,6 @@ import {
 } from "@material-ui/core/styles";
 import ClearIcon from "@material-ui/icons/Clear";
 
-import antlerPalette from "./Theme/antlerPalette";
-
 export const HEADING_FONT = "Space Grotesk, system-ui, sans-serif";
 export const BODY_FONT = "Inter, system-ui, sans-serif";
 export const MONO_FONT = "IBM Plex Mono, ui-monospace, monospace";
@@ -234,93 +230,65 @@ export const defaultOverrides = (theme: Theme): ThemeOptions => ({
     },
     MuiChip: {
       root: {
-        borderRadius: 4,
+        // borderRadius: theme.shape.borderRadius,
         maxWidth: "100%",
 
         height: "auto",
         minHeight: 32,
-
-        color: theme.palette.text.secondary,
       },
       label: {
         ...theme.typography.caption,
         color: "inherit",
-        padding: theme.spacing(1, 1.5),
-        // whiteSpace: "normal",
+        padding: theme.spacing(0.75, 1.5),
 
         "$outlined &": {
-          paddingTop: theme.spacing(0.875),
-          paddingBottom: theme.spacing(0.875),
+          paddingTop: theme.spacing(0.75) - 1,
+          paddingBottom: theme.spacing(0.75) - 1,
         },
       },
       sizeSmall: { minHeight: 24 },
-      labelSmall: {
-        padding: theme.spacing(0.5, 1.5),
-      },
-
-      outlined: {
-        backgroundColor: theme.palette.action.selected,
-        borderColor: theme.palette.action.selected,
-      },
-      outlinedPrimary: {
-        backgroundColor: fade(
-          theme.palette.primary.main,
-          theme.palette.action.selectedOpacity
-        ),
-      },
+      labelSmall: { padding: theme.spacing(0.5, 1.5) },
 
       deleteIcon: { color: "inherit" },
     },
-    MuiBadge: {
-      badge: {
-        ...theme.typography.caption,
-        fontFeatureSettings: '"tnum"',
-      },
-    },
-    MuiPaper: {
-      root: {
-        backgroundColor: "var(--bg-paper)",
-        "--bg-paper": theme.palette.background.paper,
-      },
-      rounded: { borderRadius: 8 },
-      // Dark theme paper elevation backgrounds
-      ...(() => {
-        const classes: Record<string, any> = {};
-        for (let i = 0; i <= 24; i++) {
-          if (theme.palette.background.elevation === undefined) continue;
+    // MuiPaper: {
+    // root: {
+    //   backgroundColor: "var(--bg-paper)",
+    //   "--bg-paper": theme.palette.background.paper,
+    // },
+    // rounded: { borderRadius: theme.shape.borderRadius * 2 },
+    // Dark theme paper elevation backgrounds
+    // ...(() => {
+    //   const classes: Record<string, any> = {};
+    //   for (let i = 0; i <= 24; i++) {
+    //     if (theme.palette.background.elevation === undefined) continue;
 
-          let closestElevation = i;
-          for (let j = i; j > 0; j--) {
-            if (theme.palette.background.elevation[j] !== undefined) {
-              closestElevation = j;
-              break;
-            }
-          }
+    //     let closestElevation = i;
+    //     for (let j = i; j > 0; j--) {
+    //       if (theme.palette.background.elevation[j] !== undefined) {
+    //         closestElevation = j;
+    //         break;
+    //       }
+    //     }
 
-          classes["elevation" + i] = {
-            "&&": {
-              "--bg-paper":
-                theme.palette.background.elevation[closestElevation],
-            },
-          };
-        }
-        return classes;
-      })(),
-    },
+    //     classes["elevation" + i] = {
+    //       "&&": {
+    //         "--bg-paper":
+    //           theme.palette.background.elevation[closestElevation],
+    //       },
+    //     };
+    //   }
+    //   return classes;
+    // })(),
+    // },
     MuiSlider: {
-      disabled: {},
-      rail: {
-        backgroundColor: "#e7e7e7",
-        opacity: 1,
-      },
-
       mark: {
         width: 4,
         height: 4,
         borderRadius: "50%",
         marginLeft: -2,
         marginTop: -1,
-        backgroundColor: "#69696a",
+        // backgroundColor: "#69696a",
         "$disabled &": { backgroundColor: "currentColor" },
       },
       markActive: {
@@ -328,13 +296,11 @@ export const defaultOverrides = (theme: Theme): ThemeOptions => ({
         backgroundColor: "currentColor",
         "$disabled &": { backgroundColor: "currentColor" },
       },
-
       thumb: {
         width: 16,
         height: 16,
         marginTop: -7,
         marginLeft: -8,
-
         "$disabled &": {
           width: 12,
           height: 12,
@@ -342,26 +308,28 @@ export const defaultOverrides = (theme: Theme): ThemeOptions => ({
           marginLeft: -6,
         },
       },
-
       valueLabel: {
+        "& *": { transform: "none" },
+
         top: -22,
-        left: "calc(-25%)",
-        ...theme.typography.caption,
-        color: theme.palette.primary.main,
+        left: "auto",
+        right: "auto",
+        color: "inherit",
 
         "& > *": {
           width: "auto",
           minWidth: 24,
           height: 24,
-
-          whiteSpace: "nowrap",
           borderRadius: 500,
 
-          padding: theme.spacing(0, 1),
-          paddingRight: theme.spacing(0.875),
+          paddingLeft: 6,
+          paddingRight: `calc(6px - ${theme.typography.caption.letterSpacing})`,
+
+          ...theme.typography.caption,
+          whiteSpace: "nowrap",
         },
-        "& *": { transform: "none" },
       },
+
       markLabel: theme.typography.caption,
     },
     MuiFormHelperText: {
@@ -373,34 +341,6 @@ export const defaultOverrides = (theme: Theme): ThemeOptions => ({
     MuiListItemIcon: {
       root: { minWidth: theme.spacing(40 / 8) },
     },
-
-    MuiSnackbar: {
-      root: {
-        ..._omit(theme.typography.overline, ["color"]),
-
-        "&& > *": {
-          ..._mapValues(
-            _omit(theme.typography.overline, ["color"]),
-            () => "inherit"
-          ),
-          alignItems: "center",
-        },
-      },
-    },
-    MuiSnackbarContent: {
-      root: {
-        backgroundColor: antlerPalette.aGray[700],
-        color: theme.palette.common.white,
-        userSelect: "none",
-
-        padding: theme.spacing(0.5, 2),
-        boxShadow: "none",
-      },
-
-      message: {
-        padding: theme.spacing(1, 2),
-      },
-    },
   },
   props: {
     MuiTypography: {

www/src/pages/Test.tsx

@@ -1,7 +1,9 @@
 import { useContext, useEffect } from "react";
 import { SnackContext } from "contexts/SnackContext";
 
-const TestView = () => {
+import { Container, Grid, Chip, Paper, Slider } from "@material-ui/core";
+
+export default function TestView() {
   const snackContext = useContext(SnackContext);
 
   useEffect(() => {
@@ -15,7 +17,125 @@ const TestView = () => {
     snackContext.setProgress({ value: 90, target: 120 });
   }, []);
 
-  return <></>;
-};
+  return (
+    <Container style={{ margin: "24px 0" }}>
+      <div>
+        <Chip size="small" label="Main" />
+        <Chip label="Main" />
+        <Chip
+          label={
+            <>
+              Main
+              <br />
+              Multiline
+            </>
+          }
+        />
+      </div>
+      <div>
+        <Chip size="small" variant="outlined" label="Main" />
+        <Chip variant="outlined" label="Main" />
+        <Chip
+          variant="outlined"
+          label={
+            <>
+              Main
+              <br />
+              Multiline
+            </>
+          }
+        />
+      </div>
 
-export default TestView;
+      <div>
+        <Chip color="primary" size="small" label="Main" />
+        <Chip color="primary" label="Main" />
+        <Chip
+          color="primary"
+          label={
+            <>
+              Main
+              <br />
+              Multiline
+            </>
+          }
+        />
+      </div>
+      <div>
+        <Chip color="primary" size="small" variant="outlined" label="Main" />
+        <Chip color="primary" variant="outlined" label="Main" />
+        <Chip
+          color="primary"
+          variant="outlined"
+          label={
+            <>
+              Main
+              <br />
+              Multiline
+            </>
+          }
+        />
+      </div>
+
+      <div>
+        <Chip color="secondary" size="small" label="Main" />
+        <Chip color="secondary" label="Main" />
+        <Chip
+          color="secondary"
+          label={
+            <>
+              Main
+              <br />
+              Multiline
+            </>
+          }
+        />
+      </div>
+      <div>
+        <Chip color="secondary" size="small" variant="outlined" label="Main" />
+        <Chip color="secondary" variant="outlined" label="Main" />
+        <Chip
+          color="secondary"
+          variant="outlined"
+          label={
+            <>
+              Main
+              <br />
+              Multiline
+            </>
+          }
+        />
+      </div>
+
+      <Grid container spacing={4}>
+        {new Array(24).fill(undefined).map((_, i) => (
+          <Grid item key={i}>
+            <Paper
+              elevation={i + 1}
+              style={{
+                width: 48,
+                height: 48,
+                display: "grid",
+                placeItems: "center",
+              }}
+            >
+              {i + 1}
+            </Paper>
+          </Grid>
+        ))}
+      </Grid>
+
+      <br />
+      <br />
+
+      <Slider
+        valueLabelDisplay="on"
+        // valueLabelFormat={(v) => `${v} label`}
+        marks={[
+          { value: 20, label: 20 },
+          { value: 40, label: 40 },
+        ]}
+      />
+    </Container>
+  );
+}