UI: remove material-ui-color dependency

package.json

@@ -31,7 +31,6 @@
     "date-fns": "^2.30.0",
     "escodegen": "^2.1.0",
     "jszip": "^3.10.1",
-    "material-ui-color": "^1.2.0",
     "material-ui-popup-state": "^1.9.3",
     "monaco-vim": "^0.3.5",
     "notistack": "^2.0.8",

src/ScriptEditor/ui/ThemeEditorModal.tsx

@@ -3,14 +3,14 @@ import _ from "lodash";
 
 import { Grid, Box, Button, IconButton, Paper, TextField, Tooltip, Typography } from "@mui/material";
 import { History, Reply } from "@mui/icons-material";
-import { Color, ColorPicker } from "material-ui-color";
 
 import { Settings } from "../../Settings/Settings";
 import { useRerender } from "../../ui/React/hooks";
 import { Modal } from "../../ui/React/Modal";
 import { OptionSwitch } from "../../ui/React/OptionSwitch";
 
 import { defaultMonacoTheme } from "./themes";
+import { OpenColorPickerButton } from "../../Themes/ui/ColorPicker";
 
 type ColorEditorProps = {
   label: string;
@@ -26,7 +26,6 @@ function ColorEditor({ label, themePath, onColorChange, color, defaultColor }: C
     console.error(`color ${themePath} was undefined, reverting to default`);
     color = defaultColor;
   }
-
   return (
     <Tooltip title={label}>
       <span>
@@ -37,12 +36,10 @@ function ColorEditor({ label, themePath, onColorChange, color, defaultColor }: C
           InputProps={{
             readOnly: true,
             startAdornment: (
-              <ColorPicker
-                hideTextfield
-                deferred
-                value={"#" + color}
-                onChange={(newColor: Color) => onColorChange(themePath, newColor.hex)}
-                disableAlpha
+              <OpenColorPickerButton
+                title={""}
+                color={`#${color}`}
+                onColorChange={(c) => onColorChange(themePath, c)}
               />
             ),
             endAdornment: (

src/Themes/ui/ColorPicker/ColorPreview.tsx

@@ -0,0 +1,19 @@
+import { RGB } from "./";
+import React from "react";
+
+type Props = {
+  rgb: RGB;
+};
+
+export function ColorPreview({ rgb: { r, g, b } }: Props) {
+  return (
+    <div
+      style={{
+        width: "50px",
+        height: "50px",
+        backgroundColor: `rgb(${r} ${g} ${b})`,
+        borderRadius: "20%",
+      }}
+    ></div>
+  );
+}

src/Themes/ui/ColorPicker/HexInput.tsx

@@ -0,0 +1,133 @@
+import { useTheme } from "@mui/material/styles";
+import { RGB, useSyncState } from "./";
+import React, { ChangeEvent, useEffect, useState } from "react";
+
+type Props = {
+  rgb: RGB;
+  setRGB: (rgb: RGB) => void;
+};
+
+export function formatRGBtoHEX(rgb: RGB) {
+  const digits = [
+    rgb.r.toString(16).padStart(2, "0"),
+    rgb.g.toString(16).padStart(2, "0"),
+    rgb.b.toString(16).padStart(2, "0"),
+  ];
+
+  if (rgb.a) digits.push(rgb.a.toString(16).padStart(2, "0"));
+
+  if (digits.every((d) => d[0] == d[1])) return digits.reduce((prev, cur) => `${prev}${cur[0]}`, "");
+
+  return digits.join("");
+}
+
+export function HexInput({ rgb, setRGB }: Props) {
+  const hex = formatRGBtoHEX(rgb);
+
+  const [value, setValue] = useSyncState(hex);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    if (value.length != 3 && value.length != 6 && value.length != 8) {
+      if (!error) setError(true);
+      return;
+    }
+
+    const rgb: RGB =
+      value.length == 3
+        ? {
+            r: Number.parseInt(`${value[0]}${value[0]}`, 16),
+            g: Number.parseInt(`${value[1]}${value[1]}`, 16),
+            b: Number.parseInt(`${value[2]}${value[2]}`, 16),
+          }
+        : {
+            r: Number.parseInt(value.slice(0, 2), 16),
+            g: Number.parseInt(value.slice(2, 4), 16),
+            b: Number.parseInt(value.slice(4, 6), 16),
+          };
+
+    if (value.length == 8) rgb.a = Number.parseInt(value.slice(6, 8), 16);
+
+    if (Object.values(rgb).some((v) => isNaN(v))) {
+      if (!error) setError(true);
+      return;
+    }
+
+    if (error) setError(false);
+
+    if (hex == formatRGBtoHEX(rgb)) return;
+
+    setRGB(rgb);
+
+    //this updates the current color so we only want to run this if `value` changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return (
+    <HexInputDisplay
+      value={value}
+      onChange={({ currentTarget: { value } }) => value.length <= 8 && setValue(value)}
+      error={error}
+    ></HexInputDisplay>
+  );
+}
+
+type DisplayProps = {
+  error: boolean;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+function HexInputDisplay({ error, value, onChange }: DisplayProps) {
+  const theme = useTheme();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        padding: "0.2em",
+        borderTop: `1px solid ${error ? theme.palette.error.light : "transparent"}`,
+        borderRight: `1px solid ${error ? theme.palette.error.light : "transparent"}`,
+        borderBottom: `1px solid ${error ? theme.palette.error.light : "currentColor"}`,
+        borderLeft: `1px solid ${error ? theme.palette.error.light : "transparent"}`,
+      }}
+    >
+      <span style={{ fontWeight: "bolder" }}>HEX</span>
+      <span
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          gap: "0.3em",
+        }}
+      >
+        <span>#</span>
+        <input
+          type="text"
+          style={{
+            width: "5em",
+            appearance: "none",
+            MozAppearance: "none",
+            WebkitAppearance: "none",
+            border: "none",
+            background: "transparent",
+            color: "inherit",
+          }}
+          value={value}
+          onChange={onChange}
+        />
+        <span
+          style={{
+            display: "inline-block",
+            width: "1em",
+            textAlign: "right",
+            color: theme.palette.error.light,
+          }}
+        >
+          {error ? "X" : ""}
+        </span>
+      </span>
+    </div>
+  );
+}

src/Themes/ui/ColorPicker/HueSlider.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+
+type Props = {
+  hue: number;
+  setHue: (hue: number) => void;
+};
+
+const SLIDER_CLASS = "color_picker_hue_slider";
+
+const GRADIENT_BACKGROUND = `\
+rgba(0, 0, 0, 0) 
+linear-gradient(to right, 
+  rgb(255, 0, 0) 0%, 
+  rgb(255, 255, 0) 17%, 
+  rgb(0, 255, 0) 33%, 
+  rgb(0, 255, 255) 50%, 
+  rgb(0, 0, 255) 67%, 
+  rgb(255, 0, 255) 83%, 
+  rgb(255, 0, 0) 100%
+) 
+repeat scroll 0% 0%`;
+
+const THUMB_SELECTORS = [`.${SLIDER_CLASS}::-moz-range-thumb`, `.${SLIDER_CLASS}::-webkit-slider-thumb`];
+
+const THUMB_RULES = THUMB_SELECTORS.map(
+  (s) => /*css*/ `
+${s} {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: white;
+  width: 17px;
+  height: 17px;
+  border-radius: 100%;
+  cursor: pointer;
+}
+`,
+).join("");
+
+const THUMB_HOVER_RULES = THUMB_SELECTORS.map(
+  (s) => /*css*/ `
+${s}:hover {
+  background: lightgrey;
+}
+`,
+).join("");
+
+const CSS = /*css*/ `
+${THUMB_RULES}
+${THUMB_HOVER_RULES}
+`;
+const styleSheet = new CSSStyleSheet();
+styleSheet.replace(CSS);
+
+export function HueSlider({ hue, setHue }: Props) {
+  useEffect(() => {
+    if (document.adoptedStyleSheets.includes(styleSheet)) return;
+    document.adoptedStyleSheets.push(styleSheet);
+    return () => void (document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => s != styleSheet));
+  }, []);
+
+  return (
+    <input
+      className={SLIDER_CLASS}
+      style={{
+        height: "15px",
+        background: GRADIENT_BACKGROUND,
+        appearance: "none",
+        MozAppearance: "none",
+        WebkitAppearance: "none",
+      }}
+      value={hue + ""}
+      type="range"
+      min={0}
+      max={360}
+      step={1}
+      onChange={(e) => setHue(+e.currentTarget.value)}
+    ></input>
+  );
+}

