feat: update plugins using toRgba

tailwindlabs · Mar 26, 2021 · 7d48da0 · 7d48da0
1 parent b9db0c4
commit 7d48da0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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(
       {