diff --git a/src/corePlugins.js b/src/corePlugins.js index 5309475ce4ca..fb565735824c 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1646,6 +1646,38 @@ export let corePlugins = { ) }, + textEmphasis: ({ addUtilities }) => { + addUtilities({ + '.emphasis-filled': { 'text-emphasis': 'filled' }, + '.emphasis-open': { 'text-emphasis': 'open' }, + '.emphasis-dot': { 'text-emphasis': 'dot' }, + '.emphasis-circle': { 'text-emphasis': 'circle' }, + '.emphasis-double-circle': { 'text-emphasis': 'double-circle' }, + '.emphasis-triangle': { 'text-emphasis': 'triangle' }, + '.emphasis-sesame': { 'text-emphasis': 'sesame' }, + }) + }, + + textEmphasisColor: ({ matchUtilities, theme }) => { + matchUtilities( + { + emphasis: (value) => { + return { 'text-emphasis-color': toColorValue(value) } + }, + }, + { values: flattenColorPalette(theme('textEmphasisColor')), type: ['color', 'any'] } + ) + }, + + textEmphasisPosition: ({ addUtilities }) => { + addUtilities({ + '.emphasis-over': { 'text-emphasis-position': 'over' }, + '.emphasis-under': { 'text-emphasis-position': 'under' }, + '.emphasis-right': { 'text-emphasis-position': 'right' }, + '.emphasis-left': { 'text-emphasis-position': 'left' }, + }) + }, + fontSmoothing: ({ addUtilities }) => { addUtilities({ '.antialiased': { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 423f12e8a1dd..bb4fffc70e4b 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -797,6 +797,7 @@ module.exports = { }, textColor: ({ theme }) => theme('colors'), textDecorationColor: ({ theme }) => theme('colors'), + textEmphasisColor: ({ theme }) => theme('colors'), textIndent: ({ theme }) => ({ ...theme('spacing'), }), diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 4619b5b00c9c..44eb84167c9e 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -825,6 +825,24 @@ .decoration-\[var\(--color\)\] { text-decoration-color: var(--color); } +.emphasis-\[black\] { + text-emphasis-color: black; +} +.emphasis-\[rgb\(123\2c 123\2c 123\)\] { + text-emphasis-color: rgb(123, 123, 123); +} +.emphasis-\[rgb\(123\2c _123\2c _123\)\] { + text-emphasis-color: rgb(123, 123, 123); +} +.emphasis-\[rgb\(123_123_123\)\] { + text-emphasis-color: rgb(123 123 123); +} +.emphasis-\[color\:var\(--color\)\] { + text-emphasis-color: var(--color); +} +.emphasis-\[var\(--color\)\] { + text-emphasis-color: var(--color); +} .placeholder-\[var\(--placeholder\)\]::placeholder { color: var(--placeholder); } diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html index 71a012c699e8..e90a94e15dc3 100644 --- a/tests/arbitrary-values.test.html +++ b/tests/arbitrary-values.test.html @@ -305,6 +305,13 @@
+
+
+
+
+
+
+
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 3e491b6b07ee..bdba6cf9b625 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -776,6 +776,15 @@ .decoration-red-600 { text-decoration-color: #dc2626; } +.emphasis-filled { + text-emphasis: filled; +} +.emphasis-red-600 { + text-emphasis-color: #dc2626; +} +.emphasis-over { + text-emphasis-position: over; +} .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html index 9d90c57a6629..d871aaf1dd51 100644 --- a/tests/basic-usage.test.html +++ b/tests/basic-usage.test.html @@ -161,6 +161,9 @@
+
+
+