feat: update plugins using toRgba

tailwindlabs · Mar 26, 2021 · 74e496b · 74e496b
1 parent b9db0c4
commit 74e496b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 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,20 +1,21 @@
 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 }) {
-    function safeCall(callback, defaultValue) {
+    const ringColorDefault = (() => {
+      const isHSL = (theme('ringColor.DEFAULT') || '').startsWith('hsl')
+      const opacity = theme('ringOpacity.DEFAULT', '0.5')
       try {
-        return callback()
+        const [i, j, k] = isHSL
+          ? toHsla(theme('ringColor.DEFAULT'))
+          : toRgba(theme('ringColor.DEFAULT'))
+        return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, ${opacity})`
       } catch (_error) {
-        return defaultValue
+        return `rgba(147, 197, 253, ${opacity})`
       }
-    }
-
-    const ringColorDefault = (([r, g, b]) => {
-      return `rgba(${r}, ${g}, ${b}, ${theme('ringOpacity.DEFAULT', '0.5')})`
-    })(safeCall(() => toRgba(theme('ringColor.DEFAULT')), ['147', '197', '253']))
+    })()
 
     addUtilities(
       {