Add future flag to preserve custom, default ring color opacity (#8448)

* Add future flag to preserve ring color opacity

* Update changelog

src/corePlugins.js

@@ -1977,13 +1977,20 @@ export let corePlugins = {
     )
   },
 
-  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
-    let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
-    let ringColorDefault = withAlphaValue(
-      theme('ringColor')?.DEFAULT,
-      ringOpacityDefault,
-      `rgb(147 197 253 / ${ringOpacityDefault})`
-    )
+  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => {
+    let ringColorDefault = (() => {
+      if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) {
+        return theme('ringColor.DEFAULT')
+      }
+
+      let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
+
+      return withAlphaValue(
+        theme('ringColor')?.DEFAULT,
+        ringOpacityDefault,
+        `rgb(147 197 253 / ${ringOpacityDefault})`
+      )
+    })()
 
     addDefaults('ring-width', {
       '--tw-ring-inset': ' ',

src/featureFlags.js

@@ -6,7 +6,7 @@ let defaults = {
 }
 
 let featureFlags = {
-  future: ['hoverOnlyWhenSupported'],
+  future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
   experimental: ['optimizeUniversalDefaults', 'variantGrouping'],
 }
 

src/util/getAllConfigs.js

@@ -9,6 +9,13 @@ export default function getAllConfigs(config) {
 
   const features = {
     // Add experimental configs here...
+    respectDefaultRingColorOpacity: {
+      theme: {
+        ringColor: {
+          DEFAULT: '#3b82f67f',
+        },
+      },
+    },
   }
 
   const experimentals = Object.keys(features)