🐛 Support CSS custom properties in createCursor

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 4.0.4
+- Support CSS custom properties as input for the `createCursor` method by applying fade via `opacity` instead of modifying the alpha channel.
+
 # 4.0.3
 - Make event listeners passive
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quill-cursors",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "A multi cursor module for Quill.",
   "keywords": [
     "quill",
@@ -30,7 +30,6 @@
     "@reedsy/eslint-plugin": "^0.14.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@types/jest": "^27.4.0",
-    "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -44,7 +43,6 @@
     "sass": "^1.49.7",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.3.1",
-    "tinycolor2": "^1.4.2",
     "ts-jest": "^27.1.3",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.5",

src/quill-cursors/cursor.spec.ts

@@ -234,13 +234,15 @@ describe('Cursor', () => {
       expect(selections.children[0]).toHaveStyle('left: 50px');
       expect(selections.children[0]).toHaveStyle('width: 100px');
       expect(selections.children[0]).toHaveStyle('height: 200px');
-      expect(selections.children[0]).toHaveStyle('background-color: rgba(255, 0, 0, 0.3)');
+      expect(selections.children[0]).toHaveStyle('background-color: red');
+      expect(selections.children[0]).toHaveStyle('opacity: 0.3');
 
       expect(selections.children[1]).toHaveStyle('top: 1000px');
       expect(selections.children[1]).toHaveStyle('left: 1050px');
       expect(selections.children[1]).toHaveStyle('width: 200px');
       expect(selections.children[1]).toHaveStyle('height: 300px');
-      expect(selections.children[1]).toHaveStyle('background-color: rgba(255, 0, 0, 0.3)');
+      expect(selections.children[1]).toHaveStyle('background-color: red');
+      expect(selections.children[1]).toHaveStyle('opacity: 0.3');
     });
 
     it('clears the selection if nothing is passed in', () => {

src/quill-cursors/cursor.ts

@@ -1,6 +1,5 @@
 import IQuillCursorsOptions from './i-quill-cursors-options';
 import IQuillRange from './i-range';
-import tinycolor = require('tinycolor2');
 import {ICoordinates} from './i-coordinates';
 
 export default class Cursor {
@@ -171,7 +170,8 @@ export default class Cursor {
     element.style.left = `${selection.left - container.left}px`;
     element.style.width = `${selection.width}px`;
     element.style.height = `${selection.height}px`;
-    element.style.backgroundColor = tinycolor(this.color).setAlpha(0.3).toString();
+    element.style.backgroundColor = this.color;
+    element.style.opacity = '0.3';
 
     return element;
   }