Better color chart selection

Author: spaaaacccee

client/src/utils/colors.tsx

@@ -5,21 +5,42 @@ import { sortBy, values } from "lodash";
 export const { common, ...accentColors } = muiColors;
 export const colors = sortBy(
   values(accentColors),
-  (c) => convert.hex.hsl(c[100])[0]
+  (c) => convert.hex.hsl(c[100])[0],
 );
 
 export const tone = (
   mode: "light" | "dark" = "light",
-  color: (typeof accentColors)[keyof typeof accentColors]
+  color: (typeof accentColors)[keyof typeof accentColors],
 ) => {
   return color[mode === "dark" ? "400" : "500"];
 };
 
+// Remove greys from palette
+const tones = [
+  accentColors["amber"],
+  accentColors["blue"],
+  accentColors["brown"],
+  accentColors["cyan"],
+  accentColors["deepOrange"],
+  accentColors["deepPurple"],
+  accentColors["green"],
+  accentColors["indigo"],
+  accentColors["lightBlue"],
+  accentColors["lightGreen"],
+  accentColors["lime"],
+  accentColors["orange"],
+  accentColors["pink"],
+  accentColors["purple"],
+  accentColors["red"],
+  accentColors["teal"],
+  accentColors["yellow"],
+];
+
 export const toneBy = (
   mode: "light" | "dark" = "light",
   index: number = 0,
-  skip = 2,
-  rotate = 7
+  skip = 1,
+  rotate = 7,
 ) => {
-  return tone(mode, colors[(index * skip + rotate) % colors.length]);
+  return tone(mode, tones[(index * skip + rotate) % tones.length]);
 };