src/Themes/ui/ColorPicker/RGBDigit.tsx

@@ -0,0 +1,65 @@
+import { useSyncState } from "./";
+import React, { useEffect } from "react";
+
+type Props = {
+  digitLabel: "R" | "G" | "B";
+  digit: [number, (d: number) => void];
+};
+
+const styleSheet = new CSSStyleSheet();
+styleSheet.replace(`
+.color-picker-rgb-digit::-webkit-outer-spin-button,
+.color-picker-rgb-digit::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+`);
+
+export function RGBDigit({ digitLabel, digit: [digit, setDigit] }: Props) {
+  const [value, setValue] = useSyncState(digit);
+
+  useEffect(() => {
+    if (document.adoptedStyleSheets.includes(styleSheet)) return;
+    document.adoptedStyleSheets.push(styleSheet);
+    return () => void (document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => s != styleSheet));
+  }, []);
+
+  useEffect(() => {
+    if (digit == value) return;
+    if (value > 255) return setValue(255);
+    if (value < 0) return setValue(0);
+
+    setDigit(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        borderBottom: "1px solid currentColor",
+      }}
+    >
+      <span style={{ fontWeight: "bolder" }}>{digitLabel}</span>
+      <input
+        className="color-picker-rgb-digit"
+        type="number"
+        min="0"
+        max="255"
+        style={{
+          width: "2.5em",
+          appearance: "textfield",
+          MozAppearance: "textfield",
+          WebkitAppearance: "textfield",
+          border: "none",
+          background: "transparent",
+          color: "inherit",
+        }}
+        value={value + ""}
+        onChange={({ currentTarget: { value } }) => setValue(Number.parseInt((value || "0").replaceAll(/[^0-9]/g, "")))}
+      />
+    </div>
+  );
+}