Use css variables for all sorts of color propagation

Author: simonwep

1�7dist/pickr.es5.min.js 1�7

@@ -300,7 +300,7 @@ class Pickr {
                     } else if (!options.useAsButton && !inst._lastColor) {
 
                         // Apply color to both the last and current color since the current state is cleared
-                        lastColor.style.color = cssRGBaString;
+                        lastColor.style.setProperty('--pcr-color', cssRGBaString);
                     }
 
                     // Check if there's a swatch which color matches the current one
@@ -310,7 +310,7 @@ class Pickr {
                     }
 
                     // Change current color
-                    currentColor.style.color = cssRGBaString;
+                    currentColor.style.setProperty('--pcr-color', cssRGBaString);
                 }
             }),
 
@@ -623,7 +623,7 @@ class Pickr {
 
             // Create new swatch HTMLElement
             const el = _.createElementFromString(
-                `<button type="button" style="color: ${color.toRGBA().toString(0)}" aria-label="${this._t('btn:swatch')}"/>`
+                `<button type="button" style="--pcr-color: ${color.toRGBA().toString(0)}" aria-label="${this._t('btn:swatch')}"/>`
             );
 
             // Append element and save swatch data
@@ -671,11 +671,11 @@ class Pickr {
 
         // Change preview and current color
         const cssRGBaString = this._color.toRGBA().toString(0);
-        preview.lastColor.style.color = cssRGBaString;
+        preview.lastColor.style.setProperty('--pcr-color', cssRGBaString);
 
         // Change only the button color if it isn't customized
         if (!this.options.useAsButton) {
-            button.style.color = cssRGBaString;
+            button.style.setProperty('--pcr-color', cssRGBaString);
         }
 
         // User changed the color so remove the clear clas

1�7dist/pickr.es5.min.js.map 1�7

@@ -36,7 +36,7 @@
         height: 100%;
         width: 100%;
         transition: background 0.3s;
-        background: currentColor;
+        background: var(--pcr-color);
         border-radius: $border-radius-mid;
     }
 
@@ -48,7 +48,7 @@
         }
 
         &:focus {
-            @include focus(currentColor);
+            @include focus(var(--pcr-color));
         }
     }
 
@@ -71,7 +71,7 @@
     button {
         &:focus,
         &.pcr-active {
-            @include focus(currentColor);
+            @include focus(var(--pcr-color));
         }
     }
 
@@ -146,7 +146,7 @@
                 left: 0;
                 width: 100%;
                 height: 100%;
-                background: currentColor;
+                background: var(--pcr-color);
                 border: 1px solid rgba(black, 0.05);
                 border-radius: 0.15em;
                 box-sizing: border-box;

1�7dist/pickr.min.js 1�7

@@ -35,7 +35,7 @@
 
             .pcr-last-color,
             .pcr-current-color {
-                background: currentColor;
+                background: var(--pcr-color);
                 width: 100%;
                 height: 50%;
             }