From 7d48da065a675ac4d144d1255b4a9b222bb37aba Mon Sep 17 00:00:00 2001
From: Federico Ciardi <fed.ciardi@gmail.com>
Date: Fri, 26 Mar 2021 21:32:14 +0100
Subject: [PATCH] feat: update plugins using `toRgba`

---
 src/plugins/gradientColorStops.js |  7 ++++---
 src/plugins/ringWidth.js          | 13 +++++++++----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/plugins/gradientColorStops.js b/src/plugins/gradientColorStops.js
index 800dcbe774f0..23a5f1709b4b 100644
--- a/src/plugins/gradientColorStops.js
+++ b/src/plugins/gradientColorStops.js
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
-import { toRgba } from '../util/withAlphaVariable'
+import { toRgba, toHsla } from '../util/withAlphaVariable'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
@@ -16,8 +16,9 @@ export default function () {
           }
 
           try {
-            const [r, g, b] = toRgba(value)
-            return `rgba(${r}, ${g}, ${b}, 0)`
+            const isHSL = value.startsWith('hsl')
+            const [i, j, k] = isHSL ? toHsla(value) : toRgba(value)
+            return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, 0)`
           } catch (_error) {
             return `rgba(255, 255, 255, 0)`
           }
diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js
index d2300620f0a8..76026b5b98f9 100644
--- a/src/plugins/ringWidth.js
+++ b/src/plugins/ringWidth.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import nameClass from '../util/nameClass'
-import { toRgba } from '../util/withAlphaVariable'
+import { toHsla, toRgba } from '../util/withAlphaVariable'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
@@ -12,9 +12,14 @@ export default function () {
       }
     }
 
-    const ringColorDefault = (([r, g, b]) => {
-      return `rgba(${r}, ${g}, ${b}, ${theme('ringOpacity.DEFAULT', '0.5')})`
-    })(safeCall(() => toRgba(theme('ringColor.DEFAULT')), ['147', '197', '253']))
+    const ringColorDefault = (() => {
+      const isHSL = (theme('ringColor.DEFAULT') || '').startsWith('hsl')
+      const [i, j, k] = safeCall(
+        () => (isHSL ? toHsla(theme('ringColor.DEFAULT')) : toRgba(theme('ringColor.DEFAULT'))),
+        ['147', '197', '253']
+      )
+      return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, ${theme('ringOpacity.DEFAULT', '0.5')})`
+    })()
 
     addUtilities(
       {