Ability to change color of outline using inline styles (#11)

* Initial commit post-fork

* Add function to use semantic colors to distinguish between different elements

* Update README.md

* Delete package-lock.json

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Add comments before PR

* Formatting

* - Removed comments
- Reverted default widthStart to 8px and widthEnd to 12px

Author: devncodex

README.md

@@ -6,7 +6,7 @@ A plugin that provides a helpful `?` dev time utility.
 
 ![example](https://user-images.githubusercontent.com/2526/248293688-da86d4e7-0955-40fb-8fb2-f892b270a9a8.gif)
 
-## Installation
+## [Installation](#installation "Goto Installation")
 
 Install the plugin from npm:
 
@@ -33,13 +33,19 @@ module.exports = {
 };
 ```
 
-## Usage
+## [Usage](#usage "Goto Usage")
 
 Simply add the `?` utility class to any element that you'd like to highlight.
+By default, the utility will animate the element with a pink highlight.
+
+Optionally, you can specify a color by using the `?-{color}` utility class with `{color}` being the semantic name. For
+example, `?-blue` will highlight the element with a blue color.
+
+![example](https://i.ibb.co/LvXtxLG/twcssqm-colors.gif)
 
 **Demo**: https://play.tailwindcss.com/fXhD65EpG4?layout=horizontal
 
-## Customizing
+## [Customizing](#customizing "Goto Customizing")
 
 Here's an example of how you can customize the plugin with the available configuration options and their defaults.
 

src/index.js

@@ -17,43 +17,68 @@ module.exports = plugin.withOptions(
     widthStart = "8px",
     widthEnd = "12px",
   } = {}) => {
-    return function ({ addUtilities, e }) {
+    return function ({ addUtilities, e, theme }) {
       const ANIMATION_NAME = "wobble";
       const OUTLINE_STYLE = "solid";
 
-      const widthStartPx = `${parsePx(widthStart, 8) / 2}px`;
-      const widthEndPx = `${parsePx(widthEnd, 12) / 2}px`;
-
-      const boxShadowStart = `inset ${widthStartPx} ${widthStartPx} ${highlightColorStart}, inset -${widthStartPx} -${widthStartPx} ${highlightColorStart}`;
-      const boxShadowEnd = `inset ${widthEndPx} ${widthEndPx} ${highlightColorEnd}, inset -${widthEndPx} -${widthEndPx} ${highlightColorEnd}`;
-
-      const animation = enableAnimation
-        ? `${e(
-            "?"
-          )}${ANIMATION_NAME} ${animationDuration} ease-in-out alternate infinite`
-        : "none";
-
-      addUtilities({
-        [`.${e("?")}`]: {
-          "outline-style": OUTLINE_STYLE,
-          "outline-width": widthStartPx,
-          "outline-color": highlightColorStart,
-          "box-shadow": boxShadowStart,
-          animation: animation,
-        },
-        [`@keyframes ${e("?")}${ANIMATION_NAME}`]: {
-          "0%": {
+      const createUtilitiesForColor = (colorStart, colorEnd, colorName) => {
+        const className = colorName ? `?-${colorName}` : "?";
+        const widthStartPx = `${parsePx(widthStart, 8) / 2}px`;
+        const widthEndPx = `${parsePx(widthEnd, 12) / 2}px`;
+
+        const boxShadowStart = `inset ${widthStartPx} ${widthStartPx} ${colorStart}, inset -${widthStartPx} -${widthStartPx} ${colorStart}`;
+        const boxShadowEnd = `inset ${widthEndPx} ${widthEndPx} ${colorEnd}, inset -${widthEndPx} -${widthEndPx} ${colorEnd}`;
+
+        const animation = enableAnimation
+          ? `${e(className)}${ANIMATION_NAME} ${animationDuration} ease-in-out alternate infinite`
+          : "none";
+
+        return {
+          [`.${e(className)}`]: {
+            "outline-style": OUTLINE_STYLE,
             "outline-width": widthStartPx,
-            "outline-color": highlightColorStart,
+            "outline-color": colorStart,
             "box-shadow": boxShadowStart,
+            animation: animation,
           },
-          "100%": {
-            "outline-width": widthEndPx,
-            "outline-color": highlightColorEnd,
-            "box-shadow": boxShadowEnd,
+          [`@keyframes ${e(className)}${ANIMATION_NAME}`]: {
+            "0%": {
+              "outline-width": widthStartPx,
+              "outline-color": colorStart,
+              "box-shadow": boxShadowStart,
+            },
+            "100%": {
+              "outline-width": widthEndPx,
+              "outline-color": colorEnd,
+              "box-shadow": boxShadowEnd,
+            },
           },
+        };
+      };
+
+      const defaultUtilities = createUtilitiesForColor(
+        highlightColorStart,
+        highlightColorEnd,
+      );
+
+      const customColors = theme("colors");
+      const customUtilities = Object.keys(customColors).reduce(
+        (acc, colorName) => {
+          const colorValueStart =
+            customColors[colorName][400] || customColors[colorName];
+          const colorValueEnd =
+            customColors[colorName][600] || customColors[colorName];
+          const utilities = createUtilitiesForColor(
+            colorValueStart,
+            colorValueEnd,
+            colorName,
+          );
+          return { ...acc, ...utilities };
         },
-      });
+        {},
+      );
+
+      addUtilities({ ...defaultUtilities, ...customUtilities });
     };
-  }
+  },
 );