add random colour button to control colour module

src/component/bookmarkForm/index.js

@@ -389,6 +389,7 @@ export const BookmarkForm = function({
         srOnly: true,
         defaultValue: bookmarkDefault.accent.rgb,
         minMaxObject: bookmarkMinMax,
+        randomColor: true,
         action: () => {
           this.preview.update.style(bookmarkData);
         }
@@ -417,6 +418,7 @@ export const BookmarkForm = function({
         srOnly: true,
         defaultValue: bookmarkDefault.color.rgb,
         minMaxObject: bookmarkMinMax,
+        randomColor: true,
         action: () => {
           this.preview.update.style(bookmarkData);
         }

src/component/control/color/index.js

@@ -12,6 +12,7 @@ import { get } from '../../../utility/get';
 import { set } from '../../../utility/set';
 import { convertColor } from '../../../utility/convertColor';
 import { isValidString } from '../../../utility/isValidString';
+import { randomNumber } from '../../../utility/randomNumber';
 
 export const Control_color = function({
   object = {},
@@ -22,6 +23,7 @@ export const Control_color = function({
   value = '#000000',
   defaultValue = false,
   action = false,
+  randomColor = false,
   extraButtons = []
 } = {}) {
 
@@ -90,6 +92,7 @@ export const Control_color = function({
     iconName: 'replay',
     style: ['line'],
     classList: ['form-group-item-small'],
+    title: 'Reset to default',
     func: () => {
 
       set({ object: object, path: path + '.rgb', value: JSON.parse(JSON.stringify(defaultValue)) });
@@ -101,6 +104,32 @@ export const Control_color = function({
     }
   });
 
+  this.random = new Button({
+    text: false,
+    iconName: 'random',
+    style: ['line'],
+    classList: ['form-group-item-small'],
+    title: 'Random colour',
+    func: () => {
+
+      set({ object: object, path: path + '.hsl', value: { h: randomNumber(0, 360), s: randomNumber(0, 100), l: randomNumber(0, 100) } });
+
+      set({
+        object: object,
+        path: path + '.rgb',
+        value: convertColor.hsl.rgb(get({
+          object: object,
+          path: path + '.hsl'
+        }))
+      });
+
+      this.update({ all: true });
+
+      if (action) { action(); };
+
+    }
+  });
+
   this.delayedUpdate = null;
 
   this.update = ({
@@ -143,6 +172,10 @@ export const Control_color = function({
       ]
     });
 
+    if (randomColor) {
+      formGroup.appendChild(this.random.button);
+    };
+
     if (defaultValue || (typeof defaultValue === 'number' && defaultValue === 0)) {
       formGroup.appendChild(this.reset.button);
     };

src/component/control/colorMixer/index.js

@@ -24,6 +24,7 @@ export const Control_colorMixer = function({
   id = 'name',
   labelText = 'name',
   srOnly = false,
+  randomColor = false,
   action = false
 } = {}) {
 
@@ -48,6 +49,7 @@ export const Control_colorMixer = function({
     value: get({ object: object, path: path + '.rgb' }),
     defaultValue: defaultValue,
     extraButtons: [this.moreControlsToggle],
+    randomColor: randomColor,
     action: () => {
       set({
         object: object,

src/component/icon/index.js

@@ -99,6 +99,9 @@ icon.all = {
   },
   propagate: {
     path: 'M5.54 8.46L2 12L5.54 15.54L7.3 13.77L5.54 12L7.3 10.23L5.54 8.46ZM12 18.46L10.23 16.7L8.46 18.46L12 22L15.54 18.46L13.77 16.7L12 18.46ZM18.46 8.46L16.7 10.23L18.46 12L16.7 13.77L18.46 15.54L22 12L18.46 8.46ZM8.46 5.54L10.23 7.3L12 5.54L13.77 7.3L15.54 5.54L12 2L8.46 5.54Z M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z'
+  },
+  random: {
+    path: 'M10.59 9.17L5.41 4L4 5.41L9.17 10.58L10.59 9.17ZM14.5 4L16.54 6.04L4 18.59L5.41 20L17.96 7.46L20 9.5V4H14.5ZM14.83 13.41L13.42 14.82L16.55 17.95L14.5 20H20V14.5L17.96 16.54L14.83 13.41V13.41Z'
   }
 };
 

src/component/menuContent/themeSetting/index.js

@@ -578,6 +578,7 @@ themeSetting.accent = (parent) => {
     labelText: 'Accent colour',
     defaultValue: state.get.default().theme.accent.rgb,
     minMaxObject: state.get.minMax(),
+    randomColor: true,
     action: () => {
       applyCSSVar([
         'theme.accent.rgb.r',
@@ -1300,6 +1301,7 @@ themeSetting.background = (parent) => {
       labelText: 'Background colour',
       defaultValue: state.get.default().theme.background.color.rgb,
       minMaxObject: state.get.minMax(),
+      randomColor: true,
       action: () => {
         applyCSSVar([
           'theme.background.color.rgb.r',
@@ -1336,6 +1338,7 @@ themeSetting.background = (parent) => {
         labelText: 'Background gradient start',
         defaultValue: state.get.default().theme.background.gradient.start.rgb,
         minMaxObject: state.get.minMax(),
+        randomColor: true,
         action: () => {
           applyCSSVar([
             'theme.background.gradient.start.rgb.r',
@@ -1356,6 +1359,7 @@ themeSetting.background = (parent) => {
         labelText: 'Background gradient end',
         defaultValue: state.get.default().theme.background.gradient.end.rgb,
         minMaxObject: state.get.minMax(),
+        randomColor: true,
         action: () => {
           applyCSSVar([
             'theme.background.gradient.end.rgb.r',