Created
August 23, 2023 19:18
-
-
Save simon-abbott/448955df5a1963fc54ae99069a13ef57 to your computer and use it in GitHub Desktop.
Tailwind ring offset background color
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diff --git a/node_modules/@tailwindcss/forms/src/index.js b/node_modules/@tailwindcss/forms/src/index.js | |
index 5d700f1..e30ecb5 100644 | |
--- a/node_modules/@tailwindcss/forms/src/index.js | |
+++ b/node_modules/@tailwindcss/forms/src/index.js | |
@@ -55,7 +55,6 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { | |
'outline-offset': '2px', | |
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', | |
'--tw-ring-offset-width': '0px', | |
- '--tw-ring-offset-color': '#fff', | |
'--tw-ring-color': resolveColor( | |
theme('colors.blue.600', colors.blue[600]), | |
'--tw-ring-opacity' | |
@@ -212,7 +211,6 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { | |
'outline-offset': '2px', | |
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', | |
'--tw-ring-offset-width': '2px', | |
- '--tw-ring-offset-color': '#fff', | |
'--tw-ring-color': resolveColor( | |
theme('colors.blue.600', colors.blue[600]), | |
'--tw-ring-opacity' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diff --git a/node_modules/tailwindcss/lib/corePlugins.js b/node_modules/tailwindcss/lib/corePlugins.js | |
index ece3b3f..ff46b97 100644 | |
--- a/node_modules/tailwindcss/lib/corePlugins.js | |
+++ b/node_modules/tailwindcss/lib/corePlugins.js | |
@@ -2690,16 +2690,19 @@ let corePlugins = { | |
backgroundColor: ({ matchUtilities , theme , corePlugins })=>{ | |
matchUtilities({ | |
bg: (value)=>{ | |
- if (!corePlugins("backgroundOpacity")) { | |
- return { | |
- "background-color": (0, _toColorValue.default)(value) | |
- }; | |
+ const styles = corePlugins('backgroundOpacity') | |
+ ? (0, _withAlphaVariable.default)({ | |
+ color: value, | |
+ property: 'background-color', | |
+ variable: '--tw-bg-opacity', | |
+ }) | |
+ : { 'background-color': (0, _toColorValue.default)(value) }; | |
+ if (corePlugins("ringOffsetColor")) { | |
+ styles["& > *"] = { | |
+ "--tw-ring-offset-color": (0, _toColorValue.default)(value) | |
+ } | |
} | |
- return (0, _withAlphaVariable.default)({ | |
- color: value, | |
- property: "background-color", | |
- variable: "--tw-bg-opacity" | |
- }); | |
+ return styles; | |
} | |
}, { | |
values: (0, _flattenColorPalette.default)(theme("backgroundColor")), | |
@@ -3719,7 +3722,7 @@ let corePlugins = { | |
] | |
}); | |
}, | |
- ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme , config })=>{ | |
+ ringWidth: ({ matchUtilities , addBase , addDefaults , addUtilities , theme , config })=>{ | |
let ringColorDefault = (()=>{ | |
var _theme, _theme1; | |
if ((0, _featureFlags.flagEnabled)(config(), "respectDefaultRingColorOpacity")) { | |
@@ -3734,13 +3737,17 @@ let corePlugins = { | |
addDefaults("ring-width", { | |
"--tw-ring-inset": " ", | |
"--tw-ring-offset-width": theme("ringOffsetWidth.DEFAULT", "0px"), | |
- "--tw-ring-offset-color": theme("ringOffsetColor.DEFAULT", "#fff"), | |
"--tw-ring-color": ringColorDefault, | |
"--tw-ring-offset-shadow": "0 0 #0000", | |
"--tw-ring-shadow": "0 0 #0000", | |
"--tw-shadow": "0 0 #0000", | |
"--tw-shadow-colored": "0 0 #0000" | |
}); | |
+ addBase({ | |
+ ":root": { | |
+ "--tw-ring-offset-color": theme("ringOffsetColor.DEFAULT", "#fff"), | |
+ } | |
+ }); | |
matchUtilities({ | |
ring: (value)=>{ | |
return { | |
@@ -3810,7 +3817,7 @@ let corePlugins = { | |
], { | |
type: "length" | |
}), | |
- ringOffsetColor: ({ matchUtilities , theme })=>{ | |
+ ringOffsetColor: ({ addUtilities , matchUtilities , theme })=>{ | |
matchUtilities({ | |
"ring-offset": (value)=>{ | |
return { | |
@@ -3824,6 +3831,11 @@ let corePlugins = { | |
"any" | |
] | |
}); | |
+ addUtilities({ | |
+ ".ring-offset-default": { | |
+ "--tw-ring-offset-color": theme("ringOffsetColor.DEFAULT", "#fff"), | |
+ } | |
+ }); | |
}, | |
blur: ({ matchUtilities , theme })=>{ | |
matchUtilities({ | |
diff --git a/node_modules/tailwindcss/src/corePlugins.js b/node_modules/tailwindcss/src/corePlugins.js | |
index e4d2ff2..8345595 100644 | |
--- a/node_modules/tailwindcss/src/corePlugins.js | |
+++ b/node_modules/tailwindcss/src/corePlugins.js | |
@@ -1721,17 +1721,21 @@ export let corePlugins = { | |
matchUtilities( | |
{ | |
bg: (value) => { | |
- if (!corePlugins('backgroundOpacity')) { | |
- return { | |
- 'background-color': toColorValue(value), | |
+ const styles = corePlugins('backgroundOpacity') | |
+ ? withAlphaVariable({ | |
+ color: value, | |
+ property: 'background-color', | |
+ variable: '--tw-bg-opacity', | |
+ }) | |
+ : { 'background-color': toColorValue(value) } | |
+ | |
+ if (corePlugins('ringOffsetColor')) { | |
+ styles["& > *"] = { | |
+ "--tw-ring-offset-color": toColorValue(value) | |
} | |
} | |
- return withAlphaVariable({ | |
- color: value, | |
- property: 'background-color', | |
- variable: '--tw-bg-opacity', | |
- }) | |
+ return styles; | |
}, | |
}, | |
{ values: flattenColorPalette(theme('backgroundColor')), type: ['color', 'any'] } | |
@@ -2391,7 +2395,7 @@ export let corePlugins = { | |
) | |
}, | |
- ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => { | |
+ ringWidth: ({ matchUtilities, addBase, addDefaults, addUtilities, theme, config }) => { | |
let ringColorDefault = (() => { | |
if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) { | |
return theme('ringColor.DEFAULT') | |
@@ -2413,7 +2417,6 @@ export let corePlugins = { | |
addDefaults('ring-width', { | |
'--tw-ring-inset': ' ', | |
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'), | |
- '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'), | |
'--tw-ring-color': ringColorDefault, | |
'--tw-ring-offset-shadow': '0 0 #0000', | |
'--tw-ring-shadow': '0 0 #0000', | |
@@ -2421,6 +2424,12 @@ export let corePlugins = { | |
'--tw-shadow-colored': '0 0 #0000', | |
}) | |
+ addBase({ | |
+ ':root': { | |
+ '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'), | |
+ }, | |
+ }) | |
+ | |
matchUtilities( | |
{ | |
ring: (value) => { | |
@@ -2485,7 +2494,7 @@ export let corePlugins = { | |
{ type: 'length' } | |
), | |
- ringOffsetColor: ({ matchUtilities, theme }) => { | |
+ ringOffsetColor: ({ addUtilities, matchUtilities, theme }) => { | |
matchUtilities( | |
{ | |
'ring-offset': (value) => { | |
@@ -2496,6 +2505,12 @@ export let corePlugins = { | |
}, | |
{ values: flattenColorPalette(theme('ringOffsetColor')), type: ['color', 'any'] } | |
) | |
+ | |
+ addUtilities({ | |
+ '.ring-offset-default': { | |
+ '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'), | |
+ } | |
+ }) | |
}, | |
blur: ({ matchUtilities, theme }) => { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
These patches are designed to address tailwindlabs/tailwindcss#8421 until an official solution emerges. You can apply them manually, but I recommend using patch-package.