feat: replace Spectrum with Coloris

dev/copy-libs.sh

@@ -1,9 +1,9 @@
 cp node_modules/jquery/dist/jquery.min.js src/lib/
 cp node_modules/moment/dist/moment.js src/lib/
-cp node_modules/spectrum-colorpicker/spectrum.js src/lib/
+cp node_modules/@melloware/coloris/dist/esm/coloris.min.js src/lib/
 cp node_modules/webextension-polyfill/dist/browser-polyfill.min.js src/lib/
 cp node_modules/sortablejs/modular/sortable.esm.js src/lib/
 chmod +x src/lib/**.js
 
 cp node_modules/remixicon/fonts/*.{css,eot,woff2,woff,ttf,svg} src/lib/remixicon/
-cp node_modules/spectrum-colorpicker/spectrum.css src/lib/
+cp node_modules/@melloware/coloris/dist/coloris.min.css src/lib/

package.json

@@ -17,12 +17,12 @@
     "web-ext": "^8.10.0"
   },
   "dependencies": {
+    "@melloware/coloris": "^0.25.0",
     "jquery": "^3.7.1",
     "moment": "^2.30.1",
     "normalize.css": "^8.0.1",
     "remixicon": "^4.7.0",
     "sortablejs": "^1.15.6",
-    "spectrum-colorpicker": "^1.8.1",
     "webextension-polyfill": "^0.12.0"
   },
   "webExt": {

src/action/components/xkit-feature/index.css

@@ -174,3 +174,15 @@ iframe {
   border: none;
   width: 100%;
 }
+
+.clr-field {
+  width: 120px;
+}
+
+.clr-field input[type="text"] {
+  width: 100%;
+}
+
+.clr-field button {
+  border-radius: 0 3px 3px 0;
+}

src/action/components/xkit-feature/index.js

@@ -1,4 +1,5 @@
 import { CustomElement, fetchStyleSheets } from '../index.js';
+import Coloris, { init as ColorisInit } from '../../../lib/coloris.min.js';
 
 const localName = 'xkit-feature';
 
@@ -24,9 +25,9 @@ const templateDocument = new DOMParser().parseFromString(`
 `, 'text/html');
 
 const adoptedStyleSheets = await fetchStyleSheets([
+  '/lib/coloris.min.css',
   '/lib/normalize.min.css',
   '/lib/remixicon/remixicon.css',
-  '/lib/spectrum.css',
   '/lib/toggle-button.css',
   './index.css'
 ].map(import.meta.resolve));
@@ -127,14 +128,15 @@ class XKitFeatureElement extends CustomElement {
           break;
         case 'color':
           preferenceInput.value = preference.value;
-          $(preferenceInput)
-            .on('change.spectrum', this.#writePreference)
-            .spectrum({
-              preferredFormat: 'hex',
-              showInput: true,
-              showInitial: true,
-              allowEmpty: true
-            });
+          ColorisInit();
+          Coloris({
+            alpha: false,
+            clearButton: true,
+            closeButton: true,
+            el: preferenceInput,
+            swatches: ['#ff4930', '#ff8a00', '#00cf35', '#00b8ff', '#7c5cff', '#ff62ce'],
+            themeMode: 'auto',
+          });
           break;
         case 'iframe':
           preferenceInput.src = preference.src;

src/action/popup.html

@@ -5,16 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>XKit Control Panel</title>
     <link rel="icon" href="../icons/128.png" type="image/png">
+    <link rel="stylesheet" href="../lib/coloris.min.css">
     <link rel="stylesheet" href="../lib/normalize.min.css">
     <link rel="stylesheet" href="../lib/remixicon/remixicon.css">
-    <link rel="stylesheet" href="../lib/spectrum.css">
     <link rel="stylesheet" href="./backup.css">
     <link rel="stylesheet" href="./configuration.css">
     <link rel="stylesheet" href="./links.css">
     <link rel="stylesheet" href="./popup.css">
     <script defer src="../lib/browser-polyfill.min.js"></script>
     <script defer src="../lib/jquery.min.js"></script>
-    <script defer src="../lib/spectrum.js"></script>
     <script defer src="./popup.js"></script>
     <script defer src="./render_backup.js"></script>
     <script type="module" src="./render_features.js"></script>