Add utility classes to ColorPicker component

[benfinnett]

In relation to #320, adds utility classes to ColorPicker so users can override/extend the default styles of the gradient picker, text input, and swatch container. This provides extensive customisability to any components making use of the ColorPicker. It introduces a classes prop to control the styling by merging custom class names with the default generated utility classes.

Changes

• Added a colorPickerUtilityClasses constant generated by the getUtilityClasses helper.
• Exposed gradientPicker, colorTextInput, and swatchContainer for ColorPicker.
• Introduced a classes prop on ColorPickerProps.
• Applied utility classes to the <HexColorPicker>/<HexAlphaColorPicker>, <TextField>, and swatch container <div>.

Example

Apply the desired CSS class to the ColorPickerProps:

<MenuButtonTextColor
  defaultTextColor={theme.palette.text.primary}
  swatchColors={[
      { value: "#000000", label: "Black" },
      { value: "#ffffff", label: "White" },
      { value: "#ff0000", label: "Red" },
      { value: "#0000ff", label: "Blue" },
  ]}
  ColorPickerProps={{
    classes: {
      gradientPicker: "hide",
      colorTextInput: "hide",
    },
  }}
/>

Apply the wanted styles, for example to hide certain parts of the color picker:

}.MuiTiptap-ColorPicker-gradientPicker.hide {
  display: none;
}
}.MuiTiptap-ColorPicker-colorTextInput.hide {
  display: none;
}

[sjdemartini]

Looks great, thank you for opening the PR and providing the detailed notes!

[sjdemartini]

Note that if you always want to hide the swatch container (i.e., the logic isn't conditional around passing in the hide-swatch class), you could simply add the CSS .MuiTiptap-ColorPicker-swatchContainer { display: none } and not need to make any changes to your ColorPickerProps or refer to a new class.

Going to slightly tweak this comment